GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Train Search UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color:#0e2250;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#ffffff;border-radius:0;11  }12  /* Top app bar */13  .topbar{14    background:#102758;15    color:#fff;16    height:320px;17    padding:30px 40px 20px 40px;18    box-sizing:border-box;19  }20  .status-row{21    height:70px;display:flex;align-items:center;justify-content:space-between;22    opacity:.95;23  }24  .status-icons{display:flex;gap:24px;align-items:center;}25  .status-dot{width:14px;height:14px;background:#ffffff;border-radius:50%;}26  .right-icons{display:flex;gap:28px;align-items:center;}27  .nav-row{margin-top:16px;display:flex;align-items:center;gap:22px;}28  .back-btn{width:56px;height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center;}29  .title-wrap{display:flex;flex-direction:column;gap:8px;}30  .title{font-size:54px;font-weight:700;letter-spacing:.3px;}31  .subtitle{font-size:30px;color:#c9d6ff;}32  /* transport pills under title */33  .modes{34    margin-top:22px;display:flex;gap:80px;align-items:flex-end;35  }36  .mode{37    display:flex;flex-direction:column;align-items:center;color:#d8e0ff;gap:10px;38  }39  .mode svg{width:54px;height:54px;fill:#d8e0ff}40  .mode .price{font-size:40px;color:#ffffff;font-weight:700;}41  .mode .time{font-size:30px;color:#c9d6ff;}42  /* content area */43  .content{padding:30px 38px 50px 38px;}44  .section-title{font-size:54px;font-weight:900;margin-top:14px;margin-bottom:22px;}45  .section-title .accent{color:#ff8fa0;}46  .info-banner{47    background:#e4f7eb;border:2px solid #b6e6c5;color:#1a6e43;48    border-radius:22px;padding:24px 26px;display:flex;align-items:center;gap:22px;font-size:34px;49  }50  .chips{display:flex;gap:26px;margin-top:28px;margin-bottom:26px;flex-wrap:wrap;}51  .chip{52    padding:22px 26px;border:2px solid #e2e6ef;border-radius:60px;background:#ffffff;53    font-size:34px;color:#0e2250;display:flex;align-items:center;gap:16px;54  }55  .load-btn{56    width:100%;text-align:center;background:#eef2fb;border:2px solid #d7def0;color:#2d3c77;57    padding:32px 20px;border-radius:22px;font-size:44px;font-weight:700;margin:10px 0 26px 0;58  }59  /* cards */60  .card{61    border:2px solid #e5e8f0;border-radius:26px;padding:36px;margin-top:22px;62    box-shadow:0 2px 0 rgba(16,39,88,0.03);63  }64  .card .brand{font-weight:800;color:#2d3c77;letter-spacing:.4px;font-size:32px;margin-bottom:16px;}65  .code{color:#8191b3;font-size:32px;margin-bottom:18px;}66  .timing{67    display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px;margin-bottom:18px;68  }69  .time-block{display:flex;align-items:flex-end;gap:20px;}70  .big-time{font-size:70px;font-weight:900;letter-spacing:.5px;}71  .small{font-size:34px;color:#8796b9;}72  .station{font-size:38px;margin-top:8px;color:#243561}73  .divider{height:2px;background:#ecf0f6;margin:16px 0;}74  .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}75  .transfer{background:#eef2fb;border:2px solid #d7def0;padding:18px 28px;border-radius:50px;color:#1b2c63;font-size:34px;display:flex;align-items:center;gap:14px;}76  .price{font-size:58px;color:#0e2250;font-weight:900;}77  .mini-row{display:flex;align-items:center;gap:16px;color:#23346c;font-size:32px;margin-top:8px;}78  .tag-fastest{color:#1f9a5f;font-size:34px;font-weight:900;margin-bottom:8px;}79  /* helper icons */80  .icon{display:inline-flex;align-items:center;justify-content:center;}81  .qr{width:42px;height:42px;background:#c7efd7;border-radius:8px;border:2px solid #8ed6a9;display:flex;align-items:center;justify-content:center;}82  .right-top-icons{83    position:absolute;right:48px;top:620px;display:flex;gap:22px;84  }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Top App Bar -->91  <div class="topbar">92    <div class="status-row">93      <div class="status-icons" style="gap:18px;">94        <div style="font-size:36px;">10:00</div>95        <div class="status-dot"></div>96        <div class="status-dot"></div>97        <div class="status-dot"></div>98        <div class="status-dot"></div>99        <div class="status-dot"></div>100      </div>101      <div class="right-icons">102        <div style="width:24px;height:24px;border-radius:4px;border:2px solid #fff;"></div>103        <div style="width:18px;height:32px;border:2px solid #fff;border-radius:4px;position:relative;">104          <div style="position:absolute;right:-10px;top:-8px;width:6px;height:10px;background:#fff;"></div>105        </div>106      </div>107    </div>108 109    <div class="nav-row">110      <div class="back-btn">111        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">112          <path d="M15.5 3.5 7 12l8.5 8.5-1.8 1.8L3.4 12l10.3-10.3 1.8 1.8z"/>113        </svg>114      </div>115      <div class="title-wrap">116        <div class="title">London <> Brinnington</div>117        <div class="subtitle">Wed, Nov 15 - Mon, Nov 20, 1 passenger</div>118      </div>119      <div style="margin-left:auto;">120        <svg width="44" height="44" viewBox="0 0 24 24" fill="#8fb1ff">121          <path d="M21 6.5 18 9V7H5V5h13V3l3 3.5zM3 18.5 6 16v2h13v2H6v2l-3-3.5z"/>122        </svg>123      </div>124    </div>125 126    <div class="modes">127      <div class="mode">128        <svg viewBox="0 0 24 24"><path d="M4 16c0-4.4 3.6-8 8-8s8 3.6 8 8H4zm-1 3h18v2H3v-2zm5-8h8V6H8v5z"/></svg>129        <div class="price">€104</div>130        <div class="time">2h40m</div>131      </div>132      <div class="mode">133        <svg viewBox="0 0 24 24"><path d="M4 17h16v2H4v-2zm1-8h14l2 6H3l2-6zm2-4h10v3H7V5z"/></svg>134        <div class="price">€29</div>135        <div class="time">6h00m</div>136      </div>137      <div class="mode">138        <svg viewBox="0 0 24 24"><path d="M2 14l7-2 3-8 2 8 8 2-8 2-2 5-3-7-7-3z"/></svg>139        <div class="price">€128</div>140        <div class="time">1h00m</div>141      </div>142    </div>143  </div>144 145  <!-- Content -->146  <div class="content">147    <div class="section-title">Outbound <span class="accent">Trains</span></div>148 149    <div class="info-banner">150      <div class="qr">151        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a6e43">152          <path d="M3 3h7v7H3V3zm2 2v3h3V5H5zm11-2h5v5h-5V3zm2 2v1h1V5h-1zM3 14h7v7H3v-7zm2 2v3h3v-3H5zm11 0h2v2h-2v-2zm-2 3h2v2h-2v-2zm4 2h3v2h-3v-2z"/>153        </svg>154      </div>155      <div>This icon means you’ve found a mobile ticket</div>156    </div>157 158    <div class="chips">159      <div class="chip">160        <svg width="28" height="28" viewBox="0 0 24 24" fill="#7f8bb1"><path d="M11 7h2v5h4v2h-6V7zM5 4h14v2H5V4zm0 14h14v2H5v-2z"/></svg>161        Time: Depart at 8:00 AM162      </div>163      <div class="chip">164        <svg width="26" height="26" viewBox="0 0 24 24" fill="#7f8bb1"><path d="M4 10h16v2H4v-2zm0 4h10v2H4v-2zM4 6h16v2H4V6z"/></svg>165        Stops166      </div>167      <div class="chip">168        <svg width="26" height="26" viewBox="0 0 24 24" fill="#7f8bb1"><path d="M12 1L8 5h3v7h2V5h3l-4-4zM5 14h14v2H5v-2zm0 4h14v2H5v-2z"/></svg>169        Price170      </div>171    </div>172 173    <div class="load-btn">Load earlier trains</div>174 175    <!-- Card 1 -->176    <div class="card">177      <div class="brand">AVANTI WEST COAST</div>178      <div class="code">L33650 • P56696</div>179 180      <div class="timing">181        <div>182          <div class="time-block">183            <div class="big-time">8:13 AM</div>184            <div class="small">— 2h46m —</div>185          </div>186          <div class="station">London Euston</div>187        </div>188        <div style="text-align:right;">189          <div class="big-time">10:59 AM</div>190          <div class="station">Brinnington</div>191        </div>192      </div>193 194      <div class="card-footer">195        <div class="transfer">196          1 Transfer197          <svg width="22" height="22" viewBox="0 0 24 24" fill="#1b2c63"><path d="M7 10l5 5 5-5H7z"/></svg>198        </div>199        <div style="text-align:right;">200          <div class="price">€280</div>201          <div class="mini-row">202            <svg width="26" height="26" viewBox="0 0 24 24" fill="#23346c"><path d="M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/></svg>203            1 • Round trip204          </div>205        </div>206      </div>207    </div>208 209    <!-- FASTEST Card -->210    <div class="card">211      <div class="tag-fastest">FASTEST</div>212      <div class="brand">AVANTI WEST COAST</div>213 214      <div class="timing">215        <div>216          <div class="time-block">217            <div class="big-time">8:53 AM</div>218            <div class="small">— 2h40m —</div>219          </div>220          <div class="station">London Euston</div>221        </div>222        <div style="text-align:right;">223          <div class="big-time">11:33 AM</div>224          <div class="station">Brinnington</div>225        </div>226      </div>227 228      <div class="card-footer">229        <div class="transfer">230          1 Transfer231          <svg width="22" height="22" viewBox="0 0 24 24" fill="#1b2c63"><path d="M7 10l5 5 5-5H7z"/></svg>232        </div>233        <div style="text-align:right;">234          <div class="price">€280</div>235          <div class="mini-row">236            <svg width="26" height="26" viewBox="0 0 24 24" fill="#23346c"><path d="M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/></svg>237            1 • Round trip238          </div>239        </div>240      </div>241    </div>242 243  </div>244 245</div>246</body>247</html>