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: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: "Segoe UI", Roboto, Arial, sans-serif;15 color: #2f2f2f;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 140px;25 background: #e9e9e9;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 color: #606060;31 }32 .status-time {33 font-size: 40px;34 font-weight: 600;35 margin-right: 24px;36 }37 .status-icons {38 display: flex;39 gap: 24px;40 align-items: center;41 flex: 1;42 }43 .dot-icon {44 width: 32px;45 height: 32px;46 background: #bdbdbd;47 border-radius: 50%;48 }49 .status-right {50 display: flex;51 align-items: center;52 gap: 24px;53 }54 .status-svg { width: 40px; height: 40px; fill: #616161; }55 56 /* Header area */57 .header {58 position: absolute;59 top: 140px;60 left: 0;61 width: 1080px;62 height: 360px;63 background: #ffffff;64 box-sizing: border-box;65 padding: 24px 32px 0 32px;66 }67 .header-top {68 display: flex;69 justify-content: space-between;70 align-items: center;71 padding-top: 10px;72 }73 .acrobat-logo {74 width: 72px;75 height: 72px;76 background: #E0E0E0;77 border: 1px solid #BDBDBD;78 display: flex;79 justify-content: center;80 align-items: center;81 color: #757575;82 border-radius: 8px;83 font-size: 22px;84 }85 .header-actions {86 display: flex;87 gap: 28px;88 align-items: center;89 }90 .icon-btn svg { width: 56px; height: 56px; fill: #7a7a7a; }91 92 .welcome-title {93 font-size: 72px;94 font-weight: 700;95 margin: 24px 0 12px 8px;96 color: #222;97 }98 99 /* Tabs */100 .tabs {101 display: flex;102 gap: 36px;103 padding: 0 8px;104 align-items: center;105 height: 88px;106 }107 .tab {108 font-size: 36px;109 color: #666;110 }111 .tab.active {112 color: #222;113 position: relative;114 font-weight: 600;115 }116 .tab.active::after {117 content: "";118 position: absolute;119 left: 0;120 bottom: -10px;121 width: 120px;122 height: 6px;123 background: #222;124 border-radius: 3px;125 }126 127 /* List */128 .list {129 position: absolute;130 top: 500px;131 left: 0;132 right: 0;133 bottom: 280px;134 overflow: hidden;135 padding-top: 8px;136 }137 .list-item {138 display: flex;139 align-items: center;140 padding: 24px 24px 24px 32px;141 box-sizing: border-box;142 border-bottom: 1px solid #e6e6e6;143 gap: 24px;144 height: 220px;145 }146 .thumb {147 width: 120px;148 height: 150px;149 background: #E0E0E0;150 border: 1px solid #BDBDBD;151 display: flex;152 justify-content: center;153 align-items: center;154 color: #757575;155 font-size: 22px;156 }157 .item-content {158 flex: 1;159 min-width: 0;160 }161 .item-title {162 font-size: 42px;163 font-weight: 600;164 color: #303030;165 white-space: nowrap;166 overflow: hidden;167 text-overflow: ellipsis;168 margin-bottom: 10px;169 }170 .item-meta {171 display: flex;172 align-items: center;173 gap: 16px;174 color: #777;175 font-size: 32px;176 }177 .meta-icon svg { width: 36px; height: 36px; fill: #777; }178 .kebab {179 width: 48px;180 height: 48px;181 display: flex;182 align-items: center;183 justify-content: center;184 }185 .kebab svg { width: 10px; height: 40px; fill: #9e9e9e; }186 187 /* FAB */188 .fab {189 position: absolute;190 right: 64px;191 bottom: 340px;192 width: 160px;193 height: 160px;194 border-radius: 50%;195 background: #1E88E5;196 box-shadow: 0 8px 18px rgba(0,0,0,0.25);197 display: flex;198 justify-content: center;199 align-items: center;200 }201 .fab svg { width: 80px; height: 80px; fill: #fff; }202 203 /* Bottom navigation */204 .bottom-nav {205 position: absolute;206 bottom: 0;207 left: 0;208 width: 1080px;209 height: 220px;210 background: #ffffff;211 border-top: 1px solid #dddddd;212 display: flex;213 justify-content: space-around;214 align-items: center;215 box-sizing: border-box;216 padding-bottom: 24px;217 }218 .nav-item {219 display: flex;220 flex-direction: column;221 align-items: center;222 gap: 12px;223 color: #7a7a7a;224 width: 200px;225 }226 .nav-item svg { width: 64px; height: 64px; }227 .nav-item .label { font-size: 30px; }228 .nav-item.active { color: #1E88E5; }229 .nav-item.active svg { fill: #1E88E5; }230 .bottom-gesture {231 position: absolute;232 bottom: 230px;233 left: 50%;234 transform: translateX(-50%);235 width: 220px;236 height: 12px;237 background: #9e9e9e;238 border-radius: 8px;239 opacity: 0.6;240 }241</style>242</head>243<body>244<div id="render-target">245 246 <!-- Status Bar -->247 <div class="status-bar">248 <div class="status-time">7:59</div>249 <div class="status-icons">250 <div class="dot-icon"></div>251 <div class="dot-icon"></div>252 <div class="dot-icon"></div>253 <div class="dot-icon"></div>254 <div class="dot-icon"></div>255 <div style="width: 10px; height: 10px; background:#757575; border-radius: 50%;"></div>256 </div>257 <div class="status-right">258 <!-- simple wifi -->259 <svg class="status-svg" viewBox="0 0 24 24">260 <path d="M12 20a2 2 0 1 0 0.001-4.001A2 2 0 0 0 12 20zm-6.5-8.5a12 12 0 0 1 13 0l1.6-1.6a14 14 0 0 0-16.2 0l1.6 1.6zm3.2 3.2a7.5 7.5 0 0 1 10.6 0l1.6-1.6a9.5 9.5 0 0 0-13.8 0l1.6 1.6z"/>261 </svg>262 <!-- battery -->263 <svg class="status-svg" viewBox="0 0 24 24">264 <path d="M2 8a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8zm18-1h2v10h-2V7z"/>265 </svg>266 </div>267 </div>268 269 <!-- Header -->270 <div class="header">271 <div class="header-top">272 <div class="acrobat-logo">[IMG: Acrobat]</div>273 <div class="header-actions">274 <!-- bell -->275 <div class="icon-btn">276 <svg viewBox="0 0 24 24">277 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm8-6V11a8 8 0 1 0-16 0v5l-2 2v1h20v-1l-2-2z"/>278 </svg>279 </div>280 <!-- profile circle -->281 <div class="icon-btn">282 <svg viewBox="0 0 24 24">283 <path d="M12 2a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 8c3.3 0 6 1.7 6 3.8V19H6v-2.2C6 14.7 8.7 13 12 13z"/>284 </svg>285 </div>286 </div>287 </div>288 289 <div class="welcome-title">Welcome</div>290 291 <div class="tabs">292 <div class="tab active">Recent</div>293 <div class="tab">Starred</div>294 </div>295 </div>296 297 <!-- List -->298 <div class="list">299 <div class="list-item">300 <div class="thumb">[IMG: PDF Thumbnail]</div>301 <div class="item-content">302 <div class="item-title">Welcome</div>303 <div class="item-meta">304 <span class="meta-icon">305 <svg viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 0 1 2 2v16l-4-2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/></svg>306 </span>307 <span>PDF</span>308 <span>•</span>309 <span>Yesterday</span>310 <span>•</span>311 <span>212.5 KB</span>312 </div>313 </div>314 <div class="kebab">315 <svg viewBox="0 0 6 24"><path d="M3 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>316 </div>317 </div>318 319 <div class="list-item">320 <div class="thumb">[IMG: PDF Thumbnail]</div>321 <div class="item-content">322 <div class="item-title">lehe108</div>323 <div class="item-meta">324 <span class="meta-icon">325 <svg viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 0 1 2 2v16l-4-2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/></svg>326 </span>327 <span>PDF</span>328 <span>•</span>329 <span>Just now</span>330 <span>•</span>331 <span>913.5 KB</span>332 </div>333 </div>334 <div class="kebab">335 <svg viewBox="0 0 6 24"><path d="M3 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>336 </div>337 </div>338 339 <div class="list-item">340 <div class="thumb">[IMG: PDF Thumbnail]</div>341 <div class="item-content">342 <div class="item-title">road_safety_books</div>343 <div class="item-meta">344 <span class="meta-icon">345 <svg viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 0 1 2 2v16l-4-2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/></svg>346 </span>347 <span>PDF</span>348 <span>•</span>349 <span>Yesterday</span>350 <span>•</span>351 <span>4.5 MB</span>352 </div>353 </div>354 <div class="kebab">355 <svg viewBox="0 0 6 24"><path d="M3 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>356 </div>357 </div>358 359 <div class="list-item">360 <div class="thumb">[IMG: PDF Thumbnail]</div>361 <div class="item-content">362 <div class="item-title">ESIC -COVID-19 (G...es) English Booklet</div>363 <div class="item-meta">364 <span class="meta-icon">365 <svg viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 0 1 2 2v16l-4-2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/></svg>366 </span>367 <span>PDF</span>368 <span>•</span>369 <span>Yesterday</span>370 <span>•</span>371 <span>9.0 MB</span>372 </div>373 </div>374 <div class="kebab">375 <svg viewBox="0 0 6 24"><path d="M3 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>376 </div>377 </div>378 </div>379 380 <!-- Floating Action Button -->381 <div class="fab">382 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>383 </div>384 385 <!-- Gesture bar -->386 <div class="bottom-gesture"></div>387 388 <!-- Bottom Navigation -->389 <div class="bottom-nav">390 <div class="nav-item active">391 <svg viewBox="0 0 24 24" fill="#7a7a7a"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>392 <div class="label">Home</div>393 </div>394 <div class="nav-item">395 <svg viewBox="0 0 24 24" fill="#7a7a7a"><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 0v5h5"/></svg>396 <div class="label">Files</div>397 </div>398 <div class="nav-item">399 <svg viewBox="0 0 24 24" fill="#7a7a7a"><path d="M16 14a4 4 0 1 0-8 0c-3 0-6 2-6 4v2h20v-2c0-2-3-4-6-4zm-4-3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>400 <div class="label">Shared</div>401 </div>402 <div class="nav-item">403 <svg viewBox="0 0 24 24" fill="#7a7a7a"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 15.5l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>404 <div class="label">Search</div>405 </div>406 </div>407 408</div>409</body>410</html>