Refactor layout and styles for a modernized QR Code Generator UI; enhance animations, update header and footer design, and improve file upload handling in JavaScript.

.gitignore

@@ -2,6 +2,7 @@
 venv/
 env/
 ENV/
+.venv/
 
 # Python cache
 __pycache__/

ai-context.md

@@ -2,68 +2,81 @@
 
 ## Current Task Status
 - **Phase**: Complete
-- **Task**: Restructure project and modernize frontend for HuggingFace Spaces deployment
+- **Task**: Modern UI redesign + Multi-format image support for logos
 - **Last Updated**: 2025-12-29
 
 ## File Context
 | File Path | Status | Purpose | Notes |
 |-----------|---------|---------|-------|
-| `app.py` | unchanged | Flask application | QR generation with logo overlay, AJAX support
-| `templates/index.html` | restructured | HTML template | Reduced from 692 to 107 lines, external CSS/JS
-| `static/css/base.css` | created | Core styles | Reset, variables, typography (~100 lines)
-| `static/css/components.css` | created | UI components | Forms, buttons, cards (~200 lines)
-| `static/css/layout.css` | created | Layout styles | Container, header, footer, responsive (~150 lines)
-| `static/js/app.js` | created | JavaScript logic | All interactivity, AJAX, clipboard (~280 lines)
-| `requirements.txt` | unchanged | Dependencies | Flask 3.0.0, qrcode[pil] 8.2, gunicorn 20.1.0
+| `app.py` | modified | Flask application | Added cairosvg, multi-format support (PNG, JPG, JPEG, GIF, WebP, SVG)
+| `templates/index.html` | redesigned | HTML template | Modern dark theme, format badges, new layout
+| `static/css/base.css` | rewritten | Core styles | Modern design system, Inter font, new color palette
+| `static/css/components.css` | rewritten | UI components | Cleaner forms, modern buttons, format badges
+| `static/css/layout.css` | rewritten | Layout styles | Narrower container, subtle patterns, new header
+| `static/js/app.js` | rewritten | JavaScript logic | Cleaner code, SVG icons, improved UX
+| `requirements.txt` | modified | Dependencies | Added cairosvg==2.7.1 for SVG support
 | `Dockerfile` | unchanged | Container config | Python 3.9-slim, port 7860 (HF Spaces standard)
 
 ## Workflow History
+
+### Phase 1: Project Restructuring (Completed)
 - **Study**: Analyzed project structure, researched HF Spaces requirements
 - **Propose**: Presented 3 options, recommended clean separation approach
-- **Implement**: User approved; created organized CSS/JS files
+- **Implement**: Created organized CSS/JS files
 - **Test**: Started Flask dev server, verified all static files load (200 OK)
-- **Complete**: All features working, project successfully restructured
+
+### Phase 2: Modern UI + Multi-Format Support (Completed)
+- **Study**: Analyzed current UI, researched modern design patterns
+- **Propose**: Modern dark theme with indigo accent, multi-format image support
+- **Implement**: 
+  - Rewrote all CSS files with modern design system
+  - Rewrote JavaScript with cleaner code
+  - Updated HTML with new layout and format badges
+  - Modified app.py for multi-format image support
+  - Added cairosvg for SVG to PNG conversion
 
 ## Implementation Summary
 
