Spaces:

BlackMonsterMedia
/

beat-the-game-digital-hub

Running

App Files Files Community

BlackMonsterMedia commited on 27 days ago

Commit

3fbafd8

verified ·

1 Parent(s): 2b48ff2

Create a black background page com as palavras beatdagame a grande no centro e à volta palavras mais pequenas, como se fosse um infográfico que digam: Website, email, SEO, Social Media, Advertising, Outros.

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +63 -19
script.js +64 -0
style.css +112 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Beat The Game Digital Hub
-emoji: 📈
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Beat The Game Digital Hub
+colorFrom: yellow
+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).

index.html CHANGED Viewed

@@ -1,19 +1,63 @@
-<!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>Beat The Game Digital Hub</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-black min-h-screen flex items-center justify-center overflow-hidden">
+    <div class="relative w-full h-screen">
+        <!-- Main Center Word -->
+        <div class="absolute inset-0 flex items-center justify-center z-10">
+            <h1 class="text-white text-7xl md:text-9xl font-bold tracking-tighter animate-pulse">BEATDAGAME</h1>
+        </div>
+        <!-- Circular Navigation Buttons -->
+        <div class="orbit-container absolute inset-0">
+            <a href="#" class="orbit-btn website" data-tooltip="Website">
+                <span>Website</span>
+                <i data-feather="globe" class="hidden md:block"></i>
+            </a>
+            <a href="#" class="orbit-btn email" data-tooltip="Email">
+                <span>Email</span>
+                <i data-feather="mail" class="hidden md:block"></i>
+            </a>
+            <a href="#" class="orbit-btn seo" data-tooltip="SEO">
+                <span>SEO</span>
+                <i data-feather="search" class="hidden md:block"></i>
+            </a>
+            <a href="#" class="orbit-btn social" data-tooltip="Social Media">
+                <span>Social Media</span>
+                <i data-feather="share-2" class="hidden md:block"></i>
+            </a>
+            <a href="#" class="orbit-btn advertising" data-tooltip="Advertising">
+                <span>Advertising</span>
+                <i data-feather="dollar-sign" class="hidden md:block"></i>
+            </a>
+            <a href="#" class="orbit-btn outros" data-tooltip="Outros">
+                <span>Outros</span>
+                <i data-feather="more-horizontal" class="hidden md:block"></i>
+            </a>
+        </div>
+        <!-- Animated Background Elements -->
+        <div class="absolute inset-0 overflow-hidden">
+            <div class="particle"></div>
+            <div class="particle"></div>
+            <div class="particle"></div>
+            <div class="particle"></div>
+            <div class="particle"></div>
+        </div>
+    </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,64 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Create particles
+    const particlesContainer = document.querySelector('.absolute.inset-0.overflow-hidden');
+    const particleCount = 20;
+    for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('particle');
+        // Random properties
+        const size = Math.random() * 5 + 1;
+        const posX = Math.random() * window.innerWidth;
+        const posY = Math.random() * window.innerHeight;
+        const duration = Math.random() * 20 + 10;
+        const delay = Math.random() * 5;
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+        particle.style.left = `${posX}px`;
+        particle.style.top = `${posY}px`;
+        particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
+        particlesContainer.appendChild(particle);
+    }
+    // Add floating animation to particles
+    const style = document.createElement('style');
+    style.innerHTML = `
+        @keyframes float {
+            0% {
+                transform: translateY(0) translateX(0);
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                transform: translateY(-100vh) translateX(20px);
+                opacity: 0;
+            }
+        }
+    `;
+    document.head.appendChild(style);
+    // Button hover effects
+    const buttons = document.querySelectorAll('.orbit-btn');
+    buttons.forEach(button => {
+        button.addEventListener('mouseenter', () => {
+            const tooltip = button.getAttribute('data-tooltip');
+            if (tooltip) {
+                const tooltipEl = document.createElement('div');
+                tooltipEl.className = 'tooltip';
+                tooltipEl.textContent = tooltip;
+                button.appendChild(tooltipEl);
+                setTimeout(() => {
+                    if (button.contains(tooltipEl)) {
+                        button.removeChild(tooltipEl);
+                    }
+                }, 2000);
+            }
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,122 @@
 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;
 }

+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
 body {
+    font-family: 'Orbitron', sans-serif;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+.orbit-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    animation: rotate 60s linear infinite;
+}
+.orbit-btn {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+}
+.orbit-btn:hover {
+    background: rgba(0, 255, 255, 0.2);
+    transform: scale(1.2);
+    box-shadow: 0 0 25px cyan;
+}
+.orbit-btn span {
+    display: block;
+    margin-bottom: 5px;
+}
+/* Position the buttons in a circle */
+.website {
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.email {
+    top: 30%;
+    right: 10%;
+}
+.seo {
+    bottom: 30%;
+    right: 10%;
 }
+.social {
+    bottom: 10%;
+    left: 50%;
+    transform: translateX(-50%);
 }
+.advertising {
+    bottom: 30%;
+    left: 10%;
 }
+.outros {
+    top: 30%;
+    left: 10%;
 }
+/* Particles animation */
+.particle {
+    position: absolute;
+    background: rgba(0, 255, 255, 0.5);
+    border-radius: 50%;
+    pointer-events: none;
 }
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 4rem !important;
+    }
+    .orbit-btn {
+        width: 60px;
+        height: 60px;
+        font-size: 0.6rem;
+    }
+}
+@media (max-width: 480px) {
+    h1 {
+        font-size: 3rem !important;
+    }
+    .orbit-btn {
+        width: 50px;
+        height: 50px;
+        font-size: 0.5rem;
+    }
+}