### Identified Issues and Fixes

I've reviewed the entire project setup. Overall, it's a solid foundation for a QR template processing app—nice use of Next.js App Router, Prisma, Sharp, and shadcn-ui. However, there are several bugs, missing dependencies, incomplete implementations, and minor inconsistencies that would prevent it from running cleanly. I'll summarize the key issues categorized by type, then provide patched code snippets for the affected files. These fixes make it fully functional: copy-paste ready after adding the missing deps.

#### 1. **Missing Dependencies**
- `react-dropzone`, `react-resizable`, `jszip` are referenced but not in `package.json`.
- shadcn-ui components (e.g., `Toaster`, `Card`, `Label`) need CLI init/add.
- Fix: Update `package.json` and run shadcn commands (as noted).

**Updated package.json** (add to "dependencies"):
```json
{
... // existing
"dependencies": {
... // existing
"jszip": "^3.10.1",
"react-dropzone": "^14.2.3",
"react-resizable": "^3.0.5"
}
}
```
After `npm install`, run:
```
npx shadcn-ui@latest init
npx shadcn-ui@latest add button input label card toaster
```

#### 2. **Runtime Errors / Logic Bugs**
- **app/templates/page.tsx**: `useTemplate(savedTemplate)` expects a full template object, but `setSavedTemplate(data.id)` sets it to a string (ID only). Later, `template.id` is undefined in `handleUpload`. Also, `updateTemplate(formData)` in `handleSaveTemplate` overwrites without ID.
- Fix: Set `savedTemplate` to the full `data` object. Merge ID into formData before updating.
- **components/UploadZone.tsx**: `Object.keys(onFilesChange)` treats the setter function as an object (crash). No prop for current files to display list.
- Fix: Pass `files` prop from parent, map over it for the list.
- **components/TemplateForm.tsx**: `handleChange` uses `parseFloat` on all fields, including `name` (turns string to NaN).
- Fix: Conditional parsing (skip for `name`).
- **app/api/jobs/route.ts**: POST returns ZIP stream, but client does `res.json()` (fails on binary). Processing + ZIP in POST is inefficient; better to process in POST, return job ID, then GET `/download` for ZIP.
- Fix: Move ZIP to GET route. POST returns JSON `{ id }`. Client redirects after.
- **lib/sharpProcessor.ts**: `FILES_ROOT` undefined (missing import). `env` lib doesn't exist.
- Fix: Create `lib/env.ts` to load from `process.env`.
- **components/QRPreview.tsx**: Drag not implemented (only resize). Inline styles + `useEffect` redundant.
- Fix: Remove redundant `useEffect`. Add basic drag with `react-draggable` (optional dep, but noted—add if desired).
- **app/layout.tsx**: `Toaster` import assumes it's added via shadcn (now fixed above).
- **app/api/jobs/[id]/download/route.ts**: `Readable` setup incomplete (`_read` noop, but push works). Assumes files exist.
- Fix: Minor tweak for stream.

#### 3. **Type/Syntax Warnings**
- TS errors: Missing types for formData in API (e.g., `any`). Hook `useTemplate` initial state typing.
- Fix: Add basic types.
- Prisma: `@map("jobs")` on model (unnecessary, remove).
- Tailwind: Content paths include `./pages/` and `./src/` (unused; clean up).

#### 4. **Other Improvements**
- **Security/Prod**: `NEXTAUTH_SECRET` in `.env.example` but unused (remove if no auth). `FILES_ROOT` should be absolute path in prod.
- **UX**: Add loading state in `handleUpload`. Poll job status if processing is async (future: WebSockets).
- **Test Flow**: After fixes, create template → resize box in preview → upload 2 PNG QRs → process → auto-download ZIP with templated images.

Run `npm run dev` after fixes; it should work on `localhost:3000/templates`.

### Patched Files

Here are only the changed files (replace contents). Others are fine.

#### lib/env.ts (New File)
```ts
export const FILES_ROOT = process.env.FILES_ROOT || './data';
```

