GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Audio Player UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 box-shadow: none;16 }17 18 /* Top App Bar / Header */19 .app-header {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 360px;25 background: #0B79D0;26 color: #fff;27 }28 .status-bar {29 height: 90px;30 padding: 0 30px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 font-size: 34px;35 opacity: 0.95;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 28px;41 }42 .header-content {43 padding: 20px 36px;44 }45 .header-title {46 font-size: 78px;47 font-weight: 600;48 margin-top: 20px;49 }50 .header-actions {51 position: absolute;52 right: 24px;53 top: 160px;54 display: flex;55 gap: 36px;56 }57 .icon-btn {58 width: 72px;59 height: 72px;60 display: flex;61 align-items: center;62 justify-content: center;63 }64 .tabs {65 position: absolute;66 bottom: 0;67 left: 0;68 width: 1080px;69 height: 100px;70 display: flex;71 align-items: center;72 justify-content: space-between;73 padding: 0 40px;74 color: #e3f2fd;75 letter-spacing: 2px;76 font-size: 36px;77 }78 .tab-active {79 color: #ffffff;80 font-weight: 600;81 }82 83 /* Ad carousel */84 .ad-strip {85 position: absolute;86 top: 360px;87 left: 0;88 width: 1080px;89 height: 160px;90 background: #f7f7f7;91 border-top: 6px solid rgba(255,255,255,0.9);92 display: flex;93 align-items: center;94 padding: 0 10px;95 gap: 14px;96 }97 .ad-item {98 width: 160px;99 height: 130px;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 display: flex;103 align-items: center;104 justify-content: center;105 color: #757575;106 border-radius: 10px;107 position: relative;108 font-size: 26px;109 }110 .price-tag {111 position: absolute;112 bottom: -6px;113 right: 8px;114 background: rgba(0,0,0,0.65);115 color: #fff;116 font-size: 26px;117 padding: 6px 10px;118 border-radius: 18px;119 }120 121 /* Audio file card */122 .file-card {123 position: absolute;124 top: 520px;125 left: 0;126 width: 1080px;127 height: 260px;128 background: #1565D8;129 color: #fff;130 display: flex;131 flex-direction: column;132 padding: 26px 34px;133 box-sizing: border-box;134 }135 .file-top {136 display: flex;137 justify-content: space-between;138 align-items: flex-start;139 }140 .file-title {141 font-size: 46px;142 font-weight: 600;143 line-height: 1.3;144 max-width: 760px;145 }146 .file-meta-right {147 text-align: right;148 font-size: 34px;149 line-height: 1.2;150 }151 .file-sub {152 margin-top: 12px;153 font-size: 30px;154 opacity: 0.95;155 }156 .file-actions {157 margin-top: 28px;158 display: flex;159 gap: 34px;160 align-items: center;161 }162 .file-actions .icon-btn {163 width: 64px;164 height: 64px;165 }166 167 /* Main white area */168 .content {169 position: absolute;170 top: 780px;171 left: 0;172 width: 1080px;173 height: 1300px;174 background: #ffffff;175 }176 177 /* Bottom player */178 .player {179 position: absolute;180 bottom: 60px;181 left: 0;182 width: 1080px;183 height: 320px;184 background: #0B79D0;185 color: #fff;186 box-sizing: border-box;187 padding: 24px 36px;188 }189 .progress-row {190 display: flex;191 align-items: center;192 gap: 24px;193 }194 .time-pill {195 border: 3px solid #ffffff;196 border-radius: 14px;197 padding: 6px 18px;198 font-size: 36px;199 font-weight: 600;200 }201 .progress-track {202 position: relative;203 height: 10px;204 background: rgba(255,255,255,0.5);205 flex: 1;206 border-radius: 8px;207 margin: 0 6px;208 }209 .progress-fill {210 position: absolute;211 left: 0;212 top: 0;213 height: 10px;214 width: 12%;215 background: #ffffff;216 border-radius: 8px;217 }218 .progress-thumb {219 position: absolute;220 left: 12%;221 top: -6px;222 width: 28px;223 height: 28px;224 background: #ffffff;225 border-radius: 50%;226 border: 2px solid rgba(255,255,255,0.9);227 }228 .time-total {229 font-size: 36px;230 font-weight: 600;231 }232 .controls {233 margin-top: 42px;234 display: flex;235 align-items: center;236 justify-content: space-between;237 padding: 0 60px;238 }239 .big-play {240 width: 160px;241 height: 160px;242 background: #ffffff;243 border-radius: 50%;244 display: flex;245 align-items: center;246 justify-content: center;247 }248 .dimmed {249 opacity: 0.6;250 }251 .speed {252 font-size: 44px;253 font-weight: 600;254 }255 256 /* Bottom navigation handle */257 .nav-handle {258 position: absolute;259 bottom: 16px;260 left: 50%;261 transform: translateX(-50%);262 width: 300px;263 height: 12px;264 background: #9e9e9e;265 border-radius: 12px;266 }267</style>268</head>269<body>270<div id="render-target">271 272 <div class="app-header">273 <div class="status-bar">274 <div>2:31</div>275 <div class="status-right">276 <!-- simple status icons -->277 <svg width="40" height="32"><rect x="2" y="10" width="36" height="12" fill="#fff"/></svg>278 <svg width="42" height="32"><rect x="6" y="6" width="30" height="20" fill="none" stroke="#fff" stroke-width="3"/><rect x="29" y="10" width="8" height="12" fill="#fff"/></svg>279 </div>280 </div>281 282 <div class="header-content">283 <div class="header-title">Playback paused</div>284 <div class="header-actions">285 <div class="icon-btn">286 <!-- search icon -->287 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">288 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2"></circle>289 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#fff" stroke-width="2"></line>290 </svg>291 </div>292 <div class="icon-btn">293 <!-- list/sort icon -->294 <svg width="48" height="48" viewBox="0 0 24 24">295 <rect x="4" y="6" width="14" height="2" fill="#fff"></rect>296 <rect x="4" y="11" width="18" height="2" fill="#fff"></rect>297 <rect x="4" y="16" width="10" height="2" fill="#fff"></rect>298 </svg>299 </div>300 </div>301 </div>302 303 <div class="tabs">304 <div>RECORD</div>305 <div class="tab-active">LISTEN</div>306 </div>307 </div>308 309 <!-- Ad carousel placeholders -->310 <div class="ad-strip">311 <div class="ad-item">[IMG: App Icon]</div>312 <div class="ad-item">[IMG: Microwave]<div class="price-tag">₹436</div></div>313 <div class="ad-item">[IMG: Chair]<div class="price-tag">₹108</div></div>314 <div class="ad-item">[IMG: Landscape]<div class="price-tag">₹543</div></div>315 <div class="ad-item">[IMG: Smart TV]<div class="price-tag">₹1,126</div></div>316 <div class="ad-item">[IMG: Cabinet]<div class="price-tag">₹108</div></div>317 <div class="ad-item">[IMG: Sofa]<div class="price-tag">₹326</div></div>318 </div>319 320 <!-- File card -->321 <div class="file-card">322 <div class="file-top">323 <div class="file-title">renewable energy lecture practice.m4a</div>324 <div class="file-meta-right">325 <div>01:35</div>326 <div style="opacity:0.9; font-size:28px; margin-top:6px;">1.1 MB</div>327 </div>328 </div>329 <div class="file-sub">November 22, 11:28 AM</div>330 <div class="file-actions">331 <div class="icon-btn">332 <!-- share icon -->333 <svg width="48" height="48" viewBox="0 0 24 24">334 <circle cx="6" cy="12" r="3" fill="#fff"></circle>335 <circle cx="18" cy="6" r="3" fill="#fff"></circle>336 <circle cx="18" cy="18" r="3" fill="#fff"></circle>337 <path d="M9 12 L15 7" stroke="#fff" stroke-width="2" fill="none"></path>338 <path d="M9 12 L15 17" stroke="#fff" stroke-width="2" fill="none"></path>339 </svg>340 </div>341 <div class="icon-btn">342 <!-- delete icon -->343 <svg width="48" height="48" viewBox="0 0 24 24">344 <rect x="7" y="9" width="10" height="10" fill="#fff"></rect>345 <rect x="9" y="5" width="6" height="3" fill="#fff"></rect>346 <rect x="5" y="7" width="14" height="2" fill="#fff"></rect>347 </svg>348 </div>349 <div class="icon-btn">350 <!-- edit icon -->351 <svg width="48" height="48" viewBox="0 0 24 24">352 <path d="M4 16 L4 20 L8 20 L18 10 L14 6 Z" fill="#fff"></path>353 </svg>354 </div>355 <div class="icon-btn">356 <!-- more/overflow icon -->357 <svg width="48" height="48" viewBox="0 0 24 24">358 <circle cx="12" cy="6" r="2" fill="#fff"></circle>359 <circle cx="12" cy="12" r="2" fill="#fff"></circle>360 <circle cx="12" cy="18" r="2" fill="#fff"></circle>361 </svg>362 </div>363 </div>364 </div>365 366 <!-- Main empty content -->367 <div class="content"></div>368 369 <!-- Bottom player -->370 <div class="player">371 <div class="progress-row">372 <div class="time-pill">00:05</div>373 <div class="progress-track">374 <div class="progress-fill"></div>375 <div class="progress-thumb"></div>376 </div>377 <div class="time-total">01:35</div>378 </div>379 380 <div class="controls">381 <div class="icon-btn dimmed">382 <!-- repeat icon -->383 <svg width="64" height="64" viewBox="0 0 24 24">384 <path d="M7 7 H16 L14 5 M7 17 H16 L18 19" stroke="#fff" stroke-width="2" fill="none"></path>385 </svg>386 </div>387 388 <div class="icon-btn">389 <!-- rewind icon -->390 <svg width="64" height="64" viewBox="0 0 24 24">391 <polygon points="12,6 4,12 12,18" fill="#fff"></polygon>392 <polygon points="22,6 14,12 22,18" fill="#fff"></polygon>393 </svg>394 </div>395 396 <div class="big-play">397 <!-- play triangle -->398 <svg width="90" height="90" viewBox="0 0 24 24">399 <polygon points="8,6 20,12 8,18" fill="#0B79D0"></polygon>400 </svg>401 </div>402 403 <div class="icon-btn">404 <!-- forward icon -->405 <svg width="64" height="64" viewBox="0 0 24 24">406 <polygon points="12,6 20,12 12,18" fill="#fff"></polygon>407 <polygon points="2,6 10,12 2,18" fill="#fff"></polygon>408 </svg>409 </div>410 411 <div class="speed">1x</div>412 </div>413 </div>414 415 <div class="nav-handle"></div>416 417</div>418</body>419</html>