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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #6b6529; /* olive/brown background */15 color: #fff;16 }17 18 /* Status bar */19 .statusbar {20 height: 90px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #fff;26 font-weight: 600;27 font-size: 40px;28 opacity: 0.95;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .status-icons svg { display: block; }36 37 /* Top action buttons */38 .top-controls {39 display: flex;40 align-items: center;41 justify-content: space-between;42 padding: 24px 32px;43 margin-top: 8px;44 }45 .ctrl {46 background: rgba(200,200,200,0.28);47 border-radius: 30px;48 height: 110px;49 width: 130px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .ctrl-wide {55 width: 190px;56 padding: 0 22px;57 justify-content: center;58 font-weight: 700;59 font-size: 44px;60 color: #fff;61 }62 .ctrl svg { pointer-events: none; }63 64 /* Ad banner */65 .ad-banner {66 margin: 10px 18px 0 18px;67 background: rgba(140, 135, 93, 0.9);68 border-radius: 12px;69 height: 130px;70 display: flex;71 align-items: center;72 padding: 16px 24px;73 position: relative;74 border: 1px solid rgba(255,255,255,0.08);75 }76 .ad-icon {77 width: 92px;78 height: 92px;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 border-radius: 12px;82 color: #757575;83 display: flex;84 align-items: center;85 justify-content: center;86 font-weight: 700;87 }88 .ad-text {89 margin: 0 24px;90 flex: 1;91 }92 .ad-title {93 font-size: 42px;94 font-weight: 800;95 line-height: 1.1;96 color: #fff;97 }98 .ad-sub {99 font-size: 34px;100 margin-top: 6px;101 color: #efefef;102 opacity: 0.9;103 }104 .ad-cta {105 background: #ff8a2a;106 color: #fff;107 padding: 22px 34px;108 border-radius: 60px;109 font-weight: 800;110 font-size: 38px;111 white-space: nowrap;112 }113 .ad-info {114 position: absolute;115 right: 10px;116 top: 8px;117 font-size: 28px;118 background: rgba(255,255,255,0.65);119 color: #3a3a3a;120 border-radius: 50%;121 width: 36px;122 height: 36px;123 display: flex;124 align-items: center;125 justify-content: center;126 font-weight: 700;127 }128 129 /* Content */130 .content {131 padding: 36px 48px;132 }133 .title {134 font-size: 120px;135 font-weight: 800;136 letter-spacing: 2px;137 margin: 36px 0 18px 0;138 color: #ffffff;139 }140 .placeholder {141 font-size: 54px;142 color: rgba(255,255,255,0.7);143 }144 145 /* Floating action button */146 .fab {147 position: absolute;148 right: 46px;149 bottom: 900px; /* sits above keyboard */150 width: 120px;151 height: 120px;152 background: #C5C5C5;153 color: #333;154 border-radius: 50%;155 box-shadow: 0 8px 18px rgba(0,0,0,0.3);156 display: flex;157 align-items: center;158 justify-content: center;159 }160 .fab svg { transform: scale(1.2); }161 162 /* Keyboard */163 .keyboard {164 position: absolute;165 left: 0;166 bottom: 0;167 width: 1080px;168 height: 820px;169 background: #141418;170 border-top-left-radius: 26px;171 border-top-right-radius: 26px;172 padding: 22px 20px 40px 20px;173 box-sizing: border-box;174 }175 .kb-row {176 display: grid;177 grid-template-columns: repeat(10, 1fr);178 gap: 12px;179 margin-bottom: 14px;180 }181 .key {182 height: 120px;183 background: #2b2b30;184 color: #e5e5e8;185 border-radius: 18px;186 display: flex;187 align-items: center;188 justify-content: center;189 font-size: 46px;190 font-weight: 600;191 }192 .key.small { font-size: 40px; }193 .key.dark { background: #242429; }194 .key.pill {195 background: #c9cde9;196 color: #18181b;197 font-weight: 800;198 }199 .kb-row.shift-row .key.shift { grid-column: span 2; }200 .kb-row.shift-row .key.back { grid-column: span 2; }201 .kb-row.bottom {202 grid-template-columns: 1.6fr 1fr 5fr 1fr 1.6fr;203 }204 .space { letter-spacing: 14px; }205 .gesture-bar {206 position: absolute;207 left: 50%;208 transform: translateX(-50%);209 bottom: 10px;210 width: 280px;211 height: 8px;212 border-radius: 8px;213 background: #f0f0f0;214 opacity: 0.85;215 }216</style>217</head>218<body>219<div id="render-target">220 <!-- Status bar -->221 <div class="statusbar">222 <div>8:52</div>223 <div class="status-icons">224 <!-- Warning icon (triangle) -->225 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">226 <path d="M12 3l9 16H3l9-16z" stroke="#fff" stroke-width="2" fill="none"/>227 <circle cx="12" cy="14" r="1.4" fill="#fff"/>228 <path d="M12 8v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>229 </svg>230 <!-- Cloud icon -->231 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">232 <path d="M6 18h11a4 4 0 0 0 0-8 6 6 0 0 0-11.3 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>233 </svg>234 <!-- WiFi -->235 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">236 <path d="M2 9c5.5-5 14.5-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>237 <path d="M5 12c4-3.6 10-3.6 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>238 <path d="M8 15c2.5-2.2 5.5-2.2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>239 <circle cx="12" cy="18" r="1.6" fill="#fff"/>240 </svg>241 <!-- Battery -->242 <svg width="54" height="40" viewBox="0 0 28 16" fill="none">243 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>244 <rect x="3" y="5" width="15" height="6" rx="1" fill="#fff"/>245 <rect x="23.5" y="6" width="3.5" height="4" rx="1" fill="#fff"/>246 </svg>247 </div>248 </div>249 250 <!-- Top action buttons -->251 <div class="top-controls">252 <div class="ctrl">253 <!-- Back arrow -->254 <svg width="56" height="56" viewBox="0 0 24 24">255 <path d="M14 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 </div>258 <div class="ctrl">259 <!-- Share icon -->260 <svg width="54" height="54" viewBox="0 0 24 24">261 <path d="M15 8l4-4m0 0v6m0-6h-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262 <rect x="4" y="10" width="12" height="10" rx="2" stroke="#fff" stroke-width="2" fill="none"/>263 </svg>264 </div>265 <div class="ctrl">266 <!-- Ellipsis -->267 <svg width="54" height="54" viewBox="0 0 24 24">268 <circle cx="6" cy="12" r="2" fill="#fff"/>269 <circle cx="12" cy="12" r="2" fill="#fff"/>270 <circle cx="18" cy="12" r="2" fill="#fff"/>271 </svg>272 </div>273 <div class="ctrl ctrl-wide">Done</div>274 </div>275 276 <!-- Ad banner -->277 <div class="ad-banner">278 <div class="ad-icon">AD</div>279 <div class="ad-text">280 <div class="ad-title">Sell Your Car in Just 1 Day</div>281 <div class="ad-sub">Get 100% payment before handing over…</div>282 </div>283 <div class="ad-cta">GET QUOTE</div>284 <div class="ad-info">i</div>285 </div>286 287 <!-- Main content -->288 <div class="content">289 <div class="title">DBW</div>290 <div class="placeholder">Type something…</div>291 </div>292 293 <!-- Floating action button -->294 <div class="fab">295 <svg width="44" height="44" viewBox="0 0 24 24">296 <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>297 </svg>298 </div>299 300 <!-- Keyboard mock -->301 <div class="keyboard">302 <div class="kb-row">303 <div class="key dark">1</div>304 <div class="key dark">2</div>305 <div class="key dark">3</div>306 <div class="key dark">4</div>307 <div class="key dark">5</div>308 <div class="key dark">6</div>309 <div class="key dark">7</div>310 <div class="key dark">8</div>311 <div class="key dark">9</div>312 <div class="key dark">0</div>313 </div>314 <div class="kb-row">315 <div class="key">q</div>316 <div class="key">w</div>317 <div class="key">e</div>318 <div class="key">r</div>319 <div class="key">t</div>320 <div class="key">y</div>321 <div class="key">u</div>322 <div class="key">i</div>323 <div class="key">o</div>324 <div class="key">p</div>325 </div>326 <div class="kb-row">327 <div class="key">a</div>328 <div class="key">s</div>329 <div class="key">d</div>330 <div class="key">f</div>331 <div class="key">g</div>332 <div class="key">h</div>333 <div class="key">j</div>334 <div class="key">k</div>335 <div class="key">l</div>336 <div class="key">;</div>337 </div>338 <div class="kb-row shift-row">339 <div class="key shift small">⇧</div>340 <div class="key">z</div>341 <div class="key">x</div>342 <div class="key">c</div>343 <div class="key">v</div>344 <div class="key">b</div>345 <div class="key">n</div>346 <div class="key">m</div>347 <div class="key">.</div>348 <div class="key back small">⌫</div>349 </div>350 <div class="kb-row bottom">351 <div class="key dark small">?123</div>352 <div class="key dark">,</div>353 <div class="key space"> </div>354 <div class="key dark">.</div>355 <div class="key pill small">⏎</div>356 </div>357 <div class="gesture-bar"></div>358 </div>359</div>360</body>361</html>