GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1440px;13 height: 3120px;14 background: #0E0F0E;15 font-family: "Roboto", Arial, sans-serif;16 color: #EAEAEA;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 height: 120px;25 width: 100%;26 padding: 0 40px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #FFFFFF;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 24px;37 font-size: 52px;38 letter-spacing: 1px;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 28px;44 }45 .dot {46 width: 16px;47 height: 16px;48 background: #FFFFFF;49 border-radius: 50%;50 opacity: 0.9;51 }52 .icon-wifi svg, .icon-battery svg, .icon-notif svg {53 display: block;54 }55 56 /* Top tabs */57 .tabs {58 position: absolute;59 top: 140px;60 left: 0;61 width: 100%;62 padding: 0 48px;63 box-sizing: border-box;64 display: flex;65 align-items: center;66 gap: 64px;67 color: #A8B3A2;68 font-size: 54px;69 }70 .tab {71 position: relative;72 padding: 24px 8px 28px;73 }74 .tab.active {75 color: #97C380;76 font-weight: 600;77 }78 .tab.active::after {79 content: "";80 position: absolute;81 bottom: 0;82 left: 0;83 width: 180px;84 height: 10px;85 border-radius: 8px;86 background: #97C380;87 }88 89 /* File card preview behind the sheet */90 .file-list {91 position: absolute;92 top: 260px;93 left: 0;94 width: 100%;95 padding: 0 48px;96 box-sizing: border-box;97 }98 .file-card {99 background: #1B1D1B;100 border-radius: 28px;101 height: 240px;102 display: flex;103 align-items: center;104 justify-content: space-between;105 padding: 0 40px;106 color: #D9D9D9;107 box-shadow: 0 8px 24px rgba(0,0,0,0.4) inset;108 }109 .file-info {110 display: flex;111 align-items: center;112 gap: 28px;113 font-size: 58px;114 }115 .doc-icon {116 width: 96px;117 height: 120px;118 border-radius: 12px;119 background: #4C78FF;120 position: relative;121 }122 .doc-icon::after {123 content: "";124 position: absolute;125 right: 0;126 top: 0;127 width: 30px;128 height: 30px;129 background: #A9B9FF;130 clip-path: polygon(0 0, 100% 0, 100% 100%);131 border-top-right-radius: 12px;132 }133 .kebab {134 display: flex;135 flex-direction: column;136 gap: 14px;137 margin-right: 12px;138 }139 .kebab span {140 width: 14px;141 height: 14px;142 background: #8C8C8C;143 border-radius: 50%;144 }145 146 /* Bottom sheet */147 .bottom-sheet {148 position: absolute;149 left: 0;150 right: 0;151 bottom: 0;152 height: 2000px;153 background: #273327;154 border-top-left-radius: 64px;155 border-top-right-radius: 64px;156 box-shadow: 0 -12px 40px rgba(0,0,0,0.6);157 padding: 48px 60px 160px;158 box-sizing: border-box;159 }160 .sheet-header {161 display: flex;162 align-items: center;163 gap: 32px;164 margin-bottom: 24px;165 }166 .sheet-header .page-icon {167 width: 72px;168 height: 72px;169 }170 .sheet-title {171 font-size: 64px;172 color: #EDEFEA;173 }174 175 .divider {176 height: 2px;177 background: rgba(255,255,255,0.08);178 margin: 24px 0 8px;179 }180 181 .action {182 display: flex;183 align-items: center;184 gap: 36px;185 padding: 38px 0;186 color: #DDE2D7;187 }188 .action .label {189 font-size: 58px;190 line-height: 1.2;191 letter-spacing: 0.2px;192 }193 .action .icon {194 width: 68px;195 height: 68px;196 display: inline-flex;197 align-items: center;198 justify-content: center;199 }200 .action .icon svg {201 width: 64px;202 height: 64px;203 fill: none;204 stroke: #C9D2C2;205 stroke-width: 5;206 stroke-linecap: round;207 stroke-linejoin: round;208 }209 210 /* Bottom home bar indicator */211 .home-bar {212 position: absolute;213 bottom: 40px;214 left: 50%;215 transform: translateX(-50%);216 width: 300px;217 height: 18px;218 background: #FFFFFF;219 opacity: 0.9;220 border-radius: 12px;221 }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="status-bar">229 <div class="status-left">230 <span>5:35</span>231 <div class="dot"></div>232 <div class="dot" style="opacity:0.6;"></div>233 </div>234 <div class="status-right">235 <!-- Simple notification bell -->236 <div class="icon-notif">237 <svg width="48" height="48" viewBox="0 0 48 48">238 <path d="M24 42c3 0 5-2 5-4H19c0 2 2 4 5 4Z"></path>239 <path d="M10 34h28c-2-3-3-8-3-13a11 11 0 0 0-22 0c0 5-1 10-3 13Z"></path>240 </svg>241 </div>242 <!-- WiFi -->243 <div class="icon-wifi">244 <svg width="48" height="48" viewBox="0 0 48 48">245 <path d="M8 18c8-8 24-8 32 0"></path>246 <path d="M13 24c6-6 16-6 22 0"></path>247 <path d="M18 30c4-4 8-4 12 0"></path>248 <circle cx="24" cy="36" r="2" fill="#FFFFFF"></circle>249 </svg>250 </div>251 <!-- Battery -->252 <div class="icon-battery">253 <svg width="64" height="48" viewBox="0 0 64 48">254 <rect x="6" y="10" width="48" height="28" rx="5" stroke="#FFFFFF" fill="none" stroke-width="4"></rect>255 <rect x="10" y="14" width="36" height="20" rx="3" fill="#FFFFFF"></rect>256 <rect x="54" y="18" width="6" height="12" rx="2" fill="#FFFFFF"></rect>257 </svg>258 </div>259 </div>260 </div>261 262 <!-- Tabs -->263 <div class="tabs">264 <div class="tab active">Suggested</div>265 <div class="tab">Notifications</div>266 </div>267 268 <!-- File preview row -->269 <div class="file-list">270 <div class="file-card">271 <div class="file-info">272 <div class="doc-icon"></div>273 <div style="font-weight:500;">agents.txt</div>274 </div>275 <div class="kebab">276 <span></span><span></span><span></span>277 </div>278 </div>279 </div>280 281 <!-- Bottom sheet -->282 <div class="bottom-sheet">283 <div class="sheet-header">284 <svg class="page-icon" viewBox="0 0 64 64">285 <rect x="10" y="8" width="40" height="48" rx="8" fill="#4C78FF"></rect>286 <path d="M50 8v16c0 4-4 8-8 8H26" fill="#A9B9FF"></path>287 </svg>288 <div class="sheet-title">Shopping list</div>289 </div>290 291 <div class="divider"></div>292 293 <div class="action">294 <div class="icon">295 <svg viewBox="0 0 64 64">296 <path d="M20 26a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"></path>297 <path d="M20 36c-8 0-14 6-14 14"></path>298 <path d="M44 34v-8"></path>299 <path d="M40 30h8"></path>300 </svg>301 </div>302 <div class="label">Share</div>303 </div>304 305 <div class="action">306 <div class="icon">307 <svg viewBox="0 0 64 64">308 <circle cx="22" cy="24" r="10"></circle>309 <circle cx="46" cy="24" r="8"></circle>310 <path d="M6 46c2-8 10-14 16-14s14 6 16 14"></path>311 <path d="M34 44c3-6 8-10 12-10 6 0 10 4 12 10"></path>312 </svg>313 </div>314 <div class="label">Manage access</div>315 </div>316 317 <div class="action">318 <div class="icon">319 <svg viewBox="0 0 64 64">320 <path d="M32 8l8 16 18 2-13 12 4 18-17-9-17 9 4-18-13-12 18-2 8-16Z"></path>321 </svg>322 </div>323 <div class="label">Add to Starred</div>324 </div>325 326 <div class="action">327 <div class="icon">328 <svg viewBox="0 0 64 64">329 <circle cx="32" cy="32" r="22"></circle>330 <path d="M20 34l8 8 16-18"></path>331 </svg>332 </div>333 <div class="label">Make available offline</div>334 </div>335 336 <div class="divider" style="margin-top:8px;"></div>337 338 <div class="action">339 <div class="icon">340 <svg viewBox="0 0 64 64">341 <path d="M14 28c6-6 30-6 36 0"></path>342 <path d="M18 34c4-4 24-4 28 0"></path>343 </svg>344 </div>345 <div class="label">Copy link</div>346 </div>347 348 <div class="action">349 <div class="icon">350 <svg viewBox="0 0 64 64">351 <rect x="10" y="10" width="28" height="36" rx="6"></rect>352 <rect x="26" y="18" width="28" height="36" rx="6"></rect>353 </svg>354 </div>355 <div class="label">Make a copy</div>356 </div>357 358 <div class="action">359 <div class="icon">360 <svg viewBox="0 0 64 64">361 <path d="M50 32 30 18v28l20-14Z"></path>362 <path d="M14 20v24"></path>363 </svg>364 </div>365 <div class="label">Send a copy</div>366 </div>367 368 <div class="divider"></div>369 370 <div class="action">371 <div class="icon">372 <svg viewBox="0 0 64 64">373 <path d="M20 12h24v8H20z"></path>374 <path d="M14 24h36v28H14z"></path>375 <path d="M26 34h12"></path>376 </svg>377 </div>378 <div class="label">Open with</div>379 </div>380 381 <div class="action">382 <div class="icon">383 <svg viewBox="0 0 64 64">384 <path d="M32 10v28"></path>385 <path d="M22 26l10 12 10-12"></path>386 <rect x="14" y="40" width="36" height="12" rx="3"></rect>387 </svg>388 </div>389 <div class="label">Download</div>390 </div>391 392 <div class="action">393 <div class="icon">394 <svg viewBox="0 0 64 64">395 <path d="M14 50l16-6"></path>396 <path d="M30 44l20-20"></path>397 <path d="M40 12l12 12"></path>398 </svg>399 </div>400 <div class="label">Rename</div>401 </div>402 403 <div class="action">404 <div class="icon">405 <svg viewBox="0 0 64 64">406 <path d="M14 20h24l10 10v18H14z"></path>407 <path d="M38 20v10h10"></path>408 </svg>409 </div>410 <div class="label">Show file location</div>411 </div>412 </div>413 414 <!-- Home bar indicator -->415 <div class="home-bar"></div>416</div>417</body>418</html>