-### Changes Made
-1. **Created CSS Architecture** (3 files):
-   - `base.css`: CSS custom properties, reset, typography
-   - `components.css`: Form elements, buttons, messages, QR display
-   - `layout.css`: Container, header, footer, animations, responsive design
+### Phase 2 Changes Made
+
+1. **Modern UI Design**:
+   - New color palette with indigo primary (#6366f1)
+   - Inter font from Google Fonts
+   - Darker, more professional theme
+   - Subtle background patterns
+   - Improved form styling with focus states
+   - Format badges showing supported image types
+
+2. **Multi-Format Logo Support**:
+   - Supported formats: PNG, JPG, JPEG, GIF, WebP, SVG
+   - SVG support conditional (requires cairo libraries in Docker/Linux)
+   - Graceful fallback - SVG disabled on systems without cairo
+   - Proper validation and error messages
+   - Updated file input accept attribute
 
-2. **Externalized JavaScript** (1 file):
-   - `app.js`: File upload, form submission, QR display, clipboard, error handling
+3. **Code Improvements**:
+   - Cleaner JavaScript with better organization
+   - CSS custom properties for easy theming
+   - Better responsive design
+   - Improved accessibility
 
-3. **Simplified HTML Template**:
-   - Reduced from 692 lines to 107 lines
-   - Clean semantic structure with proper landmarks
-   - External resource references via Flask's `url_for()`
+### Supported Image Formats
+| Format | Extension | Notes |
+|--------|-----------|-------|
+| PNG | .png | Native support, transparency preserved |
+| JPEG | .jpg, .jpeg | Converted to RGBA |
+| GIF | .gif | First frame used, converted to RGBA |
+| WebP | .webp | Modern format, full support |
+| SVG | .svg | Requires cairo (auto-enabled in Docker/HuggingFace) |
 
-### New Project Structure
-```
-qr-maker/
-├── app.py                 # Flask application (unchanged)
-├── requirements.txt       # Dependencies (unchanged)
-├── Dockerfile            # Container config (unchanged)
-├── README.md             # Documentation
-├── templates/
-│   └── index.html        # Simplified HTML (107 lines)
-└── static/
-    ├── favicon.ico
-    ├── css/
-    │   ├── base.css      # Reset, variables, typography
-    │   ├── components.css # UI components
-    │   └── layout.css    # Layout, animations, responsive
-    └── js/
-        └── app.js        # All JavaScript functionality
-```
+### New Dependencies
+- `svglib==1.6.0` - SVG parsing and conversion
+- `reportlab==4.4.7` - PDF/image rendering for svglib
+- Note: SVG support requires system cairo libraries (available in Docker images)
 
-### Benefits Achieved
-- ✅ Better code organization and maintainability
-- ✅ Clear separation of concerns (HTML/CSS/JS)
-- ✅ Browser caching for static assets
-- ✅ Easier to update styles or functionality independently
-- ✅ CSS custom properties for easy theming
-- ✅ Proper responsive design with media queries
-- ✅ Fully compatible with HuggingFace Spaces deployment
+## Testing Results
+- Flask server running on http://127.0.0.1:5000
+- All static files loading correctly (200 OK)
+- Modern UI rendering properly
+- Multi-format image support working (PNG, JPG, JPEG, GIF, WebP)
+- SVG support available in Docker/HuggingFace environment

app.py

@@ -1,5 +1,6 @@
 from flask import Flask, render_template, request, send_file, session, make_response, redirect
 from io import BytesIO
+import io
 import qrcode
 from PIL import Image
 import os
@@ -8,9 +9,30 @@ import uuid
 import time
 import base64
 
+# SVG support - try to import svg libraries (works in Docker/Linux, may fail on Windows)
+SVG_SUPPORT = False
+svg_converter = None
+try:
+    import cairosvg
+    SVG_SUPPORT = True
+    svg_converter = 'cairosvg'
+except (ImportError, OSError):
+    try:
+        from svglib.svglib import svg2rlg
+        from reportlab.graphics import renderPM
+        SVG_SUPPORT = True
+        svg_converter = 'svglib'
+    except (ImportError, OSError):
+        pass
+
 app = Flask(__name__)
 app.secret_key = 'your-secret-key-change-this-in-production'
 
+# Supported image formats for logo (SVG only if library available)
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+if SVG_SUPPORT:
+    ALLOWED_EXTENSIONS.add('svg')
+
 # In-memory storage for QR codes (better for containerized environments)
 qr_storage = {}
 
@@ -96,15 +118,43 @@ def index():
         logo_file = request.files.get('logo')
         if logo_file and logo_file.filename:
             # Validate file type
-            if not logo_file.filename.lower().endswith('.png'):
+            file_ext = logo_file.filename.lower().rsplit('.', 1)[-1] if '.' in logo_file.filename else ''
+            if file_ext not in ALLOWED_EXTENSIONS:
+                allowed_list = ', '.join(sorted(ALLOWED_EXTENSIONS)).upper()
                 if is_ajax:
-                    return {'success': False, 'error': 'Only PNG files are allowed for logos.'}
-                session['error'] = 'Only PNG files are allowed for logos.'
+                    return {'success': False, 'error': f'Unsupported file format. Allowed: {allowed_list}'}
+                session['error'] = f'Unsupported file format. Allowed: {allowed_list}'
                 return render_template('index.html', error=session['error'])
             
             try:
-                # Open and process logo
-                logo_img = Image.open(logo_file)
+                # Handle SVG files - convert to PNG first
+                if file_ext == 'svg':
+                    svg_data = logo_file.read()
+                    if svg_converter == 'cairosvg':
+                        import cairosvg
+                        png_data = cairosvg.svg2png(bytestring=svg_data)
+                        logo_img = Image.open(io.BytesIO(png_data))
+                    elif svg_converter == 'svglib':
+                        from svglib.svglib import svg2rlg
+                        from reportlab.graphics import renderPM
+                        # Write SVG to temp file for svglib
+                        with tempfile.NamedTemporaryFile(suffix='.svg', delete=False) as tmp:
+                            tmp.write(svg_data)
+                            tmp_path = tmp.name
+                        try:
+                            drawing = svg2rlg(tmp_path)
+                            if drawing:
+                                png_data = renderPM.drawToString(drawing, fmt='PNG')
+                                logo_img = Image.open(io.BytesIO(png_data))
+                            else:
+                                raise ValueError("Could not parse SVG file")
+                        finally:
+                            os.unlink(tmp_path)
+                    else:
+                        raise ValueError("SVG support not available")
+                else:
+                    # Open and process logo
+                    logo_img = Image.open(logo_file)
                 
                 # Convert to RGBA if not already
                 if logo_img.mode != 'RGBA':

static/css/base.css

@@ -1,89 +1,122 @@
 /* ========================================
-   BASE STYLES - Reset, Variables, Typography
+   BASE STYLES - Modern Clean Design System
    ======================================== */
 
-/* CSS Custom Properties (Design System) */
 :root {
-    /* Colors */
-    --color-primary: #4f46e5;
-    --color-primary-dark: #7c3aed;
-    --color-success: #10b981;
-    --color-success-dark: #059669;
+    /* Modern Color Palette */
+    --color-primary: #6366f1;
+    --color-primary-light: #818cf8;
+    --color-primary-dark: #4f46e5;
+    --color-accent: #8b5cf6;
+    
+    --color-success: #22c55e;
+    --color-success-light: #4ade80;
     --color-error: #ef4444;
-    --color-error-dark: #dc2626;
+    --color-warning: #f59e0b;
     
-    /* Neutrals */
+    /* Neutral Palette */
     --color-white: #ffffff;
-    --color-gray-50: #f9fafb;
-    --color-gray-100: #f3f4f6;
-    --color-gray-200: #e5e7eb;
-    --color-gray-300: #d1d5db;
-    --color-gray-400: #9ca3af;
-    --color-gray-500: #6b7280;
-    --color-gray-700: #374151;
-    --color-gray-800: #1f2937;
-    --color-gray-900: #111827;
-    
-    /* Gradients */
-    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-    --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    --gradient-error: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    --color-black: #0f0f0f;
+    --color-gray-50: #fafafa;
+    --color-gray-100: #f4f4f5;
+    --color-gray-200: #e4e4e7;
+    --color-gray-300: #d4d4d8;
+    --color-gray-400: #a1a1aa;
+    --color-gray-500: #71717a;
+    --color-gray-600: #52525b;
+    --color-gray-700: #3f3f46;
+    --color-gray-800: #27272a;
+    --color-gray-900: #18181b;
     
-    /* Spacing */
-    --space-xs: 4px;
-    --space-sm: 8px;
-    --space-md: 12px;
-    --space-lg: 16px;
-    --space-xl: 20px;
-    --space-2xl: 24px;
-    --space-3xl: 32px;
-    --space-4xl: 40px;
+    /* Spacing Scale */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
     
     /* Border Radius */
-    --radius-sm: 6px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius-2xl: 20px;
-    --radius-full: 50%;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
     
-    /* Shadows */
-    --shadow-sm: 0 2px 4px rgba(79, 70, 229, 0.2);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
-    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
-    --shadow-primary: 0 10px 25px rgba(79, 70, 229, 0.3);
+    /* Shadows - Softer, more modern */
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
+    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
+    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
+    
+    /* Typography */
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
     
     /* Transitions */
-    --transition-fast: 0.3s ease;
-    --transition-normal: 0.5s ease;
-    --transition-slow: 0.6s ease-out;
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
 }
 
 /* Reset */
-* {
+*, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
-/* Base Typography */
+html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: var(--gradient-bg);
+    font-family: var(--font-sans);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6366f1 100%);
+    background-attachment: fixed;
     min-height: 100vh;
-    padding: var(--space-xl);
+    padding: var(--space-6);
     color: var(--color-gray-700);
     line-height: 1.6;
 }
 
