Hugging Face's logo

Spaces:
FJFehr
/
virtual_keyboard
Running

App Files Community
1
FJFehr commited on
Commit
9de8877
·
1 Parent(s): df756df

Cellphone improvements

Browse files
Files changed (2) hide show
  1. keyboard.html +1 -1
  2. static/styles.css +135 -0
keyboard.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <title>Virtual MIDI Keyboard</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
  <link rel="stylesheet" href="/file=static/styles.css" />
8
  </head>
9
  <body>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <title>Virtual MIDI Keyboard</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
7
  <link rel="stylesheet" href="/file=static/styles.css" />
8
  </head>
9
  <body>
static/styles.css CHANGED
@@ -8,6 +8,7 @@ body {
8
  background: linear-gradient(180deg, #0a0a0f 0%, #1a0a1f 100%);
9
  color: #e0e0ff;
10
  min-height: 100vh;
 
11
  }
12
 
13
  /* Welcome Header */
@@ -59,6 +60,7 @@ body {
59
  #keyboard {
60
  display: flex;
61
  user-select: none;
 
62
  padding: 20px;
63
  background: rgba(0, 0, 0, 0.4);
64
  border-radius: 15px;
@@ -79,6 +81,7 @@ body {
79
  align-items: flex-end;
80
  justify-content: center;
81
  cursor: pointer;
 
82
  transition: all 0.1s ease;
83
  box-shadow:
84
  0 4px 8px rgba(0, 0, 0, 0.3),
@@ -281,3 +284,135 @@ input[type="checkbox"] {
281
  #terminal::-webkit-scrollbar-thumb:hover {
282
  background: linear-gradient(180deg, #ff33ff 0%, #aa00ff 100%);
283
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  background: linear-gradient(180deg, #0a0a0f 0%, #1a0a1f 100%);
9
  color: #e0e0ff;
10
  min-height: 100vh;
11
+ overflow-x: hidden;
12
  }
13
 
14
  /* Welcome Header */
 
60
  #keyboard {
61
  display: flex;
62
  user-select: none;
63
+ touch-action: none;
64
  padding: 20px;
65
  background: rgba(0, 0, 0, 0.4);
66
  border-radius: 15px;
 
81
  align-items: flex-end;
82
  justify-content: center;
83
  cursor: pointer;
84
+ touch-action: none;
85
  transition: all 0.1s ease;
86
  box-shadow:
87
  0 4px 8px rgba(0, 0, 0, 0.3),
 
284
  #terminal::-webkit-scrollbar-thumb:hover {
285
  background: linear-gradient(180deg, #ff33ff 0%, #aa00ff 100%);
286
  }
287
+ /* =============================================================================
288
+ RESPONSIVE DESIGN - MOBILE & TABLET
289
+ ============================================================================= */
290
+
291
+ /* Tablet (landscape) */
292
+ @media (max-width: 1024px) {
293
+ .welcome-header h1 {
294
+ font-size: 2em;
295
+ }
296
+
297
+ .key {
298
+ width: 35px;
299
+ height: 150px;
300
+ }
301
+
302
+ .key.black {
303
+ width: 25px;
304
+ height: 95px;
305
+ margin-left: -12px;
306
+ margin-right: -12px;
307
+ }
308
+ }
309
+
310
+ /* Mobile (portrait and small screens) */
311
+ @media (max-width: 768px) {
312
+ body {
313
+ padding: 10px;
314
+ }
315
+
316
+ .welcome-header {
317
+ padding: 15px;
318
+ margin-bottom: 15px;
319
+ }
320
+
321
+ .welcome-header h1 {
322
+ font-size: 1.8em;
323
+ letter-spacing: 3px;
324
+ }
325
+
326
+ #mainContainer {
327
+ gap: 10px;
328
+ }
329
+
330
+ #keyboard {
331
+ padding: 10px;
332
+ overflow-x: auto;
333
+ overflow-y: hidden;
334
+ -webkit-overflow-scrolling: touch;
335
+ }
336
+
337
+ .key {
338
+ width: 28px;
339
+ height: 120px;
340
+ font-size: 9px;
341
+ }
342
+
343
+ .key.black {
344
+ width: 20px;
345
+ height: 75px;
346
+ margin-left: -10px;
347
+ margin-right: -10px;
348
+ }
349
+
350
+ .key .shortcut-hint {
351
+ font-size: 8px;
352
+ }
353
+
354
+ .controls {
355
+ gap: 8px;
356
+ padding: 10px;
357
+ font-size: 14px;
358
+ }
359
+
360
+ button, select {
361
+ font-size: 12px;
362
+ padding: 6px 10px;
363
+ }
364
+
365
+ #status {
366
+ font-size: 12px;
367
+ }
368
+
369
+ .terminal-header h4 {
370
+ font-size: 14px;
371
+ }
372
+
373
+ #terminal {
374
+ height: 150px;
375
+ font-size: 11px;
376
+ }
377
+ }
378
+
379
+ /* Very small mobile (portrait) */
380
+ @media (max-width: 480px) {
381
+ .welcome-header h1 {
382
+ font-size: 1.5em;
383
+ letter-spacing: 2px;
384
+ }
385
+
386
+ .key {
387
+ width: 22px;
388
+ height: 100px;
389
+ font-size: 8px;
390
+ }
391
+
392
+ .key.black {
393
+ width: 16px;
394
+ height: 65px;
395
+ margin-left: -8px;
396
+ margin-right: -8px;
397
+ }
398
+
399
+ .key .shortcut-hint {
400
+ font-size: 7px;
401
+ }
402
+
403
+ .controls {
404
+ gap: 6px;
405
+ padding: 8px;
406
+ font-size: 12px;
407
+ }
408
+
409
+ button, select {
410
+ font-size: 11px;
411
+ padding: 5px 8px;
412
+ }
413
+
414
+ #terminal {
415
+ height: 120px;
416
+ font-size: 10px;
417
+ }
418
+ }