GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Travel Search - Hotels</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1a20;15 color: #e6edf3;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 96px;23 display: flex; align-items: center;24 padding: 0 28px;25 color: #cfd7dd;26 font-size: 30px; letter-spacing: 0.3px;27 }28 .status-spacer { flex: 1; }29 .status-icons { display: flex; gap: 26px; align-items: center; }30 .icon { width: 34px; height: 34px; opacity: 0.9; }31 32 /* App bar with tabs */33 .app-bar {34 position: absolute;35 top: 96px; left: 0; right: 0;36 height: 140px;37 display: flex; align-items: center;38 padding: 0 28px;39 }40 .back-btn {41 width: 72px; height: 72px;42 display: flex; align-items: center; justify-content: center;43 }44 .tabs {45 margin-left: 8px;46 display: flex; gap: 40px;47 font-size: 34px; font-weight: 600; letter-spacing: 1px;48 }49 .tab { color: #8fa1ad; }50 .tab.active { color: #cfeae5; position: relative; }51 .tab.active::after {52 content: ""; position: absolute; left: 0; bottom: -18px;53 width: 160px; height: 6px; background: #18c1ab; border-radius: 3px;54 }55 56 /* Top controls on the right */57 .top-controls {58 position: absolute; right: 28px; top: 112px;59 display: flex; gap: 16px;60 }61 .chip {62 display: flex; align-items: center; gap: 12px;63 background: #18232b;64 color: #cfd7dd;65 border: 1px solid #24333c;66 border-radius: 14px;67 padding: 16px 20px;68 font-size: 28px;69 }70 .chip .icon { width: 32px; height: 32px; }71 72 /* Search input */73 .search-area {74 position: absolute;75 top: 210px; left: 28px; right: 28px;76 }77 .search-input {78 width: calc(100% - 0px); height: 96px;79 border-radius: 14px;80 background: #101a21;81 border: 2px solid #2e6af0;82 box-shadow: 0 0 0 3px rgba(46,106,240,0.25) inset;83 padding: 0 24px;84 display: flex; align-items: center; gap: 14px;85 font-size: 34px;86 }87 .search-input .cursor {88 width: 2px; height: 48px; background: #2e6af0; display: inline-block;89 animation: blink 1s step-end infinite;90 margin-left: 8px;91 }92 @keyframes blink { 50% { opacity: 0; } }93 94 /* Suggestions */95 .content {96 position: absolute;97 left: 28px; right: 28px;98 top: 340px;99 padding-top: 18px;100 }101 .section-title {102 color: #a7b5be; font-size: 28px; margin-bottom: 22px;103 }104 .list-item {105 display: flex; align-items: center; gap: 20px;106 padding: 22px 0;107 border-bottom: 1px solid #15212a;108 font-size: 32px; line-height: 42px;109 }110 .list-item .icon-wrap {111 width: 52px; height: 52px; border-radius: 12px;112 background: #16222a; border: 1px solid #23313a;113 display: flex; align-items: center; justify-content: center;114 }115 .pills {116 display: flex; gap: 24px;117 margin: 22px 0 6px 0;118 }119 .pill {120 flex: 1;121 display: flex; align-items: center; gap: 16px;122 background: #4f5d69;123 color: #e9eef2;124 border: 1px solid #596874;125 border-radius: 18px;126 padding: 22px 24px;127 font-size: 30px;128 box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);129 }130 .muted { color: #a7b5be; }131 .bold { font-weight: 700; color: #e6edf3; }132 133 /* Keyboard mock */134 .keyboard {135 position: absolute; left: 0; right: 0;136 bottom: 88px;137 height: 780px;138 background: #0d161c;139 border-top: 1px solid #1b2a33;140 padding: 20px 26px;141 }142 .kb-suggestions {143 display: flex; gap: 18px; margin-bottom: 18px;144 }145 .kb-suggestion {146 padding: 16px 22px; border-radius: 16px;147 background: #23313a; color: #cfd7dd; font-size: 28px;148 border: 1px solid #2b3a44;149 }150 .kb-row {151 display: flex; gap: 12px; margin: 16px 0;152 }153 .key {154 flex: 1;155 height: 110px;156 background: #1c2730;157 border: 1px solid #2a3a44;158 border-radius: 16px;159 color: #e6edf3;160 font-size: 40px;161 display: flex; align-items: center; justify-content: center;162 }163 .key.small { flex: 0 0 120px; }164 .key.medium { flex: 0 0 180px; }165 .key.wide { flex: 1; }166 .key.space { flex: 1; height: 110px; }167 .key.circle {168 flex: 0 0 120px; height: 120px; border-radius: 60px; background: #bcd0e6; color: #0d161c;169 border: none;170 }171 172 /* Gesture bar */173 .gesture {174 position: absolute; left: 50%; transform: translateX(-50%);175 bottom: 24px;176 width: 320px; height: 10px;177 background: #cfd7dd; opacity: 0.3; border-radius: 6px;178 }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status Bar -->185 <div class="status-bar">186 <div>1:45</div>187 <div class="status-spacer"></div>188 <div class="status-icons">189 <!-- Signal -->190 <svg class="icon" viewBox="0 0 24 24">191 <path fill="#cfd7dd" d="M3 20h2v-4H3v4zm4 0h2v-7H7v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/>192 </svg>193 <!-- WiFi -->194 <svg class="icon" viewBox="0 0 24 24">195 <path fill="#cfd7dd" d="M12 18.5l-2.5-2.5a3.5 3.5 0 015 0L12 18.5zm6-6a8 8 0 00-12 0l-1.5-1.5a10 10 0 0115 0L18 12.5z"/>196 </svg>197 <!-- Battery -->198 <svg class="icon" viewBox="0 0 24 24">199 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#cfd7dd" stroke-width="2"/>200 <rect x="4" y="8" width="12" height="8" fill="#cfd7dd"/>201 <rect x="20" y="10" width="2" height="4" fill="#cfd7dd"/>202 </svg>203 </div>204 </div>205 206 <!-- App Bar -->207 <div class="app-bar">208 <div class="back-btn">209 <svg class="icon" viewBox="0 0 24 24">210 <path fill="#cfd7dd" d="M15 18l-6-6 6-6v12z"/>211 </svg>212 </div>213 <div class="tabs">214 <div class="tab">FLIGHTS</div>215 <div class="tab active">HOTELS</div>216 </div>217 </div>218 219 <!-- Right top controls -->220 <div class="top-controls">221 <div class="chip">222 <svg class="icon" viewBox="0 0 24 24">223 <path fill="#cfd7dd" d="M6 3h12v2H6V3zm-2 4h16v14H4V7zm4 3h8v8H8v-8z"/>224 </svg>225 <span>Dec 6</span>226 <span class="muted">Dec 8</span>227 </div>228 <div class="chip">229 <svg class="icon" viewBox="0 0 24 24">230 <circle cx="12" cy="8" r="4" fill="#cfd7dd"/>231 <path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8H4z" fill="#cfd7dd"/>232 </svg>233 <span>2</span>234 </div>235 </div>236 237 <!-- Search -->238 <div class="search-area">239 <div class="search-input">240 London241 <span class="cursor"></span>242 </div>243 </div>244 245 <!-- Suggestions -->246 <div class="content">247 <div class="section-title">Did you mean?</div>248 249 <div class="list-item" style="border-bottom:none; padding-top:8px;">250 <div class="icon-wrap">251 <!-- Building icon -->252 <svg class="icon" viewBox="0 0 24 24">253 <path fill="#a7b5be" d="M5 20h14V4H5v16zm3-10h2v2H8v-2zm0 4h2v2H8v-2zm5-4h2v2h-2v-2zm0 4h2v2h-2v-2z"/>254 </svg>255 </div>256 <div><span class="bold">London</span>, England, United Kingdom</div>257 </div>258 259 <div class="pills">260 <div class="pill">261 <svg class="icon" viewBox="0 0 24 24">262 <path fill="#ffffff" d="M12 2a6 6 0 016 6c0 4.5-6 12-6 12S6 12.5 6 8a6 6 0 016-6zm0 8a2 2 0 100-4 2 2 0 000 4z"/>263 </svg>264 The London Eye265 </div>266 <div class="pill">267 <svg class="icon" viewBox="0 0 24 24">268 <path fill="#ffffff" d="M12 2a6 6 0 016 6c0 4.5-6 12-6 12S6 12.5 6 8a6 6 0 016-6zm0 8a2 2 0 100-4 2 2 0 000 4z"/>269 </svg>270 Buckingham Palace271 </div>272 </div>273 274 <div class="list-item">275 <div class="icon-wrap">276 <!-- Pin -->277 <svg class="icon" viewBox="0 0 24 24">278 <path fill="#a7b5be" d="M12 2a6 6 0 016 6c0 4.5-6 12-6 12S6 12.5 6 8a6 6 0 016-6zm0 8a2 2 0 100-4 2 2 0 000 4z"/>279 </svg>280 </div>281 <div>City of <span class="bold">London</span>, <span class="bold">London</span>, England, United Kingdom</div>282 </div>283 284 <div class="list-item">285 <div class="icon-wrap">286 <!-- Airplane -->287 <svg class="icon" viewBox="0 0 24 24">288 <path fill="#a7b5be" d="M2 16l8-3 4 4 2-1-3-5 7-7-2-2-7 7-5-3-1 2 4 4-3 8z"/>289 </svg>290 </div>291 <div><span class="bold">London</span> (YXU), <span class="bold">London</span>, Ontario, Canada</div>292 </div>293 294 <div class="list-item" style="border-bottom:none;">295 <div class="icon-wrap">296 <!-- Airplane alt -->297 <svg class="icon" viewBox="0 0 24 24">298 <path fill="#a7b5be" d="M3 14l7-2 5 4 2-1-4-5 6-6-2-2-6 6-5-4-1 2 4 5-2 7z"/>299 </svg>300 </div>301 <div><span class="bold">London</span> City (LCY), <span class="bold">London</span>, England, United Kingdom</div>302 </div>303 </div>304 305 <!-- Keyboard Mockup -->306 <div class="keyboard">307 <div class="kb-suggestions">308 <div class="kb-suggestion">London</div>309 <div class="kb-suggestion">London's</div>310 <div class="kb-suggestion">Londo</div>311 </div>312 313 <div class="kb-row">314 <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>315 <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>316 </div>317 <div class="kb-row">318 <div class="key small">319 <svg class="icon" viewBox="0 0 24 24"><path fill="#e6edf3" d="M8 20l-4-4 4-4v8zm4-8l4 4-4 4v-8z"/></svg>320 </div>321 <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>322 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>323 <div class="key small">324 <svg class="icon" viewBox="0 0 24 24"><path fill="#e6edf3" d="M4 10h12l-4-4 2-2 8 8-8 8-2-2 4-4H4z"/></svg>325 </div>326 </div>327 <div class="kb-row">328 <div class="key medium">shift</div>329 <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>330 <div class="key">n</div><div class="key">m</div>331 <div class="key medium">332 <svg class="icon" viewBox="0 0 24 24"><path fill="#e6edf3" d="M19 7l-9 9-5-5 1.5-1.5L10 13l7.5-7.5L19 7z"/></svg>333 </div>334 <div class="key circle">335 <svg class="icon" viewBox="0 0 24 24">336 <circle cx="11" cy="11" r="7" fill="#0d161c"/>337 <path d="M15 15l6 6" stroke="#0d161c" stroke-width="2" stroke-linecap="round"/>338 </svg>339 </div>340 </div>341 <div class="kb-row">342 <div class="key small">?123</div>343 <div class="key small">,</div>344 <div class="key space"></div>345 <div class="key small">346 <svg class="icon" viewBox="0 0 24 24"><path fill="#e6edf3" d="M12 2a4 4 0 014 4v6a4 4 0 11-8 0V6a4 4 0 014-4zm-6 12h12v2H6v-2z"/></svg>347 </div>348 <div class="key small">349 <svg class="icon" viewBox="0 0 24 24"><path fill="#e6edf3" d="M21 11H7l5-5-1.5-1.5L3 12l7.5 7.5L12 18l-5-5h14v-2z"/></svg>350 </div>351 </div>352 </div>353 354 <!-- Gesture bar -->355 <div class="gesture"></div>356 357</div>358</body>359</html>