SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/old/dialer/DIALER.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>SI Spatial Operations</title>
    <style>
    :root {
        color-scheme: dark;
        --bg: #050711;
        --panel: #101426cc;
        --line: #ffffff18;
        --text: #f7f8ff;
        --muted: #99a2bf;
        --cyan: #62e6ff;
        --violet: #a77bff;
        --pink: #ff6ac2;
        --ok: #65f6b2;
        --bad:#ff718b
    }

* {
        box-sizing:border-box
    }

body {
        margin: 0;
        min-height: 100vh;
        background: #000;
        color: var(--text);
        font:15px Inter, ui-sans-serif, system-ui, -apple-system, sans-serif
    }

.sphere-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity:.62
    }

.sphere-bg canvas {
        display: block;
        position: fixed;
        inset: 0;
        pointer-events:none
    }

.sphere-bg #c0 {
        z-index:0
    }

.sphere-bg #c1 {
        z-index:1
    }

.sphere-bg #c2 {
        z-index:2
    }

.sphere-shade {
        position: fixed;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background:radial-gradient(circle at center, transparent 0, #03050b22 38%, #03050bcc 100%)
    }

.orb {
        position: fixed;
        z-index: 4;
        border-radius: 50%;
        filter: blur(1px);
        opacity: .2;
        pointer-events:none
    }

.o1 {
        width: 260px;
        height: 260px;
        background: #29d9ff33;
        right: 9%;
        top: 22%;
        box-shadow:0 0 90px #29d9ff66
    }

.o2 {
        width: 190px;
        height: 190px;
        background: #bd55ff33;
        left: 6%;
        bottom: 8%;
        box-shadow:0 0 90px #bd55ff55
    }

.shell, .login {
        z-index: 10;
        position:relative
    }

.shell {
        width: min(1480px, 95vw);
        margin:28px auto
    }

.top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:18px
    }

.brand {
        display: flex;
        align-items: center;
        gap:14px
    }

.mark {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
        box-shadow: 0 12px 45px #6b7dff66;
        display: grid;
        place-items: center;
        color: #080a13;
        font-size: 22px;
        font-weight:900
    }

.brand h1 {
        margin: 0;
        font-size:clamp(24px, 3vw, 40px)
    }

.brand p {
        margin: 3px 0 0;
        color:var(--muted)
    }

.glass {
        background: linear-gradient(135deg, #11172ee6, #080c19df);
        border: 1px solid var(--line);
        box-shadow: 0 26px 80px #0009, inset 0 1px #ffffff12;
        backdrop-filter: blur(24px);
        border-radius:26px
    }

.layout {
        display: grid;
        grid-template-columns: 290px minmax(0, 1fr) 360px;
        gap:16px
    }

.side, .rail {
        padding:18px
    }

.main {
        padding: 20px;
        min-height:760px
    }

.nav {
        display: grid;
        gap:8px
    }

.nav a {
        padding: 13px 14px;
        border-radius: 14px;
        color: var(--muted);
        text-decoration:none
    }

.nav a.active, .nav a:hover {
        color: var(--text);
        background:#ffffff0c
    }

.status {
        margin-top:28px
    }

.status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 4px;
        color:var(--muted)
    }

.dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        display: inline-block;
        background: var(--ok);
        box-shadow:0 0 15px var(--ok)
    }

.hero {
        padding: 22px;
        border-radius: 22px;
        background: linear-gradient(120deg, #182a50cc, #281b4bcc);
        border: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items:center
    }

.hero h2 {
        font-size: 28px;
        margin:0 0 6px
    }

.hero p {
        margin: 0;
        color:var(--muted)
    }

.pulse {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #ffffff0b;
        border: 1px solid #ffffff1a;
        box-shadow: 0 0 0 14px #6ee7ff08, 0 0 55px #6ee7ff3d;
        font-size:30px
    }

.metrics {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin:16px 0
    }

.metric {
        padding:16px
    }

.metric span {
        color: var(--muted);
        font-size:12px
    }

.metric strong {
        display: block;
        font-size: 25px;
        margin-top:7px
    }

.section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:24px 0 10px
    }

.section-head h3 {
        margin:0
    }

.feed {
        display: grid;
        gap:9px
    }

.event {
        display: grid;
        grid-template-columns: 42px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 13px;
        border-radius: 16px;
        background: #ffffff07;
        border:1px solid #ffffff0d
    }

.icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #54ddff22, #b56eff22);
        color:var(--cyan)
    }

.event b {
        display:block
    }

.event p {
        margin: 4px 0 0;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width:560px
    }

.event time {
        color: var(--muted);
        font-size:12px
    }

.tabs {
        display: flex;
        gap:7px
    }

.tab {
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #ffffff08;
        color: var(--muted);
        padding:7px 11px
    }

.rail h3 {
        margin:4px 0 14px
    }

.card {
        padding: 16px;
        margin-bottom: 13px;
        border-radius: 20px;
        background: #ffffff09;
        border:1px solid #ffffff0d
    }

label {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin:10px 0 6px
    }

input, textarea, button {
        width: 100%;
        font: inherit;
        color: var(--text);
        background: #070a15dd;
        border: 1px solid #ffffff18;
        border-radius: 13px;
        padding:11px
    }

textarea {
        min-height: 86px;
        resize:vertical
    }

button {
        border: 0;
        background: linear-gradient(120deg, var(--cyan), var(--violet));
        color: #070911;
        font-weight: 850;
        cursor: pointer;
        margin-top: 10px;
        box-shadow:0 10px 28px #6f7cff30
    }

.secondary {
        background: #ffffff09;
        color: var(--text);
        box-shadow: none;
        border:1px solid var(--line)
    }

.alert {
        padding: 12px 15px;
        border-radius: 15px;
        margin-bottom:14px
    }

.error {
        background:#56182b
    }

.notice {
        background:#124735
    }

.login {
        max-width: 470px;
        margin: 12vh auto;
        padding:28px
    }

.login h1 {
        margin-top:0
    }

.empty {
        padding: 30px;
        text-align: center;
        color:var(--muted)
    }

@media (max-width: 1100px) {
        .layout {
            grid-template-columns:220px 1fr
        }

.rail {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap:14px
        }

.rail h3 {
            grid-column:1/-1
        }

.metrics {
            grid-template-columns:repeat(2, 1fr)
        }
    }

@media (max-width: 720px) {
        .layout {
            grid-template-columns:1fr
        }

.side {
            display:none
        }

.rail {
            display:block
        }

.metrics {
            grid-template-columns:1fr 1fr
        }

.event {
            grid-template-columns:40px 1fr
        }

.event time {
            display:none
        }

.hero .pulse {
            display:none
        }

.sphere-bg {
            opacity:.42
        }

.sphere-shade {
            background: #02040a80
        }
    }

@media (max-width: 720px) {
        body {
            font-size: 16px;
            -webkit-text-size-adjust:100%
        }

.shell {
            width: 100%;
            margin: 0;
            padding:max(16px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom))
        }

.top {
            align-items: flex-start;
            gap:12px
        }

.brand {
            gap:10px
        }

.mark {
            width: 44px;
            height: 44px;
            border-radius:14px
        }

.brand h1 {
            font-size: 23px;
            line-height:1.08
        }

.brand p {
            font-size: 13px;
            line-height:1.35
        }

.top form {
            flex:0 0 auto
        }

.top button {
            padding:11px 12px
        }

.main, .rail {
            padding: 14px;
            border-radius:22px
        }

.hero {
            padding:18px
        }

.hero h2 {
            font-size:24px
        }

.hero p {
            font-size: 15px;
            line-height:1.45
        }

.metrics {
            grid-template-columns: 1fr 1fr;
            gap:9px
        }

.metric {
            padding:14px
        }

.metric strong {
            font-size:22px
        }

.section-head {
            align-items: flex-start;
            gap: 10px;
            flex-direction:column
        }

.tabs {
            width: 100%;
            overflow-x: auto;
            padding-bottom:3px
        }

.tab {
            white-space:nowrap
        }

.event {
            padding: 13px 11px;
            align-items:start
        }

.event p {
            white-space: normal;
            max-width: none;
            line-height:1.45
        }

.rail {
            margin-top:0
        }

.card {
            padding:17px
        }

.card h4 {
            font-size: 18px;
            margin:0 0 7px
        }

input, textarea, button {
            min-height: 48px;
            font-size: 16px;
            padding:13px
        }

textarea {
            min-height:110px
        }

.login {
            margin: 7vh 12px;
            padding:22px
        }

.o1 {
            right:-120px
        }

.o2 {
            left: -100px
        }
    }

@media (max-width: 390px) {
        .metrics {
            grid-template-columns:1fr
        }

.brand p {
            max-width:230px
        }

.top .secondary {
            font-size:13px
        }

.main, .rail {
            padding:11px
        }

.hero {
            padding: 16px
        }
    }
    
    /* Spatial keypad dialer */
    .dialer-display-wrap {
        position: relative;
        margin-top: 10px;
    }
    .dialer-display {
        padding-right: 48px;
        text-align: center;
        font-size: 20px;
        font-weight: 750;
        letter-spacing: .04em;
    }
    .dialer-backspace {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 36px;
        min-height: 34px;
        margin: 0;
        padding: 5px;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: var(--muted);
        box-shadow: none;
        font-size: 18px;
    }
    .dialer-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
        margin-top: 12px;
    }
    .dialer-key {
        min-height: 58px;
        margin: 0;
        padding: 8px;
        border: 1px solid #ffffff18;
        border-radius: 16px;
        background: #ffffff08;
        color: var(--text);
        box-shadow: inset 0 1px #ffffff10;
        font-size: 21px;
        font-weight: 800;
    }
    .dialer-key small {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 9px;
        letter-spacing: .16em;
    }
    .dialer-key:hover {
        background: #ffffff12;
        border-color: #62e6ff55;
    }
    .dialer-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 9px;
        align-items: end;
        margin-top: 10px;
    }
    .dialer-clear {
        width: 48px;
        min-height: 48px;
        margin: 0;
        background: #ffffff09;
        color: var(--text);
        border: 1px solid var(--line);
        box-shadow: none;
    }

</style>
</head>
<body>
    <div class="sphere-bg">
        <canvas id="c0">
        </canvas>
        <canvas id="c1">
        </canvas>
        <canvas id="c2">
        </canvas>
        <div id="hint" hidden></div>
    </div>
    <div class="sphere-shade"></div>
    <i class="orb o1"></i>
    <i class="orb o2"></i>
    <main class="shell">
        <header class="top">
            <div class="brand">
                <div class="mark">SI</div>
                <div>
                    <h1>Spatial Operations</h1>
                    <p>Calls, messages, intelligence and system health</p>
                </div>
            </div>
            <form method="post">
                <input type="hidden" name="csrf" value="3f4c3f3da4e96f3fd6cd84517dd0c0eb4f1f92ca2d61c6679098e96199b3d747">
                <button class="secondary" name="logout">Sign out</button>
            </form>
        </header>
        <div class="layout">
            <aside class="side glass">
                <nav class="nav">
                    <a class="active" href="#overview">◈ Overview</a>
                    <a href="#calls">◉ Calls</a>
                    <a href="#voicemail">◒ Voicemail</a>
                    <a href="#messages">◇ Messages</a>
                    <a href="#alerts">△ Alerts</a>
                </nav>
                <div class="status">
                    <h4>System field</h4>
                    <div class="status-row">
                        <span>
                            <i class="dot"></i>
                             Twilio
                        </span>
                        <b>Online</b>
                    </div>
                    <div class="status-row">
                        <span>
                            <i class="dot"></i>
                             OpenAI
                        </span>
                        <b>Setup</b>
                    </div>
                    <div class="status-row">
                        <span>
                            <i class="dot"></i>
                             Website
                        </span>
                        <b>Live</b>
                    </div>
                </div>
            </aside>
            <section class="main glass" id="overview">
                <div class="hero">
                    <div>
                        <h2>Director’s Brief</h2>
                        <p>SIMON is monitoring calls, messages, voicemail, contacts and follow-ups.</p>
                    </div>
                    <div class="pulse">◉</div>
                </div>
                <div class="metrics">
                    <div class="metric glass">
                        <span>CALL EVENTS</span>
                        <strong>41</strong>
                    </div>
                    <div class="metric glass">
                        <span>MISSED CALLS</span>
                        <strong>1</strong>
                    </div>
                    <div class="metric glass">
                        <span>VOICEMAILS</span>
                        <strong>0</strong>
                    </div>
                    <div class="metric glass">
                        <span>CONTACTS</span>
                        <strong>171</strong>
                    </div>
                </div>
                <div class="section-head">
                    <h3>Live activity</h3>
                    <div class="tabs">
                        <span class="tab">All</span>
                        <span class="tab">Calls</span>
                        <span class="tab">Texts</span>
                    </div>
                </div>
                <div class="feed">
                    <article class="event">
                        <div class="icon">✦</div>
                        <div>
                            <b>Incoming Sms</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T22:10:40+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">✦</div>
                        <div>
                            <b>Incoming Sms</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T20:11:11+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Trusted Text Recorded</b>
                            <p>https://api.twilio.com/2010-04-01/Accounts/AC2f756b2a7cf6b6d4639cfb80d8d69c20/Recordings/RE02b5d26bff9d6be4f996d28cb0f109af</p>
                        </div>
                        <time>2026-07-15T19:45:09+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Trusted Caller Menu</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T19:44:38+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T19:44:38+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Trusted Caller Menu</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:55:05+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:55:05+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Completed</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:43:20+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Started</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:43:14+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Trusted Caller Direct Transfer</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:43:14+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:43:14+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Completed</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:43:01+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Started</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:53+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Trusted Caller Direct Transfer</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:53+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:53+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Completed</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:50+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Started</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:41+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Trusted Caller Direct Transfer</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:41+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:42:41+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Route Request</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:31:34+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:31:26+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Route Request</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:30:59+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:30:45+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Route Request</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:25:53+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:25:50+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Route Request</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:25:27+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:25:13+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T18:23:36+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T17:19:32+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T16:38:54+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T16:36:11+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Completed</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T15:42:22+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Transfer Started</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T15:42:11+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Route Request</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T15:42:09+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T15:41:58+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Route Request</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T15:41:31+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T15:41:17+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T12:54:33+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T12:54:12+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T12:51:58+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T12:51:12+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T12:49:56+00:00</time>
                    </article>
                    <article class="event">
                        <div class="icon">☎</div>
                        <div>
                            <b>Incoming Call</b>
                            <p>Event received by SI</p>
                        </div>
                        <time>2026-07-15T12:10:34+00:00</time>
                    </article>
                </div>
            </section>
            <aside class="rail glass">
                <h3>Command deck</h3>
                
                <div class="card" id="dialer">
                    <h4>Spatial dialer</h4>
                    <p style="color:var(--muted)">Enter a number or use the keypad. SI calls you first, then connects the destination.</p>
                    <form method="post" id="spatialDialerForm">
                        <input type="hidden" name="csrf" value="3f4c3f3da4e96f3fd6cd84517dd0c0eb4f1f92ca2d61c6679098e96199b3d747">
                        <label>Number to call</label>
                        <div class="dialer-display-wrap">
                            <input
                                class="dialer-display"
                                id="dialerNumber"
                                name="call_to"
                                type="tel"
                                inputmode="tel"
                                autocomplete="tel"
                                placeholder="+1 555 555 0123"
                                required>
                            <button class="dialer-backspace" type="button" id="dialerBackspace" aria-label="Delete last digit">⌫</button>
                        </div>

