Hugging Face's logo

Spaces:
Diabolov
/
mdl
Running

App Files Community
mdl / index.html
Diabolov's picture
Diabolov
Add 3 files
60883cd verified
raw
history blame contribute delete
9.59 kB
<!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>