GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 19 /* App bar */20 .appbar {21 width: 100%;22 height: 280px;23 background: #F6A740;24 padding: 18px 28px 0;25 box-sizing: border-box;26 }27 .status {28 height: 64px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #fff;33 font-size: 34px;34 letter-spacing: 0.5px;35 opacity: 0.95;36 }37 .status .icons {38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .dot {43 width: 8px; height: 8px; background: #fff; border-radius: 50%;44 opacity: 0.9;45 }46 .search-row {47 margin-top: 20px;48 display: flex;49 align-items: center;50 gap: 22px;51 color: #212121;52 }53 .search-title {54 font-size: 52px;55 line-height: 1.2;56 flex: 1;57 white-space: nowrap;58 overflow: hidden;59 text-overflow: ellipsis;60 }61 .chip-red {62 width: 24px; height: 24px; background: #E53935; border-radius: 50%;63 }64 .close-btn, .back-btn {65 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;66 }67 .icon-white { fill: #fff; }68 .grid-icon {69 width: 44px; height: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;70 }71 .grid-icon span { display: block; width: 100%; height: 100%; border-radius: 4px; }72 .grid-icon span:nth-child(1){ background:#36C3FF; }73 .grid-icon span:nth-child(2){ background:#4CAF50; }74 .grid-icon span:nth-child(3){ background:#FFC107; }75 .grid-icon span:nth-child(4){ background:#E53935; }76 .underline {77 margin-top: 14px;78 height: 3px;79 background: rgba(255,255,255,0.55);80 }81 82 /* Content */83 .content {84 padding: 24px 28px 0;85 }86 .section-title {87 font-size: 44px;88 font-weight: 700;89 margin: 14px 0 22px;90 }91 .note-card {92 width: 1024px;93 background: #FBE9E9;94 border-radius: 24px;95 display: flex;96 align-items: center;97 padding: 26px 30px;98 box-sizing: border-box;99 gap: 22px;100 }101 .note-stripe {102 width: 18px; height: 120px; background: #E53935; border-radius: 10px;103 }104 .note-icon {105 width: 72px; height: 72px; border: 2px solid #E53935; border-radius: 10px; position: relative;106 }107 .note-icon:before, .note-icon:after {108 content:""; position:absolute; left:10px; right:10px; height:4px; background:#E53935; border-radius:2px;109 }110 .note-icon:before { top: 20px; }111 .note-icon:after { top: 40px; }112 .note-text {113 flex: 1;114 font-size: 44px;115 font-weight: 700;116 color: #111;117 }118 .note-date {119 font-size: 36px;120 color: #777;121 }122 123 /* Floating Action Button */124 .fab {125 position: absolute;126 right: 48px;127 bottom: 980px; /* sits above ad/keyboard */128 width: 140px;129 height: 140px;130 background: #F6B142;131 border-radius: 50%;132 box-shadow: 0 10px 20px rgba(0,0,0,0.25);133 display: flex;134 align-items: center;135 justify-content: center;136 color: #fff;137 }138 .fab svg { width: 64px; height: 64px; }139 140 /* Ad banner placeholder */141 .ad-container {142 position: absolute;143 left: 0; right: 0;144 bottom: 900px;145 height: 180px;146 display: flex;147 align-items: center;148 justify-content: center;149 padding: 0 20px;150 box-sizing: border-box;151 }152 .ad-inner {153 width: 980px; height: 120px;154 background: #E0E0E0;155 border: 2px solid #BDBDBD;156 display: flex;157 align-items: center;158 justify-content: center;159 color: #555;160 font-size: 36px;161 font-weight: 600;162 text-transform: uppercase;163 }164 165 /* Keyboard mock */166 .keyboard {167 position: absolute;168 left: 0; bottom: 0;169 width: 1080px; height: 900px;170 background: #1F1F20;171 color: #ddd;172 box-sizing: border-box;173 padding: 14px 18px 20px;174 }175 .kb-suggestions {176 height: 110px;177 background: #2A2A2B;178 border-radius: 8px;179 display: flex;180 align-items: center;181 padding: 0 22px;182 font-size: 38px;183 gap: 26px;184 }185 .chip {186 color: #eaeaea;187 opacity: 0.9;188 }189 .kb-rows {190 margin-top: 18px;191 display: grid;192 grid-template-rows: repeat(4, 1fr);193 row-gap: 14px;194 height: calc(100% - 128px);195 }196 .kb-row { display: flex; justify-content: center; gap: 12px; }197 .key {198 background: #2E2E2F;199 border-radius: 14px;200 min-width: 84px;201 height: 120px;202 display: flex;203 align-items: center;204 justify-content: center;205 font-size: 44px;206 color: #F0F0F0;207 }208 .key.wide { min-width: 140px; }209 .key.exwide { min-width: 240px; }210 .space { min-width: 420px; }211 .home-indicator {212 position: absolute;213 bottom: 8px;214 left: 50%;215 transform: translateX(-50%);216 width: 220px;217 height: 8px;218 background: #C7C7C7;219 border-radius: 6px;220 opacity: 0.8;221 }222</style>223</head>224<body>225<div id="render-target">226 <!-- Orange app bar -->227 <div class="appbar">228 <div class="status">229 <div style="display:flex;align-items:center;gap:14px;">230 <span>5:26</span>231 <div class="icons" style="gap:10px;">232 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>233 <div class="dot"></div>234 </div>235 </div>236 <div class="icons">237 <!-- Wifi -->238 <svg width="34" height="34" viewBox="0 0 24 24" class="icon-white"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6-5a10 10 0 0 1 12 0l-1.4 1.4a8 8 0 0 0-9.2 0L6 13.5zm-3-4a16 16 0 0 1 18 0l-1.6 1.2a14 14 0 0 0-14.8 0L3 9.5z"/></svg>239 <!-- Battery -->240 <svg width="40" height="40" viewBox="0 0 24 24" class="icon-white"><path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h10zm0 2H6v6h10V9z"/></svg>241 </div>242 </div>243 <div class="search-row">244 <div class="back-btn">245 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-white"><path d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/></svg>246 </div>247 <div class="chip-red"></div>248 <div class="search-title">things to buy in the future</div>249 <div class="close-btn">250 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-white"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3 6.4-6.3z"/></svg>251 </div>252 <div class="grid-icon">253 <span></span><span></span><span></span><span></span>254 </div>255 </div>256 <div class="underline"></div>257 </div>258 259 <!-- Main content -->260 <div class="content">261 <div class="section-title">Other</div>262 <div class="note-card">263 <div class="note-stripe"></div>264 <div class="note-icon"></div>265 <div class="note-text">things to buy in the future</div>266 <div class="note-date">11/10/2023</div>267 </div>268 </div>269 270 <!-- Floating action button -->271 <div class="fab" aria-label="Add">272 <svg viewBox="0 0 24 24"><path class="icon-white" d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>273 </div>274 275 <!-- Ad banner placeholder -->276 <div class="ad-container">277 <div class="ad-inner">[IMG: Ad Banner]</div>278 </div>279 280 <!-- Keyboard mock -->281 <div class="keyboard">282 <div class="kb-suggestions">283 <span class="chip">future</span>284 <span class="chip">futures</span>285 <span class="chip">future'</span>286 <div style="margin-left:auto; display:flex; gap:18px; align-items:center;">287 <svg width="44" height="44" viewBox="0 0 24 24" style="fill:#ddd;"><path d="M12 3a9 9 0 0 0 0 18 9 9 0 0 0 0-18zm1 10.5V6h-2v9h6v-2h-4z"/></svg>288 <svg width="44" height="44" viewBox="0 0 24 24" style="fill:#ddd;"><path d="M12 17a4 4 0 0 0 4-4V8a4 4 0 0 0-8 0v5a4 4 0 0 0 4 4zm6-4v-1h2v1c0 4.1-3.1 7.5-7 7.9V22h-2v-1.1C7.1 20.5 4 17.1 4 13v-1h2v1c0 3.3 2.7 6 6 6s6-2.7 6-6z"/></svg>289 </div>290 </div>291 <div class="kb-rows">292 <div class="kb-row">293 <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>294 <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>295 </div>296 <div class="kb-row" style="padding:0 38px;">297 <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>298 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>299 </div>300 <div class="kb-row">301 <div class="key wide">shift</div>302 <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>303 <div class="key wide">⌫</div>304 </div>305 <div class="kb-row">306 <div class="key exwide">?123</div>307 <div class="key">,</div>308 <div class="key">☺</div>309 <div class="key space">space</div>310 <div class="key">.</div>311 <div class="key exwide">🔍</div>312 </div>313 </div>314 <div class="home-indicator"></div>315 </div>316</div>317</body>318</html>