Spaces:
Running
Running
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | |
| <title>Vibe Coding in the Dark</title> | |
| <link rel="shortcut icon" href="TemplateData/favicon.ico" /> | |
| <link rel="stylesheet" href="TemplateData/style.css" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <style> | |
| body, | |
| #unity-canvas, | |
| #loading-cover { | |
| background-color: #000000; | |
| } | |
| #unity-loading-bar, | |
| #unity-logo, | |
| #unity-progress-bar-empty, | |
| .spinner { | |
| display: none ; | |
| } | |
| #loading-text { | |
| color: white; | |
| font-family: "Bebas Neue", Arial, sans-serif; | |
| font-size: 40px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| max-width: 80%; | |
| line-height: 1.5; | |
| margin-bottom: 10px; | |
| } | |
| #loading-subtext { | |
| font-family: "Bebas Neue", Arial, sans-serif; | |
| font-size: 24px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, 40px); | |
| text-align: center; | |
| max-width: 80%; | |
| line-height: 1.5; | |
| color: white; | |
| } | |
| #loading-cover { | |
| transition: opacity 1.5s ease-in-out; | |
| } | |
| .fade-out { | |
| opacity: 0; | |
| } | |
| /* Start Game Button Styles */ | |
| #start-game-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #000000; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| } | |
| #start-game-button { | |
| font-family: "Bebas Neue", Arial, sans-serif; | |
| font-size: 32px; | |
| padding: 15px 40px; | |
| color: white; | |
| background-color: #333; | |
| border: 2px solid white; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| #start-game-button:hover { | |
| background-color: #555; | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="dark"> | |
| <div id="unity-container" class="unity-desktop"> | |
| <canvas id="unity-canvas"></canvas> | |
| </div> | |
| <div id="loading-cover" style="display: none; background-color: #000000"> | |
| <div id="loading-text">Vibe Coding in the Dark</div> | |
| <div id="loading-subtext">by Dylan Ebert (IndividualKex)</div> | |
| </div> | |
| <div id="start-game-container"> | |
| <button id="start-game-button">START GAME</button> | |
| <audio | |
| id="audio-element" | |
| src="data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbsAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVA==" | |
| type="audio/mp3" | |
| ></audio> | |
| </div> | |
| <div id="unity-fullscreen-button" style="display: none"></div> | |
| <a | |
| target="_blank" | |
| href="https://jam.pieter.com" | |
| style=" | |
| font-family: 'system-ui', sans-serif; | |
| position: fixed; | |
| bottom: -1px; | |
| right: -1px; | |
| padding: 7px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| background: #fff; | |
| color: #000; | |
| text-decoration: none; | |
| z-index: 10; | |
| border-top-left-radius: 12px; | |
| z-index: 10000; | |
| border: 1px solid #fff; | |
| " | |
| >🕹️ Vibe Jam 2025</a | |
| > | |
| <script> | |
| const hideFullScreenButton = "1"; | |
| const buildUrl = "Build"; | |
| const loaderUrl = buildUrl + "/Build.loader.js"; | |
| const config = { | |
| dataUrl: buildUrl + "/Build.data", | |
| frameworkUrl: buildUrl + "/Build.framework.js", | |
| codeUrl: buildUrl + "/Build.wasm", | |
| streamingAssetsUrl: "StreamingAssets", | |
| companyName: "IndividualKex", | |
| productName: "Vibe Coding in the Dark", | |
| productVersion: "0.1.0", | |
| }; | |
| const container = document.querySelector("#unity-container"); | |
| const canvas = document.querySelector("#unity-canvas"); | |
| const loadingCover = document.querySelector("#loading-cover"); | |
| const fullscreenButton = document.querySelector("#unity-fullscreen-button"); | |
| const startGameContainer = document.querySelector("#start-game-container"); | |
| const startGameButton = document.querySelector("#start-game-button"); | |
| const audioElement = document.querySelector("#audio-element"); | |
| const canFullscreen = (function() { | |
| for (const key of [ | |
| 'exitFullscreen', | |
| 'webkitExitFullscreen', | |
| 'webkitCancelFullScreen', | |
| 'mozCancelFullScreen', | |
| 'msExitFullscreen', | |
| ]) { | |
| if (key in document) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| }()); | |
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | |
| container.className = "unity-mobile"; | |
| config.devicePixelRatio = 1; | |
| } | |
| loadingCover.style.display = ""; | |
| // Set minimum display time (3 seconds) | |
| const minDisplayTime = 3000; // milliseconds | |
| let loadingStartTime = Date.now(); | |
| let loadingFinished = false; | |
| let minTimeElapsed = false; | |
| let unityInstance = null; | |
| // Function to check if we can show the start button | |
| function tryShowStartButton() { | |
| if (loadingFinished && minTimeElapsed) { | |
| loadingCover.classList.add('fade-out'); | |
| setTimeout(() => { | |
| loadingCover.style.display = "none"; | |
| loadingCover.classList.remove('fade-out'); | |
| startGameContainer.style.display = "flex"; | |
| }, 1500); // Match the CSS transition time | |
| } | |
| } | |
| // Start the minimum display time timer | |
| setTimeout(() => { | |
| minTimeElapsed = true; | |
| tryShowStartButton(); | |
| }, minDisplayTime); | |
| // Initialize Unity | |
| function initUnity() { | |
| if (unityInstance) return; // Prevent multiple initializations | |
| createUnityInstance(canvas, config, (progress) => { | |
| // No progress visualization needed | |
| }).then((instance) => { | |
| unityInstance = instance; | |
| if (canFullscreen) { | |
| if (!hideFullScreenButton) { | |
| fullscreenButton.style.display = ""; | |
| } | |
| fullscreenButton.onclick = () => { | |
| unityInstance.SetFullscreen(1); | |
| }; | |
| } | |
| }).catch((message) => { | |
| alert(message); | |
| }); | |
| } | |
| // Start button click handler | |
| startGameButton.addEventListener('click', () => { | |
| // Play silent audio to unlock audio on Safari | |
| audioElement.play().catch(error => console.log("Audio play failed:", error)); | |
| // Hide start button container | |
| startGameContainer.style.display = "none"; | |
| // Initialize Unity if not already done | |
| initUnity(); | |
| }); | |
| const script = document.createElement("script"); | |
| script.src = loaderUrl; | |
| script.onload = () => { | |
| // Signal that loading is finished | |
| loadingFinished = true; | |
| tryShowStartButton(); | |
| }; | |
| document.body.appendChild(script); | |
| </script> | |
| </body> | |
| </html> | |