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; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #121212; color: #FFFFFF;12 }13 14 /* Status bar */15 .statusbar {16 height: 110px; background: #1a1a1a; position: relative;17 display: flex; align-items: center; padding: 0 36px;18 }19 .status-time { font-size: 42px; letter-spacing: 1px; }20 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 26px; }21 .status-icons svg { width: 44px; height: 44px; fill: #fff; opacity: 0.9; }22 23 /* Top quick actions */24 .quick-actions { padding: 22px 28px 10px; }25 .quick-row {26 display: flex; justify-content: space-between; padding: 16px 12px 6px;27 }28 .qa-item { width: 230px; text-align: center; }29 .qa-circle {30 width: 140px; height: 140px; border-radius: 50%;31 margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;32 color: #fff; font-weight: bold; font-size: 36px;33 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);34 }35 .qa-label { font-size: 30px; color: #d8d8d8; }36 37 /* Ad card */38 .ad-card {39 margin: 6px 28px 18px; background: #1e1e1e; border-radius: 14px; padding: 18px;40 display: flex; align-items: center; gap: 18px; border: 1px solid #2b2b2b;41 }42 .img-ph {43 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;44 display: flex; align-items: center; justify-content: center; text-align: center;45 }46 .ad-thumb { width: 190px; height: 120px; border-radius: 8px; }47 .ad-text { flex: 1; }48 .ad-title { font-size: 30px; color: #f0f0f0; margin-bottom: 6px; }49 .ad-meta { font-size: 22px; color: #bdbdbd; display: flex; align-items: center; gap: 12px; }50 .ad-badge {51 background: #5e5e5e; color: #121212; font-weight: bold; padding: 3px 8px; border-radius: 6px;52 font-size: 20px; color: #fff;53 }54 .ad-btn {55 background: #2b78ff; color: #fff; border: none; border-radius: 10px;56 padding: 18px 30px; font-size: 28px; font-weight: 700; cursor: default;57 }58 59 /* Section headers */60 .section-header {61 display: flex; align-items: center; justify-content: space-between;62 padding: 10px 34px 8px; margin-top: 4px;63 }64 .section-title { font-size: 34px; color: #e7e7e7; }65 .more { font-size: 28px; color: #bdbdbd; display: flex; align-items: center; gap: 8px; }66 67 /* Cards */68 .card-row { display: flex; gap: 26px; padding: 10px 28px; }69 .doc-card {70 width: 512px; height: 360px; background: #EDEDED; color: #111;71 border-radius: 18px; position: relative; overflow: hidden;72 border: 1px solid #CFCFCF;73 }74 .doc-pin {75 position: absolute; right: 16px; top: 16px; width: 54px; height: 54px;76 border-radius: 50%; background: #D8D8D8; display: flex; align-items: center; justify-content: center;77 box-shadow: 0 0 0 2px #C7C7C7 inset;78 }79 .doc-pin svg { width: 30px; height: 30px; fill: #5f5f5f; }80 .doc-content { padding: 28px 24px 96px; font-size: 42px; line-height: 1.15; font-weight: 600; }81 .doc-footer {82 position: absolute; left: 0; right: 0; bottom: 0; height: 90px;83 background: #D5D5D5; display: flex; align-items: center; padding: 0 18px; gap: 14px;84 border-top: 1px solid #C6C6C6;85 }86 .doc-icon {87 width: 46px; height: 46px; background: #2979ff; border-radius: 6px; display: flex; align-items: center; justify-content: center;88 }89 .doc-name { color: #333; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }90 .kebab { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; }91 .kebab span { width: 6px; height: 6px; background: #555; border-radius: 50%; display: inline-block; margin: 2px; }92 93 /* Sample files */94 .sample-header { padding: 18px 34px 8px; color: #bdbdbd; font-size: 30px; }95 .sample-row { display: flex; gap: 26px; padding: 0 28px; }96 .sample-item {97 width: 500px; height: 200px; border-radius: 14px;98 }99 100 /* Bottom sheet */101 .sheet {102 position: absolute; left: 0; bottom: 0; width: 1080px; height: 980px;103 background: #2b2b2b; border-top-left-radius: 26px; border-top-right-radius: 26px;104 box-shadow: 0 -10px 30px rgba(0,0,0,0.5);105 z-index: 5; padding: 26px 34px 30px;106 }107 .sheet-handle {108 width: 130px; height: 8px; border-radius: 4px; background: #6b6b6b;109 margin: 6px auto 14px;110 }111 .sheet-title { font-size: 40px; margin: 6px 0 24px; }112 .big-option {113 display: flex; align-items: center; gap: 22px; background: #353535;114 border-radius: 14px; padding: 18px; border: 1px solid #404040; margin-bottom: 22px;115 }116 .app-circle {117 width: 110px; height: 110px; border-radius: 20px; background: #69c9d0;118 display: flex; align-items: center; justify-content: center;119 }120 .big-option .texts { display: flex; flex-direction: column; }121 .big-option .name { font-size: 34px; }122 .big-option .sub { font-size: 24px; color: #cfcfcf; }123 124 .share-grid {125 display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 24px; padding: 12px 4px;126 }127 .share-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }128 .icon-round {129 width: 140px; height: 140px; border-radius: 32px; background: #3c3c3c;130 display: flex; align-items: center; justify-content: center; border: 1px solid #4a4a4a;131 }132 .share-item span { font-size: 28px; color: #eee; }133 134 /* Gesture bar */135 .gesture {136 position: absolute; bottom: 16px; left: 50%;137 transform: translateX(-50%); width: 260px; height: 10px; border-radius: 10px; background: #e7e7e7; opacity: 0.9;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status bar -->145 <div class="statusbar">146 <div class="status-time">10:58</div>147 <div class="status-icons">148 <!-- Wi-Fi -->149 <svg viewBox="0 0 24 24" aria-hidden="true">150 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6.6-6.3a11 11 0 0 0-13.2 0l1.7 1.7a8.5 8.5 0 0 1 9.8 0l1.7-1.7zm3.3-3.3a16 16 0 0 0-19.8 0l1.7 1.7a13.5 13.5 0 0 1 16.4 0l1.7-1.7z"></path>151 </svg>152 <!-- Battery -->153 <svg viewBox="0 0 24 24" aria-hidden="true">154 <path d="M20 8h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1v-8z"></path>155 <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="#fff"></rect>156 <rect x="4.5" y="8.5" width="12.5" height="7" rx="1.5" ry="1.5" fill="#121212"></rect>157 </svg>158 </div>159 </div>160 161 <!-- Quick actions -->162 <div class="quick-actions">163 <div class="quick-row">164 <div class="qa-item">165 <div class="qa-circle" style="background:#2e6cf6;">Doc</div>166 <div class="qa-label">Document</div>167 </div>168 <div class="qa-item">169 <div class="qa-circle" style="background:#1ba962;">XL</div>170 <div class="qa-label">Spreadsheet</div>171 </div>172 <div class="qa-item">173 <div class="qa-circle" style="background:#e67a23;">PPT</div>174 <div class="qa-label">Presentation</div>175 </div>176 <div class="qa-item">177 <div class="qa-circle" style="background:#d53939;">PDF</div>178 <div class="qa-label">PDF</div>179 </div>180 </div>181 </div>182 183 <!-- Ad card -->184 <div class="ad-card">185 <div class="img-ph ad-thumb">[IMG: App Ad Thumbnail]</div>186 <div class="ad-text">187 <div class="ad-title">Chamet - लाइव वीडियो चैट ओ</div>188 <div class="ad-meta">189 <span class="ad-badge">Ad</span>190 <span>Chamet Team</span>191 </div>192 </div>193 <button class="ad-btn">INSTALL</button>194 </div>195 196 <!-- Last opened -->197 <div class="section-header">198 <div class="section-title">Last opened</div>199 <div class="more">3 More200 <svg viewBox="0 0 24 24" width="28" height="28" fill="#bdbdbd" aria-hidden="true">201 <path d="M7 10l5 5 5-5z"></path>202 </svg>203 </div>204 </div>205 206 <div class="card-row">207 <div class="doc-card">208 <div class="doc-pin">209 <svg viewBox="0 0 24 24"><path d="M9.5 16.5l-3-3 1.4-1.4 1.6 1.6 6-6 1.4 1.4z"/></svg>210 </div>211 <div class="doc-content">212 Training will be held on July 25213 </div>214 <div class="doc-footer">215 <div class="doc-icon">216 <svg viewBox="0 0 24 24" width="22" height="22" fill="#fff" aria-hidden="true">217 <path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM14 2v5h5"></path>218 </svg>219 </div>220 <div class="doc-name">skill training</div>221 <div class="kebab">222 <span></span><span></span><span></span>223 </div>224 </div>225 </div>226 227 <div class="doc-card">228 <div class="doc-pin">229 <svg viewBox="0 0 24 24"><path d="M9.5 16.5l-3-3 1.4-1.4 1.6 1.6 6-6 1.4 1.4z"/></svg>230 </div>231 <div class="doc-content">232 PPT on<br>management<br>training233 </div>234 <div class="doc-footer">235 <div class="doc-icon" style="background:#2979ff;">236 <svg viewBox="0 0 24 24" width="22" height="22" fill="#fff" aria-hidden="true">237 <path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM14 2v5h5"></path>238 </svg>239 </div>240 <div class="doc-name">PPT on...training</div>241 <div class="kebab">242 <span></span><span></span><span></span>243 </div>244 </div>245 </div>246 </div>247 248 <!-- Sample files -->249 <div class="sample-header">Sample files</div>250 <div class="sample-row">251 <div class="img-ph sample-item">[IMG: Sample document preview]</div>252 <div class="img-ph sample-item">[IMG: Sample slides preview]</div>253 </div>254 255 <!-- Bottom sheet: Send as attachment -->256 <div class="sheet">257 <div class="sheet-handle"></div>258 <div class="sheet-title">Send as attachment</div>259 260 <div class="big-option">261 <div class="app-circle">262 <!-- Envelope icon -->263 <svg viewBox="0 0 24 24" width="66" height="66" fill="#ffffff" aria-hidden="true">264 <path d="M2 6h20v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm1 0l9 6 9-6H3z"></path>265 </svg>266 </div>267 <div class="texts">268 <div class="name">Aqua Mail</div>269 <div class="sub">The FREE app for all your email needs!</div>270 </div>271 </div>272 273 <div class="share-grid">274 <div class="share-item">275 <div class="icon-round">276 <!-- Print -->277 <svg viewBox="0 0 24 24" width="80" height="80" fill="#ffffff" aria-hidden="true">278 <path d="M6 8V3h12v5H6zm12 2h1a3 3 0 0 1 3 3v5h-4v-3H6v3H2v-5a3 3 0 0 1 3-3h1v2h12v-2zM7 20h10v-4H7v4z"></path>279 </svg>280 </div>281 <span>Print</span>282 </div>283 284 <div class="share-item">285 <div class="icon-round">286 <!-- Drive triangle -->287 <svg viewBox="0 0 24 24" width="82" height="82" aria-hidden="true">288 <path d="M7 4h6l4 7-6 9H5l6-9z" fill="#78c257"></path>289 <path d="M13 4l4 7h5L18 4h-5z" fill="#f4b400"></path>290 <path d="M5 20h6l5-9H10L5 20z" fill="#2a7de1"></path>291 </svg>292 </div>293 <span>Drive</span>294 </div>295 296 <div class="share-item">297 <div class="icon-round">298 <!-- Messages bubble -->299 <svg viewBox="0 0 24 24" width="80" height="80" aria-hidden="true">300 <path d="M3 4h18v12H8l-5 4V4z" fill="#4aa3ff"></path>301 <rect x="6" y="8" width="12" height="2" fill="#ffffff"></rect>302 <rect x="6" y="11" width="8" height="2" fill="#ffffff"></rect>303 </svg>304 </div>305 <span>Messages</span>306 </div>307 308 <div class="share-item">309 <div class="icon-round">310 <!-- Bluetooth -->311 <svg viewBox="0 0 24 24" width="80" height="80" fill="#4fc3f7" aria-hidden="true">312 <path d="M12 3l6 5-4 4 4 4-6 5V14l-4 4-1.4-1.4L10.2 12 6.6 8.4 8 7l4 4V3z"></path>313 </svg>314 </div>315 <span>Bluetooth</span>316 </div>317 318 <div class="share-item">319 <div class="icon-round">320 <!-- Gmail -->321 <svg viewBox="0 0 24 24" width="80" height="80" aria-hidden="true">322 <path d="M2 6l10 7 10-7v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6z" fill="#ffffff"></path>323 <path d="M22 6L12 13 2 6l10-4 10 4z" fill="#ea4335"></path>324 </svg>325 </div>326 <span>Gmail</span>327 </div>328 329 <div class="share-item">330 <div class="icon-round">331 <!-- Nearby Share -->332 <svg viewBox="0 0 24 24" width="80" height="80" fill="#9cc1ff" aria-hidden="true">333 <path d="M4 9c4-4 12-4 16 0l-1.8 1.8C14.7 8.3 9.3 8.3 5.8 10.8L4 9zm0 6c4 4 12 4 16 0l-1.8-1.8c-3.5 2.5-8.9 2.5-12.4 0L4 15z"></path>334 </svg>335 </div>336 <span>Nearby Share</span>337 </div>338 </div>339 </div>340 341 <!-- Gesture bar -->342 <div class="gesture"></div>343</div>344</body>345</html>