done

.claude/settings.local.json

@@ -7,7 +7,8 @@
       "Bash(npx shadcn@latest init -y)",
       "Bash(npx shadcn@latest init:*)",
       "Bash(npx shadcn@latest add:*)",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(npm run dev:*)"
     ],
     "deny": [],
     "ask": []

.dockerignore

@@ -0,0 +1,52 @@
+# Dependencies
+node_modules
+npm-debug.log
+yarn-error.log
+yarn.lock
+package-lock.json
+
+# Next.js build output
+.next
+out
+
+# Production
+build
+dist
+
+# Misc
+.DS_Store
+*.pem
+.env*.local
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vercel
+.vercel
+
+# Typescript
+*.tsbuildinfo
+
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+docs
+
+# Testing
+coverage
+.nyc_output
+
+# Editor directories and files
+.idea
+.vscode
+*.swp
+*.swo
+*~
+
+# OS files
+Thumbs.db

Dockerfile

@@ -0,0 +1,61 @@
+# Use Node.js 20 Alpine as base image
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci --only=production && \
+    npm ci --only=development
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Build the Next.js application
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Create a non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built application
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+# Set the correct permission for prerender cache
+RUN mkdir -p .next
+RUN chown nextjs:nodejs .next
+
+# Switch to the non-root user
+USER nextjs
+
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+
+# Set environment variable for the port
+ENV PORT 7860
+ENV HOSTNAME "0.0.0.0"
+
+# Start the application
+CMD ["node", "server.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Hugging Face QR Code Generator
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,36 +1,156 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+---
+title: Hugging Face QR Code Generator
+emoji: 🤗
+colorFrom: yellow
+colorTo: orange
+sdk: docker
+pinned: false
+license: mit
+app_port: 7860
+---
 
-## Getting Started
+# Hugging Face QR Code Generator 🤗
 
-First, run the development server:
+A beautiful and responsive web application that generates QR codes for Hugging Face profiles, models, datasets, and spaces. Create stunning, shareable QR codes with custom designs that perfectly represent your Hugging Face identity.
 
+## Features ✨
+
+- **Profile QR Codes**: Generate QR codes for any Hugging Face user profile
+- **Resource Support**: Create QR codes for models, datasets, and spaces
+- **Beautiful Design**: Modern, clean interface with animated gradients
+- **Responsive**: Works perfectly on all devices - desktop, tablet, and mobile
+- **Multiple Export Options**: Download as image, copy to clipboard, or share directly
+- **Social Sharing**: Built-in sharing to Twitter/X, LinkedIn, and Facebook
+- **Dark Mode Support**: Automatically adapts to your system preferences
+
+## How to Use 📖
+
+1. **Enter a Hugging Face URL or username**:
+   - Full URL: `https://huggingface.co/username`
+   - Just username: `username`
+   - Model URL: `https://huggingface.co/username/model-name`
+   - Dataset URL: `https://huggingface.co/datasets/username/dataset-name`
+   - Space URL: `https://huggingface.co/spaces/username/space-name`
+
+2. **Click "Generate QR Code"** to create your custom QR code
+
+3. **Customize and Share**:
+   - Click the background to cycle through different gradient colors
+   - Download the complete design or just the QR code
+   - Copy to clipboard for easy sharing
+   - Share directly to social media
+
+## Technology Stack 🛠️
+
+- **Framework**: Next.js 16 with App Router
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS + Custom CSS
+- **UI Components**: shadcn/ui
+- **QR Generation**: qrcode.js
+- **Image Export**: html-to-image
+- **Icons**: Lucide React + React Icons
+
+## Local Development 💻
+
+### Prerequisites
+- Node.js 20 or higher
+- npm or yarn package manager
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/yourusername/huggingface-qr-generator.git
+cd huggingface-qr-generator
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Run the development server:
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+4. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+### Build for Production
+
+```bash
+npm run build
+npm run start
+```
+
+## Docker Deployment 🐳
+
+### Build and Run with Docker
+
+1. Build the Docker image:
+```bash
+docker build -t hf-qr-generator .
+```
+
+2. Run the container:
+```bash
+docker run -p 7860:7860 hf-qr-generator
+```
+
+3. Access the application at [http://localhost:7860](http://localhost:7860)
+
+### Deploy to Hugging Face Spaces
+
+This application is configured for easy deployment to Hugging Face Spaces:
+
+1. Create a new Space on Hugging Face
+2. Choose "Docker" as the SDK
+3. Push this repository to your Space
+4. The application will automatically build and deploy
+
+## Environment Variables 🔐
+
+No environment variables are required for basic functionality. The application uses Next.js API routes to handle CORS and proxy requests.
+
+## API Routes 🌐
+
+- `/api/huggingface` - Fetches Hugging Face profile data
+- `/api/proxy-image` - Proxies avatar images to avoid CORS issues
+
+## Browser Support 🌍
+
+- Chrome/Edge (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## Contributing 🤝
+
+Contributions are welcome! Please feel free to submit a Pull Request.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+1. Fork the project
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## License 📄
 
-## Learn More
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-To learn more about Next.js, take a look at the following resources:
+## Acknowledgments 🙏
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- Hugging Face for the amazing platform and API
+- shadcn/ui for the beautiful UI components
+- The Next.js team for the excellent framework
+- All contributors and users of this application
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Support 💬
 
-## Deploy on Vercel
+If you encounter any issues or have questions:
+- Open an issue on GitHub
+- Contact through Hugging Face Spaces discussions
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+---
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Made with ❤️ for the Hugging Face community

app/api/huggingface/route.js

@@ -27,11 +27,13 @@ export async function POST(request) {
 
       // Extract the CDN avatar URL from the HTML
       // Look for pattern: https://cdn-avatars.huggingface.co/...
-      const avatarMatch = html.match(/https:\/\/cdn-avatars\.huggingface\.co\/[^"'\s]+\.(png|jpg|jpeg|webp)/);
+      // Make sure to stop at the first quote, space, or HTML entity
+      const avatarMatch = html.match(/https:\/\/cdn-avatars\.huggingface\.co\/[^"'\s&<>]+?\.(png|jpg|jpeg|webp)/);
 
       let avatarUrl = null;
       if (avatarMatch && avatarMatch[0]) {
-        avatarUrl = avatarMatch[0];
+        // Clean the URL - remove any HTML entities or extra characters
+        avatarUrl = avatarMatch[0].split('&')[0].split('"')[0].split("'")[0];
       }
 
       // If no CDN avatar found, try to find any avatar image

app/api/proxy-image/route.js

@@ -4,7 +4,7 @@ import axios from 'axios';
 export async function GET(request) {
   try {
     const { searchParams } = new URL(request.url);
-    const imageUrl = searchParams.get('url');
+    let imageUrl = searchParams.get('url');
 
     if (!imageUrl) {
       return NextResponse.json(
@@ -13,12 +13,30 @@ export async function GET(request) {
       );
     }
 
+    // Decode the URL properly and clean it
+    imageUrl = decodeURIComponent(imageUrl);
+
+    // Remove any extra encoded characters or HTML entities that might have been appended
+    // Clean up common issues with malformed URLs
+    imageUrl = imageUrl.split('&quot')[0].split('&#')[0].split('"')[0].split("'")[0];
+
+    // Validate that it's a proper image URL
+    if (!imageUrl.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif|webp|svg)$/i)) {
+      console.error('Invalid image URL format:', imageUrl);
+      return NextResponse.json(
+        { error: 'Invalid image URL format' },
+        { status: 400 }
+      );
+    }
+
     // Fetch the image
     const response = await axios.get(imageUrl, {
       responseType: 'arraybuffer',
       headers: {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
-      }
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+        'Accept': 'image/*'
+      },
+      timeout: 10000 // 10 second timeout
     });
 
     // Get content type from response
@@ -35,10 +53,21 @@ export async function GET(request) {
     });
 
   } catch (error) {
-    console.error('Error proxying image:', error);
+    console.error('Error proxying image:', {
+      message: error.message,
+      status: error.response?.status,
+      url: error.config?.url
+    });
+
+    // If it's a 403, try to return a default avatar
+    if (error.response?.status === 403 || error.response?.status === 404) {
+      // Return a redirect to the default Hugging Face logo
+      return NextResponse.redirect('https://huggingface.co/front/assets/huggingface_logo-noborder.svg');
+    }
+
     return NextResponse.json(
-      { error: 'Failed to fetch image' },
-      { status: 500 }
+      { error: 'Failed to fetch image', details: error.message },
+      { status: error.response?.status || 500 }
     );
   }
 }

app/page.tsx

@@ -1,4 +1,4 @@
-import HuggingFaceQRGenerator from '../components/HuggingFaceQRGenerator.tsx';
+import HuggingFaceQRGenerator from '../components/HuggingFaceQRGenerator';
 
 export default function Home() {
   return <HuggingFaceQRGenerator />;

components/HuggingFaceQRGenerator.tsx

@@ -11,7 +11,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Download, ChevronLeft, Copy } from 'lucide-react';
+import { Download, ChevronLeft, Copy, Palette } from 'lucide-react';
 import { FaFacebook, FaLinkedin } from 'react-icons/fa';
 import { FaSquareXTwitter } from 'react-icons/fa6';
 
@@ -23,12 +23,29 @@ const HuggingFaceQRGenerator = () => {
   const [qrCodeInstance, setQrCodeInstance] = useState<any>(null);
   const [showQR, setShowQR] = useState(false);
   const [gradientIndex, setGradientIndex] = useState(0);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [customColor, setCustomColor] = useState<string | null>(null);
+  
   const gradients = [
-    ['#f1c40f', '#f39c12'],
-    ['#34d399', '#10b981'],
-    ['#60a5fa', '#6366f1'],
-    ['#fb7185', '#f472b6'],
-    ['#f59e0b', '#ef4444']
+    { name: 'Sunset Orange', colors: ['#f1c40f', '#f39c12'], type: 'gradient' },
+    { name: 'Ocean Blue', colors: ['#60a5fa', '#3b82f6'], type: 'gradient' },
+    { name: 'Emerald Green', colors: ['#34d399', '#10b981'], type: 'gradient' },
+    { name: 'Purple Dream', colors: ['#a78bfa', '#7c3aed'], type: 'gradient' },
+    { name: 'Rose Pink', colors: ['#fb7185', '#f472b6'], type: 'gradient' },
+    { name: 'Amber Gold', colors: ['#fbbf24', '#f59e0b'], type: 'gradient' },
+    { name: 'Teal Breeze', colors: ['#2dd4bf', '#14b8a6'], type: 'gradient' },
+    { name: 'Indigo Night', colors: ['#6366f1', '#4f46e5'], type: 'gradient' },
+  ];
+  
+  const solidColors = [
+    { name: 'Orange', color: '#f59e0b' },
+    { name: 'Blue', color: '#3b82f6' },
+    { name: 'Green', color: '#10b981' },
+    { name: 'Purple', color: '#8b5cf6' },
+    { name: 'Pink', color: '#ec4899' },
+    { name: 'Red', color: '#ef4444' },
+    { name: 'Yellow', color: '#eab308' },
+    { name: 'Gray', color: '#6b7280' },
   ];
 
   const handleGenerate = async () => {
@@ -84,6 +101,26 @@ const HuggingFaceQRGenerator = () => {
 
   const handleCycleBackground = () => {
     setGradientIndex((prev) => (prev + 1) % gradients.length);
+    setCustomColor(null);
+  };
+  
+  const handleSelectGradient = (index: number) => {
+    setGradientIndex(index);
+    setCustomColor(null);
+    setShowColorPicker(false);
+  };
+  
+  const handleSelectSolidColor = (color: string) => {
+    setCustomColor(color);
+    setShowColorPicker(false);
+  };
+  
+  const getBackgroundStyle = () => {
+    if (customColor) {
+      return { background: customColor };
+    }
+    const gradient = gradients[gradientIndex];
+    return { background: `linear-gradient(135deg, ${gradient.colors[0]}, ${gradient.colors[1]})` };
   };
 
   const phoneRef = useRef<HTMLDivElement | null>(null);
@@ -246,22 +283,22 @@ const HuggingFaceQRGenerator = () => {
     <div className="min-h-screen bg-linear-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900 dark:to-gray-900">
       {/* Input form - hidden when QR is shown */}
       {!showQR && (
-        <div className="min-h-screen grid place-items-center p-6 md:p-10 bg-white/80">
+        <div className="min-h-screen grid place-items-center p-4 sm:p-6 md:p-10 bg-white/80">
           <div className="w-full max-w-2xl mx-auto">
             {/* Input card */}
-            <Card className="shadow-xl" style={{ padding: 15, fontFamily: 'var(--font-inter)', boxShadow: '0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06)' }}>
-              <CardHeader className="pb-4">
+            <Card className="shadow-xl" style={{ padding: '1rem', fontFamily: 'var(--font-inter)', boxShadow: '0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06)' }}>
+              <CardHeader className="pb-4 px-4 sm:px-6">
                 <div className="flex flex-col gap-3">
-                  <img src="/logo.svg" alt="Hugging Face" className="h-7 w-auto" />
-                  <CardDescription className="text-muted-foreground" style={{ fontFamily: 'var(--font-inter)' }}>Generate a clean QR code for any Hugging Face profile or resource.</CardDescription>
+                  <img src="/logo.svg" alt="Hugging Face" className="h-6 sm:h-7 w-auto" />
+                  <CardDescription className="text-muted-foreground text-sm sm:text-base" style={{ fontFamily: 'var(--font-inter)' }}>Generate a clean QR code for any Hugging Face profile or resource.</CardDescription>
                 </div>
               </CardHeader>
-              <CardContent className="p-6 md:p-8 space-y-7">
+              <CardContent className="p-4 sm:p-6 md:p-8 space-y-5 sm:space-y-7">
                 <div className="space-y-3">
                   <Label className="text-xs tracking-wider font-medium" style={{ fontFamily: 'var(--font-inter)' }}>HUGGING FACE USERNAME</Label>
                   <div className="relative">
-                    <div className="flex items-stretch overflow-hidden rounded-md border">
-                      <span className="hidden sm:inline-flex items-center text-sm text-muted-foreground select-none" style={{ paddingLeft: '8px', paddingRight: '5px', backgroundColor: '#f5f5f5', fontFamily: 'var(--font-inter)' }}>
+                    <div className="flex flex-col sm:flex-row items-stretch overflow-hidden rounded-md border">
+                      <span className="hidden sm:inline-flex items-center text-xs sm:text-sm text-muted-foreground select-none" style={{ paddingLeft: '8px', paddingRight: '5px', backgroundColor: '#f5f5f5', fontFamily: 'var(--font-inter)' }}>
                         https://huggingface.co/
                       </span>
                       <Input
@@ -269,8 +306,8 @@ const HuggingFaceQRGenerator = () => {
                         value={inputUrl}
                         onChange={(e) => setInputUrl(e.target.value)}
                         placeholder="Reubencf"
-                        className="h-12 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                        style={{ paddingLeft: '3px', paddingRight: '12px', fontFamily: 'var(--font-inter)' }}
+                        className="h-10 sm:h-12 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0 text-sm sm:text-base"
+                        style={{ paddingLeft: '12px', paddingRight: '12px', fontFamily: 'var(--font-inter)' }}
                         onKeyPress={(e) => e.key === 'Enter' && handleGenerate()}
                         disabled={loading}
                         aria-invalid={inputIsInvalid}
@@ -279,15 +316,15 @@ const HuggingFaceQRGenerator = () => {
                       />
                     </div>
                   </div>
-                  <p id="hf-input-help" className="text-xs text-muted-foreground" style={{ paddingTop: '5px', paddingBottom: '4px', fontFamily: 'var(--font-inter)' }}>Paste a full URL or just the username, e.g. <span className="font-mono">reubencf</span>.</p>
+                  <p id="hf-input-help" className="text-xs text-muted-foreground" style={{ paddingTop: '5px', paddingBottom: '4px', fontFamily: 'var(--font-inter)' }}>Paste a full URL or just the username, e.g. <span className="font-mono text-xs">reubencf</span>.</p>
                 </div>
 
-                <div className="pt-2 flex justify-end">
+                <div className="pt-2 flex justify-center sm:justify-end">
                   <Button
                     onClick={handleGenerate}
                     disabled={!inputUrl || loading}
-                    className="rounded-md h-auto bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700 disabled:opacity-100"
-                    style={{ padding: '12px' }}
+                    className="rounded-md h-auto bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700 disabled:opacity-100 w-full sm:w-auto text-sm sm:text-base"
+                    style={{ padding: '10px 16px' }}
                     aria-label="Generate QR Code"
                   >
                     {loading ? 'Generating…' : 'Generate QR Code'}
@@ -309,7 +346,7 @@ const HuggingFaceQRGenerator = () => {
       {showQR && profileData && (
         <div
           className="fixed inset-0 bg-linear-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900 dark:to-gray-900 z-50 p-4 md:p-6 overflow-y-auto"
-          style={{ background: `linear-gradient(135deg, ${gradients[gradientIndex][0]}, ${gradients[gradientIndex][1]})` }}
+          style={getBackgroundStyle()}
         >
           {/* Back button moved outside of the phone so it won't appear in exports */}
           <div className="qr-topbar">
@@ -319,7 +356,7 @@ const HuggingFaceQRGenerator = () => {
             <div
               className="qr-phone-bg"
               ref={phoneRef}
-              style={{ background: `linear-gradient(135deg, ${gradients[gradientIndex][0]}, ${gradients[gradientIndex][1]})` }}
+              style={getBackgroundStyle()}
               onClick={handleCycleBackground}
             >
               <div className="qr-card-v2" id="qr-card" ref={cardRef} onClick={(e) => e.stopPropagation()}>
@@ -375,6 +412,12 @@ const HuggingFaceQRGenerator = () => {
                     </button>
                     <span className="qr-action-text">Copy</span>
                   </div>
+                  <div className="qr-download-item">
+                    <button onClick={() => setShowColorPicker(!showColorPicker)} className="qr-circle" aria-label="Change Color">
+                      <Palette size={18} />
+                    </button>
+                    <span className="qr-action-text">Color</span>
+                  </div>
                 </div>
               </div>
               <div className="qr-share-group">
@@ -386,6 +429,46 @@ const HuggingFaceQRGenerator = () => {
                 </div>
               </div>
             </div>
+            
+            {/* Color Picker Popup */}
+            {showColorPicker && (
+              <div className="qr-color-picker" onClick={(e) => e.stopPropagation()}>
+                <div className="qr-color-picker-header">
+                  <h3>Choose Background</h3>
+                  <button onClick={() => setShowColorPicker(false)} className="qr-color-close">×</button>
+                </div>
+                
+                <div className="qr-color-section">
+                  <h4>Gradients</h4>
+                  <div className="qr-color-grid">
+                    {gradients.map((gradient, index) => (
+                      <button
+                        key={index}
+                        className={`qr-color-swatch ${gradientIndex === index && !customColor ? 'active' : ''}`}
+                        style={{ background: `linear-gradient(135deg, ${gradient.colors[0]}, ${gradient.colors[1]})` }}
+                        onClick={() => handleSelectGradient(index)}
+                        title={gradient.name}
+                      />
+                    ))}
+                  </div>
+                </div>
+                
+                <div className="qr-color-section">
+                  <h4>Solid Colors</h4>
+                  <div className="qr-color-grid">
+                    {solidColors.map((color, index) => (
+                      <button
+                        key={index}
+                        className={`qr-color-swatch ${customColor === color.color ? 'active' : ''}`}
+                        style={{ background: color.color }}
+                        onClick={() => handleSelectSolidColor(color.color)}
+                        title={color.name}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       )}

next.config.ts

@@ -1,7 +1,23 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'huggingface.co',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'aeiljuispo.cloudimg.io',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

styles/qr-generator.css

@@ -332,7 +332,34 @@
   background: #095196;
 }
 
-/* Mobile responsiveness */
+/* Responsive Design for All Devices */
+
+/* Tablet - Large (iPad Pro) */
+@media (max-width: 1024px) {
+  .qr-generator {
+    padding: 1.5rem;
+  }
+
+  .input-section,
+  .result-section {
+    max-width: 700px;
+    padding: 2.5rem 2rem;
+  }
+
+  .title {
+    font-size: 2.2rem;
+  }
+
+  .qr-phone-bg {
+    width: 360px;
+  }
+
+  .qr-share-sheet {
+    width: 360px;
+  }
+}
+
+/* Tablet - Standard */
 @media (max-width: 768px) {
   .qr-generator {
     padding: 1rem;
@@ -341,6 +368,7 @@
   .input-section,
   .result-section {
     padding: 2rem 1.5rem;
+    max-width: 100%;
   }
 
   .title {
@@ -409,6 +437,114 @@
   .share-btn {
     width: 100%;
   }
+
+  .qr-phone-bg {
+    width: 340px;
+  }
+
+  .qr-share-sheet {
+    width: 340px;
+  }
+}
+
+/* Mobile - Large (iPhone Plus/Max) */
+@media (max-width: 414px) {
+  .qr-generator {
+    padding: 0.75rem;
+  }
+
+  .input-section,
+  .result-section {
+    padding: 1.5rem 1rem;
+    border-radius: 16px;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .subtitle {
+    font-size: 0.9rem;
+  }
+
+  .qr-phone-bg {
+    width: 100%;
+    max-width: 340px;
+    padding: 30px 12px 12px;
+  }
+
+  .qr-card-v2 {
+    padding: 45px 12px 16px;
+  }
+
+  .qr-share-sheet {
+    width: 100%;
+    max-width: 340px;
+    padding: 10px 12px;
+  }
+
+  .hf-card {
+    padding: 1.5rem;
+  }
+}
+
+/* Mobile - Standard (iPhone, Android) */
+@media (max-width: 375px) {
+  .qr-phone-bg {
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .qr-share-sheet {
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .qr-avatar-wrap {
+    width: 48px;
+    height: 48px;
+    top: -24px;
+  }
+
+  .qr-name {
+    font-size: 0.95rem;
+  }
+
+  .qr-caption {
+    font-size: 0.75rem;
+  }
+}
+
+/* Mobile - Small */
+@media (max-width: 320px) {
+  .input-section,
+  .result-section {
+    padding: 1.25rem 0.75rem;
+  }
+
+  .title {
+    font-size: 1.3rem;
+  }
+
+  .qr-phone-bg {
+    width: 100%;
+    padding: 25px 10px 10px;
+  }
+
+  .qr-card-v2 {
+    padding: 40px 10px 14px;
+  }
+
+  .qr-share-sheet {
+    width: 100%;
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .qr-share-actions,
+  .qr-download-actions {
+    justify-content: center;
+  }
 }
 
 /* ===== New UI (Screenshot-inspired) ===== */
@@ -543,8 +679,10 @@
   align-items: center;
   justify-content: space-between;
   color: rgba(255,255,255,0.95);
+  padding: 8px;
 }
-.qr-topbar button { background: transparent; border: 0; color: inherit; padding: 4px; cursor: default; }
+.qr-topbar button { background: transparent; border: 0; color: inherit; padding: 8px; cursor: pointer; transition: opacity 0.2s; }
+.qr-topbar button:hover { opacity: 0.7; }
 
 /* Bottom share sheet */
 .qr-share-sheet {
@@ -586,3 +724,105 @@
 .qr-share-group { display:flex; flex-direction: column; gap: 8px; }
 .qr-share-label { font-size: 12px; color:#6b7280; margin-left: 0; text-align: left; letter-spacing: .02em; font-weight: 600; }
 .qr-share-actions { display:flex; gap: 14px; }
+
+/* Color Picker */
+.qr-color-picker {
+  position: relative;
+  width: 380px;
+  max-width: 100%;
+  margin: 12px auto 0;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 -8px 24px rgba(0,0,0,.22);
+  padding: 16px;
+  font-family: var(--font-inter), var(--font-geist-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  animation: slideUp 0.3s ease;
+}
+
+.qr-color-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.qr-color-picker-header h3 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #111827;
+  margin: 0;
+}
+
+.qr-color-close {
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+}
+
+.qr-color-close:hover {
+  color: #111827;
+}
+
+.qr-color-section {
+  margin-bottom: 16px;
+}
+
+.qr-color-section:last-child {
+  margin-bottom: 0;
+}
+
+.qr-color-section h4 {
+  font-size: 13px;
+  font-weight: 600;
+  color: #6b7280;
+  margin: 0 0 10px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.qr-color-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.qr-color-swatch {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.qr-color-swatch:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.qr-color-swatch.active {
+  border-color: #111827;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
+}
+
+.qr-color-swatch.active::after {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+}