Spaces:

thechsenone
/

anycoder-f0cda16c

Running

App Files Files Community

thechsenone commited on Dec 19, 2025

Commit

f68f346

verified ·

1 Parent(s): 20a54a7

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +160 -1068

index.html CHANGED Viewed

@@ -1,1081 +1,173 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Lovense Control - Remote Device Manager</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    :root {
-      --primary: #ff3366;
-      --primary-dark: #e61e5c;
-      --secondary: #ff6b9d;
-      --accent: #c9184a;
-      --background: #0a0a0a;
-      --surface: #1a1a1a;
-      --surface-light: #2a2a2a;
-      --text: #ffffff;
-      --text-secondary: #a0a0a0;
-      --success: #4ade80;
-      --warning: #fbbf24;
-      --danger: #ef4444;
-      --gradient: linear-gradient(135deg, #ff3366 0%, #ff6b9d 50%, #c9184a 100%);
-      --gradient-glow: linear-gradient(135deg, rgba(255, 51, 102, 0.3) 0%, rgba(255, 107, 157, 0.3) 100%);
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      background: var(--background);
-      color: var(--text);
-      min-height: 100vh;
-      overflow-x: hidden;
-    }
-    .background-animation {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      background: radial-gradient(circle at 20% 50%, rgba(255, 51, 102, 0.1) 0%, transparent 50%),
-                  radial-gradient(circle at 80% 80%, rgba(255, 107, 157, 0.1) 0%, transparent 50%),
-                  radial-gradient(circle at 40% 20%, rgba(201, 24, 74, 0.1) 0%, transparent 50%);
-      animation: floatGradient 20s ease-in-out infinite;
-    }
-    @keyframes floatGradient {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      33% { transform: translate(-20px, -20px) scale(1.1); }
-      66% { transform: translate(20px, -10px) scale(0.9); }
-    }
-    header {
-      background: rgba(26, 26, 26, 0.9);
-      backdrop-filter: blur(20px);
-      border-bottom: 1px solid rgba(255, 51, 102, 0.2);
-      padding: 1rem 2rem;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-    .header-content {
-      max-width: 1400px;
-      margin: 0 auto;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      font-size: 1.5rem;
-      font-weight: bold;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .logo-icon {
-      width: 40px;
-      height: 40px;
-      background: var(--gradient);
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-size: 1.5rem;
-    }
-    .connection-status {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-      background: rgba(74, 222, 128, 0.1);
-      border: 1px solid rgba(74, 222, 128, 0.3);
-      border-radius: 20px;
-      transition: all 0.3s ease;
-    }
-    .connection-status.disconnected {
-      background: rgba(239, 68, 68, 0.1);
-      border-color: rgba(239, 68, 68, 0.3);
-    }
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--success);
-      animation: pulse 2s infinite;
-    }
-    .connection-status.disconnected .status-dot {
-      background: var(--danger);
-      animation: none;
-    }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-    main {
-      max-width: 1400px;
-      margin: 2rem auto;
-      padding: 0 2rem;
-    }
-    .app-container {
-      display: grid;
-      grid-template-columns: 350px 1fr;
-      gap: 2rem;
-      margin-bottom: 2rem;
-    }
-    .device-panel {
-      background: rgba(26, 26, 26, 0.6);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 20px;
-      padding: 1.5rem;
-      height: fit-content;
-    }
-    .panel-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 1.5rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .device-list {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-    .device-card {
-      background: rgba(42, 42, 42, 0.4);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 12px;
-      padding: 1rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      position: relative;
-      overflow: hidden;
-    }
-    .device-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: var(--gradient-glow);
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-    .device-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 30px rgba(255, 51, 102, 0.2);
-      border-color: rgba(255, 51, 102, 0.3);
-    }
-    .device-card:hover::before {
-      opacity: 0.1;
-    }
-    .device-card.connected {
-      border-color: var(--primary);
-      background: rgba(255, 51, 102, 0.1);
-    }
-    .device-info {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .device-name {
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin-bottom: 0.25rem;
-    }
-    .device-type {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-    }
-    .device-signal {
-      display: flex;
-      gap: 2px;
-    }
-    .signal-bar {
-      width: 3px;
-      background: var(--text-secondary);
-      border-radius: 2px;
-      transition: all 0.3s ease;
-    }
-    .signal-bar:nth-child(1) { height: 8px; }
-    .signal-bar:nth-child(2) { height: 12px; }
-    .signal-bar:nth-child(3) { height: 16px; }
-    .signal-bar:nth-child(4) { height: 20px; }
-    .device-card.connected .signal-bar {
-      background: var(--primary);
-      animation: signalPulse 1s ease-in-out infinite;
-    }
-    @keyframes signalPulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.6; }
-    }
-    .scan-button {
-      width: 100%;
-      padding: 0.75rem;
-      background: var(--gradient);
-      border: none;
-      border-radius: 12px;
-      color: white;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      margin-top: 1rem;
-    }
-    .scan-button:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 30px rgba(255, 51, 102, 0.3);
-    }
-    .scan-button:active {
-      transform: translateY(0);
-    }
-    .control-panel {
-      background: rgba(26, 26, 26, 0.6);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 20px;
-      padding: 2rem;
-      min-height: 500px;
-    }
-    .control-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 2rem;
-    }
-    .control-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-    }
-    .control-modes {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      gap: 1rem;
-      margin-bottom: 2rem;
-    }
-    .mode-button {
-      padding: 1rem;
-      background: rgba(42, 42, 42, 0.4);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 12px;
-      color: var(--text);
-      cursor: pointer;
-      transition: all 0.3s ease;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
-    }
-    .mode-button::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      background: radial-gradient(circle, rgba(255, 51, 102, 0.3) 0%, transparent 70%);
-      transition: all 0.5s ease;
-      transform: translate(-50%, -50%);
-    }
-    .mode-button:hover::before {
-      width: 100%;
-      height: 100%;
-    }
-    .mode-button.active {
-      background: var(--gradient);
-      border-color: transparent;
-      transform: translateY(-2px);
-      box-shadow: 0 10px 30px rgba(255, 51, 102, 0.3);
-    }
-    .mode-icon {
-      font-size: 1.5rem;
-      margin-bottom: 0.5rem;
-    }
-    .mode-name {
-      font-size: 0.875rem;
-      font-weight: 500;
-    }
-    .power-control {
-      margin-bottom: 2rem;
-    }
-    .power-label {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 1rem;
-      font-weight: 500;
-    }
-    .power-value {
-      color: var(--primary);
-      font-weight: 600;
-    }
-    .power-slider {
-      position: relative;
-      height: 8px;
-      background: rgba(42, 42, 42, 0.5);
-      border-radius: 4px;
-      overflow: hidden;
-      cursor: pointer;
-    }
-    .power-fill {
-      position: absolute;
-      height: 100%;
-      background: var(--gradient);
-      border-radius: 4px;
-      width: 50%;
-      transition: width 0.3s ease;
-    }
-    .power-handle {
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 24px;
-      height: 24px;
-      background: white;
-      border-radius: 50%;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-      cursor: grab;
-      transition: all 0.3s ease;
-    }
-    .power-handle:active {
-      cursor: grabbing;
-      transform: translate(-50%, -50%) scale(1.2);
-    }
-    .pattern-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-      gap: 0.75rem;
-      margin-bottom: 2rem;
-    }
-    .pattern-button {
-      aspect-ratio: 1;
-      background: rgba(42, 42, 42, 0.4);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 12px;
-      color: var(--text);
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.25rem;
-    }
-    .pattern-button:hover {
-      background: rgba(255, 51, 102, 0.2);
-      transform: scale(1.05);
-    }
-    .pattern-button.active {
-      background: var(--gradient);
-      border-color: transparent;
-      animation: patternPulse 1s ease-in-out infinite;
-    }
-    @keyframes patternPulse {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
-    }
-    .action-buttons {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-    .action-button {
-      padding: 1rem;
-      background: rgba(42, 42, 42, 0.4);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 12px;
-      color: var(--text);
-      cursor: pointer;
-      transition: all 0.3s ease;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-    }
-    .action-button:hover {
-      background: rgba(255, 51, 102, 0.2);
-      transform: translateY(-2px);
-    }
-    .action-button.primary {
-      background: var(--gradient);
-      border: none;
-      color: white;
-    }
-    .action-button.primary:hover {
-      box-shadow: 0 10px 30px rgba(255, 51, 102, 0.3);
-    }
-    .action-button.danger {
-      background: rgba(239, 68, 68, 0.2);
-      border-color: rgba(239, 68, 68, 0.3);
-      color: var(--danger);
-    }
-    .stats-panel {
-      background: rgba(26, 26, 26, 0.6);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 20px;
-      padding: 1.5rem;
-    }
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-    }
-    .stat-card {
-      background: rgba(42, 42, 42, 0.4);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 12px;
-      padding: 1rem;
-      text-align: center;
-    }
-    .stat-value {
-      font-size: 2rem;
-      font-weight: bold;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .stat-label {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      margin-top: 0.25rem;
-    }
-    .notification {
-      position: fixed;
-      bottom: 2rem;
-      right: 2rem;
-      background: rgba(26, 26, 26, 0.95);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 51, 102, 0.2);
-      border-radius: 12px;
-      padding: 1rem 1.5rem;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      transform: translateX(400px);
-      transition: transform 0.3s ease;
-      z-index: 1000;
-    }
-    .notification.show {
-      transform: translateX(0);
-    }
-    .notification-icon {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .notification.success .notification-icon {
-      background: rgba(74, 222, 128, 0.2);
-      color: var(--success);
-    }
-    .notification.error .notification-icon {
-      background: rgba(239, 68, 68, 0.2);
-      color: var(--danger);
-    }
-    @media (max-width: 768px) {
-      .app-container {
-        grid-template-columns: 1fr;
-      }
-      .control-modes {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      .pattern-grid {
-        grid-template-columns: repeat(4, 1fr);
-      }
-      .action-buttons {
-        grid-template-columns: 1fr;
-      }
-      main {
-        padding: 0 1rem;
-      }
-    }
-    footer {
-      text-align: center;
-      padding: 2rem;
-      color: var(--text-secondary);
-      border-top: 1px solid rgba(255, 51, 102, 0.1);
-      margin-top: 3rem;
-    }
-    footer a {
-      color: var(--primary);
-      text-decoration: none;
-      transition: color 0.3s ease;
-    }
-    footer a:hover {
-      color: var(--primary-dark);
-    }
-    .preset-modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.8);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-    }
-    .preset-modal.show {
-      display: flex;
-    }
-    .preset-content {
-      background: var(--surface);
-      border-radius: 20px;
-      padding: 2rem;
-      max-width: 500px;
-      width: 90%;
-      max-height: 80vh;
-      overflow-y: auto;
-    }
-    .preset-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-    }
-    .preset-list {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-      gap: 1rem;
-    }
-    .preset-item {
-      background: rgba(42, 42, 42, 0.4);
-      border: 1px solid rgba(255, 51, 102, 0.1);
-      border-radius: 12px;
-      padding: 1rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      text-align: center;
-    }
-    .preset-item:hover {
-      background: rgba(255, 51, 102, 0.2);
-      transform: translateY(-2px);
-    }
-  </style>
 </head>
