Spaces:

yuppythaking
/

creations

Running

App Files Files Community

yuppythaking commited on Apr 25, 2025

Commit

2f243ee

verified ·

1 Parent(s): 2f0dd41

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +337 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: creations
+emoji: 🐳
+colorFrom: yellow
+colorTo: red
 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,337 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tazzy The Nail Tech</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>
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        @keyframes drip {
+            0% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(100px);
+                opacity: 0;
+            }
+        }
+        .float {
+            animation: float 4s ease-in-out infinite;
+        }
+        .spin {
+            animation: spin 8s linear infinite;
+        }
+        .drip {
+            position: absolute;
+            animation: drip 2s linear forwards;
+        }
+        .nail-polish {
+            width: 30px;
+            height: 50px;
+            border-radius: 50% 50% 10% 10%;
+            position: absolute;
+        }
+        .nail {
+            width: 20px;
+            height: 30px;
+            background: linear-gradient(to bottom, #FFF5EE, #FFE4E1);
+            border-radius: 50% 50% 0 0;
+            position: absolute;
+            transform: rotate(45deg);
+            box-shadow: 0 0 5px rgba(0,0,0,0.2);
+        }
+        .glitter {
+            position: absolute;
+            width: 3px;
+            height: 3px;
+            background-color: white;
+            border-radius: 50%;
+            opacity: 0.8;
+        }
+        .hand {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+        }
+        .finger {
+            position: absolute;
+            width: 20px;
+            height: 60px;
+            background: #FFD1DC;
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body class="bg-black text-pink-500 min-h-screen overflow-hidden">
+    <div class="absolute inset-0 overflow-hidden">
+        <!-- Background elements -->
+        <div class="absolute top-1/4 left-1/4 w-20 h-20 rounded-full bg-pink-900 opacity-20 blur-xl"></div>
+        <div class="absolute top-1/3 right-1/3 w-32 h-32 rounded-full bg-pink-800 opacity-20 blur-xl"></div>
+        <div class="absolute bottom-1/4 right-1/4 w-24 h-24 rounded-full bg-pink-700 opacity-20 blur-xl"></div>
+        <!-- Glitter particles -->
+        <div id="glitter-container"></div>
+        <!-- Nail polish bottles -->
+        <div class="absolute top-20 left-20 w-16 h-24 bg-gradient-to-b from-pink-500 to-pink-700 rounded-lg float" style="animation-delay: 0.2s;">
+            <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-300 rounded-t-lg"></div>
+        </div>
+        <div class="absolute top-40 right-40 w-16 h-24 bg-gradient-to-b from-black to-pink-900 rounded-lg float" style="animation-delay: 0.5s;">
+            <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-200 rounded-t-lg"></div>
+        </div>
+        <div class="absolute bottom-20 left-40 w-16 h-24 bg-gradient-to-b from-pink-600 to-pink-800 rounded-lg float" style="animation-delay: 0.8s;">
+            <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-100 rounded-t-lg"></div>
+        </div>
+        <div class="absolute bottom-40 right-20 w-16 h-24 bg-gradient-to-b from-pink-700 to-pink-900 rounded-lg float" style="animation-delay: 1.1s;">
+            <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-300 rounded-t-lg"></div>
+        </div>
+        <!-- Nail polish drips -->
+        <div id="drip-container"></div>
+        <!-- Nails -->
+        <div id="nail-container"></div>
+        <!-- Hands with nails -->
+        <div class="hand top-1/4 left-1/3 transform -rotate-12">
+            <div class="finger top-0 left-0"></div>
+            <div class="finger top-0 left-8"></div>
+            <div class="finger top-0 left-16"></div>
+            <div class="finger top-0 left-24"></div>
+            <div class="finger top-0 left-32"></div>
+        </div>
+        <div class="hand bottom-1/4 right-1/3 transform rotate-12">
+            <div class="finger top-0 left-0"></div>
+            <div class="finger top-0 left-8"></div>
+            <div class="finger top-0 left-16"></div>
+            <div class="finger top-0 left-24"></div>
+            <div class="finger top-0 left-32"></div>
+        </div>
+    </div>
+    <div class="relative z-10 min-h-screen flex flex-col items-center justify-center p-8">
+        <h1 class="text-6xl md:text-8xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-pink-600">
+            Tazzy The Nail Tech
+        </h1>
+        <p class="text-xl md:text-2xl text-pink-300 mb-8 max-w-2xl text-center">
+            Creating stunning nail art that makes you feel fabulous!
+        </p>
+        <div class="flex space-x-6">
+            <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
+                Book Now
+            </button>
+            <button class="bg-transparent border-2 border-pink-600 hover:bg-pink-900 text-pink-300 font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
+                Gallery
+            </button>
+        </div>
+        <div class="mt-12 flex space-x-4">
+            <a href="#" class="text-pink-400 hover:text-pink-300 text-2xl">
+                <i class="fab fa-instagram"></i>
+            </a>
+            <a href="#" class="text-pink-400 hover:text-pink-300 text-2xl">
+                <i class="fab fa-tiktok"></i>
+            </a>
+            <a href="#" class="text-pink-400 hover:text-pink-300 text-2xl">
+                <i class="fab fa-facebook"></i>
+            </a>
+        </div>
+    </div>
+    <script>
+        // Create glitter particles
+        function createGlitter() {
+            const container = document.getElementById('glitter-container');
+            const glitter = document.createElement('div');
+            glitter.className = 'glitter';
+            // Random position
+            const x = Math.random() * window.innerWidth;
+            const y = Math.random() * window.innerHeight;
+            // Random size
+            const size = Math.random() * 4 + 1;
+            glitter.style.left = `${x}px`;
+            glitter.style.top = `${y}px`;
+            glitter.style.width = `${size}px`;
+            glitter.style.height = `${size}px`;
+            glitter.style.opacity = Math.random() * 0.8 + 0.2;
+            // Random animation
+            glitter.style.animation = `float ${Math.random() * 3 + 2}s ease-in-out infinite`;
+            glitter.style.animationDelay = `${Math.random() * 2}s`;
+            container.appendChild(glitter);
+            // Remove after animation
+            setTimeout(() => {
+                glitter.remove();
+            }, 5000);
+        }
+        // Create nail polish drips
+        function createDrip() {
+            const container = document.getElementById('drip-container');
+            const drip = document.createElement('div');
+            drip.className = 'drip';
+            // Random position at top
+            const x = Math.random() * window.innerWidth;
+            // Random color
+            const colors = ['#FF69B4', '#FF1493', '#DB7093', '#C71585', '#FFC0CB'];
+            const color = colors[Math.floor(Math.random() * colors.length)];
+            // Random width
+            const width = Math.random() * 10 + 5;
+            drip.style.left = `${x}px`;
+            drip.style.top = '-20px';
+            drip.style.width = `${width}px`;
+            drip.style.height = `${Math.random() * 30 + 20}px`;
+            drip.style.backgroundColor = color;
+            drip.style.borderRadius = '0 0 10px 10px';
+            container.appendChild(drip);
+            // Remove after animation
+            setTimeout(() => {
+                drip.remove();
+            }, 2000);
+        }
+        // Create floating nails
+        function createNail() {
+            const container = document.getElementById('nail-container');
+            const nail = document.createElement('div');
+            nail.className = 'nail float';
+            // Random position
+            const x = Math.random() * window.innerWidth;
+            const y = Math.random() * window.innerHeight;
+            // Random rotation
+            const rotation = Math.random() * 360;
+            // Random color
+            const colors = ['#FF69B4', '#FF1493', '#DB7093', '#C71585', '#FFC0CB', '#000000'];
+            const color = colors[Math.floor(Math.random() * colors.length)];
+            nail.style.left = `${x}px`;
+            nail.style.top = `${y}px`;
+            nail.style.transform = `rotate(${rotation}deg)`;
+            // Create polish on nail
+            const polish = document.createElement('div');
+            polish.className = 'absolute inset-0 rounded-t-full';
+            polish.style.backgroundColor = color;
+            polish.style.opacity = '0.8';
+            // Add some french tip style
+            if (Math.random() > 0.5) {
+                const tip = document.createElement('div');
+                tip.className = 'absolute bottom-0 left-0 right-0 h-1/4 rounded-t-full';
+                tip.style.backgroundColor = 'white';
+                polish.appendChild(tip);
+            }
+            nail.appendChild(polish);
+            container.appendChild(nail);
+            // Remove after some time
+            setTimeout(() => {
+                nail.remove();
+            }, 10000);
+        }
+        // Initialize animations
+        function initAnimations() {
+            // Create initial elements
+            for (let i = 0; i < 50; i++) {
+                createGlitter();
+                if (i % 5 === 0) createNail();
+            }
+            // Set intervals for continuous creation
+            setInterval(createGlitter, 300);
+            setInterval(createDrip, 500);
+            setInterval(createNail, 2000);
+            // Add some polish to the hands
+            setTimeout(() => {
+                const hands = document.querySelectorAll('.hand');
+                hands.forEach(hand => {
+                    const fingers = hand.querySelectorAll('.finger');
+                    fingers.forEach(finger => {
+                        const polish = document.createElement('div');
+                        polish.className = 'absolute top-0 left-0 right-0 h-full rounded-t-full';
+                        // Random polish style
+                        if (Math.random() > 0.7) {
+                            // Gradient polish
+                            polish.style.background = `linear-gradient(to bottom, ${['#FF69B4', '#FF1493', '#DB7093'][Math.floor(Math.random() * 3)]}, ${['#000000', '#C71585', '#FFC0CB'][Math.floor(Math.random() * 3)]})`;
+                        } else if (Math.random() > 0.5) {
+                            // Solid color with french tip
+                            polish.style.backgroundColor = ['#FF69B4', '#FF1493', '#DB7093', '#C71585', '#FFC0CB'][Math.floor(Math.random() * 5)];
+                            const tip = document.createElement('div');
+                            tip.className = 'absolute bottom-0 left-0 right-0 h-1/4 rounded-t-full';
+                            tip.style.backgroundColor = 'white';
+                            polish.appendChild(tip);
+                        } else {
+                            // Glitter polish
+                            polish.style.backgroundColor = ['#FF69B4', '#FF1493', '#DB7093'][Math.floor(Math.random() * 3)];
+                            for (let i = 0; i < 5; i++) {
+                                const glitter = document.createElement('div');
+                                glitter.className = 'absolute w-1 h-1 rounded-full bg-white';
+                                glitter.style.left = `${Math.random() * 100}%`;
+                                glitter.style.top = `${Math.random() * 100}%`;
+                                polish.appendChild(glitter);
+                            }
+                        }
+                        finger.appendChild(polish);
+                    });
+                });
+            }, 1000);
+        }
+        // Start animations when page loads
+        window.addEventListener('load', initAnimations);
+    </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=yuppythaking/creations" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ create a stylized pink and black webpage with the word "Tazzy The Nail Tech" can we give it nails and polish animated on the screen