GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Top dark area */19 .top-dark { position: absolute; top: 0; left: 0; width: 100%; height: 270px; background: #2E2E2E; }20 .status-bar {21 height: 105px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 30px;26 color: #EDEDED;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-right { display: flex; align-items: center; gap: 26px; }31 .status-icon { width: 40px; height: 40px; opacity: 0.9; }32 .battery {33 width: 64px; height: 34px; border: 3px solid #EDEDED; border-radius: 7px; position: relative;34 }35 .battery::after {36 content: ""; position: absolute; right: -10px; top: 9px; width: 7px; height: 16px; background: #EDEDED; border-radius: 2px;37 }38 .battery .lvl { position: absolute; left: 5px; top: 5px; width: 40px; height: 20px; background: #EDEDED; border-radius: 4px; }39 40 /* Search bar */41 .search-wrap { padding: 0 30px; }42 .search-bar {43 height: 120px;44 background: #FFFFFF;45 border-radius: 16px;46 margin-top: 10px;47 display: flex;48 align-items: center;49 padding: 0 24px;50 }51 .back-icon { width: 60px; height: 60px; margin-right: 18px; }52 .search-field {53 flex: 1;54 height: 80px;55 border-radius: 12px;56 }57 58 /* Suggestion row */59 .suggestion {60 position: absolute;61 top: 290px;62 left: 30px;63 right: 30px;64 height: 90px;65 display: flex;66 align-items: center;67 gap: 22px;68 color: #424242;69 }70 .clock-icon { width: 40px; height: 40px; }71 .suggestion-text { font-size: 40px; }72 .suggestion-text .bold { font-weight: 700; }73 74 /* Keyboard */75 .keyboard {76 position: absolute;77 bottom: 0;78 left: 0;79 width: 100%;80 height: 880px;81 background: #F1F2F4;82 border-top: 1px solid #DADADA;83 }84 .kb-toolbar {85 height: 100px;86 display: flex;87 align-items: center;88 gap: 30px;89 padding: 0 36px;90 color: #6F6F6F;91 font-size: 34px;92 }93 .kb-tool {94 display: flex; align-items: center; justify-content: center;95 width: 78px; height: 78px; background: #FFFFFF; border: 1px solid #DADADA; border-radius: 16px;96 }97 .kb-tool.text { width: auto; padding: 0 22px; border-radius: 16px; font-weight: 700; }98 99 .kb-row { display: flex; gap: 16px; padding: 0 24px; margin-top: 18px; }100 .kb-row.center { padding: 0 78px; } /* for middle rows */101 .key {102 height: 120px;103 background: #FFFFFF;104 border: 1px solid #DADADA;105 border-radius: 18px;106 display: flex; align-items: center; justify-content: center;107 font-size: 42px;108 color: #2E2E2E;109 }110 /* Sizes per row */111 .w88 { width: 88px; } /* first row 10 keys */112 .w92 { width: 92px; } /* second row 9 keys */113 .w96 { width: 96px; } /* third row 9 keys incl shift/backspace */114 .key.shift { background: #E8E8E8; color: #555; }115 .key.backspace { background: #E8E8E8; color: #555; }116 117 /* Bottom row sizes */118 .bottom-row { display: flex; align-items: center; gap: 16px; padding: 0 24px; margin-top: 18px; }119 .key.small { width: 140px; }120 .key.medium { width: 180px; }121 .spacebar { flex: 1; height: 120px; background: #FFFFFF; border: 1px solid #DADADA; border-radius: 18px; }122 .search-btn {123 width: 140px; height: 120px; display: flex; align-items: center; justify-content: center;124 }125 .search-circle {126 width: 98px; height: 98px; background: #1E88E5; border-radius: 50%;127 display: flex; align-items: center; justify-content: center;128 }129 .gesture-bar {130 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);131 width: 340px; height: 10px; background: #C9C9C9; border-radius: 6px;132 }133 134 /* SVG helper colors */135 .icon-light { fill: #FFFFFF; }136 .icon-dark { fill: #4A4A4A; }137 .icon-grey { fill: #777777; }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Top dark header with status bar and search field -->144 <div class="top-dark">145 <div class="status-bar">146 <div>12:58</div>147 <div class="status-right">148 <!-- simple status icons -->149 <svg class="status-icon" viewBox="0 0 24 24">150 <circle cx="12" cy="12" r="10" class="icon-light" opacity="0.7"/>151 </svg>152 <svg class="status-icon" viewBox="0 0 24 24">153 <rect x="4" y="8" width="16" height="8" class="icon-light" opacity="0.7"/>154 </svg>155 <div class="battery"><div class="lvl"></div></div>156 </div>157 </div>158 159 <div class="search-wrap">160 <div class="search-bar">161 <div class="back-icon">162 <svg viewBox="0 0 24 24">163 <path d="M15 4 L7 12 L15 20" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>164 </svg>165 </div>166 <div class="search-field"></div>167 </div>168 </div>169 </div>170 171 <!-- Suggestion row -->172 <div class="suggestion">173 <div class="clock-icon">174 <svg viewBox="0 0 24 24">175 <circle cx="12" cy="12" r="9" class="icon-grey"/>176 <path d="M12 6 L12 12 L16 14" stroke="#FFFFFF" stroke-width="2.2" fill="none" stroke-linecap="round"/>177 </svg>178 </div>179 <div class="suggestion-text">180 <span class="bold">apple macbook</span> <span>laptop</span>181 </div>182 </div>183 184 <!-- Large white content area (empty search results) -->185 <!-- Intentionally left blank to match screenshot -->186 187 <!-- Keyboard -->188 <div class="keyboard">189 <div class="kb-toolbar">190 <div class="kb-tool">191 <svg viewBox="0 0 24 24" width="34" height="34">192 <rect x="3" y="3" width="6" height="6" class="icon-dark"/>193 <rect x="15" y="3" width="6" height="6" class="icon-dark"/>194 <rect x="3" y="15" width="6" height="6" class="icon-dark"/>195 <rect x="15" y="15" width="6" height="6" class="icon-dark"/>196 </svg>197 </div>198 <div class="kb-tool">199 <svg viewBox="0 0 24 24" width="36" height="36">200 <circle cx="12" cy="9" r="4.5" class="icon-dark"/>201 <path d="M4 20 C7 15, 17 15, 20 20" stroke="#4A4A4A" stroke-width="2" fill="none"/>202 </svg>203 </div>204 <div class="kb-tool text">GIF</div>205 <div class="kb-tool">206 <svg viewBox="0 0 24 24" width="34" height="34">207 <circle cx="12" cy="12" r="10" class="icon-dark"/>208 <path d="M12 6 L12 12" stroke="#FFFFFF" stroke-width="2" />209 </svg>210 </div>211 <div class="kb-tool">212 <svg viewBox="0 0 24 24" width="34" height="34">213 <text x="6" y="17" font-size="14" fill="#4A4A4A">G</text>214 </svg>215 </div>216 <div class="kb-tool">217 <svg viewBox="0 0 24 24" width="34" height="34">218 <circle cx="8" cy="10" r="5" fill="#FFB300"/>219 <circle cx="15" cy="16" r="4" fill="#43A047"/>220 </svg>221 </div>222 <div class="kb-tool">223 <svg viewBox="0 0 24 24" width="34" height="34">224 <path d="M5 4 L19 8 L19 16 L5 20 Z" class="icon-dark"/>225 </svg>226 </div>227 </div>228 229 <!-- Row 1: QWERTY -->230 <div class="kb-row">231 <div class="key w88">q</div>232 <div class="key w88">w</div>233 <div class="key w88">e</div>234 <div class="key w88">r</div>235 <div class="key w88">t</div>236 <div class="key w88">y</div>237 <div class="key w88">u</div>238 <div class="key w88">i</div>239 <div class="key w88">o</div>240 <div class="key w88">p</div>241 </div>242 243 <!-- Row 2: ASDF -->244 <div class="kb-row center">245 <div class="key w92">a</div>246 <div class="key w92">s</div>247 <div class="key w92">d</div>248 <div class="key w92">f</div>249 <div class="key w92">g</div>250 <div class="key w92">h</div>251 <div class="key w92">j</div>252 <div class="key w92">k</div>253 <div class="key w92">l</div>254 </div>255 256 <!-- Row 3: Shift + ZXCV -->257 <div class="kb-row">258 <div class="key w96 shift">259 <svg viewBox="0 0 24 24" width="40" height="40">260 <path d="M12 4 L20 12 H15 V20 H9 V12 H4 Z" class="icon-dark"/>261 </svg>262 </div>263 <div class="key w96">z</div>264 <div class="key w96">x</div>265 <div class="key w96">c</div>266 <div class="key w96">v</div>267 <div class="key w96">b</div>268 <div class="key w96">n</div>269 <div class="key w96">m</div>270 <div class="key w96 backspace">271 <svg viewBox="0 0 24 24" width="46" height="46">272 <path d="M3 12 L9 5 H21 V19 H9 Z" class="icon-dark"/>273 <path d="M12 9 L16 13 M16 9 L12 13" stroke="#FFFFFF" stroke-width="2"/>274 </svg>275 </div>276 </div>277 278 <!-- Row 4: bottom controls -->279 <div class="bottom-row">280 <div class="key small">?123</div>281 <div class="key medium">,</div>282 <div class="key medium">283 <svg viewBox="0 0 24 24" width="36" height="36">284 <circle cx="12" cy="12" r="4.5" class="icon-dark"/>285 <path d="M4 20 C7 15, 17 15, 20 20" stroke="#4A4A4A" stroke-width="2" fill="none"/>286 </svg>287 </div>288 <div class="spacebar"></div>289 <div class="key medium">.</div>290 <div class="search-btn">291 <div class="search-circle">292 <svg viewBox="0 0 24 24" width="32" height="32">293 <circle cx="10" cy="10" r="6" fill="#FFFFFF"/>294 <rect x="15" y="15" width="6" height="2.2" transform="rotate(45 15 15)" fill="#FFFFFF"/>295 </svg>296 </div>297 </div>298 </div>299 300 <div class="gesture-bar"></div>301 </div>302 303</div>304</body>305</html>