#### lib/useTemplate.ts (Add Types)
```ts
import { useState } from 'react';

interface Template {
id?: string;
name: string;
dpi: number;
canvasWidthMm: number;
canvasHeightMm: number;
qrBoxX: number;
qrBoxY: number;
qrBoxWidthMm: number;
qrBoxHeightMm: number;
}

export function useTemplate(initialTemplate: Template | null) {
const [template, setTemplate] = useState<Template | null>(initialTemplate);

const updateTemplate = (updates: Partial<Template>) => {
setTemplate(prev => prev ? ({ ...prev, ...updates }) : updates as Template);
};

return { template, updateTemplate };
}
```

#### prisma/schema.prisma (Remove Unnecessary Map)
```prisma
// ... existing, remove @@map("jobs") from Job model
model Job {
id String @id @default (cuid())
templateId String
name String @default ("Bulk Upload")
status JobStatus @default (PENDING)
createdAt DateTime @default (now())
updatedAt DateTime @updatedAt

template Template @relation (fields: [templateId], references: [id])
files JobFile[]

// Remove: @@map("jobs")
}
```

#### tailwind.config.js (Clean Content Paths)
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./app/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
],
// ... rest unchanged
}
```

#### app/templates/page.tsx
```tsx
"use client";

import { useState, useRef } from "react";
import TemplateForm from "@/components/TemplateForm";
import QRPreview from "@/components/QRPreview";
import UploadZone from "@/components/UploadZone";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useTemplate } from "@/lib/useTemplate";
import type { Template } from "@/lib/useTemplate";

export default function TemplatesPage() {
const [savedTemplate, setSavedTemplate] = useState<Template | null>(null);
const [uploadFiles, setUploadFiles] = useState<File[]>([]);
const previewRef = useRef<HTMLDivElement>(null);
const { template, updateTemplate } = useTemplate(savedTemplate);

const handleSaveTemplate = async (formData: Omit<Template, 'id'>) => {
const res = await fetch("/api/templates", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
const data = await res.json() as Template;
const fullTemplate = { ...formData, id: data.id };
setSavedTemplate(fullTemplate);
updateTemplate(fullTemplate);
};

const handleUpload = async () => {
if (!template || uploadFiles.length === 0) return;

const formData = new FormData();
uploadFiles.forEach((file) => formData.append("files", file));
formData.append("templateId", template.id!);

const res = await fetch("/api/jobs", { method: "POST", body: formData });
if (res.ok) {
const job = await res.json();
// Poll or direct download
window.location.href = `/api/jobs/${job.id}/download`;
}
};

return (
<div className="container mx-auto p-4 space-y-6">
<Card>
<CardHeader>
<CardTitle>Define Template</CardTitle>
</CardHeader>
<CardContent>
<TemplateForm onSubmit={handleSaveTemplate} />
</CardContent>
</Card>

{template && (
<>
<Card>
<CardHeader>
<CardTitle>Live Preview</CardTitle>
</CardHeader>
<CardContent>
<QRPreview
ref={previewRef}
template={template}
onBoxUpdate={updateTemplate}
/>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle>Bulk Upload QRs</CardTitle>
</CardHeader>
<CardContent>
<UploadZone files={uploadFiles} onFilesChange={setUploadFiles} />
<Button onClick={handleUpload} className="mt-4" disabled={uploadFiles.length === 0}>
Process & Download ZIP
</Button>
</CardContent>
</Card>
</>
)}
</div>
);
}
```

#### components/TemplateForm.tsx
```tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { Template } from "@/lib/useTemplate";

type FormData = Omit<Template, 'id'>;

export default function TemplateForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
const [formData, setFormData] = useState<FormData>({
name: "",
dpi: 300,
canvasWidthMm: 65,
canvasHeightMm: 140,
qrBoxX: 0,
qrBoxY: 0,
qrBoxWidthMm: 50,
qrBoxHeightMm: 50,
});

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.name === 'name' ? e.target.value : parseFloat(e.target.value) || 0;
setFormData({ ...formData, [e.target.name]: value });
};

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSubmit(formData);
};

return (
<form onSubmit={handleSubmit} className="space-y-4">
{/* ... rest unchanged */}
</form>
);
}
```

#### components/QRPreview.tsx (Remove Redundant useEffect, Basic Drag Note)
```tsx
"use client";

