GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Audio Recorder Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121318;14 font-family: Roboto, Arial, Helvetica, sans-serif;15 color: #E9EDF7;16 }17 .statusbar {18 position: absolute;19 top: 30px;20 left: 0;21 width: 100%;22 height: 90px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #E9EDF7;28 font-size: 34px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .status-dot, .status-pill {37 background: #D7DAE6;38 border-radius: 50%;39 }40 .status-dot { width: 20px; height: 20px; opacity: 0.9; }41 .status-pill { width: 30px; height: 30px; border-radius: 8px; }42 .battery {43 width: 34px; height: 20px; border: 2px solid #E9EDF7; border-radius: 4px; position: relative;44 }45 .battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: #E9EDF7; border-radius: 2px; }46 .battery-fill { position: absolute; left: 3px; top: 3px; height: 12px; width: 22px; background: #E9EDF7; border-radius: 2px; }47 /* App bar */48 .appbar {49 position: absolute;50 top: 130px;51 left: 0;52 width: 100%;53 height: 90px;54 padding: 0 24px;55 display: flex;56 align-items: center;57 justify-content: space-between;58 }59 .app-icons {60 display: flex;61 align-items: center;62 gap: 36px;63 }64 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }65 .icon-btn svg { stroke: #DDE2EE; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }66 /* Card */67 .card {68 position: absolute;69 top: 240px;70 left: 24px;71 width: 1032px;72 height: 1100px;73 background: #171A24;74 border-radius: 42px;75 }76 .card h1 {77 margin: 56px 56px 12px;78 font-size: 60px;79 font-weight: 500;80 color: #EEF1F8;81 }82 .card .sub {83 margin: 0 56px;84 font-size: 32px;85 color: #A5A9B7;86 }87 /* Waveform area */88 .wave-area {89 position: absolute;90 bottom: 160px;91 left: 120px;92 width: 800px;93 height: 320px;94 }95 .playhead {96 position: absolute;97 left: 250px;98 top: 10px;99 bottom: 10px;100 width: 6px;101 background: #7E8296;102 border-radius: 3px;103 opacity: 0.7;104 }105 .bars {106 position: absolute;107 left: 270px;108 bottom: 20px;109 display: flex;110 align-items: flex-end;111 gap: 10px;112 }113 .bar {114 width: 14px;115 background: #7E8296;116 border-radius: 8px;117 opacity: 0.85;118 }119 .bar.blue { background: #6F8DD8; }120 /* Tabs */121 .tabs {122 position: absolute;123 top: 1390px;124 left: 110px;125 display: flex;126 gap: 26px;127 }128 .pill {129 display: flex;130 align-items: center;131 gap: 16px;132 padding: 22px 34px;133 background: #1C2030;134 color: #E9EDF7;135 border-radius: 40px;136 font-size: 34px;137 }138 .pill.inactive { background: #161A24; color: #B4BAC9; }139 .pill svg { stroke: currentColor; fill: none; stroke-width: 3; }140 /* Progress */141 .progress-wrap {142 position: absolute;143 top: 1550px;144 left: 72px;145 width: 936px;146 }147 .progress-bar {148 position: relative;149 height: 12px;150 background: #2B3142;151 border-radius: 8px;152 overflow: hidden;153 }154 .progress-fill {155 position: absolute;156 left: 0;157 top: 0;158 height: 12px;159 width: 180px;160 background: #8FA0D6;161 }162 .progress-knob {163 position: absolute;164 left: -10px;165 top: -8px;166 width: 28px;167 height: 28px;168 background: #CFD1E6;169 border-radius: 50%;170 box-shadow: 0 0 0 3px rgba(143,160,214,0.25);171 }172 .time-row {173 margin-top: 20px;174 display: flex;175 justify-content: space-between;176 font-size: 34px;177 color: #DDE2EE;178 }179 /* Controls */180 .controls {181 position: absolute;182 top: 1720px;183 left: 72px;184 width: 936px;185 display: flex;186 justify-content: space-between;187 align-items: center;188 }189 .control {190 width: 232px;191 height: 232px;192 background: #1A1E29;193 border-radius: 50%;194 display: flex;195 align-items: center;196 justify-content: center;197 }198 .control.center {199 width: 280px;200 height: 280px;201 background: #CAC8E3;202 color: #1D2230;203 }204 .control svg { stroke: #DDE2EE; fill: none; stroke-width: 3; }205 .control.center svg { stroke: #1D2230; }206 .control .label {207 position: absolute;208 font-size: 30px;209 color: #DDE2EE;210 }211 /* Gesture bar */212 .gesture {213 position: absolute;214 bottom: 46px;215 left: 50%;216 transform: translateX(-50%);217 width: 240px;218 height: 12px;219 background: #E6E7EB;220 border-radius: 8px;221 opacity: 0.9;222 }223</style>224</head>225<body>226<div id="render-target">227 <!-- Status Bar -->228 <div class="statusbar">229 <div>5:59</div>230 <div class="status-icons">231 <div class="status-dot"></div>232 <div class="status-pill"></div>233 <div class="status-dot" style="width:24px;height:24px;"></div>234 <div class="status-dot"></div>235 <div class="status-dot"></div>236 <div class="battery"><div class="battery-fill"></div></div>237 </div>238 </div>239 240 <!-- App Bar -->241 <div class="appbar">242 <div class="icon-btn">243 <svg width="48" height="48" viewBox="0 0 24 24">244 <polyline points="18,5 7,12 18,19"></polyline>245 </svg>246 </div>247 <div class="app-icons">248 <div class="icon-btn">249 <svg width="48" height="48" viewBox="0 0 24 24">250 <circle cx="6" cy="12" r="2"></circle>251 <circle cx="18" cy="6" r="2"></circle>252 <circle cx="18" cy="18" r="2"></circle>253 <polyline points="7.7,11 16.3,7"></polyline>254 <polyline points="7.7,13 16.3,17"></polyline>255 </svg>256 </div>257 <div class="icon-btn">258 <svg width="48" height="48" viewBox="0 0 24 24">259 <line x1="5" y1="5" x2="14" y2="14"></line>260 <line x1="5" y1="14" x2="14" y2="5"></line>261 <circle cx="18" cy="7" r="2"></circle>262 <circle cx="6" cy="17" r="2"></circle>263 </svg>264 </div>265 <div class="icon-btn">266 <svg width="48" height="48" viewBox="0 0 24 24">267 <circle cx="11" cy="11" r="6"></circle>268 <line x1="16.5" y1="16.5" x2="21" y2="21"></line>269 </svg>270 </div>271 <div class="icon-btn">272 <svg width="48" height="48" viewBox="0 0 24 24">273 <circle cx="12" cy="6" r="2"></circle>274 <circle cx="12" cy="12" r="2"></circle>275 <circle cx="12" cy="18" r="2"></circle>276 </svg>277 </div>278 </div>279 </div>280 281 <!-- Content Card -->282 <div class="card">283 <h1>Wednesday at 12:57 am</h1>284 <div class="sub">Thu, Jul 6 • 11:55 AM</div>285 286 <div class="wave-area">287 <div class="playhead"></div>288 <div class="bars">289 <div class="bar" style="height:80px;"></div>290 <div class="bar" style="height:110px;"></div>291 <div class="bar" style="height:140px;"></div>292 <div class="bar" style="height:160px;"></div>293 <div class="bar" style="height:150px;"></div>294 <div class="bar" style="height:130px;"></div>295 <div class="bar" style="height:120px;"></div>296 <div class="bar" style="height:135px;"></div>297 <div class="bar" style="height:150px;"></div>298 <div class="bar" style="height:165px;"></div>299 <div class="bar" style="height:150px;"></div>300 <div class="bar" style="height:130px;"></div>301 <div class="bar" style="height:115px;"></div>302 <div class="bar" style="height:120px;"></div>303 <div class="bar" style="height:130px;"></div>304 <div class="bar blue" style="height:140px;"></div>305 <div class="bar blue" style="height:130px;"></div>306 <div class="bar blue" style="height:120px;"></div>307 <div class="bar blue" style="height:110px;"></div>308 <div class="bar blue" style="height:140px;"></div>309 </div>310 </div>311 </div>312 313 <!-- Tabs -->314 <div class="tabs">315 <div class="pill">316 <svg width="28" height="28" viewBox="0 0 24 24">317 <line x1="6" y1="6" x2="6" y2="18"></line>318 <line x1="12" y1="9" x2="12" y2="18"></line>319 <line x1="18" y1="6" x2="18" y2="18"></line>320 </svg>321 <span>Audio</span>322 </div>323 <div class="pill inactive">324 <svg width="28" height="28" viewBox="0 0 24 24">325 <line x1="6" y1="8" x2="18" y2="8"></line>326 <line x1="6" y1="12" x2="18" y2="12"></line>327 <line x1="6" y1="16" x2="18" y2="16"></line>328 </svg>329 <span>Transcript</span>330 </div>331 </div>332 333 <!-- Progress -->334 <div class="progress-wrap">335 <div class="progress-bar">336 <div class="progress-fill"></div>337 <div class="progress-knob"></div>338 </div>339 <div class="time-row">340 <div>00:00</div>341 <div>-00:16</div>342 </div>343 </div>344 345 <!-- Controls -->346 <div class="controls">347 <div class="control">348 <svg width="120" height="120" viewBox="0 0 24 24">349 <path d="M9 7 L5 11 L9 15"></path>350 <path d="M5 11 C7 11 9 11 11 11"></path>351 </svg>352 <div class="label" style="bottom:40px; right:44px;">5</div>353 </div>354 <div class="control center">355 <svg width="120" height="120" viewBox="0 0 24 24">356 <polygon points="9,6 18,12 9,18" fill="#1D2230" stroke="#1D2230"></polygon>357 </svg>358 </div>359 <div class="control">360 <svg width="120" height="120" viewBox="0 0 24 24">361 <path d="M15 7 L19 11 L15 15"></path>362 <path d="M19 11 C17 11 15 11 13 11"></path>363 </svg>364 <div class="label" style="bottom:40px; left:44px;">10</div>365 </div>366 </div>367 368 <!-- Gesture bar -->369 <div class="gesture"></div>370</div>371</body>372</html>