GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0d0d0d;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%;22 height: 100px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #cfcfcf;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .sb-right {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .sb-dot, .sb-square {38 background: #cfcfcf;39 opacity: 0.9;40 }41 .sb-dot { width: 18px; height: 18px; border-radius: 50%; }42 .sb-square { width: 20px; height: 20px; border-radius: 4px; }43 44 /* Search header */45 .search-header {46 position: absolute;47 top: 110px; left: 0;48 width: 100%;49 height: 150px;50 display: flex;51 align-items: center;52 }53 .back-btn {54 width: 70px; height: 70px;55 margin-left: 24px;56 }57 .search-pill {58 height: 120px;59 width: 920px;60 margin-left: 24px;61 border-radius: 60px;62 background: #1c1c1c;63 border: 1px solid #2a2a2a;64 display: flex;65 align-items: center;66 padding: 0 34px;67 box-sizing: border-box;68 }69 .search-text {70 flex: 1;71 color: #e7e7e7;72 font-size: 40px;73 white-space: nowrap;74 overflow: hidden;75 text-overflow: ellipsis;76 }77 .icon-btn {78 width: 54px; height: 54px;79 }80 .results-area {81 position: absolute;82 top: 260px; left: 0;83 width: 100%;84 bottom: 1000px;85 }86 87 /* Floating voice circle inside content */88 .voice-fab {89 position: absolute;90 right: 60px;91 bottom: 1080px;92 width: 150px; height: 150px;93 background: #111;94 border-radius: 75px;95 border: 1px solid #2b2b2b;96 display: flex; align-items: center; justify-content: center;97 }98 99 /* Keyboard */100 .keyboard {101 position: absolute;102 left: 0; bottom: 0;103 width: 100%;104 height: 980px;105 background: #111213;106 border-top: 1px solid #222;107 box-sizing: border-box;108 }109 110 /* Suggestion bar */111 .suggestions {112 height: 120px;113 display: flex;114 align-items: center;115 padding: 0 28px;116 gap: 22px;117 box-sizing: border-box;118 color: #ddd;119 }120 .grid-icon {121 width: 70px; height: 70px;122 border-radius: 16px;123 background: #1f1f1f;124 border: 1px solid #2a2a2a;125 position: relative;126 }127 .grid-icon span {128 position: absolute;129 width: 20px; height: 20px; background: #bfbfbf; border-radius: 4px;130 }131 .grid-icon span:nth-child(1){top:12px; left:12px;}132 .grid-icon span:nth-child(2){top:12px; right:12px;}133 .grid-icon span:nth-child(3){bottom:12px; left:12px;}134 .grid-icon span:nth-child(4){bottom:12px; right:12px;}135 136 .chip {137 padding: 18px 28px;138 background: #1f1f1f;139 border: 1px solid #2b2b2b;140 border-radius: 34px;141 font-size: 38px;142 color: #f2f2f2;143 }144 .emoji-chip {145 width: 72px; height: 72px;146 border-radius: 36px;147 background: #1f1f1f;148 border: 1px solid #2b2b2b;149 display: flex; align-items: center; justify-content: center;150 font-size: 46px;151 }152 .suggestions .spacer { flex: 1; }153 .suggestions .mic-mini {154 width: 54px; height: 54px;155 }156 157 /* Key rows */158 .key-row {159 display: flex;160 gap: 12px;161 padding: 16px 20px;162 box-sizing: border-box;163 }164 .key {165 flex: 0 0 92px;166 height: 120px;167 background: #2a2a2a;168 border: 1px solid #3a3a3a;169 border-radius: 26px;170 color: #e6e6e6;171 font-size: 44px;172 display: flex; align-items: center; justify-content: center;173 position: relative;174 }175 .key .num {176 position: absolute;177 top: 10px; left: 12px;178 font-size: 26px; color: #bdbdbd;179 }180 .key-wide { flex: 1 1 auto; }181 .key-medium { flex: 0 0 140px; }182 .key-large { flex: 0 0 220px; }183 .key-space { flex: 1 1 500px; height: 120px; }184 185 /* Bottom action row */186 .bottom-row {187 display: flex;188 gap: 16px;189 padding: 22px 20px 30px;190 box-sizing: border-box;191 align-items: center;192 }193 .search-fab {194 width: 140px; height: 140px;195 background: #bfe7ff;196 border-radius: 70px;197 display: flex; align-items: center; justify-content: center;198 }199 200 /* Gesture bar */201 .gesture-bar {202 position: absolute; bottom: 24px; left: 50%;203 transform: translateX(-50%);204 width: 370px; height: 10px; border-radius: 6px;205 background: #cfcfcf;206 opacity: 0.8;207 }208 209 /* Small helper */210 .muted { color: #9e9e9e; }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div>6:22</div>219 <div class="sb-right">220 <div class="sb-square"></div>221 <div class="sb-dot"></div>222 <div class="sb-dot"></div>223 <div class="sb-dot" style="width:14px;height:14px;"></div>224 <div class="sb-square" style="width:22px;height:22px;border-radius:6px;"></div>225 </div>226 </div>227 228 <!-- Search header -->229 <div class="search-header">230 <svg class="back-btn" viewBox="0 0 24 24">231 <path d="M15 18l-6-6 6-6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>232 </svg>233 <div class="search-pill">234 <div class="search-text">song by Luciano Pavarotti & James Brown</div>235 <svg class="icon-btn" viewBox="0 0 24 24">236 <path d="M6 6l12 12M18 6L6 18" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>237 </svg>238 </div>239 </div>240 241 <!-- Results area (empty dark screen) -->242 <div class="results-area"></div>243 244 <!-- Floating voice button inside content -->245 <div class="voice-fab">246 <svg width="72" height="72" viewBox="0 0 24 24">247 <path d="M12 3a3 3 0 013 3v6a3 3 0 01-6 0V6a3 3 0 013-3zm0 12v4m-5-7a5 5 0 0010 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>248 </svg>249 </div>250 251 <!-- Keyboard -->252 <div class="keyboard">253 254 <!-- Suggestions row -->255 <div class="suggestions">256 <div class="grid-icon">257 <span></span><span></span><span></span><span></span>258 </div>259 <div class="chip">Brown</div>260 <div class="chip">Brownies</div>261 <div class="emoji-chip">🍑</div>262 <div class="emoji-chip">❤️</div>263 <div class="spacer"></div>264 <svg class="mic-mini" viewBox="0 0 24 24">265 <path d="M12 3a3 3 0 013 3v6a3 3 0 01-6 0V6a3 3 0 013-3zm0 12v4m-5-7a5 5 0 0010 0" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>266 </svg>267 </div>268 269 <!-- Row 1 -->270 <div class="key-row">271 <div class="key"><span class="num">1</span>q</div>272 <div class="key"><span class="num">2</span>w</div>273 <div class="key"><span class="num">3</span>e</div>274 <div class="key"><span class="num">4</span>r</div>275 <div class="key"><span class="num">5</span>t</div>276 <div class="key"><span class="num">6</span>y</div>277 <div class="key"><span class="num">7</span>u</div>278 <div class="key"><span class="num">8</span>i</div>279 <div class="key"><span class="num">9</span>o</div>280 <div class="key"><span class="num">0</span>p</div>281 </div>282 283 <!-- Row 2 -->284 <div class="key-row">285 <div class="key">a</div>286 <div class="key">s</div>287 <div class="key">d</div>288 <div class="key">f</div>289 <div class="key">g</div>290 <div class="key">h</div>291 <div class="key">j</div>292 <div class="key">k</div>293 <div class="key">l</div>294 </div>295 296 <!-- Row 3 -->297 <div class="key-row">298 <div class="key-medium">⇧</div>299 <div class="key">z</div>300 <div class="key">x</div>301 <div class="key">c</div>302 <div class="key">v</div>303 <div class="key">b</div>304 <div class="key">n</div>305 <div class="key">m</div>306 <div class="key-medium">307 <svg width="48" height="48" viewBox="0 0 24 24">308 <path d="M20 12l-3 3m3-3l-3-3M4 12h13" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>309 </svg>310 </div>311 </div>312 313 <!-- Bottom actions -->314 <div class="bottom-row">315 <div class="key-large">?123</div>316 <div class="key-medium">,</div>317 <div class="key-medium">😊</div>318 <div class="key-space"></div>319 <div class="key-medium">.</div>320 <div class="search-fab">321 <svg width="72" height="72" viewBox="0 0 24 24">322 <circle cx="10" cy="10" r="6" fill="none" stroke="#0b3a61" stroke-width="0"></circle>323 <path d="M10 16a6 6 0 100-12 6 6 0 000 12zm7 3l-4-4" stroke="#073a5f" stroke-width="0"></path>324 <path d="M10 16a6 6 0 100-12 6 6 0 000 12zm7 3l-4-4" stroke="#083b61" stroke-width="0"></path>325 <path d="M10 16a6 6 0 100-12 6 6 0 000 12zm7 3l-4-4" stroke="#083b61" stroke-width="0"></path>326 <path d="M10 16a6 6 0 100-12 6 6 0 000 12" fill="none" stroke="#094b7d" stroke-width="2"></path>327 <path d="M17 17l4 4" stroke="#094b7d" stroke-width="2" stroke-linecap="round"></path>328 </svg>329 </div>330 </div>331 332 <div class="gesture-bar"></div>333 </div>334 335</div>336</body>337</html>