Spaces:

ahmetacer5
/

test

Running

App Files Files Community

Silent Control commited on Jul 11, 2025

Commit

70ef20e

verified ·

1 Parent(s): 2955eef

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +167 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 📊
-colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: purple
+colorTo: green
 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,167 @@
-<!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>Lucky Discount Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <style>
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #f00;
+            opacity: 0;
+        }
+        .discount-display {
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #a18cd1);
+            background-size: 300% 300%;
+            animation: gradientBG 3s ease infinite;
+        }
+        @keyframes gradientBG {
+            0% { background-position: 0% 50% }
+            50% { background-position: 100% 50% }
+            100% { background-position: 0% 50% }
+        }
+        .btn-spin {
+            transition: all 0.3s ease;
+        }
+        .btn-spin:hover {
+            transform: scale(1.05) rotate(5deg);
+        }
+        .btn-spin:active {
+            transform: scale(0.95) rotate(-5deg);
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-yellow-100 to-pink-100 flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-white rounded-3xl overflow-hidden shadow-2xl">
+        <div class="bg-pink-500 p-6 text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-white animate__animated animate__bounceIn">🎉 Lucky Discount 🎉</h1>
+            <p class="text-white mt-2">Find out how much you'll save today!</p>
+        </div>
+        <div class="p-8 text-center relative overflow-hidden">
+            <div id="confetti-container" class="absolute inset-0 pointer-events-none"></div>
+            <div class="discount-display rounded-full mx-auto w-48 h-48 flex items-center justify-center mb-8 animate__animated">
+                <p id="discount-percent" class="text-5xl font-extrabold text-white">?</p>
+            </div>
+            <button id="spin-btn" class="btn-spin bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-4 px-8 rounded-full text-xl shadow-lg hover:shadow-xl transform transition-all">
+                SPIN FOR DISCOUNT!
+            </button>
+            <div id="result-message" class="mt-6 text-lg font-medium text-gray-700 h-8"></div>
+            <div class="mt-8 bg-gray-100 p-4 rounded-lg">
+                <p class="text-sm text-gray-600">✨ Today's special: All discounts are between 15% - 25%!</p>
+                <p class="text-xs mt-1 text-gray-500">(But we think you deserve the maximum!)</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const discountPercent = document.getElementById('discount-percent');
+        const spinBtn = document.getElementById('spin-btn');
+        const resultMessage = document.getElementById('result-message');
+        const confettiContainer = document.getElementById('confetti-container');
+        spinBtn.addEventListener('click', generateDiscount);
+        function generateDiscount() {
+            // Disable button during animation
+            spinBtn.disabled = true;
+            spinBtn.classList.add('opacity-70');
+            // Reset display
+            discountPercent.textContent = '?';
+            resultMessage.textContent = '';
+            document.querySelector('.discount-display').classList.remove('animate__tada');
+            // Animation of spinning numbers
+            let counter = 0;
+            const spinInterval = setInterval(() => {
+                const randomNum = Math.floor(Math.random() * 11) + 15; // 15-25
+                discountPercent.textContent = randomNum + '%';
+                counter++;
+                if (counter > 15) {
+                    clearInterval(spinInterval);
+                    finalizeDiscount();
+                }
+            }, 100);
+        }
+        function finalizeDiscount() {
+            // Get final random discount between 15-25%
+            const finalDiscount = Math.floor(Math.random() * 11) + 10;
+            discountPercent.textContent = finalDiscount + '%';
+            // Add celebration effects
+            document.querySelector('.discount-display').classList.add('animate__tada');
+            createConfetti();
+            // Set funny message based on discount
+            let message = '';
+            if (finalDiscount >= 23) {
+                message = "Wow! You're our favorite customer! 🤩";
+            } else if (finalDiscount >= 20) {
+                message = "Great deal! You're lucky today! 😃";
+            } else {
+                message = "Not bad! We know you wanted more... 😉";
+            }
+            resultMessage.textContent = message;
+            // Re-enable button
+            setTimeout(() => {
+                spinBtn.disabled = false;
+                spinBtn.classList.remove('opacity-70');
+            }, 1500);
+        }
+        function createConfetti() {
+            // Clear previous confetti
+            confettiContainer.innerHTML = '';
+            // Create new confetti
+            for (let i = 0; i < 50; i++) {
+                const confetti = document.createElement('div');
+                confetti.classList.add('confetti');
+                // Random properties
+                const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+                const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                const randomSize = Math.random() * 10 + 5;
+                const randomLeft = Math.random() * 100;
+                const randomTop = -10;
+                const randomRotation = Math.random() * 360;
+                confetti.style.backgroundColor = randomColor;
+                confetti.style.width = `${randomSize}px`;
+                confetti.style.height = `${randomSize}px`;
+                confetti.style.left = `${randomLeft}%`;
+                confetti.style.top = `${randomTop}px`;
+                confetti.style.transform = `rotate(${randomRotation}deg)`;
+                confetti.style.opacity = '1';
+                // Animation
+                const animationDuration = Math.random() * 3 + 2;
+                confetti.style.transition = `top ${animationDuration}s linear, opacity ${animationDuration}s ease-in`;
+                confettiContainer.appendChild(confetti);
+                // Animate
+                setTimeout(() => {
+                    confetti.style.top = '110%';
+                    confetti.style.opacity = '0';
+                }, 10);
+            }
+        }
+    </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=silentcontrol/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>