-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
253 lines (239 loc) · 13.6 KB
/
index.html
File metadata and controls
253 lines (239 loc) · 13.6 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow AI</title>
<link rel="stylesheet" href="styles.css">
<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@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<!-- Title Bar -->
<header class="titlebar">
<div class="titlebar-left">
<div class="window-controls">
<button class="window-btn close" id="btn-close"></button>
<button class="window-btn minimize" id="btn-minimize"></button>
<button class="window-btn maximize" id="btn-maximize"></button>
</div>
<div class="app-branding">
<div class="status-dot" id="status-dot"></div>
<h1 class="app-title">Shadow AI</h1>
<span class="badge demo" id="demo-badge">DEMO</span>
</div>
</div>
<div class="titlebar-right">
<div class="opacity-control">
<span class="opacity-label">Opacity</span>
<input type="range" id="opacity-slider" min="30" max="100" value="100" class="opacity-slider">
<span class="opacity-value" id="opacity-value">100%</span>
</div>
<span class="hotkey-badge">CMD+SHIFT+L</span>
<!-- Screen Capture Button -->
<button class="icon-btn capture-btn" id="btn-capture" title="Capture Screen (CMD+SHIFT+S)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
</button>
<button class="icon-btn context-btn" id="btn-context" title="Add Context Files">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="12" y1="18" x2="12" y2="12"></line>
<line x1="9" y1="15" x2="15" y2="15"></line>
</svg>
<span class="context-badge hidden" id="context-badge">0</span>
</button>
<button class="icon-btn action-items-btn" id="btn-toggle-actions" title="Action Items Tracker">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11l3 3L22 4"></path>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
<span class="action-items-badge hidden" id="action-items-badge">0</span>
</button>
<button class="icon-btn" id="btn-download" title="Download Session Transcript">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</button>
<button class="icon-btn" id="btn-settings" title="Settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
</button>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- Left Pane: Transcription -->
<section class="pane transcription-pane">
<div class="pane-header">
<span class="pane-title">LIVE TRANSCRIPTION</span>
<span class="pane-count" id="transcript-count">0</span>
</div>
<div class="pane-content" id="transcription-list">
<div class="empty-state" id="transcript-empty">
<p class="empty-title">No audio detected</p>
<span class="empty-subtitle">Press CMD+SHIFT+L to start</span>
</div>
</div>
<!-- Manual Question Input -->
<div class="chat-input-container">
<input type="text" id="manual-question-input" class="chat-input"
placeholder="Type a question manually..." autocomplete="off">
<button id="send-question-btn" class="send-btn" title="Send question">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
</section>
<!-- Divider -->
<div class="pane-divider"></div>
<!-- Right Pane: AI Responses -->
<section class="pane response-pane">
<div class="pane-header">
<span class="pane-title">AI RESPONSES</span>
<div class="pane-actions">
<button class="mode-toggle" id="btn-code-mode" title="View Code Snippets">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
<span>Code</span>
<span class="snippet-badge" id="snippet-badge" style="display:none;">0</span>
</button>
<button class="clear-btn" id="btn-clear" title="Clear history">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
</svg>
</button>
</div>
</div>
<div class="pane-content" id="response-list">
<div class="empty-state" id="response-empty">
<p class="empty-title">Waiting for input</p>
<span class="empty-subtitle">Responses appear here</span>
</div>
</div>
</section>
<!-- Action Items Sidebar -->
<aside class="action-items-panel hidden" id="action-items-panel">
<div class="action-items-header">
<span class="action-items-title">📋 ACTION ITEMS</span>
<span class="action-items-count" id="action-items-count">0</span>
</div>
<div class="action-items-list" id="action-items-list">
<div class="empty-state action-items-empty" id="action-items-empty">
<p class="empty-title">No action items yet</p>
<span class="empty-subtitle">They'll appear when detected in conversation</span>
</div>
</div>
<div class="action-items-footer">
<button class="btn btn-secondary action-items-copy" id="btn-copy-actions">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
Copy All
</button>
<button class="btn btn-secondary action-items-clear" id="btn-clear-actions">Clear</button>
</div>
</aside>
</main>
<!-- Processing Indicator -->
<div class="processing-bar" id="processing-bar">
<div class="processing-progress"></div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal-overlay hidden" id="settings-modal">
<div class="modal">
<div class="modal-header">
<h2>Settings</h2>
<button class="modal-close" id="btn-modal-close">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="api-key">Groq API Key</label>
<input type="password" id="api-key" placeholder="gsk_..." autocomplete="off">
<span class="form-hint">Get a free key at <a href="https://console.groq.com"
target="_blank">console.groq.com</a></span>
</div>
<div class="form-group">
<label>Permissions</label>
<div class="permission-status" id="permission-status">
<span class="permission-dot"></span>
<span>Checking...</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="btn-cancel">Cancel</button>
<button class="btn btn-primary" id="btn-save">Save</button>
</div>
</div>
</div>
<!-- Context Files Modal -->
<div class="modal-overlay hidden" id="context-modal">
<div class="modal modal-wide">
<div class="modal-header">
<h2>Context Files</h2>
<button class="modal-close" id="btn-context-close">×</button>
</div>
<div class="modal-body">
<p class="modal-description">Upload files to give the AI more context about your topic. Supported: PDF, DOCX,
TXT, images.</p>
<div class="drop-zone" id="drop-zone">
<div class="drop-zone-content">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
<p class="drop-zone-title">Drop files here or click to browse</p>
<span class="drop-zone-hint">PDF, DOCX, TXT, PNG, JPG (max 10MB each)</span>
</div>
<input type="file" id="file-input" multiple accept=".pdf,.docx,.doc,.txt,.png,.jpg,.jpeg" hidden>
</div>
<div class="file-list" id="file-list">
<!-- Files will be added here dynamically -->
</div>
<div class="context-preview hidden" id="context-preview">
<label>Extracted Context</label>
<div class="context-text" id="context-text"></div>
</div>
</div>
<div class="modal-footer">
<span class="file-count" id="file-count">0 files loaded</span>
<button class="btn btn-secondary" id="btn-clear-files">Clear All</button>
<button class="btn btn-primary" id="btn-apply-context">Apply Context</button>
</div>
</div>
</div>
<script src="services/audio.js"></script>
<script src="services/groq.js"></script>
<script src="services/context.js"></script>
<script src="services/code-extractor.js"></script>
<script src="renderer.js"></script>
</body>
</html>