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>Export to PDF - UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Roboto, Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #121212;20 color: #EDEDED;21 }22 23 /* Status bar */24 .status-bar {25 height: 110px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #FFFFFF;31 font-weight: 600;32 letter-spacing: 1px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .status-icons svg {40 width: 44px;41 height: 44px;42 fill: #FFFFFF;43 opacity: 0.9;44 }45 46 /* Quick types row */47 .quick-types {48 display: flex;49 gap: 46px;50 padding: 18px 36px 22px 36px;51 align-items: center;52 }53 .qt-item {54 width: 210px;55 display: flex;56 flex-direction: column;57 align-items: center;58 gap: 20px;59 }60 .qt-circle {61 width: 120px;62 height: 120px;63 border-radius: 60px;64 display: flex;65 align-items: center;66 justify-content: center;67 color: #FFF;68 font-weight: 700;69 font-size: 42px;70 box-shadow: inset 0 0 0 3px rgba(255,255,255,0.08);71 }72 .qt-label {73 font-size: 28px;74 color: #CCCCCC;75 }76 .c-blue { background: #2F7CF7; }77 .c-green { background: #1FA463; }78 .c-orange { background: #FF7A28; }79 .c-red { background: #E53935; }80 81 /* Ad banner */82 .ad-banner {83 margin: 8px 24px 0 24px;84 background: #1C1C1C;85 border-radius: 16px;86 padding: 22px;87 display: flex;88 align-items: center;89 gap: 22px;90 }91 .ad-thumb {92 width: 160px;93 height: 110px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 color: #757575;97 display: flex;98 align-items: center;99 justify-content: center;100 font-size: 26px;101 border-radius: 8px;102 }103 .ad-content {104 flex: 1;105 }106 .ad-title {107 color: #FFFFFF;108 font-size: 30px;109 font-weight: 600;110 line-height: 1.2;111 margin-bottom: 6px;112 }113 .ad-meta {114 font-size: 22px;115 color: #B0B0B0;116 display: flex;117 align-items: center;118 gap: 12px;119 }120 .ad-chip {121 font-size: 20px;122 color: #222;123 background: #F5C74A;124 padding: 2px 8px;125 border-radius: 6px;126 font-weight: 600;127 }128 .ad-action {129 color: #3EA6FF;130 border: 1px solid #3EA6FF;131 padding: 10px 26px;132 border-radius: 10px;133 font-weight: 700;134 font-size: 26px;135 }136 137 /* Section header */138 .section-header {139 padding: 26px 28px 14px 28px;140 display: flex;141 align-items: center;142 justify-content: space-between;143 }144 .section-title {145 font-size: 32px;146 font-weight: 700;147 color: #EDEDED;148 }149 .more {150 display: flex;151 align-items: center;152 gap: 8px;153 color: #B5B5B5;154 font-size: 26px;155 }156 .more svg { width: 28px; height: 28px; fill: #B5B5B5; }157 158 /* Grid of files */159 .grid {160 padding: 0 24px;161 display: grid;162 grid-template-columns: 1fr 1fr;163 gap: 26px;164 }165 .card {166 background: #1B1B1B;167 border-radius: 24px;168 overflow: hidden;169 border: 1px solid rgba(255,255,255,0.06);170 }171 .card-top {172 padding: 28px;173 min-height: 220px;174 background: #262626;175 position: relative;176 }177 .card-pin {178 position: absolute;179 right: 18px;180 top: 18px;181 width: 46px;182 height: 46px;183 border-radius: 23px;184 background: #3A3A3A;185 display: flex;186 align-items: center;187 justify-content: center;188 }189 .card-top .preview-text {190 color: #F5F5F5;191 font-size: 40px;192 line-height: 1.2;193 max-height: 160px;194 overflow: hidden;195 }196 .card-bottom {197 display: flex;198 align-items: center;199 justify-content: space-between;200 padding: 18px 22px;201 color: #CFCFCF;202 font-size: 26px;203 }204 .file-meta {205 display: flex;206 align-items: center;207 gap: 14px;208 }209 .file-icon {210 width: 34px;211 height: 34px;212 border-radius: 8px;213 background: #2F7CF7;214 }215 .file-icon.green { background: #1FA463; }216 .file-icon.red { background: #E53935; }217 .menu-dots {218 width: 10px;219 height: 10px;220 background: #CFCFCF;221 border-radius: 5px;222 box-shadow: 0 14px 0 #CFCFCF, 0 -14px 0 #CFCFCF;223 }224 225 /* Lower sample row images */226 .thumb {227 width: 100%;228 height: 260px;229 background: #E0E0E0;230 border: 1px solid #BDBDBD;231 color: #757575;232 display: flex;233 align-items: center;234 justify-content: center;235 font-size: 26px;236 }237 238 /* Overlay dialog */239 .overlay {240 position: absolute;241 inset: 0;242 background: rgba(0,0,0,0.55);243 }244 .dialog {245 position: absolute;246 left: 50%;247 top: 52%;248 transform: translate(-50%, -50%);249 width: 920px;250 background: #2B2B2B;251 border-radius: 20px;252 box-shadow: 0 12px 40px rgba(0,0,0,0.6);253 color: #FFFFFF;254 }255 .dialog-body {256 padding: 36px;257 }258 .dialog-title {259 font-size: 44px;260 font-weight: 700;261 margin-bottom: 12px;262 }263 .dialog-sub {264 font-size: 28px;265 color: #CFCFCF;266 margin-bottom: 34px;267 }268 .progress-track {269 width: 100%;270 height: 10px;271 background: #3A3A3A;272 border-radius: 6px;273 overflow: hidden;274 }275 .progress-bar {276 width: 0%;277 height: 100%;278 background: #3EA6FF;279 }280 .progress-meta {281 display: flex;282 align-items: center;283 justify-content: space-between;284 margin-top: 14px;285 color: #CFCFCF;286 font-size: 26px;287 }288 .dialog-actions {289 display: flex;290 justify-content: flex-end;291 gap: 46px;292 padding: 22px 36px 28px 36px;293 color: #4DA3FF;294 font-weight: 700;295 font-size: 30px;296 }297 298 /* Bottom gesture bar */299 .home-indicator {300 position: absolute;301 bottom: 22px;302 left: 50%;303 transform: translateX(-50%);304 width: 360px;305 height: 10px;306 background: #FFFFFF;307 opacity: 0.85;308 border-radius: 6px;309 }310</style>311</head>312<body>313<div id="render-target">314 315 <!-- Status Bar -->316 <div class="status-bar">317 <div class="time">10:58</div>318 <div class="status-icons">319 <!-- WiFi -->320 <svg viewBox="0 0 24 24" aria-label="wifi">321 <path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20 11.2 18.5 12 18.5zM3 9.5c5.9-4.7 12.1-4.7 18 0l-1.5 1.7c-4.9-3.9-10.1-3.9-15 0L3 9.5zm3 3.6c4.1-3.2 8.9-3.2 13 0l-1.5 1.7c-3.2-2.5-6.8-2.5-10 0L6 13.1zm3 3c2.3-1.8 4.7-1.8 7 0l-1.4 1.6c-1.5-1.2-2.7-1.2-4.2 0L9 16.1z"/>322 </svg>323 <!-- Battery -->324 <svg viewBox="0 0 24 24" aria-label="battery">325 <path d="M2 8.5h16c.6 0 1 .4 1 1v5c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1v-5c0-.6.4-1 1-1zm18 2h2v3h-2v-3z"/>326 </svg>327 </div>328 </div>329 330 <!-- Quick document types -->331 <div class="quick-types">332 <div class="qt-item">333 <div class="qt-circle c-blue">D</div>334 <div class="qt-label">Document</div>335 </div>336 <div class="qt-item">337 <div class="qt-circle c-green">S</div>338 <div class="qt-label">Spreadsheet</div>339 </div>340 <div class="qt-item">341 <div class="qt-circle c-orange">P</div>342 <div class="qt-label">Presentation</div>343 </div>344 <div class="qt-item">345 <div class="qt-circle c-red">PDF</div>346 <div class="qt-label">PDF</div>347 </div>348 </div>349 350 <!-- Ad banner -->351 <div class="ad-banner">352 <div class="ad-thumb">[IMG: Ad Thumbnail]</div>353 <div class="ad-content">354 <div class="ad-title">Chamet - लाइव वीडियो चैट ओ</div>355 <div class="ad-meta">356 <span class="ad-chip">Ad</span>357 <span>Chamet Team</span>358 </div>359 </div>360 <div class="ad-action">INSTALL</div>361 </div>362 363 <!-- Last opened -->364 <div class="section-header">365 <div class="section-title">Last opened</div>366 <div class="more">3 More367 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5H7z"/></svg>368 </div>369 </div>370 371 <!-- Grid -->372 <div class="grid">373 <!-- Card 1 -->374 <div class="card">375 <div class="card-top">376 <div class="card-pin">377 <svg viewBox="0 0 24 24" width="26" height="26" fill="#BDBDBD"><path d="M9 3l6 6-2 2 4 6-6-4-2 2-6-6 6-6z"/></svg>378 </div>379 <div class="preview-text">Training will be held on July 25</div>380 </div>381 <div class="card-bottom">382 <div class="file-meta">383 <div class="file-icon"></div>384 <div>Overview</div>385 </div>386 <div class="menu-dots"></div>387 </div>388 </div>389 390 <!-- Card 2 -->391 <div class="card">392 <div class="card-top">393 <div class="card-pin">394 <svg viewBox="0 0 24 24" width="26" height="26" fill="#BDBDBD"><path d="M9 3l6 6-2 2 4 6-6-4-2 2-6-6 6-6z"/></svg>395 </div>396 <div class="preview-text">PPT on management training</div>397 </div>398 <div class="card-bottom">399 <div class="file-meta">400 <div class="file-icon green"></div>401 <div>Getting_Started</div>402 </div>403 <div class="menu-dots"></div>404 </div>405 </div>406 407 <!-- Card 3 -->408 <div class="card">409 <div class="thumb">[IMG: Document Overview Thumbnails]</div>410 <div class="card-bottom">411 <div class="file-meta">412 <div class="file-icon"></div>413 <div>OfficeSuiteFeatures</div>414 </div>415 <div class="menu-dots"></div>416 </div>417 </div>418 419 <!-- Card 4 -->420 <div class="card">421 <div class="thumb">[IMG: Budget Overview Sheet]</div>422 <div class="card-bottom">423 <div class="file-meta">424 <div class="file-icon green"></div>425 <div>Budget_Overview</div>426 </div>427 <div class="menu-dots"></div>428 </div>429 </div>430 </div>431 432 <!-- Export overlay dialog -->433 <div class="overlay">434 <div class="dialog">435 <div class="dialog-body">436 <div class="dialog-title">Export to PDF</div>437 <div class="dialog-sub">Exporting to skill training .pdf...</div>438 <div class="progress-track">439 <div class="progress-bar" style="width:0%;"></div>440 </div>441 <div class="progress-meta">442 <span>0%</span>443 <span>0/100</span>444 </div>445 </div>446 <div class="dialog-actions">447 <div>Cancel</div>448 <div>Run in background</div>449 </div>450 </div>451 </div>452 453 <!-- Bottom home indicator -->454 <div class="home-indicator"></div>455</div>456</body>457</html>