Spaces:

widson
/

shoes509

Running

App Files Files Community

widson commited on May 20

Commit

b9d2d98

verified ·

1 Parent(s): 76e5462

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +186 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Shoes509
-emoji: 👁
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: shoes509
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,186 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Explora Nuestras Colecciones de Tenis</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>
+        .sneaker-3d {
+            transform-style: preserve-3d;
+            transition: transform 0.5s ease;
+        }
+        .collection-card {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .collection-card:hover {
+            transform: translateY(-8px) rotateX(5deg);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .collection-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .collection-card:hover::before {
+            opacity: 1;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotateY(0deg); }
+            50% { transform: translateY(-20px) rotateY(10deg); }
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-r from-white to-green-100 min-h-screen">
+    <div class="container mx-auto px-4 py-16">
+        <div class="text-center mb-16">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500">
+                Explora Nuestras Colecciones
+            </h1>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                Descubre los tenis más exclusivos para cada estilo de vida
+            </p>
+        </div>
+        <!-- 3D Sneaker -->
+        <div class="flex justify-center mb-16">
+            <div class="sneaker-3d relative w-64 h-64 floating cursor-pointer" id="sneaker3d">
+                <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/skwgyqrbfzhu6uyeh0gg/air-force-1-07-mens-shoes-jBrhbr.png"
+                     alt="Nike Air Force 1"
+                     class="w-full h-full object-contain"
+                     id="sneakerImage">
+                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white opacity-20"></div>
+            </div>
+        </div>
+        <!-- Collections Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
+            <div class="collection-card bg-white rounded-xl shadow-md p-6 relative overflow-hidden"
+                 data-sneaker="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/skwgyqrbfzhu6uyeh0gg/air-force-1-07-mens-shoes-jBrhbr.png">
+                <div class="flex items-center mb-4">
+                    <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white mr-4">
+                        <i class="fas fa-child text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Niños 👦</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Zapatos modernos y cómodos para los más pequeños.</p>
+                <button class="text-sm font-medium text-black hover:text-blue-600 transition-colors flex items-center">
+                    Ver colección <i class="fas fa-chevron-right ml-1 text-xs"></i>
+                </button>
+            </div>
+            <div class="collection-card bg-white rounded-xl shadow-md p-6 relative overflow-hidden"
+                 data-sneaker="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af73b01e-8a3b-4a9a-bd7b-48b27a7bdad6/air-jordan-1-mid-se-mens-shoes-5Mp0F1.png">
+                <div class="flex items-center mb-4">
+                    <div class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-red-500 flex items-center justify-center text-white mr-4">
+                        <i class="fas fa-female text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Mujeres 👩</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Estilo y elegancia para cada paso.</p>
+                <button class="text-sm font-medium text-black hover:text-blue-600 transition-colors flex items-center">
+                    Ver colección <i class="fas fa-chevron-right ml-1 text-xs"></i>
+                </button>
+            </div>
+            <div class="collection-card bg-white rounded-xl shadow-md p-6 relative overflow-hidden"
+                 data-sneaker="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/7c9d01c6-2d8e-4c1e-97e3-3055cc0c3a4e/air-jordan-1-retro-high-og-mens-shoes-Pz6fZ9.png">
+                <div class="flex items-center mb-4">
+                    <div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-blue-500 flex items-center justify-center text-white mr-4">
+                        <i class="fas fa-male text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Hombres 👨</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Tenis originales y resistentes para cada día.</p>
+                <button class="text-sm font-medium text-black hover:text-blue-600 transition-colors flex items-center">
+                    Ver colección <i class="fas fa-chevron-right ml-1 text-xs"></i>
+                </button>
+            </div>
+            <div class="collection-card bg-white rounded-xl shadow-md p-6 relative overflow-hidden"
+                 data-sneaker="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/0a7f8b5a-2a0b-4a5e-9b5c-5c5e5d9b5b5b/air-max-270-womens-shoes-PgZVZl.png">
+                <div class="flex items-center mb-4">
+                    <div class="w-12 h-12 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center text-white mr-4">
+                        <i class="fas fa-heels text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Mujeres Adultas 👠</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Comodidad con clase para mujeres activas.</p>
+                <button class="text-sm font-medium text-black hover:text-blue-600 transition-colors flex items-center">
+                    Ver colección <i class="fas fa-chevron-right ml-1 text-xs"></i>
+                </button>
+            </div>
+        </div>
+        <div class="text-center">
+            <button class="explore-btn px-8 py-3 bg-black text-white font-bold rounded-full transition-all duration-300 hover:bg-gray-800 hover:shadow-lg group">
+                <span class="group-hover:mr-2 transition-all">Explorar Todo</span>
+                <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
+            </button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const sneaker3d = document.getElementById('sneaker3d');
+            const sneakerImage = document.getElementById('sneakerImage');
+            const collectionCards = document.querySelectorAll('.collection-card');
+            // 3D rotation effect on mouse move
+            sneaker3d.addEventListener('mousemove', (e) => {
+                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+                sneaker3d.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+            });
+            // Reset rotation when mouse leaves
+            sneaker3d.addEventListener('mouseleave', () => {
+                sneaker3d.style.transform = 'rotateY(0deg) rotateX(0deg)';
+            });
+            // Change sneaker image when hovering collection cards
+            collectionCards.forEach(card => {
+                card.addEventListener('mouseenter', () => {
+                    const newImage = card.getAttribute('data-sneaker');
+                    sneakerImage.src = newImage;
+                    // Add bounce effect
+                    sneaker3d.style.animation = 'none';
+                    sneaker3d.offsetHeight; // Trigger reflow
+                    sneaker3d.style.animation = 'float 6s ease-in-out infinite';
+                });
+                // Click effect for collection cards
+                card.addEventListener('click', function() {
+                    this.style.transform = 'scale(0.95)';
+                    setTimeout(() => {
+                        this.style.transform = 'translateY(-8px) rotateX(5deg)';
+                        alert(`Redirigiendo a la colección: ${this.querySelector('h3').textContent}`);
+                    }, 200);
+                });
+            });
+            // Explore button effect
+            const exploreBtn = document.querySelector('.explore-btn');
+            exploreBtn.addEventListener('click', function() {
+                this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Cargando...';
+                setTimeout(() => {
+                    alert('Redirigiendo a todas las colecciones!');
+                    this.innerHTML = '<span class="group-hover:mr-2 transition-all">Explorar Todo</span><i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>';
+                }, 1500);
+            });
+        });
+    </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=widson/shoes509" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ <section style="background-color: #fff; color: #000; padding: 60px 20px; font-family: Arial, sans-serif; text-align: center;"> <h2 style="font-size: 32px; font-weight: bold; margin-bottom: 40px;">🔥 Productos Populares</h2> <p style="font-size: 16px; margin-bottom: 40px;"> Descubre los productos más vendidos y con mayor demanda en el mercado actual. <br> Todos verificados y garantizados. </p> <div style="max-width: 800px; margin: 0 auto; text-align: left;"> <ul style="list-style: none; padding: 0; font-size: 18px; line-height: 2;"> <li><strong>🖤 Air Jordan 1 Retro High OG</strong> — El ícono del streetwear. Siempre en tendencia.</li> <li><strong>🖤 Yeezy Boost 350 V2</strong> — Comodidad futurista con estilo inconfundible.</li> <li><strong>🖤 Apple AirPods Pro</strong> — Audio de alta calidad con cancelación de ruido activa.</li> <li><strong>🖤 Supreme Box Logo Tee</strong> — El clásico urbano. Limitado y codiciado.</li> <li><strong>🖤 Rolex Submariner</strong> — Lujo atemporal. Una pieza de inversión.</li> <li><strong>🖤 Pokémon Booster Packs</strong> — Coleccionables sellados. Valor que crece con el tiempo.</li> </ul> </div> <a href="#" style="display: inline-block; margin-top: 40px; padding: 12px 24px; border: 2px solid #000; color: #000; text-decoration: none; font-weight: bold; transition: 0.3s;"> 👉 Explorar Todo </a> </section>
2	+ <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Banner Tenis 3D</title> <style> body { margin: 0; font-family: 'Arial', sans-serif; background: linear-gradient(to right, #ffffff, #c2f0c2); /* Blan ak vèt / } .banner { padding: 60px 20px; text-align: center; color: #000; } .titulo { font-size: 36px; font-weight: bold; margin-bottom: 20px; } .sneaker { width: 200px; height: 200px; margin: 0 auto 30px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/9e/3D_Sneaker_Render.png'); / Chanje si ou gen pwòp imaj */ background-size: cover; animation: rotateSneaker 6s linear infinite; } @keyframes rotateSneaker { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .colecciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; } .coleccion { border: 2px solid #000; padding: 20px; width: 220px; border-radius: 12px; background-color: #fff; transition: transform 0.3s; } .coleccion:hover { transform: scale(1.05); } .coleccion h3 { margin-top: 0; } </style> </head> <body> <div class="banner"> <div class="titulo">Explora nuestras colecciones</div> <div class="sneaker"></div> <div class="colecciones"> <div class="coleccion"> <h3>Niños 👦</h3> <p>Zapatos modernos y cómodos para los más pequeños.</p> </div> <div class="coleccion"> <h3>Mujeres 👩</h3> <p>Estilo y elegancia para cada paso.</p> </div> <div class="coleccion"> <h3>Hombres 👨</h3> <p>Tenis originales y resistentes para cada día.</p> </div> <div class="coleccion"> <h3>Mujeres Adultas 👠</h3> <p>Comodidad con clase para mujeres activas.</p> </div> </div> </div> </body> </html>