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 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 }16 17 /* Top app bar */18 .appbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 170px;24 background: #69C7D3; /* teal-like */25 }26 .status {27 position: absolute;28 top: 18px;29 left: 30px;30 right: 30px;31 height: 40px;32 color: #ffffff;33 font-size: 34px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 letter-spacing: 1px;38 }39 .status .icons {40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .circle-dot {45 width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.9);46 display: inline-block;47 }48 .back-wrap {49 position: absolute;50 top: 94px;51 left: 26px;52 width: 60px; height: 60px;53 display: flex; align-items: center; justify-content: center;54 }55 .title-field {56 position: absolute;57 top: 86px;58 left: 110px;59 width: 720px;60 height: 88px;61 background: #f7f7f7;62 border-radius: 10px;63 border: 1px solid #e2e2e2;64 display: flex;65 align-items: center;66 padding: 0 24px;67 color: #9e9e9e;68 font-size: 38px;69 }70 .top-actions {71 position: absolute;72 top: 92px;73 right: 34px;74 display: flex;75 gap: 26px;76 }77 .icon-btn {78 width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.9);79 display: flex; align-items: center; justify-content: center;80 border: 1px solid rgba(0,0,0,0.08);81 }82 /* Formatting toolbar block */83 .tools {84 position: absolute;85 top: 200px;86 left: 60px;87 right: 60px;88 }89 .tool-row {90 display: flex;91 gap: 26px;92 margin: 26px 0;93 align-items: center;94 }95 .tool {96 width: 140px; height: 90px;97 background: #ffffff;98 border: 1px solid #e5e5e5;99 border-radius: 8px;100 display: flex; align-items: center; justify-content: center;101 color: #3a3a3a;102 font-size: 36px;103 }104 .tool.small { width: 120px; }105 .done-btn {106 margin-left: auto;107 width: 210px; height: 90px;108 background: #37B0C3;109 color: #ffffff; border-radius: 10px;110 font-weight: bold; font-size: 38px;111 display: flex; align-items: center; justify-content: center;112 border: 1px solid rgba(0,0,0,0.06);113 }114 115 /* Editor area */116 .editor {117 position: absolute;118 top: 520px;119 left: 30px;120 right: 30px;121 bottom: 880px; /* space reserved for keyboard */122 background: #ffffff;123 padding: 10px 10px 0 10px;124 }125 .line {126 font-size: 56px;127 color: #222;128 margin: 24px 0;129 }130 131 /* Keyboard mock */132 .kb {133 position: absolute;134 left: 0;135 right: 0;136 bottom: 0;137 height: 880px;138 background: #1F1F21;139 border-top: 1px solid #2c2c2e;140 }141 .kb .suggest {142 height: 110px;143 background: #2A2A2D;144 color: #eaeaea;145 display: flex;146 align-items: center;147 gap: 30px;148 padding: 0 40px;149 font-size: 40px;150 }151 .chip {152 color: #ddd;153 opacity: 0.95;154 }155 .keys {156 padding: 36px 22px 20px;157 }158 .row {159 display: flex; gap: 18px; margin-bottom: 22px; justify-content: center;160 }161 .key {162 width: 88px; height: 118px; border-radius: 16px; background: #2C2C30;163 display: flex; align-items: center; justify-content: center;164 color: #f6f6f6; font-size: 46px;165 }166 .key.wide { width: 140px; }167 .key.xwide { width: 440px; }168 .key.round { border-radius: 28px; }169 .space-row { justify-content: space-between; padding: 0 30px; }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- App bar -->176 <div class="appbar">177 <div class="status">178 <div>11:04</div>179 <div class="icons">180 <span class="circle-dot"></span>181 <span class="circle-dot"></span>182 <span class="circle-dot"></span>183 </div>184 </div>185 186 <div class="back-wrap">187 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">188 <path d="M15.5 19.1L8.4 12l7.1-7.1-1.4-1.4L5.6 12l8.5 8.5 1.4-1.4z"/>189 </svg>190 </div>191 192 <div class="title-field">Title</div>193 194 <div class="top-actions">195 <div class="icon-btn">196 <svg width="28" height="28" viewBox="0 0 24 24" fill="#4a4a4a">197 <path d="M7 10l5 5 5-5z"/>198 </svg>199 </div>200 <div class="icon-btn">201 <svg width="26" height="26" viewBox="0 0 24 24" fill="#4a4a4a">202 <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>203 </svg>204 </div>205 <div class="icon-btn">206 <svg width="28" height="28" viewBox="0 0 24 24" fill="#4a4a4a">207 <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm1.1-6.9l-.9.9c-.7.7-1.2 1.3-1.2 2.5h-2v-.5c0-1.1.5-2.1 1.3-2.9l1.2-1.2c.3-.3.5-.7.5-1.1 0-.9-.7-1.6-1.6-1.6-1 0-1.7.8-1.7 1.8H7c0-2.1 1.7-3.8 3.8-3.8S14.6 5 14.6 7c0 .9-.4 1.7-1.1 2.1z"/>208 </svg>209 </div>210 </div>211 </div>212 213 <!-- Formatting tools -->214 <div class="tools">215 <div class="tool-row">216 <div class="tool">OCR</div>217 <div class="tool">B</div>218 <div class="tool">I</div>219 <div class="tool">T</div>220 <div class="tool">U</div>221 <div class="tool">A</div>222 <div class="tool small">TT</div>223 </div>224 <div class="tool-row">225 <div class="tool small">226 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">227 <path d="M15 17H3v-2h12v2zm6-4H3V9h18v4zM3 5v2h18V5H3z"/>228 </svg>229 </div>230 <div class="tool small">231 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">232 <path d="M7 7h10v2H7V7zm-4 5h14v2H3v-2zm6 5h12v2H9v-2z"/>233 </svg>234 </div>235 <div class="tool small">x²</div>236 <div class="tool small">x₂</div>237 <div class="tool small">238 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">239 <path d="M12 4l-1.41 1.41L15.17 10H4v2h11.17l-4.58 4.59L12 18l7-7-7-7z"/>240 </svg>241 </div>242 <div class="tool small">243 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">244 <path d="M12 20l1.41-1.41L8.83 12H20v-2H8.83l4.58-4.59L12 4l-7 7 7 9z"/>245 </svg>246 </div>247 <div class="done-btn">DONE</div>248 </div>249 250 <div class="tool-row">251 <div class="tool small">252 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">253 <path d="M4 17h16v2H4zm0-7h16v2H4zm0-7h16v2H4z"/>254 </svg>255 </div>256 <div class="tool small">257 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">258 <path d="M7 17h10v2H7zM3 10h18v2H3zM7 3h10v2H7z"/>259 </svg>260 </div>261 <div class="tool small">262 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">263 <path d="M7 10h10v2H7zM7 6h10v2H7zM7 14h10v2H7z"/>264 </svg>265 </div>266 <div class="tool small">267 <svg width="60" height="36" viewBox="0 0 24 24" fill="#616161">268 <path d="M8 16h13v2H8zM3 12h18v2H3zM8 8h13v2H8z"/>269 </svg>270 </div>271 <div class="tool small">272 <svg width="48" height="36" viewBox="0 0 24 24" fill="#616161">273 <path d="M7 13h10v2H7zM7 9h10v2H7z"/>274 </svg>275 </div>276 <div class="tool small">277 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2">278 <rect x="4" y="6" width="16" height="12" rx="1" ry="1"/>279 <path d="M8 10h8M8 14h8"/>280 <path d="M6 6v-1M18 6v-1"/>281 </svg>282 </div>283 </div>284 </div>285 286 <!-- Editor text area -->287 <div class="editor">288 <div class="line">Manager</div>289 <div class="line">AA Techno</div>290 </div>291 292 <!-- Keyboard mock -->293 <div class="kb">294 <div class="suggest">295 <span class="chip">Techno</span>296 <span class="chip">Technology</span>297 <span class="chip">Technologies</span>298 <div style="margin-left:auto; display:flex; align-items:center; gap:16px; color:#ddd;">299 <svg width="46" height="46" viewBox="0 0 24 24" fill="#ddd">300 <path d="M12 21a9 9 0 119-9 9 9 0 01-9 9zm-.5-13h1v5h-1zm0 6h1v1h-1z"/>301 </svg>302 <svg width="46" height="46" viewBox="0 0 24 24" fill="#ddd">303 <path d="M12 17a1.5 1.5 0 001.5-1.5H10.5A1.5 1.5 0 0012 17zm6-4v-3a6 6 0 00-5-5.91V3a1 1 0 00-2 0v1.09A6 6 0 006 10v3l-2 2v1h16v-1z"/>304 </svg>305 </div>306 </div>307 <div class="keys">308 <div class="row">309 <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><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>310 </div>311 <div class="row">312 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>313 </div>314 <div class="row">315 <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>316 <div class="key wide">⌫</div>317 </div>318 <div class="row space-row">319 <div class="key wide">?123</div>320 <div class="key wide">,</div>321 <div class="key xwide"> </div>322 <div class="key wide">.</div>323 <div class="key wide">↵</div>324 </div>325 </div>326 </div>327 328</div>329</body>330</html>