Spaces:

Enderchef
/

memeboard

Running

App Files Files Community

Enderchef commited on 17 days ago

Commit

a2bb0e0

verified ·

1 Parent(s): 1518f78

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +290 -19
prompts.txt +3 -0

README.md CHANGED Viewed

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

 ---
+title: memeboard
+emoji: 🐳
+colorFrom: pink
 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,290 @@
-<!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">
+    <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
+    <title>Meme Soundboard</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,aspect-ratio"></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=Comic+Neue:wght@400;700&display=swap');
+        body {
+            font-family: 'Comic Neue', cursive;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+        }
+        .sound-btn {
+            transition: all 0.3s ease;
+            transform: scale(1);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .sound-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+        .sound-btn:active {
+            transform: scale(0.98);
+        }
+        .playing {
+            animation: pulse 0.5s infinite alternate;
+            border-color: #3b82f6 !important;
+        }
+        @keyframes pulse {
+            from {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+            }
+            to {
+                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+            }
+        }
+        .volume-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            background: #d1d5db;
+            outline: none;
+        }
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+        }
+        .error-message {
+            display: none;
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #ef4444;
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            z-index: 100;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="p-4 md:p-8">
+    <div class="error-message" id="errorMessage">
+        <i class="fas fa-exclamation-triangle mr-2"></i>
+        <span id="errorText">Sound could not be loaded. Please try again.</span>
+    </div>
+    <div class="max-w-4xl mx-auto">
+        <header class="text-center mb-8">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Meme Soundboard</h1>
+            <p class="text-lg text-gray-600">Press the buttons to play legendary meme sounds</p>
+            <div class="mt-6 flex items-center justify-center space-x-4">
+                <i class="fas fa-volume-up text-blue-500 text-xl"></i>
+                <input type="range" min="0" max="1" step="0.01" value="0.5" class="volume-slider w-48" id="volumeControl">
+                <span class="text-gray-700 font-medium" id="volumeValue">50%</span>
+            </div>
+        </header>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="soundboard">
+            <!-- Sound buttons will be added here by JavaScript -->
+        </div>
+        <div class="mt-12 text-center">
+            <button id="stopAllBtn" class="px-6 py-3 bg-red-500 text-white rounded-full font-bold hover:bg-red-600 transition">
+                <i class="fas fa-stop mr-2"></i> Stop All Sounds
+            </button>
+        </div>
+    </div>
+    <!-- Audio elements with fallback sources -->
+    <audio id="yodelAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-yodel-voice-sound-2223.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/yodel-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="wompWompAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-sad-trombone-2817.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/sad-trombone-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="rickrollAudio" preload="auto">
+        <source src="https://www.soundjay.com/misc/sounds/never-gonna-give-you-up-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="sadViolinAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-sad-violin-1491.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/sad-violin-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="bruhAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-funny-fart-2885.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/bruh-sound-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="airhornAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-air-horn-2915.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/air-horn-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="oofAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-video-game-falling-2819.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/roblox-oof-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="windowsErrorAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-windows-7-error-sound-2572.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/windows-error-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="tacoBellAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-bell-notification-933.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/taco-bell-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="cricketAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-crickets-and-insects-in-the-wild-1254.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/crickets-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="mlgAirhornAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-horn-call-2916.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/mlg-airhorn-01.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="vineBoomAudio" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-explosion-impact-1680.mp3" type="audio/mpeg">
+        <source src="https://www.soundjay.com/misc/sounds/vine-boom-01.mp3" type="audio/mpeg">
+    </audio>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Add Permissions Policy to prevent warnings
+            const meta = document.createElement('meta');
+            meta.httpEquiv = 'Permissions-Policy';
+            meta.content = 'interest-cohort=()';
+            document.head.appendChild(meta);
+            const sounds = [
+                { id: 'yodelAudio', name: 'Yodeling Kid', icon: 'fa-music', color: 'bg-yellow-400', border: 'border-yellow-500' },
+                { id: 'wompWompAudio', name: 'Womp Womp', icon: 'fa-face-sad-cry', color: 'bg-purple-400', border: 'border-purple-500' },
+                { id: 'rickrollAudio', name: 'Rickroll', icon: 'fa-user-secret', color: 'bg-blue-400', border: 'border-blue-500' },
+                { id: 'sadViolinAudio', name: 'Sad Violin', icon: 'fa-violin', color: 'bg-indigo-400', border: 'border-indigo-500' },
+                { id: 'bruhAudio', name: 'Bruh Sound', icon: 'fa-face-grin-squint-tears', color: 'bg-green-400', border: 'border-green-500' },
+                { id: 'airhornAudio', name: 'Airhorn', icon: 'fa-bullhorn', color: 'bg-red-400', border: 'border-red-500' },
+                { id: 'oofAudio', name: 'Roblox Oof', icon: 'fa-gamepad', color: 'bg-orange-400', border: 'border-orange-500' },
+                { id: 'windowsErrorAudio', name: 'Windows Error', icon: 'fa-window-restore', color: 'bg-gray-400', border: 'border-gray-500' },
+                { id: 'tacoBellAudio', name: 'Taco Bell Bong', icon: 'fa-bell', color: 'bg-pink-400', border: 'border-pink-500' },
+                { id: 'cricketAudio', name: 'Cricket Sounds', icon: 'fa-bug', color: 'bg-lime-400', border: 'border-lime-500' },
+                { id: 'mlgAirhornAudio', name: 'MLG Airhorn', icon: 'fa-glasses', color: 'bg-cyan-400', border: 'border-cyan-500' },
+                { id: 'vineBoomAudio', name: 'Vine Boom', icon: 'fa-burst', color: 'bg-amber-400', border: 'border-amber-500' }
+            ];
+            const soundboard = document.getElementById('soundboard');
+            const errorMessage = document.getElementById('errorMessage');
+            const errorText = document.getElementById('errorText');
+            sounds.forEach(sound => {
+                const soundBtn = document.createElement('button');
+                soundBtn.className = `sound-btn ${sound.color} ${sound.border} border-2 rounded-xl p-4 flex flex-col items-center justify-center h-32`;
+                soundBtn.innerHTML = `
+                    <i class="fas ${sound.icon} text-3xl mb-2"></i>
+                    <span class="font-bold text-gray-800">${sound.name}</span>
+                `;
+                soundBtn.addEventListener('click', function() {
+                    playSound(sound.id, soundBtn);
+                });
+                soundboard.appendChild(soundBtn);
+            });
+            const volumeControl = document.getElementById('volumeControl');
+            const volumeValue = document.getElementById('volumeValue');
+            const stopAllBtn = document.getElementById('stopAllBtn');
+            // Get all audio elements
+            const allAudioElements = document.querySelectorAll('audio');
+            // Set initial volume
+            allAudioElements.forEach(audio => {
+                audio.volume = volumeControl.value;
+                // Add error handling for each audio element
+                audio.addEventListener('error', function() {
+                    showError(`Failed to load ${audio.id.replace('Audio', '')} sound`);
+                });
+            });
+            // Update volume when slider changes
+            volumeControl.addEventListener('input', function() {
+                const volume = this.value;
+                volumeValue.textContent = `${Math.round(volume * 100)}%`;
+                allAudioElements.forEach(audio => {
+                    audio.volume = volume;
+                });
+            });
+            // Stop all sounds
+            stopAllBtn.addEventListener('click', function() {
+                allAudioElements.forEach(audio => {
+                    audio.pause();
+                    audio.currentTime = 0;
+                });
+                // Remove playing class from all buttons
+                document.querySelectorAll('.sound-btn').forEach(btn => {
+                    btn.classList.remove('playing');
+                });
+            });
+            function playSound(soundId, button) {
+                // Stop all sounds first
+                allAudioElements.forEach(audio => {
+                    audio.pause();
+                    audio.currentTime = 0;
+                });
+                // Remove playing class from all buttons
+                document.querySelectorAll('.sound-btn').forEach(btn => {
+                    btn.classList.remove('playing');
+                });
+                // Play the selected sound
+                const audio = document.getElementById(soundId);
+                try {
+                    audio.currentTime = 0;
+                    const playPromise = audio.play();
+                    if (playPromise !== undefined) {
+                        playPromise.catch(error => {
+                            showError("Couldn't play sound. Try clicking again or check your browser permissions.");
+                        });
+                    }
+                    // Add playing class to the clicked button
+                    button.classList.add('playing');
+                    // Remove playing class when sound ends
+                    audio.addEventListener('ended', function() {
+                        button.classList.remove('playing');
+                    });
+                } catch (error) {
+                    showError("Error playing sound. Please try again.");
+                }
+            }
+            function showError(message) {
+                errorText.textContent = message;
+                errorMessage.style.display = 'block';
+                setTimeout(() => {
+                    errorMessage.style.display = 'none';
+                }, 3000);
+            }
+        });
+    </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=Enderchef/memeboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+Meme soundboard with yodeling, womp womp, rickroll and more.
+I cannot hear it.
+Unrecognized feature: 'ambient-light-sensor'. deepsite:256  Unrecognized feature: 'battery'. deepsite:256  Unrecognized feature: 'document-domain'. deepsite:256  Unrecognized feature: 'layout-animations'. deepsite:256  Unrecognized feature: 'legacy-image-formats'. deepsite:256  Unrecognized feature: 'oversized-images'. deepsite:256  Unrecognized feature: 'vr'. deepsite:256  Unrecognized feature: 'wake-lock'. 236(index):64  cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation (anonymous) @ (index):64 14about:srcdoc:186  Uncaught (in promise) NotSupportedError: The element has no supported sources. (index):64  cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation (anonymous) @ (index):64 about:srcdoc:186  Uncaught (in promise) NotSupportedError: The element has no supported sources. 190(index):64  cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation (anonymous) @ (index):64 (index):64  cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation (anonymous) @ (index):64 3about:srcdoc:189  Uncaught (in promise) NotSupportedError: The element has no supported sources.                                                             Microsoft Edge is moving towards a new experience that allows users to choose to browse without third-party cookies. [NEW] Explain Console errors by using Copilot in Edge: click                    to explain an error.          Learn more         Don't show again                                                             Microsoft Edge is moving towards a new experience that allows users to choose to browse without third-party cookies.