GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Audio Files UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1440px;11 height: 3120px;12 overflow: hidden;13 background: #EEF4F5;14 }15 16 /* Top system status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 background: #101010;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 40px;28 box-sizing: border-box;29 font-size: 48px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .dot {39 width: 16px;40 height: 16px;41 background: #D9D9D9;42 border-radius: 50%;43 opacity: 0.9;44 }45 .signal {46 width: 40px; height: 40px; border: 3px solid #D9D9D9; border-radius: 50%;47 }48 .wifi {49 width: 42px; height: 42px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid transparent;50 }51 .battery {52 width: 52px; height: 28px; border: 4px solid #D9D9D9; border-radius: 6px; position: relative;53 }54 .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 14px; background: #D9D9D9; border-radius: 2px; }55 56 /* App toolbar */57 .toolbar {58 position: absolute;59 top: 120px;60 left: 0;61 width: 1440px;62 height: 160px;63 background: #101010;64 display: flex;65 align-items: center;66 padding: 0 40px;67 box-sizing: border-box;68 color: #fff;69 }70 .toolbar-right {71 margin-left: auto;72 display: flex;73 align-items: center;74 gap: 36px;75 }76 .icon-btn svg { display: block; }77 78 /* Count title */79 .count-title {80 position: absolute;81 top: 300px;82 left: 40px;83 font-size: 96px;84 color: #0B0B0B;85 font-weight: 600;86 }87 88 /* List */89 .list {90 position: absolute;91 top: 420px;92 left: 0;93 width: 100%;94 }95 .item {96 width: 100%;97 padding: 40px 40px;98 box-sizing: border-box;99 border-top: 1px solid #D8E0E2;100 background: transparent;101 display: flex;102 align-items: center;103 }104 .play-tile {105 width: 140px;106 height: 140px;107 border-radius: 22px;108 background: #F2F6F7;109 border: 1px solid #E1E6E8;110 display: flex; align-items: center; justify-content: center;111 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);112 }113 .file-info {114 flex: 1;115 margin-left: 40px;116 }117 .file-name {118 font-size: 54px;119 color: #111;120 line-height: 1.2;121 }122 .meta-row {123 margin-top: 12px;124 font-size: 36px;125 color: #6E7C7F;126 display: flex;127 justify-content: space-between;128 align-items: center;129 padding-right: 20px;130 }131 .checkbox {132 width: 88px;133 height: 88px;134 border: 6px solid #1D1D1D;135 border-radius: 10px;136 margin-left: 24px;137 background: transparent;138 }139 140 /* Spacer area */141 .spacer {142 position: absolute;143 top: 1120px;144 left: 0;145 right: 0;146 bottom: 520px;147 }148 149 /* Ad banner above bottom nav */150 .ad-banner {151 position: absolute;152 left: 0;153 bottom: 360px;154 width: 100%;155 height: 180px;156 background: #FFFFFF;157 border-top: 1px solid #E3E3E3;158 border-bottom: 1px solid #E3E3E3;159 display: flex;160 align-items: center;161 padding: 0 32px;162 box-sizing: border-box;163 gap: 24px;164 }165 .ad-logo {166 width: 130px; height: 130px;167 background: #E0E0E0; border: 1px solid #BDBDBD;168 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;169 }170 .ad-text {171 flex: 1;172 font-size: 44px;173 color: #111;174 }175 .ad-open {176 font-size: 44px;177 color: #111;178 margin-left: auto;179 }180 .ad-badge {181 display: inline-block;182 font-size: 32px;183 color: #555;184 border: 2px solid #888;185 border-radius: 8px;186 padding: 4px 10px;187 margin-left: 12px;188 }189 190 /* Bottom navigation */191 .bottom-nav {192 position: absolute;193 left: 0;194 bottom: 0;195 width: 100%;196 height: 320px;197 background: #101010;198 color: #fff;199 display: flex;200 align-items: center;201 justify-content: space-around;202 }203 .nav-item {204 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;205 color: #fff;206 }207 .nav-label { font-size: 34px; opacity: 0.8; }208 .nav-item.active .nav-icon svg { stroke: #E53935; fill: #E53935; }209 .nav-item.active .nav-label { color: #E53935; }210 211 .progress-line {212 position: absolute;213 left: 0;214 bottom: 320px;215 width: 420px;216 height: 12px;217 background: #E53935;218 }219 220 /* Home indicator */221 .home-indicator {222 position: absolute;223 bottom: 28px;224 left: 50%;225 transform: translateX(-50%);226 width: 280px;227 height: 16px;228 background: #E0E0E0;229 border-radius: 12px;230 opacity: 0.95;231 }232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status bar -->238 <div class="status-bar">239 <div>3:52</div>240 <div class="status-icons">241 <div class="dot"></div>242 <div class="dot"></div>243 <div class="signal"></div>244 <div class="dot"></div>245 <div class="wifi"></div>246 <div class="battery"></div>247 </div>248 </div>249 250 <!-- Toolbar with search and hamburger -->251 <div class="toolbar">252 <div class="toolbar-right">253 <div class="icon-btn">254 <svg width="72" height="72" viewBox="0 0 24 24">255 <circle cx="10" cy="10" r="7" fill="none" stroke="#FFFFFF" stroke-width="2"/>256 <line x1="15" y1="15" x2="22" y2="22" stroke="#FFFFFF" stroke-width="2"/>257 </svg>258 </div>259 <div class="icon-btn">260 <svg width="72" height="72" viewBox="0 0 24 24">261 <line x1="3" y1="6" x2="21" y2="6" stroke="#FFFFFF" stroke-width="2"/>262 <line x1="3" y1="12" x2="21" y2="12" stroke="#FFFFFF" stroke-width="2"/>263 <line x1="3" y1="18" x2="21" y2="18" stroke="#FFFFFF" stroke-width="2"/>264 </svg>265 </div>266 </div>267 </div>268 269 <!-- Count title -->270 <div class="count-title">(2)</div>271 272 <!-- List -->273 <div class="list">274 <!-- Item 1 -->275 <div class="item">276 <div class="play-tile">277 <svg width="72" height="72" viewBox="0 0 24 24">278 <polygon points="6,4 20,12 6,20" fill="#111"/>279 </svg>280 </div>281 <div class="file-info">282 <div class="file-name">Quentin Clark.mp3</div>283 <div class="meta-row">284 <div>2023-12-08 13:31, 234.3 KB</div>285 <div>00:14s</div>286 </div>287 </div>288 <div class="checkbox"></div>289 </div>290 291 <!-- Item 2 -->292 <div class="item">293 <div class="play-tile">294 <svg width="72" height="72" viewBox="0 0 24 24">295 <polygon points="6,4 20,12 6,20" fill="#111"/>296 </svg>297 </div>298 <div class="file-info">299 <div class="file-name">2023_12_08_12_46_58_1.mp3</div>300 <div class="meta-row">301 <div>2023-12-08 12:47, 567.8 KB</div>302 <div>00:36s</div>303 </div>304 </div>305 <div class="checkbox"></div>306 </div>307 </div>308 309 <!-- Spacer for empty area -->310 <div class="spacer"></div>311 312 <!-- Ad banner -->313 <div class="ad-banner">314 <div class="ad-logo">[IMG: Booking Logo]</div>315 <div class="ad-text">Booking.com: Hotels & Flights <span class="ad-badge">AD</span></div>316 <div class="ad-open">OPEN</div>317 </div>318 319 <!-- Red progress line above bottom nav -->320 <div class="progress-line"></div>321 322 <!-- Bottom navigation -->323 <div class="bottom-nav">324 <div class="nav-item active">325 <div class="nav-icon">326 <svg width="120" height="120" viewBox="0 0 48 48">327 <!-- Headphones -->328 <path d="M24 10c-8 0-14 6-14 14h4c0-6 4-10 10-10s10 4 10 10h4c0-8-6-14-14-14z" fill="#E53935"/>329 <rect x="8" y="26" width="8" height="14" rx="3" fill="#E53935"/>330 <rect x="32" y="26" width="8" height="14" rx="3" fill="#E53935"/>331 <!-- small play dot -->332 <polygon points="22,30 30,34 22,38" fill="#FFFFFF"/>333 </svg>334 </div>335 <div class="nav-label">Player</div>336 </div>337 <div class="nav-item">338 <div class="nav-icon">339 <svg width="120" height="120" viewBox="0 0 48 48">340 <!-- Microphone -->341 <rect x="18" y="10" width="12" height="20" rx="6" fill="none" stroke="#FFFFFF" stroke-width="2"/>342 <path d="M12 24c0 7 5 12 12 12s12-5 12-12" fill="none" stroke="#FFFFFF" stroke-width="2"/>343 <line x1="24" y1="36" x2="24" y2="42" stroke="#FFFFFF" stroke-width="2"/>344 <line x1="18" y1="42" x2="30" y2="42" stroke="#FFFFFF" stroke-width="2"/>345 </svg>346 </div>347 <div class="nav-label">Record</div>348 </div>349 <div class="nav-item">350 <div class="nav-icon">351 <svg width="120" height="120" viewBox="0 0 48 48">352 <!-- Simple gear -->353 <circle cx="24" cy="24" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"/>354 <path d="M24 8v6M24 34v6M8 24h6M34 24h6M13 13l4 4M31 31l4 4M35 13l-4 4M13 35l4-4" stroke="#FFFFFF" stroke-width="2"/>355 </svg>356 </div>357 <div class="nav-label">Settings</div>358 </div>359 <div class="home-indicator"></div>360 </div>361 362</div>363</body>364</html>