-<body>
-  <div class="background-animation"></div>
-  <header>
-    <div class="header-content">
-      <div class="logo">
-        <div class="logo-icon">💕</div>
-        <span>Lovense Control</span>
-      </div>
-      <div class="connection-status disconnected" id="connectionStatus">
-        <span class="status-dot"></span>
-        <span id="statusText">Disconnected</span>
-      </div>
-    </div>
-  </header>
-  <main>
-    <div class="app-container">
-      <aside class="device-panel">
-        <h2 class="panel-title">
-          <span>📱</span>
-          Bluetooth Devices
-        </h2>
-        <div class="device-list" id="deviceList">
-          <div class="device-card" data-device="lush2">
-            <div class="device-info">
-              <div>
-                <div class="device-name">Lush 2</div>
-                <div class="device-type">Vibrating Egg</div>
-              </div>
-              <div class="device-signal">
-                <div class="signal-bar"></div>
-                <div class="signal-bar"></div>
-                <div class="signal-bar"></div>
-                <div class="signal-bar"></div>
-              </div>
-            </div>
-          </div>
-          <div class="device-card" data-device="hush">
-            <div class="device-info">
-              <div>
-                <div class="device-name">Hush</div>
-                <div class="device-type">Butt Plug</div>
-              </div>
-              <div class="device-signal">
-                <div class="signal-bar"></div>
-                <div class="signal-bar"></div>
-                <div class="signal-bar"></div>
-                <div class="signal-bar" style="opacity: 0.5;"></div>
-              </div>
-            </div>
-          </div>
-          <div class="device-card" data-device="nora">
-            <div class="device-info">
-              <div>
-                <div class="device-name">Nora</div>
-                <div class="device-type">Rabbit Vibrator</div>
-              </div>
-              <div class="device-signal">
-                <div class="signal-bar"></div>
-                <div class="signal-bar"></div>
-                <div class="signal-bar" style="opacity: 0.5;"></div>
-                <div class="signal-bar" style="opacity: 0.3;"></div>
-              </div>
             </div>
