GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: #EAF1F4;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #111;16 }17 18 /* Top status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 120px;25 background: #0E0E0E;26 color: #ffffff;27 display: flex;28 align-items: center;29 padding: 0 40px;30 box-sizing: border-box;31 letter-spacing: 0.5px;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 28px;37 font-size: 46px;38 }39 .status-icons-small {40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .dot, .circle {45 width: 22px;46 height: 22px;47 border-radius: 50%;48 background: #CFCFCF;49 opacity: 0.9;50 }51 .status-right {52 margin-left: auto;53 display: flex;54 align-items: center;55 gap: 30px;56 }57 .wifi svg, .battery svg {58 display: block;59 }60 61 /* App toolbar */62 .toolbar {63 position: absolute;64 top: 120px;65 left: 0;66 width: 100%;67 height: 180px;68 background: #121212;69 color: #ffffff;70 display: flex;71 align-items: center;72 padding: 0 40px;73 box-sizing: border-box;74 border-bottom: 1px solid #1e1e1e;75 }76 .toolbar-title {77 font-size: 72px;78 font-weight: 600;79 }80 .toolbar-icons {81 margin-left: auto;82 display: flex;83 align-items: center;84 gap: 56px;85 }86 .tool-icon svg { width: 70px; height: 70px; fill: none; stroke: #fff; stroke-width: 6; }87 88 /* List area */89 .list {90 position: absolute;91 top: 300px; /* status + toolbar */92 left: 0;93 width: 100%;94 }95 .file-item {96 display: flex;97 align-items: center;98 padding: 40px;99 box-sizing: border-box;100 height: 360px;101 border-bottom: 1px solid #d7dee3;102 background: #F5FAFC;103 }104 .file-item.selected {105 background: #9EC3F1;106 }107 .file-thumb {108 width: 150px;109 height: 150px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 border-radius: 14px;113 display: flex;114 justify-content: center;115 align-items: center;116 color: #757575;117 font-size: 34px;118 margin-right: 42px;119 }120 .file-content { flex: 1; }121 .file-title {122 font-size: 58px;123 font-weight: 700;124 color: #0b0b0b;125 white-space: nowrap;126 overflow: hidden;127 text-overflow: ellipsis;128 margin-bottom: 14px;129 }130 .file-meta {131 font-size: 40px;132 color: #5e6b77;133 display: flex;134 justify-content: space-between;135 align-items: center;136 }137 .duration {138 color: #333;139 font-weight: 600;140 margin-left: 20px;141 }142 .checkbox {143 width: 92px;144 height: 92px;145 border: 6px solid #111;146 border-radius: 10px;147 margin-left: 32px;148 display: flex;149 justify-content: center;150 align-items: center;151 box-sizing: border-box;152 background: transparent;153 }154 .file-item.selected .checkbox {155 background: #0D47A1;156 border-color: #0D47A1;157 }158 .checkbox svg { width: 68px; height: 68px; }159 160 /* Large spacer area to match screenshot empty space */161 .content-spacer {162 height: 1300px;163 background: #EAF1F4;164 }165 166 /* Bottom actions bar */167 .bottom-actions {168 position: absolute;169 bottom: 540px;170 left: 0;171 width: 100%;172 height: 200px;173 background: #8B8E92;174 color: #fff;175 display: flex;176 align-items: center;177 padding: 0 40px;178 box-sizing: border-box;179 }180 .action-left {181 display: flex;182 align-items: center;183 gap: 60px;184 }185 .badge {186 width: 120px;187 height: 120px;188 background: #DFE2E6;189 color: #111;190 border-radius: 12px;191 display: flex;192 align-items: center;193 justify-content: center;194 font-size: 56px;195 font-weight: 700;196 }197 .action-icon svg { width: 120px; height: 120px; stroke: #fff; stroke-width: 10; fill: none; }198 .action-right {199 margin-left: auto;200 font-size: 58px;201 }202 203 /* Ad banner */204 .ad-banner {205 position: absolute;206 bottom: 360px;207 left: 0;208 width: 100%;209 height: 180px;210 background: #ffffff;211 border-top: 1px solid #d9d9d9;212 border-bottom: 1px solid #d9d9d9;213 display: flex;214 align-items: center;215 padding: 0 40px;216 box-sizing: border-box;217 color: #000;218 }219 .ad-logo {220 width: 150px;221 height: 150px;222 background: #1E56CF;223 color: #fff;224 border-radius: 12px;225 display: flex;226 align-items: center;227 justify-content: center;228 font-size: 46px;229 font-weight: 700;230 margin-right: 36px;231 }232 .ad-text {233 font-size: 46px;234 display: flex;235 align-items: center;236 gap: 16px;237 }238 .ad-pill {239 font-size: 36px;240 color: #666;241 border: 1px solid #999;242 padding: 6px 12px;243 border-radius: 8px;244 }245 .ad-open {246 margin-left: auto;247 font-size: 50px;248 color: #1E56CF;249 font-weight: 700;250 }251 .ad-info {252 margin-left: 18px;253 width: 40px;254 height: 40px;255 border: 2px solid #87B5FF;256 color: #87B5FF;257 border-radius: 50%;258 display: flex;259 align-items: center;260 justify-content: center;261 font-size: 28px;262 }263 264 /* Bottom black controls */265 .bottom-controls {266 position: absolute;267 bottom: 0;268 left: 0;269 width: 100%;270 height: 360px;271 background: #0C0C0C;272 border-top: 1px solid #1b1b1b;273 box-sizing: border-box;274 }275 .controls-row {276 height: 100%;277 display: flex;278 align-items: center;279 justify-content: space-around;280 padding: 0 120px;281 }282 .ctrl {283 width: 180px;284 height: 180px;285 display: flex;286 align-items: center;287 justify-content: center;288 }289 .ctrl svg { width: 140px; height: 140px; }290 .accent-line {291 position: absolute;292 left: 0;293 bottom: 340px;294 width: 420px;295 height: 10px;296 background: #D32222;297 }298 .home-indicator {299 position: absolute;300 bottom: 260px;301 left: 50%;302 transform: translateX(-50%);303 width: 320px;304 height: 18px;305 background: #f2f2f2;306 border-radius: 12px;307 opacity: 0.9;308 }309</style>310</head>311<body>312<div id="render-target">313 314 <!-- Status bar -->315 <div class="status-bar">316 <div class="status-left">317 <div>3:51</div>318 <div class="status-icons-small">319 <div class="circle"></div>320 <div class="circle"></div>321 <div class="dot"></div>322 <div class="dot"></div>323 </div>324 </div>325 <div class="status-right">326 <div class="wifi">327 <svg viewBox="0 0 64 64" stroke="#fff" stroke-width="5" fill="none">328 <path d="M8 24c16-12 32-12 48 0"/>329 <path d="M16 32c12-8 20-8 32 0"/>330 <path d="M28 44c4-3 8-3 12 0"/>331 <circle cx="34" cy="52" r="3" fill="#fff"></circle>332 </svg>333 </div>334 <div class="battery">335 <svg viewBox="0 0 80 40" fill="none" stroke="#fff" stroke-width="4">336 <rect x="4" y="6" width="60" height="28" rx="6"></rect>337 <rect x="66" y="12" width="10" height="16" rx="3" fill="#fff"></rect>338 <rect x="8" y="10" width="48" height="20" fill="#fff" stroke="none"></rect>339 </svg>340 </div>341 </div>342 </div>343 344 <!-- Toolbar -->345 <div class="toolbar">346 <div class="toolbar-title">(2)</div>347 <div class="toolbar-icons">348 <div class="tool-icon" title="Search">349 <svg viewBox="0 0 64 64">350 <circle cx="28" cy="28" r="20"></circle>351 <line x1="44" y1="44" x2="60" y2="60"></line>352 </svg>353 </div>354 <div class="tool-icon" title="Cut">355 <svg viewBox="0 0 64 64">356 <circle cx="16" cy="20" r="10"></circle>357 <circle cx="16" cy="44" r="10"></circle>358 <line x1="28" y1="16" x2="60" y2="32"></line>359 <line x1="28" y1="48" x2="60" y2="32"></line>360 </svg>361 </div>362 <div class="tool-icon" title="Edit">363 <svg viewBox="0 0 64 64">364 <path d="M12 52l12-2 26-26-10-10-26 26-2 12z"></path>365 </svg>366 </div>367 <div class="tool-icon" title="Menu">368 <svg viewBox="0 0 64 64">369 <line x1="8" y1="16" x2="56" y2="16"></line>370 <line x1="8" y1="32" x2="56" y2="32"></line>371 <line x1="8" y1="48" x2="56" y2="48"></line>372 </svg>373 </div>374 </div>375 </div>376 377 <!-- File list -->378 <div class="list">379 <div class="file-item selected">380 <div class="file-thumb">[ICON: Music]</div>381 <div class="file-content">382 <div class="file-title">2023_12_08_12_46_58_1_1....</div>383 <div class="file-meta">384 <div>2023-12-08 13:31, 234.3 KB</div>385 <div class="duration">00:14s</div>386 </div>387 </div>388 <div class="checkbox">389 <svg viewBox="0 0 64 64">390 <polyline points="12,34 26,48 52,18" stroke="#fff" stroke-width="8" fill="none"></polyline>391 </svg>392 </div>393 </div>394 395 <div class="file-item">396 <div class="file-thumb">[ICON: Music]</div>397 <div class="file-content">398 <div class="file-title">2023_12_08_12_46_58_1.mp3</div>399 <div class="file-meta">400 <div>2023-12-08 12:47, 567.8 KB</div>401 <div class="duration">00:36s</div>402 </div>403 </div>404 <div class="checkbox"></div>405 </div>406 407 <div class="content-spacer"></div>408 </div>409 410 <!-- Bottom actions bar -->411 <div class="bottom-actions">412 <div class="action-left">413 <div class="badge">1</div>414 <div class="action-icon" title="Play">415 <svg viewBox="0 0 64 64">416 <polygon points="16,12 52,32 16,52" fill="#fff" stroke="none"></polygon>417 </svg>418 </div>419 <div class="action-icon" title="Delete">420 <svg viewBox="0 0 64 64">421 <rect x="18" y="22" width="28" height="34" rx="4"></rect>422 <line x1="14" y1="22" x2="50" y2="22"></line>423 <rect x="26" y="10" width="12" height="8" rx="2"></rect>424 </svg>425 </div>426 <div class="action-icon" title="Share">427 <svg viewBox="0 0 64 64">428 <circle cx="16" cy="32" r="8"></circle>429 <circle cx="48" cy="16" r="8"></circle>430 <circle cx="48" cy="48" r="8"></circle>431 <line x1="24" y1="28" x2="40" y2="20"></line>432 <line x1="24" y1="36" x2="40" y2="44"></line>433 </svg>434 </div>435 </div>436 <div class="action-right">Cancel</div>437 </div>438 439 <!-- Ad banner -->440 <div class="ad-banner">441 <div class="ad-logo">Booking</div>442 <div class="ad-text">443 Booking.com: Hotels & Flights444 <span class="ad-pill">AD</span>445 </div>446 <div class="ad-info">i</div>447 <div class="ad-open">OPEN</div>448 </div>449 450 <!-- Bottom control area -->451 <div class="bottom-controls">452 <div class="accent-line"></div>453 <div class="home-indicator"></div>454 <div class="controls-row">455 <div class="ctrl">456 <svg viewBox="0 0 64 64">457 <circle cx="32" cy="32" r="28" stroke="#D32222" stroke-width="6" fill="none"></circle>458 <path d="M20 44c2-8 6-12 12-12s10 4 12 12" stroke="#D32222" stroke-width="6" fill="none"></path>459 <circle cx="22" cy="28" r="4" fill="#D32222"></circle>460 <circle cx="42" cy="28" r="4" fill="#D32222"></circle>461 </svg>462 </div>463 <div class="ctrl">464 <svg viewBox="0 0 64 64">465 <circle cx="32" cy="24" r="10" stroke="#FFFFFF" stroke-width="6" fill="none"></circle>466 <rect x="22" y="32" width="20" height="18" rx="6" stroke="#FFFFFF" stroke-width="6" fill="none"></rect>467 </svg>468 </div>469 <div class="ctrl">470 <svg viewBox="0 0 64 64">471 <circle cx="32" cy="32" r="8" fill="#FFFFFF"></circle>472 <path d="M12 32a20 20 0 0 1 4-12l8 4m24 8a20 20 0 0 1-4 12l-8-4" stroke="#FFFFFF" stroke-width="6" fill="none"></path>473 </svg>474 </div>475 </div>476 </div>477 478</div>479</body>480</html>