Download index.html from arpansri/teespace: direct link, hf CLI and curl.
- Browser
- Download file 53.4 kB
-
https://huggingface.co/spaces/arpansri/teespace/resolve/main/index.html
- Command line
-
hf download hf://spaces/arpansri/teespace/index.html
-
curl -L -o index.html https://huggingface.co/spaces/arpansri/teespace/resolve/main/index.html
53.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Teemind - AI-Powered Custom T-Shirts</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .t-shirt-mockup { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjUgMTVIMTlWMThIMTVWMTVIMTNWMTlIMjFWMTRDMjEgMTMuNDQ3NyAyMC41NTIzIDEzIDIwIDEzSDE1LjVWMTVNMjEgMTFWMTRDMjEgMTUuNjU0NCAxOS42NTQ0IDE3IDE4IDE3SDE1VjE5SDRWMTdIMlYxMkMxLjQ0NzcyIDEyIDEgMTEuNTUyMyAxIDExVjVDMSA0LjQ0NzcyIDEuNDQ3NzIgNCAyIDRIN1YySDE3VjRIMjBDMjAuNTUyMyA0IDIxIDQuNDQ3NzIgMjEgNVYxMU0xOCA1VjJIMTZWNUgxOE0xMiA1VjJIMTBWNVgxMk03IDVWMkg5VjVIN1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg=='); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: contain; | |
| } | |
| .design-preview { | |
| transition: all 0.3s ease; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background-color: #ef4444; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-bold text-blue-600">Teemind</span> | |
| </a> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="nav-link border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#marketplace" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Marketplace</a> | |
| <a href="#how-it-works" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a> | |
| <a href="#designer" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Designer</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ml-4 relative"> | |
| <a href="#" class="relative text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-shopping-cart h-6 w-6"></i> | |
| <span class="cart-count">3</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#marketplace" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Marketplace</a> | |
| <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a> | |
| <a href="#designer" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Designer</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="flex items-center px-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-gray-800">Tom Cook</div> | |
| <div class="text-sm font-medium text-gray-500">tom@example.com</div> | |
| </div> | |
| <button class="ml-auto flex-shrink-0 bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3 space-y-1"> | |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl slide-up"> | |
| <span class="block">Design Your</span> | |
| <span class="block text-blue-600">Dream Tee</span> | |
| </h1> | |
| <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl slide-up"> | |
| Create unique, AI-generated t-shirt designs with just a few words. No design skills needed! | |
| </p> | |
| <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8 slide-up"> | |
| <div class="rounded-md shadow"> | |
| <a href="#designer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"> | |
| Start Designing | |
| </a> | |
| </div> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> | |
| <a href="#marketplace" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| Browse Designs | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works Section --> | |
| <div id="how-it-works" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| How It Works | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Create your custom t-shirt in just a few simple steps | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-4 md:gap-x-8 md:gap-y-10"> | |
| <div class="relative fade-in" style="animation-delay: 0.1s;"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Describe Your Design</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Enter a text prompt describing what you want on your t-shirt. Our AI will generate unique artwork based on your description. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="relative fade-in" style="animation-delay: 0.3s;"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Customize Your Design</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Adjust colors, position, and size of your design. Choose from different t-shirt styles and colors. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="relative fade-in" style="animation-delay: 0.5s;"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Preview & Refine</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| See your design on a realistic t-shirt mockup. Make any final adjustments before ordering. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="relative fade-in" style="animation-delay: 0.7s;"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <span class="text-xl font-bold">4</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Order Your Tee</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Add to cart and checkout. Your custom t-shirt will be printed and shipped within 3-5 business days. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Designs --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Featured</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Popular Designs | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Check out some of our most popular AI-generated designs | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"> | |
| <div class="group fade-in"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <div class="t-shirt-mockup h-full w-full bg-white flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?abstract,art" alt="Abstract art design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Abstract Universe</h3> | |
| <p class="mt-1 text-sm text-gray-500">AI-generated abstract art</p> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$29.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Customize This Design | |
| </button> | |
| </div> | |
| <div class="group fade-in" style="animation-delay: 0.2s;"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <div class="t-shirt-mockup h-full w-full bg-gray-100 flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?cat,cartoon" alt="Cartoon cat design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Cool Cat</h3> | |
| <p class="mt-1 text-sm text-gray-500">Cartoon style</p> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$24.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Customize This Design | |
| </button> | |
| </div> | |
| <div class="group fade-in" style="animation-delay: 0.4s;"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <div class="t-shirt-mockup h-full w-full bg-black flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?space,galaxy" alt="Space galaxy design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Galaxy Explorer</h3> | |
| <p class="mt-1 text-sm text-gray-500">Futuristic space art</p> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$27.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Customize This Design | |
| </button> | |
| </div> | |
| <div class="group fade-in" style="animation-delay: 0.6s;"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <div class="t-shirt-mockup h-full w-full bg-green-100 flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?nature,forest" alt="Nature forest design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Forest Dreams</h3> | |
| <p class="mt-1 text-sm text-gray-500">Nature illustration</p> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$25.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Customize This Design | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#marketplace" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| View All Designs | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Designer Section --> | |
| <div id="designer" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Designer</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Create Your Custom Design | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Use our AI designer to create a unique t-shirt in minutes | |
| </p> | |
| </div> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12"> | |
| <div class="mb-8 lg:mb-0"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="mb-6"> | |
| <label for="design-prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe your design</label> | |
| <textarea id="design-prompt" rows="3" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md p-3" placeholder="e.g. A futuristic city skyline at sunset, digital art style"></textarea> | |
| <p class="mt-2 text-sm text-gray-500">The more descriptive you are, the better the results!</p> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Style</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Cartoon</button> | |
| <button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Realistic</button> | |
| <button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Abstract</button> | |
| <button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Vintage</button> | |
| <button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Minimal</button> | |
| <button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Cyberpunk</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">T-Shirt Color</label> | |
| <div class="flex space-x-2"> | |
| <button class="color-option w-8 h-8 rounded-full bg-white border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="white"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-black border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="black"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-gray-300 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="gray"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-blue-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="blue"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-red-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="red"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-green-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="green"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-yellow-300 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="yellow"></button> | |
| <button class="color-option w-8 h-8 rounded-full bg-purple-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="purple"></button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button id="generate-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md"> | |
| Generate Design | |
| </button> | |
| <button class="flex-1 bg-white border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-50"> | |
| Random Prompt | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm h-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Design Preview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-undo-alt"></i> | |
| </button> | |
| <button class="p-1 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-redo-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="preview-container" class="t-shirt-mockup h-96 w-full bg-white flex items-center justify-center mb-4"> | |
| <div id="default-preview" class="text-center p-8"> | |
| <i class="fas fa-tshirt text-5xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Your design will appear here</p> | |
| <p class="text-gray-400 text-sm mt-2">Describe your design and click "Generate"</p> | |
| </div> | |
| <img id="generated-design" src="" alt="Generated design" class="hidden design-preview w-3/4 h-3/4 object-contain"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-white border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-50"> | |
| <i class="fas fa-heart mr-2"></i> Save Design | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Marketplace Section --> | |
| <div id="marketplace" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Marketplace</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Browse Community Designs | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Discover and purchase designs created by our community | |
| </p> | |
| </div> | |
| <div class="mb-8 flex flex-wrap justify-between items-center"> | |
| <div class="w-full sm:w-auto mb-4 sm:mb-0"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search designs..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md w-full sm:w-64 focus:ring-blue-500 focus:border-blue-500"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-auto flex space-x-2"> | |
| <select class="border border-gray-300 rounded-md px-3 py-2 bg-white text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>All Categories</option> | |
| <option>Art</option> | |
| <option>Nature</option> | |
| <option>Animals</option> | |
| <option>Abstract</option> | |
| <option>Pop Culture</option> | |
| </select> | |
| <select class="border border-gray-300 rounded-md px-3 py-2 bg-white text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Sort by: Popular</option> | |
| <option>Newest</option> | |
| <option>Price: Low to High</option> | |
| <option>Price: High to Low</option> | |
| <option>Top Rated</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"> | |
| <div class="group"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative"> | |
| <div class="t-shirt-mockup h-full w-full bg-white flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?robot,future" alt="Robot future design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| <div class="absolute top-2 right-2"> | |
| <button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Future Bot</h3> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <span class="text-xs text-gray-500 ml-1">(42)</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$29.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| <div class="group"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative"> | |
| <div class="t-shirt-mockup h-full w-full bg-black flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?moon,night" alt="Moon night design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| <div class="absolute top-2 right-2"> | |
| <button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Lunar Night</h3> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> | |
| <span class="text-xs text-gray-500 ml-1">(36)</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$26.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| <div class="group"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative"> | |
| <div class="t-shirt-mockup h-full w-full bg-blue-100 flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?ocean,wave" alt="Ocean wave design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| <div class="absolute top-2 right-2"> | |
| <button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Ocean Wave</h3> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="far fa-star text-yellow-400 text-xs"></i> | |
| <span class="text-xs text-gray-500 ml-1">(28)</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$24.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| <div class="group"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative"> | |
| <div class="t-shirt-mockup h-full w-full bg-red-100 flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/300x300/?dragon,fantasy" alt="Dragon fantasy design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75"> | |
| </div> | |
| <div class="absolute top-2 right-2"> | |
| <button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-sm text-gray-700">Mythic Dragon</h3> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <span class="text-xs text-gray-500 ml-1">(51)</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">$31.99</p> | |
| </div> | |
| <button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| Load More Designs | |
| <i class="fas fa-sync-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What Our Customers Say | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| "I created a custom t-shirt for my husband's birthday with an AI-generated design of our favorite vacation spot. The quality is amazing and he absolutely loved it!" | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| "As someone with zero design skills, this platform is a game-changer. I was able to create professional-looking merch for my startup in minutes." | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">David Rodriguez</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| "The AI designer is incredibly powerful. I've sold over 50 of my custom designs through their marketplace. It's become a nice side income!" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-blue-600"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| <span class="block">Ready to create your custom tee?</span> | |
| <span class="block text-blue-200">Start designing today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#designer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50"> | |
| Start Designing | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#marketplace" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70"> | |
| Browse Marketplace | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Shop</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">All Designs</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">New Arrivals</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Best Sellers</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">On Sale</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Support</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">FAQs</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Shipping</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Returns</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-pinterest"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-gray-300">Subscribe to our newsletter</h4> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 border border-gray-600 bg-gray-700 text-white text-sm rounded-l-md focus:outline-none focus:ring-1 focus:ring-blue-500 w-full"> | |
| <button class="px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-r-md hover:bg-blue-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-base text-gray-400"> | |
| © 2023 Teemind, Inc. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Color selection for t-shirt | |
| document.querySelectorAll('.color-option').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const color = this.getAttribute('data-color'); | |
| const previewContainer = document.getElementById('preview-container'); | |
| // Remove all color classes | |
| previewContainer.classList.remove('bg-white', 'bg-black', 'bg-gray-300', 'bg-blue-500', 'bg-red-500', 'bg-green-500', 'bg-yellow-300', 'bg-purple-500'); | |
| // Add selected color class | |
| previewContainer.classList.add(`bg-${color}`); | |
| // Update active state | |
| document.querySelectorAll('.color-option').forEach(btn => { | |
| btn.classList.remove('ring-2', 'ring-blue-500'); | |
| }); | |
| this.classList.add('ring-2', 'ring-blue-500'); | |
| }); | |
| }); | |
| // Style selection | |
| document.querySelectorAll('.style-option').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.style-option').forEach(btn => { | |
| btn.classList.remove('bg-blue-100', 'border-blue-500', 'text-blue-700'); | |
| }); | |
| this.classList.add('bg-blue-100', 'border-blue-500', 'text-blue-700'); | |
| }); | |
| }); | |
| // Generate design button | |
| document.getElementById('generate-btn').addEventListener('click', function() { | |
| const prompt = document.getElementById('design-prompt').value; | |
| const defaultPreview = document.getElementById('default-preview'); | |
| const generatedDesign = document.getElementById('generated-design'); | |
| if (prompt.trim() === '') { | |
| alert('Please describe your design first!'); | |
| return; | |
| } | |
| // Show loading state | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; | |
| this.disabled = true; | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Hide default and show generated design | |
| defaultPreview.classList.add('hidden'); | |
| generatedDesign.classList.remove('hidden'); | |
| // Set a random image (in a real app, this would be the AI-generated image) | |
| generatedDesign.src = `https://source.unsplash.com/random/600x600/?${encodeURIComponent(prompt)}`; | |
| // Reset button | |
| this.innerHTML = 'Generate Design'; | |
| this.disabled = false; | |
| // Add fade-in effect | |
| generatedDesign.classList.add('fade-in'); | |
| }, 1500); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=arpansri/teespace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |