Remote_Arm_UI/index.html at main · Rutgers-RPL/Remote_Arm_UI · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remote ARM Console</title>
    <link rel="stylesheet" href="tailwind-offline.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-slate-950 text-slate-100 font-mono">
    <div class="flex h-screen overflow-hidden">

        <aside id="sidebar" class="w-64 bg-slate-900 border-r border-slate-800 p-6 hidden">
            <h2 class="text-xs font-bold text-slate-500 mb-6 uppercase tracking-widest">Connected Nodes</h2>
            <ul id="board-list" class="space-y-2">
                </ul>
        </aside>

        <main class="flex-1 p-10 overflow-y-auto">

            <div id="connection-screen" class="h-full flex flex-col items-center justify-center">
                <h1 class="text-5xl font-black mb-10 tracking-tighter">Remote ARM</h1>
                <div class="flex flex-col gap-4">
                    <button id="connect-button" class="bg-blue-600 hover:bg-blue-500 text-white px-12 py-4 rounded-lg font-bold text-xl transition-all border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 shadow-lg shadow-blue-900/40">
                        ESTABLISH LINK
                    </button>
                    <button id="mock-button" class="text-slate-500 hover:text-slate-300 text-xs font-bold uppercase tracking-widest border border-slate-800 hover:border-slate-600 py-2 rounded transition-all">
                        Run Simulation (No Hardware)
                    </button>
                </div>
                <p class="mt-6 text-slate-500 text-sm">Ensure ESP32 is in pairing mode</p>
            </div>

            <div id="control-panel" class="hidden">
                <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 border-b border-slate-800 pb-8 gap-4">
                    <div>
                        <span class="text-blue-500 text-[10px] font-black uppercase tracking-[0.3em]">Operational Node</span>
                        <h1 id="board-title" class="text-4xl font-black tracking-tight flex items-center gap-4"></h1>
                    </div>
                    <button id="refresh-button" class="btn-industrial bg-slate-800 border-slate-900 hover:bg-slate-700 text-slate-300 px-6 py-2 rounded-lg text-xs transition-colors">
                        Re-sync Network
                    </button>
                </header>

                <div id="channel-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
                    </div>
            </div>
        </main>
    </div>

    <script src="app.js"></script>
</body>
</html>