-          </div>
-        </div>
-        <button class="scan-button" id="scanButton">
-          <span>🔍</span> Scan for Devices
-        </button>
-      </aside>
-      <section class="control-panel">
-        <div class="control-header">
-          <h2 class="control-title">Device Control</h2>
-          <span id="connectedDeviceName" style="color: var(--text-secondary);">No device connected</span>
-        </div>
-        <div class="control-modes">
-          <button class="mode-button active" data-mode="manual">
-            <div class="mode-icon">🎮</div>
-            <div class="mode-name">Manual</div>
-          </button>
-          <button class="mode-button" data-mode="pattern">
-            <div class="mode-icon">〰️</div>
-            <div class="mode-name">Pattern</div>
-          </button>
-          <button class="mode-button" data-mode="music">
-            <div class="mode-icon">🎵</div>
-            <div class="mode-name">Music</div>
-          </button>
-          <button class="mode-button" data-mode="wave">
-            <div class="mode-icon">🌊</div>
-            <div class="mode-name">Wave</div>
-          </button>
-          <button class="mode-button" data-mode="pulse">
-            <div class="mode-icon">💗</div>
-            <div class="mode-name">Pulse</div>
-          </button>
-          <button class="mode-button" data-mode="random">
-            <div class="mode-icon">🎲</div>
-            <div class="mode-name">Random</div>
-          </button>
-        </div>
-        <div class="power-control">
-          <div class="power-label">
-            <span>Vibration Strength</span>
-            <span class="power-value" id="powerValue">50%</span>
-          </div>
-          <div class="power-slider" id="powerSlider">
-            <div class="power-fill" id="powerFill"></div>
-            <div class="power-handle" id="powerHandle" style="left: 50%;"></div>
-          </div>
-        </div>
-        <div class="pattern-grid" id="patternGrid" style="display: none;">
-          <button class="pattern-button" data-pattern="wave">🌊</button>
-          <button class="pattern-button" data-pattern="pulse">💗</button>
-          <button class="pattern-button" data-pattern="ramp">📈</button>
-          <button class="pattern-button" data-pattern="fire">🔥</button>
-          <button class="pattern-button" data-pattern="ocean">🌊</button>
-          <button class="pattern-button" data-pattern="thunder">⚡</button>
-          <button class="pattern-button" data-pattern="zen">🧘</button>
-          <button class="pattern-button" data-pattern="ecstasy">✨</button>
         </div>
