API tools faq
paste
Guest User

черные сплетни

a guest
Dec 23rd, 2025
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.02 KB | None | 0 0
raw download clone embed print report
  1. ```
  2. <!DOCTYPE html>
  3. <html lang="ru">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>High-End Gossip Layout – Compact (Dark)</title>
  8. <style>
  9. @import url("https://fontsapi.zeoseven.com/309/main/result.css"); /* KingHwaOldSong */
  10.  
  11. :root {
  12. --paper-bg: #0d0d10;
  13. --paper-bg-soft: #141418;
  14. --ink-primary: #f2f2f2;
  15. --ink-secondary: #a0a0a5;
  16. --accent-gold: #d1b574;
  17. --border-subtle: rgba(255,255,255,0.08);
  18. }
  19.  
  20. body {
  21. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  22. display: flex;
  23. justify-content: center;
  24. padding: 20px;
  25. background-color: #050507;
  26. color: var(--ink-primary);
  27. }
  28.  
  29. .gossip-root {
  30. width: 100%;
  31. max-width: 500px;
  32. background: var(--paper-bg);
  33. border-radius: 4px;
  34. overflow: hidden;
  35. position: relative;
  36. border: 1px solid var(--border-subtle);
  37. transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  38. }
  39.  
  40. .gossip-root::before {
  41. content: '';
  42. position: absolute;
  43. top: 0; left: 0; right: 0; height: 2px;
  44. background: linear-gradient(90deg, var(--accent-gold), rgba(209,181,116,0.35));
  45. z-index: 5;
  46. }
  47.  
  48. /* компактный header */
  49. .gossip-root summary {
  50. list-style: none;
  51. padding: 10px 14px;
  52. cursor: pointer;
  53. position: relative;
  54. display: flex;
  55. justify-content: space-between;
  56. align-items: center;
  57. background: var(--paper-bg);
  58. transition: background 0.2s, padding 0.2s;
  59. z-index: 10;
  60. }
  61. .gossip-root summary::-webkit-details-marker { display: none; }
  62. .gossip-root summary::marker { content: ""; }
  63. .gossip-root summary:hover { background: #16161b; }
  64. .gossip-root summary:focus { outline: none; }
  65.  
  66. .gossip-root[open] summary {
  67. padding-top: 14px;
  68. padding-bottom: 12px;
  69. background: var(--paper-bg-soft);
  70. }
  71. .gossip-root[open] {
  72. border-color: rgba(209,181,116,0.5);
  73. transform: translateY(-1px);
  74. }
  75.  
  76. .chat-meta {
  77. display: flex;
  78. flex-direction: column;
  79. gap: 2px;
  80. min-width: 0;
  81. }
  82.  
  83. .chat-title {
  84. font-family: 'Georgia', 'Playfair Display', serif;
  85. font-size: 0.98rem;
  86. color: var(--ink-primary);
  87. font-weight: 600;
  88. letter-spacing: -0.01em;
  89. white-space: nowrap;
  90. overflow: hidden;
  91. text-overflow: ellipsis;
  92. max-width: 240px;
  93. }
  94.  
  95. .chat-status {
  96. font-family: 'Courier New', monospace;
  97. font-size: 0.62rem;
  98. color: var(--ink-secondary);
  99. text-transform: uppercase;
  100. letter-spacing: 0.12em;
  101. white-space: nowrap;
  102. overflow: hidden;
  103. text-overflow: ellipsis;
  104. max-width: 260px;
  105. }
  106.  
  107. .toggle-icon {
  108. color: var(--ink-secondary);
  109. font-size: 0.95rem;
  110. transition: transform 0.3s ease;
  111. margin-left: 8px;
  112. flex-shrink: 0;
  113. }
  114. .gossip-root[open] .toggle-icon { transform: rotate(180deg); }
  115.  
  116. .chat-messages {
  117. padding: 10px 16px 24px 16px;
  118. display: flex;
  119. flex-direction: column;
  120. gap: 16px;
  121. border-top: 1px dashed rgba(255,255,255,0.12);
  122. background: linear-gradient(to bottom, var(--paper-bg-soft) 0%, #101015 45%, #0b0b0f 100%);
  123. }
  124.  
  125. .gossip-root[open] .chat-messages {
  126. animation: slideDown 0.5s ease forwards;
  127. }
  128.  
  129. @keyframes slideDown {
  130. from { opacity: 0; transform: translateY(-8px); }
  131. to { opacity: 1; transform: translateY(0); }
  132. }
  133.  
  134. .message {
  135. display: flex;
  136. align-items: flex-start;
  137. max-width: 90%;
  138. opacity: 0;
  139. transform: translateY(10px);
  140. }
  141. .message.animate-in {
  142. animation: fadeInUp 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  143. }
  144.  
  145. .avatar {
  146. width: 32px;
  147. height: 32px;
  148. border-radius: 50%;
  149. background-color: #25252b;
  150. color: var(--ink-primary);
  151. display: flex;
  152. justify-content: center;
  153. align-items: center;
  154. font-family: 'Georgia', serif;
  155. font-weight: bold;
  156. font-size: 16px;
  157. margin-right: 10px;
  158. flex-shrink: 0;
  159. border: 1px solid rgba(255,255,255,0.12);
  160. }
  161.  
  162. .message-content {
  163. display: flex;
  164. flex-direction: column;
  165. }
  166.  
  167. .username {
  168. font-size: 0.72rem;
  169. color: var(--ink-secondary);
  170. margin-bottom: 3px;
  171. font-weight: 600;
  172. margin-left: 2px;
  173. }
  174.  
  175. .bubble {
  176. padding: 8px 12px;
  177. font-size: 0.9rem;
  178. line-height: 1.5;
  179. color: #f3f3f3;
  180. border-radius: 11px;
  181. border-top-left-radius: 2px;
  182. position: relative;
  183. background: #1c1c22;
  184. border: 1px solid rgba(255,255,255,0.06);
  185. }
  186.  
  187. .bubble span.gif-text {
  188. font-family: 'Courier New', monospace;
  189. font-size: 0.85em;
  190. color: var(--accent-gold);
  191. background-color: rgba(0,0,0,0.4);
  192. padding: 0 4px;
  193. border-radius: 3px;
  194. }
  195.  
  196. @keyframes fadeInUp {
  197. to { opacity: 1; transform: translateY(0); }
  198. }
  199.  
  200. @media (max-width: 480px) {
  201. .gossip-root { max-width: 100%; }
  202. .chat-title { max-width: 180px; }
  203. .chat-status { max-width: 200px; }
  204. .chat-messages { padding: 8px 12px 18px; }
  205. }
  206. </style>
  207. </head>
  208. <body>
  209.  
  210. <details class="gossip-root" id="gossip-details">
  211. <summary>
  212. <div class="chat-meta">
  213. <span class="chat-title" id="group-name">Gossip Protocol</span>
  214. <span class="chat-status">Encrypted Log // Click to Expand</span>
  215. </div>
  216. <div class="toggle-icon">▼</div>
  217. </summary>
  218.  
  219. <div class="chat-messages" id="chat-messages">
  220. <!-- JS заполнит это -->
  221. </div>
  222. </details>
  223.  
  224. <div id="raw-data" style="display: none;">
  225. $1
  226. </div>
  227.  
  228. <script>
  229. document.addEventListener('DOMContentLoaded', function() {
  230. const rawDataElement = document.getElementById('raw-data');
  231. const groupNameElement = document.getElementById('group-name');
  232. const chatMessagesContainer = document.getElementById('chat-messages');
  233. const detailsBlock = document.getElementById('gossip-details');
  234.  
  235. const morandiColors = [
  236. '#272730', '#20222b', '#262933', '#1f252e',
  237. '#292a35', '#232630', '#252934', '#21242f'
  238. ];
  239.  
  240. const shuffleArray = (array) => {
  241. let currentIndex = array.length, randomIndex;
  242. while (currentIndex !== 0) {
  243. randomIndex = Math.floor(Math.random() * currentIndex);
  244. currentIndex--;
  245. [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  246. }
  247. return array;
  248. };
  249.  
  250. const shuffledColors = shuffleArray([...morandiColors]);
  251.  
  252. const rawText = rawDataElement.textContent;
  253. const lines = rawText.split('\n').filter(line => line.trim() !== '');
  254.  
  255. const groupNameRegex = /【(.*?)】/;
  256. const messageRegex = /(.+?)[：:](.*)/;
  257. const cleanupRegex = /^\s*[>—\s]*/;
  258.  
  259. let messageCounter = 0;
  260.  
  261. const groupNameMatch = rawText.match(groupNameRegex);
  262. if(groupNameMatch) {
  263. groupNameElement.textContent = groupNameMatch[1].trim();
  264. }
  265.  
  266. lines.forEach((line) => {
  267. const cleanedLine = line.replace(cleanupRegex, '').trim();
  268. if (!cleanedLine) return;
  269.  
  270. const messageMatch = cleanedLine.match(messageRegex);
  271.  
  272. if (messageMatch) {
  273. const userBlock = messageMatch[1].trim();
  274. const messageText = messageMatch[2].trim();
  275.  
  276. if (!userBlock || userBlock.startsWith('【')) return;
  277.  
  278. const avatarChar = [...userBlock][0];
  279. const username = userBlock.substring(avatarChar.length).trim();
  280.  
  281. const messageDiv = document.createElement('div');
  282. messageDiv.className = 'message';
  283.  
  284. const avatarDiv = document.createElement('div');
  285. avatarDiv.className = 'avatar';
  286. avatarDiv.textContent = avatarChar;
  287.  
  288. const messageContentDiv = document.createElement('div');
  289. messageContentDiv.className = 'message-content';
  290.  
  291. const usernameDiv = document.createElement('div');
  292. usernameDiv.className = 'username';
  293. usernameDiv.textContent = username;
  294.  
  295. const bubbleDiv = document.createElement('div');
  296. bubbleDiv.className = 'bubble';
  297. bubbleDiv.style.backgroundColor = shuffledColors[messageCounter % shuffledColors.length];
  298.  
  299. const processedMessageHTML = messageText.replace(
  300. /[(（](.*?)[)）]/g,
  301. (match) => `<span class="gif-text">${match}</span>`
  302. );
  303. bubbleDiv.innerHTML = processedMessageHTML;
  304.  
  305. messageContentDiv.appendChild(usernameDiv);
  306. messageContentDiv.appendChild(bubbleDiv);
  307. messageDiv.appendChild(avatarDiv);
  308. messageDiv.appendChild(messageContentDiv);
  309. chatMessagesContainer.appendChild(messageDiv);
  310.  
  311. messageCounter++;
  312. }
  313. });
  314.  
  315. let hasAnimated = false;
  316.  
  317. const runAnimations = () => {
  318. if(hasAnimated) return;
  319. const messages = document.querySelectorAll('.message');
  320. messages.forEach((msg, index) => {
  321. setTimeout(() => {
  322. msg.classList.add('animate-in');
  323. }, index * 120);
  324. });
  325. hasAnimated = true;
  326. };
  327.  
  328. if(detailsBlock.hasAttribute('open')) {
  329. runAnimations();
  330. }
  331.  
  332. detailsBlock.addEventListener('toggle', function() {
  333. if (this.open) {
  334. runAnimations();
  335. }
  336. });
  337. });
  338. </script>
  339.  
  340. </body>
  341. </html>
  342. ```
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!