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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 position: relative;16 overflow: hidden;17 width: 1080px;18 height: 2400px;19 background: #ffffff;20 }21 22 /* Status bar */23 .status-bar {24 height: 100px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #555;30 font-size: 34px;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 18px;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 24px;41 }42 .icon {43 display: inline-flex;44 align-items: center;45 justify-content: center;46 }47 48 /* Toolbar / search */49 .toolbar {50 height: 140px;51 padding: 0 36px;52 display: flex;53 align-items: center;54 gap: 24px;55 color: #222;56 }57 .search-field {58 flex: 1;59 display: flex;60 align-items: center;61 gap: 18px;62 font-size: 42px;63 color: #9e9e9e;64 }65 .cursor {66 width: 3px;67 height: 44px;68 background: #111;69 border-radius: 1px;70 }71 .camera-btn {72 width: 72px;73 height: 72px;74 border-radius: 16px;75 display: flex;76 align-items: center;77 justify-content: center;78 color: #111;79 }80 81 /* Content area (blank) */82 .content {83 height: 1120px; /* leaves room for keyboard below */84 background: #ffffff;85 }86 87 /* Keyboard */88 .keyboard {89 position: absolute;90 left: 0;91 bottom: 80px; /* leave space for gesture bar */92 width: 1080px;93 height: 960px;94 background: #111111;95 color: #e6e6e6;96 box-shadow: 0 -8px 16px rgba(0,0,0,0.2);97 }98 .kb-inner {99 padding: 24px;100 }101 .kb-toolbar {102 height: 120px;103 display: flex;104 align-items: center;105 justify-content: space-between;106 padding: 0 12px;107 }108 .kb-pill {109 height: 84px;110 min-width: 120px;111 padding: 0 26px;112 border-radius: 28px;113 background: #1f1f1f;114 color: #e0e0e0;115 display: inline-flex;116 align-items: center;117 justify-content: center;118 font-size: 34px;119 gap: 12px;120 }121 .kb-row {122 margin-top: 18px;123 display: grid;124 grid-gap: 12px;125 }126 .row1 { grid-template-columns: repeat(10, 1fr); }127 .row2 { grid-template-columns: repeat(9, 1fr); padding: 0 60px; }128 .row3 { grid-template-columns: repeat(7, 1fr); padding: 0 140px; }129 .row4 { grid-template-columns: repeat(12, 1fr); margin-top: 26px; }130 131 .key {132 height: 120px;133 border-radius: 28px;134 background: #2b2b2b;135 display: flex;136 align-items: center;137 justify-content: center;138 font-size: 46px;139 color: #dcdcdc;140 }141 .key.small { font-size: 38px; }142 .space {143 background: #2b2b2b;144 }145 .search-key {146 background: #b8f4f1;147 color: #0f1f1f;148 font-weight: 600;149 }150 .search-key svg { width: 48px; height: 48px; }151 152 /* Gesture bar */153 .gesture-bar {154 position: absolute;155 bottom: 20px;156 left: 50%;157 transform: translateX(-50%);158 width: 200px;159 height: 12px;160 border-radius: 6px;161 background: #e0e0e0;162 }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar -->169 <div class="status-bar">170 <div class="status-left">171 <div>10:24</div>172 <div>14°</div>173 <span class="icon" title="Do not disturb">174 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#9e9e9e"/><rect x="6" y="11" width="12" height="2" fill="#fff"/></svg>175 </span>176 <span class="icon" title="Cloud">177 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M7 15c-2.5 0-4-1.5-4-3.5S4.5 8 7 8c.6-2 2.1-3 4-3 2.9 0 5 2.3 5 5h1c1.7 0 3 1.3 3 3s-1.3 3-3 3H7z" fill="#9e9e9e"/></svg>178 </span>179 </div>180 <div class="status-right">181 <span class="icon" title="Wi‑Fi">182 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none"/><path d="M5 12c4-3 10-3 14 0" stroke="#666" stroke-width="2" fill="none"/><path d="M9 15c2-2 4-2 6 0" stroke="#666" stroke-width="2" fill="none"/><circle cx="12" cy="18" r="1.5" fill="#666"/></svg>183 </span>184 <span class="icon" title="Battery">185 <svg width="44" height="34" viewBox="0 0 28 18">186 <rect x="1" y="3" width="22" height="12" rx="2" fill="#666"/>187 <rect x="24" y="7" width="3" height="4" rx="1" fill="#666"/>188 <rect x="3" y="5" width="14" height="8" fill="#9e9e9e"/>189 </svg>190 </span>191 </div>192 </div>193 194 <!-- Toolbar with back and camera -->195 <div class="toolbar">196 <span class="icon" title="Back">197 <svg width="64" height="64" viewBox="0 0 24 24">198 <path d="M15 4L5 12l10 8" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199 </svg>200 </span>201 <div class="search-field">202 <span class="cursor"></span>203 <span>Find products...</span>204 </div>205 <div class="camera-btn">206 <svg width="56" height="56" viewBox="0 0 24 24">207 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#222" stroke-width="2" fill="none"/>208 <rect x="8" y="4" width="4" height="3" rx="1" fill="#222"/>209 <circle cx="12" cy="12" r="3.5" stroke="#222" stroke-width="2" fill="none"/>210 </svg>211 </div>212 </div>213 214 <!-- White content area -->215 <div class="content"></div>216 217 <!-- Keyboard -->218 <div class="keyboard">219 <div class="kb-inner">220 221 <!-- Suggestion / utility bar -->222 <div class="kb-toolbar">223 <div class="kb-pill">224 <svg width="28" height="28" viewBox="0 0 24 24">225 <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" fill="#ccc"/>226 </svg>227 </div>228 <div class="kb-pill">229 <svg width="32" height="32" viewBox="0 0 24 24">230 <circle cx="12" cy="10" r="4" fill="#ccc"/><path d="M5 20c2-3 12-3 14 0" fill="none" stroke="#ccc" stroke-width="2"/>231 </svg>232 </div>233 <div class="kb-pill">GIF</div>234 <div class="kb-pill">235 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M4 6h16v3H4zm0 5h12v3H4zm0 5h8v3H4z" fill="#ccc"/></svg>236 <span style="font-size:28px;">Gx</span>237 </div>238 <div class="kb-pill">239 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 16a4 4 0 100-8 4 4 0 000 8zm7-4h3M2 12h3" stroke="#ccc" stroke-width="2"/></svg>240 </div>241 <div class="kb-pill">242 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M21 14c-2 0-3 1-3 3s1 3 3 3a3 3 0 000-6zM3 20c3-6 9-10 15-12" stroke="#ccc" stroke-width="2" fill="none"/></svg>243 </div>244 <div class="kb-pill">245 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 6a3 3 0 013 3v5a3 3 0 11-6 0V9a3 3 0 013-3z" fill="#ccc"/><path d="M6 14v1a6 6 0 0012 0v-1" stroke="#ccc" stroke-width="2"/></svg>246 </div>247 </div>248 249 <!-- Row 1 -->250 <div class="kb-row row1">251 <div class="key">q</div>252 <div class="key">w</div>253 <div class="key">e</div>254 <div class="key">r</div>255 <div class="key">t</div>256 <div class="key">y</div>257 <div class="key">u</div>258 <div class="key">i</div>259 <div class="key">o</div>260 <div class="key">p</div>261 </div>262 263 <!-- Row 2 -->264 <div class="kb-row row2">265 <div class="key">a</div>266 <div class="key">s</div>267 <div class="key">d</div>268 <div class="key">f</div>269 <div class="key">g</div>270 <div class="key">h</div>271 <div class="key">j</div>272 <div class="key">k</div>273 <div class="key">l</div>274 </div>275 276 <!-- Row 3 -->277 <div class="kb-row row3">278 <div class="key">z</div>279 <div class="key">x</div>280 <div class="key">c</div>281 <div class="key">v</div>282 <div class="key">b</div>283 <div class="key">n</div>284 <div class="key">m</div>285 </div>286 287 <!-- Bottom Row -->288 <div class="kb-row row4">289 <div class="key small" style="grid-column: span 2;">?123</div>290 <div class="key small" style="grid-column: span 1;">,</div>291 <div class="key small" style="grid-column: span 1;">292 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="10" r="4" fill="#dcdcdc"/><path d="M5 20c2-3 12-3 14 0" stroke="#dcdcdc" stroke-width="2" fill="none"/></svg>293 </div>294 <div class="key space" style="grid-column: span 6;"></div>295 <div class="key small" style="grid-column: span 1;">.</div>296 <div class="key search-key" style="grid-column: span 2;">297 <svg viewBox="0 0 24 24">298 <circle cx="11" cy="11" r="6" stroke="#0f1f1f" stroke-width="2" fill="none"/>299 <path d="M16 16l5 5" stroke="#0f1f1f" stroke-width="2" fill="none" stroke-linecap="round"/>300 </svg>301 </div>302 </div>303 304 </div>305 </div>306 307 <!-- Gesture bar -->308 <div class="gesture-bar"></div>309 310</div>311</body>312</html>