go/ui/index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Vyla Go</title>
    <style>
        :root {
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000000;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: #fff;
            user-select: none;
        }

        .side-rays-container {
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .side-rays-container canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        .center-brand {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            pointer-events: none;
        }

        .center-brand img {
            width: 76px;
            height: 76px;
            object-fit: contain;
            filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.7));
        }

        .bottom-dock {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
            padding: 20px calc(16px + var(--safe-right)) calc(30px + var(--safe-bottom)) calc(16px + var(--safe-left));
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .status-text {
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.2px;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 12px;
            text-align: center;
        }

        .progress-track {
            width: 100%;
            max-width: 260px;
            height: 4px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .progress-fill {
            height: 100%;
            width: 5%;
            background: #ffffff;
            border-radius: 999px;
            transition: width 0.3s ease;
        }

        #debug-log-box {
            display: block;
            width: 100%;
            max-width: 320px;
            max-height: 80px;
            overflow-y: auto;
            background: rgba(12, 12, 16, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            padding: 6px 8px;
            font-family: monospace;
            font-size: 9px;
            color: #86efac;
            text-align: left;
            white-space: pre-wrap;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div id="side-rays" class="side-rays-container">
        <canvas id="siderays-canvas"></canvas>
    </div>

    <div class="center-brand">
        <img src="/white_logo.png" alt="Logo" />
    </div>

    <div class="bottom-dock">
        <div class="status-text" id="status-message">Starting runtime engine...</div>
        <div class="progress-track">
            <div class="progress-fill" id="progress-fill"></div>
        </div>
    </div>

    <script>
        (function initSideRays() {
            const canvas = document.getElementById("siderays-canvas");
            const gl = canvas.getContext("webgl");
            if (!gl) return;

            const vert = `attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); }`;
            const frag = `precision highp float;
uniform float iTime; uniform vec2 iResolution; uniform float iSpeed;
uniform vec3 iRayColor1; uniform vec3 iRayColor2; uniform float iIntensity;
uniform float iSpread; uniform float iTilt; uniform float iSaturation;
uniform float iBlend; uniform float iFalloff; uniform float iOpacity;

float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord, float seedA, float seedB, float speed) {
  vec2 sourceToCoord = coord - raySource;
  float cosAngle = dot(normalize(sourceToCoord), rayRefDirection);
  return clamp((0.45 + 0.15 * sin(cosAngle * seedA + iTime * speed)) + (0.3 + 0.2 * cos(-cosAngle * seedB + iTime * speed)), 0.0, 1.0) *
    clamp((iResolution.x - length(sourceToCoord)) / iResolution.x, 0.5, 1.0);
}

void main() {
  vec2 fragCoord = gl_FragCoord.xy;
  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
  vec2 rayPos = vec2(iResolution.x * 1.0, -0.2 * iResolution.y);

  float tiltRad = iTilt * 3.14159265 / 180.0;
  float cs = cos(tiltRad); float sn = sin(tiltRad);
  vec2 rel = coord - rayPos;
  vec2 tiltedCoord = vec2(rel.x * cs - rel.y * sn, rel.x * sn + rel.y * cs) + rayPos;

  float halfSpread = iSpread * 0.18;
  vec2 rayRefDir1 = normalize(vec2(cos(0.785398 + halfSpread), sin(0.785398 + halfSpread)));
  vec2 rayRefDir2 = normalize(vec2(cos(0.785398 - halfSpread), sin(0.785398 - halfSpread)));

  vec4 rays1 = vec4(iRayColor1, 1.0) * rayStrength(rayPos, rayRefDir1, tiltedCoord, 36.2214, 21.11349, iSpeed);
  vec4 rays2 = vec4(iRayColor2, 1.0) * rayStrength(rayPos, rayRefDir2, tiltedCoord, 22.3991, 18.0234, iSpeed * 0.2);

  vec4 color = rays1 * (1.0 - iBlend) * 0.9 + rays2 * iBlend * 0.9;
  float distanceToLight = length(fragCoord.xy - vec2(rayPos.x, iResolution.y - rayPos.y)) / iResolution.y;
  float brightness = iIntensity * 0.28 / pow(max(distanceToLight, 0.001), iFalloff);
  color.rgb *= brightness;

  float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
  color.rgb = mix(vec3(gray), color.rgb, iSaturation);
  color.a = max(color.r, max(color.g, color.b)) * iOpacity;
  gl_FragColor = color;
}`;

            function compile(src, type) {
                const s = gl.createShader(type);
                gl.shaderSource(s, src); gl.compileShader(s);
                return s;
            }
            const prog = gl.createProgram();
            gl.attachShader(prog, compile(vert, gl.VERTEX_SHADER));
            gl.attachShader(prog, compile(frag, gl.FRAGMENT_SHADER));
            gl.linkProgram(prog);
            gl.useProgram(prog);

            const vbo = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
            const pos = gl.getAttribLocation(prog, "position");
            gl.enableVertexAttribArray(pos);
            gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);

            const uTime = gl.getUniformLocation(prog, "iTime");
            const uRes = gl.getUniformLocation(prog, "iResolution");
            gl.uniform1f(gl.getUniformLocation(prog, "iSpeed"), 2.5);
            gl.uniform3f(gl.getUniformLocation(prog, "iRayColor1"), 0.917, 0.701, 0.031);
            gl.uniform3f(gl.getUniformLocation(prog, "iRayColor2"), 0.588, 0.784, 1.0);
            gl.uniform1f(gl.getUniformLocation(prog, "iIntensity"), 1.6);
            gl.uniform1f(gl.getUniformLocation(prog, "iSpread"), 1.8);
            gl.uniform1f(gl.getUniformLocation(prog, "iTilt"), 0.0);
            gl.uniform1f(gl.getUniformLocation(prog, "iSaturation"), 1.5);
            gl.uniform1f(gl.getUniformLocation(prog, "iBlend"), 0.75);
            gl.uniform1f(gl.getUniformLocation(prog, "iFalloff"), 1.8);
            gl.uniform1f(gl.getUniformLocation(prog, "iOpacity"), 0.9);

            function resize() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                gl.viewport(0, 0, canvas.width, canvas.height);
                gl.uniform2f(uRes, canvas.width, canvas.height);
            }
            window.addEventListener("resize", resize);
            resize();

            function loop(t) {
                gl.uniform1f(uTime, t * 0.001);
                gl.drawArrays(gl.TRIANGLES, 0, 6);
                requestAnimationFrame(loop);
            }
            requestAnimationFrame(loop);
        })();
    </script>
</body>

</html>