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>Trip Details Mock</title>7<style>8 :root{9 --navy:#112a63;10 --light:#F4F6FA;11 --text:#10224a;12 --muted:#6d7a96;13 --card:#ffffff;14 --accent:#2a64ff;15 --border:#E2E6EF;16 }17 body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color:var(--text);}18 #render-target{19 width:1080px;height:2400px;position:relative;overflow:hidden;background:var(--light);border-radius:0;20 }21 22 /* Top app bar */23 .header{24 background:var(--navy);25 color:#fff;26 height:520px;27 padding:28px 40px 0 40px;28 box-sizing:border-box;29 }30 .statusbar{31 display:flex;align-items:center;justify-content:space-between;32 font-weight:700;font-size:40px;letter-spacing:0.5px;33 }34 .status-icons{display:flex;gap:28px;align-items:center;}35 .dot{opacity:.7}36 .icon{width:44px;height:44px;fill:#fff;opacity:.9}37 .top-row{38 display:flex;align-items:center;gap:24px;margin-top:36px;39 }40 .title-wrap{margin-top:8px}41 .title{font-size:56px;font-weight:800;line-height:1.2}42 .subtitle{font-size:34px;opacity:.8;margin-top:8px}43 44 /* Trip card */45 .trip-card{46 position:absolute;left:40px;right:40px;top:340px;47 background:var(--card);border-radius:28px;box-shadow:0 10px 24px rgba(16,34,74,.12);48 padding:34px 36px 32px 36px;49 }50 .pill{display:inline-flex;align-items:center;gap:14px;color:#6c84c7;font-weight:800;font-size:32px;letter-spacing:.5px;text-transform:uppercase}51 .pill-dot{width:14px;height:14px;background:#6c84c7;border-radius:50%}52 .time-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px}53 .time-left{display:flex;align-items:center;gap:18px;font-weight:800;color:var(--text)}54 .big-time{font-size:46px}55 .moon{width:40px;height:40px;fill:#f6c166}56 .chev{width:40px;height:40px;fill:#2f477a;opacity:.7}57 .route{margin-top:10px;color:#3f527a;font-size:34px}58 .card-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:26px}59 .logo{60 width:220px;height:70px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:8px;61 display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px62 }63 .dur{font-size:36px;color:#3f527a}64 65 /* Sections */66 .section{padding:40px 40px}67 .section h2{margin:24px 0 26px 0;font-size:56px;color:var(--navy)}68 .cards{display:flex;gap:28px}69 .cond{flex:1;border:2px solid #d3dcee;border-radius:22px;background:#fff;min-height:320px;padding:34px}70 .cond.primary{background:#e7f1ff;border-color:#a9c0ea}71 .cond h3{margin:0 0 18px 0;color:#2e5299;font-size:44px}72 .features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;color:#2e5299;font-size:36px}73 .feature{display:flex;align-items:center;gap:16px}74 .ft-ico{width:36px;height:36px;fill:#2e5299}75 .price{margin-top:22px;font-weight:800;color:#2e5299;font-size:40px}76 .muted-box{display:flex;align-items:center;justify-content:center;color:#c9ceda;font-size:40px;text-align:center}77 78 .subhead{font-weight:800;color:var(--navy);font-size:44px;margin:30px 40px 0 40px}79 .para{color:#4b5f88;font-size:36px;line-height:1.5;margin:18px 40px 24px 40px}80 .divider{height:2px;background:#E6E9F2;margin:28px 0}81 82 /* Fare cards */83 .fare-section{padding:10px 40px 240px 40px}84 .fare-title{font-size:56px;color:var(--navy);font-weight:800;margin:10px 0 24px 0}85 .fare-cards{display:flex;gap:28px}86 .fare{flex:0 0 45%;border:2px solid #d3dcee;border-radius:22px;background:#fff;padding:30px}87 .fare.active{background:#e7f1ff;border-color:#a9c0ea}88 .fare h4{margin:0 0 16px 0;color:#2e5299;font-size:44px}89 .fare .fare-price{color:#2e5299;font-weight:800;font-size:42px}90 91 /* Bottom sheet */92 .sheet{93 position:absolute;left:0;right:0;bottom:120px;background:#fff;padding:20px 40px 26px 40px;94 box-shadow:0 -8px 20px rgba(16,34,74,.12);border-top-left-radius:24px;border-top-right-radius:24px;95 }96 .sheet .note{color:#64759a;font-size:34px;margin-bottom:16px}97 .cta{98 background:#f46360;color:#fff;border:none;border-radius:20px;height:110px;font-size:44px;font-weight:800;width:100%;99 }100 101 /* Bottom nav area */102 .nav-bottom{103 position:absolute;left:0;right:0;bottom:0;height:120px;background:#0d214f;display:flex;align-items:center;justify-content:center;104 }105 .home-indicator{width:260px;height:12px;background:#fff;border-radius:6px;opacity:.9}106</style>107</head>108<body>109<div id="render-target">110 111 <div class="header">112 <div class="statusbar">113 <div>6:14</div>114 <div class="status-icons">115 <svg class="icon" viewBox="0 0 24 24"><circle cx="4" cy="12" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="16" cy="12" r="2"/><circle cx="22" cy="12" r="2"/></svg>116 <div class="dot">•</div>117 <svg class="icon" viewBox="0 0 24 24"><path d="M3 8l9-5 9 5v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>118 <svg class="icon" viewBox="0 0 24 24"><path d="M6 2h12l-1 18H7L6 2zm6 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>119 </div>120 </div>121 122 <div class="top-row">123 <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>124 <div class="title-wrap">125 <div class="title">Toronto, ON › Rice Lak...</div>126 <div class="subtitle">Sun, Oct 22, 3 passengers</div>127 </div>128 <div style="flex:1"></div>129 <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.83-4H15v12a3 3 0 1 0 2 0V8zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#fff"/></svg>130 </div>131 </div>132 133 <div class="trip-card">134 <div class="pill"><span class="pill-dot"></span> OUTBOUND</div>135 <div class="time-row">136 <div class="time-left">137 <div class="big-time">Sun, Oct 22 9:55 AM - 4:12 PM</div>138 <svg class="moon" viewBox="0 0 24 24"><path d="M21 12.5A8.5 8.5 0 0 1 9.5 21 8.5 8.5 0 1 0 21 12.5z"/></svg>139 </div>140 <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>141 </div>142 <div class="route">Toronto (Union Station), Toronto, ON › Rice Lake, Winnitoba, MB</div>143 <div class="card-bottom">144 <div class="logo">[IMG: VIA Rail logo]</div>145 <div class="dur">31h 17m • 0 transfers</div>146 </div>147 </div>148 149 <div class="section" style="margin-top:290px">150 <h2>Class conditions</h2>151 <div class="cards">152 <div class="cond primary">153 <h3>Economy</h3>154 <ul class="features">155 <li class="feature">156 <svg class="ft-ico" viewBox="0 0 24 24"><path d="M2 8a6 6 0 0 1 10 4h6a4 4 0 0 1 4 4H2a6 6 0 0 1 0-12z"/></svg>157 Free Wi‑Fi158 </li>159 <li class="feature">160 <svg class="ft-ico" viewBox="0 0 24 24"><path d="M7 2h10v14H7zM4 18h16v4H4z"/></svg>161 Power plugs162 </li>163 <li class="feature">164 <svg class="ft-ico" viewBox="0 0 24 24"><path d="M3 3h2v11H3zM8 3h2v11H8zM13 3h7c-1 3-1 6 0 9h-7z"/></svg>165 Food available166 </li>167 <li class="feature">168 <svg class="ft-ico" viewBox="0 0 24 24"><path d="M4 12h10a3 3 0 0 1 3 3v5H4v-8zM2 9h12v2H2z"/></svg>169 Extra legroom170 </li>171 </ul>172 <div class="price">+$0</div>173 </div>174 <div class="cond muted-box">175 There is only 1 class available for this journey176 </div>177 </div>178 </div>179 180 <div class="subhead">You also get</div>181 <div class="para">Large reclinable seats, wifi on-board, at seat power outlet & snack and bar services available.</div>182 183 <div class="divider"></div>184 185 <div class="fare-section">186 <div class="fare-title">Select your fare</div>187 <div class="fare-cards">188 <div class="fare active">189 <h4>Escape</h4>190 <div class="fare-price">+$0</div>191 </div>192 <div class="fare">193 <h4>Economy</h4>194 <div class="fare-price">+$34.04</div>195 </div>196 </div>197 </div>198 199 <div class="sheet">200 <div class="note">One-way ticket for 3 passengers</div>201 <button class="cta">Go to VIA Rail</button>202 </div>203 204 <div class="nav-bottom">205 <div class="home-indicator"></div>206 </div>207 208</div>209</body>210</html>