GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search List with Keyboard</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 0;12 }13 14 /* Status bar */15 .status-bar {16 height: 100px; display: flex; align-items: center; justify-content: space-between;17 padding: 0 36px; color: #222; font-weight: 600; font-size: 40px;18 }19 .status-icons { display: flex; align-items: center; gap: 26px; }20 .status-icons svg { width: 36px; height: 36px; fill: none; stroke: #444; stroke-width: 3; }21 22 /* Search bar */23 .search-wrap { padding: 18px 24px 8px 24px; }24 .search-bar {25 height: 120px; border-radius: 60px; background: #F7F7F7; border: 1px solid #E0E0E0;26 display: flex; align-items: center; padding: 0 28px; gap: 26px;27 }28 .search-bar .back { width: 50px; height: 50px; }29 .search-input {30 flex: 1; font-size: 46px; color: #333; font-weight: 500;31 }32 .search-bar .clear {33 width: 60px; height: 60px; background: #EAEAEA; border-radius: 30px; display: flex; align-items: center; justify-content: center;34 }35 .search-bar .clear svg { width: 30px; height: 30px; stroke: #666; stroke-width: 5; }36 37 /* List */38 .list { padding: 18px 0 0 0; }39 .list-item {40 display: flex; align-items: center; padding: 34px 36px; gap: 30px;41 }42 .list-sep { height: 2px; background: #E4E4E4; margin: 0 36px; }43 .pin {44 width: 70px; height: 70px; border-radius: 35px; background: #F1F1F1; border: 1px solid #D0D0D0; display: flex; align-items: center; justify-content: center;45 }46 .pin svg { width: 38px; height: 38px; fill: none; stroke: #777; stroke-width: 4; }47 .item-text { flex: 1; }48 .item-title { font-size: 48px; color: #222; font-weight: 700; line-height: 1.15; }49 .item-sub { font-size: 34px; color: #777; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }50 .item-arrow svg { width: 40px; height: 40px; stroke: #333; stroke-width: 4; fill: none; }51 52 /* Keyboard */53 .keyboard {54 position: absolute; left: 0; bottom: 0; width: 100%; height: 980px;55 background: #F1F3EB; border-top: 1px solid #DADADA;56 }57 .kb-suggestions {58 height: 140px; display: flex; align-items: center; gap: 20px; padding: 0 26px;59 background: #F6F7F2;60 }61 .kb-chip {62 padding: 18px 24px; border-radius: 26px; background: #FFFFFF; border: 1px solid #E2E2E2; color: #333; font-size: 36px;63 }64 .kb-lead {65 width: 88px; height: 88px; border-radius: 18px; background: #CFE4C2; display: flex; align-items: center; justify-content: center; border: 1px solid #BFD8B3;66 }67 .kb-lead svg { width: 48px; height: 48px; fill: none; stroke: #4A7A4A; stroke-width: 3; }68 .kb-mic {69 margin-left: auto; width: 88px; height: 88px; border-radius: 44px; background: #CFE4C2; display: flex; align-items: center; justify-content: center; border: 1px solid #BFD8B3;70 }71 .kb-mic svg { width: 40px; height: 40px; fill: none; stroke: #4A7A4A; stroke-width: 4; }72 73 .kb-rows { padding: 10px 26px 26px 26px; display: flex; flex-direction: column; gap: 22px; }74 .kb-row { display: flex; gap: 18px; }75 .key {76 background: #FFFFFF; border: 1px solid #E6E6E6; border-radius: 22px; height: 150px; flex: 1;77 display: flex; align-items: center; justify-content: center; font-size: 48px; color: #222; font-weight: 500;78 }79 .key.small { flex: 0 0 92px; }80 .key.wide { flex: 2; }81 .key.accent { background: #DCE9D3; border-color: #C9D8C3; color: #345E34; }82 .key.search { background: #BFE2BE; border-color: #ACD3AB; color: #1F4E1F; }83 .key svg { width: 54px; height: 54px; stroke: #1F4E1F; stroke-width: 4; fill: none; }84 85 /* Gesture bar */86 .gesture {87 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);88 width: 300px; height: 12px; background: #BDBDBD; border-radius: 6px;89 }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Status bar -->96 <div class="status-bar">97 <div>6:59</div>98 <div class="status-icons">99 <!-- Location dot -->100 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><circle cx="12" cy="12" r="9"></circle></svg>101 <!-- WiFi -->102 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 11c4-3 10-3 14 0M8 14c3-2 5-2 8 0M12 18l2 2-2 2-2-2 2-2z"></path></svg>103 <!-- Battery -->104 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="22" y="9" width="4" height="6" rx="1"></rect></svg>105 </div>106 </div>107 108 <!-- Search bar -->109 <div class="search-wrap">110 <div class="search-bar">111 <div class="back">112 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg>113 </div>114 <div class="search-input">Westerpark</div>115 <div class="clear">116 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"></path></svg>117 </div>118 </div>119 </div>120 121 <!-- Results list -->122 <div class="list">123 <div class="list-item">124 <div class="pin">125 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>126 </div>127 <div class="item-text">128 <div class="item-title">Westerpark</div>129 <div class="item-sub">Amsterdam, Netherlands</div>130 </div>131 <div class="item-arrow">132 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>133 </div>134 </div>135 <div class="list-sep"></div>136 137 <div class="list-item">138 <div class="pin">139 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>140 </div>141 <div class="item-text">142 <div class="item-title">Westerpark</div>143 <div class="item-sub">Haarlemmerweg, Amsterdam, Netherlands</div>144 </div>145 <div class="item-arrow">146 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>147 </div>148 </div>149 <div class="list-sep"></div>150 151 <div class="list-item">152 <div class="pin">153 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>154 </div>155 <div class="item-text">156 <div class="item-title">Westerpark Computers en Telecom</div>157 <div class="item-sub">Spaarndammerstraat, Amsterdam, Nether...</div>158 </div>159 <div class="item-arrow">160 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>161 </div>162 </div>163 <div class="list-sep"></div>164 165 <div class="list-item">166 <div class="pin">167 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>168 </div>169 <div class="item-text">170 <div class="item-title">Westerparkschool</div>171 <div class="item-sub">Van Hogendorpplein, Amsterdam, Nether...</div>172 </div>173 <div class="item-arrow">174 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>175 </div>176 </div>177 <div class="list-sep"></div>178 179 <div class="list-item">180 <div class="pin">181 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>182 </div>183 <div class="item-text">184 <div class="item-title">Westerpark Suites</div>185 <div class="item-sub">Tweede Nassaustraat, Amsterdam, Nether...</div>186 </div>187 <div class="item-arrow">188 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>189 </div>190 </div>191 <div class="list-sep"></div>192 193 <div class="list-item">194 <div class="pin">195 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>196 </div>197 <div class="item-text">198 <div class="item-title">Westerpark West</div>199 <div class="item-sub">Haarlemmerweg, Amsterdam, Netherlands</div>200 </div>201 <div class="item-arrow">202 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>203 </div>204 </div>205 <div class="list-sep"></div>206 207 <div class="list-item">208 <div class="pin">209 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"></path><circle cx="12" cy="9" r="3"></circle></svg>210 </div>211 <div class="item-text">212 <div class="item-title">Westerpark Market (Every 1st Sun...)</div>213 <div class="item-sub">Polonceaukade, Amsterdam, Netherlands</div>214 </div>215 <div class="item-arrow">216 <svg viewBox="0 0 24 24"><path d="M4 20L20 4M14 4h6v6"></path></svg>217 </div>218 </div>219 </div>220 221 <!-- Keyboard -->222 <div class="keyboard">223 <div class="kb-suggestions">224 <div class="kb-lead">225 <!-- 2x2 grid icon -->226 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>227 </div>228 <div class="kb-chip">Westerpark</div>229 <div class="kb-chip">Western ark</div>230 <div class="kb-chip">Western arj</div>231 <div class="kb-mic">232 <svg viewBox="0 0 24 24"><rect x="8" y="4" width="8" height="10" rx="4"></rect><path d="M5 11c0 5 14 5 14 0M12 14v6"></path></svg>233 </div>234 </div>235 236 <div class="kb-rows">237 <!-- Row 1 -->238 <div class="kb-row">239 <div class="key">q</div>240 <div class="key">w</div>241 <div class="key">e</div>242 <div class="key">r</div>243 <div class="key">t</div>244 <div class="key">y</div>245 <div class="key">u</div>246 <div class="key">i</div>247 <div class="key">o</div>248 <div class="key">p</div>249 </div>250 <!-- Row 2 -->251 <div class="kb-row" style="padding-left:60px; padding-right:60px;">252 <div class="key">a</div>253 <div class="key">s</div>254 <div class="key">d</div>255 <div class="key">f</div>256 <div class="key">g</div>257 <div class="key">h</div>258 <div class="key">j</div>259 <div class="key">k</div>260 <div class="key">l</div>261 </div>262 <!-- Row 3 -->263 <div class="kb-row">264 <div class="key accent small">⇧</div>265 <div class="key">z</div>266 <div class="key">x</div>267 <div class="key">c</div>268 <div class="key">v</div>269 <div class="key">b</div>270 <div class="key">n</div>271 <div class="key">m</div>272 <div class="key accent small">273 <!-- backspace -->274 <svg viewBox="0 0 24 24"><path d="M3 12l6-6h10v12H9z"></path><path d="M12 9l6 6M18 9l-6 6"></path></svg>275 </div>276 </div>277 <!-- Row 4 -->278 <div class="kb-row">279 <div class="key accent small">?123</div>280 <div class="key accent small">,</div>281 <div class="key accent small">☺</div>282 <div class="key wide">space</div>283 <div class="key">.</div>284 <div class="key search">285 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-5-5"></path></svg>286 </div>287 </div>288 </div>289 290 <div class="gesture"></div>291 </div>292 293</div>294</body>295</html>