Spaces:

offerpk3
/

tiktokdashboard

Running

App Files Files Community

offerpk3 commited on Jun 27, 2025

Commit

d8bf5f7

verified ·

1 Parent(s): 1b9ad79

Update index.html

Browse files

Files changed (1) hide show

index.html +215 -18

index.html CHANGED Viewed

@@ -1,19 +1,216 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>
+        for (let i = 1; i <= 30; i++) {
+          document.write(`<li><button onclick=\"scrollToSession(${i}, this)\">S${i.toString().padStart(2, '0')}<span class=\"status-icon\">🔴</span></button></li>`);
+        }
+      </script>
+    </ul>
+  </nav>
+  <div class="iframe-container">
+    <script>
+      for (let i = 1; i <= 30; i++) {
+        document.write(`
+          <div id=\"session-${i}\" class=\"iframe-box\">
+            <iframe src=\"https://www.tiktok.com/login\" sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"></iframe>
+          </div>
+        `);
+      }
+    </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>