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<title>Summary UI</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#F3F5F7;13 }14 15 /* Header */16 .header {17 position:relative;18 background:#0A4E78;19 height:210px;20 color:#fff;21 }22 .status-pad { height:84px; }23 .appbar {24 height:126px;25 display:flex; align-items:center;26 padding:0 36px;27 }28 .appbar .title {29 font-size:48px; font-weight:600; margin-left:20px;30 }31 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }32 .spacer { flex:1; }33 34 /* Generic card */35 .card {36 background:#fff; border-radius:36px;37 box-shadow:0 10px 18px rgba(0,0,0,0.12);38 margin: -36px 24px 24px 24px;39 padding:32px 36px;40 }41 42 /* Trip header card content */43 .route-title { font-size:42px; font-weight:700; color:#222; }44 .sub-info { display:flex; align-items:center; gap:18px; color:#777; font-size:30px; margin-top:8px; }45 .divider { height:1px; background:#E5E7EA; margin:26px -36px 18px -36px; }46 47 .row {48 display:flex; align-items:flex-start; gap:32px;49 }50 .time-block { width:280px; }51 .time-big { font-size:56px; font-weight:700; color:#111; }52 .time-small { font-size:30px; color:#8A8A8A; margin-top:8px; }53 .place-block { flex:1; }54 .place-title { font-size:44px; font-weight:700; color:#111; }55 .place-sub { font-size:32px; color:#8A8A8A; margin-top:6px; }56 57 /* Yellow trip pill */58 .trip-pill {59 position:relative;60 margin:6px 24px 0 24px;61 width:max-content;62 padding:16px 28px;63 background:#F5CF3C; color:#0B3A5C;64 border-radius:30px;65 display:flex; align-items:center; gap:16px;66 font-size:30px; font-weight:600;67 }68 .pill-icon { width:34px; height:34px; }69 70 /* Promo banner */71 .banner {72 position:relative;73 margin:12px 24px 24px 24px;74 background:#083A63;75 border-radius:32px;76 overflow:hidden;77 color:#fff;78 }79 .banner-inner { padding:34px; }80 .brand-row { display:flex; align-items:center; gap:14px; color:#fff; font-weight:700; }81 .brand-squares { display:flex; align-items:center; gap:6px; }82 .sq { width:10px; height:10px; background:#F4C431; border-radius:2px; }83 .brand-name { font-size:32px; }84 .promo-text { margin-top:26px; font-size:44px; line-height:1.25; font-weight:700; }85 .promo-text .highlight { color:#F4C431; }86 .check-row { margin-top:28px; display:flex; align-items:center; gap:18px; font-size:32px; color:#DDE7F2; }87 .checkbox { width:40px; height:40px; border:3px solid #DDE7F2; border-radius:8px; }88 89 .save-badge {90 position:absolute; right:24px; top:-18px;91 background:#F4C431; color:#083A63;92 border-radius:18px;93 padding:14px 22px;94 box-shadow:0 8px 14px rgba(0,0,0,0.15);95 font-weight:700;96 }97 .save-top { font-size:26px; }98 .save-amount { font-size:40px; margin-top:4px; }99 .banner-image {100 position:absolute; right:0; bottom:0;101 width:360px; height:210px;102 background:#E0E0E0; border-left:1px solid #BDBDBD; border-top:1px solid #BDBDBD;103 display:flex; align-items:center; justify-content:center;104 color:#757575; font-size:28px;105 clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);106 }107 108 /* Return card */109 .return-card { margin:24px 24px 24px 24px; padding:36px; }110 .return-title { font-size:56px; font-weight:700; color:#222; margin-bottom:28px; }111 112 .timeline {113 position:relative;114 display:grid;115 grid-template-columns: 280px 40px auto;116 row-gap:26px;117 align-items:start;118 }119 .line {120 position:absolute; left:320px; top:0; bottom:0;121 width:4px; background:#D0D4D8; border-radius:4px;122 }123 .dot { position:absolute; left:312px; width:20px; height:20px; background:#9AA0A6; border-radius:50%; }124 .dot.top { top:110px; }125 .dot.bottom { bottom:110px; }126 127 .carrier { margin-top:20px; color:#666; }128 .carrier .name { font-size:34px; font-weight:600; color:#666; }129 .carrier .operated { font-size:30px; color:#9AA0A6; margin-top:8px; }130 131 .chips { display:flex; gap:14px; margin-top:16px; }132 .chip { padding:10px 18px; border-radius:20px; font-size:30px; }133 .chip.lightblue { background:#E9F4FF; color:#2B6CA3; }134 .chip.gray { background:#EEE; color:#666; }135 136 /* Footer */137 .footer {138 position:absolute; left:0; bottom:0;139 width:100%; background:#fff;140 border-top:1px solid #E5E7EA;141 padding:30px 40px;142 display:flex; align-items:center; justify-content:space-between;143 }144 .price { color:#0A5D5A; }145 .price .amount { font-size:42px; font-weight:700; color:#1C1C1C; }146 .price .caption { font-size:28px; margin-top:8px; color:#0F8C7A; }147 148 .btn {149 background:#0A62A9; color:#fff;150 padding:30px 54px; border-radius:18px;151 font-size:40px; font-weight:800;152 box-shadow:0 10px 16px rgba(10,98,169,0.35);153 }154 155 /* Gesture bar */156 .gesture {157 position:absolute; bottom:10px; left:50%;158 transform:translateX(-50%);159 width:220px; height:10px; border-radius:20px; background:#BDBDBD;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Header -->167 <div class="header">168 <div class="status-pad"></div>169 <div class="appbar">170 <div class="icon-btn">171 <svg width="48" height="48" viewBox="0 0 48 48">172 <path d="M30 8 L14 24 L30 40" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>173 </svg>174 </div>175 <div class="title">Summary</div>176 <div class="spacer"></div>177 <div class="icon-btn">178 <svg width="48" height="48" viewBox="0 0 48 48">179 <circle cx="12" cy="12" r="5" fill="#FFFFFF"/>180 <circle cx="36" cy="8" r="5" fill="#FFFFFF"/>181 <circle cx="36" cy="40" r="5" fill="#FFFFFF"/>182 <path d="M16 12 L31 9 M16 12 L31 37" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>183 </svg>184 </div>185 </div>186 </div>187 188 <!-- Main card with route -->189 <div class="card">190 <div class="route-title">Paris ↔ Rome</div>191 <div class="sub-info">192 <div>Fri 20 Oct - Sun 22 Oct</div>193 <svg width="32" height="32" viewBox="0 0 32 32">194 <path d="M8 18c-4 0-6 2-6 5v3h12v-3c0-3-2-5-6-5zm0-2a5 5 0 100-10 5 5 0 000 10z" fill="#888"/>195 <path d="M22 18c-3 0-5 2-5 5v3h10v-3c0-3-2-5-5-5zm0-2a4 4 0 100-8 4 4 0 000 8z" fill="#A0A0A0"/>196 </svg>197 <div>3</div>198 </div>199 200 <div class="divider"></div>201 202 <div class="row">203 <div class="time-block">204 <div class="time-big">05:00 PM</div>205 <div class="time-small">20 Oct</div>206 </div>207 <div style="width:4px; height:88px; background:#D0D4D8; border-radius:4px; margin-top:8px;"></div>208 <div class="place-block">209 <div class="place-title">Fiumicino (FCO)</div>210 <div class="place-sub">Rome (Italy)</div>211 </div>212 </div>213 </div>214 215 <!-- Trip nights pill -->216 <div class="trip-pill">217 <svg class="pill-icon" viewBox="0 0 24 24">218 <path d="M12 22s8-6 8-12a8 8 0 10-16 0c0 6 8 12 8 12z" fill="#0B3A5C"/>219 <circle cx="12" cy="10" r="3" fill="#F5CF3C"/>220 </svg>221 <div>2 nights in Rome</div>222 </div>223 224 <!-- Promo banner -->225 <div class="banner">226 <div class="save-badge">227 <div class="save-top">Save up to</div>228 <div class="save-amount">$ 100</div>229 </div>230 231 <div class="banner-inner">232 <div class="brand-row">233 <div class="brand-squares">234 <div class="sq"></div><div class="sq"></div><div class="sq"></div>235 </div>236 <div class="brand-name">eDreams</div>237 </div>238 239 <div class="promo-text">240 Don't forget - we also have great deals on <span class="highlight">hotels</span>241 </div>242 243 <div class="check-row">244 <div class="checkbox"></div>245 <div>Show me hotels later</div>246 </div>247 </div>248 249 <div class="banner-image">[IMG: Hotel room photo]</div>250 </div>251 252 <!-- Return card -->253 <div class="card return-card">254 <div class="return-title">Return</div>255 256 <div class="timeline">257 <div class="line"></div>258 <div class="dot top"></div>259 <div class="dot bottom"></div>260 261 <!-- First leg -->262 <div class="time-block">263 <div class="time-big">02:15 PM</div>264 <div class="time-small">22 Oct</div>265 </div>266 <div></div>267 <div class="place-block">268 <div class="place-title">Fiumicino (FCO)</div>269 <div class="place-sub">Rome (Italy)</div>270 271 <div class="carrier">272 <div class="name">Wizz Air · W6 8515</div>273 <div class="operated">Operated by Wizz Air Malta</div>274 </div>275 276 <div class="chips">277 <div class="chip lightblue">2 h 10 min</div>278 <div class="chip gray">Economy</div>279 </div>280 281 <div class="chips" style="margin-top:14px;">282 <div class="chip gray">Small bag included</div>283 </div>284 </div>285 286 <!-- Second leg -->287 <div class="time-block" style="margin-top:80px;">288 <div class="time-big">04:25 PM</div>289 <div class="time-small">22 Oct</div>290 </div>291 <div></div>292 <div class="place-block" style="margin-top:80px;">293 <div class="place-title">Orly (ORY)</div>294 <div class="place-sub">Paris (France)</div>295 </div>296 </div>297 </div>298 299 <!-- Footer price and button -->300 <div class="footer">301 <div class="price">302 <div class="amount">$ 889.96</div>303 <div class="caption">Final Prime price</div>304 </div>305 <div class="btn">CONTINUE</div>306 </div>307 308 <div class="gesture"></div>309</div>310</body>311</html>