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>Fare Conditions - Mobile UI</title>7<style>8 :root{9 --navy:#122b6a;10 --navy-600:#183474;11 --blue:#2c5cc7;12 --muted:#6c7aa6;13 --light:#f2f4f8;14 --border:#d8dfec;15 --card:#e8f1ff;16 --text:#1d2b4d;17 --success:#ff6f6f;18 }19 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color:var(--text); }20 #render-target{21 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;22 }23 24 /* App bar */25 .appbar{26 position:relative;27 background:var(--navy);28 color:#fff;29 height:360px;30 padding:24px 40px 0;31 box-sizing:border-box;32 }33 .status{34 display:flex; align-items:center; justify-content:space-between;35 font-size:34px; opacity:0.95; padding:6px 0;36 }37 .status .left, .status .right{ display:flex; gap:26px; align-items:center;}38 .title-row{39 display:flex; align-items:center; justify-content:space-between;40 margin-top:30px;41 }42 .title-left{43 display:flex; align-items:flex-start; gap:24px;44 }45 .title-text .main{46 font-size:54px; font-weight:800; letter-spacing:0.2px;47 }48 .title-text .sub{49 margin-top:6px; color:#b8c5f3; font-size:30px; font-weight:600;50 }51 .icon-btn{52 width:90px; height:90px; display:flex; align-items:center; justify-content:center;53 }54 55 /* Floating price options teaser (partially visible) */56 .teaser-strip{57 position:relative;58 background:transparent;59 padding:0 28px;60 margin-top:16px;61 }62 .teaser-row{63 display:flex; gap:28px;64 }65 .pill{66 flex:0 0 300px;67 height:120px; border-radius:20px; border:3px solid #c8d6f3;68 display:flex; align-items:center; justify-content:center;69 font-size:44px; font-weight:800; color:#95a2c6; background:#ffffff;70 }71 .pill.active{72 background:#dfeafe; color:#2b4b8f; border-color:#94b3eb;73 }74 75 /* Main content */76 .content{77 position:absolute; left:0; right:0; top:360px; bottom:0;78 overflow:hidden;79 background:#ffffff;80 }81 .scroll{82 height:100%; overflow:auto; -webkit-overflow-scrolling:touch;83 }84 .section{85 padding:48px 46px;86 box-sizing:border-box;87 }88 .section-header{89 font-size:48px; font-weight:800; color:var(--navy);90 margin-bottom:28px;91 }92 93 .fare-cards{94 display:flex; gap:28px;95 }96 .fare-card{97 flex:1;98 min-height:260px;99 border:4px solid var(--border);100 border-radius:28px;101 padding:34px;102 box-sizing:border-box;103 color:#93a1c3;104 background:#ffffff;105 }106 .fare-card.active{107 background:#e6f0ff;108 border-color:#9db7ef;109 color:#274a8f;110 }111 .fare-card .label{112 font-size:44px; font-weight:800; margin-bottom:12px;113 }114 .fare-card .row{115 display:flex; align-items:center; gap:16px; color:#5a77b2; font-weight:700; font-size:34px;116 }117 .fare-card .price{118 margin-top:22px; font-size:44px; font-weight:800;119 }120 .fare-card.disabled{121 color:#cfd7ea;122 }123 .divider{124 height:18px; background:#eef1f7; border-top:1px solid #e5e9f2; border-bottom:1px solid #e5e9f2;125 }126 127 .terms-title{128 font-size:44px; font-weight:800; color:var(--navy); margin-bottom:16px;129 }130 .terms-body{131 font-size:36px; line-height:1.48; color:#44598f;132 }133 134 /* Summary panel */135 .summary{136 padding:40px 46px 32px;137 }138 .summary .head{139 display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;140 color:#3c4f86; font-size:40px; font-weight:700;141 }142 .summary .head .left{143 display:flex; gap:22px; align-items:center;144 }145 .summary .line{146 display:flex; align-items:center; justify-content:space-between;147 font-size:38px; color:#4b5e93; padding:12px 0;148 }149 .summary .dot{150 width:12px; height:12px; background:#4b5e93; border-radius:50%; margin-right:18px;151 display:inline-block; transform:translateY(-4px);152 }153 .summary .total{154 display:flex; align-items:flex-end; justify-content:space-between; margin-top:18px;155 }156 .summary .total .label{157 font-size:42px; color:var(--navy); font-weight:800;158 }159 .summary .total small{ color:#7d8bb6; font-weight:600; margin-left:10px; font-size:32px;}160 .summary .total .amount{161 font-size:48px; font-weight:900; color:var(--navy);162 }163 164 /* CTA area */165 .cta-area{166 position:sticky; bottom:0; background:#eef1f6; padding:28px 32px 26px; box-sizing:border-box;167 border-top:1px solid #e2e6f0;168 }169 .cta-btn{170 width:100%; background:#ff7676; color:#fff; border:none; height:120px; border-radius:28px;171 font-size:42px; font-weight:800;172 letter-spacing:0.2px;173 }174 175 /* Bottom navbar handle */176 .nav-bottom{177 position:absolute; left:0; right:0; bottom:0; height:110px; background:var(--navy);178 display:flex; align-items:center; justify-content:center;179 }180 .nav-bottom .handle{181 width:240px; height:12px; background:#e6e8f0; border-radius:10px; opacity:0.9;182 }183 184 /* Simple reset for buttons */185 button{ font-family:inherit; }186 /* Utility muted paragraph spacing */187 p{ margin:0 0 14px 0; }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Top App Bar -->194 <div class="appbar">195 <div class="status">196 <div class="left">197 <span>5:12</span>198 <!-- sun icon -->199 <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff" opacity="0.95"><circle cx="12" cy="12" r="4"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>200 <!-- mail icon -->201 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>202 <!-- sim icon -->203 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M9 8h6M9 12h6M9 16h6"/></svg>204 </div>205 <div class="right">206 <!-- wifi -->207 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M12 18a2 2 0 100 4 2 2 0 000-4zm-7-6a14 14 0 0114 0l-2 2a10 10 0 00-10 0l-2-2zm-3-4a20 20 0 0120 0l-2 2a16 16 0 00-16 0L2 8z"/></svg>208 <!-- battery -->209 <svg width="46" height="46" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">210 <rect x="2" y="5" width="20" height="14" rx="2" />211 <rect x="4" y="7" width="16" height="10" fill="#fff"/>212 <rect x="22" y="9" width="4" height="6" rx="1" stroke="#fff" />213 </svg>214 </div>215 </div>216 217 <div class="title-row">218 <div class="title-left">219 <div class="icon-btn">220 <!-- back arrow -->221 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#cbd6ff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">222 <path d="M15 18l-6-6 6-6"/>223 </svg>224 </div>225 <div class="title-text">226 <div class="main">Amsterdam… › Rotterdam Centraal</div>227 <div class="sub">Fri, Oct 20, 1 passenger</div>228 </div>229 </div>230 <div class="icon-btn" aria-label="share">231 <!-- share icon -->232 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#8ea1d9" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">233 <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>234 <path d="M8.6 10.9l6.8-3.8M8.6 13.1l6.8 3.8"/>235 </svg>236 </div>237 </div>238 239 <div class="teaser-strip">240 <div class="teaser-row">241 <div class="pill active">+$0</div>242 <div class="pill">+$14.14</div>243 </div>244 </div>245 </div>246 247 <!-- Content area -->248 <div class="content">249 <div class="scroll">250 251 <div class="section">252 <div class="section-header">Fare conditions</div>253 254 <div class="fare-cards">255 <div class="fare-card active">256 <div class="label">Standard</div>257 <div class="row">258 <!-- ticket icon -->259 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#4769b1" stroke-width="2">260 <path d="M3 7a2 2 0 012-2h14v6a2 2 0 010 4v6H5a2 2 0 01-2-2v-3a2 2 0 000-4V7z"/>261 <path d="M10 7v10"/>262 </svg>263 <span>Semi refundable</span>264 </div>265 <div class="price">+$0</div>266 </div>267 268 <div class="fare-card disabled" style="display:flex; align-items:center; justify-content:center; text-align:left;">269 <div style="max-width:460px; font-size:40px; line-height:1.35;">270 There is only 1 fare available for this journey271 </div>272 </div>273 </div>274 </div>275 276 <div class="section">277 <div class="terms-title">Fare terms</div>278 <div class="terms-body">279 <p><strong>Standard</strong></p>280 <p>Ticket is only valid for the chosen route and departure date on any train except high-speed trains.</p>281 <p>This ticket can be refunded for free up until the day before departure. This ticket cannot be refunded on the departure date. Exchanges are only possible through cancellation and re-booking.</p>282 </div>283 </div>284 285 <div class="divider"></div>286 287 <div class="summary">288 <div class="head">289 <div class="left">290 <!-- person icon -->291 <svg width="46" height="46" viewBox="0 0 24 24" fill="#4b5e93">292 <circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0116 0" />293 </svg>294 <span>1 passenger</span>295 </div>296 <!-- collapse up icon -->297 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#8aa0d2" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">298 <path d="M18 14l-6-6-6 6"/>299 </svg>300 </div>301 302 <div class="line">303 <span><span class="dot"></span>Adult 1</span>304 <span></span>305 </div>306 307 <div class="line" style="margin-top:10px;">308 <span>Tickets x 1</span>309 <span style="font-weight:800; color:#274a8f;">$23.34</span>310 </div>311 312 <div class="total">313 <div class="label">Total <small>(taxes included)</small></div>314 <div class="amount">$23.34</div>315 </div>316 </div>317 318 <div class="cta-area">319 <button class="cta-btn">Go to passenger details</button>320 </div>321 322 <!-- spacer to keep content above bottom bar -->323 <div style="height:110px;"></div>324 </div>325 </div>326 327 <div class="nav-bottom">328 <div class="handle"></div>329 </div>330 331</div>332</body>333</html>