GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Roboto, Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #1f1f1f;19 color: #ffffff;20 }21 22 /* Status bar */23 .status-bar {24 height: 92px;25 background: #101010;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 32px;30 box-sizing: border-box;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .icon {40 display: inline-flex;41 width: 42px;42 height: 42px;43 }44 45 /* Quick actions row */46 .quick-actions {47 background: #262626;48 padding: 28px 24px 22px;49 display: flex;50 justify-content: space-around;51 gap: 10px;52 border-bottom: 1px solid #2f2f2f;53 }54 .qa-item {55 width: 210px;56 text-align: center;57 color: #eaeaea;58 font-size: 28px;59 }60 .qa-circle {61 width: 126px;62 height: 126px;63 border-radius: 50%;64 margin: 0 auto 14px;65 display: grid;66 place-items: center;67 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);68 }69 .qa-doc { background: #2a79ff; }70 .qa-sheet { background: #2fa85a; }71 .qa-pres { background: #e0882a; }72 .qa-pdf { background: #c84a44; }73 74 /* Ad banner */75 .ad-banner {76 display: flex;77 align-items: center;78 gap: 22px;79 padding: 18px 24px;80 border-top: 1px solid #343434;81 border-bottom: 1px solid #343434;82 background: #2a2a2a;83 height: 148px;84 box-sizing: border-box;85 }86 .ad-thumb {87 width: 170px;88 height: 110px;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 display: flex;92 align-items: center;93 justify-content: center;94 color: #555;95 font-size: 22px;96 }97 .ad-info {98 flex: 1;99 min-width: 0;100 }101 .ad-title {102 font-size: 34px;103 white-space: nowrap;104 overflow: hidden;105 text-overflow: ellipsis;106 }107 .ad-meta {108 margin-top: 6px;109 display: flex;110 align-items: center;111 gap: 14px;112 font-size: 24px;113 color: #d8d8d8;114 }115 .ad-badge {116 background: #ffd54f;117 color: #2a2a2a;118 font-weight: 600;119 padding: 2px 8px;120 border-radius: 6px;121 font-size: 22px;122 }123 .install-btn {124 background: #2e7dff;125 border: none;126 color: #fff;127 font-size: 30px;128 padding: 18px 30px;129 border-radius: 12px;130 font-weight: 700;131 width: 170px;132 height: 70px;133 }134 135 /* Section header */136 .section-header {137 display: flex;138 align-items: center;139 justify-content: space-between;140 padding: 26px 28px 18px;141 font-size: 34px;142 color: #eeeeee;143 }144 .muted {145 color: #bdbdbd;146 font-size: 30px;147 }148 149 /* File grids */150 .file-grid {151 display: grid;152 grid-template-columns: 1fr 1fr;153 gap: 26px;154 padding: 0 24px 12px;155 box-sizing: border-box;156 }157 .tile {158 background: #2b2b2b;159 border-radius: 18px;160 box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 1px 10px rgba(0,0,0,0.35) inset;161 overflow: hidden;162 position: relative;163 }164 .thumb {165 height: 240px;166 background: #E0E0E0;167 border-bottom: 1px solid #3a3a3a;168 display: flex;169 align-items: center;170 justify-content: center;171 color: #757575;172 font-size: 28px;173 }174 .tile-footer {175 display: flex;176 align-items: center;177 justify-content: space-between;178 padding: 18px 20px;179 }180 .doc-meta {181 display: flex;182 align-items: center;183 gap: 14px;184 }185 .doc-icon {186 width: 34px;187 height: 34px;188 background: #2563eb;189 border-radius: 6px;190 }191 .doc-name {192 font-size: 28px;193 color: #dcdcdc;194 max-width: 420px;195 white-space: nowrap;196 overflow: hidden;197 text-overflow: ellipsis;198 }199 .kebab {200 width: 36px;201 height: 36px;202 position: relative;203 }204 .kebab::before, .kebab::after, .kebab span {205 content: "";206 position: absolute;207 left: 50%;208 width: 6px;209 height: 6px;210 background: #cfcfcf;211 border-radius: 50%;212 transform: translateX(-50%);213 }214 .kebab::before { top: 4px; }215 .kebab span { top: 14px; }216 .kebab::after { bottom: 4px; }217 218 .sync-badge {219 position: absolute;220 right: 14px;221 top: 14px;222 width: 44px;223 height: 44px;224 background: #3b3b3b;225 border-radius: 50%;226 display: grid;227 place-items: center;228 box-shadow: 0 0 0 2px #2b2b2b inset;229 }230 231 /* Smaller tiles for sample files */232 .thumb.small {233 height: 200px;234 }235 .tile-footer.small .doc-name {236 max-width: 360px;237 }238 239 /* Gesture bar */240 .gesture {241 position: absolute;242 left: 50%;243 bottom: 22px;244 transform: translateX(-50%);245 width: 360px;246 height: 10px;247 background: #e6e6e6;248 opacity: 0.7;249 border-radius: 8px;250 }251</style>252</head>253<body>254<div id="render-target">255 256 <!-- Status Bar -->257 <div class="status-bar">258 <div>10:55</div>259 <div class="status-right">260 <!-- WiFi -->261 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">262 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20 11.1 18.5 12 18.5zM3 9c5.9-4.7 12.1-4.7 18 0l-1.5 1.8C15.2 7.8 8.8 7.8 4.5 10.8L3 9zm3 3.3c4.1-3 10.9-3 15 0l-1.5 1.8c-3.5-2.3-8.5-2.3-12 0L6 12.3zm3 3c2.4-1.6 6.6-1.6 9 0L16.5 17c-1.7-1-3.3-1-5 0L9 15.3z"/>263 </svg>264 <!-- Battery -->265 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">266 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"/>267 <rect x="4" y="9" width="14" height="6" fill="#ffffff"/>268 <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>269 </svg>270 </div>271 </div>272 273 <!-- Quick actions row -->274 <div class="quick-actions">275 <div class="qa-item">276 <div class="qa-circle qa-doc">277 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">278 <path d="M6 3h9l3 3v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>279 <rect x="7" y="11" width="10" height="1.8" fill="#bfe0ff"/>280 <rect x="7" y="14" width="10" height="1.8" fill="#bfe0ff"/>281 </svg>282 </div>283 <div>Document</div>284 </div>285 <div class="qa-item">286 <div class="qa-circle qa-sheet">287 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">288 <rect x="3" y="4" width="18" height="16" rx="2"/>289 <path d="M3 9h18M9 4v16M15 4v16" stroke="#2fa85a" stroke-width="0"/>290 </svg>291 </div>292 <div>Spreadsheet</div>293 </div>294 <div class="qa-item">295 <div class="qa-circle qa-pres">296 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">297 <rect x="3" y="4" width="18" height="14" rx="2"/>298 <path d="M7 18l5 3 5-3" fill="#ffffff"/>299 <path d="M12 7a5 5 0 1 0 5 5h-5V7z" fill="#ffd9b3"/>300 </svg>301 </div>302 <div>Presentation</div>303 </div>304 <div class="qa-item">305 <div class="qa-circle qa-pdf">306 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">307 <path d="M6 3h9l3 3v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>308 <text x="7" y="16" font-size="7" font-weight="700" fill="#ffffff">PDF</text>309 </svg>310 </div>311 <div>PDF</div>312 </div>313 </div>314 315 <!-- Advertisement -->316 <div class="ad-banner">317 <div class="ad-thumb">[IMG: Ad Graphic]</div>318 <div class="ad-info">319 <div class="ad-title">Kiss Girls—Live Video Cha</div>320 <div class="ad-meta">321 <span class="ad-badge">Ad</span>322 <span>★★★★★</span>323 <span>FREE</span>324 </div>325 </div>326 <button class="install-btn">INSTALL</button>327 </div>328 329 <!-- Last opened -->330 <div class="section-header">331 <div>Last opened</div>332 <div class="muted">3 More ▾</div>333 </div>334 335 <div class="file-grid" style="margin-bottom: 10px;">336 <!-- Card 1 -->337 <div class="tile">338 <div class="thumb">[IMG: Document Preview]</div>339 <div class="sync-badge">340 <svg width="24" height="24" viewBox="0 0 24 24" fill="#9ad29a">341 <path d="M9 12l2 2 4-4" stroke="#9ad29a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>342 </svg>343 </div>344 <div class="tile-footer">345 <div class="doc-meta">346 <div class="doc-icon"></div>347 <div class="doc-name">skill training</div>348 </div>349 <div class="kebab"><span></span></div>350 </div>351 </div>352 <!-- Card 2 -->353 <div class="tile">354 <div class="thumb">[IMG: Document Preview]</div>355 <div class="sync-badge">356 <svg width="24" height="24" viewBox="0 0 24 24" fill="#9ad29a">357 <path d="M9 12l2 2 4-4" stroke="#9ad29a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>358 </svg>359 </div>360 <div class="tile-footer">361 <div class="doc-meta">362 <div class="doc-icon"></div>363 <div class="doc-name">PPT on...training</div>364 </div>365 <div class="kebab"><span></span></div>366 </div>367 </div>368 </div>369 370 <!-- Sample files -->371 <div class="section-header" style="padding-top: 22px;">372 <div>Sample files</div>373 <div></div>374 </div>375 376 <div class="file-grid">377 <!-- Sample 1 -->378 <div class="tile">379 <div class="thumb small">[IMG: Document Preview]</div>380 <div class="tile-footer small" style="background:#2d2d2d;">381 <div class="doc-meta">382 <div class="doc-icon"></div>383 <div class="doc-name">Overview</div>384 </div>385 <div class="kebab"><span></span></div>386 </div>387 </div>388 <!-- Sample 2 -->389 <div class="tile">390 <div class="thumb small">[IMG: Document Preview]</div>391 <div class="tile-footer small" style="background:#2d2d2d;">392 <div class="doc-meta">393 <div class="doc-icon" style="background:#d84315;"></div>394 <div class="doc-name">Getting_Started</div>395 </div>396 <div class="kebab"><span></span></div>397 </div>398 </div>399 <!-- Sample 3 -->400 <div class="tile">401 <div class="thumb small">[IMG: Document Preview]</div>402 <div class="tile-footer small" style="background:#2d2d2d;">403 <div class="doc-meta">404 <div class="doc-icon" style="background:#ef6c00;"></div>405 <div class="doc-name">OfficeSuit...eatures</div>406 </div>407 <div class="kebab"><span></span></div>408 </div>409 </div>410 <!-- Sample 4 -->411 <div class="tile">412 <div class="thumb small">[IMG: Document Preview]</div>413 <div class="tile-footer small" style="background:#2d2d2d;">414 <div class="doc-meta">415 <div class="doc-icon" style="background:#2fa85a;"></div>416 <div class="doc-name">Budget_Overview</div>417 </div>418 <div class="kebab"><span></span></div>419 </div>420 </div>421 </div>422 423 <!-- Bottom gesture bar -->424 <div class="gesture"></div>425</div>426</body>427</html>