diff options
Diffstat (limited to 'html/voice-memos/index.html')
| -rw-r--r-- | html/voice-memos/index.html | 248 |
1 files changed, 248 insertions, 0 deletions
diff --git a/html/voice-memos/index.html b/html/voice-memos/index.html new file mode 100644 index 0000000..af4aaef --- /dev/null +++ b/html/voice-memos/index.html @@ -0,0 +1,248 @@ +<!DOCTYPE html> +<html lang="en"> +<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 { + --primary-color: #ff3b30; + --secondary-color: #34c759; + --text-color: #333; + --light-gray: #f2f2f7; + --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: -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 { + background-color: white; + padding: 24px; + border-radius: var(--border-radius); + box-shadow: 0 4px 20px rgba(0,0,0,0.08); + } + + h1 { + font-size: 24px; + font-weight: 600; + margin-top: 0; + margin-bottom: 24px; + text-align: center; + } + + .input-container { + margin-bottom: 24px; + } + + .controls { + display: flex; + gap: 12px; + margin: 24px 0; + justify-content: center; + } + + button { + padding: 10px 20px; + border: none; + border-radius: 24px; + font-weight: 500; + font-size: 14px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + 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 { + background-color: var(--primary-color); + color: white; + } + + #stopBtn { + background-color: var(--dark-gray); + color: white; + } + + #playBtn { + background-color: var(--secondary-color); + color: white; + } + + #saveBtn { + background-color: #007AFF; + color: white; + } + + button:disabled { + background-color: var(--medium-gray) !important; + color: var(--dark-gray); + cursor: not-allowed; + transform: none; + box-shadow: none; + } + + select { + width: 100%; + padding: 12px; + border-radius: var(--border-radius); + border: 1px solid var(--medium-gray); + background-color: var(--light-gray); + font-size: 14px; + appearance: none; + background-repeat: no-repeat; + background-position: right 12px top 50%; + background-size: 12px auto; + touch-action: manipulation; + } + + .waveform-container { + position: relative; + width: 100%; + height: 120px; + background-color: var(--light-gray); + border-radius: var(--border-radius); + margin: 24px 0; + overflow: hidden; + } + + #waveform { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .status { + text-align: center; + margin: 16px 0; + font-size: 14px; + color: var(--dark-gray); + font-weight: 500; + } + + .recording-indicator { + display: none; + position: absolute; + top: 10px; + right: 10px; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: var(--primary-color); + animation: pulse 1.5s infinite; + } + + @keyframes pulse { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); + } + } + </style> +</head> +<body> + <div class="container"> + + <div class="input-container"> + <select id="inputSource"></select> + </div> + + <div class="waveform-container"> + <div id="waveform"></div> + <div class="recording-indicator" id="recordingIndicator"></div> + </div> + + <div class="controls"> + <button id="startBtn">Record</button> + <button id="stopBtn" disabled>Stop</button> + <button id="playBtn" disabled>Play</button> + <button id="saveBtn" disabled>Save</button> + </div> + + <div id="status" class="status">Select an input source to begin</div> + </div> + <script src="app.js"></script> +</body> +</html> \ No newline at end of file |