nandi/ori · index.html

nandi/oripublic⑂ Fork 0

⑂ db7446cc6b52b6bd9196294c1e66e5eb56754d5e

✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac · on db7446cc6b52b6bd9196294c1e66e5eb56754d5e · k33g · yesterday

index.html · 41 lines · 1.8 KBHTML    Blame HistoryRaw


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>ori</title>
    <link href="/main.css" rel="stylesheet"/>
</head>
<body>
<!-- Screen 1: connection. Shown at startup and after "Disconnect". -->
<section class="screen connect" id="connect-screen">
    <form class="card" id="connect-form" autocomplete="off">
        <h1>ori</h1>
        <p class="hint">Address of the ori server (the Go server that serves the web client).</p>
        <label for="server-url">Server URL</label>
        <input id="server-url" type="text" placeholder="http://localhost:8888" spellcheck="false"/>
        <div class="actions">
            <button type="button" class="secondary" id="check-btn">Check</button>
            <button type="submit" class="primary" id="connect-btn">Connect</button>
        </div>
        <p class="status" id="status" role="status" aria-live="polite"></p>
        <p class="fineprint" id="settings-path"></p>
    </form>
</section>

<!-- Screen 2: the ori webapp itself, embedded in an iframe served by ori. -->
<section class="screen viewer" id="viewer-screen" hidden>
    <header class="bar">
        <span class="dot" aria-hidden="true"></span>
        <span class="url" id="viewer-url"></span>
        <span class="spacer"></span>
        <button type="button" class="ghost" id="reload-btn" title="Reload the ori page">Reload</button>
        <button type="button" class="ghost" id="browser-btn" title="Open in the system browser">Open in browser</button>
        <button type="button" class="ghost" id="disconnect-btn" title="Back to the connection screen">Disconnect</button>
    </header>
    <iframe id="ori-frame" title="ori web client" allow="clipboard-read; clipboard-write"></iframe>
</section>

<script type="module" src="/main.js"></script>
</body>
</html>