Hugging Face's logo

Spaces:
MikeDoes
/
terminal-visualiser
Running

App Files Community
MikeDoes commited on
Commit
6c7b466
·
verified ·
1 Parent(s): e22e721

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +318 -19
index.html CHANGED
@@ -1,19 +1,318 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Terminal Screenshot</title>
8
+ <style>
9
+ :root {
10
+ --bg-gradient: linear-gradient(135deg, #66a6ff 0%, #89f7fe 100%);
11
+ --term-bg: #0d1117;
12
+ --term-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
13
+ --text-color: #c9d1d9;
14
+ --header-bg: #0d1117;
15
+ --title-color: #8b949e;
16
+ --font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
17
+
18
+ /* Syntax Colors */
19
+ --kw-color: #ff7b72;
20
+ /* from, import */
21
+ --mod-color: #79c0ff;
22
+ /* module */
23
+ --func-color: #d2a8ff;
24
+ /* function */
25
+ --str-color: #a5d6ff;
26
+ /* string */
27
+ --comment-color: #8b949e;
28
+ /* comment */
29
+ --arg-color: #79c0ff;
30
+ /* arguments */
31
+ }
32
+
33
+ /* Neon Theme */
34
+ body.theme-neon {
35
+ --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
36
+ --term-bg: #1a1a2e;
37
+ --term-shadow: 0 0 20px rgba(86, 211, 100, 0.2), 0 0 60px rgba(86, 211, 100, 0.1);
38
+ --text-color: #e0e0e0;
39
+ --header-bg: #16213e;
40
+ --title-color: #56d364;
41
+ --kw-color: #ff00ff;
42
+ --mod-color: #00ffff;
43
+ --func-color: #00ff00;
44
+ --str-color: #ffff00;
45
+ --comment-color: #6c757d;
46
+ }
47
+
48
+ /* Minimal Theme */
49
+ body.theme-minimal {
50
+ --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
51
+ --term-bg: #ffffff;
52
+ --term-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
53
+ --text-color: #24292e;
54
+ --header-bg: #f6f8fa;
55
+ --title-color: #586069;
56
+ --kw-color: #d73a49;
57
+ --mod-color: #005cc5;
58
+ --func-color: #6f42c1;
59
+ --str-color: #032f62;
60
+ --comment-color: #6a737d;
61
+ }
62
+
63
+ body {
64
+ margin: 0;
65
+ padding: 0;
66
+ display: flex;
67
+ justify-content: center;
68
+ align-items: center;
69
+ flex-direction: column;
70
+ gap: 30px;
71
+ min-height: 100vh;
72
+ background: var(--bg-gradient);
73
+ font-family: var(--font-family);
74
+ transition: background 0.3s ease;
75
+ }
76
+
77
+ .container {
78
+ display: flex;
79
+ flex-direction: column;
80
+ align-items: center;
81
+ gap: 20px;
82
+ }
83
+
84
+ .controls-panel {
85
+ display: flex;
86
+ gap: 10px;
87
+ background: rgba(255, 255, 255, 0.2);
88
+ padding: 10px;
89
+ border-radius: 8px;
90
+ backdrop-filter: blur(10px);
91
+ }
92
+
93
+ .theme-btn {
94
+ padding: 8px 16px;
95
+ border: none;
96
+ border-radius: 4px;
97
+ cursor: pointer;
98
+ font-weight: 600;
99
+ background: rgba(255, 255, 255, 0.8);
100
+ color: #333;
101
+ transition: all 0.2s;
102
+ }
103
+
104
+ .theme-btn:hover {
105
+ transform: translateY(-1px);
106
+ background: #fff;
107
+ }
108
+
109
+ .download-btn {
110
+ padding: 12px 24px;
111
+ background-color: #ffffff;
112
+ color: #333;
113
+ border: none;
114
+ border-radius: 6px;
115
+ font-size: 16px;
116
+ font-weight: 600;
117
+ cursor: pointer;
118
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
119
+ transition: transform 0.1s, box-shadow 0.1s;
120
+ }
121
+
122
+ .download-btn:hover {
123
+ transform: translateY(-2px);
124
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
125
+ }
126
+
127
+ .terminal-window {
128
+ background-color: var(--term-bg);
129
+ width: 800px;
130
+ border-radius: 10px;
131
+ box-shadow: var(--term-shadow);
132
+ overflow: hidden;
133
+ padding-bottom: 20px;
134
+ transition: all 0.3s ease;
135
+ }
136
+
137
+ .terminal-header {
138
+ background-color: var(--header-bg);
139
+ padding: 15px;
140
+ display: flex;
141
+ align-items: center;
142
+ position: relative;
143
+ transition: background-color 0.3s ease;
144
+ }
145
+
146
+ .window-controls {
147
+ display: flex;
148
+ gap: 8px;
149
+ }
150
+
151
+ .control {
152
+ width: 12px;
153
+ height: 12px;
154
+ border-radius: 50%;
155
+ }
156
+
157
+ .close {
158
+ background-color: #ff5f56;
159
+ }
160
+
161
+ .minimize {
162
+ background-color: #ffbd2e;
163
+ }
164
+
165
+ .maximize {
166
+ background-color: #27c93f;
167
+ }
168
+
169
+ .title {
170
+ position: absolute;
171
+ left: 0;
172
+ right: 0;
173
+ text-align: center;
174
+ color: var(--title-color);
175
+ font-size: 14px;
176
+ font-weight: 500;
177
+ }
178
+
179
+ .terminal-content {
180
+ padding: 20px 30px;
181
+ color: var(--text-color);
182
+ font-size: 16px;
183
+ line-height: 1.6;
184
+ }
185
+
186
+ .code-line {
187
+ display: block;
188
+ margin-bottom: 15px;
189
+ }
190
+
191
+ .code-block {
192
+ margin-bottom: 15px;
193
+ }
194
+
195
+ .code-row {
196
+ display: block;
197
+ line-height: 1.6;
198
+ }
199
+
200
+ .indent {
201
+ padding-left: 40px;
202
+ }
203
+
204
+ .keyword {
205
+ color: var(--kw-color);
206
+ }
207
+
208
+ .module {
209
+ color: var(--mod-color);
210
+ font-weight: bold;
211
+ }
212
+
213
+ .function {
214
+ color: var(--func-color);
215
+ }
216
+
217
+ .string {
218
+ color: var(--str-color);
219
+ }
220
+
221
+ .comment {
222
+ color: var(--comment-color);
223
+ font-style: italic;
224
+ }
225
+
226
+ .argument {
227
+ color: var(--arg-color);
228
+ }
229
+ </style>
230
+ </head>
231
+
232
+ <body>
233
+
234
+ <div class="controls-panel" data-html2canvas-ignore="true">
235
+ <button class="theme-btn" onclick="setTheme('')">Default</button>
236
+ <button class="theme-btn" onclick="setTheme('theme-neon')">Neon</button>
237
+ <button class="theme-btn" onclick="setTheme('theme-minimal')">Minimal</button>
238
+ </div>
239
+
240
+ <div class="container">
241
+ <div class="terminal-window" id="terminal">
242
+ <div class="terminal-header">
243
+ <div class="window-controls">
244
+ <div class="control close"></div>
245
+ <div class="control minimize"></div>
246
+ <div class="control maximize"></div>
247
+ </div>
248
+ <div class="title" contenteditable="true">Community Research Highlight</div>
249
+ </div>
250
+ <div class="terminal-content" contenteditable="true">
251
+ <div class="code-line">
252
+ <span class="keyword">from</span> <span class="module">ai4privacy</span> <span
253
+ class="keyword">import</span> <span class="function">community_research</span>
254
+ </div>
255
+
256
+ <div class="code-line">
257
+ <span class="comment"># "Rescriber" explores on-device anonymization with small LLMs.</span>
258
+ </div>
259
+
260
+ <div class="code-block">
261
+ <div class="code-row">
262
+ <span class="module">community_research</span>.<span class="function">highlight</span>(
263
+ </div>
264
+ <div class="code-row indent">
265
+ <span class="argument">paper</span>=<span class="string">"Rescriber: On-device
266
+ anonymization"</span>,
267
+ </div>
268
+ <div class="code-row indent">
269
+ <span class="argument">validation</span>=<span class="string">"Ai4Privacy Open Dataset"</span>,
270
+ </div>
271
+ <div class="code-row indent">
272
+ <span class="argument">impact</span>=<span class="string">"Proving feasibility of on-device
273
+ AI"</span>
274
+ </div>
275
+ <div class="code-row">
276
+ )
277
+ </div>
278
+ </div>
279
+
280
+ <div class="code-line">
281
+ <span class="comment"># Shoutout to Jijie Zhou, Eryue Xu, Yaoyao Wu, and Tianshi Li!</span>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <button class="download-btn" onclick="downloadTerminal()" data-html2canvas-ignore="true">Download PNG</button>
287
+ </div>
288
+
289
+ <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
290
+ <script>
291
+ function setTheme(themeName) {
292
+ document.body.className = themeName;
293
+ }
294
+
295
+ function downloadTerminal() {
296
+ const elementToCapture = document.body;
297
+
298
+ html2canvas(elementToCapture, {
299
+ backgroundColor: null,
300
+ scale: 4,
301
+ ignoreElements: (element) => {
302
+ return element.classList.contains('download-btn') ||
303
+ element.classList.contains('controls-panel');
304
+ },
305
+ windowWidth: 1200, // Ensure consistent width
306
+ windowHeight: 800
307
+ }).then(canvas => {
308
+ const link = document.createElement('a');
309
+ link.download = 'terminal-screenshot.png';
310
+ link.href = canvas.toDataURL('image/png');
311
+ link.click();
312
+ });
313
+ }
314
+ </script>
315
+
316
+ </body>
317
+
318
+ </html>