-        <div class="action-buttons">
-          <button class="action-button primary" id="startButton">
-            <span>▶️</span> Start
-          </button>
-          <button class="action-button" id="pauseButton">
-            <span>⏸️</span> Pause
-          </button>
-          <button class="action-button" id="presetButton">
-            <span>⭐</span> Presets
-          </button>
-          <button class="action-button danger" id="stopButton">
-            <span>⏹️</span> Stop
-          </button>
         </div>
-      </section>
-    </div>
-    <section class="stats-panel">
-      <h2 class="panel-title">
-        <span>📊</span>
-        Device Statistics
-      </h2>
-      <div class="stats-grid">
-        <div class="stat-card">
-          <div class="stat-value" id="batteryLevel">85%</div>
-          <div class="stat-label">Battery Level</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value" id="runtime">0m</div>
-          <div class="stat-label">Runtime</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value" id="temperature">36°C</div>
-          <div class="stat-label">Temperature</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value" id="signalStrength">-45 dBm</div>
-          <div class="stat-label">Signal Strength</div>
         </div>
-      </div>
-    </section>
-  </main>
-  <footer>
-    <p>© 2024 Lovense Control | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></p>
-  </footer>
-  <div class="notification" id="notification">
-    <div class="notification-icon" id="notificationIcon">✓</div>
-    <div class="notification-message" id="notificationMessage">Device connected successfully</div>
-  </div>
-  <div class="preset-modal" id="presetModal">
-    <div class="preset-content">
-      <div class="preset-header">
-        <h2>Choose Preset</h2>
-        <button onclick="closePresetModal()" style="background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer;">✕</button>
-      </div>
-      <div class="preset-list">
-        <div class="preset-item" onclick="selectPreset('Gentle')">
-          <div style="font-size: 2rem;">🌸</div>
-          <div>Gentle</div>
-        </div>
-        <div class="preset-item" onclick="selectPreset('Tease')">
-          <div style="font-size: 2rem;">😏</div>
-          <div>Tease</div>
-        </div>
-        <div class="preset-item" onclick="selectPreset('Intense')">
-          <div style="font-size: 2rem;">🔥</div>
-          <div>Intense</div>
-        </div>
-        <div class="preset-item" onclick="selectPreset('Edge')">
-          <div style="font-size: 2rem;">⚡</div>
-          <div>Edge</div>
-        </div>
-        <div class="preset-item" onclick="selectPreset('Wave')">
-          <div style="font-size: 2rem;">🌊</div>
-          <div>Wave</div>
-        </div>
-        <div class="preset-item" onclick="selectPreset('Pulse')">
-          <div style="font-size: 2rem;">💗</div>
-          <div>Pulse</div>
         </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    // App State
-    const appState = {
-      connectedDevice: null,
-      currentMode: 'manual',
-      powerLevel: 50,
-      isRunning: false,
-      runtime: 0,
-      selectedPattern: null,
-      selectedPreset: null
-    };
-    // DOM Elements
-    const connectionStatus = document.getElementById('connectionStatus');
-    const statusText = document.getElementById('statusText');
-    const deviceList = document.getElementById('deviceList');
-    const scanButton = document.getElementById('scanButton');
-    const powerSlider = document.getElementById('powerSlider');
-    const powerHandle = document.getElementById('powerHandle');
-    const powerFill = document.getElementById('powerFill');
-    const powerValue = document.getElementById('powerValue');
-    const connectedDeviceName = document.getElementById('connectedDeviceName');
-    const patternGrid = document.getElementById('patternGrid');
-    const notification = document.getElementById('notification');
-    const notificationMessage = document.getElementById('notificationMessage');
-    const notificationIcon = document.getElementById('notificationIcon');
-    const presetModal = document.getElementById('presetModal');
-    // Initialize
-    document.addEventListener('DOMContentLoaded', () => {
-      initializeEventListeners();
-      startRuntimeCounter();
-      simulateSignalStrength();
-    });
-    function initializeEventListeners() {
-      // Device selection
-      deviceList.addEventListener('click', (e) => {
-        const deviceCard = e.target.closest('.device-card');
-        if (deviceCard) {
-          connectDevice(deviceCard.dataset.device);
-        }
-      });
-      // Scan button
-      scanButton.addEventListener('click', () => {
-        scanForDevices();
-      });
-      // Mode buttons
-      document.querySelectorAll('.mode-button').forEach(button => {
-        button.addEventListener('click', () => {
-          selectMode(button.dataset.mode);
-        });
-      });
-      // Pattern buttons
-      document.querySelectorAll('.pattern-button').forEach(button => {
-        button.addEventListener('click', () => {
-          selectPattern(button.dataset.pattern);
-        });
-      });
-      // Power slider
-      initializePowerSlider();
-      // Action buttons
-      document.getElementById('startButton').addEventListener('click', startDevice);
-      document.getElementById('pauseButton').addEventListener('click', pauseDevice);
-      document.getElementById('stopButton').addEventListener('click', stopDevice);
-      document.getElementById('presetButton').addEventListener('click', showPresets);
-    }
-    function initializePowerSlider() {
-      let isDragging = false;
-      powerHandle.addEventListener('mousedown', () => isDragging = true);
-      document.addEventListener('mouseup', () => isDragging = false);
-      document.addEventListener('mousemove', (e) => {
-        if (isDragging) {
-          updatePowerFromMouse(e);
-        }
-      });
-      powerSlider.addEventListener('click', (e) => {
-        if (!isDragging) {
-          updatePowerFromMouse(e);
-        }
-      });
-      // Touch support
-      powerHandle.addEventListener('touchstart', () => isDragging = true);
-      document.addEventListener('touchend', () => isDragging = false);
-      document.addEventListener('touchmove', (e) => {
-        if (isDragging) {
-          const touch = e.touches[0];
-          updatePowerFromTouch(touch);
-        }
-      });
-    }
-    function updatePowerFromMouse(e) {
-      const rect = powerSlider.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
-      updatePower(percentage);
-    }
-    function updatePowerFromTouch(touch) {
-      const rect = powerSlider.getBoundingClientRect();
-      const x = touch.clientX - rect.left;
-      const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
-      updatePower(percentage);
-    }
-    function updatePower(percentage) {
-      appState.powerLevel = Math.round(percentage);
-      powerFill.style.width = `${percentage}%`;
-      powerHandle.style.left = `${percentage}%`;
-      powerValue.textContent = `${appState.powerLevel}%`;
-      if (appState.connectedDevice && appState.isRunning) {
-        sendCommandToDevice('vibrate', appState.powerLevel);
-        updateTemperature(appState.powerLevel);
-      }
-    }
-    function connectDevice(deviceId) {
-      if (appState.connectedDevice === deviceId) return;
-      // Update UI
-      document.querySelectorAll('.device-card').forEach(card => {
-        card.classList.remove('connected');
-      });
-      document.querySelector(`[data-device="${deviceId}"]`).classList.add('connected');
-      // Update state
-      appState.connectedDevice = deviceId;
-      // Update connection status
-      connectionStatus.classList.remove('disconnected');
-      statusText.textContent = `Connected to ${deviceId.toUpperCase()}`;
-      // Update control panel
-      const deviceNames = {
-        'lush2': 'Lush 2',
-        'hush': 'Hush',
-        'nora': 'Nora'
-      };
-      connectedDeviceName.textContent = deviceNames[deviceId] || 'Unknown Device';
-      // Show notification
-      showNotification(`Connected to ${deviceNames[deviceId]}`, 'success');
-      // Simulate device stats update
-      updateDeviceStats();
-    }
-    function selectMode(mode) {
-      if (!appState.connectedDevice) {
-        showNotification('Please connect a device first', 'error');
-        return;
-      }
-      appState.currentMode = mode;
-      // Update UI
-      document.querySelectorAll('.mode-button').forEach(button => {
-        button.classList.remove('active');
-      });
-      document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
-      // Show/hide pattern grid for pattern mode
-      patternGrid.style.display = mode === 'pattern' ? 'grid' : 'none';
-      // Send command to device
-      sendCommandToDevice('mode', mode);
-      showNotification(`Switched to ${mode} mode`, 'success');
-    }
-    function selectPattern(pattern) {
-      if (!appState.connectedDevice || appState.currentMode !== 'pattern') return;
-      appState.selectedPattern = pattern;
-      // Update UI
-      document.querySelectorAll('.pattern-button').forEach(button => {
-        button.classList.remove('active');
-      });
-      document.querySelector(`[data-pattern="${pattern}"]`).classList.add('active');
-      // Send command to device
-      sendCommandToDevice('pattern', pattern);
-      showNotification(`Pattern ${pattern} activated`, 'success');
-    }
-    function startDevice() {
-      if (!appState.connectedDevice) {
-        showNotification('Please connect a device first', 'error');
-        return;
-      }
-      appState.isRunning = true;
-      sendCommandToDevice('start', { mode: appState.currentMode, power: appState.powerLevel });
-      showNotification('Device started', 'success');
-    }
-    function pauseDevice() {
-      if (!appState.connectedDevice

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Device Control Demo - Transformers.js</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 min-h-screen text-white">
+    <header class="bg-black bg-opacity-50 backdrop-blur-lg border-b border-white border-opacity-20">
+        <div class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                    </svg>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                        AI Device Control Demo
+                    </h1>
+                </div>
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+                   class="text-sm text-purple-300 hover:text-purple-200 transition-colors">
+                    Built with anycoder
+                </a>
             </div>
         </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid lg:grid-cols-2 gap-8">
+            <!-- Control Panel -->
+            <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <svg class="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                    </svg>
+                    Natural Language Control
+                </h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Enter Command</label>
+                        <textarea id="commandInput"
+                                  class="w-full px-4 py-3 bg-black bg-opacity-30 rounded-lg border border-purple-400 border-opacity-30 focus:border-opacity-60 focus:outline-none resize-none"
+                                  rows="3"
+                                  placeholder="E.g., 'Create a gentle wave pattern', 'Increase intensity gradually', 'Make a pulsing rhythm'"></textarea>
+                    </div>
+                    <button id="processCommand"
+                            class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed">
+                        Process Command
+                    </button>
+                    <div id="commandResult" class="hidden p-4 bg-black bg-opacity-30 rounded-lg">
+                        <h3 class="text-sm font-semibold mb-2 text-purple-300">Generated Pattern:</h3>
+                        <pre id="patternOutput" class="text-xs font-mono text-green-400"></pre>
+                    </div>
+                </div>
+            </div>
+            <!-- Pattern Generator -->
+            <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <svg class="w-5 h-5 mr-2 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
+                    </svg>
+                    AI Pattern Generator
+                </h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Pattern Type</label>
+                        <select id="patternType" class="w-full px-4 py-3 bg-black bg-opacity-30 rounded-lg border border-purple-400 border-opacity-30 focus:border-opacity-60 focus:outline-none">
+                            <option value="wave">Wave</option>
+                            <option value="pulse">Pulse</option>
+                            <option value="ramp">Ramp</option>
+                            <option value="random">Random</option>
+                            <option value="custom">Custom AI Generated</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Duration (seconds)</label>
+                        <input type="range" id="duration" min="5" max="60" value="20" class="w-full">
+                        <div class="text-center text-sm mt-1">
+                            <span id="durationValue">20</span>s
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Intensity</label>
+                        <input type="range" id="intensity" min="0" max="100" value="50" class="w-full">
+                        <div class="text-center text-sm mt-1">
+                            <span id="intensityValue">50</span>%
+                        </div>
+                    </div>
+                    <button id="generatePattern"
+                            class="w-full py-3 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg font-semibold hover:from-pink-700 hover:to-purple-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed">
+                        Generate Pattern
+                    </button>
+                    <div id="generatedPattern" class="hidden p-4 bg-black bg-opacity-30 rounded-lg">
+                        <canvas id="patternCanvas" width="400" height="150" class="w-full rounded"></canvas>
+                        <div class="mt-2 text-xs text-purple-300">
+                            <span id="patternStats"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
+        <!-- Safety & Settings -->
+        <div class="mt-8 bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <svg class="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                </svg>
+                Safety Settings & Limits
+            </h2>
+            <div class="grid md:grid-cols-3 gap-4">
+                <div class="bg-black bg-opacity-30 rounded-lg p-4">
+                    <label class="flex items-center justify-between">
+                        <span class="text-sm">Max Intensity Limit</span>
+                        <input type="checkbox" id="maxIntensity" checked class="toggle-checkbox">
+                    </label>
+                    <p class="text-xs text-gray-400 mt-1">Caps maximum intensity at 80%</p>
+                </div>
+                <div class="bg-black bg-opacity-30 rounded-lg p-4">
+                    <label class="flex items-center justify-between">
+                        <span class="text-sm">Auto-stop Timer</span>
+                        <input type="checkbox" id="autoStop" checked class="toggle-checkbox">
+                    </label>
+                    <p class="text-xs text-gray-400 mt-1">Automatically stop after 30 minutes</p>
+                </div>
+                <div class="bg-black bg-opacity-30 rounded-lg p-4">
+                    <label class="flex items-center justify-between">
+                        <span class="text-sm">Gradual Changes</span>
+                        <input type="checkbox" id="gradualChanges" checked class="toggle-checkbox">
+                    </label>
+                    <p class="text-xs text-gray-400 mt-1">Smooth transitions between patterns</p>
+                </div>
+            </div>
         </div>
+        <!-- Status Display -->
+        <div id="statusBar" class="mt-8 bg-black bg-opacity-30 backdrop-blur-lg rounded-lg p-4 border border-white border-opacity-20">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div id="statusIndicator" class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
+                    <span id="statusText" class="text-sm">Ready</span>
+                </div>
+                <div id="modelStatus" class="text-xs text-gray-400">
+                    Model: Loading...
+                </div>
+            </div>
+            <div id="loadingBar" class="mt-2 hidden">
+                <div class="w-full bg-black bg-opacity-50 rounded-full h-2">
+                    <div id="loadingProgress" class="bg-gradient-to-r from-purple-400 to-pink-400 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
+                </div>
+                <p id="loadingText" class="text-xs text-gray-400 mt-1">Initializing AI model...</p>
+            </div>
         </div>
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@2.17.2/dist/transformers.min.js"></script>
+    <script src="index.js"></script>
+</body>
+</html>