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 UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top teal app bar */17 .app-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 220px;23 background: #66c2cc; /* teal */24 color: #fff;25 }26 .status-row {27 height: 60px;28 display: flex;29 align-items: center;30 padding: 0 24px;31 font-weight: 500;32 font-size: 30px;33 }34 .status-row .spacer { flex: 1; }35 .status-icons { display: flex; gap: 24px; align-items: center; }36 .top-controls {37 height: 160px;38 display: flex;39 align-items: center;40 padding: 0 24px;41 gap: 24px;42 }43 .title-input {44 flex: 1;45 height: 110px;46 background: #f4f4f4;47 border-radius: 12px;48 box-shadow: inset 0 0 0 2px #e0e0e0;49 display: flex;50 align-items: center;51 padding: 0 28px;52 color: #888;53 font-size: 44px;54 }55 .icon-btn {56 width: 88px;57 height: 88px;58 background: rgba(255,255,255,0.25);59 border-radius: 44px;60 display: grid;61 place-items: center;62 }63 .trash-btn, .help-btn { background: rgba(255,255,255,0.25); }64 .icon {65 width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 6;66 }67 68 /* Editor toolbar */69 .toolbar {70 position: absolute;71 top: 220px;72 left: 0;73 width: 1080px;74 background: #ffffff;75 padding: 24px;76 box-sizing: border-box;77 }78 .tool-row {79 display: flex;80 gap: 18px;81 margin-bottom: 22px;82 flex-wrap: wrap;83 }84 .tool {85 height: 92px;86 min-width: 120px;87 padding: 0 24px;88 border: 2px solid #e0e0e0;89 border-radius: 10px;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #333;94 font-size: 38px;95 background: #fafafa;96 }97 .tool.small { min-width: 108px; }98 .done-btn {99 position: absolute;100 right: 24px;101 top: 260px;102 width: 220px;103 height: 90px;104 background: #49b5c0;105 color: #fff;106 border-radius: 10px;107 display: flex;108 align-items: center;109 justify-content: center;110 font-weight: 700;111 font-size: 44px;112 letter-spacing: 1px;113 }114 115 /* Content area */116 .content {117 position: absolute;118 top: 500px;119 left: 0;120 right: 0;121 bottom: 900px; /* leave space for keyboard */122 padding: 40px 32px;123 box-sizing: border-box;124 background: #ffffff;125 }126 .content p {127 margin: 18px 0;128 font-size: 54px;129 color: #111;130 line-height: 1.15;131 }132 133 /* Keyboard */134 .keyboard {135 position: absolute;136 left: 0;137 bottom: 0;138 width: 1080px;139 height: 900px;140 background: #141418;141 color: #eaeaea;142 box-shadow: 0 -6px 20px rgba(0,0,0,0.25);143 }144 .suggestions {145 height: 120px;146 display: flex;147 align-items: center;148 gap: 32px;149 padding: 0 32px;150 border-bottom: 1px solid #2a2a2f;151 font-size: 44px;152 }153 .sugg { color: #eaeaea; }154 .sugg-divider {155 width: 2px; height: 44px; background: #2a2a2f;156 }157 .sugg.spacer { flex: 1; }158 .mic {159 width: 80px; height: 80px; border-radius: 40px; background: #2a2a2f; display: grid; place-items: center;160 }161 .mic svg { width: 36px; height: 36px; stroke: #eaeaea; stroke-width: 6; fill: none; }162 .keys {163 padding: 20px 20px;164 }165 .row {166 display: flex;167 justify-content: center;168 gap: 16px;169 margin: 18px 0;170 }171 .key {172 width: 96px;173 height: 138px;174 background: #1c1c21;175 border-radius: 18px;176 display: grid;177 place-items: center;178 font-size: 54px;179 color: #ddd;180 box-shadow: inset 0 -4px 0 rgba(255,255,255,0.04);181 }182 .key.wide { width: 160px; }183 .space { flex: 1; height: 138px; background: #1c1c21; border-radius: 24px; display: grid; place-items: center; font-size: 40px; color: #cfcfcf; }184 .enter {185 width: 130px; height: 130px; background: #e6d6f5; color: #32203d; border-radius: 65px; display: grid; place-items: center; font-size: 60px; margin-left: 14px;186 }187 .shift, .backspace {188 width: 120px; height: 138px; background: #1c1c21; border-radius: 18px; display: grid; place-items: center;189 }190 .bottom-row {191 display: flex;192 align-items: center;193 gap: 18px;194 margin: 10px 20px;195 }196 .dot { width: 100px; height: 138px; background: #1c1c21; border-radius: 18px; display: grid; place-items: center; font-size: 60px; }197 .comma { width: 100px; height: 138px; background: #1c1c21; border-radius: 18px; display: grid; place-items: center; font-size: 60px; }198 .emoji { width: 100px; height: 138px; background: #1c1c21; border-radius: 18px; display: grid; place-items: center; font-size: 52px; }199 .mode { width: 150px; height: 138px; background: #c7bbcf; color: #1b1b22; border-radius: 24px; display: grid; place-items: center; font-size: 44px; }200 .back {201 width: 120px; height: 138px; background: #1c1c21; border-radius: 18px; display: grid; place-items: center;202 }203 204 /* Simple helper SVG styles */205 .white-stroke { stroke: #ffffff; fill: none; stroke-width: 8; }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Top App Bar -->212 <div class="app-bar">213 <div class="status-row">214 11:14215 <div class="spacer"></div>216 <div class="status-icons">217 <!-- Cellular -->218 <svg class="icon" viewBox="0 0 24 24">219 <rect x="2" y="14" width="4" height="8" fill="#ffffff" opacity="0.9"/>220 <rect x="8" y="10" width="4" height="12" fill="#ffffff" opacity="0.8"/>221 <rect x="14" y="6" width="4" height="16" fill="#ffffff" opacity="0.7"/>222 </svg>223 <!-- WiFi -->224 <svg class="icon" viewBox="0 0 24 24">225 <path class="white-stroke" d="M2 8 C8 2,16 2,22 8"></path>226 <path class="white-stroke" d="M5 12 C10 7,14 7,19 12"></path>227 <circle cx="12" cy="17" r="2" fill="#ffffff"></circle>228 </svg>229 <!-- Battery -->230 <svg class="icon" viewBox="0 0 28 24">231 <rect x="2" y="5" width="22" height="14" rx="2" ry="2" stroke="#ffffff" stroke-width="3" fill="none"></rect>232 <rect x="4" y="7" width="14" height="10" fill="#ffffff"></rect>233 <rect x="24" y="9" width="3" height="6" fill="#ffffff"></rect>234 </svg>235 </div>236 </div>237 <div class="top-controls">238 <!-- Back arrow -->239 <div class="icon-btn">240 <svg class="icon" viewBox="0 0 24 24">241 <path d="M15 5 L7 12 L15 19" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>242 </svg>243 </div>244 <div class="title-input">Title</div>245 <!-- Down chevron -->246 <div class="icon-btn">247 <svg class="icon" viewBox="0 0 24 24">248 <path d="M6 9 L12 15 L18 9" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>249 </svg>250 </div>251 <!-- Trash -->252 <div class="icon-btn trash-btn">253 <svg class="icon" viewBox="0 0 24 24">254 <path d="M4 7 H20 M7 7 V19 M17 7 V19 M9 4 H15 L16 7 H8 Z" stroke="#ffffff" stroke-width="3" fill="none"></path>255 </svg>256 </div>257 <!-- Help -->258 <div class="icon-btn help-btn">259 <svg class="icon" viewBox="0 0 24 24">260 <path d="M12 17 V16 C12 13 16 13 16 9 C16 6 13 5 12 5 C10 5 8.5 6.5 8 8" stroke="#ffffff" stroke-width="3" fill="none"></path>261 <circle cx="12" cy="20" r="1.8" fill="#ffffff"></circle>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Editor Toolbar -->268 <div class="toolbar">269 <div class="tool-row">270 <div class="tool">B</div>271 <div class="tool">I</div>272 <div class="tool">T</div>273 <div class="tool">U</div>274 <div class="tool">A</div>275 <div class="tool">Tt</div>276 </div>277 <div class="tool-row">278 <div class="tool small">⇤</div>279 <div class="tool small">≡</div>280 <div class="tool small">X</div>281 <div class="tool small">x²</div>282 <div class="tool small">x2</div>283 <div class="tool small">↶</div>284 <div class="tool small">↷</div>285 </div>286 <div class="tool-row">287 <div class="tool small">≡L</div>288 <div class="tool small">≡C</div>289 <div class="tool small">≡R</div>290 <div class="tool small">•</div>291 <div class="tool small">1.</div>292 <div class="tool small">☑</div>293 </div>294 <div class="done-btn">DONE</div>295 </div>296 297 <!-- Content area -->298 <div class="content">299 <p>Manager</p>300 <p>AA Technologies</p>301 <p>Pune</p>302 <p>Dear sir</p>303 </div>304 305 <!-- Keyboard -->306 <div class="keyboard">307 <div class="suggestions">308 <div class="sugg">sir</div>309 <div class="sugg-divider"></div>310 <div class="sugg">sirs</div>311 <div class="sugg-divider"></div>312 <div class="sugg">sir's</div>313 <div class="sugg spacer"></div>314 <div class="mic">315 <svg viewBox="0 0 24 24">316 <rect x="9" y="4" width="6" height="10" rx="3" ry="3" stroke="#eaeaea" stroke-width="2" fill="none"></rect>317 <path d="M6 10 C6 14,18 14,18 10" stroke="#eaeaea" stroke-width="2" fill="none"></path>318 <path d="M12 14 V20" stroke="#eaeaea" stroke-width="2"></path>319 </svg>320 </div>321 </div>322 <div class="keys">323 <div class="row">324 <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>325 </div>326 <div class="row">327 <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>328 </div>329 <div class="row">330 <div class="shift">331 <svg class="icon" viewBox="0 0 24 24">332 <path d="M12 5 L5 12 H9 V19 H15 V12 H19 Z" stroke="#eaeaea" stroke-width="2" fill="none"></path>333 </svg>334 </div>335 <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>336 <div class="backspace">337 <svg class="icon" viewBox="0 0 24 24">338 <path d="M3 12 L9 6 H21 V18 H9 Z" stroke="#eaeaea" stroke-width="2" fill="none"></path>339 <path d="M12 9 L16 13 M16 9 L12 13" stroke="#eaeaea" stroke-width="2"></path>340 </svg>341 </div>342 </div>343 <div class="bottom-row">344 <div class="mode">?123</div>345 <div class="comma">,</div>346 <div class="emoji">☺</div>347 <div class="space">space</div>348 <div class="dot">.</div>349 <div class="enter">↵</div>350 </div>351 </div>352 </div>353 354</div>355</body>356</html>