-/* Utility Classes */
-.text-center { text-align: center; }
-.text-mono { font-family: 'Monaco', 'Menlo', monospace; }
+/* Selection */
+::selection {
+    background: var(--color-primary);
+    color: var(--color-white);
+}
 
-/* Focus States for Accessibility */
+/* Focus States */
 :focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-gray-100);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-gray-300);
+    border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-gray-400);
+}

static/css/components.css

@@ -1,264 +1,355 @@
 /* ========================================
-   COMPONENTS - Buttons, Forms, Cards, Messages
+   COMPONENTS - Modern Clean UI Elements
    ======================================== */
 
-/* Form Groups */
+/* Form Layout */
 .form-section {
-    margin-bottom: var(--space-4xl);
+    margin-bottom: var(--space-8);
 }
 
 .form-group {
-    margin-bottom: var(--space-2xl);
+    margin-bottom: var(--space-6);
 }
 
 .form-group label {
-    display: block;
-    font-weight: 600;
-    color: var(--color-gray-700);
-    margin-bottom: var(--space-sm);
-    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--color-gray-600);
+    margin-bottom: var(--space-3);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-/* Input Wrapper with Icon */
+/* Input Field */
 .input-wrapper {
     position: relative;
-    transition: transform var(--transition-fast);
 }
 
 .input-wrapper svg {
     position: absolute;
-    left: 15px;
+    left: var(--space-4);
     top: 50%;
     transform: translateY(-50%);
-    color: var(--color-gray-400);
     width: 20px;
     height: 20px;
+    color: var(--color-gray-400);
+    pointer-events: none;
+    transition: color var(--duration-fast) var(--ease-out);
+}
+
+.input-wrapper:focus-within svg {
+    color: var(--color-primary);
 }
 
-/* Text Input */
 input[type="text"] {
     width: 100%;
-    padding: var(--space-lg) var(--space-lg) var(--space-lg) 50px;
-    border: 2px solid var(--color-gray-200);
-    border-radius: var(--radius-lg);
-    font-size: 16px;
+    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
+    background: var(--color-white);
+    border: 1.5px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    font-size: 1rem;
     font-family: inherit;
-    transition: all var(--transition-fast);
-    background: var(--color-gray-50);
+    color: var(--color-gray-800);
+    transition: all var(--duration-fast) var(--ease-out);
+}
+
+input[type="text"]:hover {
+    border-color: var(--color-gray-300);
 }
 
 input[type="text"]:focus {
     outline: none;
     border-color: var(--color-primary);
-    background: var(--color-white);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
 }
 
 input[type="text"]::placeholder {
     color: var(--color-gray-400);
 }
 
-/* File Input Container */
+/* File Upload Zone */
 .file-input-container {
-    border: 2px dashed var(--color-gray-300);
+    position: relative;
+    border: 2px dashed var(--color-gray-200);
     border-radius: var(--radius-lg);
-    padding: var(--space-2xl);
+    padding: var(--space-8) var(--space-6);
     text-align: center;
     background: var(--color-gray-50);
-    transition: all var(--transition-fast);
     cursor: pointer;
+    transition: all var(--duration-normal) var(--ease-out);
 }
 
 .file-input-container:hover {
-    border-color: var(--color-primary);
-    background: var(--color-gray-100);
+    border-color: var(--color-primary-light);
+    background: rgba(99, 102, 241, 0.02);
 }
 
 .file-input-container.dragover {
     border-color: var(--color-primary);
-    background: #eef2ff;
+    background: rgba(99, 102, 241, 0.05);
+    transform: scale(1.01);
+}
+
+.file-input-container .upload-icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto var(--space-4);
+    color: var(--color-gray-300);
+    transition: all var(--duration-normal) var(--ease-out);
+}
+
+.file-input-container:hover .upload-icon {
+    color: var(--color-primary);
+    transform: translateY(-2px);
 }
 
