Spaces:

porkz
/

holobox

Running

App Files Files Community

porkz commited on Apr 11

Commit

ffe510b

verified ·

1 Parent(s): 1e8262c

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +421 -19

README.md CHANGED Viewed

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

 ---
+title: holobox
+emoji: 🐳
 colorFrom: green
+colorTo: blue
 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,421 @@
-<!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>HOLOBOX - 8-bit Chiptune Jukebox</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tonejs/[email protected]/build/Midi.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        body {
+            background-color: #0a0a1a;
+            font-family: 'Press Start 2P', cursive;
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .holobox {
+            position: relative;
+            width: 400px;
+            height: 500px;
+            background-color: #111;
+            border-radius: 10px;
+            box-shadow:
+                0 0 10px #0ff,
+                0 0 20px #0ff,
+                0 0 30px #0ff,
+                inset 0 0 10px rgba(0, 255, 255, 0.5);
+            padding: 20px;
+            border: 4px solid #333;
+        }
+        .screen {
+            width: 100%;
+            height: 250px;
+            background-color: #000;
+            border: 4px solid #333;
+            margin-bottom: 20px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.3);
+        }
+        .pixel-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .title {
+            color: #0ff;
+            text-align: center;
+            font-size: 24px;
+            margin-bottom: 10px;
+            text-shadow: 0 0 5px #0ff;
+            letter-spacing: 2px;
+        }
+        .buttons {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 30px;
+        }
+        .btn {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background-color: #222;
+            border: 4px solid #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            position: relative;
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+        }
+        .btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px #0ff;
+        }
+        .btn.active {
+            box-shadow: 0 0 20px #0ff, 0 0 30px #0ff;
+            background-color: #0ff;
+        }
+        .btn i {
+            font-size: 30px;
+            color: #0ff;
+        }
+        .btn.active i {
+            color: #000;
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: -5px;
+            left: -5px;
+            right: -5px;
+            bottom: -5px;
+            border-radius: 50%;
+            border: 2px solid #0ff;
+            opacity: 0;
+            transition: all 0.3s;
+        }
+        .btn:hover::before {
+            opacity: 1;
+        }
+        .btn.active::before {
+            opacity: 1;
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                opacity: 0.7;
+            }
+            70% {
+                transform: scale(1.3);
+                opacity: 0;
+            }
+            100% {
+                transform: scale(1);
+                opacity: 0;
+            }
+        }
+        .display {
+            background-color: #111;
+            color: #0ff;
+            padding: 10px;
+            border: 2px solid #333;
+            margin-top: 20px;
+            font-size: 12px;
+            text-align: center;
+            min-height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-shadow: 0 0 5px #0ff;
+            box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2);
+        }
+        .pixel {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #0ff;
+            opacity: 0;
+        }
+        .equalizer {
+            position: absolute;
+            bottom: 10px;
+            left: 0;
+            width: 100%;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            gap: 5px;
+        }
+        .bar {
+            width: 10px;
+            background-color: #0ff;
+            border-radius: 2px;
+            transition: height 0.1s;
+            box-shadow: 0 0 5px #0ff;
+        }
+        .scanlines {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                rgba(0, 0, 0, 0) 50%,
+                rgba(0, 255, 255, 0.1) 50%
+            );
+            background-size: 100% 4px;
+            pointer-events: none;
+        }
+        .glitch {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="1" fill="%230ff" opacity="0.1"/></svg>');
+            animation: glitch 5s infinite;
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        @keyframes glitch {
+            0%, 100% { transform: translate(0); }
+            20% { transform: translate(-2px, 2px); }
+            40% { transform: translate(-2px, -2px); }
+            60% { transform: translate(2px, 2px); }
+            80% { transform: translate(2px, -2px); }
+        }
+        .corner {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            border-color: #0ff;
+            border-style: solid;
+            border-width: 0;
+            opacity: 0.7;
+        }
+        .corner-tl {
+            top: 10px;
+            left: 10px;
+            border-top-width: 3px;
+            border-left-width: 3px;
+        }
+        .corner-tr {
+            top: 10px;
+            right: 10px;
+            border-top-width: 3px;
+            border-right-width: 3px;
+        }
+        .corner-bl {
+            bottom: 10px;
+            left: 10px;
+            border-bottom-width: 3px;
+            border-left-width: 3px;
+        }
+        .corner-br {
+            bottom: 10px;
+            right: 10px;
+            border-bottom-width: 3px;
+            border-right-width: 3px;
+        }
+    </style>
+</head>
+<body>
+    <div class="holobox">
+        <div class="corner corner-tl"></div>
+        <div class="corner corner-tr"></div>
+        <div class="corner corner-bl"></div>
+        <div class="corner corner-br"></div>
+        <div class="title">HOLOBOX</div>
+        <div class="screen">
+            <div class="pixel-grid"></div>
+            <div class="glitch"></div>
+            <div class="scanlines"></div>
+            <div class="equalizer" id="equalizer"></div>
+        </div>
+        <div class="display" id="display">READY</div>
+        <div class="buttons">
+            <div class="btn" id="btn1" data-song="1">
+                <i class="fas fa-space-shuttle"></i>
+            </div>
+            <div class="btn" id="btn2" data-song="2">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="btn" id="btn3" data-song="3">
+                <i class="fas fa-gamepad"></i>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Tone.js
+            Tone.start();
+            // Create equalizer bars
+            const equalizer = document.getElementById('equalizer');
+            for (let i = 0; i < 30; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                bar.style.height = '5px';
+                equalizer.appendChild(bar);
+            }
+            // Create pixel animation
+            const screen = document.querySelector('.screen');
+            for (let i = 0; i < 50; i++) {
+                const pixel = document.createElement('div');
+                pixel.className = 'pixel';
+                pixel.style.left = Math.random() * 100 + '%';
+                pixel.style.top = Math.random() * 100 + '%';
+                pixel.style.opacity = Math.random() * 0.5;
+                screen.appendChild(pixel);
+                animatePixel(pixel);
+            }
+            function animatePixel(pixel) {
+                const duration = 2000 + Math.random() * 3000;
+                const delay = Math.random() * 5000;
+                setTimeout(() => {
+                    pixel.style.transition = `all ${duration}ms linear`;
+                    pixel.style.left = Math.random() * 100 + '%';
+                    pixel.style.top = Math.random() * 100 + '%';
+                    setTimeout(() => {
+                        pixel.style.transition = 'none';
+                        pixel.style.left = Math.random() * 100 + '%';
+                        pixel.style.top = Math.random() * 100 + '%';
+                        animatePixel(pixel);
+                    }, duration);
+                }, delay);
+            }
+            // MIDI player setup
+            let currentPlayer = null;
+            const display = document.getElementById('display');
+            const buttons = document.querySelectorAll('.btn');
+            // Sample MIDI files (in reality you would load actual MIDI files)
+            const songs = [
+                {
+                    name: "GALACTIC CRUISE",
+                    // This would be replaced with actual MIDI file loading
+                    play: function() {
+                        display.textContent = "PLAYING: GALACTIC CRUISE";
+                        startEqualizer();
+                        return { stop: function() { stopEqualizer(); } };
+                    }
+                },
+                {
+                    name: "ROBOT DANCE",
+                    play: function() {
+                        display.textContent = "PLAYING: ROBOT DANCE";
+                        startEqualizer();
+                        return { stop: function() { stopEqualizer(); } };
+                    }
+                },
+                {
+                    name: "ARCADE BLAST",
+                    play: function() {
+                        display.textContent = "PLAYING: ARCADE BLAST";
+                        startEqualizer();
+                        return { stop: function() { stopEqualizer(); } };
+                    }
+                }
+            ];
+            // Equalizer animation
+            let equalizerInterval;
+            function startEqualizer() {
+                const bars = document.querySelectorAll('.bar');
+                clearInterval(equalizerInterval);
+                equalizerInterval = setInterval(() => {
+                    bars.forEach(bar => {
+                        const height = 5 + Math.random() * 55;
+                        bar.style.height = height + 'px';
+                        bar.style.opacity = 0.1 + (height / 60) * 0.9;
+                    });
+                }, 100);
+            }
+            function stopEqualizer() {
+                clearInterval(equalizerInterval);
+                const bars = document.querySelectorAll('.bar');
+                bars.forEach(bar => {
+                    bar.style.height = '5px';
+                    bar.style.opacity = '0.1';
+                });
+            }
+            // Button click handlers
+            buttons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const songIndex = parseInt(this.getAttribute('data-song')) - 1;
+                    // Stop current song if playing
+                    if (currentPlayer) {
+                        currentPlayer.stop();
+                        document.querySelector('.btn.active')?.classList.remove('active');
+                    }
+                    // Start new song
+                    currentPlayer = songs[songIndex].play();
+                    this.classList.add('active');
+                });
+            });
+            // Simulate CRT power-on effect
+            setTimeout(() => {
+                screen.style.boxShadow = 'inset 0 0 20px rgba(0, 255, 255, 0.5)';
+                display.style.textShadow = '0 0 5px #0ff';
+            }, 500);
+        });
+    </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=porkz/holobox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>