Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>TikTok Multi-Login Sessions</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: #111; | |
| color: white; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| nav { | |
| position: relative; | |
| z-index: 2; | |
| margin-bottom: 30px; | |
| overflow-x: auto; | |
| scrollbar-height: none; | |
| } | |
| nav::-webkit-scrollbar { | |
| height: 8px; | |
| } | |
| nav::-webkit-scrollbar-track { | |
| background: #222; | |
| border-radius: 10px; | |
| } | |
| nav::-webkit-scrollbar-thumb { | |
| background: linear-gradient(90deg, #ff0050, #ff9900, #ff0050); | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px #ff0050, 0 0 20px #ff9900; | |
| transition: all 0.3s ease; | |
| } | |
| nav::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(90deg, #ff0050, #ffcc00); | |
| box-shadow: 0 0 15px #ff0050, 0 0 25px #ffcc00; | |
| } | |
| nav ul { | |
| display: flex; | |
| justify-content: flex-start; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| position: relative; | |
| min-width: max-content; | |
| } | |
| nav ul li { | |
| margin: 0 10px; | |
| position: relative; | |
| white-space: nowrap; | |
| } | |
| nav ul li button { | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| padding: 8px 14px; | |
| position: relative; | |
| z-index: 1; | |
| transition: color 0.3s, transform 0.3s; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| nav ul li button:hover { | |
| color: #ff9900; | |
| transform: scale(1.1); | |
| text-shadow: 0 0 5px #ff9900, 0 0 15px #ff0050; | |
| } | |
| nav ul li button::before { | |
| content: "\2022 "; | |
| color: #ff0050; | |
| position: absolute; | |
| left: -12px; | |
| top: 50%; | |
| transform: translateY(-50%) scale(1); | |
| transition: transform 0.3s ease; | |
| } | |
| nav ul li button:hover::before { | |
| transform: translateY(-50%) scale(1.6); | |
| text-shadow: 0 0 10px #ff0050, 0 0 20px #ff9900; | |
| } | |
| nav ul li .status-icon { | |
| margin-left: 5px; | |
| font-size: 14px; | |
| } | |
| nav .laser-line { | |
| position: absolute; | |
| bottom: 0; | |
| height: 4px; | |
| width: 0; | |
| background: linear-gradient(90deg, #ff0050, #ff9900, #ff0050); | |
| background-size: 200% auto; | |
| box-shadow: 0 0 20px #ff0050, 0 0 30px #ff0050; | |
| animation: fireglow 1.2s linear infinite; | |
| transition: all 0.4s ease; | |
| border-radius: 10px; | |
| } | |
| @keyframes fireglow { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| h1 { | |
| color: #ff0050; | |
| margin-bottom: 10px; | |
| } | |
| p { | |
| margin-bottom: 20px; | |
| color: #ccc; | |
| } | |
| .iframe-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 20px; | |
| } | |
| .iframe-box { | |
| width: 100%; | |
| max-width: 400px; | |
| height: 650px; | |
| border: 2px solid #ff0050; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| background: #000; | |
| box-shadow: 0 0 15px rgba(255, 0, 80, 0.3); | |
| } | |
| .iframe-box iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| @media (max-width: 768px) { | |
| nav ul li button { | |
| font-size: 12px; | |
| padding: 6px 10px; | |
| } | |
| .iframe-box { | |
| height: 500px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🎯 TikTok Multi-Session Dashboard</h1> | |
| <p>Click a session tab to switch with laser animation</p> | |
| <nav> | |
| <ul id="sessionTabs"> | |
| <div class="laser-line" id="laser"></div> | |
| <script> | |
| </script> | |
| </ul> | |
| </nav> | |
| <div class="iframe-container"> | |
| <script> | |
| </script> | |
| </div> | |
| <script> | |
| const laser = document.getElementById("laser"); | |
| function scrollToSession(number, btn) { | |
| const target = document.getElementById(`session-${number}`); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| const buttonRect = btn.getBoundingClientRect(); | |
| const navRect = btn.closest('ul').getBoundingClientRect(); | |
| laser.style.width = `${buttonRect.width}px`; | |
| laser.style.left = `${buttonRect.left - navRect.left}px`; | |
| } | |
| window.onload = () => { | |
| const firstBtn = document.querySelector("#sessionTabs button"); | |
| if (firstBtn) scrollToSession(1, firstBtn); | |
| }; | |
| </script> | |
| </body> | |
| </html> | |