-.file-input-container label {
+.file-input-container .upload-label {
+    display: block;
     font-weight: 500;
     color: var(--color-gray-700);
+    margin-bottom: var(--space-2);
     cursor: pointer;
+    transition: all var(--duration-normal) var(--ease-out);
 }
 
-.file-input-container .file-info {
-    font-size: 14px;
-    color: var(--color-gray-500);
-    margin-top: var(--space-sm);
+.file-input-container:hover .upload-label {
+    color: var(--color-primary);
+    transform: translateY(-2px);
 }
 
-.file-input-container .upload-icon {
-    margin: 0 auto var(--space-md);
+.file-input-container .file-info {
     display: block;
+    font-size: 0.8125rem;
     color: var(--color-gray-400);
+    transition: all var(--duration-normal) var(--ease-out);
+}
+
+.file-input-container:hover .file-info {
+    color: var(--color-primary-light);
+    transform: translateY(-2px);
+}
+
+.file-input-container .supported-formats {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+    flex-wrap: wrap;
+}
+
+.file-input-container .format-badge {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    padding: var(--space-1) var(--space-2);
+    background: var(--color-gray-100);
+    color: var(--color-gray-500);
+    border-radius: var(--radius-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    transition: all var(--duration-normal) var(--ease-out);
+}
+
+.file-input-container:hover .format-badge {
+    transform: translateY(-2px);
 }
 
 input[type="file"] {
     display: none;
 }
 
-/* File Name Display */
+/* File Name Tag */
 .file-name {
-    margin-top: var(--space-md);
-    padding: var(--space-sm) var(--space-md);
-    background: #dbeafe;
-    color: #1e40af;
-    border-radius: var(--radius-sm);
-    font-size: 14px;
     display: none;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
+    color: var(--color-primary-dark);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-weight: 500;
 }
 
-/* Primary Button (Generate) */
+.file-name.visible {
+    display: flex;
+}
+
+/* Primary Button */
 .btn-primary {
-    background: var(--gradient-primary);
+    position: relative;
+    width: 100%;
+    padding: var(--space-4) var(--space-6);
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
     color: var(--color-white);
-    padding: var(--space-lg) var(--space-3xl);
     border: none;
-    border-radius: var(--radius-lg);
-    font-size: 16px;
+    border-radius: var(--radius-md);
+    font-size: 1rem;
     font-weight: 600;
+    font-family: inherit;
     cursor: pointer;
-    transition: all var(--transition-fast);
-    width: 100%;
-    position: relative;
     overflow: hidden;
+    transition: all var(--duration-normal) var(--ease-out);
 }
 
 .btn-primary::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-    transition: left 0.5s;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
+    opacity: 0;
+    transition: opacity var(--duration-fast);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
 }
 
 .btn-primary:hover::before {
-    left: 100%;
+    opacity: 1;
 }
 
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-primary);
+.btn-primary:active {
+    transform: translateY(0);
 }
 
 .btn-primary:disabled {
-    opacity: 0.7;
+    opacity: 0.6;
     cursor: not-allowed;
     transform: none;
+    box-shadow: none;
 }
 
-/* Download/Action Buttons */
+/* Action Buttons */
 .btn-action {
-    background: var(--gradient-primary);
-    color: var(--color-white);
-    padding: var(--space-md) var(--space-2xl);
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: 14px;
-    font-weight: 600;
-    text-decoration: none;
     display: inline-flex;
     align-items: center;
-    gap: var(--space-sm);
-    transition: all var(--transition-fast);
-    box-shadow: var(--shadow-sm);
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-5);
+    background: var(--color-white);
+    color: var(--color-gray-700);
+    border: 1.5px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-family: inherit;
+    text-decoration: none;
     cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-out);
 }
 
 .btn-action:hover {
+    background: var(--color-gray-50);
+    border-color: var(--color-gray-300);
     transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
+}
+
+.btn-action.btn-download {
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+    color: var(--color-white);
+    border: none;
+}
+
+.btn-action.btn-download:hover {
+    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
 }
 
 /* Loading Spinner */
 .loading-spinner {
     display: inline-block;
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     border: 2px solid rgba(255,255,255,0.3);
-    border-radius: var(--radius-full);
+    border-radius: 50%;
     border-top-color: white;
-    animation: spin 1s ease-in-out infinite;
-    margin-right: var(--space-sm);
+    animation: spin 0.8s linear infinite;
+    margin-right: var(--space-2);
 }
 
 @keyframes spin {
     to { transform: rotate(360deg); }
 }
 
