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>Search with Suggestions</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #0f0f10;21 color: #fff;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 36px;26 box-sizing: border-box;27 }28 .status-time { font-size: 40px; letter-spacing: 1px; }29 .status-icons { display: flex; align-items: center; gap: 22px; }30 .dot { width: 14px; height: 14px; background: #cfcfcf; border-radius: 50%; opacity: 0.9; }31 .icon-wifi, .icon-battery {32 width: 44px; height: 24px;33 border: 2px solid #cfcfcf; border-radius: 6px; position: relative;34 }35 .icon-wifi:before { content:""; position:absolute; inset: 3px 6px; border-top: 3px solid #cfcfcf; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 50%; }36 .icon-battery:after { content:""; position:absolute; right:-8px; top:6px; width:8px; height:12px; background:#cfcfcf; border-radius:2px; }37 38 /* Search header */39 .search-header {40 position: relative;41 background: #ffffff;42 padding: 24px 32px;43 box-sizing: border-box;44 border-bottom: 1px solid #e6e6e6;45 }46 .search-row {47 display: flex; align-items: center; gap: 24px;48 }49 .btn-icon {50 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;51 }52 .search-input {53 flex: 1;54 font-size: 46px;55 line-height: 64px;56 color: #111;57 }58 .search-input .query { color: #111; }59 .floating-clear {60 position: absolute;61 right: 28px;62 top: 22px;63 width: 76px; height: 76px;64 background: #2ca4ff;65 border-radius: 14px;66 display: flex; align-items: center; justify-content: center;67 }68 .divider { height:1px; background:#e8e8e8; }69 70 /* Suggestion list */71 .list {72 padding: 8px 0 0 0;73 }74 .item {75 display: flex;76 gap: 28px;77 padding: 32px 36px;78 box-sizing: border-box;79 align-items: center;80 }81 .item + .item { border-top: 1px solid #eeeeee; }82 .item .icon-addr {83 width: 54px; height: 54px; border-radius: 8px;84 background: #1f2937; display:flex; align-items:center; justify-content:center;85 }86 .item .texts { line-height: 1.2; }87 .title { font-size: 42px; color: #1b1b1b; }88 .title .accent { color: #1e88e5; font-weight: 600; }89 .subtitle { font-size: 32px; color: #8a8a8a; margin-top: 8px; }90 .section-row {91 display: flex; align-items: center; justify-content: space-between;92 padding: 22px 36px; box-sizing: border-box; color: #6b7280; font-size: 34px;93 border-top: 1px solid #eeeeee;94 }95 .section-row .action { color: #1e88e5; font-weight: 600; }96 97 /* Keyboard (mock) */98 .keyboard {99 position: absolute;100 left: 0; right: 0; bottom: 0;101 height: 820px;102 background: #eef1e8;103 border-top: 1px solid #d8ddcf;104 box-sizing: border-box;105 padding: 14px 18px 34px;106 }107 .kb-suggestions {108 height: 92px;109 background: #eef1e8;110 display: flex; align-items: center; justify-content: space-between;111 padding: 0 10px 0 8px;112 }113 .kb-suggestions .chip {114 display:flex; align-items:center; gap:16px; color:#1f2937; font-size:40px;115 }116 .kb-rows { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; margin-top: 6px; }117 .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }118 .key {119 background: #ffffff; border: 1px solid #e5e7eb; border-radius: 18px;120 height: 120px; display:flex; align-items:center; justify-content:center;121 font-size: 42px; color:#1f2937;122 }123 .key.mod { background: #d9e8d4; }124 .space { grid-column: span 5; }125 .enter { background: #bfe3c0; font-weight: 700; }126 .gesture-bar {127 position: absolute; bottom: 8px; left: 50%;128 transform: translateX(-50%); width: 320px; height: 10px;129 background: #3a3a3a; border-radius: 8px; opacity: 0.6;130 }131 132 /* Utility SVG styles */133 svg { display: block; }134</style>135</head>136<body>137<div id="render-target">138 <!-- Status bar -->139 <div class="status-bar">140 <div class="status-time">5:59</div>141 <div class="status-icons">142 <div class="dot"></div>143 <div class="dot"></div>144 <div class="icon-wifi"></div>145 <div class="icon-battery"></div>146 </div>147 </div>148 149 <!-- Search header -->150 <div class="search-header">151 <div class="search-row">152 <div class="btn-icon">153 <svg width="42" height="42" viewBox="0 0 24 24" stroke="#1f2937" stroke-width="2.5" fill="none" stroke-linecap="round">154 <path d="M4 4 L20 20"></path>155 <path d="M20 4 L4 20"></path>156 </svg>157 </div>158 <div class="search-input">159 <span class="query">Honolulu</span>160 </div>161 </div>162 <div class="floating-clear">163 <svg width="34" height="34" viewBox="0 0 24 24" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round">164 <path d="M5 5 L19 19"></path>165 <path d="M19 5 L5 19"></path>166 </svg>167 </div>168 </div>169 170 <!-- Suggestions list -->171 <div class="list">172 <div class="item">173 <div class="icon-addr">174 <svg width="32" height="32" viewBox="0 0 24 24" fill="#ffffff">175 <rect x="5" y="4" width="14" height="16" rx="2"></rect>176 <rect x="8" y="7" width="3" height="3" fill="#0f172a"></rect>177 <rect x="13" y="7" width="3" height="3" fill="#0f172a"></rect>178 <rect x="8" y="12" width="3" height="3" fill="#0f172a"></rect>179 <rect x="13" y="12" width="3" height="3" fill="#0f172a"></rect>180 </svg>181 </div>182 <div class="texts">183 <div class="title"><span class="accent">Honolulu</span>, Hawaii, United States</div>184 <div class="subtitle">United States</div>185 </div>186 </div>187 188 <div class="section-row">189 <div>Recent locations</div>190 <div class="action">Clear</div>191 </div>192 193 <div class="item">194 <div class="icon-addr">195 <svg width="32" height="32" viewBox="0 0 24 24" fill="#ffffff">196 <rect x="5" y="4" width="14" height="16" rx="2"></rect>197 <rect x="8" y="7" width="3" height="3" fill="#0f172a"></rect>198 <rect x="13" y="7" width="3" height="3" fill="#0f172a"></rect>199 <rect x="8" y="12" width="3" height="3" fill="#0f172a"></rect>200 <rect x="13" y="12" width="3" height="3" fill="#0f172a"></rect>201 </svg>202 </div>203 <div class="texts">204 <div class="title">Seattle, Washington, United States</div>205 <div class="subtitle">United States</div>206 </div>207 </div>208 </div>209 210 <!-- Keyboard mock -->211 <div class="keyboard">212 <div class="kb-suggestions">213 <div class="chip">214 <svg width="46" height="46" viewBox="0 0 24 24" fill="#4b5563">215 <circle cx="12" cy="12" r="10" fill="#a7c7a0"></circle>216 <rect x="6" y="6" width="12" height="12" rx="2" fill="#eef1e8"></rect>217 </svg>218 <span>Honolulu</span>219 </div>220 <svg width="44" height="44" viewBox="0 0 24 24" fill="#4b5563">221 <path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 1 0 6 0V6a3 3 0 0 0-3-3z"></path>222 <path d="M7 19c3 2 7 2 10 0" stroke="#4b5563" stroke-width="2" fill="none" stroke-linecap="round"></path>223 </svg>224 </div>225 226 <div class="kb-rows">227 <div class="row">228 <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><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>229 </div>230 <div class="row">231 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>232 </div>233 <div class="row">234 <div class="key mod">235 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round">236 <path d="M12 5 L6 12 H10 V19 H14 V12 H18 Z"></path>237 </svg>238 </div>239 <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>240 <div class="key mod">241 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round">242 <path d="M20 12 H6"></path>243 <path d="M10 8 L6 12 L10 16"></path>244 <rect x="3" y="7" width="3" height="10"></rect>245 </svg>246 </div>247 </div>248 </div>249 250 <div class="row" style="margin-top:18px;">251 <div class="key mod">?123</div>252 <div class="key mod">,</div>253 <div class="key mod">254 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round">255 <circle cx="9" cy="15" r="2.5"></circle>256 <path d="M12 6 L6 6 M18 6 L12 6"></path>257 </svg>258 </div>259 <div class="key space"></div>260 <div class="key">.</div>261 <div class="key enter">262 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round">263 <path d="M4 12 H14"></path>264 <path d="M10 8 L14 12 L10 16"></path>265 </svg>266 </div>267 </div>268 269 <div class="gesture-bar"></div>270 </div>271</div>272</body>273</html>