Upload 9 files

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.env

Dockerfile

@@ -0,0 +1,20 @@
+# Stage 1: Build the React application
+FROM node:18-alpine as builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:alpine
+
+# Copy the built React app from the builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "my-qr-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jsqr": "^1.4.0",
+    "qrcode": "^1.5.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.0.4"
+  }
+}

src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.jsx

@@ -0,0 +1,734 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+// Main App component
+const App = () => {
+    const [activeTab, setActiveTab] = useState('generator');
+    const [content, setContent] = useState('');
+    const [errorLevel, setErrorLevel] = useState('L');
+    const [qrColor, setQrColor] = useState('#000000');
+    const [decodedContent, setDecodedContent] = useState('');
+    const [selectedStyleIndex, setSelectedStyleIndex] = useState(0);
+    const [currentTheme, setCurrentTheme] = useState('dark'); // Default theme
+    const [isSummarizing, setIsSummarizing] = useState(false); // Loading state for summarization
+    const [suggestedActions, setSuggestedActions] = useState(''); // State for suggested actions
+    const [isSuggestingActions, setIsSuggestingActions] = useState(false); // Loading state for action suggestions
+    const [showSuggestedActions, setShowSuggestedActions] = useState(false); // State to toggle suggestions visibility
+
+    const qrCanvasRef = useRef(null); // Ref for the main QR code canvas
+    const styleCanvasRefs = useRef([]); // Refs for the style preview canvases
+
+    // Define QR code styles (mimicking the Python app's styles)
+    const qrStyles = [
+        { name: "Classic", fg: "#000000" },
+        { name: "Blue", fg: "#0033CC" },
+        { name: "Red", fg: "#CC3300" },
+        { name: "Green", fg: "#006600" },
+        { name: "Pink", fg: "#FF0099" },
+        { name: "Teal", fg: "#008080" },
+        { name: "Indigo", fg: "#4B0082" },
+        { name: "Orange", fg: "#FF6600" },
+        { name: "Gray", "fg": "#333333" },
+        { name: "Crimson", "fg": "#DC143C" },
+        { name: "Gold", "fg": "#FFD700" },
+        { name: "Turquoise", "fg": "#40E0D0" },
+    ];
+
+    // Define themes for the web application with Web 3.0 GUI elements
+    const themes = {
+        dark: {
+            // Full-screen animated gradient background (deep charcoal to subtle dark violet)
+            bg: 'bg-gradient-to-br from-[#0A0A0A] via-[#1A0A2A] to-[#0A0A0A] animate-gradient-shift',
+            text: 'text-gray-100',
+            primaryAccent: 'from-blue-500 to-purple-600',
+            secondaryAccent: 'from-cyan-400 to-teal-500',
+            // Stronger glassmorphism with subtle inner shadow
+            glassBg: 'bg-white/5 backdrop-blur-3xl',
+            glassBorder: 'border-white/10',
+            shadow: 'shadow-blue-500/20',
+            glow: 'shadow-lg shadow-blue-500/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-blue-400/50',
+            success: 'text-green-400',
+            alert: 'text-pink-500',
+            inputBg: 'bg-white/5',
+            inputBorder: 'border-white/10',
+            // Tab active state with distinct background and glowing border
+            tabActive: 'bg-white/10 border-blue-500 shadow-lg shadow-blue-500/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-white/5 backdrop-blur-md',
+            cardBorder: 'border-white/10',
+            qrPreviewBorder: 'border-blue-500/50',
+            qrPreviewBg: 'bg-gradient-to-br from-gray-900/30 to-gray-800/30 backdrop-blur-md',
+            headerGlow: 'from-cyan-400 to-magenta-600 animate-neon-glow' // Updated header glow
+        },
+        light: {
+            // Platinum to ice white gradient
+            bg: 'bg-gradient-to-br from-[#F8F8F8] via-[#E8E8E8] to-[#F8F8F8] animate-gradient-shift-light',
+            text: 'text-gray-800',
+            primaryAccent: 'from-blue-400 to-purple-500',
+            secondaryAccent: 'from-cyan-300 to-teal-400',
+            glassBg: 'bg-white/80 backdrop-blur-3xl',
+            glassBorder: 'border-gray-200',
+            shadow: 'shadow-gray-400/20',
+            glow: 'shadow-lg shadow-blue-300/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-blue-300/50',
+            success: 'text-green-600',
+            alert: 'text-red-600',
+            inputBg: 'bg-white/90',
+            inputBorder: 'border-gray-300',
+            tabActive: 'bg-white/90 border-blue-500 shadow-lg shadow-blue-300/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-white/90 backdrop-blur-md',
+            cardBorder: 'border-gray-200',
+            qrPreviewBorder: 'border-blue-400/50',
+            qrPreviewBg: 'bg-gradient-to-br from-gray-100/60 to-gray-200/60 backdrop-blur-md',
+            headerGlow: 'from-cyan-500 to-magenta-700 animate-neon-glow' // Updated header glow
+        },
+        'forest-green': {
+            // Midnight green to neon teal
+            bg: 'bg-gradient-to-br from-[#0A2A1A] via-[#1A4A3A] to-[#0A3A2A] animate-gradient-shift',
+            text: 'text-white',
+            primaryAccent: 'from-green-500 to-emerald-600',
+            secondaryAccent: 'from-lime-400 to-green-500',
+            glassBg: 'bg-green-900/40 backdrop-blur-3xl',
+            glassBorder: 'border-green-800/20',
+            shadow: 'shadow-green-500/20',
+            glow: 'shadow-lg shadow-green-500/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-green-400/50',
+            success: 'text-lime-400',
+            alert: 'text-red-400',
+            inputBg: 'bg-green-950/30',
+            inputBorder: 'border-green-900/15',
+            tabActive: 'bg-green-800/20 border-green-500 shadow-lg shadow-green-500/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-green-950/30 backdrop-blur-md',
+            cardBorder: 'border-green-900/15',
+            qrPreviewBorder: 'border-green-500/50',
+            qrPreviewBg: 'bg-gradient-to-br from-green-900/30 to-green-800/30 backdrop-blur-md',
+            headerGlow: 'from-cyan-400 to-green-600 animate-neon-glow' // Updated header glow
+        },
+        'ocean-blue': {
+            // Deep ocean to electric blue
+            bg: 'bg-gradient-to-br from-[#001A33] via-[#003366] to-[#002A5A] animate-gradient-shift',
+            text: 'text-white',
+            primaryAccent: 'from-blue-600 to-indigo-700',
+            secondaryAccent: 'from-sky-400 to-cyan-500',
+            glassBg: 'bg-blue-900/40 backdrop-blur-3xl',
+            glassBorder: 'border-blue-800/20',
+            shadow: 'shadow-blue-600/20',
+            glow: 'shadow-lg shadow-blue-600/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-blue-500/50',
+            success: 'text-sky-400',
+            alert: 'text-red-400',
+            inputBg: 'bg-blue-950/30',
+            inputBorder: 'border-blue-900/15',
+            tabActive: 'bg-blue-800/20 border-blue-500 shadow-lg shadow-blue-600/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-blue-950/30 backdrop-blur-md',
+            cardBorder: 'border-blue-900/15',
+            qrPreviewBorder: 'border-blue-600/50',
+            qrPreviewBg: 'bg-gradient-to-br from-blue-950/30 to-blue-900/30 backdrop-blur-md',
+            headerGlow: 'from-cyan-400 to-blue-600 animate-neon-glow' // Updated header glow
+        },
+        'warm-grey': {
+            // Dark concrete to warm charcoal
+            bg: 'bg-gradient-to-br from-[#202020] via-[#404040] to-[#303030] animate-gradient-shift',
+            text: 'text-gray-100',
+            primaryAccent: 'from-gray-500 to-gray-700',
+            secondaryAccent: 'from-yellow-400 to-orange-500',
+            glassBg: 'bg-gray-700/40 backdrop-blur-3xl',
+            glassBorder: 'border-gray-600/20',
+            shadow: 'shadow-gray-500/20',
+            glow: 'shadow-lg shadow-gray-500/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-gray-400/50',
+            success: 'text-lime-400',
+            alert: 'text-red-400',
+            inputBg: 'bg-gray-800/30',
+            inputBorder: 'border-gray-700/15',
+            tabActive: 'bg-gray-600/20 border-gray-500 shadow-lg shadow-gray-500/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-gray-800/30 backdrop-blur-md',
+            cardBorder: 'border-gray-700/15',
+            qrPreviewBorder: 'border-gray-500/50',
+            qrPreviewBg: 'bg-gradient-to-br from-gray-800/30 to-gray-700/30 backdrop-blur-md',
+            headerGlow: 'from-cyan-300 to-blue-500 animate-neon-glow' // Updated header glow
+        },
+        'deep-purple': {
+            // Deepest purple to dark magenta
+            bg: 'bg-gradient-to-br from-[#100830] via-[#201040] to-[#180C38] animate-gradient-shift',
+            text: 'text-white',
+            primaryAccent: 'from-purple-600 to-fuchsia-700',
+            secondaryAccent: 'from-pink-400 to-purple-500',
+            glassBg: 'bg-purple-900/40 backdrop-blur-3xl',
+            glassBorder: 'border-purple-800/20',
+            shadow: 'shadow-purple-600/20',
+            glow: 'shadow-lg shadow-purple-600/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-purple-500/50',
+            success: 'text-lime-400',
+            alert: 'text-red-400',
+            inputBg: 'bg-purple-950/30',
+            inputBorder: 'border-purple-900/15',
+            tabActive: 'bg-purple-800/20 border-purple-500 shadow-lg shadow-purple-600/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-purple-950/30 backdrop-blur-md',
+            cardBorder: 'border-purple-900/15',
+            qrPreviewBorder: 'border-purple-600/50',
+            qrPreviewBg: 'bg-gradient-to-br from-purple-950/30 to-purple-900/30 backdrop-blur-md',
+            headerGlow: 'from-cyan-400 to-purple-600 animate-neon-glow' // Updated header glow
+        },
+        'sunrise-orange': {
+            // Deepest orange to fiery red
+            bg: 'bg-gradient-to-br from-[#A0300A] via-[#D0501A] to-[#B84012] animate-gradient-shift',
+            text: 'text-white',
+            primaryAccent: 'from-orange-600 to-red-700',
+            secondaryAccent: 'from-yellow-400 to-orange-500',
+            glassBg: 'bg-orange-800/40 backdrop-blur-3xl',
+            glassBorder: 'border-orange-700/20',
+            shadow: 'shadow-orange-600/20',
+            glow: 'shadow-lg shadow-orange-600/40',
+            buttonGlow: 'hover:shadow-xl hover:shadow-orange-500/50',
+            success: 'text-lime-400',
+            alert: 'text-red-400',
+            inputBg: 'bg-orange-900/30',
+            inputBorder: 'border-orange-800/15',
+            tabActive: 'bg-orange-700/20 border-orange-500 shadow-lg shadow-orange-600/20',
+            tabInactive: 'bg-transparent border-transparent',
+            cardBg: 'bg-orange-900/30 backdrop-blur-md',
+            cardBorder: 'border-orange-800/15',
+            qrPreviewBorder: 'border-orange-600/50',
+            qrPreviewBg: 'bg-gradient-to-br from-orange-900/30 to-orange-800/30 backdrop-blur-md',
+            headerGlow: 'from-cyan-500 to-orange-700 animate-neon-glow' // Updated header glow
+        },
+    };
+
+    const currentThemeClasses = themes[currentTheme];
+
+    // Effect to generate QR code on the main canvas
+    useEffect(() => {
+        if (qrCanvasRef.current && window.QRCode && content.trim() !== '') {
+            window.QRCode.toCanvas(qrCanvasRef.current, content, {
+                errorCorrectionLevel: errorLevel,
+                color: {
+                    dark: qrStyles[selectedStyleIndex].fg,
+                    light: '#FFFFFF'
+                }
+            }, function (error) {
+                if (error) console.error(error);
+            });
+        } else if (qrCanvasRef.current) {
+            // Clear canvas if content is empty
+            const context = qrCanvasRef.current.getContext('2d');
+            context.clearRect(0, 0, qrCanvasRef.current.width, qrCanvasRef.current.height);
+        }
+    }, [content, errorLevel, selectedStyleIndex, qrColor]);
+
+    // Effect to generate QR codes for style previews
+    useEffect(() => {
+        if (window.QRCode) {
+            qrStyles.forEach((style, index) => {
+                const canvas = styleCanvasRefs.current[index];
+                if (canvas) {
+                    window.QRCode.toCanvas(canvas, "Sample", {
+                        errorCorrectionLevel: 'H',
+                        width: 80, // Fixed size for preview
+                        color: {
+                            dark: style.fg,
+                            light: '#FFFFFF'
+                        }
+                    }, function (error) {
+                        if (error) console.error(error);
+                    });
+                }
+            });
+        }
+    }, [window.QRCode]);
+
+    // Function to download the generated QR code
+    const downloadQrCode = () => {
+        if (content.trim() === '') {
+            alert('Please enter content to generate QR code.');
+            return;
+        }
+        const canvas = qrCanvasRef.current;
+        if (canvas) {
+            const pngUrl = canvas.toDataURL("image/png");
+            const downloadLink = document.createElement('a');
+            downloadLink.href = pngUrl;
+            downloadLink.download = 'qrcode.png';
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        }
+    };
+
+    // Function to decode QR code from an uploaded image
+    const decodeQrCode = (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const context = canvas.getContext('2d');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                context.drawImage(img, 0, 0, img.width, img.height);
+
+                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+                if (window.jsQR) {
+                    let code = window.jsQR(imageData.data, imageData.width, imageData.height);
+
+                    if (!code) {
+                        // Try inverting colors for decoding
+                        for (let i = 0; i < imageData.data.length; i += 4) {
+                            imageData.data[i] = 255 - imageData.data[i];
+                            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);
+                    }
+
+                    if (code) {
+                        setDecodedContent(code.data);
+                        setSuggestedActions(''); // Clear previous suggestions
+                        setShowSuggestedActions(false); // Hide suggestions by default
+                    } else {
+                        setDecodedContent('No QR code detected.');
+                        setSuggestedActions('');
+                        setShowSuggestedActions(false);
+                    }
+                } else {
+                    setDecodedContent('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
+                    setSuggestedActions('');
+                    setShowSuggestedActions(false);
+                }
+            };
+            img.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    };
+
+    // Function to summarize content using Gemini API
+    const summarizeContent = async () => {
+        if (!content.trim()) {
+            alert('Please enter content to summarize.');
+            return;
+        }
+
+        setIsSummarizing(true);
+        try {
+            let chatHistory = [];
+            const prompt = `Summarize the following text concisely: ${content}`;
+            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
+            const payload = { contents: chatHistory };
+            const apiKey = ""; // Canvas will provide this at runtime
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            const result = await response.json();
+
+            if (result.candidates && result.candidates.length > 0 &&
+                result.candidates[0].content && result.candidates[0].content.parts &&
+                result.candidates[0].content.parts.length > 0) {
+                const text = result.candidates[0].content.parts[0].text;
+                setContent(text); // Update the input field with summarized content
+            } else {
+                alert("Failed to summarize content. Please try again.");
+            }
+        } catch (error) {
+            console.error("Error summarizing content:", error);
+            alert("An error occurred while summarizing content.");
+        } finally {
+            setIsSummarizing(false);
+        }
+    };
+
+    // Function to suggest actions based on decoded content using Gemini API
+    const suggestActions = async () => {
+        if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
+            alert('Please decode a QR code first to suggest actions.');
+            return;
+        }
+
+        setIsSuggestingActions(true);
+        setSuggestedActions('Thinking...'); // Provide immediate feedback
+        setShowSuggestedActions(true); // Show the suggestions panel
+        try {
+            let chatHistory = [];
+            const prompt = `Given the following text from a QR code, suggest relevant actions a user might take. Format the suggestions as a bulleted list. Text: "${decodedContent}"`;
+            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
+            const payload = { contents: chatHistory };
+            const apiKey = ""; // Canvas will provide this at runtime
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            const result = await response.json();
+
+            if (result.candidates && result.candidates.length > 0 &&
+                result.candidates[0].content && result.candidates[0].content.parts &&
+                result.candidates[0].content.parts.length > 0) {
+                const text = result.candidates[0].content.parts[0].text;
+                setSuggestedActions(text);
+            } else {
+                setSuggestedActions("Could not suggest actions. Please try again.");
+            }
+        } catch (error) {
+            console.error("Error suggesting actions:", error);
+            setSuggestedActions("An error occurred while suggesting actions.");
+        } finally {
+            setIsSuggestingActions(false);
+        }
+    };
+
+
+    // 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">
+            {/* Left Panel: Input and Controls */}
+            <div className={`flex flex-col w-full lg:w-3/4 p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
+                <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Enter Content:</label>
+                <textarea
+                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter`}
+                    rows="6"
+                    placeholder="Enter text or URL..."
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                ></textarea>
+
+                <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
+                    <button
+                        className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
+                        onClick={summarizeContent}
+                        disabled={isSummarizing}
+                    >
+                        {isSummarizing ? (
+                            <i className="fas fa-spinner fa-spin mr-2"></i>
+                        ) : (
+                            <i className="fas fa-magic mr-2"></i>
+                        )}
+                        ✨ {isSummarizing ? 'Summarizing...' : 'Summarize Content'}
+                    </button>
+                    <button
+                        className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
+                        onClick={downloadQrCode}
+                    >
+                        <i className="fas fa-save mr-2"></i> Save QR Code
+                    </button>
+                </div>
+
+
+                <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Error Correction Level:</label>
+                <select
+                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
+                    value={errorLevel}
+                    onChange={(e) => setErrorLevel(e.target.value)}
+                >
+                    <option value="L">L - Low</option>
+                    <option value="M">M - Medium</option>
+                    <option value="Q">Q - Quality</option>
+                    <option value="H">H - High</option>
+                </select>
+
+                <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Pick QR Color:</label>
+                <input
+                    type="color"
+                    className={`w-full h-10 rounded-xl border ${currentThemeClasses.inputBorder} p-1 cursor-pointer transition-all duration-300`}
+                    value={qrColor}
+                    onChange={(e) => setQrColor(e.target.value)}
+                />
+
+                <label className={`mt-6 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>QR Preview:</label>
+                <div
+                    className={`relative flex justify-center items-center w-full min-h-[300px] rounded-2xl border-2 ${currentThemeClasses.qrPreviewBorder} ${currentThemeClasses.qrPreviewBg} p-4 shadow-inner overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:-translate-y-1 ${currentThemeClasses.glow}`}
+                >
+                    {content ? (
+                        <canvas ref={qrCanvasRef} width="256" height="256" className="rounded-lg shadow-xl"></canvas>
+                    ) : (
+                        <p className={`${currentThemeClasses.labelColor} text-lg font-inter`}>Enter content to see QR preview</p>
+                    )}
+                    {/* Light scan effect */}
+                    <div className="absolute inset-0 scan-line"></div>
+                </div>
+            </div>
+
+            {/* Right Panel: Style Selection */}
+            <div className={`w-full lg:w-1/4 p-6 rounded-2xl shadow-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} ${currentThemeClasses.text} flex flex-col transform transition-all duration-500 ease-in-out`}>
+                <label className={`mb-4 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Choose Style:</label>
+                <div className={`overflow-y-auto flex-grow rounded-xl p-2 ${currentThemeClasses.cardBg} custom-scrollbar`}>
+                    <div className="grid grid-cols-2 gap-4">
+                        {qrStyles.map((style, index) => (
+                            <div
+                                key={index}
+                                className={`flex flex-col items-center justify-center p-2 rounded-xl cursor-pointer transition-all duration-200 ease-in-out
+                                    ${selectedStyleIndex === index ? `border-4 ${currentThemeClasses.qrPreviewBorder} shadow-lg scale-105 ${currentThemeClasses.glow}` : `border-2 ${currentThemeClasses.inputBorder} hover:border-blue-400/50 hover:scale-[1.02]`}
+                                    ${currentThemeClasses.inputBg}`}
+                                onClick={() => {
+                                    setSelectedStyleIndex(index);
+                                    setQrColor(style.fg); // Update color picker with selected style's color
+                                }}
+                            >
+                                <canvas ref={el => styleCanvasRefs.current[index] = el} width="80" height="80" className="rounded-lg"></canvas>
+                                <span className={`mt-2 text-sm font-medium ${currentThemeClasses.labelColor} font-inter`}>{style.name}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+
+    // QR Decoder Tab Content
+    const QRDecoderTab = () => (
+        <div className={`flex flex-col p-4 md:p-6 space-y-6 h-full ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
+            <div
+                className={`flex flex-col items-center justify-center p-10 border-2 border-dashed ${currentThemeClasses.glassBorder} rounded-2xl min-h-[200px] ${currentThemeClasses.glassBg} ${currentThemeClasses.text} transition-all duration-300 shadow-2xl ${currentThemeClasses.shadow} hover:scale-[1.01] hover:-translate-y-1`}
+            >
+                <p className={`text-lg ${currentThemeClasses.labelColor} mb-4 font-inter`}>Drag & Drop QR Image Here</p>
+                <input
+                    type="file"
+                    accept="image/*"
+                    onChange={decodeQrCode}
+                    className="hidden"
+                    id="qr-upload-input"
+                />
+                <label
+                    htmlFor="qr-upload-input"
+                    className={`cursor-pointer py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
+                >
+                    <i className="fas fa-upload mr-2 animate-bounce"></i> Upload QR Image to Decode
+                </label>
+            </div>
+
+            <div className={`p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
+                <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Decoded Content:</label>
+                <textarea
+                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter`}
+                    rows="8"
+                    readOnly
+                    value={decodedContent}
+                    placeholder="Decoded content will appear here..."
+                ></textarea>
+
+                <button
+                    className={`mt-4 w-full py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
+                    onClick={suggestActions}
+                    disabled={isSuggestingActions || !decodedContent.trim() || decodedContent === 'No QR code detected.'}
+                >
+                    {isSuggestingActions ? (
+                        <i className="fas fa-spinner fa-spin mr-2"></i>
+                    ) : (
+                        <i className="fas fa-lightbulb mr-2"></i>
+                    )}
+                    ✨ {isSuggestingActions ? 'Suggesting Actions...' : 'Suggest Actions'}
+                </button>
+
+                {suggestedActions && (
+                    <div className={`mt-4 p-4 rounded-xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-inner transition-all duration-300 overflow-hidden`}>
+                        <div className="flex justify-between items-center cursor-pointer" onClick={() => setShowSuggestedActions(!showSuggestedActions)}>
+                            <label className={`font-semibold ${currentThemeClasses.labelColor} font-inter`}>Suggested Actions:</label>
+                            <i className={`fas ${showSuggestedActions ? 'fa-chevron-up' : 'fa-chevron-down'} transition-transform duration-300`}></i>
+                        </div>
+                        <div className={`overflow-hidden transition-all duration-500 ease-in-out ${showSuggestedActions ? 'max-h-96 opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
+                            <p className={`${currentThemeClasses.text} whitespace-pre-wrap text-sm font-inter`}>{suggestedActions}</p>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    // Settings Tab Content
+    const SettingsTab = () => (
+        <div className={`flex flex-col p-4 md:p-6 space-y-6 h-full ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
+            <div className={`p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
+                <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Select Theme:</label>
+                <select
+                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
+                    value={currentTheme}
+                    onChange={(e) => setCurrentTheme(e.target.value)}
+                >
+                    {Object.keys(themes).map((themeName) => (
+                        <option key={themeName} value={themeName}>
+                            {themeName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
+                        </option>
+                    ))}
+                </select>
+
+                <button
+                    className={`mt-6 w-full py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
+                    onClick={() => setCurrentTheme('dark')}
+                >
+                    Reset to Dark Theme
+                </button>
+            </div>
+        </div>
+    );
+
+    return (
+        <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
+                </h1>
+
+                {/* Tabs Navigation */}
+                <div className={`flex flex-wrap justify-center border-b-2 ${currentThemeClasses.glassBorder} mb-6 rounded-t-2xl overflow-hidden shadow-xl ${currentThemeClasses.shadow}`}>
+                    <button
+                        className={`flex-1 min-w-[150px] py-3 px-4 text-lg font-semibold rounded-t-2xl transition-all duration-300 relative z-10
+                            ${activeTab === 'generator' ? `${currentThemeClasses.tabActive} ${currentThemeClasses.text} shadow-lg border-b-4 ${currentThemeClasses.primaryAccent}` : `${currentThemeClasses.tabInactive} ${currentThemeClasses.text} hover:bg-white/5 hover:border-b-2 hover:border-blue-500/50`} font-inter`}
+                        onClick={() => setActiveTab('generator')}
+                    >
+                        <i className="fas fa-paint-brush mr-2"></i> QR Generator
+                    </button>
+                    <button
+                        className={`flex-1 min-w-[150px] py-3 px-4 text-lg font-semibold rounded-t-2xl transition-all duration-300 relative z-10
+                            ${activeTab === 'decoder' ? `${currentThemeClasses.tabActive} ${currentThemeClasses.text} shadow-lg border-b-4 ${currentThemeClasses.primaryAccent}` : `${currentThemeClasses.tabInactive} ${currentThemeClasses.text} hover:bg-white/5 hover:border-b-2 hover:border-blue-500/50`} font-inter`}
+                        onClick={() => setActiveTab('decoder')}
+                    >
+                        <i className="fas fa-qrcode mr-2"></i> QR Decoder
+                    </button>
+                    <button
+                        className={`flex-1 min-w-[150px] py-3 px-4 text-lg font-semibold rounded-t-2xl transition-all duration-300 relative z-10
+                            ${activeTab === 'settings' ? `${currentThemeClasses.tabActive} ${currentThemeClasses.text} shadow-lg border-b-4 ${currentThemeClasses.primaryAccent}` : `${currentThemeClasses.tabInactive} ${currentThemeClasses.text} hover:bg-white/5 hover:border-b-2 hover:border-blue-500/50`} font-inter`}
+                        onClick={() => setActiveTab('settings')}
+                    >
+                        <i className="fas fa-cog mr-2"></i> Settings
+                    </button>
+                </div>
+
+                {/* Tab Content */}
+                <div className={`min-h-[600px] rounded-b-2xl rounded-tr-2xl shadow-2xl ${currentThemeClasses.glassBg} border ${currentThemeClasses.glassBorder} p-2`}>
+                    {activeTab === 'generator' && <QRGeneratorTab />}
+                    {activeTab === 'decoder' && <QRDecoderTab />}
+                    {activeTab === 'settings' && <SettingsTab />}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default App;

src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)