import { forwardRef, useRef } from "react";
import { Resizable } from "react-resizable";
// Optional: import Draggable from 'react-draggable'; // npm install react-draggable

interface QRPreviewProps {
template: any;
onBoxUpdate: (updates: any) => void;
}

const QRPreview = forwardRef<HTMLDivElement, QRPreviewProps>(({ template, onBoxUpdate }, ref) => {
const boxRef = useRef<HTMLDivElement>(null);
const scale = template.dpi / 25.4;
const canvasWidthPx = template.canvasWidthMm * scale;
const canvasHeightPx = template.canvasHeightMm * scale;
const boxXPx = template.qrBoxX * scale;
const boxYPx = template.qrBoxY * scale;
const boxWidthPx = template.qrBoxWidthMm * scale;
const boxHeightPx = template.qrBoxHeightMm * scale;

const handleResize = (e: any, { size }: any) => {
onBoxUpdate({
...template,
qrBoxWidthMm: size.width / scale,

README.md

@@ -1,10 +1,13 @@
 ---
-title: Qr Wizardry Portal
-emoji: 🌖
-colorFrom: pink
+title: QR Wizardry Portal ✨
+colorFrom: blue
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,211 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Wizardry Portal</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+            color: #e2e8f0;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="relative overflow-hidden">
+        <!-- Animated background -->
+        <div class="absolute inset-0 bg-gradient-to-br from-gray-900 to-blue-900 opacity-50"></div>
+        <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/42')] bg-cover bg-center opacity-10"></div>
+
+        <!-- Main content -->
+        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+            <!-- Header -->
+            <header class="flex flex-col items-center text-center mb-16">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="w-16 h-16 rounded-full bg-primary-500 flex items-center justify-center shadow-lg shadow-primary-500/20">
+                        <i data-feather="maximize-2" class="text-white w-8 h-8"></i>
+                    </div>
+                </div>
+                <h1 class="text-4xl md:text-6xl font-bold mb-4">
+                    <span class="gradient-text">QR Wizardry</span> Portal
+                </h1>
+                <p class="text-xl text-gray-400 max-w-2xl">
+                    Magically transform your QR codes with our powerful template processing system
+                </p>
+                <div class="mt-8 flex gap-4">
+                    <a href="/templates" class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
+                        Start Crafting
+                    </a>
+                    <a href="#features" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-gray-200 font-medium rounded-lg transition-all">
+                        Learn More
+                    </a>
+                </div>
+            </header>
+
+            <!-- Features -->
+            <section id="features" class="mb-24">
+                <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Magical Features</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- Feature 1 -->
+                    <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-primary-500 transition-all">
+                        <div class="w-12 h-12 rounded-lg bg-primary-500/20 flex items-center justify-center mb-4">
+                            <i data-feather="edit-3" class="text-primary-400"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Template Designer</h3>
+                        <p class="text-gray-400">Create beautiful QR code templates with precise positioning and sizing controls.</p>
+                    </div>
+                    
+                    <!-- Feature 2 -->
+                    <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-primary-500 transition-all">
+                        <div class="w-12 h-12 rounded-lg bg-primary-500/20 flex items-center justify-center mb-4">
+                            <i data-feather="upload-cloud" class="text-primary-400"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Bulk Processing</h3>
+                        <p class="text-gray-400">Upload multiple QR codes at once and process them with your template automatically.</p>
+                    </div>
+                    
+                    <!-- Feature 3 -->
+                    <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-primary-500 transition-all">
+                        <div class="w-12 h-12 rounded-lg bg-primary-500/20 flex items-center justify-center mb-4">
+                            <i data-feather="download" class="text-primary-400"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Instant Download</h3>
+                        <p class="text-gray-400">Get your processed QR codes delivered in a neat ZIP file ready for use.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Preview -->
+            <section class="mb-24">
+                <div class="bg-gradient-to-r from-primary-900/20 to-blue-900/20 p-1 rounded-xl">
+                    <div class="bg-gray-900 rounded-lg p-8">
+                        <div class="flex flex-col md:flex-row gap-8 items-center">
+                            <div class="flex-1">
+                                <h2 class="text-3xl font-bold mb-4 gradient-text">See It in Action</h2>
+                                <p class="text-gray-400 mb-6">Watch how we transform a basic QR code into a beautifully designed template.</p>
+                                <ul class="space-y-3 text-gray-300">
+                                    <li class="flex items-start">
+                                        <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>
+                                        <span>Pixel-perfect positioning</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>
+                                        <span>High-resolution output</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>
+                                        <span>Batch processing</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="flex-1">
+                                <div class="relative">
+                                    <div class="absolute -inset-4 bg-gradient-to-r from-primary-500 to-blue-400 rounded-xl blur opacity-20"></div>
+                                    <div class="relative bg-gray-800 rounded-lg overflow-hidden border border-gray-700">
+                                        <div class="aspect-video bg-gray-900/50 flex items-center justify-center">
+                                            <div class="text-center p-6">
+                                                <i data-feather="play" class="w-16 h-16 text-primary-500 mx-auto"></i>
+                                                <p class="mt-2 text-gray-400">Template Preview</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <!-- Footer -->
+        <footer class="border-t border-gray-800 py-8">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                        <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center">
+                            <i data-feather="maximize-2" class="text-white w-4 h-4"></i>
+                        </div>
+                        <span class="text-xl font-bold">QR Wizardry</span>
+                    </div>
+                    <div class="flex space-x-6">
+                        <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">
+                            <i data-feather="github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="mt-8 text-center text-gray-500 text-sm">
+                    © 2023 QR Wizardry Portal. All rights reserved.
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        feather.replace();
+        // Simple animation for cards on scroll
+        document.addEventListener('DOMContentLoaded', () => {
+            const cards = document.querySelectorAll('.bg-gray-800\\/50');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate-fadeIn');
+                    }
+                });
+            }, { threshold: 0.1 });
+
+            cards.forEach(card => {
+                observer.observe(card);
+            });
+        });
+    </script>
+    <style>
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fadeIn {
+            animation: fadeIn 0.6s ease-out forwards;
+        }
+    </style>
+</body>
 </html>

