Home/ui/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vyla Home</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
        }

        canvas {
            position: fixed;
            inset: 0;
            display: block;
            width: 100vw;
            height: 100vh;
        }

        .overlay {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
            pointer-events: none;
        }

        #ascii-logo {
            font-family: "Cascadia Mono", "Consolas", monospace;
            font-size: 11px;
            line-height: 1.15;
            color: rgba(255, 255, 255, .75);
            white-space: pre;
            margin: 0;
            user-select: none;
            text-shadow: 0 4px 12px rgba(0, 0, 0, .6);
            transform: scale(0.4);
            opacity: 0;
            animation: logoIn 1.1s cubic-bezier(.16, 1, .3, 1) forwards;
        }

        #status {
            font-size: 10px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            opacity: 0;
            animation: statusIn .6s ease forwards .7s;
        }

        @keyframes logoIn {
            0% {
                transform: scale(0.4);
                opacity: 0;
                filter: blur(6px);
            }

            60% {
                opacity: 1;
                filter: blur(0);
            }

            100% {
                transform: scale(1);
                opacity: 1;
                filter: blur(0);
            }
        }

        @keyframes statusIn {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .error-view {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: #000;
            padding: 32px;
            z-index: 100;
        }

        .container {
            max-width: 480px;
            text-align: center;
        }

        .icon {
            width: 38px;
            height: 38px;
            margin: 0 auto 22px;
            color: #ff453a;
        }

        h1 {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -.02em;
        }

        p {
            margin: 14px 0 28px;
            color: rgba(255, 255, 255, .55);
            font-size: 14px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
        }

        button {
            appearance: none;
            border: 0;
            border-radius: 999px;
            background: #fff;
            color: #000;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <canvas id="c"></canvas>

    <div class="overlay">
        <pre id="ascii-logo"></pre>
        <div id="status">Starting Vyla Home...</div>
    </div>

    <div id="error-view" class="error-view">
        <div class="container">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="7" x2="12" y2="13" />
                <circle cx="12" cy="17" r="1" />
            </svg>
            <h1>Couldn't start Vyla Home</h1>
            <p id="error-msg"></p>
            <button onclick="location.reload()">Try Again</button>
        </div>
    </div>

    <script>
        fetch('logo.txt').then(r => r.text()).then(t => {
            document.getElementById('ascii-logo').textContent = t;
        }).catch(() => { });

        const CHARS = ' .:-=+*#%@';
        const FONT_SIZE = 50;
        const canvas = document.getElementById('c');
        const ctx = canvas.getContext('2d');

        let CW, CH, cols, rows, t = 0;
        let mouseX = -9999, mouseY = -9999, lastMouseMove = 0, mouseStrength = 0;
        const FADE_TIME = 250, SMOOTHING = 0.08;

        function initFont() {
            ctx.font = FONT_SIZE + 'px "Courier New", monospace';
            CW = Math.ceil(ctx.measureText('M').width);
            CH = FONT_SIZE + 2;
            ctx.textBaseline = 'top';
        }

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initFont();
            cols = Math.ceil(canvas.width / CW) + 1;
            rows = Math.ceil(canvas.height / CH) + 1;
        }

        window.addEventListener('resize', resize);
        window.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;
            lastMouseMove = performance.now();
        });

        function plasma(cx, cy, tt) {
            const x = cx + Math.sin(cy * 3 + tt * 0.7) * 0.07;
            const y = cy + Math.cos(cx * 3 + tt * 0.5) * 0.07;
            let v =
                Math.sin(x * 10 + tt) +
                Math.sin(y * 10 + tt) +
                Math.sin((x + y) * 7 + tt) +
                Math.sin(Math.sqrt(x * x + y * y) * 12 - tt * 1.2) +
                Math.sin(x * 6 - tt * 0.8) +
                Math.sin(y * 8 + tt * 0.9);
            return (v / 6 + 1) / 2;
        }

        function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            t += 0.03;
            const elapsed = performance.now() - lastMouseMove;
            const targetStrength = Math.max(0, 1 - elapsed / FADE_TIME);
            mouseStrength += (targetStrength - mouseStrength) * SMOOTHING;

            for (let row = 0; row < rows; row++) {
                for (let col = 0; col < cols; col++) {
                    const x = col * CW;
                    const y = row * CH;
                    const dx = x - mouseX;
                    const dy = y - mouseY;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    const force = (7000 / (dist * dist + 1500)) * mouseStrength;
                    const v = plasma(col / cols, row / rows, t);
                    const brightness = Math.round(v * 60);
                    const charIdx = Math.floor(v * (CHARS.length - 0.001));
                    ctx.fillStyle = 'rgb(' + brightness + ',' + brightness + ',' + brightness + ')';
                    ctx.fillText(CHARS[charIdx], x + dx * force, y + dy * force);
                }
            }
            requestAnimationFrame(render);
        }

        resize();
        render();

        function checkBackend() {
            fetch('http://localhost:4890')
                .then(res => {
                    if (res.ok) {
                        window.location.href = 'http://localhost:4890';
                    } else {
                        setTimeout(checkBackend, 1000);
                    }
                })
                .catch(() => {
                    setTimeout(checkBackend, 1000);
                });
        }

        setTimeout(checkBackend, 1000);
    </script>

</body>

</html>