GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Editor UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #59C1CF;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 font-size: 36px;29 }30 .status-left, .status-right { display: flex; align-items: center; gap: 18px; }31 .status-left { flex: 1; }32 .dot {33 width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.8);34 }35 .status-right svg { width: 40px; height: 40px; fill: #fff; }36 37 /* Header with title and actions */38 .header {39 position: absolute;40 top: 120px;41 left: 0;42 width: 1080px;43 background: #ffffff;44 padding: 24px 24px 16px 24px;45 box-sizing: border-box;46 }47 .title-row {48 display: flex;49 align-items: center;50 gap: 20px;51 margin-bottom: 20px;52 }53 .back-btn {54 width: 64px; height: 64px; display: flex; justify-content: center; align-items: center;55 border-radius: 12px; background: transparent;56 }57 .title-input {58 flex: 1;59 height: 110px;60 border-radius: 10px;61 background: #F2F3F5;62 display: flex;63 align-items: center;64 padding: 0 28px;65 color: #666; font-size: 40px;66 }67 .header-actions {68 display: flex; align-items: center; gap: 22px;69 }70 .icon-btn {71 width: 64px; height: 64px; border-radius: 12px;72 background: #ffffff; border: 2px solid #E0E0E0;73 display: flex; justify-content: center; align-items: center;74 }75 76 /* Toolbar */77 .toolbar { margin-top: 18px; display: flex; flex-direction: column; gap: 22px; }78 .tool-row { display: flex; gap: 22px; align-items: center; }79 .tool {80 min-width: 120px; height: 80px; border-radius: 8px;81 background: #F0F0F0; border: 1px solid #DADADA;82 display: flex; justify-content: center; align-items: center;83 color: #444; font-size: 34px; box-sizing: border-box;84 }85 .tool.small { min-width: 100px; }86 .tool.wide { min-width: 150px; }87 .done-btn {88 margin-left: auto;89 width: 200px; height: 90px; border-radius: 8px;90 background: #4DB7C8; color: #fff; font-weight: bold;91 display: flex; align-items: center; justify-content: center; font-size: 40px;92 }93 94 /* Content area */95 .content {96 position: absolute;97 top: 600px; /* below header and toolbars */98 left: 0;99 width: 1080px;100 height: 980px;101 background: #ffffff;102 padding: 40px 28px;103 box-sizing: border-box;104 color: #222;105 }106 .content p { margin: 0 0 28px 0; font-size: 52px; }107 108 /* Keyboard */109 .keyboard {110 position: absolute;111 bottom: 0;112 left: 0;113 width: 1080px;114 height: 820px;115 background: #17171A;116 color: #EDEDED;117 box-sizing: border-box;118 padding: 18px 20px 24px;119 }120 .suggestions {121 height: 110px;122 background: #1F1F22;123 border-radius: 20px;124 display: flex; align-items: center;125 padding: 0 24px; box-sizing: border-box;126 font-size: 38px; gap: 28px;127 }128 .divider { color: #777; }129 .keys {130 margin-top: 22px;131 display: flex; flex-direction: column; gap: 18px;132 }133 .row { display: flex; gap: 14px; padding: 0 8px; }134 .key {135 height: 120px; flex: 1;136 background: #27272B; border-radius: 16px;137 display: flex; align-items: center; justify-content: center;138 font-size: 46px; color: #EDEDED;139 }140 .key.wide { flex: 2.6; }141 .key.medium { flex: 1.6; }142 .key.icon { font-size: 42px; }143 .key.dark { background: #202024; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status Bar -->150 <div class="status-bar">151 <div class="status-left">152 <div style="font-weight:bold;">11:02</div>153 <div class="dot"></div>154 <div class="dot"></div>155 <div class="dot"></div>156 </div>157 <div class="status-right">158 <!-- Simple wifi icon -->159 <svg viewBox="0 0 24 24">160 <path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.7-5.3a12 12 0 0 1 13.4 0l-1.7 1.7a9 9 0 0 0-10 0L5.3 12.7zm-3.6-3.6a18 18 0 0 1 20.6 0l-1.7 1.7a15 15 0 0 0-17.2 0L1.7 9.1z"/>161 </svg>162 <!-- Battery icon -->163 <svg viewBox="0 0 24 24">164 <path d="M16 7h3v2h2v6h-2v2h-3V7zM3 8c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8zm2 0v8h9V8H5z"/>165 </svg>166 </div>167 </div>168 169 <!-- Header with Title & actions -->170 <div class="header">171 <div class="title-row">172 <div class="back-btn">173 <svg width="36" height="36" viewBox="0 0 24 24">174 <path d="M15 18l-6-6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 <div class="title-input">Title</div>178 <div class="header-actions">179 <div class="icon-btn">180 <svg width="28" height="28" viewBox="0 0 24 24">181 <path d="M5 4h14v2H5zm2 4h10v12H7z" fill="#757575"/>182 </svg>183 </div>184 <div class="icon-btn">185 <svg width="28" height="28" viewBox="0 0 24 24">186 <circle cx="12" cy="12" r="10" stroke="#BDBDBD" stroke-width="2" fill="none"/>187 <text x="12" y="16" font-size="12" text-anchor="middle" fill="#757575">?</text>188 </svg>189 </div>190 </div>191 </div>192 193 <!-- Toolbar rows -->194 <div class="toolbar">195 <div class="tool-row">196 <div class="tool wide">OCR</div>197 <div class="tool small"><b>B</b></div>198 <div class="tool small"><i>I</i></div>199 <div class="tool small">T</div>200 <div class="tool small"><u>U</u></div>201 <div class="tool small" style="background:#E9F8FF;color:#2AA6C8;">A</div>202 <div class="tool small">Tt</div>203 </div>204 <div class="tool-row">205 <div class="tool small">206 <svg width="36" height="36" viewBox="0 0 24 24">207 <path d="M8 6l-4 4 4 4V11h12V9H8V6z" fill="#666"/>208 </svg>209 </div>210 <div class="tool small">211 <svg width="36" height="36" viewBox="0 0 24 24">212 <path d="M4 6h16v2H4zm4 5h12v2H8zm-4 5h16v2H4z" fill="#666"/>213 </svg>214 </div>215 <div class="tool small">x²</div>216 <div class="tool small">x₂</div>217 <div class="tool small">218 <svg width="36" height="36" viewBox="0 0 24 24">219 <path d="M12 5v3H7v8h5v3l7-7-7-7z" fill="#666"/>220 </svg>221 </div>222 <div class="tool small">223 <svg width="36" height="36" viewBox="0 0 24 24">224 <path d="M12 19v-3h5V8h-5V5L5 12l7 7z" fill="#666"/>225 </svg>226 </div>227 </div>228 <div class="tool-row">229 <div class="tool small">230 <svg width="36" height="36" viewBox="0 0 24 24">231 <path d="M4 6h8v2H4zm0 5h12v2H4zm0 5h16v2H4z" fill="#666"/>232 </svg>233 </div>234 <div class="tool small">235 <svg width="36" height="36" viewBox="0 0 24 24">236 <path d="M4 6h16v2H4zm4 5h8v2H8zm0 5h8v2H8z" fill="#666"/>237 </svg>238 </div>239 <div class="tool small">240 <svg width="36" height="36" viewBox="0 0 24 24">241 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" fill="#666"/>242 </svg>243 </div>244 <div class="tool small">245 <svg width="36" height="36" viewBox="0 0 24 24">246 <path d="M4 6h16v2H4zm6 5h4v2h-4zm-6 5h16v2H4z" fill="#666"/>247 </svg>248 </div>249 </div>250 <div class="tool-row">251 <div class="tool small">252 <svg width="36" height="36" viewBox="0 0 24 24">253 <circle cx="5" cy="7" r="2" fill="#666"/>254 <path d="M9 7h11v2H9zM9 12h11v2H9zM9 17h11v2H9z" fill="#666"/>255 <circle cx="5" cy="12" r="2" fill="#666"/>256 <circle cx="5" cy="17" r="2" fill="#666"/>257 </svg>258 </div>259 <div class="tool small">260 <svg width="36" height="36" viewBox="0 0 24 24">261 <text x="5" y="10" font-size="10" fill="#666">1</text>262 <path d="M9 7h11v2H9zM9 12h11v2H9zM9 17h11v2H9z" fill="#666"/>263 <text x="5" y="15" font-size="10" fill="#666">2</text>264 <text x="5" y="20" font-size="10" fill="#666">3</text>265 </svg>266 </div>267 <div class="tool small">268 <svg width="36" height="36" viewBox="0 0 24 24">269 <rect x="5" y="7" width="14" height="4" rx="2" fill="#666"/>270 <rect x="5" y="13" width="14" height="4" rx="2" fill="#666"/>271 <path d="M6 8l2 2" stroke="#fff" stroke-width="2" />272 <path d="M6 14l2 2" stroke="#fff" stroke-width="2" />273 </svg>274 </div>275 <div class="done-btn">DONE</div>276 </div>277 </div>278 </div>279 280 <!-- Content area -->281 <div class="content">282 <p>Manager</p>283 <p>AA</p>284 </div>285 286 <!-- Keyboard -->287 <div class="keyboard">288 <div class="suggestions">289 <div style="width:68px;height:68px;background:#2C2C30;border-radius:12px;display:flex;align-items:center;justify-content:center;">⎇</div>290 <div>AA</div>291 <div class="divider">|</div>292 <div>AAJ</div>293 <div class="divider">|</div>294 <div>SA</div>295 <div style="margin-left:auto;width:76px;height:76px;background:#2C2C30;border-radius:38px;display:flex;align-items:center;justify-content:center;">🎤</div>296 </div>297 298 <div class="keys">299 <div class="row">300 <div class="key">q</div>301 <div class="key">w</div>302 <div class="key">e</div>303 <div class="key">r</div>304 <div class="key">t</div>305 <div class="key">y</div>306 <div class="key">u</div>307 <div class="key">i</div>308 <div class="key">o</div>309 <div class="key">p</div>310 </div>311 <div class="row">312 <div class="key">a</div>313 <div class="key">s</div>314 <div class="key">d</div>315 <div class="key">f</div>316 <div class="key">g</div>317 <div class="key">h</div>318 <div class="key">j</div>319 <div class="key">k</div>320 <div class="key">l</div>321 </div>322 <div class="row">323 <div class="key medium dark">⇧</div>324 <div class="key">z</div>325 <div class="key">x</div>326 <div class="key">c</div>327 <div class="key">v</div>328 <div class="key">b</div>329 <div class="key">n</div>330 <div class="key">m</div>331 <div class="key medium dark">⌫</div>332 </div>333 <div class="row">334 <div class="key dark">?123</div>335 <div class="key dark">,</div>336 <div class="key dark">😊</div>337 <div class="key wide">space</div>338 <div class="key dark">.</div>339 <div class="key dark icon">↵</div>340 </div>341 </div>342 </div>343 344</div>345</body>346</html>