ролролр
лол
Страница: 1
Сообщений 1 страница 4 из 4
Поделиться12026-05-23 14:28:10
- Администратор
- 2000
- Сообщений: 201
- Уважение: [+0/-1]
- Позитив: [+3/-1]
Поделиться22026-05-23 14:29:55
- Администратор
- 2000
- Сообщений: 201
- Уважение: [+0/-1]
- Позитив: [+3/-1]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Иденмарк · Ответ капитана</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: radial-gradient(circle at 30% 10%, #1a1c22, #0e1015);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
padding: 2rem 1.5rem;
}
.forum-container {
max-width: 880px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.hologram-panel {
background: rgba(28, 30, 38, 0.55);
backdrop-filter: blur(12px);
border-radius: 2rem;
border: 1px solid rgba(100, 210, 255, 0.25);
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(80, 180, 255, 0.1) inset, 0 0 12px rgba(70, 190, 255, 0.2);
transition: all 0.25s ease;
padding: 1.6rem 2rem;
}
.hologram-panel:hover {
border-color: rgba(100, 210, 255, 0.55);
box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(80, 200, 255, 0.2) inset, 0 0 18px rgba(60, 180, 255, 0.3);
background: rgba(28, 30, 40, 0.68);
}
.viz-panel {
padding: 1rem 1.5rem 1.2rem 1.5rem;
}
.content-panel {
transition: transform 0.2s;
}
.post-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(100, 190, 255, 0.3);
}
.post-meta {
font-size: 0.75rem;
font-family: 'Fira Mono', 'JetBrains Mono', monospace;
color: #9aaec9;
background: rgba(0, 20, 40, 0.5);
padding: 0.25rem 0.9rem;
border-radius: 2rem;
letter-spacing: 0.3px;
border: 0.5px solid rgba(90, 180, 255, 0.3);
}
.post-content {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.post-content p {
font-size: 1rem;
line-height: 1.65;
color: #e2e9f5;
font-weight: 400;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
letter-spacing: 0.01em;
}
.ai-speech {
font-family: 'Fira Mono', 'JetBrains Mono', monospace;
font-size: 0.95rem;
line-height: 1.5;
color: #b4dcff;
background: rgba(0, 25, 45, 0.5);
border-left: 4px solid #3fa2d0;
padding: 0.8rem 1.2rem;
margin: 0.4rem 0;
border-radius: 0 12px 12px 0;
box-shadow: 0 0 10px rgba(60, 180, 255, 0.15);
backdrop-filter: blur(4px);
letter-spacing: 0.2px;
}
strong {
font-weight: 500;
color: #cbe5ff;
}
.viz-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #84b3e0;
font-family: monospace;
opacity: 0.7;
display: flex;
align-items: center;
gap: 8px;
}
.viz-label span {
display: inline-block;
width: 8px;
height: 8px;
background: #4fc3ff;
border-radius: 50%;
box-shadow: 0 0 6px #0af;
animation: pulseDot 1.8s infinite;
}
.abstract-net {
width: 100%;
margin: 0.25rem 0 0.5rem 0;
}
.svg-viz {
width: 100%;
height: auto;
filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.3));
}
@keyframes pulseDot {
0% { opacity: 0.4; box-shadow: 0 0 0 0px rgba(79, 195, 255, 0.6); }
100% { opacity: 1; box-shadow: 0 0 0 4px rgba(79, 195, 255, 0); }
}
@keyframes waveLine {
0% { opacity: 0.2; transform: scaleX(0.95); }
100% { opacity: 0.9; transform: scaleX(1); }
}
.glow-lines {
display: flex;
justify-content: space-between;
gap: 6px;
margin-top: 0.5rem;
}
.glow-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, #4fc3ff, #b0e0ff, #4fc3ff, transparent);
border-radius: 2px;
opacity: 0.6;
animation: waveLine 3s infinite alternate;
}
.glow-line:nth-child(2) { animation-delay: 0.4s; opacity: 0.4; }
.glow-line:nth-child(3) { animation-delay: 0.9s; }
.hologram-panel {
position: relative;
overflow: hidden;
}
.hologram-panel::after {
content: '';
position: absolute;
top: 0;
left: -30%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(100, 210, 255, 0.08), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
@media (max-width: 640px) {
body { padding: 1rem; }
.hologram-panel { padding: 1.2rem 1.4rem; }
.post-content p { font-size: 0.92rem; }
}
.post-content p::before,
.post-content p::after {
content: none;
}
</style>
</head>
<body>
<div class="forum-container">
<!-- Голографическая визуализация -->
<div class="hologram-panel viz-panel">
<div class="hologram-visual">
<div class="viz-label">
<span></span> ГОЛОГРАММА · ДИНАМИКА
</div>
<div class="abstract-net">
<svg class="svg-viz" viewBox="0 0 500 90" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="lineGlow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2f6f9f" stop-opacity="0.1"/>
<stop offset="50%" stop-color="#5fc3ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#2f6f9f" stop-opacity="0.1"/>
</linearGradient>
<filter id="glowFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<line x1="60" y1="45" x2="220" y2="25" stroke="url(#lineGlow)" stroke-width="1.8" stroke-dasharray="6 4" opacity="0.85">
<animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2s" repeatCount="indefinite" />
</line>
<line x1="220" y1="25" x2="380" y2="60" stroke="url(#lineGlow)" stroke-width="1.8" stroke-dasharray="5 5" opacity="0.85">
<animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2.4s" repeatCount="indefinite" />
</line>
<circle cx="60" cy="45" r="6" fill="none" stroke="#4fc3ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="4;7;4" dur="1.8s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="60" cy="45" r="2.5" fill="#a0dcff" stroke="none">
<animate attributeName="r" values="2;3.5;2" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="25" r="5.5" fill="none" stroke="#6bc8ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="3.5;6.5;3.5" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="25" r="2" fill="#b3e4ff" />
<circle cx="380" cy="60" r="6" fill="none" stroke="#5bc0ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="4;7;4" dur="2.2s" repeatCount="indefinite" />
</circle>
<circle cx="380" cy="60" r="2.5" fill="#bbecff" />
</svg>
</div>
<div class="glow-lines">
<div class="glow-line"></div>
<div class="glow-line"></div>
<div class="glow-line"></div>
<div class="glow-line"></div>
</div>
<div class="viz-label" style="justify-content: flex-end; margin-top: 2px;">
<span style="background:#6ec8ff;"></span> СИНХРОНИЗАЦИЯ · НЕСТАБИЛЬНА
</div>
</div>
</div>
<!-- Ответ Хельги -->
<div class="hologram-panel content-panel">
<div class="post-header">
<div class="post-meta">✧ запись ✧</div>
</div>
<div class="post-content">
<p><strong>— Слушай, если они еще до этого подпишут все необходимые бумаги, то у меня появится куча свободного времени. В целом, минусов не наблюдаю,</strong> — даже заодно кивнула. Да, действительно, минусов нет. Хотя идея с тем, что у неё будут подобные записи - более чем устраивает. <strong>— Я уже представляю лица тех, кто пойдет в душ или на толчок, а там включается лекция или презентация с голограммой. Полагаю, запора не будет у получателя.</strong></p>
<p><strong>— Вот. И обучаются, и заплату отдают, и Ворчун доволен, и ты время экономишь. Много плюсов,</strong> — улыбнулась Элизабет.</p>
<p><strong>— Поэтому я от него не отказываюсь. Но всё жду когда ты мне корвет подаришь какой-нибудь, чтобы я сбегала от своих очаровательных секретарей в космос,</strong> — Бет намекает. Прямо. Свою зарплату не озвучивает, а вот получить движимую недвижимость в подарок точно не отказалась бы. К тому же старшая сестра знает в этом толк, а значит никакую фигню не подарит. </p>
<p><strong>— Чтобы младший заметил, нужно совершить знатный обвал акций. Причем без быстрой возможности взлететь,</strong> — хихикнула. В целом, как раз на исключение подобных случаев и нужны остальные. Разобраться с предателями, найти крыс, получить преимущество, выступить в СМИ. И Эли прекрасно знала, что в кризисе Рой работает на максимум. Там уже нельзя даже виски из коллекции отжать, сказав, что это для важных переговоров Элизабет Иденмарк с Элизабет Иденмарк.</p>
<p><strong>— Вот и отлично. Посплетничают, развлекутся, найдут мне кандидатов, заполнят всё инфо-поле моим несуществующим ухажером, получу приглашения, ухаживания, посвечусь на экранах еще больше, а после Ворчун вышлет новую работу в виде лекций. План шикарен, </strong> — Эли определенно нашла плюс. Даже много плюсов. </p>
</div>
</div>
<!-- Декоративная линия -->
<div style="display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.2rem; opacity: 0.5;">
<div style="width: 40px; height: 1px; background: #2f6491;"></div>
<div style="width: 12px; height: 1px; background: #5fa7d9;"></div>
<div style="width: 40px; height: 1px; background: #2f6491;"></div>
</div>
</div>
</body>
</html>[/html]
Поделиться32026-05-23 14:36:11
- Администратор
- 2000
- Сообщений: 201
- Уважение: [+0/-1]
- Позитив: [+3/-1]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Иденмарк · Ответ капитана</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: radial-gradient(circle at 30% 10%, #1a1c22, #0e1015);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
padding: 2rem 1.5rem;
}
.forum-container {
max-width: 880px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.hologram-panel {
background: rgba(28, 30, 38, 0.55);
backdrop-filter: blur(12px);
border-radius: 2rem;
border: 1px solid rgba(100, 210, 255, 0.25);
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(80, 180, 255, 0.1) inset, 0 0 12px rgba(70, 190, 255, 0.2);
transition: all 0.25s ease;
padding: 1.6rem 2rem;
}
.hologram-panel:hover {
border-color: rgba(100, 210, 255, 0.55);
box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(80, 200, 255, 0.2) inset, 0 0 18px rgba(60, 180, 255, 0.3);
background: rgba(28, 30, 40, 0.68);
}
.viz-panel {
padding: 1rem 1.5rem 1.2rem 1.5rem;
}
.content-panel {
transition: transform 0.2s;
}
.post-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(100, 190, 255, 0.3);
}
.post-meta {
font-size: 0.75rem;
font-family: 'Fira Mono', 'JetBrains Mono', monospace;
color: #9aaec9;
background: rgba(0, 20, 40, 0.5);
padding: 0.25rem 0.9rem;
border-radius: 2rem;
letter-spacing: 0.3px;
border: 0.5px solid rgba(90, 180, 255, 0.3);
}
.post-content {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.post-content p {
font-size: 1rem;
line-height: 1.65;
color: #e2e9f5;
font-weight: 400;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
letter-spacing: 0.01em;
}
.ai-speech {
font-family: 'Fira Mono', 'JetBrains Mono', monospace;
font-size: 0.95rem;
line-height: 1.5;
color: #b4dcff;
background: rgba(0, 25, 45, 0.5);
border-left: 4px solid #3fa2d0;
padding: 0.8rem 1.2rem;
margin: 0.4rem 0;
border-radius: 0 12px 12px 0;
box-shadow: 0 0 10px rgba(60, 180, 255, 0.15);
backdrop-filter: blur(4px);
letter-spacing: 0.2px;
}
strong {
font-weight: 500;
color: #cbe5ff;
}
.viz-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #84b3e0;
font-family: monospace;
opacity: 0.7;
display: flex;
align-items: center;
gap: 8px;
}
.viz-label span {
display: inline-block;
width: 8px;
height: 8px;
background: #4fc3ff;
border-radius: 50%;
box-shadow: 0 0 6px #0af;
animation: pulseDot 1.8s infinite;
}
.abstract-net {
width: 100%;
margin: 0.25rem 0 0.5rem 0;
}
.svg-viz {
width: 100%;
height: auto;
filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.3));
}
@keyframes pulseDot {
0% { opacity: 0.4; box-shadow: 0 0 0 0px rgba(79, 195, 255, 0.6); }
100% { opacity: 1; box-shadow: 0 0 0 4px rgba(79, 195, 255, 0); }
}
@keyframes waveLine {
0% { opacity: 0.2; transform: scaleX(0.95); }
100% { opacity: 0.9; transform: scaleX(1); }
}
.glow-lines {
display: flex;
justify-content: space-between;
gap: 6px;
margin-top: 0.5rem;
}
.glow-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, #4fc3ff, #b0e0ff, #4fc3ff, transparent);
border-radius: 2px;
opacity: 0.6;
animation: waveLine 3s infinite alternate;
}
.glow-line:nth-child(2) { animation-delay: 0.4s; opacity: 0.4; }
.glow-line:nth-child(3) { animation-delay: 0.9s; }
.hologram-panel {
position: relative;
overflow: hidden;
}
.hologram-panel::after {
content: '';
position: absolute;
top: 0;
left: -30%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(100, 210, 255, 0.08), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
@media (max-width: 640px) {
body { padding: 1rem; }
.hologram-panel { padding: 1.2rem 1.4rem; }
.post-content p { font-size: 0.92rem; }
}
.post-content p::before,
.post-content p::after {
content: none;
}
</style>
</head>
<body>
<div class="forum-container">
<!-- Голографическая визуализация -->
<div class="hologram-panel viz-panel">
<div class="hologram-visual">
<div class="viz-label">
<span></span> ГОЛОГРАММА · ДИНАМИКА
</div>
<div class="abstract-net">
<svg class="svg-viz" viewBox="0 0 500 90" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="lineGlow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2f6f9f" stop-opacity="0.1"/>
<stop offset="50%" stop-color="#5fc3ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#2f6f9f" stop-opacity="0.1"/>
</linearGradient>
<filter id="glowFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<line x1="60" y1="45" x2="220" y2="25" stroke="url(#lineGlow)" stroke-width="1.8" stroke-dasharray="6 4" opacity="0.85">
<animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2s" repeatCount="indefinite" />
</line>
<line x1="220" y1="25" x2="380" y2="60" stroke="url(#lineGlow)" stroke-width="1.8" stroke-dasharray="5 5" opacity="0.85">
<animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2.4s" repeatCount="indefinite" />
</line>
<circle cx="60" cy="45" r="6" fill="none" stroke="#4fc3ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="4;7;4" dur="1.8s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="60" cy="45" r="2.5" fill="#a0dcff" stroke="none">
<animate attributeName="r" values="2;3.5;2" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="25" r="5.5" fill="none" stroke="#6bc8ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="3.5;6.5;3.5" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="25" r="2" fill="#b3e4ff" />
<circle cx="380" cy="60" r="6" fill="none" stroke="#5bc0ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="4;7;4" dur="2.2s" repeatCount="indefinite" />
</circle>
<circle cx="380" cy="60" r="2.5" fill="#bbecff" />
</svg>
</div>
<div class="glow-lines">
<div class="glow-line"></div>
<div class="glow-line"></div>
<div class="glow-line"></div>
<div class="glow-line"></div>
</div>
<div class="viz-label" style="justify-content: flex-end; margin-top: 2px;">
<span style="background:#6ec8ff;"></span> СИНХРОНИЗАЦИЯ · НЕСТАБИЛЬНА
</div>
</div>
</div>
<!-- Ответ Хельги -->
<div class="hologram-panel content-panel">
<div class="post-header">
<div class="post-meta">✧ запись ✧</div>
</div>
<div class="post-content">
<p><strong>— Слушай, если они еще до этого подпишут все необходимые бумаги, то у меня появится куча свободного времени. В целом, минусов не наблюдаю,</strong> — даже заодно кивнула. Да, действительно, минусов нет. Хотя идея с тем, что у неё будут подобные записи - более чем устраивает. <strong>— Я уже представляю лица тех, кто пойдет в душ или на толчок, а там включается лекция или презентация с голограммой. Полагаю, запора не будет у получателя.</strong></p>
<p><strong>— Вот. И обучаются, и заплату отдают, и Ворчун доволен, и ты время экономишь. Много плюсов,</strong> — улыбнулась Элизабет.</p>
<p><strong>— Поэтому я от него не отказываюсь. Но всё жду когда ты мне корвет подаришь какой-нибудь, чтобы я сбегала от своих очаровательных секретарей в космос,</strong> — Бет намекает. Прямо. Свою зарплату не озвучивает, а вот получить движимую недвижимость в подарок точно не отказалась бы. К тому же старшая сестра знает в этом толк, а значит никакую фигню не подарит. </p>
<p><strong>— Чтобы младший заметил, нужно совершить знатный обвал акций. Причем без быстрой возможности взлететь,</strong> — хихикнула. В целом, как раз на исключение подобных случаев и нужны остальные. Разобраться с предателями, найти крыс, получить преимущество, выступить в СМИ. И Эли прекрасно знала, что в кризисе Рой работает на максимум. Там уже нельзя даже виски из коллекции отжать, сказав, что это для важных переговоров Элизабет Иденмарк с Элизабет Иденмарк.</p>
<p><strong>— Вот и отлично. Посплетничают, развлекутся, найдут мне кандидатов, заполнят всё инфо-поле моим несуществующим ухажером, получу приглашения, ухаживания, посвечусь на экранах еще больше, а после Ворчун вышлет новую работу в виде лекций. План шикарен, </strong> — Эли определенно нашла плюс. Даже много плюсов. </p>
</div>
</div>
<!-- Декоративная линия -->
<div style="display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.2rem; opacity: 0.5;">
<div style="width: 40px; height: 1px; background: #2f6491;"></div>
<div style="width: 12px; height: 1px; background: #5fa7d9;"></div>
<div style="width: 40px; height: 1px; background: #2f6491;"></div>
</div>
</div>
</body>
</html>[/html]
Поделиться42026-05-23 14:40:44
- Администратор
- 2000
- Сообщений: 201
- Уважение: [+0/-1]
- Позитив: [+3/-1]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Иденмарк · Ответ капитана</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: radial-gradient(circle at 30% 10%, #1a1c22, #0e1015);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
padding: 2rem 1.5rem;
}
.forum-container {
max-width: 880px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.hologram-panel {
background: rgba(28, 30, 38, 0.55);
backdrop-filter: blur(12px);
border-radius: 2rem;
border: 1px solid rgba(100, 210, 255, 0.25);
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(80, 180, 255, 0.1) inset, 0 0 12px rgba(70, 190, 255, 0.2);
transition: all 0.25s ease;
padding: 1.6rem 2rem;
}
.hologram-panel:hover {
border-color: rgba(100, 210, 255, 0.55);
box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(80, 200, 255, 0.2) inset, 0 0 18px rgba(60, 180, 255, 0.3);
background: rgba(28, 30, 40, 0.68);
}
.viz-panel {
padding: 1rem 1.5rem 1.2rem 1.5rem;
}
.content-panel {
transition: transform 0.2s;
}
.post-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(100, 190, 255, 0.3);
}
.post-meta {
font-size: 0.75rem;
font-family: 'Fira Mono', 'JetBrains Mono', monospace;
color: #9aaec9;
background: rgba(0, 20, 40, 0.5);
padding: 0.25rem 0.9rem;
border-radius: 2rem;
letter-spacing: 0.3px;
border: 0.5px solid rgba(90, 180, 255, 0.3);
}
.post-content {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.post-content p {
font-size: 1rem;
line-height: 1.65;
color: #e2e9f5;
font-weight: 400;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
letter-spacing: 0.01em;
}
.ai-speech {
font-family: 'Fira Mono', 'JetBrains Mono', monospace;
font-size: 0.95rem;
line-height: 1.5;
color: #b4dcff;
background: rgba(0, 25, 45, 0.5);
border-left: 4px solid #3fa2d0;
padding: 0.8rem 1.2rem;
margin: 0.4rem 0;
border-radius: 0 12px 12px 0;
box-shadow: 0 0 10px rgba(60, 180, 255, 0.15);
backdrop-filter: blur(4px);
letter-spacing: 0.2px;
}
strong {
font-weight: 500;
color: #cbe5ff;
}
.viz-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #84b3e0;
font-family: monospace;
opacity: 0.7;
display: flex;
align-items: center;
gap: 8px;
}
.viz-label span {
display: inline-block;
width: 8px;
height: 8px;
background: #4fc3ff;
border-radius: 50%;
box-shadow: 0 0 6px #0af;
animation: pulseDot 1.8s infinite;
}
.abstract-net {
width: 100%;
margin: 0.25rem 0 0.5rem 0;
}
.svg-viz {
width: 100%;
height: auto;
filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.3));
}
@keyframes pulseDot {
0% { opacity: 0.4; box-shadow: 0 0 0 0px rgba(79, 195, 255, 0.6); }
100% { opacity: 1; box-shadow: 0 0 0 4px rgba(79, 195, 255, 0); }
}
@keyframes waveLine {
0% { opacity: 0.2; transform: scaleX(0.95); }
100% { opacity: 0.9; transform: scaleX(1); }
}
.glow-lines {
display: flex;
justify-content: space-between;
gap: 6px;
margin-top: 0.5rem;
}
.glow-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, #4fc3ff, #b0e0ff, #4fc3ff, transparent);
border-radius: 2px;
opacity: 0.6;
animation: waveLine 3s infinite alternate;
}
.glow-line:nth-child(2) { animation-delay: 0.4s; opacity: 0.4; }
.glow-line:nth-child(3) { animation-delay: 0.9s; }
.hologram-panel {
position: relative;
overflow: hidden;
}
.hologram-panel::after {
content: '';
position: absolute;
top: 0;
left: -30%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(100, 210, 255, 0.08), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
@media (max-width: 640px) {
body { padding: 1rem; }
.hologram-panel { padding: 1.2rem 1.4rem; }
.post-content p { font-size: 0.92rem; }
}
.post-content p::before,
.post-content p::after {
content: none;
}
</style>
</head>
<body>
<div class="forum-container">
<!-- Голографическая визуализация -->
<div class="hologram-panel viz-panel">
<div class="hologram-visual">
<div class="viz-label">
<span></span> ГОЛОГРАММА · ДИНАМИКА
</div>
<div class="abstract-net">
<svg class="svg-viz" viewBox="0 0 500 90" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="lineGlow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2f6f9f" stop-opacity="0.1"/>
<stop offset="50%" stop-color="#5fc3ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#2f6f9f" stop-opacity="0.1"/>
</linearGradient>
<filter id="glowFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<line x1="60" y1="45" x2="220" y2="25" stroke="url(#lineGlow)" stroke-width="1.8" stroke-dasharray="6 4" opacity="0.85">
<animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2s" repeatCount="indefinite" />
</line>
<line x1="220" y1="25" x2="380" y2="60" stroke="url(#lineGlow)" stroke-width="1.8" stroke-dasharray="5 5" opacity="0.85">
<animate attributeName="stroke-dashoffset" from="0" to="-20" dur="2.4s" repeatCount="indefinite" />
</line>
<circle cx="60" cy="45" r="6" fill="none" stroke="#4fc3ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="4;7;4" dur="1.8s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="60" cy="45" r="2.5" fill="#a0dcff" stroke="none">
<animate attributeName="r" values="2;3.5;2" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="25" r="5.5" fill="none" stroke="#6bc8ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="3.5;6.5;3.5" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="25" r="2" fill="#b3e4ff" />
<circle cx="380" cy="60" r="6" fill="none" stroke="#5bc0ff" stroke-width="1.6" filter="url(#glowFilter)">
<animate attributeName="r" values="4;7;4" dur="2.2s" repeatCount="indefinite" />
</circle>
<circle cx="380" cy="60" r="2.5" fill="#bbecff" />
</svg>
</div>
<div class="glow-lines">
<div class="glow-line"></div>
<div class="glow-line"></div>
<div class="glow-line"></div>
<div class="glow-line"></div>
</div>
<div class="viz-label" style="justify-content: flex-end; margin-top: 2px;">
<span style="background:#6ec8ff;"></span> СИНХРОНИЗАЦИЯ · НЕСТАБИЛЬНА
</div>
</div>
</div>
<!-- Ответ Хельги -->
<div class="hologram-panel content-panel">
<div class="post-header">
<div class="post-meta">✧ запись ✧</div>
</div>
<div class="post-content">
<p><strong>— Слушай, если они еще до этого подпишут все необходимые бумаги, то у меня появится куча свободного времени. В целом, минусов не наблюдаю,</strong> — даже заодно кивнула. Да, действительно, минусов нет. Хотя идея с тем, что у неё будут подобные записи - более чем устраивает. <strong>— Я уже представляю лица тех, кто пойдет в душ или на толчок, а там включается лекция или презентация с голограммой. Полагаю, запора не будет у получателя.</strong></p>
<p><strong>— Вот. И обучаются, и заплату отдают, и Ворчун доволен, и ты время экономишь. Много плюсов,</strong> — улыбнулась Элизабет.</p>
<p><strong>— Поэтому я от него не отказываюсь. Но всё жду когда ты мне корвет подаришь какой-нибудь, чтобы я сбегала от своих очаровательных секретарей в космос,</strong> — Бет намекает. Прямо. Свою зарплату не озвучивает, а вот получить движимую недвижимость в подарок точно не отказалась бы. К тому же старшая сестра знает в этом толк, а значит никакую фигню не подарит. </p>
<p><strong>— Чтобы младший заметил, нужно совершить знатный обвал акций. Причем без быстрой возможности взлететь,</strong> — хихикнула. В целом, как раз на исключение подобных случаев и нужны остальные. Разобраться с предателями, найти крыс, получить преимущество, выступить в СМИ. И Эли прекрасно знала, что в кризисе Рой работает на максимум. Там уже нельзя даже виски из коллекции отжать, сказав, что это для важных переговоров Элизабет Иденмарк с Элизабет Иденмарк.</p>
<p><strong>— Вот и отлично. Посплетничают, развлекутся, найдут мне кандидатов, заполнят всё инфо-поле моим несуществующим ухажером, получу приглашения, ухаживания, посвечусь на экранах еще больше, а после Ворчун вышлет новую работу в виде лекций. План шикарен, </strong> — Эли определенно нашла плюс. Даже много плюсов. </p>
</div>
</div>
<!-- Декоративная линия -->
<div style="display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.2rem; opacity: 0.5;">
<div style="width: 40px; height: 1px; background: #2f6491;"></div>
<div style="width: 12px; height: 1px; background: #5fa7d9;"></div>
<div style="width: 40px; height: 1px; background: #2f6491;"></div>
</div>
</div>
</body>
</html>[/html]
Страница: 1
