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 Note Editor Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 28px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.08);17 color: #222;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 90px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 36px;31 color: #000;32 font-size: 36px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 20px;38 font-size: 28px;39 color: #555;40 }41 .status-icon { width: 42px; height: 42px; }42 43 /* Top app bar */44 .app-bar {45 position: absolute;46 top: 90px;47 left: 0;48 width: 1080px;49 height: 120px;50 display: flex;51 align-items: center;52 justify-content: space-between;53 padding: 0 32px;54 border-bottom: 1px solid #EEE;55 background: #FFF;56 }57 .done-text {58 font-size: 48px;59 color: #1E88E5;60 font-weight: 600;61 }62 .toolbar {63 display: flex;64 align-items: center;65 gap: 26px;66 }67 .tool-btn {68 width: 80px;69 height: 80px;70 border-radius: 18px;71 display: flex;72 align-items: center;73 justify-content: center;74 background: #FFF;75 border: 1px solid #E7E7E7;76 }77 .tool-btn svg { width: 44px; height: 44px; stroke: #444; fill: none; }78 .tool-label {79 font-size: 34px;80 color: #444;81 font-weight: 600;82 }83 84 /* Document area */85 .doc-area {86 position: absolute;87 left: 36px;88 right: 36px;89 top: 210px;90 bottom: 1260px; /* above keyboard & formatting bar */91 overflow: hidden;92 background: #FFFFFF;93 }94 .note-block {95 border: 2px dashed #D7D7D7;96 border-radius: 8px;97 padding: 18px 24px;98 margin: 24px 0;99 line-height: 1.55;100 font-size: 34px;101 color: #333;102 }103 .note-block.blue-title { color: #1E88E5; font-weight: 700; }104 .note-block.selected {105 border-color: #1E88E5;106 position: relative;107 }108 .handle-dot {109 position: absolute;110 left: -10px;111 bottom: -10px;112 width: 20px;113 height: 20px;114 background: #1E88E5;115 border-radius: 50%;116 }117 .list-item { margin-left: 24px; }118 .num { color: #666; margin-right: 10px; }119 120 /* Formatting bar above keyboard */121 .format-bar {122 position: absolute;123 left: 0;124 right: 0;125 bottom: 980px;126 height: 140px;127 background: #FFE9E5;128 border-top: 1px solid #F5CFC7;129 display: flex;130 align-items: center;131 padding: 0 28px;132 gap: 26px;133 }134 .fmt-btn {135 height: 88px;136 min-width: 88px;137 border-radius: 18px;138 background: #FFF2EF;139 border: 1px solid #F3C8BF;140 display: flex;141 align-items: center;142 justify-content: center;143 color: #333;144 font-size: 40px;145 font-weight: 600;146 }147 .fmt-dot {148 width: 48px; height: 48px; border-radius: 50%; background: #111;149 }150 .fmt-wide { padding: 0 22px; }151 152 /* Keyboard */153 .keyboard {154 position: absolute;155 left: 0;156 right: 0;157 bottom: 0;158 height: 980px;159 background: #FFE9E5;160 border-top: 1px solid #F5CFC7;161 padding: 28px 26px 34px 26px;162 }163 .key-row {164 display: flex;165 justify-content: center;166 gap: 18px;167 margin-bottom: 28px;168 }169 .key {170 width: 92px; height: 120px;171 background: #FFD9D2;172 border: 1px solid #F1BDB3;173 border-radius: 26px;174 display: flex; align-items: center; justify-content: center;175 font-size: 44px; color: #3A2823; font-weight: 500;176 }177 .key.wide { width: 200px; }178 .key.backspace {179 width: 140px;180 }181 .key.space { width: 540px; }182 .key.extra { width: 140px; }183 .bottom-row {184 display: flex; align-items: center; justify-content: space-between; gap: 16px;185 }186 .glyph-row {187 display: flex; align-items: center; gap: 24px;188 margin: 6px 0 24px 6px;189 }190 .glyph {191 width: 88px; height: 88px; border-radius: 20px;192 background: #FFD9D2; border: 1px solid #F1BDB3;193 display: flex; align-items: center; justify-content: center;194 font-size: 36px; color: #3A2823;195 }196 .mic { position: absolute; right: 34px; bottom: 38px; width: 92px; height: 92px; border-radius: 26px; background: #FFD9D2; border: 1px solid #F1BDB3; display: flex; align-items: center; justify-content: center; }197</style>198</head>199<body>200<div id="render-target">201 202 <!-- Status Bar -->203 <div class="status-bar">204 <div>2:21</div>205 <div class="status-right">206 <!-- cellular -->207 <svg class="status-icon" viewBox="0 0 48 48">208 <rect x="4" y="28" width="8" height="16" fill="#555"></rect>209 <rect x="16" y="22" width="8" height="22" fill="#777"></rect>210 <rect x="28" y="16" width="8" height="28" fill="#999"></rect>211 </svg>212 <!-- wifi -->213 <svg class="status-icon" viewBox="0 0 48 48">214 <path d="M4 16c10-8 30-8 40 0" stroke="#555" stroke-width="4" fill="none" />215 <path d="M10 24c7-6 21-6 28 0" stroke="#555" stroke-width="4" fill="none" />216 <path d="M18 32c4-3 8-3 12 0" stroke="#555" stroke-width="4" fill="none" />217 <circle cx="24" cy="38" r="3" fill="#555"></circle>218 </svg>219 <div>100%</div>220 <!-- battery -->221 <svg class="status-icon" viewBox="0 0 48 48">222 <rect x="4" y="12" width="36" height="24" rx="4" stroke="#555" stroke-width="3" fill="none"></rect>223 <rect x="8" y="16" width="28" height="16" fill="#555"></rect>224 <rect x="42" y="18" width="4" height="12" rx="1" fill="#555"></rect>225 </svg>226 </div>227 </div>228 229 <!-- App Bar -->230 <div class="app-bar">231 <div class="done-text">Done</div>232 <div class="toolbar">233 <div class="tool-btn">234 <!-- Undo -->235 <svg viewBox="0 0 48 48">236 <path d="M18 16 L10 24 L18 32" stroke="#444" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>237 <path d="M38 24c-6-10-18-10-26 0" stroke="#444" stroke-width="3" stroke-linecap="round" fill="none"></path>238 </svg>239 </div>240 <div class="tool-btn">241 <!-- Redo -->242 <svg viewBox="0 0 48 48">243 <path d="M30 16 L38 24 L30 32" stroke="#444" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>244 <path d="M10 24c6-10 18-10 26 0" stroke="#444" stroke-width="3" stroke-linecap="round" fill="none"></path>245 </svg>246 </div>247 <div class="tool-btn"><span class="tool-label">1</span></div>248 <div class="tool-btn">249 <!-- Expand icon -->250 <svg viewBox="0 0 48 48">251 <rect x="10" y="10" width="28" height="28" rx="4" stroke="#444" stroke-width="3"></rect>252 <path d="M16 24h16" stroke="#444" stroke-width="3"></path>253 <path d="M24 16v16" stroke="#444" stroke-width="3"></path>254 </svg>255 </div>256 <div class="tool-btn">257 <!-- Share -->258 <svg viewBox="0 0 48 48">259 <path d="M24 12v20" stroke="#444" stroke-width="3"></path>260 <path d="M18 18l6-6 6 6" stroke="#444" stroke-width="3" fill="none"></path>261 <rect x="12" y="30" width="24" height="8" rx="2" stroke="#444" stroke-width="3" fill="none"></rect>262 </svg>263 </div>264 <div class="tool-btn">265 <!-- More vertical -->266 <svg viewBox="0 0 48 48">267 <circle cx="24" cy="12" r="3" fill="#444"></circle>268 <circle cx="24" cy="24" r="3" fill="#444"></circle>269 <circle cx="24" cy="36" r="3" fill="#444"></circle>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Document Area -->276 <div class="doc-area">277 <div class="note-block blue-title">Brainstorm: Creative Stay-at-Home Activities</div>278 279 <div class="note-block">280 With many people spending more time at home due to the COVID-19 pandemic, there has been281 a need for creative stay-at-home activities to keep boredom at bay. Here are some ideas:282 </div>283 284 <div class="note-block">285 <span class="list-item"><span class="num">1.</span>Cooking/Baking Challenges: Encourage your family and friends to participate in cooking and baking challenges where they have to create a dish with certain ingredients or follow a difficult recipe.</span>286 </div>287 288 <div class="note-block">289 <span class="list-item"><span class="num">2.</span>Virtual Game Nights: Host a virtual game night with friends and family by playing virtual games such as Pictionary, Cards Against Humanity, or Trivia.</span>290 </div>291 292 <div class="note-block">293 <span class="list-item"><span class="num">3.</span>Virtual Museum Tours: Tour some of the world's most famous museums virtually using technology, including the Smithsonian's National Museum of Natural History and the British Museum.</span>294 </div>295 296 <div class="note-block">297 <span class="list-item"><span class="num">4.</span>DIY Home Projects: Try out some new DIY home projects, such as painting a room, creating a feature wall or landscaping your garden.</span>298 </div>299 300 <div class="note-block">301 <span class="list-item"><span class="num">5.</span>Online Exercise Classes: Participate in online exercise classes such as yoga or HIIT, which are great for maintaining physical and mental well-being.</span>302 </div>303 304 <div class="note-block">305 <span class="list-item"><span class="num">6.</span>Learn a New Skill: Learn a new language, take an online course in a subject you're interested in, or try out a new hobby such as painting or knitting.</span>306 </div>307 308 <div class="note-block">309 <span class="list-item"><span class="num">7.</span>Organize Virtual Gatherings: Organize virtual gatherings such as happy hours, book clubs or movie nights with friends and family.</span>310 </div>311 312 <div class="note-block selected">313 These stay-at-home activities can provide an enjoyable and creative way to pass the time, while also improving everyone's well-being.314 <div class="handle-dot"></div>315 </div>316 </div>317 318 <!-- Formatting Bar -->319 <div class="format-bar">320 <div class="fmt-btn">✓</div>321 <div class="fmt-btn">A</div>322 <div class="fmt-btn">A+</div>323 <div class="fmt-btn">A−</div>324 <div class="fmt-btn">B</div>325 <div class="fmt-btn fmt-wide"><div class="fmt-dot"></div></div>326 <!-- quick glyphs row to mimic icons -->327 <div class="glyph-row">328 <div class="glyph">😊</div>329 <div class="glyph">GIF</div>330 <div class="glyph">G</div>331 <div class="glyph">⚙️</div>332 <div class="glyph">🎨</div>333 </div>334 </div>335 336 <!-- Keyboard -->337 <div class="keyboard">338 <!-- row 1 -->339 <div class="key-row">340 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>341 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>342 </div>343 <!-- row 2 -->344 <div class="key-row" style="padding-left:36px;">345 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>346 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>347 </div>348 <!-- row 3 -->349 <div class="key-row" style="padding-left:84px;">350 <div class="key wide">⇧</div>351 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>352 <div class="key backspace">⌫</div>353 </div>354 <!-- bottom functional row -->355 <div class="bottom-row">356 <div class="key extra">?123</div>357 <div class="key extra">,</div>358 <div class="key extra">😊</div>359 <div class="key space"> </div>360 <div class="key extra">.</div>361 <div class="key extra">↵</div>362 </div>363 364 <div class="mic">🎤</div>365 </div>366 367</div>368</body>369</html>