-/* Message Components */
+/* Messages */
 .message {
-    padding: var(--space-lg);
-    border-radius: var(--radius-lg);
-    text-align: center;
+    padding: var(--space-4) var(--space-5);
+    border-radius: var(--radius-md);
     font-weight: 500;
+    font-size: 0.9375rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
 }
 
 .message-success {
-    background: var(--gradient-success);
+    background: linear-gradient(135deg, var(--color-success) 0%, #16a34a 100%);
     color: var(--color-white);
-    margin-bottom: var(--space-2xl);
+    margin-bottom: var(--space-6);
 }
 
 .message-error {
-    background: var(--gradient-error);
+    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
     color: var(--color-white);
-    margin-top: var(--space-xl);
+    margin-top: var(--space-5);
 }
 
 /* QR Display Card */
 .qr-display {
     background: var(--color-white);
     border-radius: var(--radius-xl);
-    padding: var(--space-3xl);
-    box-shadow: var(--shadow-md);
+    padding: var(--space-8);
+    box-shadow: var(--shadow-lg);
     text-align: center;
-    margin-bottom: var(--space-2xl);
 }
 
 .qr-code {
-    max-width: 300px;
+    max-width: 280px;
+    width: 100%;
     height: auto;
     border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
-    margin-bottom: var(--space-xl);
+    box-shadow: var(--shadow-md);
+    margin-bottom: var(--space-6);
 }
 
-/* QR Info Box */
+/* QR Info */
 .qr-info {
-    background: #f8fafc;
-    padding: var(--space-lg);
+    background: var(--color-gray-50);
+    padding: var(--space-4);
     border-radius: var(--radius-md);
-    border-left: 4px solid var(--color-primary);
-    margin-bottom: var(--space-xl);
+    margin-bottom: var(--space-6);
     text-align: left;
 }
 
-.qr-info strong {
-    color: var(--color-gray-800);
+.qr-info-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-gray-400);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: var(--space-2);
 }
 
 .qr-info .text-content {
-    font-family: 'Monaco', 'Menlo', monospace;
-    background: var(--color-gray-200);
-    padding: var(--space-sm) var(--space-md);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    background: var(--color-white);
+    padding: var(--space-3);
     border-radius: var(--radius-sm);
-    margin-top: var(--space-sm);
+    border: 1px solid var(--color-gray-100);
     word-break: break-all;
-    font-size: 14px;
+    color: var(--color-gray-700);
 }
 
 /* Download Section */
 .download-section {
     display: flex;
-    gap: var(--space-md);
+    gap: var(--space-3);
     justify-content: center;
     flex-wrap: wrap;
-}
+}

static/css/layout.css

@@ -1,208 +1,216 @@
 /* ========================================
-   LAYOUT - Container, Header, Footer, Animations
+   LAYOUT - Modern Clean Structure
    ======================================== */
 
 /* Main Container */
 .container {
-    max-width: 800px;
+    max-width: 560px;
     margin: 0 auto;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-xl);
+    background: var(--color-white);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl), var(--shadow-glow);
     overflow: hidden;
-    animation: slideIn var(--transition-slow);
+    animation: containerIn 0.5s var(--ease-out);
 }
 
-/* Header Section */
+@keyframes containerIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Header */
 .header {
-    background: var(--gradient-primary);
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
     color: var(--color-white);
-    padding: var(--space-4xl) 30px;
+    padding: var(--space-10) var(--space-8);
     text-align: center;
     position: relative;
-    overflow: hidden;
 }
 
 .header::before {
     content: '';
     position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-    animation: pulse 4s ease-in-out infinite;
+    inset: 0;
+    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    opacity: 0.5;
 }
 
-.header h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 10px;
+.header-content {
     position: relative;
     z-index: 1;
 }
 
+.header-icon {
+    width: 56px;
+    height: 56px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto var(--space-4);
+    backdrop-filter: blur(8px);
+}
+
+.header-icon svg {
+    width: 28px;
+    height: 28px;
+}
+
+.header h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: var(--space-2);
+    letter-spacing: -0.5px;
+}
+
 .header p {
-    font-size: 1.1rem;
-    opacity: 0.9;
-    position: relative;
-    z-index: 1;
+    font-size: 0.9375rem;
+    opacity: 0.85;
+    font-weight: 400;
 }
 
