GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train Timetable UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #ffffff;11    border-radius: 24px;12    box-shadow: 0 10px 40px rgba(0,0,0,0.25);13  }14 15  /* Header/App bar */16  .appbar {17    position: absolute; left: 0; top: 0; width: 1080px; height: 200px;18    background: #1d4f9d;19    color: #fff;20  }21  .status-row {22    position: absolute; left: 24px; top: 16px; right: 24px; height: 40px;23    display: flex; align-items: center; justify-content: space-between; opacity: 0.9; font-size: 30px;24  }25  .header-content {26    position: absolute; left: 24px; right: 24px; top: 60px; bottom: 0;27    display: flex; align-items: center;28  }29  .back-icon {30    width: 60px; height: 60px; margin-right: 18px;31  }32  .title-block { flex: 1; }33  .title {34    font-weight: 700; font-size: 36px; line-height: 42px; letter-spacing: 0.2px;35  }36  .subtitle { font-size: 28px; opacity: 0.92; margin-top: 6px; }37  .right-metrics {38    text-align: right; font-size: 28px; line-height: 34px; min-width: 280px;39  }40 41  /* Tabs */42  .tabs {43    position: absolute; left: 0; top: 200px; width: 1080px; height: 112px;44    background: #f0f0f2;45    display: flex; align-items: flex-end;46    color: #555;47    border-bottom: 1px solid rgba(0,0,0,0.15);48  }49  .tab {50    flex: 1; text-align: center; font-size: 30px; padding-bottom: 22px; opacity: 0.8;51  }52  .tab.active {53    color: #2a6de6; font-weight: 700; opacity: 1;54    position: relative;55  }56  .tab.active::after {57    content: ""; position: absolute; left: 25%; right: 25%; bottom: 0;58    height: 8px; background: #2a6de6; border-radius: 4px;59  }60 61  /* Content area */62  .content {63    position: absolute; left: 0; top: 312px; width: 1080px; bottom: 0;64    background: #f7f9fb;65  }66 67  .day-chip {68    position: absolute; left: 24px; top: 24px;69    background: #cfd4da; color: #333;70    padding: 12px 22px; border-radius: 24px; font-weight: 700; font-size: 26px;71  }72 73  /* Vertical timeline line */74  .timeline {75    position: absolute; left: 180px; top: 90px; bottom: 24px;76    width: 8px; background: #cfd4da; border-radius: 6px;77  }78 79  /* Rows */80  .row {81    position: relative; margin-left: 24px; margin-right: 24px;82    background: #ffffff; border-radius: 22px;83    box-shadow: 0 2px 0 rgba(0,0,0,0.06);84    padding: 28px 24px 28px 220px;85    margin-top: 90px;86    min-height: 220px;87  }88  .row .dot {89    position: absolute; left: 176px; top: 82px; width: 24px; height: 24px;90    background: #8c8c8c; border: 4px solid #f7f9fb; border-radius: 50%;91  }92  .left-col {93    position: absolute; left: 60px; top: 36px; width: 100px; text-align: left; color: #2a6de6;94    font-weight: 800; font-size: 44px; letter-spacing: 0.5px;95  }96  .left-time {97    position: absolute; left: 60px; bottom: 30px; font-size: 30px; color: #777;98  }99 100  .station-title {101    font-size: 36px; font-weight: 800; color: #222;102  }103  .sup {104    font-size: 22px; margin-left: 6px; color: #555; vertical-align: super;105  }106  .meta {107    margin-top: 12px; font-size: 28px; color: #667; letter-spacing: 0.3px;108  }109  .status {110    margin-top: 12px; font-size: 28px; font-weight: 700;111    color: #2b9248;112  }113  .status.delayed { color: #c83d3d; }114  .depart-time {115    position: absolute; right: 24px; top: 36px; font-size: 30px; color: #666;116  }117  .state-chip {118    display: inline-block; margin-top: 18px; padding: 14px 20px; border-radius: 14px;119    font-size: 28px; color: #174b2b; background: #dff0df;120  }121  .state-chip.haryana { background: #e4f1ff; color: #0c3f6e; }122  .state-chip.up { background: #ffe7ea; color: #7a2850; }123 124  .nh-chip {125    display: inline-block; margin-top: 12px; padding: 12px 16px; border-radius: 20px;126    font-size: 26px; color: #555; background: #f1f3f5;127  }128 129  /* Order food button */130  .food-btn {131    display: inline-flex; align-items: center; gap: 12px;132    margin-top: 14px;133    background: #f8fafc; border: 2px solid #e0e6ef; color: #333;134    padding: 16px 22px; border-radius: 16px; font-size: 30px; font-weight: 700;135  }136  .food-btn svg { width: 36px; height: 36px; fill: #2a2a2a; }137 138  .pf {139    color: #2a6de6; font-weight: 700;140  }141 142  /* Bottom home indicator (visual hint) */143  .home-indicator {144    position: absolute; left: 50%; transform: translateX(-50%);145    bottom: 18px; width: 360px; height: 10px; background: #0d0d0d; border-radius: 8px; opacity: 0.8;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- App bar -->153  <div class="appbar">154    <div class="status-row">155      <div>1:25</div>156      <div>◉ ᛒ ☁︎</div>157    </div>158    <div class="header-content">159      <svg class="back-icon" viewBox="0 0 24 24">160        <path fill="#fff" d="M15.5 4l-8 8 8 8 1.4-1.4-6.6-6.6 6.6-6.6z"/>161      </svg>162      <div class="title-block">163        <div class="title">12618 - HAZRAT NIZAMUDDIN - ERNAKULAM</div>164        <div class="subtitle">Mangala Lakshadweep SF Exp</div>165      </div>166      <div class="right-metrics">167        <div style="font-weight:700;">50hr:49min</div>168        <div>Runs Daily</div>169      </div>170    </div>171  </div>172 173  <!-- Tabs -->174  <div class="tabs">175    <div class="tab">Train Status</div>176    <div class="tab">Map View</div>177    <div class="tab active">Time Table</div>178    <div class="tab">Coach Position</div>179    <div class="tab">Med</div>180  </div>181 182  <!-- Content -->183  <div class="content">184    <div class="day-chip">Day 1</div>185    <div class="timeline"></div>186 187    <!-- Row 1: NZM -->188    <div class="row" style="margin-top: 120px;">189      <div class="dot"></div>190      <div class="left-col">NZM</div>191      <div class="left-time">--</div>192      <div class="depart-time">05:40</div>193 194      <div class="station-title">Delhi Hazrat Nizamuddin<span class="sup">01</span></div>195      <div class="meta">0 km | <span class="pf">PF #3</span></div>196      <div class="status">Mostly Ontime</div>197 198      <div class="food-btn">199        <svg viewBox="0 0 24 24">200          <path d="M7 2c.6 0 1 .4 1 1v7.5c0 1.7-1.3 3.1-3 3.4V22H3V13.9c-1.7-.3-3-1.7-3-3.4V3c0-.6.4-1 1-1h1v7h1V2h1v7h1V2h1zm9 0h2v9c0 1.1-.9 2-2 2v9h-2v-9c-1.1 0-2-.9-2-2V2h2v7h2V2z"/>201        </svg>202        <span>Order Food</span>203      </div>204 205      <div class="nh-chip">+ 5 No-Halt stations</div>206      <div class="state-chip">Delhi</div>207    </div>208 209    <!-- Row 2: FDB -->210    <div class="row">211      <div class="dot"></div>212      <div class="left-col" style="color:#2473e6;">FDB</div>213      <div class="left-time">05:59</div>214      <div class="depart-time">06:01</div>215 216      <div class="station-title">Faridabad<span class="sup">02</span></div>217      <div class="meta">21 km | <span class="pf">PF #3</span></div>218      <div class="status">Mostly Ontime</div>219      <div class="nh-chip">+ 14 No-Halt stations</div>220      <div class="state-chip haryana">Haryana</div>221    </div>222 223    <!-- Row 3: MTJ -->224    <div class="row">225      <div class="dot"></div>226      <div class="left-col">MTJ</div>227      <div class="left-time">07:40</div>228      <div class="depart-time">07:42</div>229 230      <div class="station-title">Mathura Jn<span class="sup">03</span></div>231      <div class="meta">134 km | <span class="pf">PF #1</span></div>232      <div class="status delayed">Mostly Delayed</div>233 234      <div class="food-btn">235        <svg viewBox="0 0 24 24">236          <path d="M7 2c.6 0 1 .4 1 1v7.5c0 1.7-1.3 3.1-3 3.4V22H3V13.9c-1.7-.3-3-1.7-3-3.4V3c0-.6.4-1 1-1h1v7h1V2h1v7h1V2h1zm9 0h2v9c0 1.1-.9 2-2 2v9h-2v-9c-1.1 0-2-.9-2-2V2h2v7h2V2z"/>237        </svg>238        <span>Order Food</span>239      </div>240 241      <div class="nh-chip">+ 8 No-Halt stations</div>242      <div class="state-chip up">Uttar pradesh</div>243    </div>244 245    <!-- Row 4: AGC -->246    <div class="row">247      <div class="dot"></div>248      <div class="left-col">AGC</div>249      <div class="left-time">08:30</div>250      <div class="depart-time">08:35</div>251 252      <div class="station-title">Agra Cantt<span class="sup">04</span></div>253      <div class="meta">188 km | <span class="pf">PF #1</span></div>254      <div class="status delayed">Mostly Delayed</div>255    </div>256  </div>257 258  <div class="home-indicator"></div>259</div>260</body>261</html>