-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
131 lines (121 loc) · 6.51 KB
/
index.html
File metadata and controls
131 lines (121 loc) · 6.51 KB
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NervShell - AI Agent</title>
<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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./src/client/styles/main.css">
</head>
<body class="bg-bg-dark text-white h-screen overflow-hidden antialiased font-sans">
<div class="flex h-screen app">
<!-- Sidebar -->
<aside
class="sidebar w-[320px] bg-bg-dark/50 border-r border-white/5 flex flex-col p-8 gap-8 z-10 transition-premium">
<div class="sidebar-header">
<div class="flex items-center gap-3 logo group cursor-pointer">
<div
class="flex items-center justify-center w-12 h-12 font-bold text-white rounded-xl logo-icon accent-gradient shadow-glow-red font-mono text-lg transition-premium group-hover:scale-110">
NS</div>
<div class="flex flex-col">
<span class="text-2xl font-black logo-text tracking-tighter leading-none italic">
<span class="text-accent">Nerv</span>Shell
</span>
<span class="text-[9px] font-bold tracking-[0.3em] text-white/30 uppercase mt-1">Vision System v4</span>
</div>
</div>
</div>
<nav class="flex flex-col flex-1 gap-6 sidebar-nav">
<button id="new-chat-btn"
class="flex items-center justify-center gap-3 px-6 py-4 text-xs font-black tracking-widest uppercase text-white transition-premium rounded-lg accent-gradient shadow-glow-red hover:brightness-110 active:scale-95">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
New Session
</button>
<div class="mt-4 space-y-6">
<h3 class="title-chevron px-2 text-[11px] font-black tracking-[0.2em] text-white/40 uppercase">Capabilities
</h3>
<div id="feature-list" class="grid grid-cols-1 gap-3">
<!-- Dynamic feature cards populated by JS -->
</div>
</div>
<div class="mt-auto">
<button id="clear-btn"
class="group w-full flex items-center gap-3 px-4 py-3 text-[10px] font-bold tracking-widest uppercase transition-premium rounded-lg text-white/30 hover:bg-white/5 hover:text-accent active:scale-95">
<svg class="transition-premium group-hover:rotate-12" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5">
<path d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
</svg>
Purge History
</button>
</div>
</nav>
<div class="pt-6 border-t border-white/5 sidebar-footer">
<div
class="flex items-center justify-between px-3 py-2 text-[10px] font-bold tracking-widest uppercase text-white/40">
<span>Neural Engine</span>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-secondary shadow-glow-teal animate-pulse"></span>
<span id="model-name" class="text-white/60">Vision-1</span>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main
class="relative flex flex-col flex-1 overflow-hidden main h-full bg-gradient-to-b from-transparent to-bg-dark/80">
<div class="flex flex-col flex-1 overflow-hidden chat-section relative">
<div id="output"
class="flex flex-col flex-1 gap-12 overflow-y-auto px-12 py-12 pb-[160px] chat-container scrollbar-premium">
<div class="flex flex-col items-center justify-center welcome-container h-[55vh]">
<div class="text-center welcome-message">
<h1
class="text-8xl font-black tracking-tighter mb-4 italic opacity-0 animate-[fade-in_1s_ease-out_forwards]">
<span class="text-accent glow-red">Nerv</span>Shell
</h1>
<p
class="mx-auto text-xl font-medium tracking-tight max-w-lg text-white/30 opacity-0 animate-[fade-in_1s_ease-out_0.2s_forwards] uppercase tracking-[0.2em] text-sm font-bold">
The AI that gets things done.
</p>
</div>
</div>
</div>
<div class="input-mask"></div>
<!-- Input Area -->
<div class="absolute bottom-0 left-0 right-0 z-10 p-12 pointer-events-none input-section">
<div class="w-full mx-auto max-w-[900px] pointer-events-auto">
<form id="chat-form"
class="relative flex items-center p-3 rounded-2xl transition-premium glass-panel border-white/10 hover:border-accent/30 focus-within:border-accent/50 focus-within:shadow-glow-red group bg-bg-elevated/40">
<input type="text" id="input"
class="flex-1 px-6 py-5 text-lg bg-transparent border-none outline-none main-input text-white placeholder-white/10 font-medium"
placeholder="Talk to NervShell..." autocomplete="off">
<button id="send-btn" type="submit"
class="flex items-center justify-center w-16 h-16 mr-1 text-white transition-premium rounded-xl shadow-glow-red accent-gradient hover:scale-105 active:scale-95 group-focus-within:rotate-2">
<svg class="pointer-events-none" width="28" height="28" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3">
<path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2"></path>
</svg>
</button>
</form>
<div class="flex justify-center gap-8 mt-6 opacity-40">
<div class="flex items-center gap-2 text-[9px] font-black tracking-[0.3em] uppercase">
<span class="w-1.5 h-1.5 rounded-full bg-accent"></span> Safe Mode Active
</div>
<div class="flex items-center gap-2 text-[9px] font-black tracking-[0.3em] uppercase">
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span> Neural Link Ready
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script type="module" src="./src/client/app.ts"></script>
</body>
</html>