Spaces:

PHhTTPS
/

smashy-counter-smasher

Running

App Files Files Community

PHhTTPS commited on Oct 25

Commit

94e6960

verified ·

1 Parent(s): 1d4b6bd

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smashy Counter Smasher</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
500: '#3b82f6', // blue-500 as fallback
},
secondary: {
500: '#10b981', // emerald-500 as fallback
}
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-white h-screen flex flex-col">
<div class="container mx-auto flex-grow flex flex-col">
<header class="py-4 text-center">
<h1 class="text-4xl font-bold">Smashy Counter</h1>
<div id="counter" class="text-6xl font-bold my-8">0</div>
</header>

<main class="flex-grow flex items-center justify-center">
<button id="smashButton" class="w-4/5 h-2/5 bg-primary-500 hover:bg-primary-600 active:bg-primary-700 rounded-2xl flex flex-col items-center justify-center transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-2xl">
<i data-feather="arrow-down" class="w-32 h-32"></i>
<span class="text-5xl font-bold mt-4">SMASH (-1)</span>
</button>
</main>
</div>

<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html> just the greY OLD designed button

Files changed (5) hide show

README.md +8 -5
components/footer.js +24 -0
index.html +48 -19
script.js +16 -0
style.css +1 -28

README.md CHANGED Viewed

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

 ---
+title: Smashy Counter Smasher 🎯
+colorFrom: gray
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,24 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #111827;
+          color: #9ca3af;
+          padding: 1.5rem;
+          text-align: center;
+          border-top: 1px solid #374151;
+        }
+        .footer-text {
+          font-size: 0.875rem;
+          opacity: 0.8;
+        }
+      </style>
+      <footer>
+        <p class="footer-text">Smash to your heart's content 🎯</p>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

index.html CHANGED Viewed

@@ -1,19 +1,48 @@
-<!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>Smashy Counter Smasher</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6b7280', // gray-500 as fallback
+                        },
+                        secondary: {
+                            500: '#9ca3af', // gray-400 as fallback
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white h-screen flex flex-col">
+    <div class="container mx-auto flex-grow flex flex-col">
+        <header class="py-4 text-center">
+            <h1 class="text-4xl font-bold">Smashy Counter</h1>
+            <div id="counter" class="text-6xl font-bold my-8">0</div>
+        </header>
+        <main class="flex-grow flex items-center justify-center">
+            <button id="smashButton" class="w-4/5 h-2/5 bg-gray-700 hover:bg-gray-600 active:bg-gray-800 rounded-2xl flex flex-col items-center justify-center transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-2xl border-2 border-gray-600">
+                <i data-feather="arrow-down" class="w-32 h-32 text-gray-400"></i>
+                <span class="text-5xl font-bold mt-4 text-gray-300">SMASH (-1)</span>
+            </button>
+        </main>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,16 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const smashButton = document.getElementById('smashButton');
+    const counterElement = document.getElementById('counter');
+    let count = 0;
+    smashButton.addEventListener('click', () => {
+        count--;
+        counterElement.textContent = count;
+        // Add animation effect
+        counterElement.classList.add('animate-pulse');
+        setTimeout(() => {
+            counterElement.classList.remove('animate-pulse');
+        }, 300);
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}


1	+ /* No additional styles needed - using Tailwind for everything */