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 * { box-sizing: border-box; }9 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; color: #222; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 padding: 20px 28px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #000;30 font-weight: 500;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 22px;36 font-size: 28px;37 }38 .sb-icon svg { display: block; }39 40 /* App toolbar */41 .toolbar {42 position: absolute;43 top: 96px;44 left: 0;45 width: 1080px;46 height: 120px;47 padding: 0 28px;48 display: flex;49 align-items: center;50 gap: 28px;51 background: #fff;52 border-bottom: 1px solid #eee;53 color: #333;54 }55 .toolbar .spacer { flex: 1; }56 .pill {57 min-width: 86px;58 height: 72px;59 border: 1px solid #cfcfcf;60 border-radius: 16px;61 display: flex;62 align-items: center;63 justify-content: center;64 font-weight: 600;65 color: #333;66 }67 .tb-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }68 69 /* Document area */70 .doc-area {71 position: absolute;72 top: 216px;73 left: 0;74 width: 1080px;75 height: 1420px;76 padding: 60px 70px;77 background: #fff;78 }79 .doc-sheet {80 width: 940px;81 min-height: 1000px;82 border: 2px dashed #d9d9d9;83 border-radius: 6px;84 padding: 36px 36px 60px 36px;85 margin: 40px auto;86 }87 .doc-title {88 color: #1877F2;89 font-weight: 700;90 font-size: 36px;91 margin-bottom: 18px;92 }93 .doc-p {94 font-size: 28px;95 line-height: 42px;96 color: #333;97 margin: 8px 0 22px 0;98 }99 .doc-list {100 margin: 0;101 padding-left: 36px;102 font-size: 28px;103 line-height: 42px;104 color: #333;105 }106 .doc-list li { margin: 16px 0; }107 .selection-note {108 margin-top: 26px;109 font-size: 28px;110 line-height: 42px;111 }112 .selection-bar {113 position: relative;114 margin-top: 20px;115 border: 2px solid #1A73E8;116 border-radius: 12px;117 padding: 14px 16px;118 color: #1A73E8;119 background: rgba(26,115,232,0.06);120 display: inline-block;121 }122 .selection-bar .dot {123 position: absolute;124 left: -16px;125 top: 50%;126 transform: translateY(-50%);127 width: 18px; height: 18px; background: #1A73E8; border-radius: 50%;128 }129 .selection-bar .handle {130 position: absolute;131 left: 50%;132 bottom: -40px;133 width: 26px; height: 26px; background: #1A73E8; border-radius: 50%;134 }135 136 /* Editing quick bar */137 .quick-bar {138 position: absolute;139 left: 0;140 bottom: 880px; /* sits above keyboard */141 width: 1080px;142 height: 120px;143 background: #ffffff;144 border-top: 1px solid #e9e9e9;145 border-bottom: 1px solid #f0f0f0;146 display: flex;147 align-items: center;148 gap: 26px;149 padding: 0 28px;150 }151 .quick-btn {152 height: 80px; min-width: 80px;153 border: 1px solid #e2d3cf; border-radius: 12px;154 display: flex; align-items: center; justify-content: center;155 background: #fff;156 font-weight: 600;157 color: #333;158 }159 .quick-dot {160 width: 40px; height: 40px; border-radius: 50%;161 border: 1px solid #bbb; background: #000;162 }163 164 /* Keyboard */165 .keyboard {166 position: absolute;167 left: 0;168 bottom: 60px;169 width: 1080px;170 height: 820px;171 background: #ffe6de;172 padding: 26px 24px 30px;173 }174 .key-row {175 display: flex;176 gap: 18px;177 margin-bottom: 26px;178 justify-content: center;179 }180 .key {181 width: 88px; height: 118px; border-radius: 22px;182 background: #ffffff;183 border: 1px solid #f4cfc6;184 display: flex; align-items: center; justify-content: center;185 font-size: 40px; color: #333;186 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;187 }188 .key.wide { width: 160px; }189 .key.xwide { width: 500px; }190 .key.special {191 background: #ffd9cf;192 border-color: #f1bdb3;193 }194 .key-icon svg { display: block; }195 196 /* Nav pill */197 .nav-pill {198 position: absolute;199 left: 50%;200 transform: translateX(-50%);201 bottom: 16px;202 width: 380px;203 height: 16px;204 background: #9e9e9e;205 border-radius: 10px;206 opacity: 0.65;207 }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Status Bar -->214 <div class="status-bar">215 <div class="status-left" style="font-size:44px;">2:21</div>216 <div class="status-right">217 <div class="sb-icon">218 <!-- Do Not Disturb / ring -->219 <svg width="36" height="36" viewBox="0 0 36 36">220 <circle cx="18" cy="18" r="12" stroke="#555" stroke-width="2" fill="none"></circle>221 <path d="M10 26 L26 10" stroke="#555" stroke-width="2" stroke-linecap="round"></path>222 </svg>223 </div>224 <div class="sb-icon">225 <!-- Wi-Fi -->226 <svg width="36" height="36" viewBox="0 0 36 36">227 <path d="M6 14 C12 9,24 9,30 14" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>228 <path d="M10 18 C14 15,22 15,26 18" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>229 <path d="M14 22 C16 20,20 20,22 22" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>230 <circle cx="18" cy="26" r="2.5" fill="#555"/>231 </svg>232 </div>233 <div class="sb-icon" style="display:flex; align-items:center; gap:6px;">234 <!-- Battery -->235 <svg width="48" height="28" viewBox="0 0 48 28">236 <rect x="2" y="6" width="38" height="16" rx="3" stroke="#555" stroke-width="2" fill="none"/>237 <rect x="4" y="8" width="30" height="12" fill="#555"/>238 <rect x="42" y="10" width="4" height="8" rx="1" fill="#555"/>239 </svg>240 <span>100%</span>241 </div>242 </div>243 </div>244 245 <!-- App Toolbar -->246 <div class="toolbar">247 <div class="tb-icon">248 <!-- Back Arrow -->249 <svg width="40" height="40" viewBox="0 0 40 40">250 <path d="M24 8 L12 20 L24 32" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>251 </svg>252 </div>253 <div class="spacer"></div>254 <div class="pill">1</div>255 <div class="tb-icon">256 <!-- Full screen / rectangle -->257 <svg width="40" height="40" viewBox="0 0 40 40">258 <rect x="8" y="8" width="24" height="24" rx="3" stroke="#333" stroke-width="2" fill="none"></rect>259 </svg>260 </div>261 <div class="tb-icon">262 <!-- Share -->263 <svg width="40" height="40" viewBox="0 0 40 40">264 <path d="M20 10 L28 18 L20 26" stroke="#333" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265 <path d="M12 18 H26" stroke="#333" stroke-width="2.6" fill="none" stroke-linecap="round"/>266 </svg>267 </div>268 <div class="tb-icon">269 <!-- Kebab menu -->270 <svg width="12" height="36" viewBox="0 0 12 36">271 <circle cx="6" cy="6" r="3" fill="#333"></circle>272 <circle cx="6" cy="18" r="3" fill="#333"></circle>273 <circle cx="6" cy="30" r="3" fill="#333"></circle>274 </svg>275 </div>276 </div>277 278 <!-- Document Area -->279 <div class="doc-area">280 <div class="doc-sheet">281 <div class="doc-title">Brainstorm: Creative Stay-at-Home Activities</div>282 <div class="doc-p">283 With many people spending more time at home due to the COVID‑19 pandemic, there has been284 a need for creative stay‑at‑home activities to keep boredom at bay. Here are some ideas:285 </div>286 <ol class="doc-list">287 <li><strong>Cooking/Baking Challenges:</strong> Encourage your family and friends to participate in cooking288 and baking challenges where they have to create a dish with certain ingredients or follow a difficult recipe.</li>289 <li><strong>Virtual Game Nights:</strong> Host a virtual game night with friends and family by playing virtual290 games such as Pictionary, Cards Against Humanity, or Trivia.</li>291 <li><strong>Virtual Museum Tours:</strong> Tour some of the world's most famous museums virtually using292 technology, including the Smithsonian's National Museum of Natural History and the British Museum.</li>293 <li><strong>DIY Home Projects:</strong> Try out some new DIY home projects, such as painting a room,294 creating a feature wall or landscaping your garden.</li>295 <li><strong>Online Exercise Classes:</strong> Participate in online exercise classes such as yoga or HIIT,296 which are great for maintaining physical and mental well‑being.</li>297 <li><strong>Learn a New Skill:</strong> Learn a new language, take an online course in a subject you're298 interested in, or try out a new hobby such as painting or knitting.</li>299 <li><strong>Organize Virtual Gatherings:</strong> Organize virtual gatherings such as happy hours, book clubs300 or movie nights with friends and family.</li>301 </ol>302 303 <div class="selection-note selection-bar">304 These stay‑at‑home activities can provide an enjoyable and creative way to pass the time, while305 also improving everyone's well‑being.306 <div class="dot"></div>307 <div class="handle"></div>308 </div>309 </div>310 </div>311 312 <!-- Editing Quick Bar -->313 <div class="quick-bar">314 <div class="quick-btn">315 <!-- Check icon -->316 <svg width="38" height="38" viewBox="0 0 38 38">317 <path d="M10 20 L16 26 L28 12" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>318 </svg>319 </div>320 <div class="quick-btn">321 <!-- Insert icon -->322 <svg width="38" height="38" viewBox="0 0 38 38">323 <rect x="8" y="8" width="22" height="16" rx="2" stroke="#333" stroke-width="2" fill="none"></rect>324 <path d="M19 24 V32" stroke="#333" stroke-width="2" stroke-linecap="round"/>325 <path d="M15 28 H23" stroke="#333" stroke-width="2" stroke-linecap="round"/>326 </svg>327 </div>328 <div class="quick-btn" style="font-size:34px;">A</div>329 <div class="quick-btn" style="font-size:32px;">A+</div>330 <div class="quick-btn" style="font-size:32px;">A-</div>331 <div class="quick-btn" style="font-size:34px; font-weight:700;">B</div>332 <div class="quick-dot"></div>333 </div>334 335 <!-- Keyboard -->336 <div class="keyboard">337 <div class="key-row">338 <div class="key">q</div><div class="key">w</div><div class="key">e</div>339 <div class="key">r</div><div class="key">t</div><div class="key">y</div>340 <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>341 </div>342 <div class="key-row">343 <div class="key">a</div><div class="key">s</div><div class="key">d</div>344 <div class="key">f</div><div class="key">g</div><div class="key">h</div>345 <div class="key">j</div><div class="key">k</div><div class="key">l</div>346 <div class="key special key-icon">347 <!-- Backspace -->348 <svg width="52" height="36" viewBox="0 0 52 36">349 <path d="M10 18 L22 8 H44 V28 H22 Z" fill="#fff" stroke="#b48d85" stroke-width="2"/>350 <path d="M28 12 L36 20 M28 20 L36 12" stroke="#b48d85" stroke-width="2" stroke-linecap="round"/>351 </svg>352 </div>353 </div>354 <div class="key-row">355 <div class="key special key-icon" style="width:140px;">356 <!-- Shift -->357 <svg width="42" height="42" viewBox="0 0 42 42">358 <path d="M21 10 L32 22 H26 V30 H16 V22 H10 Z" fill="none" stroke="#b48d85" stroke-width="2"/>359 </svg>360 </div>361 <div class="key">z</div><div class="key">x</div><div class="key">c</div>362 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>363 <div class="key special key-icon" style="width:140px;">364 <!-- Delete -->365 <svg width="42" height="42" viewBox="0 0 42 42">366 <path d="M14 12 H32 V30 H14 Z" fill="none" stroke="#b48d85" stroke-width="2"/>367 <path d="M18 16 L28 26 M18 26 L28 16" stroke="#b48d85" stroke-width="2" stroke-linecap="round"/>368 </svg>369 </div>370 </div>371 <div class="key-row" style="gap:16px;">372 <div class="key special wide">?123</div>373 <div class="key wide">,</div>374 <div class="key wide key-icon">375 <!-- Emoji -->376 <svg width="40" height="40" viewBox="0 0 40 40">377 <circle cx="20" cy="20" r="14" fill="none" stroke="#b48d85" stroke-width="2"/>378 <circle cx="14" cy="16" r="2.2" fill="#b48d85"/>379 <circle cx="26" cy="16" r="2.2" fill="#b48d85"/>380 <path d="M14 24 C18 28,22 28,26 24" stroke="#b48d85" stroke-width="2" fill="none" stroke-linecap="round"/>381 </svg>382 </div>383 <div class="key wide key-icon">384 <!-- Mic -->385 <svg width="40" height="40" viewBox="0 0 40 40">386 <rect x="16" y="12" width="8" height="12" rx="4" fill="none" stroke="#b48d85" stroke-width="2"/>387 <path d="M12 20 C12 26,28 26,28 20" stroke="#b48d85" stroke-width="2" fill="none"/>388 <path d="M20 26 V30 M16 30 H24" stroke="#b48d85" stroke-width="2" fill="none" stroke-linecap="round"/>389 </svg>390 </div>391 <div class="key xwide">space</div>392 <div class="key wide">.</div>393 <div class="key special wide key-icon">394 <!-- Enter -->395 <svg width="44" height="44" viewBox="0 0 44 44">396 <path d="M10 16 H26 V22 H34 L26 30 V24 H10 Z" fill="none" stroke="#b48d85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>397 </svg>398 </div>399 </div>400 </div>401 402 <!-- Navigation Pill -->403 <div class="nav-pill"></div>404 405</div>406</body>407</html>