Spaces:

Diabolov
/

mdl

Running

App Files Files Community

Diabolov commited on May 6, 2025

Commit

60883cd

verified ·

1 Parent(s): b007505

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: mdl
+emoji: 🐳
+colorFrom: red
+colorTo: yellow
 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,257 @@
-<!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>MDLov - Pixel Style Logo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        .pixel-font {
+            font-family: 'Press Start 2P', cursive;
+        }
+        .logo-container {
+            width: 800px;
+            height: 200px;
+            background-color: #000;
+            position: relative;
+            overflow: hidden;
+            border: 8px solid #4a044e;
+            box-shadow: 0 0 20px rgba(186, 14, 72, 0.7);
+        }
+        .pixel {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #ba0e48;
+            opacity: 0;
+            transition: opacity 0.3s, transform 0.3s;
+        }
+        .heart-visualizer {
+            position: relative;
+            width: 60px;
+            height: 60px;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .heart {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background-color: #ba0e48;
+            transform: rotate(45deg);
+            left: 0;
+            top: 0;
+            box-shadow: 0 0 15px rgba(186, 14, 72, 0.8);
+        }
+        .heart:before,
+        .heart:after {
+            content: '';
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background-color: #ba0e48;
+            border-radius: 50%;
+        }
+        .heart:before {
+            top: -30px;
+            left: 0;
+        }
+        .heart:after {
+            top: 0;
+            left: -30px;
+        }
+        .bar {
+            position: absolute;
+            bottom: 0;
+            background-color: #fff;
+            width: 4px;
+            transition: height 0.1s;
+        }
+        .glow {
+            text-shadow: 0 0 10px #ba0e48, 0 0 20px #ba0e48;
+            animation: flicker 2s infinite alternate;
+        }
+        @keyframes flicker {
+            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+                text-shadow: 0 0 10px #ba0e48, 0 0 20px #ba0e48;
+            }
+            20%, 24%, 55% {
+                text-shadow: 0 0 5px #ba0e48, 0 0 10px #ba0e48;
+            }
+        }
+        .scanline {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+            animation: scan 8s linear infinite;
+        }
+        @keyframes scan {
+            0% { top: 0; }
+            100% { top: 100%; }
+        }
+    </style>
+</head>
+<body class="bg-black flex items-center justify-center min-h-screen">
+    <div class="logo-container relative">
+        <!-- Scanline effect -->
+        <div class="scanline"></div>
+        <!-- Pixel particles that will animate -->
+        <div id="particles"></div>
+        <!-- Logo text -->
+        <div class="absolute inset-0 flex items-center justify-center">
+            <div class="text-center">
+                <span class="pixel-font text-6xl text-purple-800">MDL</span>
+                <div class="heart-visualizer inline-block mx-2" id="heartVisualizer">
+                    <div class="heart"></div>
+                    <div id="bars"></div>
+                </div>
+                <span class="pixel-font text-6xl text-purple-800 glow">v</span>
+            </div>
+        </div>
+        <!-- CRT screen effect -->
+        <div class="absolute inset-0 pointer-events-none" style="background:
+            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+            linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+            background-size: 100% 4px, 6px 100%;
+            opacity: 0.7;"></div>
+    </div>
+    <!-- Audio element (hidden) -->
+    <audio id="audioElement" loop>
+        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+    </audio>
+    <script>
+        // Create audio context for visualizer
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        let analyser, dataArray;
+        // Setup audio analyzer
+        function setupAudioAnalyzer() {
+            const audio = document.getElementById('audioElement');
+            const source = audioContext.createMediaElementSource(audio);
+            analyser = audioContext.createAnalyser();
+            analyser.fftSize = 64;
+            source.connect(analyser);
+            analyser.connect(audioContext.destination);
+            dataArray = new Uint8Array(analyser.frequencyBinCount);
+            // Start audio (muted by default to avoid sudden sounds)
+            audio.volume = 0.3;
+            audio.play().catch(e => console.log("Audio play failed:", e));
+        }
+        // Create visualizer bars
+        function createBars() {
+            const barsContainer = document.getElementById('bars');
+            const barCount = 16;
+            for (let i = 0; i < barCount; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                bar.style.left = `${(i * 4) + 2}px`;
+                bar.style.height = '0px';
+                barsContainer.appendChild(bar);
+            }
+        }
+        // Animate visualizer
+        function animateVisualizer() {
+            if (!analyser) return;
+            analyser.getByteFrequencyData(dataArray);
+            const bars = document.querySelectorAll('.bar');
+            bars.forEach((bar, i) => {
+                const index = Math.floor(i * (dataArray.length / bars.length));
+                const value = dataArray[index] / 2;
+                bar.style.height = `${value}px`;
+                bar.style.backgroundColor = `hsl(${value + 300}, 100%, 50%)`;
+            });
+            // Create particles based on audio data
+            createParticles(dataArray);
+            requestAnimationFrame(animateVisualizer);
+        }
+        // Create pixel particles
+        function createParticles(data) {
+            const particlesContainer = document.getElementById('particles');
+            const intensity = data[10] / 255;
+            // Clear old particles
+            particlesContainer.innerHTML = '';
+            // Create new particles
+            const particleCount = Math.floor(intensity * 30);
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'pixel';
+                // Random position around the heart
+                const angle = Math.random() * Math.PI * 2;
+                const distance = 30 + Math.random() * 50;
+                const x = 400 + Math.cos(angle) * distance;
+                const y = 100 + Math.sin(angle) * distance;
+                particle.style.left = `${x}px`;
+                particle.style.top = `${y}px`;
+                particle.style.opacity = Math.random();
+                particle.style.transform = `scale(${0.5 + Math.random()})`;
+                particle.style.transitionDuration = `${0.5 + Math.random() * 2}s`;
+                // Random color variation
+                const colorVar = Math.floor(Math.random() * 30);
+                particle.style.backgroundColor = `rgb(${186 + colorVar}, ${14 + colorVar}, ${72 + colorVar})`;
+                particlesContainer.appendChild(particle);
+                // Animate particle
+                setTimeout(() => {
+                    particle.style.opacity = 0;
+                    particle.style.transform = `translate(${(Math.random() - 0.5) * 100}px, ${(Math.random() - 0.5) * 100}px) scale(0.2)`;
+                }, 10);
+            }
+        }
+        // Initialize everything
+        window.addEventListener('load', () => {
+            setupAudioAnalyzer();
+            createBars();
+            animateVisualizer();
+            // Add click to unmute
+            document.querySelector('.logo-container').addEventListener('click', () => {
+                const audio = document.getElementById('audioElement');
+                audio.volume = 0.3;
+                audio.play().catch(e => console.log("Audio play failed:", e));
+            });
+        });
+    </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=Diabolov/mdl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ the logo is MDLov. in pixel style gives a nostalgic feel to it. the colors are purple black and red wine, 16:4 , the letter "o" in MDLov is a hear, vizualizer style with smooth movements and staic