Webleb - UI Elements - Sonic 2 Mobile

HTML CSS JS

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>cool ixl work</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; width: 100%; overflow: hidden; background: #000; font-family: 'Inter', sans-serif; text-align: center; }
        #canvasWrapper { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: black; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        canvas { display: block; position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; outline: none; }
        #output { display: none; }
        #loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #333; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.4s ease; }
        #loading-screen.fade-out { opacity: 0; pointer-events: none; }
        #loading-screen.hidden { display: none; }
        .loading-mb { color: #eee; font-size: 15px; font-weight: 700; }
        .control-panel { position: fixed; top: 15px; right: 15px; z-index: 1001; }
        .game-btn { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: white; padding: 8px 12px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px); transition: all 0.2s; min-width: 130px; font-family: 'Inter', sans-serif; }
    </style>
</head>
<body>
    <div id="canvasWrapper">
        <canvas id="canvas" tabindex="0" width="848" height="480" onclick="window.focus();" oncontextmenu="event.preventDefault();"></canvas>
    </div>

<div class="control-panel">
        <button id="fullscreen-button" class="game-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="white"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
            Fullscreen
        </button>
    </div>

$('fullscreen-button').onclick = () => {
            if (!document.fullscreenElement) document.documentElement.requestFullscreen();
            else document.exitFullscreen();
        };

(function() {
            const BASE_W = 848, BASE_H = 480;
            function applyFit(el) {
                if (!el) return;
                const vw = window.innerWidth, vh = window.innerHeight;
                const isFS = !!document.fullscreenElement;
                const scale = isFS ? Math.max(vw/BASE_W, vh/BASE_H) : Math.min(vw/BASE_W, vh/BASE_H);
                const dw = Math.round(BASE_W * scale), dh = Math.round(BASE_H * scale);
                el.style.width = dw + 'px'; el.style.height = dh + 'px';
                el.style.left = Math.round((vw - dw)/2) + 'px'; el.style.top = Math.round((vh - dh)/2) + 'px';
            }
            window.addEventListener('resize', () => document.querySelectorAll('canvas').forEach(applyFit));
            document.addEventListener('fullscreenchange', () => document.querySelectorAll('canvas').forEach(applyFit));
            setInterval(() => document.querySelectorAll('canvas').forEach(applyFit), 1000);
        })();

var DB_NAME = 'sonic2-saves', STORE_NAME = 'files';
        var _saveDB = null;
        var _savePath = null; 
        var _saveTimer = null;

function scheduleSave() {
            clearTimeout(_saveTimer);
            _saveTimer = setTimeout(persistSave, 800);
        }

document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') persistSave(); });
        window.addEventListener('beforeunload', persistSave);

Preview

Open Advanced Editor Full Screen

HTML CSS JS

$('fullscreen-button').onclick = () => {
            if (!document.fullscreenElement) document.documentElement.requestFullscreen();
            else document.exitFullscreen();
        };

var DB_NAME = 'sonic2-saves', STORE_NAME = 'files';
        var _saveDB = null;
        var _savePath = null; 
        var _saveTimer = null;

function scheduleSave() {
            clearTimeout(_saveTimer);
            _saveTimer = setTimeout(persistSave, 800);
        }

document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') persistSave(); });
        window.addEventListener('beforeunload', persistSave);

Preview

Validating your code, please wait...