GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121015;13 font-family: Arial, Helvetica, sans-serif;14 color: #FFFFFF;15 }16 17 /* Status bar */18 .statusbar {19 position: relative;20 height: 100px;21 background: #16141A;22 display: flex;23 align-items: center;24 padding: 0 28px;25 font-weight: 600;26 letter-spacing: 0.5px;27 }28 .statusbar .time { font-size: 40px; color: #EDEDED; }29 .statusbar .icons {30 margin-left: auto;31 display: flex;32 gap: 22px;33 align-items: center;34 }35 .icon {36 width: 40px; height: 40px;37 }38 .icon svg { width: 100%; height: 100%; fill: none; stroke: #EDEDED; stroke-width: 3; }39 40 /* App bar */41 .appbar {42 height: 160px;43 background: #2A2330;44 border-bottom: 1px solid #382F40;45 display: flex;46 align-items: center;47 padding: 0 28px;48 gap: 20px;49 }50 .back-btn {51 width: 72px; height: 72px;52 display: flex; align-items: center; justify-content: center;53 }54 .back-btn svg { width: 40px; height: 40px; stroke: #FFFFFF; stroke-width: 5; fill: none; }55 .title {56 font-size: 52px;57 color: #F6F6F6;58 font-weight: 600;59 }60 61 /* Filter chips */62 .chips {63 padding: 20px 28px;64 display: flex;65 gap: 22px;66 flex-wrap: nowrap;67 }68 .chip {69 display: inline-flex;70 align-items: center;71 gap: 16px;72 padding: 18px 28px;73 border: 2px solid #3D3547;74 background: #1D1A22;75 border-radius: 40px;76 color: #E6E6E6;77 font-size: 36px;78 white-space: nowrap;79 }80 .chip .mini-icon {81 width: 48px; height: 48px; border-radius: 10px;82 display: flex; align-items: center; justify-content: center;83 color: #111; font-weight: 700; font-size: 24px;84 }85 .mini-blue { background: #365DF8; }86 .mini-red { background: #D54E4E; }87 .mini-pink { background: #D87CA4; }88 .mini-yellow { background: #D1A33B; }89 90 /* Blank content area */91 .content {92 height: 1180px;93 background: #15131A;94 }95 96 /* Keyboard */97 .keyboard {98 position: absolute;99 bottom: 0; left: 0; right: 0;100 height: 980px;101 background: #1B191F;102 border-top: 1px solid #2B2831;103 }104 .kb-top {105 padding: 22px 40px 0 40px;106 display: flex;107 align-items: center;108 gap: 42px;109 }110 .kb-circle {111 width: 80px; height: 80px;112 border-radius: 40px;113 background: #26232A;114 border: 2px solid #38343E;115 display: flex; align-items: center; justify-content: center;116 color: #EDEDED; font-size: 28px; font-weight: 700;117 }118 .kb-circle svg { width: 44px; height: 44px; stroke: #EDEDED; stroke-width: 3; fill: none; }119 120 .row { padding: 12px 40px; display: flex; gap: 14px; }121 .row.center-pad { padding-left: 90px; }122 .row.large-pad { padding-left: 140px; }123 124 .key {125 width: 92px; height: 112px;126 border-radius: 22px;127 background: #2A2830;128 border: 2px solid #3A3542;129 display: flex; align-items: center; justify-content: center;130 font-size: 56px; color: #F2F2F2; font-weight: 500;131 }132 .key.small { width: 110px; }133 .key.med { width: 140px; }134 .key.wide { width: 520px; }135 .key.tall { height: 112px; }136 .key.dark { background: #242229; }137 138 .key .label { font-size: 40px; font-weight: 600; }139 .key svg { width: 48px; height: 48px; stroke: #EDEDED; stroke-width: 3; fill: none; }140 141 .search-fab {142 width: 116px; height: 116px;143 border-radius: 58px;144 background: #E6C8FF;145 display: flex; align-items: center; justify-content: center;146 margin-left: auto;147 box-shadow: 0 6px 18px rgba(0,0,0,0.35);148 }149 .search-fab svg { width: 56px; height: 56px; stroke: #3C2A4F; stroke-width: 5; fill: none; }150 151 .home-indicator {152 position: absolute;153 bottom: 18px; left: 50%;154 transform: translateX(-50%);155 width: 480px; height: 10px;156 background: #EDEDED;157 border-radius: 8px;158 opacity: 0.85;159 }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Status bar -->166 <div class="statusbar">167 <div class="time">8:55</div>168 <div class="icons">169 <!-- signal -->170 <div class="icon">171 <svg viewBox="0 0 24 24">172 <path d="M3 21h2M7 17h2M11 13h2M15 9h2M19 5h2"></path>173 </svg>174 </div>175 <!-- wifi -->176 <div class="icon">177 <svg viewBox="0 0 24 24">178 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z"></path>179 </svg>180 </div>181 <!-- battery -->182 <div class="icon">183 <svg viewBox="0 0 28 24">184 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#EDEDED"></rect>185 <rect x="4" y="7" width="14" height="10" fill="#EDEDED" stroke="none"></rect>186 <rect x="22" y="9" width="4" height="6" rx="1" ry="1" stroke="#EDEDED"></rect>187 </svg>188 </div>189 </div>190 </div>191 192 <!-- App bar -->193 <div class="appbar">194 <div class="back-btn">195 <svg viewBox="0 0 24 24">196 <path d="M15 4L7 12l8 8"></path>197 </svg>198 </div>199 <div class="title">Search in Drive</div>200 </div>201 202 <!-- Chips -->203 <div class="chips">204 <div class="chip">205 <div class="mini-icon mini-blue"></div>206 Documents207 </div>208 <div class="chip">209 <div class="mini-icon mini-red"></div>210 PDFs211 </div>212 <div class="chip">213 <div class="mini-icon mini-pink"></div>214 Photos & images215 </div>216 <div class="chip">217 <div class="mini-icon mini-yellow"></div>218 Folders219 </div>220 </div>221 222 <!-- Empty content area -->223 <div class="content"></div>224 225 <!-- Keyboard -->226 <div class="keyboard">227 <!-- top function icons row -->228 <div class="kb-top">229 <div class="kb-circle">230 <svg viewBox="0 0 24 24">231 <rect x="4" y="4" width="6" height="6"></rect>232 <rect x="14" y="4" width="6" height="6"></rect>233 <rect x="4" y="14" width="6" height="6"></rect>234 <rect x="14" y="14" width="6" height="6"></rect>235 </svg>236 </div>237 <div class="kb-circle">238 <svg viewBox="0 0 24 24">239 <circle cx="12" cy="10" r="6"></circle>240 <path d="M8 14c2 2 6 2 8 0"></path>241 <circle cx="10" cy="9" r="1.5"></circle>242 <circle cx="14" cy="9" r="1.5"></circle>243 </svg>244 </div>245 <div class="kb-circle">GIF</div>246 <div class="kb-circle">247 <svg viewBox="0 0 24 24">248 <circle cx="12" cy="12" r="6"></circle>249 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M19 5l-3 3M5 19l3-3M19 19l-3-3"></path>250 </svg>251 </div>252 <div class="kb-circle">G×</div>253 <div class="kb-circle">254 <svg viewBox="0 0 24 24">255 <path d="M12 3a7 7 0 0 0 0 18c3 0 6-3 6-6s-3-6-6-6z"></path>256 <circle cx="14" cy="10" r="1.2"></circle>257 <circle cx="10" cy="12" r="1.2"></circle>258 <circle cx="13" cy="14" r="1.2"></circle>259 </svg>260 </div>261 <div class="kb-circle" style="margin-left:auto;">262 <svg viewBox="0 0 24 24">263 <rect x="9" y="4" width="6" height="10" rx="3"></rect>264 <path d="M7 10v3a5 5 0 0 0 10 0v-3"></path>265 </svg>266 </div>267 </div>268 269 <!-- letter rows -->270 <div class="row" style="justify-content: space-between; padding-top: 12px;">271 <div class="key">q</div>272 <div class="key">w</div>273 <div class="key">e</div>274 <div class="key">r</div>275 <div class="key">t</div>276 <div class="key">y</div>277 <div class="key">u</div>278 <div class="key">i</div>279 <div class="key">o</div>280 <div class="key">p</div>281 </div>282 283 <div class="row center-pad">284 <div class="key">a</div>285 <div class="key">s</div>286 <div class="key">d</div>287 <div class="key">f</div>288 <div class="key">g</div>289 <div class="key">h</div>290 <div class="key">j</div>291 <div class="key">k</div>292 <div class="key">l</div>293 </div>294 295 <div class="row large-pad">296 <div class="key">z</div>297 <div class="key">x</div>298 <div class="key">c</div>299 <div class="key">v</div>300 <div class="key">b</div>301 <div class="key">n</div>302 <div class="key">m</div>303 <div class="key med">304 <svg viewBox="0 0 24 24">305 <path d="M4 12h14"></path>306 <path d="M12 6l6 6-6 6"></path>307 </svg>308 </div>309 </div>310 311 <div class="row" style="align-items:center; gap:16px; padding-left:28px; padding-right:28px;">312 <div class="key med"><span class="label">?123</span></div>313 <div class="key small"><span class="label">,</span></div>314 <div class="key small"><span class="label">☺</span></div>315 <div class="key wide"></div>316 <div class="key small"><span class="label">.</span></div>317 <div class="search-fab">318 <svg viewBox="0 0 24 24">319 <circle cx="10" cy="10" r="7"></circle>320 <path d="M15 15l6 6"></path>321 </svg>322 </div>323 </div>324 325 <div class="home-indicator"></div>326 </div>327 328</div>329</body>330</html>