GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Audio Player Details UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1440px; height: 3120px;10 position: relative; overflow: hidden;11 background: #1d1f24; color: #eee;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 84px; padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #fff; font-size: 44px;20 }21 .status-right { display: flex; align-items: center; gap: 28px; }22 .status-icon svg { width: 42px; height: 42px; }23 24 /* Toolbar */25 .toolbar {26 position: absolute; top: 84px; left: 0; right: 0;27 height: 140px; background: #121417;28 display: flex; align-items: center; justify-content: space-between;29 padding: 0 40px;30 border-bottom: 1px solid #2a2d33;31 }32 .toolbar-left { display: flex; align-items: center; gap: 24px; }33 .toolbar-right { display: flex; align-items: center; gap: 48px; }34 .toolbar .icon { width: 64px; height: 64px; }35 .page-dots {36 position: absolute; top: 228px; left: 0; right: 0;37 display: flex; justify-content: center; gap: 18px;38 }39 .dot { width: 24px; height: 24px; border-radius: 50%; background: #486fb7; }40 .dot.inactive { background: #6b6f78; }41 42 /* Info card */43 .info-card {44 position: absolute; top: 280px; left: 40px;45 width: 1360px; background: #23262b;46 border: 2px solid #3a3e45; border-radius: 18px;47 box-sizing: border-box; padding: 0;48 }49 .info-grid {50 display: grid; grid-template-columns: 420px 1fr;51 border-collapse: collapse;52 }53 .row {54 min-height: 190px; display: grid; grid-template-columns: inherit;55 border-top: 1px solid #3a3e45;56 }57 .row:first-child { border-top: none; }58 .cell {59 padding: 40px; display: flex; align-items: center;60 border-right: 1px solid #3a3e45;61 font-size: 50px; color: #cfd3db;62 }63 .cell:last-child { border-right: none; color: #fff; }64 .value.bold { font-weight: 800; color: #fff; }65 66 /* Player area */67 .player-area {68 position: absolute; left: 0; right: 0; top: 1500px;69 height: 980px; background: #1a1c21;70 padding: 80px 80px 40px 80px; box-sizing: border-box;71 }72 .player-tools {73 display: flex; align-items: center; justify-content: space-between;74 margin-bottom: 80px;75 }76 .tool-group { display: flex; align-items: center; gap: 120px; }77 .tool { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9ec5ff; }78 .tool .icon { width: 88px; height: 88px; }79 .tool.label-grey { color: #b8bcc3; }80 .tool .small { font-size: 40px; }81 .stop-btn { width: 100px; height: 100px; }82 83 .timeline {84 display: flex; align-items: center; justify-content: space-between;85 margin: 40px 0 50px 0;86 color: #cfd3db; font-size: 46px;87 }88 .track {89 position: relative; height: 18px; background: #9da2a9;90 border-radius: 12px; margin: 0 40px; flex: 1;91 }92 .track .progress {93 position: absolute; left: 0; top: 0; bottom: 0;94 width: 160px; background: #6ea2ff; border-radius: 12px;95 }96 .track .knob {97 position: absolute; left: 160px; top: 50%;98 width: 38px; height: 38px; background: #6ea2ff;99 border-radius: 50%; transform: translate(-50%, -50%);100 box-shadow: 0 0 0 6px rgba(110,162,255,0.25);101 }102 103 .transport {104 display: flex; align-items: center; justify-content: center; gap: 120px;105 margin-top: 40px;106 }107 .transport .icon { width: 128px; height: 128px; }108 .big-pause {109 width: 240px; height: 240px; background: #ffffff;110 border-radius: 50%; display: flex; align-items: center; justify-content: center;111 box-shadow: 0 10px 30px rgba(0,0,0,0.4);112 }113 .big-pause .bars {114 display: flex; gap: 26px;115 }116 .big-pause .bar {117 width: 26px; height: 128px; background: #1a1c21; border-radius: 6px;118 }119 120 /* Ad banner */121 .ad-banner {122 position: absolute; left: 0; right: 0; top: 2450px;123 height: 200px; background: #23262b; border-top: 1px solid #3a3e45; border-bottom: 1px solid #3a3e45;124 display: flex; align-items: center; gap: 30px; padding: 0 40px; box-sizing: border-box;125 }126 .ad-img {127 width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;128 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;129 border-radius: 24px;130 }131 .ad-text { flex: 1; color: #e7ebf1; }132 .ad-title { font-size: 52px; font-weight: 700; margin-bottom: 10px; }133 .ad-sub { font-size: 40px; color: #cfd3db; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }134 .ad-open { color: #7fb1ff; font-size: 44px; font-weight: 700; }135 136 /* Bottom filters */137 .filters {138 position: absolute; left: 0; right: 0; bottom: 140px;139 height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center;140 color: #fff;141 }142 .filter-row { display: flex; gap: 130px; font-size: 60px; margin-bottom: 50px; color: #d8dbe0; }143 .bottom-slider {144 width: 680px; height: 16px; background: #ffffff; border-radius: 8px;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div>3:50</div>154 <div class="status-right">155 <div class="status-icon">156 <!-- simple "ib" badge -->157 <svg viewBox="0 0 24 24">158 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>159 <text x="6" y="16" fill="#fff" font-size="10" font-family="Arial">ib</text>160 </svg>161 </div>162 <div class="status-icon">163 <!-- search -->164 <svg viewBox="0 0 24 24">165 <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"/>166 <path d="M15 15l6 6" stroke="#fff" stroke-width="2" />167 </svg>168 </div>169 <div class="status-icon">170 <!-- tiny mic -->171 <svg viewBox="0 0 24 24">172 <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#fff" stroke-width="2"/>173 <path d="M6 10a6 6 0 0 0 12 0M12 20v-4" stroke="#fff" stroke-width="2" fill="none"/>174 </svg>175 </div>176 <div class="status-icon">177 <!-- dot -->178 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#fff"/></svg>179 </div>180 <div class="status-icon">181 <!-- wifi -->182 <svg viewBox="0 0 24 24">183 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none"/>184 <circle cx="12" cy="19" r="2" fill="#fff"/>185 </svg>186 </div>187 <div class="status-icon">188 <!-- battery -->189 <svg viewBox="0 0 24 24">190 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>191 <rect x="4" y="8" width="14" height="8" fill="#fff"/>192 <rect x="20" y="10" width="2" height="4" fill="#fff"/>193 </svg>194 </div>195 </div>196 </div>197 198 <!-- Toolbar with back and actions -->199 <div class="toolbar">200 <div class="toolbar-left">201 <svg class="icon" viewBox="0 0 24 24">202 <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 <div class="toolbar-right">206 <!-- Scissors -->207 <svg class="icon" viewBox="0 0 24 24">208 <circle cx="6" cy="6" r="3" fill="none" stroke="#fff" stroke-width="2"/>209 <circle cx="6" cy="18" r="3" fill="none" stroke="#fff" stroke-width="2"/>210 <path d="M20 5L8 12l12 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>211 </svg>212 <!-- Trash -->213 <svg class="icon" viewBox="0 0 24 24">214 <path d="M6 7h12l-1 13H7L6 7z" fill="none" stroke="#fff" stroke-width="2"/>215 <path d="M9 7V4h6v3" stroke="#fff" stroke-width="2" fill="none"/>216 </svg>217 <!-- Share -->218 <svg class="icon" viewBox="0 0 24 24">219 <circle cx="5" cy="12" r="2" fill="#fff"/>220 <circle cx="19" cy="5" r="2" fill="#fff"/>221 <circle cx="19" cy="19" r="2" fill="#fff"/>222 <path d="M7 12l10-7M7 12l10 7" stroke="#fff" stroke-width="2" fill="none"/>223 </svg>224 </div>225 </div>226 227 <!-- page dots -->228 <div class="page-dots">229 <div class="dot"></div>230 <div class="dot inactive"></div>231 <div class="dot inactive"></div>232 </div>233 234 <!-- Info Card -->235 <div class="info-card">236 <div class="info-grid">237 <div class="row">238 <div class="cell">File name</div>239 <div class="cell"><span class="value bold">2023_12_08_12_46_58_1_1.mp3</span></div>240 </div>241 <div class="row">242 <div class="cell">File location</div>243 <div class="cell">/storage/emulated/0/Music/Recorders/2023_12_08_12_46_58_1_1.mp3</div>244 </div>245 <div class="row">246 <div class="cell">File size:</div>247 <div class="cell">234.3 KB</div>248 </div>249 <div class="row">250 <div class="cell">Creation time:</div>251 <div class="cell">2023-12-08</div>252 </div>253 <div class="row">254 <div class="cell">Duration:</div>255 <div class="cell">00:14</div>256 </div>257 </div>258 </div>259 260 <!-- Player Area -->261 <div class="player-area">262 <div class="player-tools">263 <div class="tool-group">264 <div class="tool">265 <svg class="icon" viewBox="0 0 24 24">266 <path d="M4 14a8 8 0 0 1 16 0" stroke="#9ec5ff" stroke-width="2" fill="none"/>267 <path d="M12 14l4-4" stroke="#9ec5ff" stroke-width="2"/>268 </svg>269 <div class="small">1.0x</div>270 </div>271 <div class="tool label-grey">272 <svg class="icon" viewBox="0 0 24 24">273 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#cfd3db" stroke-width="2"/>274 <path d="M3 5l18 14" stroke="#cfd3db" stroke-width="2"/>275 </svg>276 </div>277 <div class="tool label-grey">278 <svg class="icon" viewBox="0 0 24 24">279 <path d="M4 12a8 8 0 1 0 8-8" stroke="#cfd3db" stroke-width="2" fill="none"/>280 <path d="M4 4v6h6" stroke="#cfd3db" stroke-width="2" fill="none"/>281 <path d="M4 4l16 16" stroke="#cfd3db" stroke-width="2"/>282 </svg>283 </div>284 </div>285 <div class="tool">286 <svg class="stop-btn" viewBox="0 0 24 24">287 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"/>288 <rect x="8" y="8" width="8" height="8" fill="#fff"/>289 </svg>290 </div>291 </div>292 293 <div class="timeline">294 <div>00:01</div>295 <div class="track">296 <div class="progress"></div>297 <div class="knob"></div>298 </div>299 <div>00:14</div>300 </div>301 302 <div class="transport">303 <!-- Step back -->304 <svg class="icon" viewBox="0 0 24 24">305 <path d="M18 5l-10 7 10 7" fill="#cfd3db"/>306 </svg>307 <!-- Previous -->308 <svg class="icon" viewBox="0 0 24 24">309 <path d="M16 5l-8 7 8 7" fill="#cfd3db"/>310 <rect x="3" y="5" width="2" height="14" fill="#cfd3db"/>311 </svg>312 313 <!-- Big pause button -->314 <div class="big-pause">315 <div class="bars">316 <div class="bar"></div>317 <div class="bar"></div>318 </div>319 </div>320 321 <!-- Next -->322 <svg class="icon" viewBox="0 0 24 24">323 <rect x="19" y="5" width="2" height="14" fill="#cfd3db"/>324 <path d="M8 5l8 7-8 7" fill="#cfd3db"/>325 </svg>326 <!-- Forward -->327 <svg class="icon" viewBox="0 0 24 24">328 <path d="M6 5l10 7-10 7" fill="#cfd3db"/>329 </svg>330 </div>331 </div>332 333 <!-- Advertisement banner -->334 <div class="ad-banner">335 <div class="ad-img">[IMG: App Icon]</div>336 <div class="ad-text">337 <div class="ad-title">LoveLocal: Shop Grocery Online AD</div>338 <div class="ad-sub">LoveLocal is your go-to online shopping app to...</div>339 </div>340 <div class="ad-open">OPEN</div>341 </div>342 343 <!-- Bottom filters / labels -->344 <div class="filters">345 <div class="filter-row">346 <div>60<</div>347 <div>30<</div>348 <div>5<</div>349 <div>>5</div>350 <div>>30</div>351 <div>>60</div>352 </div>353 <div class="bottom-slider"></div>354 </div>355 356</div>357</body>358</html>