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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 background: #0B0B0B;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 box-sizing: border-box;28 }29 .status-bar .time { font-size: 44px; letter-spacing: 1px; color: #FFFFFF; }30 .status-icons { display: flex; align-items: center; gap: 26px; }31 .status-icons svg { width: 44px; height: 44px; fill: #FFFFFF; opacity: 0.95; }32 33 /* Top quick actions */34 .quick-apps {35 display: flex;36 justify-content: space-between;37 padding: 28px 36px 14px;38 }39 .quick-item {40 width: 24%;41 display: flex;42 flex-direction: column;43 align-items: center;44 gap: 18px;45 }46 .circle {47 width: 120px;48 height: 120px;49 border-radius: 60px;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #fff;54 font-weight: 700;55 }56 .circle.doc { background: #2E7DFF; }57 .circle.sheet { background: #2EBA66; }58 .circle.slide { background: #F57C00; }59 .circle.pdf { background: #D32F2F; }60 .quick-item span {61 font-size: 30px;62 color: #E0E0E0;63 }64 65 /* Ad card */66 .ad-card {67 margin: 6px 24px 22px;68 background: #1E1E1E;69 border-radius: 18px;70 border: 1px solid #2A2A2A;71 padding: 22px;72 display: flex;73 align-items: center;74 gap: 24px;75 }76 .ad-thumb {77 width: 160px;78 height: 160px;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 color: #757575;82 display: flex;83 align-items: center;84 justify-content: center;85 font-size: 26px;86 text-align: center;87 border-radius: 8px;88 }89 .ad-info {90 flex: 1;91 min-width: 0;92 }93 .ad-title {94 font-size: 36px;95 white-space: nowrap;96 overflow: hidden;97 text-overflow: ellipsis;98 margin-bottom: 6px;99 }100 .ad-meta {101 display: flex;102 align-items: center;103 gap: 14px;104 color: #B0B0B0;105 font-size: 26px;106 }107 .ad-badge {108 font-size: 22px;109 color: #9E9E9E;110 border: 1px solid #3A3A3A;111 padding: 2px 10px;112 border-radius: 6px;113 }114 .install-btn {115 padding: 18px 34px;116 background: #2F80ED;117 color: #fff;118 border: none;119 border-radius: 12px;120 font-size: 30px;121 font-weight: 700;122 }123 124 /* Section headers */125 .section-header {126 display: flex;127 align-items: center;128 justify-content: space-between;129 padding: 12px 24px 8px;130 }131 .section-title {132 font-size: 32px;133 color: #DDDDDD;134 }135 .section-action {136 font-size: 28px;137 color: #A7A7A7;138 display: flex;139 align-items: center;140 gap: 10px;141 }142 .section-action svg { width: 24px; height: 24px; fill: #A7A7A7; }143 144 /* File cards row (last opened) */145 .file-row {146 display: flex;147 gap: 24px;148 padding: 8px 24px 10px;149 box-sizing: border-box;150 }151 .file-card {152 width: 516px;153 background: #232323;154 border: 1px solid #333;155 border-radius: 22px;156 overflow: hidden;157 position: relative;158 }159 .file-title {160 min-height: 220px;161 padding: 28px;162 font-size: 46px;163 line-height: 1.15;164 color: #F3F3F3;165 }166 .pin-badge {167 position: absolute;168 right: 20px;169 top: 16px;170 width: 58px;171 height: 58px;172 border-radius: 29px;173 border: 2px solid #4A4A4A;174 display: flex;175 align-items: center;176 justify-content: center;177 background: #1C1C1C;178 }179 .file-meta {180 display: flex;181 align-items: center;182 justify-content: space-between;183 padding: 16px 22px;184 border-top: 1px solid #333;185 background: #1C1C1C;186 }187 .file-left {188 display: flex;189 align-items: center;190 gap: 14px;191 }192 .file-name {193 color: #BDBDBD;194 font-size: 28px;195 max-width: 360px;196 white-space: nowrap;197 overflow: hidden;198 text-overflow: ellipsis;199 }200 .icon-dots svg { width: 36px; height: 36px; fill: #9E9E9E; }201 202 /* Sample files grid */203 .sample-section { padding-bottom: 520px; } /* leave room for bottom sheet */204 .grid {205 display: grid;206 grid-template-columns: 1fr 1fr;207 gap: 24px;208 padding: 12px 24px;209 box-sizing: border-box;210 }211 .sample-card {212 background: #232323;213 border: 1px solid #333;214 border-radius: 22px;215 overflow: hidden;216 }217 .preview {218 height: 300px;219 background: #E0E0E0;220 border-bottom: 1px solid #BDBDBD;221 display: flex;222 align-items: center;223 justify-content: center;224 color: #757575;225 font-size: 30px;226 }227 .sample-meta {228 display: flex;229 align-items: center;230 justify-content: space-between;231 padding: 18px 22px;232 background: #1C1C1C;233 }234 .sample-name {235 color: #E6E6E6;236 font-size: 32px;237 }238 239 /* Bottom Share Sheet */240 .share-sheet {241 position: absolute;242 left: 0;243 right: 0;244 bottom: 0;245 height: 440px;246 background: #2B2B2B;247 border-top-left-radius: 22px;248 border-top-right-radius: 22px;249 box-shadow: 0 -6px 20px rgba(0,0,0,0.6);250 z-index: 9;251 border-top: 1px solid #3A3A3A;252 }253 .share-header {254 padding: 24px;255 border-bottom: 1px solid #3A3A3A;256 color: #EDEDED;257 font-size: 34px;258 }259 .share-actions {260 display: flex;261 gap: 44px;262 padding: 26px 26px 0 26px;263 }264 .action {265 width: 230px;266 display: flex;267 flex-direction: column;268 align-items: center;269 gap: 18px;270 text-align: center;271 }272 .action .blue {273 width: 120px;274 height: 120px;275 border-radius: 60px;276 background: #2F80ED;277 display: flex;278 align-items: center;279 justify-content: center;280 }281 .action-label {282 color: #E0E0E0;283 font-size: 28px;284 line-height: 1.25;285 }286 287 /* Gesture bar */288 .gesture {289 position: absolute;290 bottom: 16px;291 left: 50%;292 transform: translateX(-50%);293 width: 250px;294 height: 10px;295 background: #FFFFFF;296 border-radius: 5px;297 z-index: 20;298 opacity: 0.95;299 }300 301 /* Small utility icons */302 .mini-icon { width: 38px; height: 38px; }303</style>304</head>305<body>306<div id="render-target">307 308 <!-- Status bar -->309 <div class="status-bar">310 <div class="time">10:57</div>311 <div class="status-icons">312 <!-- Wi-Fi -->313 <svg viewBox="0 0 24 24" aria-hidden="true">314 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"></path>315 <path d="M12 18.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0-4.2c2.7 0 5.1 1.1 6.9 2.9l-1.6 1.6C16.9 17 14.6 16 12 16s-4.9 1-6.3 2.8L4 17.2C5.8 15.4 9.3 14.3 12 14.3zm0-4.4c4.2 0 8 1.6 10.8 4.4l-1.6 1.6C18.9 9.9 15.6 8.7 12 8.7S5.1 9.9 2.8 12l-1.6-1.6C3.9 7.6 7.8 5.9 12 5.9z" />316 </svg>317 <!-- Battery -->318 <svg viewBox="0 0 24 24" aria-hidden="true">319 <path d="M2 9h16c1.1 0 2 .9 2 2v2c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2v-2c0-1.1.9-2 2-2zm18 2h2v4h-2v-4z" />320 </svg>321 </div>322 </div>323 324 <!-- Top quick actions -->325 <div class="quick-apps">326 <div class="quick-item">327 <div class="circle doc">328 <svg class="mini-icon" viewBox="0 0 24 24">329 <path fill="#fff" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM14 3.5L19.5 9H14V3.5z"/>330 </svg>331 </div>332 <span>Document</span>333 </div>334 <div class="quick-item">335 <div class="circle sheet">336 <svg class="mini-icon" viewBox="0 0 24 24">337 <path fill="#fff" d="M4 4h16v16H4V4zm3 3v10h10V7H7zm2 2h6v2H9V9zm0 4h6v2H9v-2z"/>338 </svg>339 </div>340 <span>Spreadsheet</span>341 </div>342 <div class="quick-item">343 <div class="circle slide">344 <svg class="mini-icon" viewBox="0 0 24 24">345 <path fill="#fff" d="M3 5h18v12H3V5zm2 2v8h14V7H5zm3 10h8l1 2H7l1-2z"/>346 </svg>347 </div>348 <span>Presentation</span>349 </div>350 <div class="quick-item">351 <div class="circle pdf">352 <svg class="mini-icon" viewBox="0 0 24 24">353 <path fill="#fff" d="M6 2h9l5 5v13c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm8 1.5V9h5.5L14 3.5zM7 12h4v2H9v4H7v-6zm6 0h3c1.1 0 2 .9 2 2s-.9 2-2 2h-1v2h-2v-6zm2 2h1c.6 0 .6-1 0-1h-1v1z"/>354 </svg>355 </div>356 <span>PDF</span>357 </div>358 </div>359 360 <!-- Ad card -->361 <div class="ad-card">362 <div class="ad-thumb">[IMG: Ad thumbnail]</div>363 <div class="ad-info">364 <div class="ad-title">Kiss Girls—Live Video Cha</div>365 <div class="ad-meta">366 <span class="ad-badge">Ad</span>367 <span>★★★★★</span>368 <span>FREE</span>369 </div>370 </div>371 <button class="install-btn">INSTALL</button>372 </div>373 374 <!-- Last opened -->375 <div class="section-header">376 <div class="section-title">Last opened</div>377 <div class="section-action">3 More378 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>379 </div>380 </div>381 <div class="file-row">382 <div class="file-card">383 <div class="pin-badge">384 <svg viewBox="0 0 24 24" width="28" height="28" fill="#9E9E9E"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"/></svg>385 </div>386 <div class="file-title">Training will be held on July 25</div>387 <div class="file-meta">388 <div class="file-left">389 <svg viewBox="0 0 24 24" width="34" height="34" fill="#4DA3FF">390 <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM14 3.5L19.5 9H14V3.5z"/>391 </svg>392 <div class="file-name">skill training</div>393 </div>394 <div class="icon-dots">395 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>396 </div>397 </div>398 </div>399 <div class="file-card">400 <div class="pin-badge">401 <svg viewBox="0 0 24 24" width="28" height="28" fill="#9E9E9E"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"/></svg>402 </div>403 <div class="file-title">PPT on404 management405 training</div>406 <div class="file-meta">407 <div class="file-left">408 <svg viewBox="0 0 24 24" width="34" height="34" fill="#4DA3FF">409 <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM14 3.5L19.5 9H14V3.5z"/>410 </svg>411 <div class="file-name">PPT on...training</div>412 </div>413 <div class="icon-dots">414 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>415 </div>416 </div>417 </div>418 </div>419 420 <!-- Sample files -->421 <div class="section-header">422 <div class="section-title">Sample files</div>423 </div>424 <div class="sample-section">425 <div class="grid">426 <div class="sample-card">427 <div class="preview">[IMG: Document Preview]</div>428 <div class="sample-meta">429 <div class="file-left">430 <svg viewBox="0 0 24 24" width="34" height="34" fill="#4DA3FF">431 <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM14 3.5L19.5 9H14V3.5z"/>432 </svg>433 <div class="sample-name">Overview</div>434 </div>435 <div class="icon-dots">436 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>437 </div>438 </div>439 </div>440 441 <div class="sample-card">442 <div class="preview">[IMG: PDF Preview]</div>443 <div class="sample-meta">444 <div class="file-left">445 <svg viewBox="0 0 24 24" width="34" height="34" fill="#D84A4A">446 <path d="M6 2h9l5 5v13c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm8 1.5V9h5.5L14 3.5z"/>447 </svg>448 <div class="sample-name">Getting_Started</div>449 </div>450 <div class="icon-dots">451 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>452 </div>453 </div>454 </div>455 </div>456 </div>457 458 <!-- Share sheet -->459 <div class="share-sheet">460 <div class="share-header">Share</div>461 <div class="share-actions">462 <div class="action">463 <div class="blue">464 <!-- Paperclip -->465 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff">466 <path d="M16.5 6.5l-7.8 7.8a3 3 0 104.2 4.2l8.5-8.5a5 5 0 10-7.1-7.1L5.1 10.1" fill="none" stroke="#fff" stroke-width="2" />467 </svg>468 </div>469 <div class="action-label">Send as attachment</div>470 </div>471 <div class="action">472 <div class="blue">473 <!-- Share nodes -->474 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff">475 <circle cx="6" cy="12" r="2" />476 <circle cx="18" cy="6" r="2" />477 <circle cx="18" cy="18" r="2" />478 <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2" fill="none"/>479 </svg>480 </div>481 <div class="action-label">Send as PDF attachment</div>482 </div>483 <div class="action">484 <div class="blue">485 <!-- Link -->486 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff">487 <path d="M10 13a5 5 0 010-7l2-2a5 5 0 017 7l-1 1" fill="none" stroke="#fff" stroke-width="2"/>488 <path d="M14 11a5 5 0 010 7l-2 2a5 5 0 11-7-7l1-1" fill="none" stroke="#fff" stroke-width="2"/>489 </svg>490 </div>491 <div class="action-label">Share as link</div>492 </div>493 <div class="action">494 <div class="blue">495 <!-- Monitor -->496 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff">497 <rect x="3" y="4" width="18" height="12" rx="2" ry="2"/>498 <rect x="9" y="18" width="6" height="2"/>499 </svg>500 </div>501 <div class="action-label">Share and edit on PC</div>502 </div>503 </div>504 </div>505 506 <!-- Gesture bar -->507 <div class="gesture"></div>508 509</div>510</body>511</html>