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 Results - Modal</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; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .statusbar {17 height: 90px;18 padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #4a4a4a; font-size: 34px;21 }22 .status-icons { display: flex; gap: 28px; align-items: center; }23 .icon-battery, .icon-signal, .icon-wifi {24 width: 40px; height: 28px;25 border: 3px solid #4a4a4a; border-radius: 6px;26 }27 .icon-battery::after {28 content: ""; position: absolute; width: 6px; height: 16px; right: -10px; top: 6px;29 background: #4a4a4a; border-radius: 2px;30 }31 32 /* Header */33 .header {34 padding: 16px 36px 24px 36px;35 border-bottom: 1px solid #e6e6e6;36 background: #f8f9fb;37 }38 .header-row { display: flex; align-items: center; gap: 24px; }39 .back-btn {40 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;41 background: transparent;42 }43 .title {44 font-size: 52px; font-weight: 700; color: #222;45 }46 .subtitle {47 margin-top: 6px; margin-left: 96px;48 font-size: 30px; color: #7b8b91;49 }50 51 /* Tabs / filters */52 .tabs { display: flex; gap: 24px; padding: 24px 36px; background: #f0f3f5; border-bottom: 1px solid #e3e7ea; }53 .pill {54 min-width: 220px; padding: 20px 26px; border-radius: 22px;55 background: #ffffff; border: 2px solid #d3d8dc; color: #7a8a91; text-align: center;56 box-shadow: 0 1px 0 rgba(0,0,0,0.03);57 }58 .pill .label { font-size: 28px; font-weight: 700; letter-spacing: 1px; }59 .pill .sublabel { font-size: 24px; margin-top: 8px; color: #8fa1a8; }60 .pill.selected {61 background: #33a7aa; border-color: #33a7aa; color: #fff;62 }63 .pill.selected .sublabel { color: #e6f3f3; }64 65 /* Cards */66 .list { padding: 24px 36px; }67 .card {68 background: #ffffff; border: 1px solid #e1e6ea; border-radius: 28px;69 box-shadow: 0 6px 20px rgba(0,0,0,0.06);70 padding: 30px; margin-bottom: 28px; position: relative;71 }72 .card-header {73 display: flex; align-items: center; justify-content: space-between; color: #6b7f86; font-weight: 700;74 letter-spacing: 0.5px; font-size: 28px; margin-bottom: 24px;75 }76 .card-header .left { display: flex; align-items: center; gap: 18px; }77 .card-header .right { display: flex; align-items: center; gap: 24px; }78 .rating { display: flex; align-items: center; gap: 8px; color: #2aa3a8; font-weight: 700; }79 .price { color: #2aa3a8; font-weight: 800; font-size: 34px; }80 81 .times {82 display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; gap: 24px;83 color: #2d3b41;84 }85 .time {86 font-size: 48px; font-weight: 800;87 }88 .travel-arrow {89 display: flex; align-items: center; justify-content: center; color: #a8b3b8;90 font-size: 26px;91 }92 .stations { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; color: #7e8f96; font-size: 28px; }93 94 /* Second card chips */95 .chips { display: flex; gap: 18px; margin-top: 22px; }96 .chip {97 padding: 16px 26px; border-radius: 24px; border: 2px solid #d7dee2; color: #6f848b; font-size: 28px; background: #f6fafb;98 }99 .chip.teal { background: #d9f0ef; border-color: #bde4e3; color: #2aa3a8; }100 101 /* Overlay modal */102 .overlay {103 position: absolute; inset: 0; background: rgba(0,0,0,0.25);104 }105 .modal {106 position: absolute; left: 50%; top: 48%;107 transform: translate(-50%, -50%);108 width: 900px; background: #fff; border-radius: 36px;109 box-shadow: 0 14px 40px rgba(0,0,0,0.2);110 padding: 48px; text-align: center;111 }112 .modal .close {113 position: absolute; right: 24px; top: 24px;114 width: 64px; height: 64px; border-radius: 32px; background: #eef1f3;115 display: flex; align-items: center; justify-content: center;116 border: 2px solid #e1e4e7;117 }118 .ring {119 width: 520px; height: 520px; margin: 10px auto 30px auto; border-radius: 50%;120 background: conic-gradient(#2aa3a8 0 290deg, #cfd6db 290deg 360deg);121 display: flex; align-items: center; justify-content: center;122 }123 .ring::after {124 content: ""; width: 460px; height: 460px; border-radius: 50%; background: #fff; display: block;125 }126 .logo-holder {127 position: absolute; width: 300px; height: 300px; left: 50%; top: 50%;128 transform: translate(-50%, -50%);129 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;130 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;131 }132 .modal h2 {133 margin: 24px 0 16px 0; font-size: 44px; color: #3a4246; font-weight: 800;134 }135 .modal p {136 margin: 6px 0; font-size: 30px; color: #6e7d84;137 }138 139 /* Small SVG helpers */140 svg { display: block; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="statusbar">148 <div>9:42</div>149 <div class="status-icons">150 <div style="width: 40px; height: 40px; border-radius: 50%; border: 3px solid #4a4a4a;"></div>151 <div style="width: 46px; height: 32px; border: 3px solid #4a4a4a; border-radius: 6px;"></div>152 <div class="icon-wifi" style="border-radius: 50%; border: 3px solid #4a4a4a; width: 34px; height: 34px;"></div>153 <div class="icon-battery" style="position: relative;"></div>154 </div>155 </div>156 157 <!-- Header -->158 <div class="header">159 <div class="header-row">160 <div class="back-btn">161 <svg width="48" height="48" viewBox="0 0 24 24">162 <path d="M15 5 L8 12 L15 19" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 </div>165 <div>166 <div class="title">New York to Newark</div>167 <div class="subtitle">Departure on Monday, 8/14</div>168 </div>169 </div>170 </div>171 172 <!-- Tabs -->173 <div class="tabs">174 <div class="pill">175 <div class="label" style="display:flex; align-items:center; justify-content:center; gap:10px;">176 <svg width="28" height="28" viewBox="0 0 24 24">177 <path d="M5 7 H19 M9 12 H19 M13 17 H19" stroke="#7a8a91" stroke-width="2" stroke-linecap="round"/>178 <circle cx="5" cy="7" r="2" fill="#7a8a91"/>179 <circle cx="9" cy="12" r="2" fill="#7a8a91"/>180 <circle cx="13" cy="17" r="2" fill="#7a8a91"/>181 </svg>182 FILTERS183 </div>184 </div>185 186 <div class="pill selected">187 <div class="label">WANDERLIST</div>188 <div class="sublabel">48 trips</div>189 </div>190 191 <div class="pill">192 <div class="label">CHEAPEST</div>193 <div class="sublabel">$5.00</div>194 </div>195 196 <div class="pill">197 <div class="label">EARLIEST</div>198 <div class="sublabel">3:20a</div>199 </div>200 </div>201 202 <!-- List of results -->203 <div class="list">204 205 <!-- Card 1 -->206 <div class="card">207 <div class="card-header">208 <div class="left">209 <svg width="40" height="40" viewBox="0 0 24 24">210 <rect x="4" y="6" width="16" height="10" rx="2" ry="2" fill="#a7b7bd"/>211 <circle cx="8" cy="18" r="1.5" fill="#a7b7bd"/>212 <circle cx="16" cy="18" r="1.5" fill="#a7b7bd"/>213 </svg>214 <div>AMTRAK NORTHEAST REG...</div>215 </div>216 <div class="right">217 <div class="rating">218 <svg width="26" height="26" viewBox="0 0 24 24">219 <path d="M12 3 L14.8 9.2 L21.5 9.5 L16 13.6 L18 20 L12 16.8 L6 20 L8 13.6 L2.5 9.5 L9.2 9.2 Z" fill="#2aa3a8"/>220 </svg>221 4.5222 </div>223 <div class="price">$5.00</div>224 </div>225 </div>226 227 <div class="times">228 <div class="time">3:20 AM</div>229 <div class="travel-arrow">230 <svg width="160" height="30" viewBox="0 0 160 30">231 <line x1="0" y1="15" x2="140" y2="15" stroke="#b9c4c9" stroke-width="3" stroke-linecap="round"/>232 <polygon points="145,15 135,10 135,20" fill="#b9c4c9"/>233 <text x="40" y="12" font-size="20" fill="#a8b3b8">0h 15m</text>234 </svg>235 </div>236 <div class="time">3:35 AM</div>237 </div>238 <div class="stations">239 <div>NY Moynihan Train Hall ...</div>240 <div style="text-align:right;">Newark Penn Station</div>241 </div>242 </div>243 244 <!-- Modal sits over cards, but cards continue underneath -->245 <!-- Card 2 (teaser, beneath modal) -->246 <div class="card" style="opacity: 0.65;">247 <div class="card-header">248 <div class="left">249 <svg width="40" height="40" viewBox="0 0 24 24">250 <rect x="3" y="7" width="18" height="9" rx="2" fill="#a7b7bd"/>251 <circle cx="7" cy="18" r="1.5" fill="#a7b7bd"/>252 <circle cx="17" cy="18" r="1.5" fill="#a7b7bd"/>253 </svg>254 <div>FLIXBUS US</div>255 </div>256 <div class="price">$17.99</div>257 </div>258 <div class="times">259 <div class="time">10:30 PM</div>260 <div class="travel-arrow">261 <svg width="160" height="30" viewBox="0 0 160 30">262 <line x1="0" y1="15" x2="140" y2="15" stroke="#b9c4c9" stroke-width="3" stroke-linecap="round"/>263 <polygon points="145,15 135,10 135,20" fill="#b9c4c9"/>264 <text x="30" y="12" font-size="20" fill="#a8b3b8">0h 20m</text>265 </svg>266 </div>267 <div class="time">10:50 PM</div>268 </div>269 <div class="stations">270 <div>300-310 W 31 St (SW C...)</div>271 <div style="text-align:right;">1 Raymond Plaza W</div>272 </div>273 <div class="chips">274 <div class="chip">Details ▼</div>275 <div class="chip">0 transfers</div>276 <div class="chip teal">E-ticket</div>277 </div>278 </div>279 </div>280 281 <!-- Overlay + Modal -->282 <div class="overlay"></div>283 <div class="modal">284 <div class="close">285 <svg width="28" height="28" viewBox="0 0 24 24">286 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#7d8a90" stroke-width="2.5" stroke-linecap="round"/>287 </svg>288 </div>289 290 <div class="ring"></div>291 <div class="logo-holder">[IMG: Green Monkey Logo]</div>292 293 <h2>Confirming availability...</h2>294 <p>Prices change often and tickets sell out.</p>295 <p>Thank you for your patience.</p>296 </div>297 298</div>299</body>300</html>