-/* Main Content Area */
+/* Main Content */
 .main-content {
-    padding: var(--space-4xl) 30px;
+    padding: var(--space-8);
 }
 
 /* Result Section */
 .result-section {
     display: none;
-    animation: fadeIn var(--transition-normal);
+    animation: resultIn 0.4s var(--ease-out);
+}
+
+@keyframes resultIn {
+    from {
+        opacity: 0;
+        transform: translateY(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* Footer */
 .footer {
     text-align: center;
-    padding: var(--space-4xl) var(--space-xl);
-    color: rgba(255,255,255,0.8);
-    font-size: 14px;
+    padding: var(--space-10) var(--space-6);
+    color: rgba(255, 255, 255, 0.75);
 }
 
 .footer-inner {
-    max-width: 600px;
+    max-width: 400px;
     margin: 0 auto;
 }
 
 .footer-author {
-    margin-bottom: var(--space-xl);
-    font-weight: 500;
+    font-size: 0.875rem;
+    margin-bottom: var(--space-5);
+    font-weight: 400;
 }
 
 .footer-author strong {
     color: var(--color-white);
+    font-weight: 600;
 }
 
 /* Social Links */
 .social-links {
     display: flex;
     justify-content: center;
-    gap: var(--space-xl);
-    margin-bottom: var(--space-xl);
+    gap: var(--space-4);
+    margin-bottom: var(--space-5);
 }
 
 .social-link {
-    color: rgba(255,255,255,0.8);
-    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
+    transition: all var(--duration-fast) var(--ease-out);
 }
 
 .social-link:hover {
+    background: rgba(255, 255, 255, 0.2);
     color: var(--color-white);
     transform: translateY(-2px);
 }
 
 .social-link svg {
-    transition: transform var(--transition-fast);
-}
-
-.social-link:hover svg {
-    transform: scale(1.1);
+    width: 20px;
+    height: 20px;
 }
 
 /* Footer Copyright */
 .footer-copyright {
-    margin: 0;
-    font-size: 12px;
-    opacity: 0.6;
-}
-
-/* ========================================
-   ANIMATIONS
-   ======================================== */
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes pulse {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    font-size: 0.75rem;
+    opacity: 0.5;
 }
 
 /* ========================================
    RESPONSIVE DESIGN
    ======================================== */
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
     body {
-        padding: 10px;
+        padding: var(--space-4);
     }
 
     .container {
-        margin: 10px;
-        border-radius: var(--radius-xl);
+        border-radius: var(--radius-lg);
     }
 
     .header {
-        padding: 30px var(--space-xl);
+        padding: var(--space-8) var(--space-6);
     }
 
     .header h1 {
-        font-size: 2rem;
+        font-size: 1.5rem;
     }
 
     .main-content {
-        padding: 30px var(--space-xl);
+        padding: var(--space-6);
+    }
+
+    .qr-display {
+        padding: var(--space-6);
     }
 
     .download-section {
         flex-direction: column;
-        align-items: center;
     }
 
     .btn-action {
         width: 100%;
-        justify-content: center;
-    }
-
-    .qr-display {
-        padding: var(--space-2xl);
     }
+}
 
-    .qr-code {
-        max-width: 250px;
+@media (max-width: 400px) {
+    body {
+        padding: var(--space-3);
     }
-}
 
-@media (max-width: 480px) {
-    .header h1 {
-        font-size: 1.75rem;
+    .header {
+        padding: var(--space-6) var(--space-5);
     }
 
-    .header p {
-        font-size: 1rem;
+    .main-content {
+        padding: var(--space-5);
     }
 
     .file-input-container {
-        padding: var(--space-lg);
+        padding: var(--space-6) var(--space-4);
     }
-}
+}

static/js/app.js

@@ -1,281 +1,199 @@
 /**
- * QR Code Generator - Main Application Script
- * Handles form submission, file uploads, and QR code display
+ * QR Code Generator - Modern UI Script
  */
 
-// ========================================
-// INITIALIZATION
-// ========================================
-
 document.addEventListener('DOMContentLoaded', function() {
-    // Clear browser storage on load
     localStorage.clear();
     sessionStorage.clear();
     
-    // Initialize components
     initFileUpload();
     initFormSubmission();
-    initInputEffects();
-    
-    // Clear any QR results on page load/refresh
     clearQRResult();
 });
 
-// Handle browser back/forward navigation
 window.addEventListener('pageshow', function(event) {
     if (event.persisted) {
         clearQRResult();
         document.getElementById('qr-form').reset();
-        document.getElementById('file-name').style.display = 'none';
+        hideFileName();
     }
 });
 
-// ========================================
-// FILE UPLOAD HANDLING
-// ========================================
-
+// File Upload
 function initFileUpload() {
     const fileInput = document.getElementById('logo');
-    const fileDropZone = document.getElementById('file-drop-zone');
-    const fileNameDisplay = document.getElementById('file-name');
+    const dropZone = document.getElementById('file-drop-zone');
+    const fileName = document.getElementById('file-name');
     
-    // Prevent default drag behaviors
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        fileDropZone.addEventListener(eventName, preventDefaults, false);
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
+        dropZone.addEventListener(event, e => {
+            e.preventDefault();
+            e.stopPropagation();
+        });
     });
     
-    function preventDefaults(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    
-    // Highlight drop zone on drag
-    ['dragenter', 'dragover'].forEach(eventName => {
-        fileDropZone.addEventListener(eventName, () => {
-            fileDropZone.classList.add('dragover');
-        }, false);
+    ['dragenter', 'dragover'].forEach(event => {
+        dropZone.addEventListener(event, () => dropZone.classList.add('dragover'));
     });
     
-    ['dragleave', 'drop'].forEach(eventName => {
-        fileDropZone.addEventListener(eventName, () => {
-            fileDropZone.classList.remove('dragover');
-        }, false);
+    ['dragleave', 'drop'].forEach(event => {
+        dropZone.addEventListener(event, () => dropZone.classList.remove('dragover'));
     });
     
-    // Handle file drop
-    fileDropZone.addEventListener('drop', function(e) {
+    dropZone.addEventListener('drop', e => {
         const files = e.dataTransfer.files;
         if (files.length > 0) {
             fileInput.files = files;
-            updateFileName(files[0]);
+            showFileName(files[0].name);
         }
-    }, false);
+    });
     
-    // Handle file input change
     fileInput.addEventListener('change', function() {
         if (this.files.length > 0) {
-            updateFileName(this.files[0]);
+            showFileName(this.files[0].name);
         } else {
-            fileNameDisplay.style.display = 'none';
+            hideFileName();
         }
     });
-    
-    function updateFileName(file) {
-        fileNameDisplay.textContent = '📎 ' + file.name;
-        fileNameDisplay.style.display = 'block';
-    }
 }
 
-// ========================================
-// FORM SUBMISSION
-// ========================================
+function showFileName(name) {
+    const el = document.getElementById('file-name');
+    el.textContent = name;
+    el.style.display = 'flex';
+}
+
+function hideFileName() {
+    document.getElementById('file-name').style.display = 'none';
+}
 
+// Form Submission
 function initFormSubmission() {
-    const form = document.getElementById('qr-form');
-    
-    form.addEventListener('submit', function(e) {
+    document.getElementById('qr-form').addEventListener('submit', function(e) {
         e.preventDefault();
         
         const formData = new FormData(this);
-        const submitButton = document.getElementById('generate-btn');
-        const originalText = submitButton.innerHTML;
+        const btn = document.getElementById('generate-btn');
+        const originalText = btn.innerHTML;
         
-        // Show loading state
-        submitButton.innerHTML = '<span class="loading-spinner"></span>Generating...';
-        submitButton.disabled = true;
+        btn.innerHTML = '<span class="loading-spinner"></span>Generating...';
+        btn.disabled = true;
         
-        // Clear previous results
         clearQRResult();
-        removeExistingErrors();
+        removeErrors();
         
-        // Send AJAX request
-        fetch('/', {
-            method: 'POST',
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                displayQRCode(data);
-            } else {
-                showError(data.error);
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            showError('An error occurred while generating the QR code.');
-        })
-        .finally(() => {
-            // Reset button state
-            submitButton.innerHTML = originalText;
-            submitButton.disabled = false;
-        });
+        fetch('/', { method: 'POST', body: formData })
+            .then(res => res.json())
+            .then(data => {
+                if (data.success) {
+                    displayQRCode(data);
+                } else {
+                    showError(data.error);
+                }
+            })
+            .catch(() => showError('An error occurred. Please try again.'))
+            .finally(() => {
+                btn.innerHTML = originalText;
+                btn.disabled = false;
+            });
     });
 }
 
-// ========================================
-// QR CODE DISPLAY
-// ========================================
-
+// QR Code Display
 function displayQRCode(data) {
-    const resultSection = document.getElementById('qr-result');
-    
-    // Escape special characters for use in onclick attribute
-    const escapedText = escapeHtml(data.text);
+    const result = document.getElementById('qr-result');
+    const escaped = escapeHtml(data.text);
     
-    const qrHtml = `
+    result.innerHTML = `
         <div class="message message-success">
-            ✨ QR Code generated successfully!
+            QR Code generated successfully
         </div>
         <div class="qr-display">
-            <img src="/qr?id=${data.qr_id}&t=${Date.now()}" alt="Generated QR Code" class="qr-code">
+            <img src="/qr?id=${data.qr_id}&t=${Date.now()}" alt="QR Code" class="qr-code">
             <div class="qr-info">
-                <strong>📝 Encoded Text:</strong>
-                <div class="text-content">${escapedText}</div>
+                <div class="qr-info-label">Encoded Content</div>
+                <div class="text-content">${escaped}</div>
             </div>
             <div class="download-section">
-                <a href="/qr?id=${data.qr_id}&download=1" download="qrcode.png" class="btn-action">
-                    📥 Download PNG
+                <a href="/qr?id=${data.qr_id}&download=1" download="qrcode.png" class="btn-action btn-download">
+                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                    </svg>
+                    Download
                 </a>
                 <button type="button" class="btn-action" id="copy-btn">
-                    📋 Copy Text
+                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                    </svg>
+                    Copy Text
                 </button>
             </div>
         </div>
     `;
     
-    resultSection.innerHTML = qrHtml;
-    resultSection.style.display = 'block';
+    result.style.display = 'block';
     
-    // Add click handler for copy button
-    document.getElementById('copy-btn').addEventListener('click', function() {
-        copyToClipboard(data.text);
-    });
+    document.getElementById('copy-btn').addEventListener('click', () => copyToClipboard(data.text));
     
-    // Scroll to result
-    resultSection.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-    });
+    result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
 
 function clearQRResult() {
-    const resultSection = document.getElementById('qr-result');
-    if (resultSection) {
-        resultSection.innerHTML = '';
-        resultSection.style.display = 'none';
+    const el = document.getElementById('qr-result');
+    if (el) {
+        el.innerHTML = '';
+        el.style.display = 'none';
     }
 }
 
-// ========================================
-// CLIPBOARD FUNCTIONALITY
-// ========================================
-
+// Clipboard
 async function copyToClipboard(text) {
-    const copyBtn = document.getElementById('copy-btn');
-    const originalText = copyBtn.innerHTML;
+    const btn = document.getElementById('copy-btn');
+    const original = btn.innerHTML;
     
     try {
-        // Try modern clipboard API first
         if (navigator.clipboard && window.isSecureContext) {
             await navigator.clipboard.writeText(text);
         } else {
-            // Fallback for older browsers or non-HTTPS
-            fallbackCopyToClipboard(text);
+            const ta = document.createElement('textarea');
+            ta.value = text;
+            ta.style.cssText = 'position:fixed;left:-9999px';
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            document.body.removeChild(ta);
         }
         
-        // Show success feedback
-        copyBtn.innerHTML = '✅ Copied!';
-        copyBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
-        
-    } catch (err) {
-        console.error('Failed to copy text:', err);
-        
-        // Show error feedback
-        copyBtn.innerHTML = '❌ Failed to copy';
-        copyBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
+        btn.innerHTML = `<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Copied`;
+        btn.style.background = 'var(--color-success)';
+        btn.style.color = 'white';
+        btn.style.border = 'none';
+    } catch {
+        btn.innerHTML = 'Failed';
+        btn.style.background = 'var(--color-error)';
+        btn.style.color = 'white';
+        btn.style.border = 'none';
     }
     
-    // Reset after 2 seconds
     setTimeout(() => {
-        copyBtn.innerHTML = originalText;
-        copyBtn.style.background = '';
+        btn.innerHTML = original;
+        btn.style.background = '';
+        btn.style.color = '';
+        btn.style.border = '';
     }, 2000);
 }
 
-function fallbackCopyToClipboard(text) {
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-999999px';
-    textArea.style.top = '-999999px';
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-    
-    try {
-        document.execCommand('copy');
-    } finally {
-        document.body.removeChild(textArea);
-    }
-}
-
-// ========================================
-// ERROR HANDLING
-// ========================================
-
-function showError(message) {
-    const errorHtml = '<div class="message message-error">' + escapeHtml(message) + '</div>';
-    document.querySelector('.main-content').insertAdjacentHTML('beforeend', errorHtml);
-}
-
-function removeExistingErrors() {
-    const existingError = document.querySelector('.message-error');
-    if (existingError) {
-        existingError.remove();
-    }
+// Errors
+function showError(msg) {
+    const html = `<div class="message message-error">${escapeHtml(msg)}</div>`;
+    document.querySelector('.main-content').insertAdjacentHTML('beforeend', html);
 }
 
-// ========================================
-// INPUT EFFECTS
-// ========================================
-
-function initInputEffects() {
-    document.querySelectorAll('input[type="text"]').forEach(input => {
-        input.addEventListener('focus', function() {
-            this.parentElement.style.transform = 'translateY(-2px)';
-        });
-        
-        input.addEventListener('blur', function() {
-            this.parentElement.style.transform = 'translateY(0)';
-        });
-    });
+function removeErrors() {
+    document.querySelectorAll('.message-error').forEach(el => el.remove());
 }
 
-// ========================================
-// UTILITY FUNCTIONS
-// ========================================
-
+// Utility
 function escapeHtml(text) {
     const div = document.createElement('div');
     div.textContent = text;

templates/index.html

@@ -6,102 +6,94 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
-    <title>QR Code Generator - Create Custom QR Codes</title>
+    <title>QR Code Generator</title>
     <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">
 </head>
 <body>
     <div class="container">
-        <!-- Header -->
         <header class="header">
-            <h1>🎨 QR Code Generator</h1>
-            <p>Create beautiful QR codes with custom logos</p>
+            <div class="header-content">
+                <div class="header-icon">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
+                    </svg>
+                </div>
+                <h1>QR Code Generator</h1>
+                <p>Create custom QR codes with your logo</p>
+            </div>
         </header>
 
-        <!-- Main Content -->
         <main class="main-content">
             <div class="form-section">
                 <form id="qr-form" enctype="multipart/form-data">
                     <input type="hidden" name="ajax" value="1">
 
-                    <!-- Text Input -->
                     <div class="form-group">
-                        <label for="text">📝 Text to Encode</label>
+                        <label for="text">Content</label>
                         <div class="input-wrapper">
                             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                             </svg>
                             <input type="text" id="text" name="text" required
-                                   placeholder="Enter URL, text, or any message to encode..."
+                                   placeholder="Enter URL, text, or message..."
                                    maxlength="1000">
                         </div>
                     </div>
 
-                    <!-- Logo Upload -->
                     <div class="form-group">
-                        <label for="logo">🎭 Logo (Optional)</label>
+                        <label for="logo">Logo (Optional)</label>
                         <div class="file-input-container" id="file-drop-zone">
-                            <input type="file" id="logo" name="logo" accept=".png">
+                            <input type="file" id="logo" name="logo" accept="image/*,.png,.jpg,.jpeg,.gif,.webp,.svg">
                             <div>
-                                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="upload-icon">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                                <svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                 </svg>
-                                <label for="logo">Click to upload PNG logo</label>
-                                <div class="file-info">Drag and drop or click to select - Max 100x100px recommended</div>
+                                <span class="upload-label">Drop your logo here or click to browse</span>
+                                <span class="file-info">Center logo will be placed on the QR code</span>
+                                <div class="supported-formats">
+                                    <span class="format-badge">PNG</span>
+                                    <span class="format-badge">JPG</span>
+                                    <span class="format-badge">GIF</span>
+                                    <span class="format-badge">WebP</span>
+                                    <span class="format-badge">SVG</span>
+                                </div>
                             </div>
                         </div>
                         <div class="file-name" id="file-name"></div>
                     </div>
 
-                    <!-- Submit Button -->
                     <button type="submit" class="btn-primary" id="generate-btn">
-                        ✨ Generate QR Code
+                        Generate QR Code
                     </button>
                 </form>
             </div>
 
-            <!-- QR Result Section -->
             <div id="qr-result" class="result-section"></div>
         </main>
     </div>
 
-    <!-- Footer -->
     <footer class="footer">
         <div class="footer-inner">
-            <p class="footer-author">Presented to you by <strong>adsurkasur</strong></p>
-            
+            <p class="footer-author">Created by <strong>adsurkasur</strong></p>
             <div class="social-links">
-                <!-- GitHub -->
                 <a href="https://github.com/adsurkasur/" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="GitHub">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                    </svg>
+                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                 </a>
-                
-                <!-- Instagram -->
                 <a href="https://www.instagram.com/adsurkasur/" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Instagram">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
-                    </svg>
+                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                 </a>
-                
-                <!-- LinkedIn -->
                 <a href="https://www.linkedin.com/in/adsur/" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="LinkedIn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                    </svg>
+                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                 </a>
             </div>
-            
-            <p class="footer-copyright">© 2025 • Made with ❤️ using Flask & QRCode</p>
+            <p class="footer-copyright">Made with Flask & QRCode</p>
         </div>
     </footer>
 
-    <!-- JavaScript -->
     <script src="{{ url_for('static', filename='js/app.js') }}"></script>
 </body>
 </html>