GD-ML/AndroidCode

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>Train Fare Selection</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Header */15  .app-header {16    background:#142e6f; color:#fff;17    height:360px; padding:36px 40px 24px 40px;18    box-sizing:border-box;19  }20  .status-row {21    display:flex; justify-content:space-between; align-items:center;22    font-weight:600; font-size:40px; opacity:0.95;23  }24  .status-icons { display:flex; align-items:center; gap:22px; }25  .title-row {26    margin-top:36px; display:flex; align-items:flex-start; justify-content:space-between;27  }28  .title-left { display:flex; gap:22px; align-items:flex-start; }29  .title-text h1 {30    margin:0; font-size:56px; line-height:1.2; letter-spacing:0.2px;31  }32  .title-text .sub {33    margin-top:6px; font-size:32px; opacity:0.85; font-weight:500;34  }35 36  /* Content */37  .content { padding:32px 36px 0 36px; }38  .cards-row { display:flex; gap:28px; }39  .feature-card {40    flex:1; min-height:380px; border-radius:24px; padding:28px;41    box-sizing:border-box;42    border:2px solid #b9c9ea; background:#eaf2ff; color:#3f5f9a;43  }44  .muted-card {45    flex:1; min-height:380px; border-radius:24px; padding:28px;46    box-sizing:border-box;47    border:2px solid #e2e6f2; background:#f5f7fb; color:#c7cede;48    display:flex; align-items:center; justify-content:center; text-align:center; font-size:38px;49  }50  .feat-item { display:flex; align-items:center; gap:18px; margin:18px 0; font-size:38px; }51  .price-note { margin-top:18px; font-weight:800; font-size:44px; color:#2b5bb2; }52 53  .section-title {54    color:#122a5f; font-weight:800; font-size:48px; margin:36px 0 16px 8px;55  }56  .desc { color:#6a7794; font-size:38px; line-height:1.5; margin:0 8px 28px 8px; }57 58  .divider { height:2px; background:#e6ebf5; margin:26px 0; }59 60  .fare-row { display:flex; gap:28px; padding:6px 8px 0 8px; }61  .fare-card {62    flex:1; min-height:240px; border-radius:24px; border:2px solid #d6e1f3; background:#ffffff;63    padding:26px; box-sizing:border-box;64  }65  .fare-card.selected { background:#eaf2ff; border-color:#9db7ea; }66  .fare-title { color:#3b66b8; font-weight:800; font-size:44px; }67  .fare-price { color:#2b5bb2; font-weight:800; font-size:44px; margin-top:26px; }68 69  .terms { padding:10px 8px; }70  .terms h3 { margin:8px 0 8px 0; color:#122a5f; font-size:44px; }71  .terms p { margin:0; color:#5d6e90; font-size:36px; line-height:1.45; }72 73  .totals {74    margin-top:14px; border-top:2px solid #e6ebf5; border-bottom:2px solid #e6ebf5;75    padding:22px 8px;76  }77  .row { display:flex; justify-content:space-between; align-items:center; padding:18px 0; }78  .row .label { color:#586a8e; font-size:40px; }79  .row .amount { color:#2a2e4b; font-size:40px; }80  .row.total .label { color:#122a5f; font-weight:800; }81  .row.total .amount { color:#122a5f; font-weight:900; font-size:48px; }82 83  .cta-area { padding:26px 28px 0 28px; }84  .cta-note { color:#6a7794; font-size:34px; margin:8px 10px 18px 10px; }85  .cta-btn {86    width:100%; height:128px; background:#f36a6a; color:#fff; border-radius:28px;87    display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:800;88    box-shadow:0 8px 16px rgba(243,106,106,0.25);89  }90 91  /* Bottom gesture pill and nav background */92  .bottom-area {93    position:absolute; left:0; right:0; bottom:0; height:140px; background:#0e224f;94  }95  .gesture-pill {96    position:absolute; left:50%; transform:translateX(-50%);97    bottom:78px; width:280px; height:14px; background:#e9e9ee; border-radius:14px; opacity:0.9;98  }99 100  /* Simple SVG icon style */101  .icon { width:40px; height:40px; display:inline-block; }102  .icon-lg { width:56px; height:56px; }103</style>104</head>105<body>106<div id="render-target">107  <!-- Header -->108  <div class="app-header">109    <div class="status-row">110      <div>6:14</div>111      <div class="status-icons">112        <!-- Simple status placeholders -->113        <svg class="icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="#ffffff"/></svg>114        <svg class="icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="#ffffff"/></svg>115        <svg class="icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="#ffffff"/></svg>116        <svg class="icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="#ffffff"/></svg>117        <svg class="icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="2" fill="#ffffff"/><circle cx="18" cy="12" r="2" fill="#ffffff"/></svg>118        <!-- WiFi -->119        <svg class="icon" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">120          <path d="M2 8c6-6 14-6 20 0" stroke-linecap="round"/>121          <path d="M5 11c4-4 10-4 14 0" stroke-linecap="round"/>122          <path d="M8 14c3-3 5-3 8 0" stroke-linecap="round"/>123          <circle cx="12" cy="18" r="1.6" fill="#fff"/>124        </svg>125        <!-- Battery -->126        <svg class="icon" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">127          <rect x="2" y="5" width="20" height="14" rx="2"></rect>128          <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#fff"></rect>129          <rect x="4" y="7" width="14" height="10" fill="#fff" stroke="none"></rect>130        </svg>131      </div>132    </div>133 134    <div class="title-row">135      <div class="title-left">136        <!-- Back arrow -->137        <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.8">138          <path d="M15 19L8 12l7-7" stroke-linecap="round" stroke-linejoin="round"/>139        </svg>140        <div class="title-text">141          <h1>Toronto, ON › Rice Lak...</h1>142          <div class="sub">Sun, Oct 22, 3 passengers</div>143        </div>144      </div>145      <!-- Share icon -->146      <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2">147        <circle cx="18" cy="5" r="3"></circle>148        <circle cx="6" cy="12" r="3"></circle>149        <circle cx="18" cy="19" r="3"></circle>150        <path d="M8.7 11l6-3.2M8.7 13l6 3.2"/>151      </svg>152    </div>153  </div>154 155  <!-- Content -->156  <div class="content">157    <div class="cards-row">158      <div class="feature-card">159        <div class="feat-item">160          <!-- WiFi icon -->161          <svg class="icon" viewBox="0 0 24 24" stroke="#3f5f9a" stroke-width="2" fill="none">162            <path d="M2 8c6-6 14-6 20 0" stroke-linecap="round"/>163            <path d="M5 11c4-4 10-4 14 0" stroke-linecap="round"/>164            <circle cx="12" cy="16" r="1.6" fill="#3f5f9a"/>165          </svg>166          <span>Free Wi‑Fi</span>167        </div>168        <div class="feat-item">169          <!-- Plug icon -->170          <svg class="icon" viewBox="0 0 24 24" stroke="#3f5f9a" stroke-width="2" fill="none">171            <path d="M9 3v6M15 3v6" stroke-linecap="round"/>172            <path d="M6 9h12v3a6 6 0 0 1-12 0V9z"/>173          </svg>174          <span>Power plugs</span>175        </div>176        <div class="feat-item">177          <!-- Fork & knife -->178          <svg class="icon" viewBox="0 0 24 24" stroke="#3f5f9a" stroke-width="2" fill="none">179            <path d="M6 3v7M10 3v7M8 3v18" stroke-linecap="round"/>180            <path d="M16 3h2v9a3 3 0 0 1-3 3h-1" stroke-linecap="round"/>181          </svg>182          <span>Food available</span>183        </div>184        <div class="feat-item">185          <!-- Seat icon -->186          <svg class="icon" viewBox="0 0 24 24" stroke="#3f5f9a" stroke-width="2" fill="none">187            <rect x="4" y="4" width="8" height="8" rx="1"></rect>188            <path d="M14 8h4a2 2 0 0 1 2 2v7H6" stroke-linecap="round"/>189          </svg>190          <span>Extra legroom</span>191        </div>192        <div class="price-note">+$0</div>193      </div>194 195      <div class="muted-card">196        There is only 1 class<br/>available for this journey197      </div>198    </div>199 200    <div class="section-title">You also get</div>201    <p class="desc">202      Large reclinable seats, wifi on-board, at seat power outlet & snack and bar services available.203    </p>204 205    <div class="divider"></div>206 207    <div class="section-title">Select your fare</div>208 209    <div class="fare-row">210      <div class="fare-card selected">211        <div class="fare-title">Escape</div>212        <div class="fare-price">+$0</div>213      </div>214      <div class="fare-card">215        <div class="fare-title" style="color:#697b9c;">Economy</div>216        <div class="fare-price">+$34.04</div>217      </div>218    </div>219 220    <div class="terms">221      <h3>Fare terms</h3>222      <p>223        Escape<br/>224        Refundable & exchangeable prior to departure for a service charge (50% of the fare price)225      </p>226    </div>227 228    <div class="divider"></div>229 230    <div class="totals">231      <div class="row">232        <div class="label">Tickets (3 passengers)</div>233        <div class="amount">$628.44</div>234      </div>235      <div class="row total">236        <div class="label">Total (taxes included)</div>237        <div class="amount">$628.44</div>238      </div>239    </div>240 241    <div class="cta-area">242      <div class="cta-note">One-way ticket for 3 passengers</div>243      <div class="cta-btn">Go to VIA Rail</div>244    </div>245  </div>246 247  <!-- Bottom area -->248  <div class="gesture-pill"></div>249  <div class="bottom-area"></div>250</div>251</body>252</html>