GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Document Edit UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #F5F5F7;12 font-family: Arial, Helvetica, sans-serif;13 color: #1f1f1f;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 120px;20 background: #80858B;21 color: #fff;22 }23 .status-time {24 position: absolute; left: 32px; top: 38px;25 font-size: 48px; font-weight: 600; letter-spacing: 1px;26 }27 .status-icons {28 position: absolute; right: 28px; top: 28px;29 display: flex; align-items: center; gap: 30px; color: #fff;30 font-size: 32px;31 }32 .status-icons .battery {33 display: flex; align-items: center; gap: 10px; font-weight: 600;34 }35 .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3.5; }36 37 /* Top editor bar */38 .editor-bar {39 position: absolute; top: 120px; left: 0; right: 0;40 height: 140px;41 background: #FFFFFF;42 display: flex; align-items: center;43 padding: 0 30px;44 box-shadow: 0 1px 0 rgba(0,0,0,0.08);45 }46 .editor-done {47 color: #1A73E8;48 font-size: 48px; font-weight: 700;49 margin-right: 30px;50 }51 .editor-tools {52 display: flex; align-items: center; gap: 38px; color: #666;53 margin-left: 40px;54 }55 .tool {56 width: 72px; height: 72px; border-radius: 12px;57 display: flex; align-items: center; justify-content: center;58 }59 .tool svg { width: 58px; height: 58px; stroke: #5f6368; stroke-width: 3.2; fill: none; }60 .tool .filled { fill: #5f6368; stroke: none; }61 62 /* Document area */63 .doc-area {64 position: absolute; top: 280px; left: 30px; right: 30px;65 bottom: 820px;66 overflow: hidden;67 background: #FFFFFF;68 border-radius: 10px;69 box-shadow: inset 0 0 0 1px #E0E0E0;70 }71 .doc-content {72 padding: 60px 70px 140px;73 line-height: 1.6;74 color: #2c2c2c;75 font-size: 36px;76 }77 .doc-content h1 {78 font-size: 44px; color: #1967D2; margin: 0 0 20px 0;79 }80 .selected-block {81 border: 2px dashed #9E9E9E;82 padding: 26px; margin: 30px 0;83 }84 .bullet {85 margin-left: 30px;86 }87 .doc-footer-select {88 border: 2px solid #4A90E2;89 border-radius: 8px;90 padding: 22px; margin-top: 30px;91 }92 .blue-dot {93 width: 16px; height: 16px; background: #1A73E8; border-radius: 50%;94 display: inline-block; margin-right: 10px;95 }96 97 /* Modal */98 .modal-backdrop {99 position: absolute; left: 0; top: 0; width: 100%; height: 100%;100 background: rgba(0,0,0,0.08);101 }102 .modal {103 position: absolute; left: 50%; top: 900px;104 transform: translateX(-50%);105 width: 820px; background: #fff;106 border-radius: 18px;107 box-shadow: 0 18px 50px rgba(0,0,0,0.16);108 padding: 48px 40px;109 text-align: center;110 }111 .modal-title {112 font-size: 44px; font-weight: 600; margin-bottom: 40px;113 }114 .modal-actions {115 display: flex; justify-content: center; gap: 24px;116 }117 .btn {118 min-width: 260px;119 padding: 26px 20px;120 border-radius: 12px;121 font-size: 40px; font-weight: 600;122 border: 1px solid #CFCFCF;123 color: #3c4043;124 background: #fff;125 }126 .btn-primary {127 background: #1A73E8;128 color: #fff; border-color: #1A73E8;129 }130 131 /* Format toolbar above keyboard */132 .format-bar {133 position: absolute;134 left: 0; right: 0; bottom: 820px;135 height: 120px; background: #ffffff;136 display: flex; align-items: center; gap: 26px;137 padding: 0 26px;138 border-top: 1px solid #E6E6E6;139 }140 .format-item {141 height: 84px; min-width: 84px; border-radius: 12px;142 display: flex; align-items: center; justify-content: center;143 color: #444; border: 1px solid #E6E6E6;144 font-size: 44px; font-weight: 700;145 }146 .format-item.red {147 color: #d93025; border-color: #f2b8b3;148 }149 .format-item.circle {150 width: 84px; height: 84px; border-radius: 50%;151 background: #000; border: none;152 }153 154 /* Keyboard */155 .keyboard {156 position: absolute; left: 0; right: 0; bottom: 100px;157 height: 700px; background: #FFE6DE;158 box-shadow: 0 -2px 0 rgba(0,0,0,0.08);159 padding: 22px 20px;160 }161 .key-row { display: flex; gap: 14px; margin-bottom: 18px; }162 .key {163 flex: 1; height: 90px; background: #FFDAD1;164 border-radius: 22px; display: flex; align-items: center; justify-content: center;165 font-size: 42px; font-weight: 600; color: #333;166 box-shadow: inset 0 0 0 1px #F4C2B7;167 }168 .key.small { height: 78px; font-size: 34px; }169 .key.wide { flex: 3; }170 .key.special { background: #FFC9BD; }171 .key.dark-outline {172 border: 2px solid #B46F62; color: #4a312c;173 }174 175 /* Gesture pill */176 .gesture-pill {177 position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);178 width: 260px; height: 16px; background: #BDBDBD; border-radius: 10px;179 }180 181 /* Simple icon helpers */182 .kebab svg { width: 10px; height: 44px; }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status bar -->189 <div class="status-bar">190 <div class="status-time">2:22</div>191 <div class="status-icons">192 <!-- small circle icon -->193 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="6" y1="12" x2="18" y2="12"></line></svg>194 <svg viewBox="0 0 24 24"><path d="M3 12h10l4 4v-8l-4 4H3z"></path></svg>195 <div class="battery">196 100%197 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"></rect><rect x="20" y="10" width="2" height="4"></rect><rect x="4" y="8" width="14" height="8" class="filled"></rect></svg>198 </div>199 </div>200 </div>201 202 <!-- Editor top bar -->203 <div class="editor-bar">204 <div class="editor-done">Done</div>205 <div class="editor-tools">206 <!-- Undo -->207 <div class="tool" title="Undo">208 <svg viewBox="0 0 24 24"><path d="M9 6L4 11l5 5"></path><path d="M4 11h8a6 6 0 1 1 0 12"></path></svg>209 </div>210 <!-- Polygon/shape -->211 <div class="tool" title="Shape">212 <svg viewBox="0 0 24 24"><polygon points="12,3 20,8 16,21 8,21 4,8"></polygon></svg>213 </div>214 <!-- Page count "1" -->215 <div class="tool" title="Page">216 <svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"></rect><text x="12" y="16" text-anchor="middle" font-size="12" fill="#5f6368" font-family="Arial" stroke="none">1</text></svg>217 </div>218 <!-- Fullscreen/crop -->219 <div class="tool" title="Crop">220 <svg viewBox="0 0 24 24"><path d="M7 4v13h13"></path><path d="M4 7h13V20"></path></svg>221 </div>222 <!-- Save -->223 <div class="tool" title="Save">224 <svg viewBox="0 0 24 24"><path d="M4 4h12l4 4v12H4z"></path><rect x="7" y="6" width="6" height="4"></rect><rect x="7" y="12" width="10" height="7"></rect></svg>225 </div>226 <!-- Share -->227 <div class="tool" title="Share">228 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="18" cy="18" r="3"></circle><path d="M8.8 10.7l6.4-3.4"></path><path d="M8.8 13.3l6.4 3.4"></path></svg>229 </div>230 <!-- More (vertical kebab) -->231 <div class="tool kebab" title="More">232 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2" fill="#5f6368"></circle><circle cx="3" cy="12" r="2" fill="#5f6368"></circle><circle cx="3" cy="20" r="2" fill="#5f6368"></circle></svg>233 </div>234 </div>235 </div>236 237 <!-- Document area -->238 <div class="doc-area">239 <div class="doc-content">240 <div class="selected-block">241 <h1>Brainstorm: Creative Stay-at-Home Activities</h1>242 <p>With many people spending more time at home due to the COVID-19 pandemic, there has been a need for creative stay-at-home activities to keep boredom at bay. Here are some ideas:</p>243 <div class="bullet">244 1. 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 specific theme.245 </div>246 <div class="bullet">247 2. Online Exercise Classes: Participate in online exercise classes such as yoga or HIIT, which are great for maintaining physical and mental well-being.248 </div>249 <div class="bullet">250 3. 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.251 </div>252 <div class="bullet">253 4. Organize Virtual Gatherings: Organize virtual gatherings such as happy hours, book clubs or movie nights with friends and family.254 </div>255 </div>256 257 <div class="doc-footer-select">258 <span class="blue-dot"></span>259 These stay-at-home activities can provide an enjoyable and creative way to pass the time, while also improving everyone's well-being.260 </div>261 </div>262 </div>263 264 <!-- Modal -->265 <div class="modal-backdrop"></div>266 <div class="modal">267 <div class="modal-title">Do you want to keep the current changes?</div>268 <div class="modal-actions">269 <button class="btn">Leave</button>270 <button class="btn btn-primary">Keep</button>271 </div>272 </div>273 274 <!-- Format toolbar -->275 <div class="format-bar">276 <div class="format-item">✓</div>277 <div class="format-item red">🗨️</div>278 <div class="format-item">A</div>279 <div class="format-item">A+</div>280 <div class="format-item">A−</div>281 <div class="format-item">B</div>282 <div class="format-item circle"></div>283 </div>284 285 <!-- Keyboard -->286 <div class="keyboard">287 <!-- numbers -->288 <div class="key-row">289 <div class="key small">1</div>290 <div class="key small">2</div>291 <div class="key small">3</div>292 <div class="key small">4</div>293 <div class="key small">5</div>294 <div class="key small">6</div>295 <div class="key small">7</div>296 <div class="key small">8</div>297 <div class="key small">9</div>298 <div class="key small">0</div>299 </div>300 <!-- qwerty -->301 <div class="key-row">302 <div class="key">q</div>303 <div class="key">w</div>304 <div class="key">e</div>305 <div class="key">r</div>306 <div class="key">t</div>307 <div class="key">y</div>308 <div class="key">u</div>309 <div class="key">i</div>310 <div class="key">o</div>311 <div class="key">p</div>312 </div>313 <!-- asd -->314 <div class="key-row">315 <div class="key">a</div>316 <div class="key">s</div>317 <div class="key">d</div>318 <div class="key">f</div>319 <div class="key">g</div>320 <div class="key">h</div>321 <div class="key">j</div>322 <div class="key">k</div>323 <div class="key">l</div>324 </div>325 <!-- zxc row -->326 <div class="key-row">327 <div class="key special">⇧</div>328 <div class="key">z</div>329 <div class="key">x</div>330 <div class="key">c</div>331 <div class="key">v</div>332 <div class="key">b</div>333 <div class="key">n</div>334 <div class="key">m</div>335 <div class="key dark-outline">⌫</div>336 </div>337 <!-- bottom row -->338 <div class="key-row">339 <div class="key special">?123</div>340 <div class="key">,</div>341 <div class="key wide" style="font-weight:400;">space</div>342 <div class="key">.</div>343 <div class="key special">↵</div>344 </div>345 </div>346 347 <!-- Gesture pill -->348 <div class="gesture-pill"></div>349 350</div>351</body>352</html>