GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Destination Search UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2937; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height: 120px;17 padding: 20px 36px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 color: #0f172a;22 font-size: 36px;23 letter-spacing: 0.4px;24 }25 .status-icons { display: flex; align-items: center; gap: 24px; }26 .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #0f172a; }27 .icon svg { width: 100%; height: 100%; }28 29 /* Content area */30 .content { padding: 12px 48px 0 48px; }31 .search-row {32 display: grid;33 grid-template-columns: 70px 1fr 70px;34 align-items: center;35 column-gap: 24px;36 margin-top: 12px;37 }38 .back-btn, .send-btn {39 width: 70px; height: 70px; border-radius: 35px; display: flex; align-items: center; justify-content: center;40 color: #0f172a;41 }42 .search-input {43 height: 116px; border: 4px solid #2f6df6; border-radius: 58px;44 padding: 0 36px; font-size: 38px; color: #9aa3af; display: flex; align-items: center;45 }46 47 /* Current location row */48 .location-row {49 margin-top: 32px;50 display: grid;51 grid-template-columns: 120px 1fr 70px;52 align-items: center;53 column-gap: 26px;54 }55 .square-icon {56 width: 120px; height: 120px; border-radius: 28px; background: #f5f7fb; border: 1px solid #e5e7eb;57 display: flex; align-items: center; justify-content: center;58 }59 .location-text { font-size: 36px; color: #111827; }60 .divider { height: 1px; background: #e5e7eb; margin: 32px 0; }61 62 /* Popular list */63 .section-title { font-size: 44px; font-weight: 600; color: #0f172a; margin-bottom: 26px; }64 .city-item {65 display: grid;66 grid-template-columns: 120px 1fr;67 column-gap: 26px;68 align-items: center;69 padding: 18px 0;70 }71 .city-name { font-size: 40px; color: #111827; }72 .city-sub { font-size: 32px; color: #6b7280; margin-top: 6px; }73 74 /* Keyboard mock */75 .keyboard {76 position: absolute; left: 0; bottom: 0; width: 100%; height: 900px;77 background: #f3f1fa; border-top: 1px solid #e5e7eb;78 padding: 22px 28px;79 }80 .kb-top { display: flex; gap: 28px; align-items: center; margin-bottom: 26px; }81 .kb-pill {82 width: 80px; height: 80px; border-radius: 20px; background: #ffffff; border: 1px solid #e5e7eb;83 display: flex; align-items: center; justify-content: center; color: #374151; font-size: 30px;84 }85 .kb-rows { display: grid; row-gap: 22px; }86 .kb-row { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; column-gap: 16px; padding: 0 18px; }87 .key {88 height: 120px; border-radius: 24px; background: #ffffff; border: 1px solid #e5e7eb;89 display: flex; align-items: center; justify-content: center; font-size: 40px; color: #111827;90 }91 .key.special { background: #f9e1e8; }92 .space-row { display: grid; grid-template-columns: 140px 1fr 140px 140px; column-gap: 16px; padding: 0 18px; margin-top: 22px; }93 .space { height: 120px; border-radius: 24px; background: #ffffff; border: 1px solid #e5e7eb; }94 .enter { width: 120px; height: 120px; border-radius: 60px; background: #9be28a; display: flex; align-items: center; justify-content: center; margin-left: auto; }95 .home-bar {96 position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);97 width: 260px; height: 10px; background: #cbd5e1; border-radius: 5px;98 }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status bar -->105 <div class="status-bar">106 <div>10:49</div>107 <div class="status-icons">108 <div class="icon">109 <!-- simple signal icon -->110 <svg viewBox="0 0 24 24">111 <rect x="2" y="16" width="3" height="6" fill="#374151"></rect>112 <rect x="7" y="12" width="3" height="10" fill="#374151"></rect>113 <rect x="12" y="8" width="3" height="14" fill="#374151"></rect>114 <rect x="17" y="4" width="3" height="18" fill="#374151"></rect>115 </svg>116 </div>117 <div class="icon">118 <!-- battery -->119 <svg viewBox="0 0 28 24">120 <rect x="2" y="6" width="22" height="12" rx="2" ry="2" fill="none" stroke="#374151" stroke-width="2"></rect>121 <rect x="4" y="8" width="14" height="8" fill="#374151"></rect>122 <rect x="24" y="9" width="2" height="6" fill="#374151"></rect>123 </svg>124 </div>125 </div>126 </div>127 128 <div class="content">129 <!-- Search row -->130 <div class="search-row">131 <div class="back-btn">132 <svg viewBox="0 0 24 24">133 <path d="M14 5 L7 12 L14 19" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>134 </svg>135 </div>136 <div class="search-input">Enter Destination</div>137 <div class="send-btn">138 <svg viewBox="0 0 24 24">139 <path d="M3 21 L21 12 L3 3 L7 12 Z" fill="none" stroke="#0f172a" stroke-width="2" stroke-linejoin="round"></path>140 </svg>141 </div>142 </div>143 144 <!-- Use current location -->145 <div class="location-row">146 <div class="square-icon">147 <svg viewBox="0 0 24 24">148 <circle cx="12" cy="12" r="8" fill="none" stroke="#0f172a" stroke-width="2"></circle>149 <circle cx="12" cy="12" r="2" fill="#0f172a"></circle>150 </svg>151 </div>152 <div class="location-text">Use current location</div>153 <div class="icon">154 <svg viewBox="0 0 24 24">155 <path d="M3 12 L21 6 L14 12 L21 18 Z" fill="none" stroke="#0f172a" stroke-width="2" stroke-linejoin="round"></path>156 </svg>157 </div>158 </div>159 160 <div class="divider"></div>161 162 <!-- Popular Destinations -->163 <div class="section-title">Popular Destinations</div>164 165 <div class="city-item">166 <div class="square-icon">167 <svg viewBox="0 0 24 24">168 <rect x="5" y="10" width="6" height="9" fill="none" stroke="#0f172a" stroke-width="2"></rect>169 <rect x="13" y="6" width="6" height="13" fill="none" stroke="#0f172a" stroke-width="2"></rect>170 <rect x="7" y="13" width="2" height="3" fill="#0f172a"></rect>171 <rect x="15" y="9" width="2" height="3" fill="#0f172a"></rect>172 </svg>173 </div>174 <div>175 <div class="city-name">Amritsar</div>176 <div class="city-sub">548 Properties</div>177 </div>178 </div>179 180 <div class="city-item">181 <div class="square-icon">182 <svg viewBox="0 0 24 24">183 <rect x="5" y="10" width="6" height="9" fill="none" stroke="#0f172a" stroke-width="2"></rect>184 <rect x="13" y="6" width="6" height="13" fill="none" stroke="#0f172a" stroke-width="2"></rect>185 <rect x="7" y="13" width="2" height="3" fill="#0f172a"></rect>186 <rect x="15" y="9" width="2" height="3" fill="#0f172a"></rect>187 </svg>188 </div>189 <div>190 <div class="city-name">Mumbai</div>191 <div class="city-sub">1146 Properties</div>192 </div>193 </div>194 195 <div class="city-item">196 <div class="square-icon">197 <svg viewBox="0 0 24 24">198 <rect x="5" y="10" width="6" height="9" fill="none" stroke="#0f172a" stroke-width="2"></rect>199 <rect x="13" y="6" width="6" height="13" fill="none" stroke="#0f172a" stroke-width="2"></rect>200 <rect x="7" y="13" width="2" height="3" fill="#0f172a"></rect>201 <rect x="15" y="9" width="2" height="3" fill="#0f172a"></rect>202 </svg>203 </div>204 <div>205 <div class="city-name">Jaipur</div>206 <div class="city-sub">1317 Properties</div>207 </div>208 </div>209 210 <div class="city-item">211 <div class="square-icon">212 <svg viewBox="0 0 24 24">213 <rect x="5" y="10" width="6" height="9" fill="none" stroke="#0f172a" stroke-width="2"></rect>214 <rect x="13" y="6" width="6" height="13" fill="none" stroke="#0f172a" stroke-width="2"></rect>215 <rect x="7" y="13" width="2" height="3" fill="#0f172a"></rect>216 <rect x="15" y="9" width="2" height="3" fill="#0f172a"></rect>217 </svg>218 </div>219 <div>220 <div class="city-name">Ahmedabad</div>221 <div class="city-sub">604 Properties</div>222 </div>223 </div>224 225 <div class="city-item" style="margin-bottom: 14px;">226 <div class="square-icon">227 <svg viewBox="0 0 24 24">228 <rect x="5" y="10" width="6" height="9" fill="none" stroke="#0f172a" stroke-width="2"></rect>229 <rect x="13" y="6" width="6" height="13" fill="none" stroke="#0f172a" stroke-width="2"></rect>230 <rect x="7" y="13" width="2" height="3" fill="#0f172a"></rect>231 <rect x="15" y="9" width="2" height="3" fill="#0f172a"></rect>232 </svg>233 </div>234 <div>235 <div class="city-name">Bengaluru</div>236 <div class="city-sub">1960 Properties</div>237 </div>238 </div>239 </div>240 241 <!-- Keyboard mockup -->242 <div class="keyboard">243 <div class="kb-top">244 <div class="kb-pill">⌘</div>245 <div class="kb-pill">😊</div>246 <div class="kb-pill">GIF</div>247 <div class="kb-pill">⚙️</div>248 <div class="kb-pill">G</div>249 <div class="kb-pill">🎨</div>250 <div class="kb-pill">🎙️</div>251 </div>252 253 <div class="kb-rows">254 <div class="kb-row">255 <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>256 </div>257 <div class="kb-row">258 <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>259 </div>260 <div class="kb-row">261 <div class="key special">⇧</div><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><div class="key special">⌫</div>262 </div>263 <div class="space-row">264 <div class="key special">?123</div>265 <div class="space"></div>266 <div class="key special">.</div>267 <div class="enter">268 <svg viewBox="0 0 24 24">269 <path d="M5 12 L19 12 M15 8 L19 12 L15 16" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>270 </svg>271 </div>272 </div>273 </div>274 275 <div class="home-bar"></div>276 </div>277 278</div>279</body>280</html>