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; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: #181818;14 color: #fff;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1440px;23 height: 120px;24 background: #000;25 color: #fff;26 }27 .statusbar .time {28 position: absolute;29 left: 40px;30 top: 28px;31 font-size: 52px;32 letter-spacing: 1px;33 }34 .status-icons {35 position: absolute;36 right: 40px;37 top: 26px;38 display: flex;39 gap: 28px;40 align-items: center;41 }42 .status-dot {43 width: 16px; height: 16px; background:#fff; border-radius:50%;44 }45 46 /* App toolbar */47 .appbar {48 position: absolute;49 top: 120px;50 left: 0;51 width: 1440px;52 height: 160px;53 background: #111;54 display: flex;55 align-items: center;56 padding: 0 40px;57 box-sizing: border-box;58 }59 .appbar .title {60 font-size: 68px;61 font-weight: 700;62 color: #d7d7d7;63 }64 .appbar .actions {65 margin-left: auto;66 display: flex;67 gap: 60px;68 align-items: center;69 }70 .appbar svg { width: 72px; height: 72px; fill: none; stroke: #cfcfcf; stroke-width: 6px; }71 72 /* List area */73 .list-area {74 position: absolute;75 top: 280px;76 left: 0;77 width: 1440px;78 height: 1280px;79 background: #efefef;80 }81 .file-row {82 position: relative;83 width: calc(100% - 80px);84 margin: 30px 40px;85 height: 260px;86 border-radius: 18px;87 background: #f7f7f7;88 box-sizing: border-box;89 display: flex;90 align-items: center;91 padding: 40px 40px;92 }93 .file-row.selected { background: #27486f; color: #eaf1ff; }94 .file-icon {95 width: 140px; height: 140px; margin-right: 40px;96 background: #e0e0e0; border: 1px solid #bdbdbd; border-radius: 20px;97 display: flex; align-items: center; justify-content: center; color:#757575;98 }99 .file-texts { flex: 1; }100 .file-name {101 font-size: 64px; font-weight: 800; color: #1a1a1a;102 }103 .selected .file-name { color: #ffffff; }104 .file-meta {105 margin-top: 18px; font-size: 40px; color: #6e6e6e;106 }107 .selected .file-meta { color: #d7e4ff; }108 .file-check {109 width: 80px; height: 80px; border-radius: 8px;110 border: 6px solid #2b2b2b; margin-left: 30px; display:flex; align-items:center; justify-content:center;111 }112 .file-check.selected {113 background: #0d0d0d; border-color: #0d0d0d;114 }115 .file-check svg { width: 60px; height: 60px; stroke: #fff; stroke-width: 8px; fill: none; }116 117 /* Modal overlay */118 .overlay {119 position: absolute;120 top: 0; left: 0; width: 1440px; height: 3120px;121 background: rgba(0,0,0,0.45);122 }123 .dialog {124 position: absolute;125 left: 50%; top: 50%;126 width: 1080px; height: 720px;127 transform: translate(-50%, -40%); /* slightly above center like screenshot */128 background: #ffffff;129 color: #111;130 border-radius: 36px;131 box-shadow: 0 24px 60px rgba(0,0,0,0.4);132 padding: 60px;133 box-sizing: border-box;134 }135 .dialog h2 {136 margin: 0 0 60px 0;137 font-size: 64px; font-weight: 800; color: #1b1b1b;138 }139 .input-line {140 font-size: 54px;141 color: #333;142 padding-bottom: 16px;143 border-bottom: 3px solid #cfcfcf;144 word-break: break-all;145 }146 .dialog-actions {147 position: absolute;148 bottom: 52px; right: 60px;149 display: flex; gap: 40px;150 }151 .btn-link {152 font-size: 58px; color: #4a8cff; cursor: default;153 }154 155 /* Bottom tool strip */156 .strip {157 position: absolute;158 bottom: 540px;159 left: 0;160 width: 1440px;161 height: 160px;162 background: #dcdcdc;163 display: flex;164 align-items: center;165 padding: 0 40px;166 box-sizing: border-box;167 color: #333;168 gap: 40px;169 }170 .chip {171 width: 80px; height: 80px; border-radius: 12px; background:#fff; border: 2px solid #bdbdbd;172 display:flex; align-items:center; justify-content:center; font-size: 42px; font-weight:700;173 }174 .strip svg { width: 64px; height: 64px; stroke: #333; stroke-width: 6px; fill: none; }175 .strip .cancel { margin-left: auto; font-size: 52px; color: #5d5d5d; }176 177 /* Ad banner */178 .adbar {179 position: absolute;180 bottom: 380px;181 left: 0;182 width: 1440px;183 height: 160px;184 background: #f2f2f2;185 display: flex; align-items: center;186 padding: 0 40px; box-sizing: border-box;187 color: #111;188 gap: 30px;189 border-top: 1px solid #e0e0e0;190 }191 .ad-img {192 width: 120px; height: 120px; background:#E0E0E0; border:1px solid #BDBDBD;193 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 28px;194 }195 .ad-text { font-size: 48px; color:#222; }196 .ad-badge { font-size: 36px; color:#6b6b6b; margin-left: 12px; }197 .ad-open { margin-left: auto; font-size: 52px; color:#2b8cff; }198 199 /* Bottom navigation */200 .bottom-nav {201 position: absolute;202 bottom: 140px;203 left: 0;204 width: 1440px;205 height: 240px;206 background: #000;207 display: flex; align-items: center; justify-content: space-around;208 }209 .nav-item { display:flex; flex-direction: column; align-items: center; color:#fff; }210 .nav-item svg { width: 120px; height: 120px; stroke-width: 6px; }211 .nav-item.red svg { stroke: #d02929; fill: none; }212 .nav-item.white svg { stroke: #f2f2f2; fill: none; }213 214 /* Gesture pill */215 .gesture {216 position: absolute;217 bottom: 60px; left: 50%;218 width: 420px; height: 16px; background:#ffffff; border-radius: 12px;219 transform: translateX(-50%);220 opacity: 0.9;221 }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="statusbar">229 <div class="time">3:51</div>230 <div class="status-icons">231 <div style="width:50px;height:50px;border-radius:50%;border:4px solid #fff;display:flex;align-items:center;justify-content:center;font-size:28px;">ib</div>232 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#fff" fill="none"/><line x1="16" y1="16" x2="22" y2="22" stroke="#fff"/></svg>233 <div class="status-dot"></div>234 <div class="status-dot"></div>235 <svg viewBox="0 0 24 24"><path d="M2 16c4-6 16-6 20 0" stroke="#fff"/><path d="M6 16c3-4 9-4 12 0" stroke="#fff"/><circle cx="12" cy="16" r="1.5" fill="#fff"/></svg>236 <svg viewBox="0 0 32 18">237 <rect x="1" y="3" width="26" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>238 <rect x="4" y="6" width="20" height="6" fill="#fff"/>239 <rect x="29" y="6" width="2" height="6" fill="#fff"/>240 </svg>241 </div>242 </div>243 244 <!-- App toolbar -->245 <div class="appbar">246 <div class="title">(2)</div>247 <div class="actions">248 <!-- search -->249 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><line x1="16" y1="16" x2="22" y2="22"/></svg>250 <!-- scissors -->251 <svg viewBox="0 0 24 24">252 <circle cx="6" cy="6" r="3"/>253 <circle cx="6" cy="18" r="3"/>254 <line x1="9" y1="8" x2="20" y2="2"/>255 <line x1="9" y1="16" x2="20" y2="22"/>256 </svg>257 <!-- pencil -->258 <svg viewBox="0 0 24 24">259 <path d="M3 21l3-9 12-8 3 3-8 12-10 2z"/>260 </svg>261 <!-- menu -->262 <svg viewBox="0 0 24 24">263 <line x1="3" y1="6" x2="21" y2="6"/>264 <line x1="3" y1="12" x2="21" y2="12"/>265 <line x1="3" y1="18" x2="21" y2="18"/>266 </svg>267 </div>268 </div>269 270 <!-- File list -->271 <div class="list-area">272 <div class="file-row selected">273 <div class="file-icon">274 <svg viewBox="0 0 64 64" width="64" height="64">275 <rect x="12" y="8" width="40" height="48" rx="6" ry="6" fill="#fff" stroke="#bdbdbd" stroke-width="3"/>276 <path d="M28 28 v14 a8 8 0 1 0 6 7 v-21" stroke="#757575" fill="none" stroke-width="3"/>277 <circle cx="24" cy="50" r="4" fill="#757575"/>278 </svg>279 </div>280 <div class="file-texts">281 <div class="file-name">2023_12_08_12_46_58_1_1....</div>282 <div class="file-meta">2023-12-08 13:31, 234.3 KB 00:14s</div>283 </div>284 <div class="file-check selected">285 <svg viewBox="0 0 24 24"><path d="M4 12l6 6 10-12"/></svg>286 </div>287 </div>288 289 <div class="file-row">290 <div class="file-icon">291 <svg viewBox="0 0 64 64" width="64" height="64">292 <rect x="12" y="8" width="40" height="48" rx="6" ry="6" fill="#fff" stroke="#bdbdbd" stroke-width="3"/>293 <path d="M28 28 v14 a8 8 0 1 0 6 7 v-21" stroke="#757575" fill="none" stroke-width="3"/>294 <circle cx="24" cy="50" r="4" fill="#757575"/>295 </svg>296 </div>297 <div class="file-texts">298 <div class="file-name">2023_12_08_12_46_58_1.mp3</div>299 <div class="file-meta">2023-12-08 12:47, 567.8 KB 00:36s</div>300 </div>301 <div class="file-check"></div>302 </div>303 </div>304 305 <!-- Modal overlay and dialog -->306 <div class="overlay"></div>307 <div class="dialog">308 <h2>Insert new file name</h2>309 <div class="input-line">2023_12_08_12_46_58_1_1</div>310 <div class="dialog-actions">311 <div class="btn-link">Cancel</div>312 <div class="btn-link">OK</div>313 </div>314 </div>315 316 <!-- Bottom tool strip -->317 <div class="strip">318 <div class="chip">1</div>319 <!-- play -->320 <svg viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" fill="#333"/></svg>321 <!-- trash -->322 <svg viewBox="0 0 24 24">323 <rect x="6" y="7" width="12" height="14"/>324 <line x1="4" y1="7" x2="20" y2="7"/>325 <rect x="9" y="2" width="6" height="3"/>326 </svg>327 <!-- share -->328 <svg viewBox="0 0 24 24">329 <circle cx="6" cy="12" r="3"/>330 <circle cx="18" cy="6" r="3"/>331 <circle cx="18" cy="18" r="3"/>332 <line x1="8" y1="11" x2="15" y2="7"/>333 <line x1="8" y1="13" x2="15" y2="17"/>334 </svg>335 <div class="cancel">Cancel</div>336 </div>337 338 <!-- Ad banner -->339 <div class="adbar">340 <div class="ad-img">[IMG: Booking logo]</div>341 <div class="ad-text">Booking.com: Hotels & Flights</div>342 <div class="ad-badge">AD</div>343 <div class="ad-open">OPEN</div>344 </div>345 346 <!-- Bottom navigation -->347 <div class="bottom-nav">348 <div class="nav-item red">349 <svg viewBox="0 0 24 24">350 <path d="M6 18v-4c0-4 12-4 12 0v4"/>351 <circle cx="6" cy="18" r="3"/>352 <circle cx="18" cy="18" r="3"/>353 </svg>354 </div>355 <div class="nav-item white">356 <svg viewBox="0 0 24 24">357 <rect x="9" y="6" width="6" height="10"/>358 <line x1="9" y1="6" x2="15" y2="6"/>359 <path d="M9 16v2c0 2 6 2 6 0v-2"/>360 </svg>361 </div>362 <div class="nav-item white">363 <svg viewBox="0 0 24 24">364 <circle cx="12" cy="12" r="6"/>365 <line x1="12" y1="2" x2="12" y2="6"/>366 <line x1="12" y1="18" x2="12" y2="22"/>367 <line x1="2" y1="12" x2="6" y2="12"/>368 <line x1="18" y1="12" x2="22" y2="12"/>369 </svg>370 </div>371 </div>372 373 <!-- Gesture pill -->374 <div class="gesture"></div>375 376</div>377</body>378</html>