Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Cashier System Theme</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .font-heading { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .font-body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .custom-shadow { | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); | |
| } | |
| .dark .custom-shadow { | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-4px); | |
| transition: transform 0.2s ease; | |
| } | |
| /* Dark mode transitions */ | |
| body, .bg-white, .bg-gray-50, .border-gray-200, .border-gray-300, | |
| .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, | |
| .bg-indigo-100, .bg-teal-100, .bg-amber-100 { | |
| transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-body bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100"> | |
| <!-- Theme Toggle --> | |
| <div class="fixed top-4 right-4 z-50"> | |
| <button id="themeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition"> | |
| <svg id="sunIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path> | |
| </svg> | |
| <svg id="moonIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Color Palette Showcase --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="font-heading text-3xl font-bold mb-8">Modern Cashier System Theme</h1> | |
| <div class="mb-12"> | |
| <h2 class="font-heading text-2xl font-semibold mb-4">Color Palette</h2> | |
| <div class="grid grid-cols-5 gap-4"> | |
| <div class="bg-indigo-600 h-24 rounded-lg flex items-center justify-center text-white font-medium">Primary<br>#4F46E5</div> | |
| <div class="bg-teal-500 h-24 rounded-lg flex items-center justify-center text-white font-medium">Secondary<br>#14B8A6</div> | |
| <div class="bg-amber-400 h-24 rounded-lg flex items-center justify-center text-gray-900 font-medium">Accent<br>#FBBF24</div> | |
| <div class="bg-gray-50 dark:bg-gray-800 h-24 rounded-lg flex items-center justify-center text-gray-900 dark:text-gray-100 font-medium border border-gray-200 dark:border-gray-700">Background<br>#F9FAFB</div> | |
| <div class="bg-gray-800 dark:bg-gray-100 h-24 rounded-lg flex items-center justify-center text-white dark:text-gray-900 font-medium">Text<br>#1F2937</div> | |
| </div> | |
| </div> | |
| <!-- Typography --> | |
| <div class="mb-12"> | |
| <h2 class="font-heading text-2xl font-semibold mb-4">Typography</h2> | |
| <div class="space-y-4"> | |
| <h1 class="font-heading text-4xl font-bold">Heading 1 - Space Grotesk Bold</h1> | |
| <h2 class="font-heading text-3xl font-semibold">Heading 2 - Space Grotesk Semibold</h2> | |
| <h3 class="font-heading text-2xl font-medium">Heading 3 - Space Grotesk Medium</h3> | |
| <p class="text-lg">Body text - Inter Regular (16px default)</p> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Small text - Inter Regular (14px)</p> | |
| </div> | |
| </div> | |
| <!-- UI Components --> | |
| <div class="mb-12"> | |
| <h2 class="font-heading text-2xl font-semibold mb-6">UI Components</h2> | |
| <!-- Buttons --> | |
| <div class="mb-8"> | |
| <h3 class="font-heading text-xl font-medium mb-4">Buttons</h3> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Primary</button> | |
| <button class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-3 rounded-lg font-medium transition">Secondary</button> | |
| <button class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 px-6 py-3 rounded-lg font-medium border border-gray-300 dark:border-gray-600 transition">Outline</button> | |
| <button class="bg-amber-400 hover:bg-amber-500 text-gray-900 px-6 py-3 rounded-lg font-medium transition">Accent</button> | |
| </div> | |
| </div> | |
| <!-- Input Fields --> | |
| <div class="mb-8"> | |
| <h3 class="font-heading text-xl font-medium mb-4">Input Fields</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Standard Input</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Focused Input</label> | |
| <input type="text" class="w-full px-4 py-2 border-2 border-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" value="Sample text"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cards --> | |
| <div class="mb-8"> | |
| <h3 class="font-heading text-xl font-medium mb-4">Product Cards</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="product-card bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden transition cursor-pointer"> | |
| <div class="h-40 bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center"> | |
| <span class="text-indigo-600 dark:text-indigo-400 text-lg font-medium">Product Image</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-heading text-lg font-semibold mb-1 dark:text-white">Premium Coffee</h3> | |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Arabica blend, 250g</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900 dark:text-white">$12.99</span> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 text-sm rounded-lg transition">Add</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden transition cursor-pointer"> | |
| <div class="h-40 bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center"> | |
| <span class="text-teal-700 dark:text-teal-400 text-lg font-medium">Product Image</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-heading text-lg font-semibold mb-1 dark:text-white">Organic Tea</h3> | |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Herbal infusion, 20 bags</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900 dark:text-white">$8.49</span> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 text-sm rounded-lg transition">Add</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden transition cursor-pointer"> | |
| <div class="h-40 bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center"> | |
| <span class="text-amber-700 dark:text-amber-400 text-lg font-medium">Product Image</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-heading text-lg font-semibold mb-1 dark:text-white">Chocolate Bar</h3> | |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Dark 70%, 100g</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900 dark:text-white">$4.99</span> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 text-sm rounded-lg transition">Add</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tables --> | |
| <div class="mb-8"> | |
| <h3 class="font-heading text-xl font-medium mb-4">Order Tables</h3> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden"> | |
| <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> | |
| <thead class="bg-gray-50 dark:bg-gray-700"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Price</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Qty</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400"> | |
| <span>C</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900 dark:text-white">Coffee</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">Arabica blend</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">$12.99</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$12.99</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-teal-100 dark:bg-teal-900/30 rounded-full flex items-center justify-center text-teal-600 dark:text-teal-400"> | |
| <span>T</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900 dark:text-white">Tea</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">Herbal infusion</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">$8.49</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$16.98</td> | |
| </tr> | |
| </tbody> | |
| <tfoot class="bg-gray-50 dark:bg-gray-700"> | |
| <tr> | |
| <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Subtotal</td> | |
| <td class="px-6 py-3 text-sm font-medium text-gray-900 dark:text-white">$29.97</td> | |
| </tr> | |
| <tr> | |
| <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Tax (10%)</td> | |
| <td class="px-6 py-3 text-sm font-medium text-gray-900 dark:text-white">$3.00</td> | |
| </tr> | |
| <tr> | |
| <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-900 dark:text-white">Total</td> | |
| <td class="px-6 py-3 text-sm font-bold text-indigo-600 dark:text-indigo-400">$32.97</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layout Examples --> | |
| <div class="mb-12"> | |
| <h2 class="font-heading text-2xl font-semibold mb-6">Page Layout Examples</h2> | |
| <!-- Product Grid --> | |
| <div class="mb-8"> | |
| <h3 class="font-heading text-xl font-medium mb-4">Product Display Grid</h3> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl p-6 custom-shadow"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="font-heading text-2xl font-semibold dark:text-white">Products</h2> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="h-32 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400">Product 1</div> | |
| <div class="h-32 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center text-teal-600 dark:text-teal-400">Product 2</div> | |
| <div class="h-32 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center text-amber-600 dark:text-amber-400">Product 3</div> | |
| <div class="h-32 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400">Product 4</div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <nav class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">Previous</button> | |
| <button class="px-3 py-1 rounded bg-indigo-600 text-white">1</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">2</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">3</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">Next</button> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shopping Cart --> | |
| <div class="mb-8"> | |
| <h3 class="font-heading text-xl font-medium mb-4">Shopping Cart Layout</h3> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-0"> | |
| <div class="lg:col-span-2 p-6"> | |
| <h2 class="font-heading text-2xl font-semibold mb-6 dark:text-white">Your Cart (2 items)</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center border-b border-gray-100 dark:border-gray-700 pb-4"> | |
| <div class="flex-shrink-0 h-16 w-16 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400"> | |
| <span class="font-medium">C</span> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <h3 class="font-medium text-gray-900 dark:text-white">Premium Coffee</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Arabica blend, 250g</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path> | |
| </svg> | |
| </button> | |
| <span class="mx-2 text-gray-900 dark:text-white">1</span> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="ml-6 font-medium text-gray-900 dark:text-white">$12.99</div> | |
| <button class="ml-4 text-gray-400 hover:text-red-500"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="flex items-center border-b border-gray-100 dark:border-gray-700 pb-4"> | |
| <div class="flex-shrink-0 h-16 w-16 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center text-teal-600 dark:text-teal-400"> | |
| <span class="font-medium">T</span> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <h3 class="font-medium text-gray-900 dark:text-white">Organic Tea</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Herbal infusion, 20 bags</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path> | |
| </svg> | |
| </button> | |
| <span class="mx-2 text-gray-900 dark:text-white">2</span> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="ml-6 font-medium text-gray-900 dark:text-white">$16.98</div> | |
| <button class="ml-4 text-gray-400 hover:text-red-500"> | |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6"> | |
| <h2 class="font-heading text-xl font-semibold mb-4 dark:text-white">Order Summary</h2> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600 dark:text-gray-300">Subtotal</span> | |
| <span class="font-medium dark:text-white">$29.97</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600 dark:text-gray-300">Tax (10%)</span> | |
| <span class="font-medium dark:text-white">$3.00</span> | |
| </div> | |
| <div class="flex justify-between pt-3 border-t border-gray-200 dark:border-gray-600"> | |
| <span class="font-medium dark:text-white">Total</span> | |
| <span class="font-heading font-bold text-indigo-600 dark:text-indigo-400">$32.97</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-medium transition">Checkout</button> | |
| <p class="mt-3 text-center text-sm text-gray-500 dark:text-gray-400">or <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">continue shopping</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Checkout Form --> | |
| <div> | |
| <h3 class="font-heading text-xl font-medium mb-4">Checkout Form Structure</h3> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-0"> | |
| <div class="p-6"> | |
| <h2 class="font-heading text-2xl font-semibold mb-6 dark:text-white">Customer Information</h2> | |
| <form class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label> | |
| <input type="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label> | |
| <input type="tel" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| <option>Select</option> | |
| <option>California</option> | |
| <option>New York</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ZIP Code</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6"> | |
| <h2 class="font-heading text-xl font-semibold mb-4 dark:text-white">Payment Method</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <input id="credit-card" name="payment-method" type="radio" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800"> | |
| <label for="credit-card" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">Credit Card</label> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label> | |
| <input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiry Date</label> | |
| <input type="text" placeholder="MM/YY" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVV</label> | |
| <input type="text" placeholder="123" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-2"> | |
| <input id="paypal" name="payment-method" type="radio" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800"> | |
| <label for="paypal" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">PayPal</label> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 dark:border-gray-600 pt-6"> | |
| <h3 class="font-heading text-lg font-medium mb-4 dark:text-white">Order Summary</h3> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600 dark:text-gray-300">Subtotal</span> | |
| <span class="font-medium dark:text-white">$29.97</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600 dark:text-gray-300">Tax (10%)</span> | |
| <span class="font-medium dark:text-white">$3.00</span> | |
| </div> | |
| <div class="flex justify-between pt-3 border-t border-gray-200 dark:border-gray-600"> | |
| <span class="font-medium dark:text-white">Total</span> | |
| <span class="font-heading font-bold text-indigo-600 dark:text-indigo-400">$32.97</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-medium transition">Complete Order</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const sunIcon = document.getElementById('sunIcon'); | |
| const moonIcon = document.getElementById('moonIcon'); | |
| // Check for saved user preference or use system preference | |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | |
| const currentTheme = localStorage.getItem('theme'); | |
| if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) { | |
| document.documentElement.classList.add('dark'); | |
| sunIcon.classList.add('hidden'); | |
| moonIcon.classList.remove('hidden'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| sunIcon.classList.remove('hidden'); | |
| moonIcon.classList.add('hidden'); | |
| } | |
| // Toggle theme on button click | |
| themeToggle.addEventListener('click', () => { | |
| const isDark = document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| if (isDark) { | |
| sunIcon.classList.add('hidden'); | |
| moonIcon.classList.remove('hidden'); | |
| } else { | |
| sunIcon.classList.remove('hidden'); | |
| moonIcon.classList.add('hidden'); | |
| } | |
| }); | |
| // Listen for system theme changes | |
| prefersDarkScheme.addEventListener('change', (e) => { | |
| const newScheme = e.matches ? 'dark' : 'light'; | |
| if (!localStorage.getItem('theme')) { | |
| if (newScheme === 'dark') { | |
| document.documentElement.classList.add('dark'); | |
| sunIcon.classList.add('hidden'); | |
| moonIcon.classList.remove('hidden'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| sunIcon.classList.remove('hidden'); | |
| moonIcon.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=infoaliahmadi/darktheme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |