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<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden; background:#FFFFFF;10 }11 12 /* Header */13 .header {14 position:absolute; left:0; top:0; width:100%; height:460px; background:#0A51B7; color:#fff;15 }16 .status-bar {17 height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:34px; opacity:0.95;18 }19 .status-right { display:flex; align-items:center; gap:18px; }20 .logo {21 text-align:center; font-weight:bold; font-size:72px; margin-top:30px;22 }23 .top-icons { position:absolute; right:36px; top:160px; display:flex; gap:26px; align-items:center; }24 .icon-btn { width:60px; height:60px; border:2px solid rgba(255,255,255,0.7); border-radius:50%; display:flex; align-items:center; justify-content:center; }25 .badge {26 position:absolute; right:-6px; top:-6px; width:36px; height:36px; background:#E53935; color:#fff; font-weight:bold; font-size:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;27 box-shadow:0 0 0 2px #0A51B7 inset;28 }29 30 /* Tabs */31 .tabs {32 position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:space-around; align-items:center; padding:0 32px;33 color:#E5ECFF;34 }35 .tab-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#E5ECFF; font-size:36px; }36 .tab-icon { width:70px; height:48px; }37 .tab-active {38 border:2px solid #E5ECFF; color:#fff; border-radius:28px; padding:18px 36px; display:flex; align-items:center; gap:16px;39 background:rgba(255,255,255,0.12);40 }41 .tab-active .tab-label { font-size:40px; }42 43 /* Search card */44 .search-card {45 position:absolute; left:36px; right:36px; top:470px; background:#fff; border:6px solid #F4A71C; border-radius:22px; box-shadow:0 6px 12px rgba(0,0,0,0.2);46 overflow:hidden;47 }48 .radio-row {49 display:flex; gap:36px; padding:28px 32px; align-items:center;50 }51 .radio {52 display:flex; align-items:center; gap:18px; font-size:38px; color:#2D2D2D;53 }54 .radio .dot {55 width:44px; height:44px; border-radius:50%; border:4px solid #CFCFCF; position:relative;56 }57 .radio.selected .dot { border-color:#1E71FF; }58 .radio.selected .dot::after {59 content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);60 width:22px; height:22px; background:#1E71FF; border-radius:50%;61 }62 63 .segment { border-top:6px solid #F4A71C; padding:28px 32px; }64 .row { display:flex; align-items:center; gap:24px; font-size:40px; color:#1B1B1B; }65 .row .label { flex:1; }66 .swap {67 display:flex; align-items:center; gap:8px; color:#1E71FF; font-size:32px;68 }69 .vert-divider {70 width:2px; height:100px; background:#DADADA; margin:0 8px;71 }72 .thin-line { height:2px; background:#E0E0E0; margin:18px 0; }73 74 .search-btn {75 border-top:6px solid #F4A71C; background:#0A51B7; color:#fff; font-weight:bold; font-size:46px; text-align:center;76 padding:30px 20px;77 border-bottom-left-radius:16px; border-bottom-right-radius:16px;78 }79 80 /* Toggle */81 .toggle-row {82 position:absolute; left:36px; right:36px; top:1050px; display:flex; align-items:center; justify-content:space-between; font-size:42px; color:#2D2D2D;83 }84 .toggle {85 width:120px; height:64px; background:#BDBDBD; border-radius:32px; position:relative;86 }87 .toggle::after {88 content:""; position:absolute; left:8px; top:8px; width:48px; height:48px; background:#FFF; border-radius:50%;89 box-shadow:0 1px 3px rgba(0,0,0,0.3);90 }91 92 /* Nearby section */93 .nearby-title { position:absolute; left:36px; top:1220px; font-size:56px; font-weight:bold; color:#111; }94 .cards {95 position:absolute; left:36px; right:36px; top:1300px; display:flex; gap:28px;96 }97 .img-card {98 flex:1; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 4px 8px rgba(0,0,0,0.1);99 }100 .img-placeholder {101 width:100%; height:320px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;102 }103 104 /* Bottom nav */105 .bottom-bar {106 position:absolute; left:0; bottom:0; width:100%; height:180px; background:#fff; border-top:1px solid #E0E0E0; display:flex; justify-content:space-around; align-items:center;107 }108 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#444; font-size:34px; }109 .nav-item .nav-icon { width:64px; height:64px; }110 .nav-active { color:#0A51B7; }111 .profile-dot {112 width:64px; height:64px; border-radius:50%; background:#D26900; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:36px;113 }114 .home-indicator {115 position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:240px; height:10px; background:#000000; opacity:0.12; border-radius:8px;116 }117 118 /* Simple icon color */119 .icon-white path, .icon-white rect, .icon-white circle, .icon-white line { stroke:#fff; fill:none; }120 .icon-blue path { fill:#fff; }121</style>122</head>123<body>124<div id="render-target">125 126 <!-- Header -->127 <div class="header">128 <div class="status-bar">129 <div>3:36</div>130 <div class="status-right">131 <!-- simple status glyphs -->132 <svg width="34" height="34"><circle cx="17" cy="17" r="15" fill="none" stroke="#fff" stroke-width="3"/></svg>133 <svg width="34" height="34"><rect x="4" y="8" width="26" height="18" rx="3" fill="none" stroke="#fff" stroke-width="3"/></svg>134 <svg width="34" height="34"><polygon points="6,26 28,26 17,6" fill="none" stroke="#fff" stroke-width="3"/></svg>135 <svg width="34" height="34"><circle cx="17" cy="17" r="3" fill="#fff"/></svg>136 </div>137 </div>138 139 <div class="logo">Booking.com</div>140 141 <div class="top-icons">142 <div class="icon-btn">143 <!-- chat bubble -->144 <svg width="34" height="34" class="icon-white" viewBox="0 0 34 34">145 <path d="M6 8h22v14H14l-6 6V8z" stroke="#fff" stroke-width="2" fill="none"/>146 </svg>147 </div>148 <div class="icon-btn" style="position:relative;">149 <!-- bell -->150 <svg width="34" height="34" class="icon-white" viewBox="0 0 34 34">151 <path d="M17 28c6 0 10-4 10-10v-4c0-4-3-7-7-8-1-2-5-2-6 0-4 1-7 4-7 8v4c0 6 4 10 10 10z" stroke="#fff" stroke-width="2" fill="none"/>152 </svg>153 <div class="badge">1</div>154 </div>155 </div>156 157 <div class="tabs">158 <div class="tab-item">159 <svg class="tab-icon" viewBox="0 0 70 48">160 <rect x="8" y="18" width="54" height="18" rx="3" fill="none" stroke="#E5ECFF" stroke-width="3"/>161 <rect x="12" y="12" width="10" height="6" rx="2" fill="none" stroke="#E5ECFF" stroke-width="3"/>162 </svg>163 <div>Stays</div>164 </div>165 166 <div class="tab-active">167 <svg width="56" height="42" viewBox="0 0 56 42">168 <path d="M6 28l18-6 10 6 16 0-10-8 6-6-8-2-8 10-12-8-4 6z" fill="#fff"/>169 </svg>170 <div class="tab-label">Flights</div>171 </div>172 173 <div class="tab-item">174 <svg class="tab-icon" viewBox="0 0 70 48">175 <rect x="12" y="20" width="46" height="16" rx="8" fill="none" stroke="#E5ECFF" stroke-width="3"/>176 <circle cx="22" cy="38" r="6" fill="none" stroke="#E5ECFF" stroke-width="3"/>177 <circle cx="48" cy="38" r="6" fill="none" stroke="#E5ECFF" stroke-width="3"/>178 </svg>179 <div>Car rental</div>180 </div>181 182 <div class="tab-item">183 <svg class="tab-icon" viewBox="0 0 70 48">184 <rect x="8" y="8" width="54" height="32" rx="6" fill="none" stroke="#E5ECFF" stroke-width="3"/>185 <text x="14" y="29" fill="#E5ECFF" font-size="18" font-family="Arial">TAXI</text>186 </svg>187 <div>Taxi</div>188 </div>189 </div>190 </div>191 192 <!-- Search Card -->193 <div class="search-card">194 <div class="radio-row">195 <div class="radio selected"><div class="dot"></div><div>Round-trip</div></div>196 <div class="radio"><div class="dot"></div><div>One-way</div></div>197 <div class="radio"><div class="dot"></div><div>Multi-city</div></div>198 </div>199 200 <div class="segment">201 <!-- From/To -->202 <div class="row" style="align-items:flex-start;">203 <div style="width:60px;">204 <!-- takeoff icon -->205 <svg width="60" height="60" viewBox="0 0 60 60">206 <path d="M8 34l36-10 6 6-30 8H8z" fill="none" stroke="#5C6A7B" stroke-width="3"/>207 </svg>208 </div>209 <div class="label">210 <div>New York · All airports</div>211 <div class="thin-line"></div>212 <div style="display:flex; align-items:center;">213 <div style="width:60px;">214 <!-- landing icon -->215 <svg width="60" height="60" viewBox="0 0 60 60">216 <path d="M10 28l36 10 6-6-30-8H10z" fill="none" stroke="#5C6A7B" stroke-width="3"/>217 </svg>218 </div>219 <div style="flex:1;">Paris · All airports</div>220 </div>221 </div>222 <div class="swap">223 <svg width="30" height="60" viewBox="0 0 30 60">224 <path d="M15 12l8 8-8 8M15 36l-8 8 8 8" stroke="#1E71FF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 </div>228 </div>229 230 <div class="segment">231 <div class="row">232 <svg width="54" height="54" viewBox="0 0 54 54">233 <rect x="6" y="10" width="42" height="32" rx="6" fill="none" stroke="#5C6A7B" stroke-width="3"/>234 <line x1="6" y1="18" x2="48" y2="18" stroke="#5C6A7B" stroke-width="3"/>235 </svg>236 <div class="label">Tue, Sep 19 - Mon, Sep 25</div>237 </div>238 </div>239 240 <div class="segment">241 <div class="row">242 <svg width="54" height="54" viewBox="0 0 54 54">243 <circle cx="27" cy="16" r="8" fill="none" stroke="#5C6A7B" stroke-width="3"/>244 <path d="M8 44c2-10 12-14 19-14 8 0 17 4 19 14" fill="none" stroke="#5C6A7B" stroke-width="3"/>245 </svg>246 <div class="label">1 adult, Economy</div>247 </div>248 </div>249 250 <div class="search-btn">Search</div>251 </div>252 253 <!-- Toggle -->254 <div class="toggle-row">255 <div>Direct flights only</div>256 <div class="toggle"></div>257 </div>258 259 <!-- Nearby options -->260 <div class="nearby-title">Nearby options for tonight</div>261 <div class="cards">262 <div class="img-card">263 <div class="img-placeholder">[IMG: Hotel room]</div>264 </div>265 <div class="img-card">266 <div class="img-placeholder">[IMG: Hotel room]</div>267 </div>268 </div>269 270 <!-- Bottom navigation -->271 <div class="bottom-bar">272 <div class="nav-item nav-active">273 <svg class="nav-icon" viewBox="0 0 64 64">274 <circle cx="28" cy="28" r="18" fill="none" stroke="#0A51B7" stroke-width="4"/>275 <line x1="44" y1="44" x2="60" y2="60" stroke="#0A51B7" stroke-width="4"/>276 </svg>277 <div>Search</div>278 </div>279 <div class="nav-item">280 <svg class="nav-icon" viewBox="0 0 64 64">281 <path d="M12 20h40v30H12z" fill="none" stroke="#666" stroke-width="4"/>282 <path d="M12 20l20 16 20-16" fill="none" stroke="#666" stroke-width="4"/>283 </svg>284 <div>Saved</div>285 </div>286 <div class="nav-item">287 <svg class="nav-icon" viewBox="0 0 64 64">288 <rect x="12" y="14" width="40" height="36" rx="6" fill="none" stroke="#666" stroke-width="4"/>289 <line x1="22" y1="14" x2="22" y2="50" stroke="#666" stroke-width="4"/>290 <line x1="42" y1="14" x2="42" y2="50" stroke="#666" stroke-width="4"/>291 </svg>292 <div>Trips</div>293 </div>294 <div class="nav-item">295 <div class="profile-dot">C</div>296 <div>Profile</div>297 </div>298 <div class="home-indicator"></div>299 </div>300 301</div>302</body>303</html>