Update index.html

index.html

@@ -4,7 +4,125 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>QuantumQR Studio</title>
+    
+    <!-- Moved all CDN links here from App.jsx -->
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts - Inter for general text, Orbitron for headings -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossOrigin="anonymous" referrerPolicy="no-referrer" />
+    
+    <!-- IMPORTANT: The QR Code Generation/Decoding libraries are now imported directly in App.jsx
+         so these CDN scripts are no longer needed here. They were removed from App.jsx previously.
+         If you still have them in App.jsx, ensure they are removed from there.
+         The previous instructions were to install them via npm and import directly.
+         If you did not do that, please ensure you run `npm install qrcode jsqr` locally
+         and add `import QRCode from 'qrcode';` and `import jsQR from 'jsqr';` to App.jsx
+         and replace `window.QRCode` with `QRCode` and `window.jsQR` with `jsQR`.
+    -->
+
+    <!-- Custom CSS for animations and scrollbar - Moved here from App.jsx -->
+    <style>
+        /* These styles were inline in App.jsx, moved here for correctness */
+        .font-orbitron { font-family: 'Orbitron', sans-serif; }
+        .font-inter { font-family: 'Inter', sans-serif; }
+
+        /* Neon Glow for the header - Adjusted for readability */
+        @keyframes neon-glow {
+            0%, 100% {
+                /* Base text shadow for sharp inner glow */
+                text-shadow: 
+                    0 0 4px rgba(0, 255, 255, 0.8), /* Cyan */
+                    0 0 8px rgba(255, 255, 0, 0.6), /* Yellow */
+                    0 0 12px rgba(0, 150, 255, 0.4); /* Electric Blue */
+                transform: scale(1);
+            }
+            50% {
+                /* Expanded text shadow for soft outer glow */
+                text-shadow: 
+                    0 0 6px rgba(0, 255, 255, 1), 
+                    0 0 12px rgba(0, 255, 255, 0.8), 
+                    0 0 20px rgba(255, 255, 0, 0.7), 
+                    0 0 30px rgba(255, 255, 0, 0.5),
+                    0 0 40px rgba(0, 150, 255, 0.6),
+                    0 0 50px rgba(0, 150, 255, 0.4);
+                transform: scale(1.01);
+            }
+        }
+        .animate-neon-glow {
+            animation: neon-glow 2s infinite alternate; /* Slower pulse for elegance */
+        }
+
+        @keyframes scan-light {
+            0% {
+                transform: translateX(-100%);
+            }
+            100% {
+                transform: translateX(100%);
+            }
+        }
+        .scan-line {
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            width: 100%;
+            height: 2px;
+            animation: scan-light 3s infinite linear;
+        }
+
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.4);
+        }
+
+        /* Custom style for select dropdown arrow */
+        select {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 1.5em 1.5em;
+        }
+
+        /* Animated background gradient - Cyberpunk style */
+        @keyframes cyberpunk-gradient-shift {
+            0% { background-position: 0% 0%; background-color: #1a0033; } /* Deep Purple */
+            25% { background-position: 25% 50%; background-color: #001a33; } /* Deep Blue */
+            50% { background-position: 50% 100%; background-color: #33001a; } /* Dark Magenta */
+            75% { background-position: 75% 50%; background-color: #003333; } /* Dark Teal */
+            100% { background-position: 100% 0%; background-color: #1a0033; } /* Back to Deep Purple */
+        }
+        .animate-gradient-shift {
+            background-size: 400% 400%;
+            animation: cyberpunk-gradient-shift 20s ease infinite; /* Slower, more immersive shift */
+        }
+
+        /* Light theme animated background gradient (if needed, adjust colors) */
+        @keyframes gradient-shift-light {
+            0% { background-position: 0% 0%; }
+            25% { background-position: 25% 50%; }
+            50% { background-position: 50% 100%; }
+            75% { background-position: 75% 50%; }
+            100% { background-position: 100% 0%; }
+        }
+        .animate-gradient-shift-light {
+            background-size: 400% 400%;
+            animation: gradient-shift-light 15s ease infinite;
+        }
+    </style>
+
   </head>
   <body>
     <div id="root"></div>