GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search - Berlin</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1f2937; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; border-radius: 32px;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0;16 height: 84px; padding: 0 36px;17 display: flex; align-items: center; justify-content: space-between;18 color: #111827; font-weight: 600; font-size: 38px;19 }20 .status-icons { display: flex; gap: 26px; align-items: center; }21 .icon { width: 44px; height: 44px; }22 23 /* Top search section */24 .search-area {25 position: absolute; top: 104px; left: 0; right: 0;26 padding: 0 36px;27 display: flex; align-items: center; gap: 24px;28 }29 .back-btn {30 width: 72px; height: 72px; border-radius: 36px;31 display: flex; align-items: center; justify-content: center;32 }33 .search-input {34 flex: 1; height: 100px;35 border: 3px solid #1e88e5; border-radius: 50px;36 display: flex; align-items: center; justify-content: space-between;37 padding: 0 32px; font-size: 44px; color: #111827;38 }39 .search-input .text { letter-spacing: 0.2px; }40 .clear-btn {41 width: 72px; height: 72px; border-radius: 36px;42 border: 2px solid #bdbdbd; display: flex; align-items: center; justify-content: center;43 color: #374151;44 }45 46 /* Results list */47 .results {48 position: absolute; top: 236px; left: 0; right: 0;49 padding: 12px 36px 0;50 }51 .result {52 display: flex; gap: 32px; align-items: center;53 padding: 32px 0;54 border-bottom: 1px solid rgba(0,0,0,0.06);55 }56 .result:last-child { border-bottom: none; }57 .lead-icon {58 width: 120px; height: 120px; border-radius: 28px;59 background: #f1f3f5; display: flex; align-items: center; justify-content: center;60 border: 1px solid #e1e5ea;61 }62 .result .title {63 font-size: 44px; font-weight: 700; color: #1f2937; margin-bottom: 10px;64 }65 .result .subtitle {66 font-size: 34px; color: #6b7280;67 }68 69 /* Keyboard */70 .keyboard {71 position: absolute; left: 0; right: 0; bottom: 72px;72 height: 860px; background: #f2effa; border-top-left-radius: 26px; border-top-right-radius: 26px;73 box-shadow: 0 -6px 16px rgba(0,0,0,0.06);74 padding: 26px 26px 20px;75 }76 .suggestions {77 display: flex; align-items: center; gap: 24px; margin-bottom: 22px;78 }79 .sugg-icon {80 width: 72px; height: 72px; border-radius: 18px; background: #b7e2a7; display: flex; align-items: center; justify-content: center;81 }82 .chip {83 height: 70px; padding: 0 26px; border-radius: 20px;84 background: #ffffff; border: 1px solid #e5e7eb; color: #1f2937; font-size: 34px;85 display: flex; align-items: center; justify-content: center;86 }87 .sugg-spacer { flex: 1; }88 .mic {89 width: 72px; height: 72px; border-radius: 36px; background: #ffffff; border: 1px solid #e5e7eb;90 display: flex; align-items: center; justify-content: center;91 }92 93 .rows { display: flex; flex-direction: column; gap: 18px; }94 .row { display: flex; gap: 16px; justify-content: center; }95 .key {96 width: 92px; height: 120px; border-radius: 26px;97 background: #ffffff; border: 1px solid #e6e8ef; color: #1f2937; font-size: 44px; font-weight: 500;98 display: flex; align-items: center; justify-content: center;99 box-shadow: 0 2px 0 #e6e8ef inset;100 }101 .key.pink { background: #f8d7e6; border-color: #f2c4d8; }102 .key.green { background: #b7e2a7; border-color: #a2d792; }103 .key.wide { width: 480px; }104 .key.mid { width: 150px; }105 .row.space-row { padding: 0 18px; }106 107 /* Home indicator */108 .home-indicator {109 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);110 width: 220px; height: 12px; border-radius: 8px; background: #cfcfcf;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div>10:50</div>120 <div class="status-icons">121 <!-- Signal/WiFi icon -->122 <svg class="icon" viewBox="0 0 24 24">123 <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>124 <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>125 <circle cx="12" cy="17" r="2" fill="#374151"/>126 </svg>127 <!-- Battery icon -->128 <svg class="icon" viewBox="0 0 24 24">129 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#374151" stroke-width="2"/>130 <rect x="4" y="8" width="12" height="8" rx="1" fill="#374151"/>131 <rect x="20" y="9" width="2" height="6" rx="1" fill="#374151"/>132 </svg>133 </div>134 </div>135 136 <!-- Search section -->137 <div class="search-area">138 <div class="back-btn">139 <svg width="48" height="48" viewBox="0 0 24 24">140 <path d="M15 5l-7 7 7 7" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 </div>143 <div class="search-input">144 <div class="text">Berlin</div>145 <div class="clear-btn">146 <svg width="36" height="36" viewBox="0 0 24 24">147 <circle cx="12" cy="12" r="10" fill="none" stroke="#9ca3af" stroke-width="2"/>148 <path d="M8 8l8 8M16 8l-8 8" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>149 </svg>150 </div>151 </div>152 </div>153 154 <!-- Results list -->155 <div class="results">156 157 <div class="result">158 <div class="lead-icon">159 <!-- Building icon -->160 <svg width="72" height="72" viewBox="0 0 24 24">161 <rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#0f172a" stroke-width="2"/>162 <rect x="9" y="7" width="2.5" height="2.5" fill="#0f172a"/>163 <rect x="12.5" y="7" width="2.5" height="2.5" fill="#0f172a"/>164 <rect x="9" y="11" width="2.5" height="2.5" fill="#0f172a"/>165 <rect x="12.5" y="11" width="2.5" height="2.5" fill="#0f172a"/>166 <rect x="10.5" y="16" width="3" height="4" fill="#0f172a"/>167 </svg>168 </div>169 <div>170 <div class="title">The Berlin</div>171 <div class="subtitle">Property • Gandhinagar, Gujarat</div>172 </div>173 </div>174 175 <div class="result">176 <div class="lead-icon">177 <!-- Map pin icon -->178 <svg width="72" height="72" viewBox="0 0 24 24">179 <path d="M12 3C8.1 3 5 6.1 5 10c0 4.8 7 10 7 10s7-5.2 7-10c0-3.9-3.1-7-7-7z" fill="none" stroke="#0f172a" stroke-width="2"/>180 <circle cx="12" cy="10" r="3" fill="#0f172a"/>181 </svg>182 </div>183 <div>184 <div class="title">Berlin</div>185 <div class="subtitle">City • Berlin, Germany • 495 Properties</div>186 </div>187 </div>188 189 <div class="result">190 <div class="lead-icon">191 <!-- Map pin icon -->192 <svg width="72" height="72" viewBox="0 0 24 24">193 <path d="M12 3C8.1 3 5 6.1 5 10c0 4.8 7 10 7 10s7-5.2 7-10c0-3.9-3.1-7-7-7z" fill="none" stroke="#0f172a" stroke-width="2"/>194 <circle cx="12" cy="10" r="3" fill="#0f172a"/>195 </svg>196 </div>197 <div>198 <div class="title">Berling</div>199 <div class="subtitle">City • Berling, France</div>200 </div>201 </div>202 203 <div class="result">204 <div class="lead-icon">205 <!-- Building icon -->206 <svg width="72" height="72" viewBox="0 0 24 24">207 <rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#0f172a" stroke-width="2"/>208 <rect x="9" y="7" width="2.5" height="2.5" fill="#0f172a"/>209 <rect x="12.5" y="7" width="2.5" height="2.5" fill="#0f172a"/>210 <rect x="9" y="11" width="2.5" height="2.5" fill="#0f172a"/>211 <rect x="12.5" y="11" width="2.5" height="2.5" fill="#0f172a"/>212 <rect x="10.5" y="16" width="3" height="4" fill="#0f172a"/>213 </svg>214 </div>215 <div>216 <div class="title">Hotel Q! Berlin</div>217 <div class="subtitle">Property • Berlin, Germany</div>218 </div>219 </div>220 221 <div class="result">222 <div class="lead-icon">223 <!-- Building icon -->224 <svg width="72" height="72" viewBox="0 0 24 24">225 <rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#0f172a" stroke-width="2"/>226 <rect x="9" y="7" width="2.5" height="2.5" fill="#0f172a"/>227 <rect x="12.5" y="7" width="2.5" height="2.5" fill="#0f172a"/>228 <rect x="9" y="11" width="2.5" height="2.5" fill="#0f172a"/>229 <rect x="12.5" y="11" width="2.5" height="2.5" fill="#0f172a"/>230 <rect x="10.5" y="16" width="3" height="4" fill="#0f172a"/>231 </svg>232 </div>233 <div>234 <div class="title">Berlin Heritage Inn</div>235 <div class="subtitle">Property • Berlin (OH), United States</div>236 </div>237 </div>238 239 </div>240 241 <!-- Keyboard -->242 <div class="keyboard">243 <div class="suggestions">244 <div class="sugg-icon">245 <svg width="36" height="36" viewBox="0 0 24 24">246 <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#1f2937" stroke-width="2"/>247 <path d="M7 9h10M7 12h7" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>248 </svg>249 </div>250 <div class="chip">Berlin</div>251 <div class="chip">Berliner</div>252 <div class="chip">Berl in</div>253 <div class="sugg-spacer"></div>254 <div class="mic">255 <svg width="32" height="32" viewBox="0 0 24 24">256 <rect x="9" y="3" width="6" height="10" rx="3" fill="#1f2937"/>257 <path d="M5 11c0 4 3.5 6 7 6s7-2 7-6" fill="none" stroke="#1f2937" stroke-width="2"/>258 <path d="M12 17v4" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>259 <path d="M9 21h6" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>260 </svg>261 </div>262 </div>263 264 <div class="rows">265 <div class="row">266 <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>267 </div>268 <div class="row">269 <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>270 <div class="key pink">271 <svg width="40" height="40" viewBox="0 0 24 24">272 <path d="M4 4l16 16M20 4L4 20" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>273 </svg>274 </div>275 </div>276 <div class="row">277 <div class="key pink">278 <svg width="40" height="40" viewBox="0 0 24 24">279 <path d="M6 18l-3-3 3-3" stroke="#1f2937" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 <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>283 <div class="key pink">284 <svg width="40" height="40" viewBox="0 0 24 24">285 <path d="M6 6h9l3 3v9a3 3 0 0 1-3 3H6" fill="none" stroke="#1f2937" stroke-width="2"/>286 <path d="M10 15l4-4M14 15l-4-4" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>287 </svg>288 </div>289 </div>290 <div class="row space-row">291 <div class="key pink mid">?123</div>292 <div class="key mid">,</div>293 <div class="key mid">294 <svg width="36" height="36" viewBox="0 0 24 24">295 <circle cx="12" cy="12" r="4" fill="#1f2937"/>296 </svg>297 </div>298 <div class="key wide"></div>299 <div class="key mid">.</div>300 <div class="key green mid">301 <svg width="36" height="36" viewBox="0 0 24 24">302 <path d="M5 12h10M11 6l6 6-6 6" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 </div>306 </div>307 </div>308 309 <!-- Home indicator -->310 <div class="home-indicator"></div>311 312</div>313</body>314</html>