GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train Details UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#1a1530;color:#fff;10  }11  /* Top status bar */12  .status-bar{13    height:84px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;14    color:#e9e6ff;font-size:34px;letter-spacing:0.5px;15  }16  .status-icons{display:flex;gap:22px;align-items:center;}17  /* Header with back and title */18  .nav-bar{19    height:120px;display:flex;align-items:center;gap:20px;padding:0 28px 0 28px;20  }21  .nav-title{font-size:54px;font-weight:600;color:#eae6ff;}22  .dots{position:absolute;top:240px;left:50%;transform:translateX(-50%);display:flex;gap:20px;}23  .dots span{24    width:18px;height:18px;border-radius:50%;background:#423a67;display:inline-block;25  }26  .dots span.active{background:#dbcfff;}27  .page-title{28    padding:20px 36px 28px 36px;font-size:66px;line-height:1.15;font-weight:700;color:#fff;29  }30 31  /* White main section cards */32  .card{33    background:#241b44;border-radius:0 0 28px 28px;34  }35 36  .summary{37    background:#2a2151;border-top:2px solid rgba(255,255,255,0.06);38    padding:28px 36px 30px 36px;display:flex;align-items:center;justify-content:space-between;39  }40  .summary-left{display:flex;flex-direction:column;}41  .time-range{font-size:54px;font-weight:700;letter-spacing:0.5px;}42  .date{margin-top:10px;color:#c7bedf;font-size:36px;}43  .duration{display:flex;align-items:center;gap:16px;color:#ddd6ff;font-size:38px;}44  .tabs{45    padding:26px 36px;display:flex;gap:32px;border-bottom:1px solid rgba(255,255,255,0.08);46  }47  .tab{48    background:#1f183d;border:1px solid #3b3262;color:#e7e1ff;border-radius:18px;49    padding:22px 26px;display:flex;align-items:center;gap:16px;font-size:38px;50  }51 52  .update-bar{53    background:#efeef4;color:#1b1530;font-size:36px;padding:26px 36px;54  }55  .update-bar b{font-weight:700;}56 57  /* Timeline area */58  .content{59    background:#fff;color:#1b1530;padding:32px 36px 42px 36px;60  }61  .timeline{62    position:relative;padding-left:120px;padding-right:16px;63  }64  .line{65    position:absolute;left:66px;top:6px;bottom:6px;width:6px;background:#2a2754;border-radius:3px;66  }67  .node{display:flex;align-items:center;margin:24px 0;}68  .time{width:120px;text-align:right;margin-right:24px;color:#2f2a57;font-size:40px;}69  .dot{70    width:28px;height:28px;border:6px solid #2a2754;border-radius:50%;background:#fff;margin-right:24px;71  }72  .station{font-size:46px;font-weight:700;}73  .pill-warning{74    margin:20px 0 18px 144px;background:#fff7e6;border:1px solid #ffb74d;color:#8a5400;75    border-radius:16px;padding:18px 20px;font-size:34px;display:inline-block;76  }77  .service-row{margin-left:144px;display:flex;align-items:center;gap:16px;margin-top:10px;}78  .service-code{79    background:#0d2a73;color:#fff;border-radius:12px;padding:12px 16px;font-weight:700;font-size:36px;80  }81  .service-text{font-size:40px;color:#222}82  .direction{margin-left:144px;margin-top:10px;font-size:40px;color:#333}83  .bottom-disclaimer{84    background:#f2f1f5;color:#2a2754;padding:36px;font-size:36px;line-height:1.45;85  }86 87  /* Bottom action area */88  .bottom-bar{89    position:absolute;left:0;right:0;bottom:0;background:#ffffff;padding:24px 36px 34px 36px;90    box-shadow:0 -2px 8px rgba(0,0,0,0.08);91  }92  .primary-btn{93    width:100%;background:#f6b63d;color:#2a1f0a;border:none;border-radius:20px;94    height:110px;font-size:44px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:16px;95  }96 97  /* Simple helpers */98  .icon{99    width:48px;height:48px;display:inline-block;100  }101  .icon.small{width:40px;height:40px;}102  .muted{color:#7167a0;}103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div>7:00</div>111    <div class="status-icons">112      <!-- tiny sun -->113      <svg class="icon small" viewBox="0 0 24 24" fill="#ffe57f">114        <circle cx="12" cy="12" r="4"></circle>115        <g stroke="#ffe57f" stroke-width="2" stroke-linecap="round">116          <line x1="12" y1="1" x2="12" y2="5"/>117          <line x1="12" y1="19" x2="12" y2="23"/>118          <line x1="1" y1="12" x2="5" y2="12"/>119          <line x1="19" y1="12" x2="23" y2="12"/>120          <line x1="4" y1="4" x2="6.8" y2="6.8"/>121          <line x1="17.2" y1="17.2" x2="20" y2="20"/>122          <line x1="4" y1="20" x2="6.8" y2="17.2"/>123          <line x1="17.2" y1="6.8" x2="20" y2="4"/>124        </g>125      </svg>126      <!-- signal -->127      <svg class="icon small" viewBox="0 0 24 24" fill="#eae6ff">128        <path d="M3 18h2V6H3v12zm4 0h2V10H7v8zm4 0h2V4h-2v14zm4 0h2V8h-2v10zm4 0h2V12h-2v6z"/>129      </svg>130      <!-- battery -->131      <svg class="icon small" viewBox="0 0 28 24" fill="none" stroke="#eae6ff" stroke-width="2">132        <rect x="2" y="6" width="20" height="12" rx="2"></rect>133        <rect x="23" y="10" width="3" height="4" rx="1" fill="#eae6ff" stroke="none"></rect>134        <rect x="4" y="8" width="16" height="8" fill="#eae6ff" stroke="none"></rect>135      </svg>136    </div>137  </div>138 139  <!-- Navigation -->140  <div class="nav-bar">141    <svg class="icon" viewBox="0 0 24 24" fill="#eae6ff">142      <path d="M15.5 4L7 12l8.5 8 1.5-1.6L10.6 12 17 5.6 15.5 4z"/>143    </svg>144    <div class="nav-title">Details</div>145    <div style="margin-left:auto;">146      <svg class="icon" viewBox="0 0 24 24" fill="#cfc8f2">147        <circle cx="12" cy="5" r="2"/>148        <circle cx="12" cy="12" r="2"/>149        <circle cx="12" cy="19" r="2"/>150      </svg>151    </div>152  </div>153 154  <!-- dots indicator -->155  <div class="dots">156    <span></span>157    <span class="active"></span>158    <span></span>159    <span></span>160    <span></span>161  </div>162 163  <!-- Page title -->164  <div class="page-title">Amsterdam Centraal - Rotterdam Centraal</div>165 166  <!-- Summary section -->167  <div class="card">168    <div class="summary">169      <div class="summary-left">170        <div class="time-range">06:55 - 07:36</div>171        <div class="date">Sat 21 Oct</div>172      </div>173      <div class="duration">174        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ddd6ff" stroke-width="2">175          <circle cx="12" cy="12" r="9"></circle>176          <path d="M12 6v6l4 2"></path>177        </svg>178        0h 41m179      </div>180    </div>181 182    <div class="tabs">183      <div class="tab">184        <svg class="icon" viewBox="0 0 24 24" fill="#e7e1ff">185          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>186        </svg>187        View as list188      </div>189      <div class="tab">190        <svg class="icon" viewBox="0 0 24 24" fill="#e7e1ff">191          <path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/>192        </svg>193        View on map194      </div>195    </div>196  </div>197 198  <!-- Update message -->199  <div class="update-bar">Last timetable update: <b>12 October 2023</b></div>200 201  <!-- Content area with timeline -->202  <div class="content">203    <div class="timeline">204      <div class="line"></div>205 206      <!-- Start node -->207      <div class="node">208        <div class="time">06:55</div>209        <div class="dot"></div>210        <div class="station">Amsterdam Centraal</div>211      </div>212 213      <div class="pill-warning">214        ⚠ Supplement required. Read more215      </div>216 217      <div class="service-row">218        <div class="service-code">IC 1014</div>219        <div class="service-text">Train</div>220      </div>221      <div class="direction"><span class="muted">Direction</span> Rotterdam Centraal</div>222 223      <!-- End node -->224      <div class="node" style="margin-top:42px;">225        <div class="time">07:36</div>226        <div class="dot"></div>227        <div class="station">Rotterdam Centraal</div>228      </div>229    </div>230  </div>231 232  <!-- Disclaimer area -->233  <div class="bottom-disclaimer">234    Our timetable may not be 100% accurate because we rely on weekly updates from railway carriers. Changes, delays, or cancellations won’t be reflected. For the latest timetable info, please check the carrier’s website or train station boards.235  </div>236 237  <!-- Bottom action -->238  <div class="bottom-bar">239    <button class="primary-btn">240      <svg class="icon" viewBox="0 0 24 24" fill="#2a1f0a">241        <path d="M6 4h12a2 2 0 012 2v14l-8-4-8 4V6a2 2 0 012-2z"/>242      </svg>243      Save journey244    </button>245  </div>246 247</div>248</body>249</html>