GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile Editor Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 box-shadow: none;16 }17 18 /* Top app bar + status */19 .appbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 190px;25 background: #00BCD4;26 color: #fff;27 }28 .statusbar {29 height: 90px;30 padding: 0 28px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 font-weight: 600;35 letter-spacing: 0.5px;36 }37 .status-left { font-size: 40px; }38 .status-right {39 display: flex;40 align-items: center;41 gap: 26px;42 }43 .status-icon {44 width: 38px; height: 38px;45 }46 .status-icon svg { width: 100%; height: 100%; fill: #ffffff; }47 48 /* Content area */49 .content {50 position: absolute;51 top: 190px;52 left: 0;53 width: 100%;54 height: calc(2400px - 190px);55 background: #ffffff;56 }57 58 /* Title row */59 .title-row {60 display: flex;61 align-items: center;62 padding: 30px 40px 20px 40px;63 gap: 24px;64 }65 .back-btn {66 width: 60px; height: 60px; border-radius: 50%;67 display: flex; align-items: center; justify-content: center;68 background: transparent;69 }70 .back-btn svg { width: 42px; height: 42px; fill: #555; }71 .title-input {72 flex: 1;73 height: 110px;74 border-radius: 12px;75 background: #F2F2F2;76 display: flex; align-items: center;77 padding: 0 28px;78 font-size: 46px;79 color: #888;80 }81 .title-tools {82 display: flex;83 align-items: center;84 gap: 26px;85 }86 .round-icon {87 width: 74px; height: 74px; border-radius: 50%;88 background: #FFFFFF;89 border: 2px solid #E0E0E0;90 display: flex; align-items: center; justify-content: center;91 }92 .round-icon svg { width: 40px; height: 40px; fill: #6F6F6F; }93 94 /* Formatting toolbars */95 .toolbar {96 padding: 10px 40px 0 40px;97 }98 .tool-row {99 display: flex;100 gap: 26px;101 align-items: center;102 margin-bottom: 24px;103 flex-wrap: wrap;104 }105 .tool {106 height: 98px;107 padding: 0 26px;108 border-radius: 10px;109 background: #EFEFEF;110 color: #4a4a4a;111 display: flex; align-items: center; justify-content: center;112 font-weight: 700;113 font-size: 42px;114 border: 1px solid #DEDEDE;115 }116 .tool.small { height: 88px; font-size: 38px; }117 .tool.group {118 display: flex; gap: 24px; padding: 0 20px;119 }120 .tool.square {121 width: 120px; padding: 0; font-weight: 600; font-size: 40px;122 }123 124 .done-btn {125 margin-left: auto;126 height: 98px;127 padding: 0 36px;128 background: #00BCD4;129 color: #fff;130 border-radius: 10px;131 font-size: 44px;132 display: flex; align-items: center; justify-content: center;133 font-weight: 800;134 box-shadow: 0 2px 0 rgba(0,0,0,0.1);135 }136 137 /* Editor body */138 .editor {139 margin: 10px 40px 0 40px;140 height: 930px;141 border: 1px dashed transparent; /* for alignment only */142 background: #ffffff;143 position: relative;144 }145 .caret {146 position: absolute;147 top: 34px; left: 0;148 width: 3px; height: 64px; background: #222;149 }150 151 /* Keyboard */152 .keyboard {153 position: absolute;154 bottom: 0;155 left: 0;156 width: 1080px;157 height: 830px;158 background: #171717;159 border-top-left-radius: 24px;160 border-top-right-radius: 24px;161 color: #eee;162 }163 .kbd-top {164 height: 100px;165 padding: 0 38px;166 display: flex;167 align-items: center;168 gap: 46px;169 }170 .kbd-top .toolchip {171 width: 78px; height: 78px; background: #232323; border-radius: 22px;172 display: flex; align-items: center; justify-content: center;173 border: 1px solid #2d2d2d;174 }175 .kbd-top svg { width: 44px; height: 44px; fill: #EDEDED; }176 .kbd-rows {177 padding: 6px 26px 20px 26px;178 }179 .row {180 display: flex; justify-content: center; gap: 18px; margin-bottom: 24px;181 }182 .key {183 width: 86px; height: 120px; border-radius: 22px;184 background: #262626;185 display: flex; align-items: center; justify-content: center;186 font-size: 46px; color: #F1F1F1;187 border: 1px solid #2E2E2E;188 }189 .key.wide { width: 168px; }190 .key.space { width: 540px; }191 .key.tiny { width: 86px; height: 90px; border-radius: 16px; font-size: 38px; }192 .bottom-row { display: flex; justify-content: space-between; align-items: center; padding: 0 26px; }193 .enter {194 width: 120px; height: 120px; border-radius: 40px;195 background: #E8D3F1; color: #2b2b2b; font-weight: 700;196 display: flex; align-items: center; justify-content: center;197 border: none;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- App bar -->205 <div class="appbar">206 <div class="statusbar">207 <div class="status-left">10:57</div>208 <div class="status-right">209 <!-- simple status icons -->210 <div class="status-icon">211 <svg viewBox="0 0 24 24">212 <path d="M3 8l9-6 9 6v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8zm2 1v7h14V9l-7-4-7 4z"/>213 </svg>214 </div>215 <div class="status-icon">216 <svg viewBox="0 0 24 24"><path d="M12 3L1 14h5v7h10v-7h5L12 3z"/></svg>217 </div>218 <div class="status-icon">219 <svg viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18" stroke="#fff" stroke-width="2" fill="none"/></svg>220 </div>221 <div class="status-icon">222 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="#fff"/><rect x="21" y="10" width="2" height="4" fill="#fff"/></svg>223 </div>224 </div>225 </div>226 </div>227 228 <div class="content">229 <!-- Title row -->230 <div class="title-row">231 <button class="back-btn" aria-label="Back">232 <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" /></svg>233 </button>234 <div class="title-input">Title</div>235 <div class="title-tools">236 <div class="round-icon" title="Dropdown">237 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" /></svg>238 </div>239 <div class="round-icon" title="Delete">240 <svg viewBox="0 0 24 24"><path d="M5 7h14M9 7v12m6-12v12M10 4h4l1 3H9l1-3z" stroke="#6F6F6F" stroke-width="2" fill="none"/></svg>241 </div>242 <div class="round-icon" title="Help">243 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 15h.01M12 7a3 3 0 00-3 3h2a1 1 0 112 0c0 1-1 1.5-1.6 2A2.5 2.5 0 0011 14h2c0-1 .7-1.5 1.3-2 .8-.7 1.7-1.5 1.7-3a4 4 0 00-4-4z" fill="#6F6F6F"/></svg>244 </div>245 </div>246 </div>247 248 <!-- Formatting toolbars -->249 <div class="toolbar">250 <!-- Row 1 -->251 <div class="tool-row">252 <div class="tool square">OCR</div>253 <div class="tool group">254 <div class="tool small">B</div>255 <div class="tool small" style="font-style: italic;">I</div>256 <div class="tool small" style="font-family: monospace;">T</div>257 <div class="tool small" style="text-decoration: underline;">U</div>258 </div>259 <div class="tool square" style="color:#00BCD4;">A</div>260 <div class="tool square">Tt</div>261 </div>262 263 <!-- Row 2 -->264 <div class="tool-row">265 <div class="tool square">266 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M4 12h10M4 6h14M4 18h14" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>267 </div>268 <div class="tool square">269 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M20 12H10M20 6H6M20 18H6" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>270 </div>271 <div class="tool square">x²</div>272 <div class="tool square">X₂</div>273 <div class="tool square">274 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 8l-4 4 4 4M20 12H9" fill="none" stroke="#4a4a4a" stroke-width="2"/></svg>275 </div>276 <div class="tool square">277 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 8l4 4-4 4M4 12h11" fill="none" stroke="#4a4a4a" stroke-width="2"/></svg>278 </div>279 </div>280 281 <!-- Row 3 -->282 <div class="tool-row">283 <div class="tool square">284 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M4 6h16M4 12h10M4 18h6" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>285 </div>286 <div class="tool square">287 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 6h8M8 12h12M4 18h16" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>288 </div>289 <div class="tool square">290 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M4 6h16M4 12h16M4 18h16" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>291 </div>292 <div class="tool square">293 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M9 6h11M4 12h16M6 18h14" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>294 </div>295 <div class="tool group" style="gap:18px;">296 <div class="tool square">297 <svg viewBox="0 0 24 24" width="44" height="44"><circle cx="6" cy="6" r="2"/><circle cx="6" cy="12" r="2"/><circle cx="6" cy="18" r="2"/><path d="M11 6h9M11 12h9M11 18h9" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>298 </div>299 <div class="tool square">300 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M5 6h3M5 12h3M5 18h3M10 6h9M10 12h9M10 18h9" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>301 </div>302 <div class="tool square">303 <svg viewBox="0 0 24 24" width="44" height="44"><rect x="4" y="5" width="4" height="4" rx="1"/><path d="M10 7h10M4 11h4M10 13h10M4 17h4M10 19h10" stroke="#4a4a4a" stroke-width="2" fill="none"/></svg>304 </div>305 </div>306 <div class="done-btn">DONE</div>307 </div>308 </div>309 310 <!-- Editor area -->311 <div class="editor">312 <div class="caret"></div>313 </div>314 315 <!-- Keyboard -->316 <div class="keyboard">317 <div class="kbd-top">318 <div class="toolchip">319 <svg viewBox="0 0 24 24"><path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/></svg>320 </div>321 <div class="toolchip">322 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M7 12a5 5 0 1010 0 5 5 0 10-10 0z" fill="none" stroke="#EDEDED" stroke-width="2"/></svg>323 </div>324 <div class="toolchip"><span style="font-weight:700;">GIF</span></div>325 <div class="toolchip">326 <svg viewBox="0 0 24 24"><path d="M12 15a3 3 0 100-6 3 3 0 000 6zM4 12h2m12 0h2M7 19l1-2m8 2l-1-2M7 5l1 2m8-2l-1 2" stroke="#EDEDED" stroke-width="2" fill="none"/></svg>327 </div>328 <div class="toolchip">329 <svg viewBox="0 0 24 24"><path d="M4 6h10l6 6-6 6H4V6zm7 5v2h2v-2h-2z" fill="#EDEDED"/></svg>330 </div>331 <div class="toolchip">332 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#EDEDED"/></svg>333 </div>334 <div class="toolchip">335 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 00-3 3v6a3 3 0 006 0V6a3 3 0 00-3-3zm-5 15a5 5 0 0010 0" stroke="#EDEDED" stroke-width="2" fill="none"/></svg>336 </div>337 </div>338 339 <div class="kbd-rows">340 <!-- Row 1 -->341 <div class="row">342 <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>343 <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>344 </div>345 <!-- Row 2 -->346 <div class="row" style="padding-left:40px; padding-right:40px;">347 <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>348 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>349 </div>350 <!-- Row 3 -->351 <div class="row" style="padding-left:80px; padding-right:80px;">352 <div class="key tiny">⇧</div>353 <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>354 <div class="key tiny">355 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M6 6l12 12M6 18L18 6" stroke="#F1F1F1" stroke-width="2" fill="none"/></svg>356 </div>357 </div>358 <!-- Bottom controls -->359 <div class="bottom-row">360 <div class="key tiny">?123</div>361 <div class="key tiny">,</div>362 <div class="key space"></div>363 <div class="key tiny">.</div>364 <div class="enter">↩</div>365 </div>366 </div>367 </div>368 </div>369 370</div>371</body>372</html>