GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train Ticket UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }7  #render-target {8    width:1440px; height:3120px; position:relative; overflow:hidden;9    background:#f2f4f9;10  }11  /* Top bar */12  .topbar {13    position:absolute; left:0; top:0; width:1440px; height:260px;14    background:#132a78; color:#fff;15  }16  .status {17    height:90px; padding:0 48px; display:flex; align-items:center; justify-content:space-between; opacity:0.95;18    font-weight:600; font-size:42px;19  }20  .status-icons { display:flex; align-items:center; gap:30px; }21  .icon { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; }22  .header {23    display:flex; align-items:center; padding:0 48px; gap:40px;24  }25  .route-title {26    color:#fff;27    font-size:60px; font-weight:800; letter-spacing:0.3px;28  }29  .route-sub {30    color:#cfe0ff; font-size:38px; margin-top:8px; font-weight:600;31  }32  .header-right { margin-left:auto; display:flex; align-items:center; gap:30px; }33  /* Content area */34  .content {35    position:absolute; left:0; top:260px; width:100%; height:2860px;36    background:#f2f4f9;37    padding:48px;38    box-sizing:border-box;39  }40  h2 {41    margin:40px 0 24px; font-size:56px; color:#0e1d57;42  }43  .row {44    display:flex; align-items:center; gap:20px;45  }46  .right-label { margin-left:auto; color:#0e1d57; font-size:42px; font-weight:800; }47  .toggle {48    width:170px; height:88px; background:#e8ecf7; border-radius:60px; position:relative; margin-left:24px;49    box-shadow: inset 0 0 0 2px #d2d8ea;50  }51  .toggle .knob {52    width:76px; height:76px; background:#fff; border-radius:50%;53    position:absolute; top:6px; left:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15);54  }55  .info-card {56    border:2px solid #c6d6ff; background:#eef4ff; border-radius:28px; padding:36px; display:flex; align-items:flex-start; gap:28px;57    color:#18377a; font-size:44px; line-height:1.3; margin-top:24px;58  }59  .badge {60    width:70px; height:70px; border-radius:50%; background:#4f77ff; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:44px;61  }62  .note {63    color:#5d6c90; font-size:42px; margin:28px 0 12px;64  }65  /* Ticket type cards */66  .type-title { margin-top:60px; }67  .card {68    background:#fff; border-radius:28px; box-shadow:0 6px 20px rgba(14,31,87,0.08);69    border:1px solid #dde3f2; padding:36px; display:flex; align-items:center; gap:36px; margin-bottom:34px;70  }71  .card.primary {72    border:2px solid #9ac0ff; background:#f3f8ff;73  }74  .img {75    width:210px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:24px;76    display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:36px; padding:12px;77  }78  .card h3 { font-size:54px; color:#16306f; margin:0 0 12px; }79  .card p { font-size:40px; color:#2d3a5c; margin:4px 0; line-height:1.35; }80  /* Totals */81  .totals {82    margin-top:20px; background:transparent; padding:24px 12px;83  }84  .totals-row { display:flex; align-items:center; margin:22px 0; }85  .totals-label { font-size:44px; color:#0e1d57; }86  .totals-amount { margin-left:auto; font-size:44px; color:#0e1d57; font-weight:800; }87  .grand-label { font-size:52px; font-weight:800; }88  .grand-amount { font-size:64px; font-weight:900; color:#0e1d57; }89  /* Footer button */90  .footer {91    position:absolute; left:0; bottom:0; width:100%; padding:32px 48px 80px; box-sizing:border-box; background:#f7f9ff;92    box-shadow:0 -6px 20px rgba(0,0,0,0.06);93  }94  .footer .subtitle { color:#3b4a76; font-size:42px; margin-bottom:22px; }95  .cta {96    width:100%; height:160px; background:#ef6a66; border-radius:40px; color:#fff; font-size:54px; font-weight:800;97    display:flex; align-items:center; justify-content:center; letter-spacing:0.4px;98    box-shadow:0 10px 24px rgba(239,106,102,0.35);99  }100  .home-indicator {101    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);102    width:520px; height:16px; background:#c4c7d6; border-radius:12px;103  }104  /* Simple back/share icons */105  .back-btn {106    width:84px; height:84px; border-radius:42px; border:2px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center;107  }108  .share-btn { width:72px; height:72px; border-radius:36px; border:2px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; }109</style>110</head>111<body>112<div id="render-target">113  <!-- Top Bar -->114  <div class="topbar">115    <div class="status">116      <div>12:47</div>117      <div class="status-icons">118        <!-- wifi -->119        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 19.5c.9 0 1.6.7 1.6 1.5S12.9 22.5 12 22.5s-1.6-.7-1.6-1.5.7-1.5 1.6-1.5zm-6.6-6.2c4.4-3.7 9.3-3.7 13.2 0l-1.7 1.7c-3.1-2.7-6.7-2.7-9.8 0l-1.7-1.7zm-3-3.7c6.6-5.6 14.3-5.6 21 0l-1.8 1.8c-5.7-4.8-11.7-4.8-17.4 0L2.4 9.6z"/></svg>120        <!-- battery -->121        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M18 7h2v10h-2V7zm-1 12H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h13a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zM4 7v10h12V7H4z"/></svg>122      </div>123    </div>124    <div class="header">125      <div class="back-btn">126        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 19.5L8 12l7.5-7.5 1.5 1.5L11 12l6 6-1.5 1.5z"/></svg>127      </div>128      <div>129        <div class="route-title">Southampton › Salisbury</div>130        <div class="route-sub">Thu, Nov 2, 1 passenger</div>131      </div>132      <div class="header-right">133        <div class="share-btn">134          <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M18 16.1c-.7 0-1.3.3-1.8.7L8.9 12c.1-.3.1-.6.1-.9s0-.6-.1-.9l7.3-4.7c.5.5 1.1.8 1.8.8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .4.1.6L8.1 8.6C7.6 8.2 7 7.9 6.3 7.9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.7 0 1.3-.3 1.8-.7l7.3 4.7c-.1.2-.1.4-.1.6 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3z"/></svg>135        </div>136      </div>137    </div>138  </div>139 140  <!-- Content -->141  <div class="content">142    <h2>Seat reservation <span class="right-label">+$0</span><span class="toggle"><span class="knob"></span></span></h2>143 144    <div class="info-card">145      <div class="badge">!</div>146      <div>Treat yourself to a comfortable seat or cabin for this 0 h 29 m journey.</div>147    </div>148    <div class="note">This is a non-refundable fee.</div>149 150    <h2 class="type-title">Choose a ticket type</h2>151 152    <div class="card primary">153      <div class="img">[IMG: Phone Ticket]</div>154      <div>155        <h3>Ticket on my phone</h3>156        <p>Your ticket will be emailed to you straight away as a PDF and can either be printed or downloaded to your phone.</p>157      </div>158    </div>159 160    <div class="card">161      <div class="img">[IMG: Station Kiosk]</div>162      <div>163        <h3>Collect ticket at station</h3>164        <p>Use your booking number to collect your ticket from a self-service machine at the station before your departure.</p>165      </div>166    </div>167 168    <div class="totals">169      <div class="totals-row">170        <div class="totals-label">Tickets (1 passenger)</div>171        <div class="totals-amount">$15.53</div>172      </div>173      <div class="totals-row">174        <div class="totals-label grand-label">Total (taxes included)</div>175        <div class="totals-amount grand-amount">$15.53</div>176      </div>177    </div>178  </div>179 180  <!-- Footer CTA -->181  <div class="footer">182    <div class="subtitle">One-way ticket for 1 passenger</div>183    <div class="cta">Go to passenger details</div>184  </div>185  <div class="home-indicator"></div>186</div>187</body>188</html>