162 lines
7.2 KiB
HTML
162 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jev8ball // neural decision oracle</title>
|
|
<meta name="description" content="A minimalist Magic 8-Ball powered by TypeSafe Jev structured decision intelligence on OpenRouter. Ask a yes/no question and get a calibrated verdict with full decision telemetry.">
|
|
<meta name="theme-color" content="#0b0b0b">
|
|
<meta name="color-scheme" content="dark">
|
|
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="jev8ball // neural decision oracle">
|
|
<meta property="og:description" content="Ask a yes/no question. Get a calibrated verdict with probability, confidence, latency and cost.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="jev8ball">
|
|
<meta name="twitter:description" content="Type-safe neural decision oracle on OpenRouter.">
|
|
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<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=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<canvas id="particles" aria-hidden="true"></canvas>
|
|
<a class="skip-link" href="#questionInput">Skip to question input</a>
|
|
|
|
<main class="container">
|
|
<header class="header">
|
|
<div class="top-nav">
|
|
<span class="brand-tag">oracle.sys</span>
|
|
<div class="nav-actions">
|
|
<button id="soundToggle" class="btn-ghost" type="button" aria-pressed="false" title="Toggle procedural audio">sound: on</button>
|
|
<button id="motionToggle" class="btn-ghost" type="button" aria-pressed="false" title="Reduce animation">motion: full</button>
|
|
</div>
|
|
</div>
|
|
<h1>jev8ball</h1>
|
|
<div class="subtitle-row">
|
|
<span class="subtitle">// type-safe neural decision oracle</span>
|
|
<span class="status-sep" aria-hidden="true">•</span>
|
|
<button id="backendStatus" class="backend-status" type="button" title="Re-check the backend">
|
|
<span class="status-dot" aria-hidden="true"></span>
|
|
<span id="statusText" class="status-text">checking…</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Software-rendered 3D oracle vessel -->
|
|
<section class="ball-stage" aria-label="Oracle vessel">
|
|
<div class="ball-frame">
|
|
<canvas id="oracleCanvas" class="oracle-canvas" width="344" height="344" role="img"
|
|
aria-label="A hexagonal metal vessel filled with liquid. A hexagonal die floats inside and carries the verdict."></canvas>
|
|
<button id="rollButton" class="roll-trigger" type="button">
|
|
<span class="sr-only">Roll the oracle</span>
|
|
</button>
|
|
<span class="frame-corner frame-corner-tl" aria-hidden="true"></span>
|
|
<span class="frame-corner frame-corner-tr" aria-hidden="true"></span>
|
|
<span class="frame-corner frame-corner-bl" aria-hidden="true"></span>
|
|
<span class="frame-corner frame-corner-br" aria-hidden="true"></span>
|
|
</div>
|
|
<p class="stage-hint" id="stageHint">click the vessel to shake it</p>
|
|
</section>
|
|
|
|
<!-- Input -->
|
|
<section class="prompt-section">
|
|
<form id="askForm" class="prompt-form" novalidate>
|
|
<label class="sr-only" for="questionInput">Your yes or no question</label>
|
|
<div class="prompt-input-wrap">
|
|
<span class="prompt-symbol" aria-hidden="true">></span>
|
|
<input
|
|
type="text"
|
|
id="questionInput"
|
|
name="question"
|
|
class="prompt-input"
|
|
placeholder="ask the oracle a yes/no question…"
|
|
maxlength="300"
|
|
autocomplete="off"
|
|
autocapitalize="sentences"
|
|
spellcheck="false"
|
|
aria-describedby="inputHint"
|
|
>
|
|
<button type="submit" id="submitBtn" class="btn btn-ask">
|
|
<span id="btnText">consult</span>
|
|
<span class="spinner" id="btnSpinner" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p id="inputHint" class="input-hint"><span id="charCount">0</span>/300 · <kbd>/</kbd> to focus · <kbd>enter</kbd> to ask</p>
|
|
|
|
<div class="quick-prompts">
|
|
<span class="quick-label">suggest:</span>
|
|
<button class="quick-pill" type="button" data-q="Will this code deploy cleanly to production?">deploy cleanly?</button>
|
|
<button class="quick-pill" type="button" data-q="Should I rewrite the stack in Rust?">rewrite in rust?</button>
|
|
<button class="quick-pill" type="button" data-q="Is tomorrow going to be a productive day?">productive day?</button>
|
|
<button class="quick-pill" type="button" data-q="Will my current venture succeed?">venture success?</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Decision telemetry -->
|
|
<section class="telemetry-card" id="telemetryCard">
|
|
<div class="telemetry-header">
|
|
<span class="telemetry-title">// JEV DECISION TELEMETRY</span>
|
|
<span class="telemetry-badge" id="telemetryBadge">IDLE</span>
|
|
</div>
|
|
<div class="telemetry-body">
|
|
<p class="verdict" id="tVerdict" aria-live="polite">awaiting a question</p>
|
|
|
|
<div class="telemetry-row">
|
|
<span class="t-label">P(FAVORABLE)</span>
|
|
<span class="t-val mono" id="tNoul">—</span>
|
|
</div>
|
|
<div class="telemetry-meter-bar" role="presentation">
|
|
<div class="meter-fill" id="noulFill"></div>
|
|
</div>
|
|
|
|
<div class="telemetry-grid">
|
|
<div class="t-cell">
|
|
<span class="t-cell-label">confidence</span>
|
|
<span class="t-cell-val" id="tConfidence">—</span>
|
|
</div>
|
|
<div class="t-cell">
|
|
<span class="t-cell-label">latency</span>
|
|
<span class="t-cell-val" id="tLatency">—</span>
|
|
</div>
|
|
<div class="t-cell">
|
|
<span class="t-cell-label">engine</span>
|
|
<span class="t-cell-val">TypeSafe Jev</span>
|
|
</div>
|
|
<div class="t-cell">
|
|
<span class="t-cell-label">est. cost</span>
|
|
<span class="t-cell-val" id="tCost">—</span>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="telemetry-details">
|
|
<summary class="details-summary">> inspect raw decision payload</summary>
|
|
<pre class="json-dump" id="jsonDump">// awaiting query…</pre>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Query log -->
|
|
<section class="history-section">
|
|
<div class="history-header">
|
|
<h2>query log</h2>
|
|
<span id="historyCount" class="history-count">0 queries</span>
|
|
</div>
|
|
<ul id="historyList" class="history-list" aria-live="polite"></ul>
|
|
<p class="history-empty" id="historyEmpty">No questions asked yet. History stays in this browser.</p>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<span>jev8ball · TypeSafe Jev on OpenRouter</span>
|
|
<span class="footer-note">Verdicts are synthetic. Do not use them for real decisions.</span>
|
|
</footer>
|
|
</main>
|
|
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
|
|
<script type="module" src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|