GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render - Google Flights Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EAEAEA; font-family: Arial, Helvetica, sans-serif;13 }14 15 /* Generic */16 .row { display: flex; align-items: center; }17 .muted { color: #A0A0A0; }18 .accent { color: #66AAFF; }19 .pad-h { padding: 0 40px; }20 .divider { height: 1px; background: #2A2A2A; margin: 8px 0; }21 .rounded { border-radius: 24px; }22 .chip {23 background: #242424; color: #DADADA; border: 1px solid #363636;24 padding: 22px 28px; border-radius: 18px; margin-right: 18px;25 display: inline-flex; align-items: center; gap: 16px; font-size: 36px;26 }27 .field {28 background: #1E1E1E; border: 1px solid #3A3A3A; border-radius: 22px;29 height: 140px; display: flex; align-items: center; padding: 0 40px; color: #E6E6E6;30 font-size: 48px;31 }32 .field .label { color: #B5B5B5; font-size: 38px; margin-right: 28px; }33 .caret { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 18px solid #9E9E9E; margin-left: 14px; }34 .title { font-size: 64px; font-weight: 700; }35 .sub { font-size: 36px; color: #BFBFBF; }36 37 /* Status bar */38 .status-bar {39 height: 96px; display: flex; align-items: center; justify-content: space-between;40 padding: 0 36px; color: #DADADA; font-size: 42px; background: #1A1A1A;41 }42 .status-icons svg { margin-left: 28px; }43 44 /* Browser bar */45 .browser-bar {46 height: 150px; background: #2A2A2A; color: #EDEDED;47 display: flex; align-items: center; justify-content: space-between; padding: 0 28px;48 font-size: 40px;49 }50 .browser-left { display: flex; align-items: center; gap: 24px; }51 .browser-title { max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }52 .browser-right { display: flex; align-items: center; gap: 30px; }53 54 /* Google header */55 .g-header { height: 130px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }56 .g-brand { display: flex; align-items: center; gap: 24px; font-size: 56px; font-weight: 700; }57 .g-actions { display: flex; align-items: center; gap: 36px; }58 .avatar { width: 72px; height: 72px; border-radius: 50%; background: #1AAE9F; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; }59 60 /* Tabs */61 .tabs { display: flex; align-items: center; gap: 50px; padding: 22px 36px 0; font-size: 44px; color: #BEBEBE; }62 .tab-active { color: #EAEAEA; position: relative; }63 .tab-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 8px; background: #5C8DFF; border-radius: 8px; }64 65 /* Search controls */66 .search-controls { padding: 28px 36px; display: flex; align-items: center; gap: 40px; color: #D5D5D5; font-size: 44px; }67 .sc-item { display: flex; align-items: center; gap: 16px; }68 .swap { width: 90px; height: 90px; background: #2B2B2B; border: 1px solid #3A3A3A; border-radius: 50%;69 display: flex; align-items: center; justify-content: center; margin: 0 24px; }70 .fields-wrap { padding: 10px 36px; }71 .fields-grid { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 24px; }72 .date-row { padding: 18px 36px; }73 .filters { padding: 18px 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }74 .filters .chip:first-child { padding-left: 24px; }75 76 /* Info card */77 .info-card {78 margin: 36px; padding: 40px; border-radius: 26px;79 background: #1E2A3A; color: #EAEAEA; display: flex; align-items: center; justify-content: space-between;80 border: 1px solid #304761;81 }82 .info-left { display: flex; align-items: center; gap: 24px; font-size: 48px; }83 .down { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 22px solid #86B3FF; }84 85 /* Section title */86 .section { padding: 8px 36px; }87 .section .title-row { display: flex; align-items: center; justify-content: space-between; }88 .title-row .right-mini { display: flex; align-items: center; gap: 12px; color: #9FB4C6; }89 90 /* Result cards */91 .card {92 margin: 24px 36px; background: #1B1B1B; border: 1px solid #2F2F2F; border-radius: 26px;93 padding: 30px; color: #ECECEC;94 }95 .card .top { display: flex; align-items: center; justify-content: space-between; }96 .times { display: flex; align-items: center; gap: 28px; font-size: 56px; }97 .stations { color: #A8A8A8; font-size: 34px; margin-top: 6px; }98 .price { font-size: 56px; font-weight: 700; }99 .info-row { display: flex; align-items: center; gap: 18px; margin-top: 24px; color: #CFCFCF; font-size: 38px; flex-wrap: wrap; }100 .logo {101 width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 12px;103 margin-right: 18px;104 }105 .badge {106 background: #274E39; color: #CFF3D4; border: 1px solid #3D6A51;107 padding: 12px 18px; border-radius: 16px; font-size: 34px;108 }109 110 /* Bottom gesture bar */111 .gesture {112 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);113 width: 320px; height: 12px; background: #E4E4E4; border-radius: 8px; opacity: 0.35;114 }115 116 /* Simple svg helpers */117 .icon { width: 48px; height: 48px; fill: none; stroke: #CFCFCF; stroke-width: 6px; }118 .icon-fill { width: 48px; height: 48px; fill: #CFCFCF; }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div>2:02</div>127 <div class="status-icons row">128 <!-- simple status icons -->129 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>130 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/></svg>131 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18"/></svg>132 <div class="row" style="gap:18px; font-size: 36px;">133 <span>100%</span>134 <svg class="icon" viewBox="0 0 24 24"><path d="M6 7h12v10H6z"/><path d="M16 7v4" /></svg>135 </div>136 </div>137 </div>138 139 <!-- Browser Bar -->140 <div class="browser-bar">141 <div class="browser-left">142 <!-- close/back X -->143 <svg class="icon" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>144 <!-- lock -->145 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg>146 <div class="browser-title">Stuttgart to Berlin | Google...</div>147 <div class="muted">google.com</div>148 </div>149 <div class="browser-right">150 <!-- share -->151 <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 12l8-6M8 12l8 6"/></svg>152 <!-- bookmark -->153 <svg class="icon-fill" viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"/></svg>154 <!-- more -->155 <svg class="icon-fill" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>156 </div>157 </div>158 159 <!-- Google Header -->160 <div class="g-header">161 <div class="g-brand">162 <!-- menu -->163 <svg class="icon-fill" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="17" width="18" height="2"/></svg>164 <div>Google</div>165 </div>166 <div class="g-actions">167 <!-- sun -->168 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.5 4.5l3 3M16.5 16.5l3 3M4.5 19.5l3-3M19.5 4.5l-3 3"/></svg>169 <!-- grid -->170 <svg class="icon" viewBox="0 0 24 24"><path d="M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h6v6h-6z"/></svg>171 <!-- avatar -->172 <div class="avatar">C</div>173 </div>174 </div>175 176 <!-- Tabs -->177 <div class="tabs">178 <div>Travel</div>179 <div>Explore</div>180 <div class="tab-active">Flights</div>181 <div>Hotels</div>182 <div>Holiday rentals</div>183 </div>184 185 <!-- Search Controls Summary -->186 <div class="search-controls">187 <div class="sc-item">188 <!-- arrow -->189 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h14M13 7l5 5-5 5"/></svg>190 <span>One-way</span>191 <div class="caret"></div>192 </div>193 <div class="sc-item">194 <!-- person -->195 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c2.5-4 13.5-4 16 0"/></svg>196 <span>2</span>197 <div class="caret"></div>198 </div>199 <div class="sc-item">200 <span>Economy</span>201 <div class="caret"></div>202 </div>203 </div>204 205 <!-- From / To fields -->206 <div class="fields-wrap">207 <div class="fields-grid">208 <div class="field">209 <!-- radio/marker -->210 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>211 <span>Stuttgart</span>212 </div>213 <div class="swap">214 <svg class="icon" viewBox="0 0 24 24"><path d="M5 8h10M13 5l3 3-3 3M19 16H9M11 19l-3-3 3-3"/></svg>215 </div>216 <div class="field">217 <!-- pin -->218 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-7-7-11a7 7 0 1114 0c0 4-7 11-7 11z"/><circle cx="12" cy="10" r="3"/></svg>219 <span>Berlin</span>220 </div>221 </div>222 </div>223 224 <!-- Date field -->225 <div class="date-row">226 <div class="field" style="width: 100%;">227 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4M17 3v4"/><path d="M3 10h18"/></svg>228 <span>Mon, 1 Jan</span>229 </div>230 </div>231 232 <!-- Filter chips -->233 <div class="filters">234 <div class="chip">235 <svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16M8 12h8M10 19h4"/></svg>236 <span>Stops</span>237 <div class="caret"></div>238 </div>239 <div class="chip">Airlines<div class="caret"></div></div>240 <div class="chip">Bags<div class="caret"></div></div>241 <div class="chip">Price<div class="caret"></div></div>242 </div>243 244 <!-- Prices card -->245 <div class="info-card">246 <div class="info-left">247 <svg class="icon-fill" viewBox="0 0 24 24"><rect x="3" y="11" width="4" height="10" rx="1"/><rect x="10" y="7" width="4" height="14" rx="1"/><rect x="17" y="3" width="4" height="18" rx="1"/></svg>248 <span>Prices are currently <span style="color:#FF8A7A;font-weight:700;">high</span></span>249 </div>250 <div class="down"></div>251 </div>252 253 <!-- Best options -->254 <div class="section">255 <div class="title-row">256 <div>257 <div class="title">Best options</div>258 <div class="sub">Ranked based on price and convenience</div>259 </div>260 <div class="right-mini">261 <svg class="icon" viewBox="0 0 24 24"><path d="M12 4v16M7 9l5-5 5 5"/></svg>262 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 7v6M12 17h0"/></svg>263 </div>264 </div>265 </div>266 267 <!-- Card 1 -->268 <div class="card">269 <div class="top">270 <div>271 <div class="times">272 <span>15:55</span>273 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h14M13 7l5 5-5 5"/></svg>274 <span>17:10</span>275 </div>276 <div class="stations">STR BER</div>277 </div>278 <div class="row" style="gap:18px; align-items:center;">279 <!-- crossed bag icon -->280 <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h10v12H7z"/><path d="M9 7V5a3 3 0 016 0v2"/><path d="M4 4l16 16"/></svg>281 <div class="price">£104</div>282 </div>283 </div>284 <div class="info-row">285 <div class="logo">[IMG: Eurowings Logo]</div>286 <div>Non-stop · 1 hr 15 min</div>287 <div class="muted">Eurowings · Lufthansa</div>288 <div class="badge">-8% emissions</div>289 </div>290 </div>291 292 <!-- Card 2 -->293 <div class="card">294 <div class="top">295 <div>296 <div class="times">297 <span>17:50</span>298 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h14M13 7l5 5-5 5"/></svg>299 <span>19:05</span>300 </div>301 <div class="stations">STR BER</div>302 </div>303 <div class="row" style="gap:18px; align-items:center;">304 <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h10v12H7z"/><path d="M9 7V5a3 3 0 016 0v2"/><path d="M4 4l16 16"/></svg>305 <div class="price">£104</div>306 </div>307 </div>308 <div class="info-row">309 <div class="logo">[IMG: Eurowings Logo]</div>310 <div>Non-stop · 1 hr 15 min</div>311 <div class="muted">Eurowings · Lufthansa</div>312 <div class="muted">Avg emissions</div>313 </div>314 </div>315 316 <!-- Card 3 (Train) -->317 <div class="card">318 <div class="top">319 <div>320 <div class="times">321 <span>16:51</span>322 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h14M13 7l5 5-5 5"/></svg>323 <span>22:32</span>324 </div>325 <div class="stations">Stuttgart Central … Berlin Central Station</div>326 </div>327 <div class="price">£156</div>328 </div>329 <div class="info-row">330 <div class="logo" style="background:#E0E0E0;">[IMG: DB Train Logo]</div>331 <div>Direct · 5 hrs 41 min</div>332 <div class="muted">Deutsche Bahn</div>333 <div class="badge" style="background:#214E33; border-color:#38664A; color:#CFEFD6;">Climate friendly</div>334 <div class="muted">Train service</div>335 </div>336 </div>337 338 <!-- Bottom gesture pill -->339 <div class="gesture"></div>340</div>341</body>342</html>