GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Audio Recorder UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #154B8D; /* app blue */13 color: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 height: 92px;22 width: 100%;23 padding: 0 30px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #FFFFFF;29 font-size: 34px;30 letter-spacing: 0.3px;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .sb-icon {38 width: 34px; height: 34px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.8);39 }40 41 /* Header title and actions */42 .header {43 position: absolute;44 top: 108px;45 left: 36px;46 right: 36px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 .header .title {52 font-size: 64px;53 font-weight: 600;54 }55 .header-actions {56 display: flex;57 gap: 36px;58 }59 .icon-btn {60 width: 56px; height: 56px;61 }62 .icon-btn svg { width: 100%; height: 100%; fill: none; stroke: #FFFFFF; stroke-width: 4; }63 64 /* Tabs */65 .tabs {66 position: absolute;67 top: 220px;68 left: 36px;69 right: 36px;70 display: flex;71 justify-content: space-between;72 font-size: 38px;73 letter-spacing: 2px;74 }75 .tab {76 opacity: 0.75;77 }78 .tab.active { opacity: 1; font-weight: 600; }79 80 /* Ads row */81 .ads-strip {82 position: absolute;83 top: 278px;84 left: 0;85 right: 0;86 height: 142px;87 display: flex;88 align-items: center;89 gap: 18px;90 padding: 0 18px 0 18px;91 box-sizing: border-box;92 }93 .ad-card {94 width: 168px; height: 120px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 display: flex;98 align-items: center;99 justify-content: center;100 color: #757575;101 font-size: 20px;102 position: relative;103 border-radius: 6px;104 overflow: hidden;105 }106 .price-tag {107 position: absolute;108 bottom: 4px;109 left: 8px;110 background: rgba(255,255,255,0.95);111 color: #333;112 padding: 2px 8px;113 font-size: 22px;114 border-radius: 4px;115 }116 .close-ad {117 position: absolute;118 left: 18px;119 top: 294px;120 width: 60px; height: 60px;121 border-radius: 30px;122 background: rgba(255,255,255,0.1);123 display: flex; align-items: center; justify-content: center;124 border: 2px solid rgba(255,255,255,0.25);125 }126 .close-ad:before {127 content: "×";128 font-size: 40px;129 color: #FFFFFF;130 line-height: 60px;131 }132 133 /* List container */134 .list-area {135 position: absolute;136 top: 444px;137 left: 0;138 right: 0;139 bottom: 560px;140 overflow: hidden;141 }142 .list-item {143 background: #F3F3F3;144 color: #222;145 margin: 0 18px 20px 18px;146 border-radius: 10px;147 padding: 26px 26px;148 box-sizing: border-box;149 position: relative;150 }151 .list-item .name {152 font-size: 44px;153 margin-bottom: 10px;154 }155 .list-item .meta {156 font-size: 30px;157 color: #6A6A6A;158 }159 .list-item .right {160 position: absolute;161 right: 24px;162 top: 24px;163 text-align: right;164 color: #2A2A2A;165 }166 .list-item .right .duration {167 font-size: 36px;168 margin-bottom: 8px;169 }170 .list-item .right .size {171 font-size: 28px;172 }173 .dots {174 position: absolute; right: 18px; top: 88px; width: 50px; height: 50px;175 }176 .dots span {177 display: block; width: 8px; height: 8px; background: #555; border-radius: 50%; margin: 6px auto;178 }179 180 .list-item.selected {181 background: #0E4FA0;182 color: #FFFFFF;183 padding-bottom: 90px;184 }185 .list-item.selected .meta { color: #CFE0FF; }186 .selected .action-row {187 position: absolute;188 right: 30px; bottom: 20px;189 display: flex; gap: 34px;190 }191 .small-icon {192 width: 54px; height: 54px;193 }194 .small-icon svg { width: 100%; height: 100%; stroke: #FFFFFF; stroke-width: 4; fill: none; }195 196 /* Overlay & Dialog */197 .overlay {198 position: absolute;199 left: 0; top: 0; right: 0; bottom: 0;200 background: rgba(0,0,0,0.35);201 }202 .dialog {203 position: absolute;204 left: 84px; right: 84px;205 top: 780px;206 height: 340px;207 background: #FFFFFF;208 color: #1A1A1A;209 border-radius: 14px;210 box-shadow: 0 12px 30px rgba(0,0,0,0.35);211 padding: 40px;212 box-sizing: border-box;213 }214 .dialog .question {215 font-size: 44px;216 line-height: 1.25;217 }218 .dialog .buttons {219 position: absolute;220 bottom: 24px; right: 24px;221 display: flex; gap: 40px;222 }223 .btn {224 font-size: 40px;225 color: #1A73E8;226 padding: 16px 24px;227 border-radius: 8px;228 }229 230 /* Player bar */231 .player {232 position: absolute;233 bottom: 0; left: 0; right: 0;234 height: 220px;235 background: #0C3E7A;236 color: #FFFFFF;237 }238 .player-inner {239 position: absolute; left: 30px; right: 30px; top: 36px;240 }241 .time-left {242 background: rgba(255,255,255,0.12);243 border: 1px solid rgba(255,255,255,0.25);244 color: #FFFFFF;245 font-size: 30px;246 padding: 10px 20px;247 border-radius: 10px;248 display: inline-block;249 }250 .slider {251 position: absolute;252 left: 220px; right: 220px; top: 20px;253 height: 8px; background: rgba(255,255,255,0.25); border-radius: 4px;254 }255 .slider .thumb {256 position: absolute; left: 18%; top: -8px; width: 26px; height: 26px;257 background: #FFFFFF; border-radius: 50%;258 box-shadow: 0 0 0 4px rgba(255,255,255,0.25) inset;259 }260 .time-right {261 position: absolute; right: 0; top: 6px; font-size: 34px;262 }263 264 .controls {265 position: absolute;266 left: 60px; right: 60px; bottom: 34px;267 display: flex; align-items: center; justify-content: center; gap: 90px;268 }269 .ctrl-icon { width: 68px; height: 68px; opacity: 0.85; }270 .play-btn {271 width: 160px; height: 160px; border-radius: 80px;272 background: rgba(255,255,255,0.2);273 display: flex; align-items: center; justify-content: center;274 }275 .play-btn svg { width: 80px; height: 80px; fill: #FFFFFF; }276 .speed {277 position: absolute; right: 50px; bottom: 40px; font-size: 40px; opacity: 0.9;278 }279</style>280</head>281<body>282<div id="render-target">283 284 <!-- Status Bar -->285 <div class="status-bar">286 <div>12:44</div>287 <div class="status-icons">288 <div class="sb-icon" title="Network"></div>289 <div class="sb-icon" title="Wi‑Fi"></div>290 <div class="sb-icon" title="Battery"></div>291 </div>292 </div>293 294 <!-- Header Title and actions -->295 <div class="header">296 <div class="title">Playback paused</div>297 <div class="header-actions">298 <div class="icon-btn">299 <!-- search -->300 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><line x1="15" y1="15" x2="22" y2="22"></line></svg>301 </div>302 <div class="icon-btn">303 <!-- filter/sort lines -->304 <svg viewBox="0 0 24 24"><line x1="3" y1="5" x2="21" y2="5"></line><line x1="3" y1="12" x2="17" y2="12"></line><line x1="3" y1="19" x2="13" y2="19"></line></svg>305 </div>306 <div class="icon-btn">307 <!-- more vertical -->308 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>309 </div>310 </div>311 </div>312 313 <!-- Tabs -->314 <div class="tabs">315 <div class="tab">RECORD</div>316 <div class="tab active">LISTEN</div>317 </div>318 319 <!-- Ads strip -->320 <div class="ads-strip">321 <div class="ad-card"><span>[IMG: Microwave]</span><div class="price-tag">₹436</div></div>322 <div class="ad-card"><span>[IMG: Office Chair]</span><div class="price-tag">₹217</div></div>323 <div class="ad-card"><span>[IMG: Landscape]</span><div class="price-tag">₹543</div></div>324 <div class="ad-card"><span>[IMG: Landscape]</span><div class="price-tag">₹543</div></div>325 <div class="ad-card"><span>[IMG: Smart TV]</span><div class="price-tag">₹1,126</div></div>326 <div class="ad-card"><span>[IMG: Landscape]</span><div class="price-tag">₹543</div></div>327 </div>328 <div class="close-ad"></div>329 330 <!-- List Area -->331 <div class="list-area">332 <!-- Item 1 -->333 <div class="list-item">334 <div class="name">My recording 2.m4a</div>335 <div class="meta">November 22, 11:58 AM</div>336 <div class="right">337 <div class="duration">01:40</div>338 <div class="size">1.2 MB</div>339 </div>340 <div class="dots">341 <span></span><span></span><span></span>342 </div>343 </div>344 345 <!-- Item 2 selected -->346 <div class="list-item selected">347 <div class="name">renewable energy lecture practice.m4a</div>348 <div class="meta">November 22, 11:28 AM</div>349 <div class="right">350 <div class="duration">01:35</div>351 <div class="size">1.1 MB</div>352 </div>353 <div class="action-row">354 <!-- share -->355 <div class="small-icon">356 <svg viewBox="0 0 24 24">357 <circle cx="6" cy="12" r="3"></circle>358 <circle cx="18" cy="6" r="3"></circle>359 <circle cx="18" cy="18" r="3"></circle>360 <line x1="8.5" y1="11" x2="15.5" y2="7.5"></line>361 <line x1="8.5" y1="13" x2="15.5" y2="16.5"></line>362 </svg>363 </div>364 <!-- delete -->365 <div class="small-icon">366 <svg viewBox="0 0 24 24">367 <rect x="6" y="8" width="12" height="13" rx="2"></rect>368 <line x1="9" y1="8" x2="9" y2="21"></line>369 <line x1="15" y1="8" x2="15" y2="21"></line>370 <line x1="4" y1="6" x2="20" y2="6"></line>371 </svg>372 </div>373 <!-- edit -->374 <div class="small-icon">375 <svg viewBox="0 0 24 24">376 <path d="M3 17l2.5 4L9 19l10-10-4-4L5 15z"></path>377 </svg>378 </div>379 <div class="dots">380 <span style="background:#fff"></span><span style="background:#fff"></span><span style="background:#fff"></span>381 </div>382 </div>383 </div>384 </div>385 386 <!-- Modal overlay -->387 <div class="overlay"></div>388 <div class="dialog">389 <div class="question">Delete “My recording 2.m4a”?</div>390 <div class="buttons">391 <div class="btn">CANCEL</div>392 <div class="btn">DELETE</div>393 </div>394 </div>395 396 <!-- Player Bar -->397 <div class="player">398 <div class="player-inner">399 <div class="time-left">00:05</div>400 <div class="slider"><div class="thumb"></div></div>401 <div class="time-right">01:35</div>402 </div>403 404 <div class="controls">405 <!-- repeat -->406 <div class="ctrl-icon">407 <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">408 <path d="M4 7h10l-2-2m2 2-2 2"></path>409 <path d="M20 17H10l2 2m-2-2 2-2"></path>410 </svg>411 </div>412 <!-- back -->413 <div class="ctrl-icon">414 <svg viewBox="0 0 24 24" fill="#FFFFFF">415 <polygon points="14,6 6,12 14,18"></polygon>416 </svg>417 </div>418 <!-- play -->419 <div class="play-btn">420 <svg viewBox="0 0 64 64">421 <polygon points="22,16 50,32 22,48"></polygon>422 </svg>423 </div>424 <!-- forward -->425 <div class="ctrl-icon">426 <svg viewBox="0 0 24 24" fill="#FFFFFF">427 <polygon points="10,6 18,12 10,18"></polygon>428 </svg>429 </div>430 </div>431 <div class="speed">1x</div>432 </div>433 434</div>435</body>436</html>