GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F2F2F2;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 130px;24 background: #000000;25 color: #ffffff;26 }27 .status-content {28 position: absolute;29 top: 30px;30 left: 40px;31 right: 40px;32 height: 70px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 font-size: 38px;37 letter-spacing: 1px;38 }39 .status-left {40 display: flex;41 align-items: center;42 gap: 20px;43 opacity: 0.9;44 }45 .status-right {46 display: flex;47 align-items: center;48 gap: 26px;49 }50 .dot {51 width: 12px;52 height: 12px;53 background: #9E9E9E;54 border-radius: 50%;55 }56 /* Simple status icons */57 .wifi svg, .battery svg {58 width: 60px; height: 40px;59 }60 .battery svg rect { stroke: #fff; }61 .wifi svg path { stroke: #fff; }62 63 /* App toolbar */64 .toolbar {65 position: absolute;66 top: 130px;67 left: 0;68 width: 1080px;69 height: 170px;70 background: #D9D9D9;71 display: flex;72 align-items: center;73 padding: 0 30px;74 gap: 34px;75 color: #666;76 }77 .tool-icon {78 width: 90px; height: 90px;79 display: flex;80 align-items: center;81 justify-content: center;82 }83 .tool-icon svg {84 width: 68px; height: 68px;85 stroke: #6A6A6A; fill: none; stroke-width: 4;86 }87 88 /* Main canvas area */89 .canvas {90 position: absolute;91 top: 300px; /* status(130)+toolbar(170) */92 left: 0;93 width: 1080px;94 bottom: 1080px; /* overlay+keyboard approx */95 background: #CFCFCF;96 }97 .canvas-inner {98 position: absolute;99 inset: 20px 20px 220px 20px;100 background: #BEBEBE;101 border: 1px solid #AFAFAF;102 display: flex;103 align-items: center;104 justify-content: center;105 color: #757575;106 font-size: 36px;107 }108 .thin-line {109 position: absolute;110 left: 60px;111 right: 60px;112 bottom: 260px;113 height: 2px;114 background: #9F9F9F;115 opacity: 0.7;116 }117 118 /* Floating format bar */119 .format-bar {120 position: absolute;121 left: 20px;122 right: 20px;123 bottom: 900px; /* sits just above keyboard */124 height: 170px;125 background: #FFFFFF;126 border-radius: 44px;127 box-shadow: 0 8px 24px rgba(0,0,0,0.18);128 display: flex;129 align-items: center;130 padding: 0 30px;131 gap: 38px;132 }133 .circle-btn {134 width: 86px; height: 86px;135 border-radius: 50%;136 background: #F3F3F3;137 border: 1px solid #E0E0E0;138 display: flex; align-items: center; justify-content: center;139 font-size: 42px; color: #6A6A6A;140 }141 .format-icon {142 width: 100px; height: 84px;143 display: flex; align-items: center; justify-content: center;144 color: #6A6A6A; font-size: 54px; font-weight: 600;145 }146 .lines-icon {147 width: 120px; height: 84px; border-radius: 16px;148 border: 2px solid #3B82F6;149 display: flex; flex-direction: column; justify-content: center;150 padding: 10px 16px; gap: 10px; color: #3B82F6;151 }152 .lines-icon div { height: 6px; background: #3B82F6; border-radius: 3px; }153 .color-ring {154 width: 84px; height: 84px; border-radius: 50%;155 background: conic-gradient(#ff4444, #ffaa00, #ffee00, #44ff44, #00ccff, #8844ff, #ff44aa, #ff4444);156 box-shadow: inset 0 0 0 10px #FFFFFF;157 border: 1px solid #E0E0E0;158 }159 .three-lines {160 width: 110px; height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 10px;161 }162 .three-lines span { height: 6px; background: #868686; border-radius: 3px; }163 .check-btn {164 margin-left: auto;165 width: 86px; height: 86px; border-radius: 50%; background: #F3F3F3;166 border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center;167 font-size: 46px; color: #6A6A6A;168 }169 170 /* Keyboard */171 .keyboard {172 position: absolute;173 left: 0; right: 0; bottom: 0;174 height: 900px;175 background: #1B1B1B;176 color: #EDEDED;177 }178 .kbd-top {179 height: 120px;180 display: flex; align-items: center;181 padding: 0 36px;182 gap: 34px;183 color: #D7D7D7;184 font-size: 36px;185 }186 .kbd-top .tool {187 display: flex; align-items: center; justify-content: center;188 width: 90px; height: 90px; border-radius: 20px; background: #232323;189 }190 .kbd-top .tool svg { width: 42px; height: 42px; stroke: #BDBDBD; fill: none; stroke-width: 3; }191 .kbd-top .label { font-weight: 700; margin-right: 6px; }192 .mic {193 margin-left: auto;194 width: 90px; height: 90px; border-radius: 20px; background: #232323;195 display: flex; align-items: center; justify-content: center;196 }197 .mic svg { width: 34px; height: 34px; stroke: #BDBDBD; fill: none; stroke-width: 3; }198 199 .keys {200 padding: 8px 26px 0 26px;201 display: flex; flex-direction: column; gap: 20px;202 }203 .row { display: flex; gap: 18px; justify-content: center; }204 .key {205 min-width: 86px; height: 120px; border-radius: 16px;206 background: #2A2A2A; display: flex; align-items: center; justify-content: center;207 font-size: 44px; color: #EAEAEA;208 }209 .key.wide { min-width: 120px; }210 .space-row {211 display: flex; align-items: center; gap: 18px; padding: 0 20px;212 }213 .space { flex: 1; height: 120px; border-radius: 16px; background: #2A2A2A; }214 .light-btn {215 width: 140px; height: 120px; border-radius: 60px;216 background: #BFD2EB; color: #1F2B3A; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 40px;217 }218 .round-small {219 width: 110px; height: 120px; border-radius: 16px; background: #2A2A2A; display: flex; align-items: center; justify-content: center; font-size: 44px;220 }221 .emoji-btn {222 width: 110px; height: 120px; border-radius: 16px; background: #2A2A2A; display: flex; align-items: center; justify-content: center; font-size: 42px;223 }224 .enter-btn {225 width: 140px; height: 120px; border-radius: 60px; background: #BFD2EB; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #1F2B3A;226 }227 .home-indicator {228 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);229 width: 260px; height: 10px; background: #D7D7D7; border-radius: 5px;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status Bar -->237 <div class="status-bar">238 <div class="status-content">239 <div class="status-left">240 <div style="font-weight:700;">1:49</div>241 <span class="dot"></span>242 <span style="opacity:0.8;">ib</span>243 <span style="opacity:0.8;">LR</span>244 <span style="opacity:0.8;">N</span>245 <span class="dot"></span>246 </div>247 <div class="status-right">248 <div class="wifi">249 <svg viewBox="0 0 60 40">250 <path d="M5 20 Q30 5 55 20" />251 <path d="M12 24 Q30 14 48 24" />252 <path d="M20 28 Q30 22 40 28" />253 <circle cx="30" cy="32" r="3" fill="#fff"></circle>254 </svg>255 </div>256 <div class="battery">257 <svg viewBox="0 0 60 40">258 <rect x="5" y="8" width="44" height="24" rx="4" stroke-width="3" />259 <rect x="51" y="14" width="6" height="12" rx="2" fill="#fff" />260 <rect x="9" y="12" width="30" height="16" rx="2" fill="#fff" />261 </svg>262 </div>263 </div>264 </div>265 </div>266 267 <!-- App Toolbar -->268 <div class="toolbar">269 <div class="tool-icon">270 <svg viewBox="0 0 48 48">271 <path d="M32 8 L16 24 L32 40" />272 </svg>273 </div>274 <div class="tool-icon">275 <svg viewBox="0 0 48 48">276 <rect x="10" y="8" width="26" height="32" rx="3"></rect>277 <path d="M34 16 L40 16 M37 13 L37 19" />278 </svg>279 </div>280 <div class="tool-icon">281 <svg viewBox="0 0 48 48">282 <path d="M10 14 H38 M10 24 H34 M10 34 H30" />283 </svg>284 </div>285 <div class="tool-icon">286 <svg viewBox="0 0 48 48">287 <path d="M32 12 Q20 12 16 24" />288 <path d="M18 20 L12 26 L20 28" />289 </svg>290 </div>291 <div class="tool-icon">292 <svg viewBox="0 0 48 48">293 <path d="M16 12 Q28 12 32 24" />294 <path d="M30 20 L36 26 L28 28" />295 </svg>296 </div>297 <div class="tool-icon">298 <svg viewBox="0 0 48 48">299 <rect x="10" y="10" width="12" height="12"></rect>300 <rect x="26" y="10" width="12" height="12"></rect>301 <rect x="10" y="26" width="12" height="12"></rect>302 <rect x="26" y="26" width="12" height="12"></rect>303 </svg>304 </div>305 <div class="tool-icon">306 <svg viewBox="0 0 48 48">307 <circle cx="24" cy="24" r="14"></circle>308 <path d="M24 10 L24 4 M24 4 L30 10" />309 </svg>310 </div>311 <div class="tool-icon">312 <svg viewBox="0 0 48 48">313 <path d="M18 34 H30 V26" />314 <path d="M24 18 V30" />315 <path d="M22 18 H26" />316 </svg>317 </div>318 <div class="tool-icon">319 <svg viewBox="0 0 48 48">320 <path d="M12 12 L22 12 L12 22 Z" />321 <path d="M36 36 L26 36 L36 26 Z" />322 </svg>323 </div>324 </div>325 326 <!-- Main Canvas -->327 <div class="canvas">328 <div class="canvas-inner">[Workspace / Canvas]</div>329 <div class="thin-line"></div>330 </div>331 332 <!-- Floating Format Bar -->333 <div class="format-bar">334 <div class="circle-btn">×</div>335 <div class="lines-icon">336 <div style="width:86%"></div>337 <div style="width:72%"></div>338 <div style="width:60%"></div>339 </div>340 <div class="format-icon">A</div>341 <div class="color-ring"></div>342 <div class="three-lines">343 <span style="width:80%"></span>344 <span style="width:70%"></span>345 <span style="width:60%"></span>346 </div>347 <div class="check-btn">✓</div>348 </div>349 350 <!-- Keyboard -->351 <div class="keyboard">352 <div class="kbd-top">353 <div class="tool">354 <svg viewBox="0 0 48 48">355 <rect x="6" y="6" width="36" height="36" rx="5"></rect>356 <path d="M16 16 H32 M16 24 H32 M16 32 H32" />357 </svg>358 </div>359 <div class="tool">☺</div>360 <div class="label">GIF</div>361 <div class="tool">362 <svg viewBox="0 0 48 48">363 <circle cx="24" cy="24" r="16"></circle>364 <path d="M24 14 V34 M14 24 H34" />365 </svg>366 </div>367 <div class="tool">368 <svg viewBox="0 0 48 48">369 <path d="M12 20 H26 V12 H36 V36 H12 Z" />370 <path d="M14 34 H22" />371 </svg>372 </div>373 <div class="tool">374 <svg viewBox="0 0 48 48">375 <circle cx="24" cy="24" r="16"></circle>376 </svg>377 </div>378 <div class="mic">379 <svg viewBox="0 0 48 48">380 <rect x="18" y="10" width="12" height="20" rx="6"></rect>381 <path d="M12 24 Q24 34 36 24" />382 <path d="M24 34 V40" />383 </svg>384 </div>385 </div>386 387 <div class="keys">388 <div class="row">389 <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>390 </div>391 <div class="row">392 <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>393 <div class="key wide">⌫</div>394 </div>395 <div class="row">396 <div class="key wide">⇧</div>397 <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>398 <div class="key wide">⌦</div>399 </div>400 <div class="space-row">401 <div class="light-btn">?123</div>402 <div class="round-small">,</div>403 <div class="emoji-btn">☺</div>404 <div class="space"></div>405 <div class="round-small">.</div>406 <div class="enter-btn">↵</div>407 </div>408 </div>409 410 <div class="home-indicator"></div>411 </div>412 413</div>414</body>415</html>