templates.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Template Designer | QR Wizardry</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/react-dropzone@14.2.3/dist/react-dropzone.js"></script>
+    <script src="https://unpkg.com/react-resizable@3.0.5/dist/react-resizable.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+            color: #e2e8f0;
+        }
+        .resize-handle {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: #3b82f6;
+            right: -5px;
+            bottom: -5px;
+            cursor: se-resize;
+            border-radius: 2px;
+        }
+        .dropzone {
+            border: 2px dashed #334155;
+            transition: all 0.3s ease;
+        }
+        .dropzone.active {
+            border-color: #3b82f6;
+            background-color: #1e3a8a20;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="relative">
+        <!-- Navigation -->
+        <nav class="bg-gray-900/80 backdrop-blur-sm border-b border-gray-800">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center">
+                        <div class="flex-shrink-0 flex items-center">
+                            <i data-feather="maximize-2" class="text-primary-500 w-6 h-6"></i>
+                            <span class="ml-2 font-bold">QR Wizardry</span>
+                        </div>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="/" class="text-gray-400 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                                Home
+                            </a>
+                            <a href="#" class="bg-gray-800 text-white px-3 py-2 rounded-md text-sm font-medium">
+                                Templates
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                                Documentation
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main content -->
+        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <div class="mb-8">
+                <h1 class="text-3xl font-bold mb-2">Template Designer</h1>
+                <p class="text-gray-400">Create your perfect QR code template with our intuitive designer</p>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Template Form -->
+                <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
+                    <h2 class="text-xl font-semibold mb-4 flex items-center">
+                        <i data-feather="edit-3" class="w-5 h-5 mr-2 text-primary-500"></i>
+                        Template Settings
+                    </h2>
+                    <form>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-300 mb-1">Template Name</label>
+                                <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="My Awesome Template">
+                            </div>
+                            
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300 mb-1">DPI</label>
+                                    <input type="number" value="300" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300 mb-1">Canvas Width (mm)</label>
+                                    <input type="number" value="65" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                </div>
+                            </div>
+                            
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300 mb-1">Canvas Height (mm)</label>
+                                    <input type="number" value="140" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300 mb-1">QR Box Width (mm)</label>
+                                    <input type="number" value="50" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                </div>
+                            </div>
+                            
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300 mb-1">QR Box Height (mm)</label>
+                                    <input type="number" value="50" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300 mb-1">QR Position X (mm)</label>
+                                    <input type="number" value="0" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                </div>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-gray-300 mb-1">QR Position Y (mm)</label>
+                                <input type="number" value="0" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                            </div>
+                            
+                            <div class="pt-4">
+                                <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
+                                    Save Template
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Preview Section -->
+                <div class="space-y-6">
+                    <!-- QR Preview -->
+                    <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
+                        <h2 class="text-xl font-semibold mb-4 flex items-center">
+                            <i data-feather="eye" class="w-5 h-5 mr-2 text-primary-500"></i>
+                            Live Preview
+                        </h2>
+                        <div class="relative border-2 border-dashed border-gray-700 p-4 rounded-lg">
+                            <div class="bg-white relative" style="width: 300px; height: 646px;">
+                                <div style="position: absolute; left: 0px; top: 0px; width: 231px; height: 231px; border: 1px dashed gray;">
+                                    <div class="bg-gray-200 w-full h-full cursor-move flex items-center justify-center text-gray-600 text-sm">
+                                        QR Code Position
+                                        <div class="resize-handle"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Upload Section -->
+                    <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6">
+                        <h2 class="text-xl font-semibold mb-4 flex items-center">
+                            <i data-feather="upload" class="w-5 h-5 mr-2 text-primary-500"></i>
+                            Upload QR Codes
+                        </h2>
+                        <div class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4">
+                            <input type="file" class="hidden" multiple accept="image/*">
+                            <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-primary-500 mb-3"></i>
+                            <p class="text-gray-400 mb-1">Drag & drop your QR code images here</p>
+                            <p class="text-sm text-gray-500">or click to select files</p>
+                        </div>
+                        
+                        <div class="border border-gray-700 rounded-lg p-4 mb-4">
+                            <h3 class="text-sm font-medium text-gray-300 mb-2">Selected Files</h3>
+                            <div class="text-sm text-gray-400 italic">No files selected</div>
+                        </div>
+                        
+                        <button class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center">
+                            <i data-feather="zap" class="w-4 h-4 mr-2"></i>
+                            Process & Download
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="border-t border-gray-800 py-8 mt-12">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                        <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center">
+                            <i data-feather="maximize-2" class="text-white w-4 h-4"></i>
+                        </div>
+                        <span class="text-lg font-bold">QR Wizardry</span>
+                    </div>
+                    <div class="text-sm text-gray-500">
+                        © 2023 QR Wizardry Portal. All rights reserved.
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Simple dropzone interaction
+        document.querySelectorAll('.dropzone').forEach(dropzone => {
+            const input = dropzone.querySelector('input');
+            
+            dropzone.addEventListener('click', () => {
+                input.click();
+            });
+            
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropzone.addEventListener(eventName, (e) => {
+                    e.preventDefault();
+                    dropzone.classList.add('active');
+                });
+            });
+            
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropzone.addEventListener(eventName, (e) => {
+                    e.preventDefault();
+                    dropzone.classList.remove('active');
+                });
+            });
+            
+            input.addEventListener('change', () => {
+                const filesList = input.files;
+                if (filesList.length > 0) {
+                    const filesContainer = dropzone.nextElementSibling.querySelector('div');
+                    filesContainer.innerHTML = '';
+                    
+                    Array.from(filesList).forEach(file => {
+                        const fileElement = document.createElement('div');
+                        fileElement.className = 'flex justify-between items-center py-1';
+                        fileElement.innerHTML = `
+                            <span class="truncate">${file.name}</span>
+                            <span class="text-gray-500 text-xs">${(file.size / 1024).toFixed(1)} KB</span>
+                        `;
+                        filesContainer.appendChild(fileElement);
+                    });
+                }
+            });
+        });
+    </script>
+</body>
+</html>