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=1080, initial-scale=1.0">6<title>Documents Home UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #212121;20 color: #FFFFFF;21 }22 23 /* Status bar */24 .status-bar {25 height: 96px;26 padding: 0 28px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 gap: 22px;37 align-items: center;38 }39 .ico {40 display: inline-flex;41 width: 46px;42 height: 46px;43 }44 45 /* Quick actions */46 .quick-actions {47 padding: 10px 12px 14px 12px;48 display: flex;49 justify-content: space-around;50 align-items: flex-start;51 }52 .qa {53 width: 210px;54 display: flex;55 flex-direction: column;56 align-items: center;57 gap: 18px;58 }59 .qa .circle {60 width: 132px;61 height: 132px;62 border-radius: 50%;63 display: flex;64 align-items: center;65 justify-content: center;66 }67 .qa .label {68 font-size: 28px;69 color: #EAEAEA;70 }71 .c-blue { background:#2B7CFF; }72 .c-green { background:#2EAF5E; }73 .c-orange { background:#E9722D; }74 .c-red { background:#D33C3C; }75 76 /* Ad banner */77 .ad-banner {78 margin: 10px 24px 22px;79 background: #2D2D2D;80 border-radius: 16px;81 border: 1px solid #3A3A3A;82 display: flex;83 align-items: center;84 gap: 20px;85 padding: 18px;86 }87 .ad-img {88 width: 170px;89 height: 120px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 color: #757575;93 display: flex;94 align-items: center;95 justify-content: center;96 font-size: 24px;97 text-align: center;98 }99 .ad-text {100 flex: 1;101 display: flex;102 flex-direction: column;103 gap: 6px;104 }105 .ad-title {106 font-size: 30px;107 color: #FFFFFF;108 font-weight: 600;109 }110 .ad-sub {111 font-size: 26px;112 color: #BDBDBD;113 line-height: 1.35;114 }115 .ad-btn {116 background: #2B7CFF;117 color: #fff;118 font-weight: 700;119 font-size: 28px;120 padding: 18px 26px;121 border-radius: 10px;122 white-space: nowrap;123 }124 125 /* Sections */126 .section {127 padding: 8px 24px 6px;128 }129 .section .row {130 display: flex;131 align-items: center;132 justify-content: space-between;133 }134 .section-title {135 font-size: 34px;136 font-weight: 600;137 color: #F1F1F1;138 }139 .section .right {140 display: flex;141 align-items: center;142 gap: 10px;143 color: #D0D0D0;144 font-size: 28px;145 }146 .divider {147 height: 1px;148 background: #3A3A3A;149 margin-top: 14px;150 }151 152 /* Cards grid */153 .grid {154 padding: 18px 24px;155 display: flex;156 flex-wrap: wrap;157 gap: 24px;158 }159 .file-card {160 width: 504px;161 border-radius: 18px;162 border: 1px solid #3A3A3A;163 overflow: hidden;164 background: #2B2B2B;165 position: relative;166 }167 .file-card.big { height: 360px; }168 .file-card.small { height: 420px; }169 170 .card-top {171 background: #FFFFFF;172 color: #111;173 padding: 24px;174 height: calc(100% - 92px);175 display: flex;176 align-items: flex-start;177 font-size: 44px;178 line-height: 1.22;179 }180 .card-top.thumb {181 padding: 0;182 background: transparent;183 }184 .thumb-box {185 width: 100%;186 height: 100%;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 color: #757575;190 display: flex;191 align-items: center;192 justify-content: center;193 font-size: 28px;194 text-align: center;195 }196 .pin {197 position: absolute;198 top: 14px;199 right: 14px;200 width: 52px;201 height: 52px;202 border-radius: 50%;203 background: #616161;204 border: 2px solid #7A7A7A;205 display: flex;206 align-items: center;207 justify-content: center;208 }209 .card-bottom {210 height: 92px;211 background: #2F2F2F;212 color: #EAEAEA;213 display: flex;214 align-items: center;215 padding: 0 18px;216 gap: 16px;217 }218 .type-ico {219 width: 42px;220 height: 42px;221 border-radius: 6px;222 display: inline-flex;223 align-items: center;224 justify-content: center;225 }226 .t-blue { background:#2B7CFF; }227 .t-red { background:#D55; }228 .t-orange { background:#E9722D; }229 .t-green { background:#2EAF5E; }230 231 .file-name {232 font-size: 28px;233 color: #DCDCDC;234 flex: 1;235 white-space: nowrap;236 overflow: hidden;237 text-overflow: ellipsis;238 }239 .kebab {240 width: 40px;241 height: 40px;242 display: inline-flex;243 align-items: center;244 justify-content: center;245 }246 247 /* Gesture bar */248 .gesture {249 position: absolute;250 left: 50%;251 transform: translateX(-50%);252 bottom: 28px;253 width: 320px;254 height: 10px;255 background: #A9A9A9;256 border-radius: 8px;257 opacity: 0.8;258 }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Status Bar -->265 <div class="status-bar">266 <div class="time">11:01</div>267 <div class="status-right">268 <!-- WiFi -->269 <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">270 <path d="M3 9c4.7-4.2 13.3-4.2 18 0"></path>271 <path d="M6 12c3.2-2.8 8.8-2.8 12 0"></path>272 <path d="M9 15c1.6-1.4 4.4-1.4 6 0"></path>273 <circle cx="12" cy="18" r="1.3" fill="#FFFFFF" stroke="none"></circle>274 </svg>275 <!-- Battery -->276 <svg class="ico" viewBox="0 0 28 24">277 <rect x="1" y="6" width="22" height="12" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>278 <rect x="3" y="8" width="18" height="8" rx="1" fill="#FFFFFF"></rect>279 <rect x="23" y="9" width="4" height="6" rx="1" fill="#FFFFFF"></rect>280 </svg>281 </div>282 </div>283 284 <!-- Quick actions -->285 <div class="quick-actions">286 <div class="qa">287 <div class="circle c-blue">288 <svg width="68" height="68" viewBox="0 0 24 24" fill="#FFFFFF">289 <path d="M6 3h9l3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3z"></path>290 <rect x="8" y="10" width="8" height="2" fill="#2B7CFF"></rect>291 </svg>292 </div>293 <div class="label">Document</div>294 </div>295 <div class="qa">296 <div class="circle c-green">297 <svg width="68" height="68" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">298 <rect x="4" y="4" width="16" height="16" rx="2"></rect>299 <path d="M4 9h16M9 4v16"></path>300 </svg>301 </div>302 <div class="label">Spreadsheet</div>303 </div>304 <div class="qa">305 <div class="circle c-orange">306 <svg width="68" height="68" viewBox="0 0 24 24" fill="#FFFFFF">307 <path d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path>308 <rect x="7" y="7" width="10" height="10" fill="#E9722D"></rect>309 <path d="M7 12h10" stroke="#fff" stroke-width="2"></path>310 </svg>311 </div>312 <div class="label">Presentation</div>313 </div>314 <div class="qa">315 <div class="circle c-red">316 <svg width="68" height="68" viewBox="0 0 24 24" fill="#FFFFFF">317 <path d="M6 3h9l3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3z"></path>318 <text x="8" y="15" font-size="7" fill="#D33C3C" font-weight="700">PDF</text>319 </svg>320 </div>321 <div class="label">PDF</div>322 </div>323 </div>324 325 <!-- Ad banner -->326 <div class="ad-banner">327 <div class="ad-img">[IMG: App Promo]</div>328 <div class="ad-text">329 <div class="ad-title">Sofascore</div>330 <div class="ad-sub">Sports app for a passionate sports fan or a seri...</div>331 </div>332 <div class="ad-btn">INSTALL</div>333 </div>334 335 <!-- Last opened -->336 <div class="section">337 <div class="row">338 <div class="section-title">Last opened</div>339 <div class="right">340 <span>3 More</span>341 <svg width="26" height="26" viewBox="0 0 24 24" fill="#D0D0D0">342 <path d="M7 10l5 5 5-5z"></path>343 </svg>344 </div>345 </div>346 <div class="divider"></div>347 </div>348 349 <div class="grid">350 <!-- Card 1 -->351 <div class="file-card big">352 <div class="pin">353 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2">354 <path d="M20 6l-11 11-5-5"></path>355 </svg>356 </div>357 <div class="card-top">358 Training will be held on July 25359 </div>360 <div class="card-bottom">361 <div class="type-ico t-blue">362 <svg width="22" height="22" viewBox="0 0 24 24" fill="#FFF">363 <rect x="5" y="4" width="14" height="16" rx="2"></rect>364 </svg>365 </div>366 <div class="file-name">skill training</div>367 <div class="kebab">368 <svg width="24" height="24" viewBox="0 0 24 24" fill="#DCDCDC">369 <circle cx="12" cy="5" r="2"></circle>370 <circle cx="12" cy="12" r="2"></circle>371 <circle cx="12" cy="19" r="2"></circle>372 </svg>373 </div>374 </div>375 </div>376 377 <!-- Card 2 -->378 <div class="file-card big">379 <div class="pin">380 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2">381 <path d="M20 6l-11 11-5-5"></path>382 </svg>383 </div>384 <div class="card-top">385 PPT on<br>management<br>training386 </div>387 <div class="card-bottom">388 <div class="type-ico t-blue">389 <svg width="22" height="22" viewBox="0 0 24 24" fill="#FFF">390 <rect x="5" y="4" width="14" height="16" rx="2"></rect>391 </svg>392 </div>393 <div class="file-name">PPT on...training</div>394 <div class="kebab">395 <svg width="24" height="24" viewBox="0 0 24 24" fill="#DCDCDC">396 <circle cx="12" cy="5" r="2"></circle>397 <circle cx="12" cy="12" r="2"></circle>398 <circle cx="12" cy="19" r="2"></circle>399 </svg>400 </div>401 </div>402 </div>403 </div>404 405 <!-- Sample files -->406 <div class="section">407 <div class="row">408 <div class="section-title">Sample files</div>409 <div style="width: 1px;"></div>410 </div>411 <div class="divider"></div>412 </div>413 414 <div class="grid">415 <!-- Sample 1 -->416 <div class="file-card small">417 <div class="card-top thumb">418 <div class="thumb-box">[IMG: Document Preview]</div>419 </div>420 <div class="card-bottom">421 <div class="type-ico t-blue">422 <svg width="22" height="22" viewBox="0 0 24 24" fill="#FFF">423 <rect x="5" y="4" width="14" height="16" rx="2"></rect>424 </svg>425 </div>426 <div class="file-name">Overview</div>427 <div class="kebab">428 <svg width="24" height="24" viewBox="0 0 24 24" fill="#DCDCDC">429 <circle cx="12" cy="5" r="2"></circle>430 <circle cx="12" cy="12" r="2"></circle>431 <circle cx="12" cy="19" r="2"></circle>432 </svg>433 </div>434 </div>435 </div>436 437 <!-- Sample 2 -->438 <div class="file-card small">439 <div class="card-top thumb">440 <div class="thumb-box">[IMG: PDF Preview]</div>441 </div>442 <div class="card-bottom">443 <div class="type-ico t-red">444 <svg width="22" height="22" viewBox="0 0 24 24" fill="#FFF">445 <rect x="5" y="4" width="14" height="16" rx="2"></rect>446 </svg>447 </div>448 <div class="file-name">Getting_Started</div>449 <div class="kebab">450 <svg width="24" height="24" viewBox="0 0 24 24" fill="#DCDCDC">451 <circle cx="12" cy="5" r="2"></circle>452 <circle cx="12" cy="12" r="2"></circle>453 <circle cx="12" cy="19" r="2"></circle>454 </svg>455 </div>456 </div>457 </div>458 459 <!-- Sample 3 -->460 <div class="file-card small">461 <div class="card-top thumb">462 <div class="thumb-box">[IMG: Slides Preview]</div>463 </div>464 <div class="card-bottom">465 <div class="type-ico t-orange">466 <svg width="22" height="22" viewBox="0 0 24 24" fill="#FFF">467 <rect x="5" y="4" width="14" height="16" rx="2"></rect>468 </svg>469 </div>470 <div class="file-name">OfficeSui...features</div>471 <div class="kebab">472 <svg width="24" height="24" viewBox="0 0 24 24" fill="#DCDCDC">473 <circle cx="12" cy="5" r="2"></circle>474 <circle cx="12" cy="12" r="2"></circle>475 <circle cx="12" cy="19" r="2"></circle>476 </svg>477 </div>478 </div>479 </div>480 481 <!-- Sample 4 -->482 <div class="file-card small">483 <div class="card-top thumb">484 <div class="thumb-box">[IMG: Spreadsheet Preview]</div>485 </div>486 <div class="card-bottom">487 <div class="type-ico t-green">488 <svg width="22" height="22" viewBox="0 0 24 24" fill="#FFF">489 <rect x="5" y="4" width="14" height="16" rx="2"></rect>490 </svg>491 </div>492 <div class="file-name">Budget_Overview</div>493 <div class="kebab">494 <svg width="24" height="24" viewBox="0 0 24 24" fill="#DCDCDC">495 <circle cx="12" cy="5" r="2"></circle>496 <circle cx="12" cy="12" r="2"></circle>497 <circle cx="12" cy="19" r="2"></circle>498 </svg>499 </div>500 </div>501 </div>502 </div>503 504 <!-- Gesture bar -->505 <div class="gesture"></div>506</div>507</body>508</html>