Update src/App.jsx

src/App.jsx

@@ -1,4 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
+// Import QRCode and jsQR directly as they should be installed via npm
+import QRCode from 'qrcode';
+import jsQR from 'jsqr';
 
 // Main App component
 const App = () => {
@@ -204,8 +207,9 @@ const App = () => {
 
     // Effect to generate QR code on the main canvas
     useEffect(() => {
-        if (qrCanvasRef.current && window.QRCode && content.trim() !== '') {
-            window.QRCode.toCanvas(qrCanvasRef.current, content, {
+        // Use the imported QRCode directly, not window.QRCode
+        if (qrCanvasRef.current && QRCode && content.trim() !== '') {
+            QRCode.toCanvas(qrCanvasRef.current, content, {
                 errorCorrectionLevel: errorLevel,
                 color: {
                     dark: qrStyles[selectedStyleIndex].fg,
@@ -223,11 +227,12 @@ const App = () => {
 
     // Effect to generate QR codes for style previews
     useEffect(() => {
-        if (window.QRCode) {
+        // Use the imported QRCode directly, not window.QRCode
+        if (QRCode) {
             qrStyles.forEach((style, index) => {
                 const canvas = styleCanvasRefs.current[index];
                 if (canvas) {
-                    window.QRCode.toCanvas(canvas, "Sample", {
+                    QRCode.toCanvas(canvas, "Sample", {
                         errorCorrectionLevel: 'H',
                         width: 80, // Fixed size for preview
                         color: {
@@ -240,7 +245,7 @@ const App = () => {
                 }
             });
         }
-    }, [window.QRCode]);
+    }, [QRCode]); // Dependency changed to QRCode
 
     // Function to download the generated QR code
     const downloadQrCode = () => {
@@ -277,8 +282,9 @@ const App = () => {
 
                 const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
-                if (window.jsQR) {
-                    let code = window.jsQR(imageData.data, imageData.width, imageData.height);
+                // Use the imported jsQR directly, not window.jsQR
+                if (jsQR) {
+                    let code = jsQR(imageData.data, imageData.width, imageData.height);
 
                     if (!code) {
                         // Try inverting colors for decoding
@@ -287,7 +293,7 @@ const App = () => {
                             imageData.data[i + 1] = 255 - imageData.data[i + 1];
                             imageData.data[i + 2] = 255 - imageData.data[i + 2];
                         }
-                        code = window.jsQR(imageData.data, imageData.width, imageData.height);
+                        code = jsQR(imageData.data, imageData.width, imageData.height);
                     }
 
                     if (code) {
@@ -392,7 +398,6 @@ const App = () => {
         }
     };
 
-
     // QR Generator Tab Content
     const QRGeneratorTab = () => (
         <div className="flex flex-col lg:flex-row p-4 md:p-6 space-y-6 lg:space-y-0 lg:space-x-6 h-full">
@@ -577,119 +582,8 @@ const App = () => {
     );
 
     return (
+        // The main div for the application, no script or style tags here
         <div className={`min-h-screen font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
-            {/* 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" />
-            {/* QR Code Generation Library (qrcode.js) */}
-            <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
-            {/* QR Code Decoding Library (jsQR) */}
-            <script src="https://cdn.jsdelivr.net/npm/jsqr@1.1.1/dist/jsQR.min.js"></script>
-
-            {/* Custom CSS for animations and scrollbar */}
-            <style>
-                {`
-                .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, 0, 255, 0.6), /* Magenta */
-                            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, 0, 255, 0.7), 
-                            0 0 30px rgba(255, 0, 255, 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>
-
             <div className="container mx-auto p-4 max-w-7xl">
                 <h1 className={`text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r ${currentThemeClasses.headerGlow} font-orbitron`}>
                     QuantumQR Studio