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 UI - Berlin</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#FFFFFF; font-family: Arial, Helvetica, sans-serif;12 color:#222;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; width:100%; height:110px;18 background:#000; color:#fff; display:flex; align-items:center;19 justify-content:space-between; padding:0 32px; box-sizing:border-box;20 font-size:40px; letter-spacing:0.5px;21 }22 .status-left, .status-right { display:flex; align-items:center; gap:28px; }23 .status-icon svg { width:40px; height:40px; }24 25 /* Header / Search bar */26 .search-header {27 position:absolute; top:110px; left:0; width:100%; height:170px;28 background:#fff; display:flex; align-items:center; box-sizing:border-box;29 padding:0 32px; gap:24px;30 }31 .icon-btn {32 width:80px; height:80px; display:flex; align-items:center; justify-content:center;33 border-radius:40px;34 }35 .icon-btn svg { width:48px; height:48px; }36 .search-input-wrap {37 flex:1; position:relative; height:120px; display:flex; align-items:center;38 gap:24px;39 }40 .search-text {41 font-size:54px; color:#222;42 }43 .underline {44 position:absolute; left:88px; right:88px; bottom:12px; height:8px; background:#1BC2CF;45 border-radius:4px;46 }47 .close-wrap {48 width:88px; height:88px; border-radius:44px; background:#ECEFF1;49 display:flex; align-items:center; justify-content:center;50 }51 .close-wrap svg { width:44px; height:44px; }52 53 /* Results list */54 .results {55 position:absolute; top:280px; left:0; width:100%; box-sizing:border-box;56 }57 .result-item {58 display:flex; align-items:flex-start; gap:30px;59 padding:28px 32px;60 }61 .pin {62 width:94px; height:94px; border-radius:47px; background:#00C7D4;63 display:flex; align-items:center; justify-content:center;64 box-shadow: 0 2px 0 rgba(0,0,0,0.04);65 }66 .pin svg { width:54px; height:54px; }67 .result-text { max-width:880px; }68 .result-title { font-size:44px; line-height:58px; }69 .result-sub { font-size:36px; color:#757575; line-height:48px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }70 71 .powered {72 position:absolute; right:40px; bottom:980px;73 color:#9E9E9E; font-size:34px;74 }75 .gword span:nth-child(1){ color:#4285F4; }76 .gword span:nth-child(2){ color:#DB4437; }77 .gword span:nth-child(3){ color:#F4B400; }78 .gword span:nth-child(4){ color:#4285F4; }79 .gword span:nth-child(5){ color:#0F9D58; }80 .gword span:nth-child(6){ color:#DB4437; }81 82 /* Keyboard */83 .keyboard {84 position:absolute; bottom:0; left:0; width:100%; height:900px;85 background:#11161A; color:#fff; box-sizing:border-box;86 }87 .suggest-bar {88 height:90px; border-bottom:1px solid #1F262B; color:#C8CDD1;89 display:flex; align-items:center; gap:26px; padding:0 36px; font-size:36px;90 }91 .keys {92 padding:24px 16px;93 display:flex; flex-direction:column; gap:22px;94 }95 .row { display:flex; justify-content:center; gap:16px; }96 .key {97 height:120px; min-width:90px; background:#1A2025; border-radius:20px;98 display:flex; align-items:center; justify-content:center;99 font-size:44px; color:#E3E6E8; box-shadow: inset 0 -3px 0 rgba(255,255,255,0.04);100 }101 .key.wide { min-width:140px; }102 .key.mid { min-width:120px; }103 .key.space { flex:1; }104 .key.special { background:#2A3137; color:#C8CDD1; }105 .key.accent { background:#85EBCF; color:#073B2E; font-weight:bold; }106 .key.circle {107 width:120px; min-width:auto; border-radius:60px; background:#85EBCF; color:#063B2D;108 }109 .row-bottom { display:flex; align-items:center; gap:16px; padding:0 16px; }110 .nav-pill {111 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);112 width:240px; height:14px; border-radius:7px; background:#DADDE0;113 opacity:0.65;114 }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="status-bar">122 <div class="status-left">123 <div>12:40</div>124 <div class="status-icon">125 <svg viewBox="0 0 24 24" fill="#FFC107">126 <path d="M12 3 L1 21 H23 Z"></path>127 <rect x="11" y="9" width="2" height="6" fill="#000"></rect>128 <rect x="11" y="16.5" width="2" height="2" fill="#000"></rect>129 </svg>130 </div>131 </div>132 <div class="status-right">133 <div class="status-icon">134 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">135 <path d="M2 9c5-5 15-5 20 0"></path>136 <path d="M5 12c3-3 11-3 14 0"></path>137 <path d="M8 15c2-2 6-2 8 0"></path>138 <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>139 </svg>140 </div>141 <div class="status-icon">142 <svg viewBox="0 0 26 24" fill="none" stroke="#fff" stroke-width="2">143 <rect x="2" y="5" width="18" height="14" rx="2" fill="#fff"></rect>144 <rect x="4" y="7" width="14" height="10" rx="1" fill="#000"></rect>145 <rect x="22" y="9" width="3" height="6" rx="1" fill="#fff"></rect>146 </svg>147 </div>148 <div>100%</div>149 </div>150 </div>151 152 <!-- Search Header -->153 <div class="search-header">154 <div class="icon-btn" aria-label="Back">155 <svg viewBox="0 0 24 24" fill="#616161">156 <path d="M15 5 L6 12 L15 19" stroke="#616161" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>157 </svg>158 </div>159 <div class="icon-btn" aria-label="Search">160 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="3">161 <circle cx="10" cy="10" r="6"></circle>162 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke-linecap="round"></line>163 </svg>164 </div>165 <div class="search-input-wrap">166 <div class="search-text">Berlin</div>167 <div class="underline"></div>168 </div>169 <div class="close-wrap" aria-label="Clear">170 <svg viewBox="0 0 24 24">171 <circle cx="12" cy="12" r="11" fill="none"></circle>172 <path d="M7 7 L17 17 M17 7 L7 17" stroke="#7A7A7A" stroke-width="3" stroke-linecap="round"></path>173 </svg>174 </div>175 </div>176 177 <!-- Results -->178 <div class="results">179 <div class="result-item">180 <div class="pin">181 <svg viewBox="0 0 24 24" fill="none">182 <path d="M12 3c-3.3 0-6 2.6-6 5.9 0 4.4 6 11.1 6 11.1s6-6.7 6-11.1C18 5.6 15.3 3 12 3z" fill="#fff"></path>183 <circle cx="12" cy="9" r="2.6" fill="#00C7D4"></circle>184 </svg>185 </div>186 <div class="result-text">187 <div class="result-title">Berlin, Germany</div>188 </div>189 </div>190 191 <div class="result-item">192 <div class="pin">193 <svg viewBox="0 0 24 24" fill="none">194 <path d="M12 3c-3.3 0-6 2.6-6 5.9 0 4.4 6 11.1 6 11.1s6-6.7 6-11.1C18 5.6 15.3 3 12 3z" fill="#fff"></path>195 <circle cx="12" cy="9" r="2.6" fill="#00C7D4"></circle>196 </svg>197 </div>198 <div class="result-text">199 <div class="result-title">Berlin Brandenburg Airport (BER), Melli-Bees...</div>200 </div>201 </div>202 203 <div class="result-item">204 <div class="pin">205 <svg viewBox="0 0 24 24" fill="none">206 <path d="M12 3c-3.3 0-6 2.6-6 5.9 0 4.4 6 11.1 6 11.1s6-6.7 6-11.1C18 5.6 15.3 3 12 3z" fill="#fff"></path>207 <circle cx="12" cy="9" r="2.6" fill="#00C7D4"></circle>208 </svg>209 </div>210 <div class="result-text">211 <div class="result-title">Berlin Wall Memorial, Bernauer Straße, Berlin...</div>212 </div>213 </div>214 215 <div class="result-item">216 <div class="pin">217 <svg viewBox="0 0 24 24" fill="none">218 <path d="M12 3c-3.3 0-6 2.6-6 5.9 0 4.4 6 11.1 6 11.1s6-6.7 6-11.1C18 5.6 15.3 3 12 3z" fill="#fff"></path>219 <circle cx="12" cy="9" r="2.6" fill="#00C7D4"></circle>220 </svg>221 </div>222 <div class="result-text">223 <div class="result-title">Berliner Dom, Am Lustgarten, Berlin, Germany</div>224 </div>225 </div>226 227 <div class="result-item">228 <div class="pin">229 <svg viewBox="0 0 24 24" fill="none">230 <path d="M12 3c-3.3 0-6 2.6-6 5.9 0 4.4 6 11.1 6 11.1s6-6.7 6-11.1C18 5.6 15.3 3 12 3z" fill="#fff"></path>231 <circle cx="12" cy="9" r="2.6" fill="#00C7D4"></circle>232 </svg>233 </div>234 <div class="result-text">235 <div class="result-title">Berlinische Galerie, Alte Jakobstraße, Berlin,...</div>236 </div>237 </div>238 </div>239 240 <!-- Powered by Google -->241 <div class="powered">242 powered by243 <span class="gword">244 <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>245 </span>246 </div>247 248 <!-- Keyboard -->249 <div class="keyboard">250 <div class="suggest-bar">251 <div>Berlin</div>252 <div>|</div>253 <div>Berl in</div>254 <div>|</div>255 <div>Berliner</div>256 <div style="margin-left:auto; display:flex; align-items:center; gap:18px;">257 <div class="key special circle" style="width:90px; height:90px;">258 <svg viewBox="0 0 24 24" fill="none" stroke="#0A4133" stroke-width="2">259 <path d="M12 4a4 4 0 0 1 4 4v4a4 4 0 0 1-8 0V8a4 4 0 0 1 4-4z"></path>260 <path d="M19 12v3a7 7 0 0 1-14 0v-3"></path>261 </svg>262 </div>263 </div>264 </div>265 <div class="keys">266 <div class="row">267 <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>268 </div>269 <div class="row">270 <div class="key mid">a</div><div class="key mid">s</div><div class="key mid">d</div><div class="key mid">f</div><div class="key mid">g</div><div class="key mid">h</div><div class="key mid">j</div><div class="key mid">k</div><div class="key mid">l</div>271 </div>272 <div class="row">273 <div class="key wide special">274 <svg viewBox="0 0 24 24" width="38" height="38">275 <path d="M12 6 L6 12 L12 18" stroke="#C8CDD1" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>276 </svg>277 </div>278 <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>279 <div class="key wide special">280 <svg viewBox="0 0 24 24" width="40" height="40">281 <path d="M3 17 L10 10 L3 3" stroke="#C8CDD1" stroke-width="3" fill="none" stroke-linecap="round"></path>282 <rect x="10" y="6" width="10" height="12" rx="2" fill="none" stroke="#C8CDD1" stroke-width="2"></rect>283 </svg>284 </div>285 </div>286 <div class="row-bottom">287 <div class="key accent wide">?123</div>288 <div class="key special mid">,</div>289 <div class="key special mid">290 <svg viewBox="0 0 24 24" width="34" height="34">291 <circle cx="12" cy="12" r="3" fill="#C8CDD1"></circle>292 </svg>293 </div>294 <div class="key space"></div>295 <div class="key special mid">.</div>296 <div class="key circle">297 <svg viewBox="0 0 24 24" width="32" height="32" stroke="#063B2D" stroke-width="3" fill="none">298 <path d="M5 13l5 5 9-10" stroke-linecap="round" stroke-linejoin="round"></path>299 </svg>300 </div>301 </div>302 </div>303 <div class="nav-pill"></div>304 </div>305 306</div>307</body>308</html>