GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Travel Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F5F7FA;13 border-radius: 24px;14 }15 16 /* Status bar */17 .status-bar {18 height: 110px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #3A3A3A;24 font-weight: 600;25 font-size: 40px;26 background: #F0F3F8;27 }28 .sb-right { display: flex; align-items: center; gap: 20px; }29 .sb-dot { width: 18px; height: 18px; background: #3A3A3A; border-radius: 50%; opacity: .8; }30 .sb-icon {31 width: 48px; height: 48px; border-radius: 10px;32 border: 3px solid #3A3A3A;33 position: relative;34 }35 .battery:after {36 content: ""; position: absolute; right: -10px; top: 12px; width: 8px; height: 24px; background: #3A3A3A; border-radius: 2px;37 }38 39 /* Header */40 .header {41 height: 220px;42 padding: 36px;43 background: #EEF2F9;44 position: relative;45 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);46 }47 .back {48 position: absolute; left: 24px; top: 34px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;49 }50 .header-title {51 color: #0D2A80;52 font-size: 56px; font-weight: 700; margin-left: 120px; margin-top: 4px;53 }54 .header-sub {55 margin-left: 120px; margin-top: 10px;56 color: #1B3EA3; opacity: .85;57 font-size: 38px; font-weight: 600;58 }59 60 /* Search field */61 .search-area {62 background: #FFFFFF;63 margin: 0;64 padding: 0 24px 24px 24px;65 box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;66 }67 .search-input {68 height: 140px;69 display: flex; align-items: center;70 background: #FFFFFF;71 border-radius: 16px;72 border: 2px solid #E4E6EB;73 padding: 0 24px;74 gap: 24px;75 }76 .loc-green {77 width: 56px; height: 56px; border-radius: 50%;78 border: 6px solid #76C167;79 position: relative;80 }81 .loc-green:after {82 content: ""; position: absolute; bottom: -10px; left: 22px; width: 12px; height: 22px; background: #76C167; border-radius: 6px;83 }84 .search-text {85 font-size: 52px; color: #333; font-weight: 600;86 }87 88 /* List items */89 .results { background: #FFFFFF; }90 .item {91 display: flex; align-items: center;92 padding: 36px 24px;93 border-top: 1px solid #E9ECF2;94 }95 .pin {96 width: 56px; height: 56px; margin: 0 24px;97 }98 .item-text {99 font-size: 48px; color: #3C3F45;100 }101 102 /* Bottom navigation */103 .bottom-nav {104 position: absolute; bottom: 900px; left: 0; right: 0;105 height: 180px; background: #FFFFFF;106 display: flex; align-items: center; justify-content: space-around;107 border-top: 1px solid #DADDE3;108 }109 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }110 .nav-label { font-size: 36px; color: #6F7480; }111 .nav-label.active { color: #0D2A80; font-weight: 700; }112 113 /* Keyboard */114 .keyboard {115 position: absolute; bottom: 0; left: 0; right: 0;116 height: 900px; background: #1F1B18; color: #ECE6E0;117 border-top-left-radius: 24px; border-top-right-radius: 24px;118 }119 .kb-top {120 height: 120px; padding: 0 36px;121 display: flex; align-items: center; justify-content: space-between;122 }123 .kb-title { font-size: 46px; color: #EDE1D6; }124 .kb-row {125 display: flex; justify-content: center; gap: 18px;126 padding: 18px 36px;127 }128 .key {129 width: 90px; height: 110px;130 background: #2A2623; border-radius: 26px;131 display: flex; align-items: center; justify-content: center;132 font-size: 48px; color: #EDE1D6;133 box-shadow: inset 0 -3px 0 rgba(255,255,255,0.05);134 }135 .key.wide { width: 180px; }136 .key.space { width: 540px; }137 .kb-bottom {138 display: flex; align-items: center; justify-content: space-between;139 padding: 12px 24px;140 }141 .rounded-btn {142 width: 120px; height: 120px; border-radius: 36px; background: #2A2623;143 display: flex; align-items: center; justify-content: center;144 font-size: 60px;145 }146 .send {147 width: 160px; height: 120px; border-radius: 36px; background: #F6D8C0; color: #3A2E28;148 display: flex; align-items: center; justify-content: center; font-size: 60px; font-weight: 700;149 }150 151 /* Caret in the search text */152 .caret {153 width: 6px; height: 54px; background: #2F2F2F; display: inline-block; margin-left: 8px;154 animation: blink 1.2s steps(2, start) infinite;155 }156 @keyframes blink { to { opacity: 0; } }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status Bar -->163 <div class="status-bar">164 <div>3:30</div>165 <div class="sb-right">166 <div class="sb-dot"></div>167 <div class="sb-dot" style="opacity:.6;"></div>168 <div class="sb-dot" style="opacity:.4;"></div>169 <div class="sb-icon" title="Wi‑Fi"></div>170 <div class="sb-icon battery" title="Battery"></div>171 </div>172 </div>173 174 <!-- Header -->175 <div class="header">176 <div class="back">177 <svg width="64" height="64" viewBox="0 0 24 24">178 <path d="M15 4 L7 12 L15 20" stroke="#0D2A80" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 <div class="header-title">Travel to</div>182 <div class="header-sub">City, station, airport, port...</div>183 </div>184 185 <!-- Search field and results -->186 <div class="search-area">187 <div class="search-input">188 <div class="loc-green"></div>189 <div class="search-text">Florence <span class="caret"></span></div>190 </div>191 192 <div class="results">193 <div class="item" style="border-top:none;">194 <svg class="pin" viewBox="0 0 24 24">195 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#203B7A"/>196 </svg>197 <div class="item-text">Florence (Italy)</div>198 </div>199 200 <div class="item">201 <svg class="pin" viewBox="0 0 24 24">202 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#203B7A"/>203 </svg>204 <div class="item-text">Florence (Airport) (Italy)</div>205 </div>206 207 <div class="item">208 <svg class="pin" viewBox="0 0 24 24">209 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#203B7A"/>210 </svg>211 <div class="item-text">Florence (United States)</div>212 </div>213 214 <div class="item">215 <svg class="pin" viewBox="0 0 24 24">216 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#203B7A"/>217 </svg>218 <div class="item-text">Florence (United States)</div>219 </div>220 221 <div class="item">222 <svg class="pin" viewBox="0 0 24 24">223 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#203B7A"/>224 </svg>225 <div class="item-text">Florenceville-Bristol (Canada)</div>226 </div>227 </div>228 </div>229 230 <!-- Bottom Navigation -->231 <div class="bottom-nav">232 <div class="nav-item">233 <svg width="64" height="64" viewBox="0 0 24 24">234 <circle cx="11" cy="11" r="7" stroke="#0D2A80" stroke-width="3" fill="none"/>235 <line x1="18" y1="18" x2="22" y2="22" stroke="#0D2A80" stroke-width="3" stroke-linecap="round"/>236 </svg>237 <div class="nav-label active">Search</div>238 </div>239 <div class="nav-item">240 <svg width="64" height="64" viewBox="0 0 24 24">241 <rect x="3" y="5" width="18" height="14" rx="3" stroke="#9AA1AF" stroke-width="3" fill="none"/>242 <line x1="6" y1="10" x2="18" y2="10" stroke="#9AA1AF" stroke-width="3"/>243 </svg>244 <div class="nav-label">Booking</div>245 </div>246 <div class="nav-item">247 <svg width="64" height="64" viewBox="0 0 24 24">248 <line x1="4" y1="6" x2="20" y2="6" stroke="#9AA1AF" stroke-width="3" stroke-linecap="round"/>249 <line x1="4" y1="12" x2="20" y2="12" stroke="#9AA1AF" stroke-width="3" stroke-linecap="round"/>250 <line x1="4" y1="18" x2="20" y2="18" stroke="#9AA1AF" stroke-width="3" stroke-linecap="round"/>251 </svg>252 <div class="nav-label">Menu</div>253 </div>254 </div>255 256 <!-- Keyboard -->257 <div class="keyboard">258 <div class="kb-top">259 <div class="rounded-btn">260 <svg width="54" height="54" viewBox="0 0 24 24">261 <rect x="3" y="3" width="6" height="6" fill="#EDE1D6"/>262 <rect x="10" y="3" width="6" height="6" fill="#EDE1D6"/>263 <rect x="17" y="3" width="6" height="6" fill="#EDE1D6"/>264 <rect x="3" y="10" width="6" height="6" fill="#EDE1D6"/>265 <rect x="10" y="10" width="6" height="6" fill="#EDE1D6"/>266 <rect x="17" y="10" width="6" height="6" fill="#EDE1D6"/>267 </svg>268 </div>269 <div class="kb-title">Florence</div>270 <div style="display:flex; align-items:center; gap:16px;">271 <div class="rounded-btn">🎙️</div>272 <div class="send">✓</div>273 </div>274 </div>275 276 <div class="kb-row">277 <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>278 </div>279 <div class="kb-row" style="padding-left:90px;">280 <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>281 </div>282 <div class="kb-row" style="padding-left:180px;">283 <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>284 </div>285 <div class="kb-row">286 <div class="key wide">?123</div>287 <div class="key">,</div>288 <div class="key wide">🙂</div>289 <div class="key space"></div>290 <div class="key">.</div>291 </div>292 </div>293 294</div>295</body>296</html>