taurusk9/anycoder-8df8e9eb
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Obsidian Stream | Next-Gen Service Delivery</title>7 8 <link rel="preconnect" href="https://fonts.googleapis.com">9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>10 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">11 12 <script src="https://cdn.tailwindcss.com"></script>13 <script>14 tailwind.config = {15 theme: {16 extend: {17 colors: {18 obsidian: {19 50: '#F4F5F7',20 100: '#E5E7EC',21 200: '#C9CDD6',22 300: '#9DA3B0',23 400: '#6E7688',24 500: '#505766',25 600: '#3B414E',26 700: '#2A2F38',27 800: '#1E2229',28 900: '#15181E',29 950: '#0A0C0F',30 },31 accent: {32 coral: '#FF6B5B',33 amber: '#F5A623',34 teal: '#34D399',35 sky: '#38BDF8',36 violet: '#A78BFA',37 rose: '#FB7185',38 }39 },40 fontFamily: {41 display: ['Outfit', 'system-ui', 'sans-serif'],42 body: ['Outfit', 'system-ui', 'sans-serif'],43 mono: ['Space Mono', 'monospace'],44 serif: ['Instrument Serif', 'Georgia', 'serif'],45 }46 }47 }48 }49 </script>50 51 <style>52 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }53 54 html { 55 scroll-behavior: smooth; 56 -webkit-font-smoothing: antialiased; 57 -moz-osx-font-smoothing: grayscale;58 }59 60 body {61 font-family: 'Outfit', system-ui, sans-serif;62 background: #0A0C0F;63 color: #E5E7EC;64 overflow-x: hidden;65 min-height: 100vh;66 }67 68 ::-webkit-scrollbar { width: 6px; }69 ::-webkit-scrollbar-track { background: transparent; }70 ::-webkit-scrollbar-thumb { background: #2A2F38; border-radius: 10px; }71 ::-webkit-scrollbar-thumb:hover { background: #3B414E; }72 73 ::selection { background: #FF6B5B33; color: #fff; }74 75 /* Ambient background canvas */76 #ambient-canvas {77 position: fixed;78 top: 0; left: 0;79 width: 100%; height: 100%;80 z-index: 0;81 pointer-events: none;82 }83 84 /* ====== Particle Field ====== */85 #particle-field {86 position: fixed;87 top: 0; left: 0;88 width: 100%; height: 100%;89 z-index: 0;90 pointer-events: none;91 }92 93 /* ====== Main Video Box ====== */94 .video-box {95 position: relative;96 border-radius: 24px;97 overflow: hidden;98 background: #0A0C0F;99 transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);100 box-shadow:101 0 0 0 1px rgba(255,255,255,0.04),102 0 4px 6px rgba(0,0,0,0.3),103 0 20px 40px rgba(0,0,0,0.4),104 0 0 120px rgba(255,107,91,0.03);105 }106 107 .video-box:hover {108 box-shadow:109 0 0 0 1px rgba(255,255,255,0.06),110 0 4px 6px rgba(0,0,0,0.3),111 0 20px 40px rgba(0,0,0,0.4),112 0 0 140px rgba(255,107,91,0.05);113 }114 115 .video-box.is-cinema {116 position: fixed;117 top: 0; left: 0;118 width: 100%; height: 100%;119 z-index: 100;120 border-radius: 0;121 box-shadow: none;122 }123 124 .video-box.is-cinema .v-main { border-radius: 0; }125 .video-box.is-cinema .v-backdrop { opacity: 1; pointer-events: all; }126 127 .v-backdrop {128 position: fixed; inset: 0;129 background: rgba(5,6,8,0.97);130 backdrop-filter: blur(40px);131 opacity: 0; pointer-events: none;132 transition: opacity 0.6s ease;133 z-index: -1;134 }135 136 .v-main {137 position: relative;138 width: 100%;139 aspect-ratio: 16 / 9;140 border-radius: 24px;141 overflow: hidden;142 background: #08090B;143 }144 145 .v-main video {146 width: 100%; height: 100%;147 object-fit: cover;148 }149 150 /* Vignette overlay for depth */151 .v-vignette {152 position: absolute; inset: 0;153 box-shadow: inset 0 -60px 120px rgba(5,6,8,0.5);154 pointer-events: none;155 z-index: 1;156 }157 158 /* Grain overlay for texture */159 .v-grain {160 position: absolute; inset: 0;161 opacity: 0.02;162 pointer-events: none;163 z-index: 2;164 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");165 }166 167 /* Scanlines for retro-tech feel */168 .v-scanlines {169 position: absolute; inset: 0;170 pointer-events: none;171 z-index: 3;172 opacity: 0.025;173 background: repeating-linear-gradient(0deg,174 transparent,175 transparent 1px,176 rgba(0,0,0,0.15) 1px,177 rgba(0,0,0,0.15) 2px178 );179 }180 181 .v-controls {182 position: absolute; bottom: 0; left: 0; right: 0;183 padding: 32px;184 z-index: 10;185 opacity: 1;186 transition: opacity 0.4s ease, transform 0.4s ease;187 transform: translateY(0);188 background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);189 }190 191 .video-box:not(:hover):not(.is-paused) .v-controls {192 opacity: 0;193 transform: translateY(12px);194 }195 196 .video-box.is-paused .v-controls {197 opacity: 1;198 transform: translateY(0);199 }200 201 /* Progress bar */202 .v-progress-track {203 height: 4px;204 background: rgba(255,255,255,0.1);205 border-radius: 2px;206 cursor: pointer;207 position: relative;208 overflow: hidden;209 transition: height 0.25s ease;210 }211 212 .v-progress-track:hover { height: 6px; }213 214 .v-progress-track:hover .v-progress-thumb {215 opacity: 1;216 transform: translate(-50%, -50%) scale(1);217 }218 219 .v-progress-fill {220 height: 100%;221 background: linear-gradient(90deg, #FF6B5B, #FB7185, #F5A623);222 border-radius: 2px;223 position: relative;224 }225 226 .v-progress-thumb {227 position: absolute; right: 0; top: 50%;228 width: 14px; height: 14px;229 background: #fff;230 border-radius: 50%;231 box-shadow: 0 0 0 4px rgba(255,107,91,0.2), 0 2px 8px rgba(0,0,0,0.4);232 transform: translate(-50%, -50%) scale(0);233 opacity: 0;234 transition: all 0.25s ease;235 cursor: grab;236 }237 238 .v-progress-thumb:active { cursor: grabbing; }239 240 .v-progress-hint {241 position: absolute; top: -32px;242 transform: translateX(-50%) translateY(4px);243 background: rgba(10,12,15,0.9);244 backdrop-filter: blur(12px);245 color: #fff;246 padding: 4px 12px;247 border-radius: 8px;248 font-size: 11px;249 font-family: 'Space Mono', monospace;250 border: 1px solid rgba(255,255,255,0.06);251 pointer-events: none;252 white-space: nowrap;253 opacity: 0;254 transition: opacity 0.2s ease, transform 0.2s ease;255 }256 257 .v-progress-track:hover .v-progress-hint,258 .v-progress-track.is-dragging .v-progress-hint {259 opacity: 1;260 transform: translateX(-50%) translateY(0);261 }262 263 /* Control buttons */264 .v-btn {265 display: flex; align-items: center; justify-content: center;266 width: 36px; height: 36px;267 border-radius: 12px;268 border: none;269 background: rgba(255,255,255,0.05);270 color: #fff;271 cursor: pointer;272 transition: all 0.25s ease;273 position: relative;274 overflow: hidden;275 }276 277 .v-btn::after {278 content: '';279 position: absolute; inset: 0;280 background: rgba(255,255,255,0.08);281 opacity: 0;282 transition: opacity 0.2s;283 }284 285 .v-btn:hover::after { opacity: 1; }286 .v-btn:hover { transform: scale(1.05); }287 .v-btn:active { transform: scale(0.95); }288 289 .v-btn-icon {290 display: block;291 width: 18px; height: 18px;292 position: relative;293 z-index: 1;294 }295 296 /* Big play overlay */297 .v-bigplay {298 position: absolute; inset: 0;299 display: flex; align-items: center; justify-content: center;300 z-index: 5;301 cursor: pointer;302 opacity: 0; pointer-events: none;303 transition: opacity 0.5s ease;304 background: rgba(0,0,0,0.2);305 }306 307 .video-box.is-paused .v-bigplay {308 opacity: 1; pointer-events: all;309 }310 311 .v-bigplay-btn {312 width: 88px; height: 88px;313 border-radius: 50%;314 background: rgba(255,107,91,0.95);315 backdrop-filter: blur(20px);316 display: flex; align-items: center; justify-content: center;317 transform: scale(0.8);318 transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);319 box-shadow: 0 8px 32px rgba(255,107,91,0.3), 0 0 60px rgba(255,107,91,0.15);320 }321 322 .video-box.is-paused .v-bigplay-btn {323 transform: scale(1);324 }325 326 .v-bigplay-btn:hover {327 transform: scale(1.08);328 box-shadow: 0 12px 40px rgba(255,107,91,0.4), 0 0 80px rgba(255,107,91,0.2);329 }330 331 /* Overlay UI elements */332 .v-overlay-top {333 position: absolute; top: 0; left: 0; right: 0;334 padding: 24px 28px;335 z-index: 8;336 display: flex; align-items: flex-start; justify-content: space-between;337 background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);338 opacity: 1;339 transition: opacity 0.4s ease;340 }341 342 .video-box:not(:hover):not(.is-paused) .v-overlay-top {343 opacity: 0;344 }345 346 /* Info pill badges */347 .info-pill {348 display: inline-flex; align-items: center; gap: 6px;349 padding: 5px 12px;350 border-radius: 20px;351 background: rgba(0,0,0,0.4);352 backdrop-filter: blur(16px);353 border: 1px solid rgba(255,255,255,0.06);354 font-size: 11px;355 font-family: 'Space Mono', monospace;356 color: rgba(255,255,255,0.65);357 letter-spacing: 0.02em;358 transition: all 0.3s ease;359 }360 361 .info-pill:hover { background: rgba(0,0,0,0.6); }362 363 .info-pill .dot {364 width: 6px; height: 6px;365 border-radius: 50%;366 animation: pulse-dot 2s ease-in-out infinite;367 }368 369 @keyframes pulse-dot {370 0%, 100% { opacity: 1; transform: scale(1); }371 50% { opacity: 0.5; transform: scale(0.85); }372 }373 374 /* Side panel / Sidebar */375 .sidebar {376 position: fixed;377 top: 0; left: 0;378 width: 280px; height: 100%;379 background: rgba(10,12,15,0.6);380 backdrop-filter: blur(60px);381 border-right: 1px solid rgba(255,255,255,0.04);382 z-index: 50;383 padding: 24px 20px;384 display: flex; flex-direction: column;385 gap: 8px;386 transform: translateX(0);387 transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);388 }389 390 @media (max-width: 1024px) {391 .sidebar { transform: translateX(-100%); }392 .sidebar.open { transform: translateX(0); }393 }394 395 .s-brand {396 display: flex; align-items: center; gap: 12px;397 padding: 8px 12px;398 margin-bottom: 8px;399 }400 401 .s-brand-mark {402 width: 36px; height: 36px;403 background: linear-gradient(135deg, #FF6B5B, #FB7185, #F5A623);404 border-radius: 12px;405 display: flex; align-items: center; justify-content: center;406 font-size: 16px;407 box-shadow: 0 4px 16px rgba(255,107,91,0.25);408 }409 410 .s-nav-section {411 margin-top: 8px;412 padding-top: 16px;413 border-top: 1px solid rgba(255,255,255,0.04);414 }415 416 .s-nav-section:first-of-type { border-top: none; padding-top: 0; }417 418 .s-nav-title {419 font-size: 10px;420 font-family: 'Space Mono', monospace;421 font-weight: 700;422 color: rgba(255,255,255,0.25);423 text-transform: uppercase;424 letter-spacing: 0.12em;425 padding: 0 12px;426 margin-bottom: 8px;427 }428 429 .s-nav-link {430 display: flex; align-items: center; gap: 12px;431 padding: 9px 12px;432 border-radius: 12px;433 color: rgba(255,255,255,0.45);434 font-size: 13px;435 font-weight: 500;436 text-decoration: none;437 transition: all 0.25s ease;438 cursor: pointer;439 position: relative;440 overflow: hidden;441 }442 443 .s-nav-link svg { flex-shrink: 0; }444 445 .s-nav-link:hover {446 color: rgba(255,255,255,0.8);447 background: rgba(255,255,255,0.03);448 }449 450 .s-nav-link.active {451 color: #fff;452 background: rgba(255,107,91,0.1);453 }454 455 .s-nav-link.active::before {456 content: '';457 position: absolute; left: 0; top: 50%; transform: translateY(-50%);458 width: 3px; height: 18px;459 background: #FF6B5B;460 border-radius: 0 3px 3px 0;461 }462 463 /* Main content area */464 .main-area {465 margin-left: 280px;466 padding: 32px 40px;467 position: relative;468 z-index: 1;469 }470 471 @media (max-width: 1024px) {472 .main-area { margin-left: 0; padding: 80px 20px 20px; }473 }474 475 /* Header section */476 .page-header {477 display: flex; align-items: flex-end; justify-content: space-between;478 margin-bottom: 24px;479 padding-bottom: 16px;480 border-bottom: 1px solid rgba(255,255,255,0.04);481 }482 483 @media (max-width: 640px) { 484 .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } 485 }486 487 .page-title {488 font-size: 28px;489 font-weight: 700;490 color: #fff;491 letter-spacing: -0.03em;492 line-height: 1.15;493 }494 495 .page-title span { 496 font-family: 'Instrument Serif', Georgia, serif; 497 font-style: italic; 498 font-weight: 400; 499 color: rgba(255,255,255,0.4); 500 }501 502 .page-meta {503 display: flex; align-items: center; gap: 16px;504 }505 506 .avatar-stack {507 display: flex; align-items: center;508 }509 510 .avatar-stack img {511 width: 28px; height: 28px;512 border-radius: 50%;513 border: 2px solid #0A0C0F;514 object-fit: cover;515 margin-left: -8px;516 transition: transform 0.3s ease;517 }518 519 .avatar-stack img:first-child { margin-left: 0; }520 .avatar-stack:hover img:nth-child(1) { transform: translateX(-4px); }521 .avatar-stack:hover img:nth-child(2) { transform: translateX(2px); }522 .avatar-stack:hover img:nth-child(3) { transform: translateX(6px); }523 524 /* Service cards */525 .service-cards {526 display: grid;527 grid-template-columns: repeat(3, 1fr);528 gap: 16px;529 margin-top: 20px;530 }531 532 @media (max-width: 900px) { 533 .service-cards { grid-template-columns: 1fr; } 534 }535 536 @media (min-width: 901px) and (max-width: 1200px) { 537 .service-cards { grid-template-columns: repeat(2, 1fr); } 538 }539 540 .svc-card {541 position: relative;542 border-radius: 20px;543 padding: 24px;544 background: rgba(255,255,255,0.02);545 border: 1px solid rgba(255,255,255,0.04);546 cursor: pointer;547 overflow: hidden;548 transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);549 }550 551 .svc-card::before {552 content: '';553 position: absolute; inset: 0;554 border-radius: 20px;555 background: radial-gradient(ellipse 80% 50% at var(--mx,50%) var(--my,50%), rgba(255,107,91,0.06), transparent 70%);556 opacity: 0;557 transition: opacity 0.4s;558 pointer-events: none;559 }560 561 .svc-card:hover::before { opacity: 1; }562 563 .svc-card:hover {564 border-color: rgba(255,255,255,0.08);565 background: rgba(255,255,255,0.035);566 transform: translateY(-2px);567 }568 569 .svc-card.selected {570 border-color: rgba(255,107,91,0.2);571 background: rgba(255,107,91,0.04);572 }573 574 .svc-icon {575 width: 48px; height: 48px;576 border-radius: 14px;577 display: flex; align-items: center; justify-content: center;578 font-size: 22px;579 margin-bottom: 16px;580 position: relative;581 }582 583 .svc-icon::after {584 content: '';585 position: absolute; inset: -2px;586 border-radius: 16px;587 opacity: 0.15;588 background: inherit;589 filter: blur(12px);590 z-index: -1;591 }592 593 .svc-name {594 font-size: 15px;595 font-weight: 600;596 color: #fff;597 margin-bottom: 4px;598 }599 600 .svc-desc {601 font-size: 12px;602 color: rgba(255,255,255,0.35);603 line-height: 1.5;604 margin-bottom: 16px;605 }606 607 .svc-stat {608 display: flex; align-items: center; gap: 6px;609 font-size: 11px;610 font-family: 'Space Mono', monospace;611 color: rgba(255,255,255,0.3);612 }613 614 .svc-stat-dot {615 width: 6px; height: 6px;616 border-radius: 50%;617 animation: pulse-dot 2s ease-in-out infinite;618 }619 620 /* ====== Audio waveform ====== */621 .waveform-bar {622 width: 3px;623 border-radius: 2px;624 background: rgba(255,255,255,0.08);625 transition: height 0.08s linear, background 0.3s;626 min-height: 3px;627 }628 629 .waveform-bar.active { background: #FF6B5B; }630 .waveform-bar.w-1 { height: 4px; }631 .waveform-bar.w-2 { height: 12px; }632 .waveform-bar.w-3 { height: 20px; }633 .waveform-bar.w-4 { height: 28px; }634 .waveform-bar.w-5 { height: 36px; }635 636 /* ====== Volume slider ====== */637 .volume-box {638 display: flex; align-items: center; gap: 8px;639 position: relative;640 }641 642 .volume-track-wrap {643 width: 0;644 overflow: hidden;645 transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);646 }647 648 .volume-box:hover .volume-track-wrap { width: 80px; }649 650 .volume-track {651 height: 3px;652 background: rgba(255,255,255,0.1);653 border-radius: 2px;654 position: relative;655 cursor: pointer;656 width: 80px;657 }658 659 .volume-fill {660 height: 100%;661 background: #fff;662 border-radius: 2px;663 transition: width 0.05s;664 }665 666 .volume-thumb {667 position: absolute; right: 0; top: 50%;668 width: 10px; height: 10px;669 background: #fff;670 border-radius: 50%;671 transform: translate(50%, -50%) scale(0);672 transition: transform 0.2s;673 box-shadow: 0 2px 6px rgba(0,0,0,0.3);674 }675 676 .volume-box:hover .volume-thumb { transform: translate(50%, -50%) scale(1); }677 678 /* ====== Toggle Switch ====== */679 .toggle-switch {680 width: 44px; height: 24px;681 background: rgba(255,255,255,0.08);682 border-radius: 12px;683 position: relative;684 cursor: pointer;685 transition: background 0.3s;686 flex-shrink: 0;687 }688 689 .toggle-switch.on { background: rgba(255,107,91,0.3); }690 691 .toggle-knob {692 position: absolute; top: 3px; left: 3px;693 width: 18px; height: 18px;694 background: #fff;695 border-radius: 50%;696 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);697 box-shadow: 0 2px 6px rgba(0,0,0,0.3);698 }699 700 .toggle-switch.on .toggle-knob { transform: translateX(20px); background: #FF6B5B; }701 702 /* ====== Badge / Tag ====== */703 .tag {704 display: inline-flex; align-items: center;705 padding: 3px 10px;706 border-radius: 6px;707 font-size: 11px;708 font-weight: 500;709 font-family: 'Space Mono', monospace;710 }711 712 .tag-glow {713 background: rgba(255,107,91,0.08);714 color: #FF6B5B;715 border: 1px solid rgba(255,107,91,0.15);716 }717 718 .tag-ghost {719 background: rgba(255,255,255,0.04);720 color: rgba(255,255,255,0.4);721 border: 1px solid rgba(255,255,255,0.06);722 }723 724 /* ====== Notification Toast ====== */725 .toast-stack {726 position: fixed; bottom: 24px; right: 24px;727 z-index: 200;728 display: flex; flex-direction: column; gap: 8px;729 }730 731 .toast {732 padding: 12px 20px;733 background: rgba(16,18,22,0.95);734 backdrop-filter: blur(24px);735 border: 1px solid rgba(255,255,255,0.06);736 border-radius: 14px;737 font-size: 13px;738 color: rgba(255,255,255,0.7);739 box-shadow: 0 8px 32px rgba(0,0,0,0.4);740 transform: translateX(120%);741 opacity: 0;742 animation: toast-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,743 toast-out 0.4s cubic-bezier(0.22, 1, 0.36, 1) 3.5s forwards;744 }745 746 @keyframes toast-in { 747 to { transform: translateX(0); opacity: 1; } 748 }749 750 @keyframes toast-out { 751 to { transform: translateX(120%); opacity: 0; } 752 }753 754 /* ====== Tooltip ====== */755 .tip {756 position: relative;757 }758 759 .tip::after {760 content: attr(data-tip);761 position: absolute; bottom: calc(100% + 8px); left: 50%;762 transform: translateX(-50%) translateY(4px);763 padding: 5px 12px;764 background: rgba(10,12,15,0.9);765 backdrop-filter: blur(12px);766 color: #fff;767 font-size: 11px;768 font-family: 'Space Mono', monospace;769 border-radius: 8px;770 border: 1px solid rgba(255,255,255,0.06);771 white-space: nowrap;772 opacity: 0;773 pointer-events: none;774 transition: all 0.2s ease;775 z-index: 100;776 }777 778 .tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }779 780 /* ====== Keyboard Shortcut kbd ====== */781 kbd {782 display: inline-flex; align-items: center; justify-content: center;783 min-width: 20px; height: 20px;784 padding: 0 6px;785 background: rgba(255,255,255,0.06);786 border: 1px solid rgba(255,255,255,0.1);787 border-radius: 4px;788 font-size: 10px;789 font-family: 'Space Mono', monospace;790 color: rgba(255,255,255,0.4);791 box-shadow: 0 1px 2px rgba(0,0,0,0.2);792 }793 794 /* ====== Mobile menu button ====== */795 .mobile-toggle {796 display: none;797 position: fixed; top: 20px; left: 20px;798 z-index: 60;799 width: 40px; height: 40px;800 border-radius: 12px;801 background: rgba(10,12,15,0.8);802 backdrop-filter: blur(20px);803 border: 1px solid rgba(255,255,255,0.06);804 color: #fff;805 cursor: pointer;806 align-items: center; justify-content: center;807 transition: all 0.3s;808 }809 810 .mobile-toggle:hover { background: rgba(255,255,255,0.08); }811 812 @media (max-width: 1024px) { 813 .mobile-toggle { display: flex; } 814 }815 816 /* ====== Data panel floating cards ====== */817 .data-float {818 position: absolute; right: 24px; top: 24px;819 display: flex; flex-direction: column; gap: 8px;820 align-items: flex-end;821 z-index: 6;822 pointer-events: none;823 }824 825 .data-float .info-pill { pointer-events: all; }826 827 /* ====== Loading spinner for video ====== */828 .v-loading {829 position: absolute; inset: 0;830 display: flex; align-items: center; justify-content: center;831 z-index: 4;832 opacity: 0; pointer-events: none;833 transition: opacity 0.3s;834 }835 836 .v-loading.is-loading { opacity: 1; }837 838 .v-spinner {839 width: 36px; height: 36px;840 border: 2px solid rgba(255,255,255,0.08);841 border-top-color: #FF6B5B;842 border-radius: 50%;843 animation: spin 0.8s linear infinite;844 }845 846 @keyframes spin { to { transform: rotate(360deg); } }847 848 /* ====== Stagger entrance animations ====== */849 @keyframes fade-up {850 from { opacity: 0; transform: translateY(24px); }851 to { opacity: 1; transform: translateY(0); }852 }853 854 @keyframes fade-in {855 from { opacity: 0; }856 to { opacity: 1; }857 }858 859 @keyframes scale-in {860 from { opacity: 0; transform: scale(0.95); }861 to { opacity: 1; transform: scale(1); }862 }863 864 .entrance { animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0; }865 .entrance-d1 { animation-delay: 0.1s; }866 .entrance-d2 { animation-delay: 0.2s; }867 .entrance-d3 { animation-delay: 0.3s; }868 .entrance-d4 { animation-delay: 0.4s; }869 .entrance-d5 { animation-delay: 0.5s; }870 871 .entrance-scale { animation: scale-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0; }872 873 /* ====== Breathing glow animation for accent elements ====== */874 @keyframes breathe {875 0%, 100% { box-shadow: 0 0 20px rgba(255,107,91,0.1); }876 50% { box-shadow: 0 0 40px rgba(255,107,91,0.2); }877 }878 879 .breathe-glow { animation: breathe 4s ease-in-out infinite; }880 881 /* ====== Scroll indicator ====== */882 @keyframes scroll-cue {883 0% { transform: translateY(0); opacity: 1; }884 60% { transform: translateY(8px); opacity: 0.3; }885 100% { transform: translateY(0); opacity: 1; }886 }887 888 .scroll-cue { animation: scroll-cue 2s ease-in-out infinite; }889 890 /* ====== Divider dot pattern ====== */891 .dot-divider {892 display: flex; align-items: center; gap: 8px;893 margin: 24px 0;894 }895 896 .dot-divider span {897 width: 3px; height: 3px;898 border-radius: 50%;899 background: rgba(255,255,255,0.08);900 }901 902 /* ====== Subtle parallax on video title ====== */903 .parallax-text {904 transition: transform 0.1s ease-out;905 }906 907 /* ====== Timeline / Schedule mini ====== */908 .timeline {909 display: flex; align-items: center;910 gap: 16px;911 padding: 12px 0;912 }913 914 .timeline-node {915 display: flex; align-items: center; gap: 10px;916 font-size: 12px;917 color: rgba(255,255,255,0.35);918 }919 920 .timeline-node .node-dot {921 width: 8px; height: 8px;922 border-radius: 50%;923 border: 2px solid rgba(255,255,255,0.12);924 flex-shrink: 0;925 }926 927 .timeline-node.done { color: rgba(255,255,255,0.5); }928 .timeline-node.done .node-dot { background: #34D399; border-color: #34D399; }929 .timeline-node.active { color: #FF6B5B; font-weight: 600; }930 .timeline-node.active .node-dot { background: #FF6B5B; border-color: #FF6B5B; box-shadow: 0 0 8px rgba(255,107,91,0.4); }931 932 .timeline-connector {933 flex: 1;934 height: 1px;935 background: rgba(255,255,255,0.06);936 }937 938 /* ====== Theme toggle ====== */939 .theme-btn {940 width: 36px; height: 36px;941 border-radius: 12px;942 background: rgba(255,255,255,0.04);943 border: 1px solid rgba(255,255,255,0.06);944 color: rgba(255,255,255,0.5);945 cursor: pointer;946 display: flex; align-items: center; justify-content: center;947 transition: all 0.3s;948 }949 950 .theme-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }951 952 /* ====== Smooth modal/overlay ====== */953 .overlay-close {954 position: absolute; top: 24px; right: 24px;955 width: 40px; height: 40px;956 border-radius: 12px;957 background: rgba(255,255,255,0.06);958 backdrop-filter: blur(12px);959 border: 1px solid rgba(255,255,255,0.08);960 color: #fff;961 cursor: pointer;962 display: flex; align-items: center; justify-content: center;963 z-index: 102;964 transition: all 0.3s;965 }966 967 .overlay-close:hover { background: rgba(255,255,255,0.1); }968 969 /* ====== Built with anycoder (prominent) ====== */970 .anycoder-badge {971 display: inline-flex; align-items: center; gap: 6px;972 padding: 5px 14px;973 background: rgba(255,255,255,0.04);974 border: 1px solid rgba(255,255,255,0.06);975 border-radius: 10px;976 font-size: 12px;977 font-family: 'Space Mono', monospace;978 color: rgba(255,255,255,0.3);979 text-decoration: none;980 transition: all 0.3s;981 }982 983 .anycoder-badge:hover {984 background: rgba(255,255,255,0.08);985 color: rgba(255,255,255,0.6);986 border-color: rgba(255,255,255,0.12);987 }988 989 .anycoder-badge .pulse {990 width: 6px; height: 6px;991 background: #34D399;992 border-radius: 50%;993 animation: pulse-dot 2s ease-in-out infinite;994 }995 </style>996</head>997<body>998 999 <!-- ====== Particle Field ====== -->1000 <canvas id="particle-field"></canvas>1001 1002 <!-- ====== Ambient Canvas (Video bloom) ====== -->1003 <canvas id="ambient-canvas"></canvas>1004 1005 <!-- ====== Mobile toggle ====== -->1006 <button class="mobile-toggle" id="mobileToggle" aria-label="Menu">1007 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">1008 <line x1="3" y1="6" x2="21" y2="6"/>1009 <line x1="3" y1="12" x2="21" y2="12"/>1010 <line x1="3" y1="18" x2="21" y2="18"/>1011 </svg>1012 </button>1013 1014 <!-- ====== Sidebar ====== -->1015 <aside class="sidebar" id="sidebar">1016 <div class="s-brand">1017 <div class="s-brand-mark">◆</div>1018 <div>1019 <div style="font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.02em;">Obsidian</div>1020 <div style="font-size:10px;color:rgba(255,255,255,0.3);font-family:'Space Mono',monospace;letter-spacing:0.08em;">STREAM</div>1021 </div>1022 </div>1023 1024 <nav class="s-nav-section">1025 <div class="s-nav-title">Platform</div>1026 <a href="#" class="s-nav-link active" onclick="switchSection(this,'dashboard')">1027 <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>1028 Dashboard1029 </a>1030 <a href="#" class="s-nav-link" onclick="switchSection(this,'streams')">1031 <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>1032 Live Streams1033 </a>1034 <a href="#" class="s-nav-link" onclick="switchSection(this,'analytics')">1035 <svg width="16