<div class="dialer-actions">
                            <button name="place_call" type="submit">☎ Place call</button>
                            <button class="dialer-clear" type="button" id="dialerClear" aria-label="Clear number">×</button>
                        </div>
                    </form>
                </div>

<div class="card">
                    <h4>Send message</h4>
                    <form method="post">
                        <input type="hidden" name="csrf" value="3f4c3f3da4e96f3fd6cd84517dd0c0eb4f1f92ca2d61c6679098e96199b3d747">
                        <label>Recipient</label>
                        <input name="to" value="+18703088682" required>
                        <label>Message</label>
                        <textarea name="message" placeholder="Type a message…" required></textarea>
                        <button name="send_sms">Send text</button>
                    </form>
                </div>
                <div class="card" id="tasks">
                    <h4>Tasks & reminders</h4>
                    <p style="color:var(--muted)">No open tasks.</p>
                </div>
                <div class="card" id="voicemail">
                    <h4>Latest voicemail</h4>
                    <p style="color:var(--muted)">No voicemail recorded yet.</p>
                </div>
            </aside>
        </div>
    </main>
    <script src="sphere-bg.js" defer></script>

keys.forEach((key) => {
            key.addEventListener('click', () => {
                const digit = key.dataset.digit;
                input.value += digit;
                input.focus();
            });
        });

backspace.addEventListener('click', () => {
            input.value = input.value.slice(0, -1);
            input.focus();
        });

clear.addEventListener('click', () => {
            input.value = '';
            input.focus();
        });

input.addEventListener('input', () => {
            input.value = input.value.replace(/[^0-9+*#().\-\s]/g, '');
        });
    })();
    </script>

</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump