diff options
Diffstat (limited to 'html/voice-memos/index.html')
| -rw-r--r-- | html/voice-memos/index.html | 169 |
1 files changed, 144 insertions, 25 deletions
diff --git a/html/voice-memos/index.html b/html/voice-memos/index.html index e328ee5..7c9213d 100644 --- a/html/voice-memos/index.html +++ b/html/voice-memos/index.html @@ -5,69 +5,188 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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; + } + body { - font-family: sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; - background-color:beige; + background-color: #f9f9f9; + color: var(--text-color); } + .container { background-color: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + 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: 10px; - margin: 20px 0; + gap: 12px; + margin: 24px 0; + justify-content: center; } + button { - padding: 8px 16px; + padding: 10px 20px; border: none; - border-radius: 4px; + 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; + } + + #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; - cursor: pointer; - transition: background-color 0.2s; } + button:hover { - background-color: #0056b3; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.1); } + button:disabled { - background-color: #ccc; + background-color: var(--medium-gray); + color: var(--dark-gray); cursor: not-allowed; + transform: none; + box-shadow: none; } + select { - padding: 8px; - border-radius: 4px; - border: 1px solid #ddd; - margin-bottom: 20px; + 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-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: right 12px top 50%; + background-size: 12px auto; + } + + .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: 100px; - background-color: #f8f8f8; - border-radius: 4px; - margin: 20px 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; } + .status { - margin: 10px 0; + 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"> - <select id="inputSource"></select> + <h1>Voice Memos</h1> + + <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">Start Recording</button> + <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="waveform"></div> + <div id="status" class="status">Select an input source to begin</div> </div> <script src="app.js"></script> |