diff options
| author | elioat <{ID}+{username}@users.noreply.github.com> | 2025-03-11 09:20:15 -0400 |
|---|---|---|
| committer | elioat <{ID}+{username}@users.noreply.github.com> | 2025-03-11 09:20:15 -0400 |
| commit | a159ef43f6a0d3bb8b25a9a12d0f514848bc99da (patch) | |
| tree | 9fdf446f5f79274e70543da3482ba5f6e8b160b3 /html | |
| parent | 45efc6b67f934adaed304260342bbfca600210b2 (diff) | |
| download | tour-a159ef43f6a0d3bb8b25a9a12d0f514848bc99da.tar.gz | |
*
Diffstat (limited to 'html')
| -rw-r--r-- | html/voice-memos/index.html | 63 |
1 files changed, 62 insertions, 1 deletions
diff --git a/html/voice-memos/index.html b/html/voice-memos/index.html index a74a6df..af4aaef 100644 --- a/html/voice-memos/index.html +++ b/html/voice-memos/index.html @@ -3,6 +3,9 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="theme-color" content="#ff3b30"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>Voice Memos</title> <style> :root { @@ -13,15 +16,24 @@ --medium-gray: #e5e5ea; --dark-gray: #8e8e93; --border-radius: 12px; + --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); + } + + * { + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; } body { - font-family: sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: beige; color: var(--text-color); + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; } .container { @@ -62,6 +74,54 @@ align-items: center; justify-content: center; min-width: 100px; + touch-action: manipulation; + } + + button:active { + transform: scale(0.96); + } + + /* Mobile styles */ + @media screen and (max-width: 600px) { + body { + padding: 12px; + } + + .container { + padding: 16px; + padding-bottom: calc(16px + var(--safe-area-inset-bottom)); + margin-bottom: env(safe-area-inset-bottom); + } + + .controls { + flex-direction: column; + gap: 16px; + padding: 0; + } + + button { + width: 100%; + padding: 16px 20px; + font-size: 16px; + min-width: unset; + min-height: 48px; + } + + select { + height: 48px; + font-size: 16px; + padding: 12px 16px; + } + + .waveform-container { + height: 100px; + margin: 16px 0; + } + + .status { + font-size: 15px; + padding: 8px 0; + } } #startBtn { @@ -103,6 +163,7 @@ background-repeat: no-repeat; background-position: right 12px top 50%; background-size: 12px auto; + touch-action: manipulation; } .waveform-container { |