Hugging Face's logo

Spaces:
Kingrane
/
wallpaper-lab-test
Running

App Files Community
wallpaper-lab-test / index.html
Kingrane's picture
Kingrane
undefined - Initial Deployment
3be9dcc verified
raw
history blame contribute delete
53.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Wallpaper Lab - Create Unique Wallpapers</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>
 .gradient-bg {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .editor-canvas {
 background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
 }
 .element-draggable {
 cursor: grab;
 user-select: none;
 }
 .element-draggable:active {
 cursor: grabbing;
 }
 .scrollbar-hide::-webkit-scrollbar {
 display: none;
 }
 .scrollbar-hide {
 -ms-overflow-style: none;
 scrollbar-width: none;
 }
 .tooltip {
 position: relative;
 }
 .tooltip-text {
 visibility: hidden;
 width: 120px;
 background-color: #333;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 transition: opacity 0.3s;
 }
 .tooltip:hover .tooltip-text {
 visibility: visible;
 opacity: 1;
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-4 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-palette text-2xl"></i>
 <h1 class="text-2xl font-bold">Wallpaper Lab</h1>
 </div>
 <nav class="hidden md:flex space-x-6">
 <a href="#editor" class="hover:text-gray-200 transition">Editor</a>
 <a href="#gallery" class="hover:text-gray-200 transition">Gallery</a>
 <a href="#challenges" class="hover:text-gray-200 transition">Challenges</a>
 <a href="#shop" class="hover:text-gray-200 transition">Shop</a>
 </nav>
 <div class="flex items-center space-x-4">
 <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
 Sign In
 </button>
 <button class="md:hidden text-white">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section class="gradient-bg text-white py-16">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-4xl md:text-5xl font-bold mb-6">Create Unique Wallpapers Without AI</h2>
 <p class="text-xl mb-8 max-w-2xl mx-auto">Design custom wallpapers for any device using our visual editor with shapes, gradients, textures and effects.</p>
 <div class="flex justify-center space-x-4">
 <button id="start-editor-btn" class="bg-white text-indigo-700 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition">
 Start Creating
 </button>
 <button class="border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-indigo-700 transition">
 Explore Gallery
 </button>
 </div>
 </div>
 </section>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-12">
 <!-- Editor Section -->
 <section id="editor" class="mb-20">
 <div class="flex justify-between items-center mb-8">
 <h2 class="text-3xl font-bold text-gray-800">Wallpaper Editor</h2>
 <div class="flex space-x-3">
 <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition">
 <i class="fas fa-save mr-2"></i>Save
 </button>
 <button id="export-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
 <i class="fas fa-download mr-2"></i>Export
 </button>
 </div>
 </div>
<div class="flex flex-col lg:flex-row gap-6">
 <!-- Tools Panel -->
 <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-4 h-fit">
 <div class="mb-6">
 <h3 class="font-semibold text-lg mb-3">Device Format</h3>
 <div class="grid grid-cols-3 gap-2">
 <button class="format-btn active-format bg-indigo-100 text-indigo-700 p-2 rounded-lg" data-size="1080x1920">
 <i class="fas fa-mobile-screen text-xl mb-1"></i>
 <span class="text-xs">Phone</span>
 </button>
 <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="1920x1080">
 <i class="fas fa-desktop text-xl mb-1"></i>
 <span class="text-xs">Desktop</span>
 </button>
 <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="2048x2732">
 <i class="fas fa-tablet-screen-button text-xl mb-1"></i>
 <span class="text-xs">Tablet</span>
 </button>
 <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="368x448">
 <i class="fas fa-clock text-xl mb-1"></i>
 <span class="text-xs">Watch</span>
 </button>
 <button class="format-btn bg-gray-100 p-2 rounded-lg" data-size="custom">
 <i class="fas fa-ruler-combined text-xl mb-1"></i>
 <span class="text-xs">Custom</span>
 </button>
 </div>
 </div>
<div class="mb-6">
 <h3 class="font-semibold text-lg mb-3">Background</h3>
 <div class="flex flex-wrap gap-2 mb-3">
 <button class="bg-gradient-to-br from-blue-400 to-purple-500 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
 <button class="bg-gradient-to-br from-pink-500 to-orange-400 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
 <button class="bg-gradient-to-br from-green-400 to-blue-500 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
 <button class="bg-gradient-to-br from-purple-800 to-indigo-800 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
 <button class="bg-gradient-to-br from-yellow-400 to-red-500 w-8 h-8 rounded-full border-2 border-white shadow-sm"></button>
 <button class="bg-gray-200 w-8 h-8 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
 <i class="fas fa-plus text-gray-500 text-xs"></i>
 </button>
 </div>
 <div class="bg-gray-100 p-3 rounded-lg">
 <div class="flex justify-between mb-2">
 <span class="text-sm">Gradient Type</span>
 <select class="text-sm bg-white rounded px-2 py-1">
 <option>Linear</option>
 <option>Radial</option>
 <option>Conic</option>
 </select>
 </div>
 <div class="flex justify-between mb-2">
 <span class="text-sm">Angle</span>
 <input type="range" min="0" max="360" value="135" class="w-24">
 </div>
 <div class="flex justify-between items-center">
 <span class="text-sm">Solid Color</span>
 <input type="color" value="#3b82f6" class="w-6 h-6">
 </div>
 </div>
 </div>
<div class="mb-6">
 <h3 class="font-semibold text-lg mb-3">Add Elements</h3>
 <div class="grid grid-cols-3 gap-2">
 <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="shape">
 <i class="fas fa-square text-xl mb-1"></i>
 <span class="text-xs">Shape</span>
 </button>
 <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="bubble">
 <i class="fas fa-circle text-xl mb-1"></i>
 <span class="text-xs">Bubble</span>
 </button>
 <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="wave">
 <i class="fas fa-wave-square text-xl mb-1"></i>
 <span class="text-xs">Wave</span>
 </button>
 <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="line">
 <i class="fas fa-slash text-xl mb-1"></i>
 <span class="text-xs">Line</span>
 </button>
 <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="pattern">
 <i class="fas fa-border-all text-xl mb-1"></i>
 <span class="text-xs">Pattern</span>
 </button>
 <button class="element-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="3d">
 <i class="fas fa-cube text-xl mb-1"></i>
 <span class="text-xs">3D</span>
 </button>
 </div>
 </div>
<div class="mb-6">
 <h3 class="font-semibold text-lg mb-3">Textures & Effects</h3>
 <div class="grid grid-cols-3 gap-2">
 <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="noise">
 <i class="fas fa-braille text-xl mb-1"></i>
 <span class="text-xs">Noise</span>
 </button>
 <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="paper">
 <i class="fas fa-scroll text-xl mb-1"></i>
 <span class="text-xs">Paper</span>
 </button>
 <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="glass">
 <i class="fas fa-wine-glass-empty text-xl mb-1"></i>
 <span class="text-xs">Glass</span>
 </button>
 <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="blur">
 <i class="fas fa-droplet text-xl mb-1"></i>
 <span class="text-xs">Blur</span>
 </button>
 <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="vignette">
 <i class="fas fa-circle-notch text-xl mb-1"></i>
 <span class="text-xs">Vignette</span>
 </button>
 <button class="texture-btn bg-gray-100 p-3 rounded-lg hover:bg-gray-200 transition" data-type="glow">
 <i class="fas fa-sun text-xl mb-1"></i>
 <span class="text-xs">Glow</span>
 </button>
 </div>
 </div>
 </div>
<!-- Canvas Area -->
 <div class="lg:w-2/4">
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div id="editor-canvas" class="editor-canvas relative mx-auto" style="width: 270px; height: 480px;">
 <!-- Background -->
 <div id="canvas-bg" class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500"></div>
<!-- Elements will be added here -->
 <div id="element-1" class="element-draggable absolute w-32 h-32 rounded-full bg-pink-400 opacity-70 top-20 left-10 transform rotate-12"></div>
 <div id="element-2" class="element-draggable absolute w-40 h-10 bg-white opacity-30 bottom-32 left-5 transform -rotate-6"></div>
 <div id="element-3" class="element-draggable absolute w-16 h-16 rounded-full bg-yellow-300 opacity-50 top-32 right-8"></div>
 </div>
 </div>
 </div>
<!-- Properties Panel -->
 <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-4 h-fit">
 <h3 class="font-semibold text-lg mb-4">Element Properties</h3>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Selected Element</label>
 <div class="bg-gray-100 p-2 rounded-lg">
 <span id="selected-element" class="text-sm">None</span>
 </div>
 </div>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Position</label>
 <div class="grid grid-cols-2 gap-2">
 <div>
 <span class="text-xs">X</span>
 <input type="number" class="w-full p-1 border rounded text-sm" value="0">
 </div>
 <div>
 <span class="text-xs">Y</span>
 <input type="number" class="w-full p-1 border rounded text-sm" value="0">
 </div>
 </div>
 </div>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Size</label>
 <div class="grid grid-cols-2 gap-2">
 <div>
 <span class="text-xs">Width</span>
 <input type="number" class="w-full p-1 border rounded text-sm" value="100">
 </div>
 <div>
 <span class="text-xs">Height</span>
 <input type="number" class="w-full p-1 border rounded text-sm" value="100">
 </div>
 </div>
 </div>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Color</label>
 <input type="color" value="#3b82f6" class="w-full h-8">
 </div>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Opacity</label>
 <input type="range" min="0" max="100" value="100" class="w-full">
 </div>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Rotation</label>
 <input type="range" min="0" max="360" value="0" class="w-full">
 </div>
<div class="mb-4">
 <label class="block text-sm text-gray-600 mb-1">Layer</label>
 <div class="flex justify-between">
 <button class="bg-gray-200 px-2 py-1 rounded text-sm">
 <i class="fas fa-arrow-down"></i> Back
 </button>
 <button class="bg-gray-200 px-2 py-1 rounded text-sm">
 <i class="fas fa-arrow-up"></i> Front
 </button>
 </div>
 </div>
<button class="w-full bg-red-100 text-red-600 py-2 rounded-lg hover:bg-red-200 transition">
 <i class="fas fa-trash mr-2"></i>Delete Element
 </button>
 </div>
 </div>
 </section>
<!-- Gallery Section -->
 <section id="gallery" class="mb-20">
 <div class="flex justify-between items-center mb-8">
 <h2 class="text-3xl font-bold text-gray-800">Community Gallery</h2>
 <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
 <i class="fas fa-plus mr-2"></i>Upload Your Design
 </button>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
 <!-- Gallery Item 1 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-pink-500 to-orange-400 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-24 h-24 rounded-full bg-white opacity-20"></div>
 <div class="w-32 h-8 bg-white opacity-20 absolute bottom-10 left-8 transform -rotate-6"></div>
 </div>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="font-medium">Sunset Vibes</h3>
 <div class="flex items-center text-yellow-400">
 <i class="fas fa-star"></i>
 <span class="text-gray-600 ml-1">4.8</span>
 </div>
 </div>
 <p class="text-sm text-gray-500 mt-1">by @designer123</p>
 <div class="flex justify-between items-center mt-3">
 <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
 <i class="fas fa-heart mr-1"></i> 124
 </button>
 <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
 Remix
 </button>
 </div>
 </div>
 </div>
<!-- Gallery Item 2 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-blue-500 to-teal-400 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-16 h-16 rounded-full bg-white opacity-30 top-12 left-12 absolute"></div>
 <div class="w-16 h-16 rounded-full bg-white opacity-30 bottom-12 right-12 absolute"></div>
 <div class="w-8 h-8 rounded-full bg-white opacity-30 top-8 right-8 absolute"></div>
 </div>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="font-medium">Ocean Breeze</h3>
 <div class="flex items-center text-yellow-400">
 <i class="fas fa-star"></i>
 <span class="text-gray-600 ml-1">4.5</span>
 </div>
 </div>
 <p class="text-sm text-gray-500 mt-1">by @creative_mind</p>
 <div class="flex justify-between items-center mt-3">
 <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
 <i class="fas fa-heart mr-1"></i> 89
 </button>
 <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
 Remix
 </button>
 </div>
 </div>
 </div>
<!-- Gallery Item 3 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-purple-800 to-indigo-800 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-40 h-2 bg-white opacity-20 absolute top-20 left-10 transform rotate-45"></div>
 <div class="w-40 h-2 bg-white opacity-20 absolute top-32 left-10 transform -rotate-45"></div>
 <div class="w-40 h-2 bg-white opacity-20 absolute bottom-20 left-10 transform rotate-45"></div>
 </div>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="font-medium">Midnight Lines</h3>
 <div class="flex items-center text-yellow-400">
 <i class="fas fa-star"></i>
 <span class="text-gray-600 ml-1">4.9</span>
 </div>
 </div>
 <p class="text-sm text-gray-500 mt-1">by @abstract_art</p>
 <div class="flex justify-between items-center mt-3">
 <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
 <i class="fas fa-heart mr-1"></i> 156
 </button>
 <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
 Remix
 </button>
 </div>
 </div>
 </div>
<!-- Gallery Item 4 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-24 h-24 rounded-lg bg-white opacity-20 transform rotate-12"></div>
 <div class="w-16 h-16 rounded-lg bg-white opacity-30 transform -rotate-6 absolute bottom-8 right-8"></div>
 </div>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="font-medium">Fresh Mint</h3>
 <div class="flex items-center text-yellow-400">
 <i class="fas fa-star"></i>
 <span class="text-gray-600 ml-1">4.7</span>
 </div>
 </div>
 <p class="text-sm text-gray-500 mt-1">by @design_explorer</p>
 <div class="flex justify-between items-center mt-3">
 <button class="text-indigo-600 text-sm font-medium hover:text-indigo-800">
 <i class="fas fa-heart mr-1"></i> 102
 </button>
 <button class="bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200">
 Remix
 </button>
 </div>
 </div>
 </div>
 </div>
<div class="text-center mt-8">
 <button class="border-2 border-indigo-600 text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-indigo-50 transition">
 Load More Designs
 </button>
 </div>
 </section>
<!-- Challenges Section -->
 <section id="challenges" class="mb-20">
 <h2 class="text-3xl font-bold text-gray-800 mb-8">Weekly Challenges</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Challenge 1 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="h-48 bg-gradient-to-br from-yellow-400 to-red-500 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-32 h-32 rounded-full bg-white opacity-20"></div>
 <div class="w-40 h-8 bg-white opacity-20 absolute bottom-12 left-10 transform -rotate-6"></div>
 </div>
 <div class="absolute top-4 right-4 bg-white text-orange-500 px-3 py-1 rounded-full text-sm font-bold">
 Active
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-2">Apple Style Wallpapers</h3>
 <p class="text-gray-600 mb-4">Create clean, minimalist wallpapers inspired by Apple's design aesthetic. Focus on subtle gradients and simple shapes.</p>
 <div class="flex justify-between items-center">
 <div class="text-sm text-gray-500">
 <i class="fas fa-users mr-1"></i> 342 participants
 </div>
 <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
 Join Challenge
 </button>
 </div>
 </div>
 </div>
<!-- Challenge 2 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="h-48 bg-gradient-to-br from-gray-800 to-gray-900 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-40 h-2 bg-white opacity-20 absolute top-20 left-10 transform rotate-45"></div>
 <div class="w-40 h-2 bg-white opacity-20 absolute top-32 left-10 transform -rotate-45"></div>
 <div class="w-40 h-2 bg-white opacity-20 absolute bottom-20 left-10 transform rotate-45"></div>
 </div>
 <div class="absolute top-4 right-4 bg-white text-gray-800 px-3 py-1 rounded-full text-sm font-bold">
 Starts Soon
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-2">Minimalism Week</h3>
 <p class="text-gray-600 mb-4">Less is more! Create wallpapers with maximum 3 elements and 2 colors. The most elegant design wins.</p>
 <div class="flex justify-between items-center">
 <div class="text-sm text-gray-500">
 <i class="fas fa-clock mr-1"></i> Starts in 2 days
 </div>
 <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition">
 Notify Me
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Shop Section -->
 <section id="shop" class="mb-20">
 <h2 class="text-3xl font-bold text-gray-800 mb-8">Premium Elements</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <!-- Product 1 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-500 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-24 h-24 rounded-full bg-white opacity-20 transform rotate-45"></div>
 <div class="w-16 h-16 rounded-full bg-white opacity-30 absolute bottom-8 right-8 transform -rotate-12"></div>
 </div>
 <div class="absolute top-4 right-4 bg-yellow-400 text-gray-900 px-2 py-1 rounded text-xs font-bold">
 POPULAR
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-2">3D Shapes Pack</h3>
 <p class="text-gray-600 mb-4">50 premium 3D elements including abstract forms, geometric shapes and modern designs.</p>
 <div class="flex justify-between items-center">
 <div class="text-lg font-bold text-indigo-600">
 $9.99
 </div>
 <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
 Add to Cart
 </button>
 </div>
 </div>
 </div>
<!-- Product 2 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-blue-400 to-teal-400 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-32 h-2 bg-white opacity-20 absolute top-20 left-10 transform rotate-45"></div>
 <div class="w-32 h-2 bg-white opacity-20 absolute top-32 left-10 transform -rotate-45"></div>
 <div class="w-32 h-2 bg-white opacity-20 absolute bottom-20 left-10 transform rotate-45"></div>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-2">Neon Gradients</h3>
 <p class="text-gray-600 mb-4">30 vibrant neon gradient combinations perfect for modern, eye-catching wallpapers.</p>
 <div class="flex justify-between items-center">
 <div class="text-lg font-bold text-indigo-600">
 $6.99
 </div>
 <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
 Add to Cart
 </button>
 </div>
 </div>
 </div>
<!-- Product 3 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
 <div class="h-48 bg-gradient-to-br from-green-500 to-yellow-300 relative">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="w-20 h-20 rounded-lg bg-white opacity-20 transform rotate-12"></div>
 <div class="w-12 h-12 rounded-lg bg-white opacity-30 absolute bottom-8 right-8 transform -rotate-6"></div>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-2">Textures Bundle</h3>
 <p class="text-gray-600 mb-4">Premium textures including paper, glass, metal, liquid and noise effects for professional designs.</p>
 <div class="flex justify-between items-center">
 <div class="text-lg font-bold text-indigo-600">
 $7.99
 </div>
 <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
 Add to Cart
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section class="mb-20">
 <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Why Choose Wallpaper Lab?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Feature 1 -->
 <div class="bg-white p-6 rounded-xl shadow-md text-center">
 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-sliders text-indigo-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Full Control</h3>
 <p class="text-gray-600">Every element is customizable - position, size, color, opacity and more. No AI black box.</p>
 </div>
<!-- Feature 2 -->
 <div class="bg-white p-6 rounded-xl shadow-md text-center">
 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-mobile-screen-button text-indigo-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Any Device</h3>
 <p class="text-gray-600">Create wallpapers for phones, tablets, desktops and even smart watches.</p>
 </div>
<!-- Feature 3 -->
 <div class="bg-white p-6 rounded-xl shadow-md text-center">
 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-users text-indigo-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Creative Community</h3>
 <p class="text-gray-600">Get inspired by others, remix designs, and participate in weekly challenges.</p>
 </div>
 </div>
 </section>
 </main>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-xl font-bold mb-4 flex items-center">
 <i class="fas fa-palette mr-2"></i> Wallpaper Lab
 </h3>
 <p class="text-gray-400">Create unique wallpapers without AI. Design custom backgrounds for any device.</p>
 </div>
<div>
 <h4 class="font-bold mb-4">Explore</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Editor</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Gallery</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Challenges</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Shop</a></li>
 </ul>
 </div>
<div>
 <h4 class="font-bold mb-4">Resources</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Inspiration</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
 </ul>
 </div>
<div>
 <h4 class="font-bold mb-4">Connect</h4>
 <div class="flex space-x-4 mb-4">
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
 <i class="fab fa-discord"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
 <i class="fab fa-pinterest"></i>
 </a>
 </div>
 <p class="text-gray-400">Subscribe to our newsletter</p>
 <div class="flex mt-2">
 <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-3 py-2 rounded-l focus:outline-none w-full">
 <button class="bg-indigo-600 px-4 py-2 rounded-r hover:bg-indigo-700 transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
 <p class="text-gray-400 mb-4 md:mb-0">© 2023 Wallpaper Lab. All rights reserved.</p>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
 <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
 </div>
 </div>
 </div>
 </footer>
<!-- Export Modal -->
 <div id="export-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-xl p-6 w-full max-w-md">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Export Wallpaper</h3>
 <button id="close-export-modal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <label class="block text-sm font-medium mb-2">Format</label>
 <div class="grid grid-cols-3 gap-2">
 <button class="export-format-btn bg-indigo-100 text-indigo-700 py-2 rounded-lg">PNG</button>
 <button class="export-format-btn bg-gray-100 text-gray-700 py-2 rounded-lg">JPG</button>
 <button class="export-format-btn bg-gray-100 text-gray-700 py-2 rounded-lg">WebP</button>
 </div>
 </div>
<div class="mb-6">
 <label class="block text-sm font-medium mb-2">Quality</label>
 <input type="range" min="50" max="100" value="90" class="w-full">
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>Medium</span>
 <span>High</span>
 <span>Best</span>
 </div>
 </div>
<div class="mb-6">
 <label class="block text-sm font-medium mb-2">Resolution</label>
 <select class="w-full border rounded p-2">
 <option>Original (1080x1920)</option>
 <option>High (1440x2560)</option>
 <option>Medium (720x1280)</option>
 <option>Low (540x960)</option>
 </select>
 </div>
<div class="flex space-x-3">
 <button class="flex-1 border-2 border-indigo-600 text-indigo-600 py-2 rounded-lg font-medium hover:bg-indigo-50 transition">
 <i class="fas fa-share-alt mr-2"></i>Share
 </button>
 <button class="flex-1 bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition">
 <i class="fas fa-download mr-2"></i>Download
 </button>
 </div>
 </div>
 </div>
<script>
 // Simple drag functionality for elements
 document.querySelectorAll('.element-draggable').forEach(element => {
 let isDragging = false;
 let offsetX, offsetY;
 element.addEventListener('mousedown', (e) => {
 isDragging = true;
 document.getElementById('selected-element').textContent = element.id;
// Calculate offset
 const rect = element.getBoundingClientRect();
 offsetX = e.clientX - rect.left;
 offsetY = e.clientY - rect.top;
// Highlight selected element
 document.querySelectorAll('.element-draggable').forEach(el => {
 el.classList.remove('ring-2', 'ring-indigo-500');
 });
 element.classList.add('ring-2', 'ring-indigo-500');
 });
 document.addEventListener('mousemove', (e) => {
 if (!isDragging) return;
const container = document.getElementById('editor-canvas');
 const containerRect = container.getBoundingClientRect();
// Calculate new position
 let newX = e.clientX - containerRect.left - offsetX;
 let newY = e.clientY - containerRect.top - offsetY;
// Constrain to container
 newX = Math.max(0, Math.min(newX, containerRect.width - element.offsetWidth));
 newY = Math.max(0, Math.min(newY, containerRect.height - element.offsetHeight));
// Apply new position
 element.style.left = `${newX}px`;
 element.style.top = `${newY}px`;
 });
 document.addEventListener('mouseup', () => {
 isDragging = false;
 });
 });
 // Format buttons
 document.querySelectorAll('.format-btn').forEach(btn => {
 btn.addEventListener('click', () => {
 document.querySelectorAll('.format-btn').forEach(b => {
 b.classList.remove('active-format', 'bg-indigo-100', 'text-indigo-700');
 b.classList.add('bg-gray-100');
 });
btn.classList.add('active-format', 'bg-indigo-100', 'text-indigo-700');
 btn.classList.remove('bg-gray-100');
const size = btn.dataset.size;
 const canvas = document.getElementById('editor-canvas');
if (size === '1080x1920') {
 canvas.style.width = '270px';
 canvas.style.height = '480px';
 } else if (size === '1920x1080') {
 canvas.style.width = '480px';
 canvas.style.height = '270px';
 } else if (size === '2048x2732') {
 canvas.style.width = '300px';
 canvas.style.height = '400px';
 } else if (size === '368x448') {
 canvas.style.width = '184px';
 canvas.style.height = '224px';
 } else if (size === 'custom') {
 const width = prompt('Enter custom width in pixels:', '1080');
 const height = prompt('Enter custom height in pixels:', '1920');
 if (width && height) {
 canvas.style.width = `${Math.min(Number(width)/4, 500)}px`;
 canvas.style.height = `${Math.min(Number(height)/4, 800)}px`;
 }
 }
 });
 });
 // Element buttons
 document.querySelectorAll('.element-btn').forEach(btn => {
 btn.addEventListener('click', () => {
 const type = btn.dataset.type;
 const canvas = document.getElementById('editor-canvas');
 const newElement = document.createElement('div');
 const elementId = `element-${Date.now()}`;
newElement.id = elementId;
 newElement.className = 'element-draggable absolute';
// Set different styles based on element type
 switch(type) {
 case 'shape':
 newElement.className += ' w-24 h-24 bg-indigo-400 opacity-70 rounded-lg';
 newElement.style.left = '50px';
 newElement.style.top = '50px';
 break;
 case 'bubble':
 newElement.className += ' w-20 h-20 bg-pink-400 opacity-60 rounded-full';
 newElement.style.left = '30px';
 newElement.style.top = '30px';
 break;
 case 'wave':
 newElement.className += ' w-40 h-8 bg-blue-300 opacity-50';
 newElement.style.left = '20px';
 newElement.style.top = '100px';
 newElement.style.borderRadius = '50%';
 break;
 case 'line':
 newElement.className += ' w-32 h-1 bg-white opacity-70';
 newElement.style.left = '40px';
 newElement.style.top = '150px';
 break;
 case 'pattern':
 newElement.className += ' w-32 h-32 bg-gray-200 opacity-30';
 newElement.style.left = '80px';
 newElement.style.top = '80px';
 newElement.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%239C92AC\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Ccircle cx=\'13\' cy=\'13\' r=\'3\'/%3E%3C/g%3E%3C/svg%3E")';
 break;
 case '3d':
 newElement.className += ' w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-500 opacity-80';
 newElement.style.left = '60px';
 newElement.style.top = '60px';
 newElement.style.borderRadius = '10px';
 newElement.style.boxShadow = '5px 5px 15px rgba(0,0,0,0.2)';
 break;
 }
canvas.appendChild(newElement);
// Add drag functionality to new element
 let isDragging = false;
 let offsetX, offsetY;
 newElement.addEventListener('mousedown', (e) => {
 isDragging = true;
 document.getElementById('selected-element').textContent = elementId;
// Calculate offset
 const rect = newElement.getBoundingClientRect();
 offsetX = e.clientX - rect.left;
 offsetY = e.clientY - rect.top;
// Highlight selected element
 document.querySelectorAll('.element-draggable').forEach(el => {
 el.classList.remove('ring-2', 'ring-indigo-500');
 });
 newElement.classList.add('ring-2', 'ring-indigo-500');
 });
 document.addEventListener('mousemove', (e) => {
 if (!isDragging) return;
const container = document.getElementById('editor-canvas');
 const containerRect = container.getBoundingClientRect();
// Calculate new position
 let newX = e.clientX - containerRect.left - offsetX;
 let newY = e.clientY - containerRect.top - offsetY;
// Constrain to container
 newX = Math.max(0, Math.min(newX, containerRect.width - newElement.offsetWidth));
 newY = Math.max(0, Math.min(newY, containerRect.height - newElement.offsetHeight));
// Apply new position
 newElement.style.left = `${newX}px`;
 newElement.style.top = `${newY}px`;
 });
 document.addEventListener('mouseup', () => {
 isDragging = false;
 });
 });
 });
 // Export modal
 const exportBtn = document.getElementById('export-btn');
 const exportModal = document.getElementById('export-modal');
 const closeExportModal = document.getElementById('close-export-modal');
 exportBtn.addEventListener('click', () => {
 exportModal.classList.remove('hidden');
 });
 closeExportModal.addEventListener('click', () => {
 exportModal.classList.add('hidden');
 });
 // Export format buttons
 document.querySelectorAll('.export-format-btn').forEach(btn => {
 btn.addEventListener('click', () => {
 document.querySelectorAll('.export-format-btn').forEach(b => {
 b.classList.remove('bg-indigo-100', 'text-indigo-700');
 b.classList.add('bg-gray-100', 'text-gray-700');
 });
btn.classList.add('bg-indigo-100', 'text-indigo-700');
 btn.classList.remove('bg-gray-100', 'text-gray-700');
 });
 });
 // Scroll to editor when clicking start button
 document.getElementById('start-editor-btn').addEventListener('click', () => {
 document.getElementById('editor').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=Kingrane/wallpaper-lab-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>