adding examples

2025-11-13 19:42:44 +01:00
parent ac5322e580
commit ec02a90812
57 changed files with 8226 additions and 0 deletions
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+      padding: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+      width: 180px;
+      background-color: #202124;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    /* Toggle switch container */
+    .toggle-container {
+      position: relative;
+      width: 48px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+    
+    /* Hidden checkbox */
+    .toggle-input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+    }
+    
+    /* Toggle switch track */
+    .toggle-track {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #5f6368;
+      transition: all 0.3s ease;
+      border-radius: 24px;
+    }
+    
+    /* Toggle switch thumb */
+    .toggle-track::before {
+      position: absolute;
+      content: "";
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+      background-color: #e8eaed;
+      transition: all 0.3s ease;
+      border-radius: 50%;
+    }
+    
+    /* Checked state */
+    .toggle-input:checked + .toggle-track {
+      background-color: #81c995;
+    }
+    
+    .toggle-input:checked + .toggle-track::before {
+      transform: translateX(24px);
+    }
+    
+    /* Retrying state - must come after checked state to override */
+    .retrying .toggle-input:checked + .toggle-track {
+      background-color: #5f5034;
+    }
+    
+    .retrying .toggle-input:checked + .toggle-track::before {
+      background-color: #fdd663;
+    }
+    
+    /* Status text */
+    .status {
+      color: #e8eaed;
+      font-size: 14px;
+      font-weight: 500;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .status.disconnected {
+      color: #8ab4f8;
+    }
+    
+    .status.retrying {
+      color: #fdd663;
+    }
+    
+    .status.connected {
+      color: #81c995;
+    }
+    
+    /* Spinner */
+    .spinner {
+      width: 12px;
+      height: 12px;
+      border: 2px solid rgba(253, 214, 99, 0.3);
+      border-top-color: #fdd663;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      display: none;
+    }
+    
+    .status.retrying .spinner {
+      display: inline-block;
+    }
+    
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div class="status disconnected" id="status">
+    <span class="spinner"></span>
+    <span class="status-text">Disconnected</span>
+  </div>
+  <label class="toggle-container">
+    <input type="checkbox" class="toggle-input" id="toggle">
+    <span class="toggle-track"></span>
+  </label>
+  <script src="popup.js"></script>
+</body>
+</html>