GD-ML/AndroidCode
13.4k
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 Time Table</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; color:#333;12 }13 14 /* Header */15 .appbar{16 position:relative;17 background:#0b5aa8;18 height:280px;19 color:#fff;20 box-shadow:0 2px 0 rgba(0,0,0,0.12) inset;21 }22 .status{23 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;24 font-size:34px; opacity:0.95;25 }26 .status .right{ display:flex; gap:28px; align-items:center; }27 .title-row{28 display:flex; align-items:center; justify-content:space-between;29 padding:12px 32px 0 32px;30 }31 .back-title{ display:flex; align-items:center; gap:22px; }32 .train-title{33 font-size:46px; font-weight:600; letter-spacing:0.2px;34 }35 .right-info{36 display:flex; align-items:center; gap:24px;37 padding-left:28px; border-left:2px solid rgba(255,255,255,0.5);38 min-height:92px;39 }40 .right-info .big{ font-size:36px; font-weight:600; }41 .right-info .small{ font-size:28px; opacity:0.9; }42 43 /* Tabs */44 .tabs{45 background:#fff; height:120px; display:flex; align-items:flex-end; padding:0 28px; gap:42px;46 border-bottom:1px solid #e5e5e5;47 }48 .tab{49 color:#9aa2a9; font-size:36px; padding:34px 10px 18px 10px;50 }51 .tab.active{52 color:#2e6eea; position:relative; font-weight:600;53 }54 .tab.active:after{55 content:""; position:absolute; left:0; right:0; bottom:0; height:10px; border-radius:6px; background:#75a6ff;56 }57 58 /* Table header */59 .table-head{60 background:#7f7f7f; color:#fff; display:flex; padding:18px 0; font-size:30px; letter-spacing:0.3px;61 }62 .th-arrival{ width:210px; text-align:center; }63 .th-station{ flex:1; padding-left:170px; }64 .th-departure{ width:220px; text-align:center; }65 66 /* Timeline */67 .timeline{68 position:relative;69 height:1800px;70 overflow:hidden;71 background:linear-gradient(#eef8ef 0 38%, #fdeeee 38% 100%);72 }73 .track{74 position:absolute; left:360px; top:0; bottom:0; width:6px; background:#cfcfcf; border-radius:4px;75 }76 .daychip{77 position:absolute; top:60px; left:170px;78 background:#8c8c8c; color:#fff; font-size:32px; padding:10px 22px; border-radius:12px;79 }80 .region-pill{81 position:absolute; left:520px; top:340px;82 background:#c9f0cc; color:#2d6b39; font-weight:600; font-size:32px;83 padding:18px 26px; border-radius:16px;84 }85 .region-pill.pink{86 top:880px; left:540px; background:#ffd7d7; color:#a13e3e;87 }88 89 .stop{90 position:relative; display:flex; padding:54px 32px 54px 0;91 min-height:260px;92 }93 .stop + .stop{ border-top:1px solid rgba(0,0,0,0.06); }94 .left-col{95 width:320px; padding-left:32px; text-align:left;96 }97 .code{98 color:#2d79e7; font-weight:700; font-size:40px; letter-spacing:1px;99 }100 .arr-time{ color:#7c7c7c; margin-top:16px; font-size:32px; }101 .center-col{ width:80px; position:relative; }102 .dot{103 position:absolute; left:338px; /* aligned to track center */104 width:20px; height:20px; background:#9c9c9c; border-radius:50%;105 transform:translateX(-50%); top:50%;106 }107 .right-col{108 flex:1; padding-left:70px;109 }110 .station-name{111 font-size:44px; font-weight:700; color:#333;112 }113 .meta{ margin-top:8px; color:#7a7a7a; font-size:30px; }114 .meta a{ color:#2e80ff; text-decoration:none; font-weight:600; }115 .status-green{ color:#4aae57; font-size:30px; margin-top:10px; }116 .status-red{ color:#e55454; font-size:30px; margin-top:10px; }117 118 .chip{119 margin-top:18px; display:inline-flex; align-items:center; gap:12px;120 background:#fff; border:1px solid #e1e1e1; border-radius:12px; padding:14px 20px;121 font-size:34px; box-shadow:0 2px 6px rgba(0,0,0,0.08);122 }123 .chip-grey{124 margin-top:14px; display:inline-block; background:#ebebeb; color:#666; font-size:28px;125 border-radius:20px; padding:12px 20px;126 }127 128 /* Minimal icons */129 .icon-back{ width:40px; height:40px; fill:#fff; }130 .icon-food{ width:40px; height:40px; fill:#6a6a6a; }131 132 /* Bottom handle */133 .home-indicator{134 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);135 width:360px; height:12px; border-radius:8px; background:#000; opacity:0.2;136 }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- App Bar -->143 <div class="appbar">144 <div class="status">145 <div>9:53 🔒</div>146 <div class="right">📶 🔋</div>147 </div>148 <div class="title-row">149 <div class="back-title">150 <svg class="icon-back" viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 2L3.5 12 14 2.5z"/></svg>151 <div class="train-title">12616 - Grand Trunk Express</div>152 </div>153 <div class="right-info">154 <div>155 <div class="big">36hr:20min</div>156 <div class="small">Runs Daily</div>157 </div>158 </div>159 </div>160 </div>161 162 <!-- Tabs -->163 <div class="tabs">164 <div class="tab">Train Status</div>165 <div class="tab">Map View</div>166 <div class="tab active">Time Table</div>167 <div class="tab">Coach Position</div>168 <div class="tab">Med...</div>169 </div>170 171 <!-- Table header -->172 <div class="table-head">173 <div class="th-arrival">Arrival</div>174 <div class="th-station">Station</div>175 <div class="th-departure">Departure</div>176 </div>177 178 <!-- Timeline body -->179 <div class="timeline">180 <div class="track"></div>181 <div class="daychip">Day 1</div>182 <div class="region-pill">Delhi</div>183 <div class="region-pill pink">Uttar pradesh</div>184 185 <!-- Stop 1: New Delhi -->186 <div class="stop" style="padding-top:78px;">187 <div class="left-col">188 <div class="code">NDLS</div>189 <div class="arr-time">--</div>190 </div>191 <div class="center-col">192 <div class="dot" style="top:110px;"></div>193 </div>194 <div class="right-col">195 <div class="station-name">New Delhi<span style="font-size:28px; vertical-align:top;">01</span></div>196 <div class="meta">0 km | <a href="#">PF #3</a></div>197 <div class="status-green">Mostly Ontime</div>198 <div class="chip">199 <svg class="icon-food" viewBox="0 0 24 24"><path d="M7 2v9H6V2H4v9H3V2H2v11h5V2H7zm7 0v11h2v-5h2v5h2V2h-2v4h-2V2h-2z"/></svg>200 Order Food201 </div>202 <div class="chip-grey">+ 24 No-Halt stations</div>203 </div>204 <div style="margin-left:auto; width:220px; text-align:center; padding-right:20px; font-size:34px; color:#6f6f6f; position:absolute; right:0; top:90px;">16:10</div>205 </div>206 207 <!-- Stop 2: Mathura Jn -->208 <div class="stop" style="background:rgba(255,255,255,0.4);">209 <div class="left-col">210 <div class="code">MTJ</div>211 <div class="arr-time">17:40</div>212 </div>213 <div class="center-col">214 <div class="dot" style="top:120px;"></div>215 </div>216 <div class="right-col">217 <div class="station-name">Mathura Jn<span style="font-size:28px; vertical-align:top;">02</span></div>218 <div class="meta">141 km | <a href="#">PF #1</a></div>219 <div class="status-red">Mostly Delayed</div>220 <div class="chip">221 <svg class="icon-food" viewBox="0 0 24 24"><path d="M7 2v9H6V2H4v9H3V2H2v11h5V2H7zm7 0v11h2v-5h2v5h2V2h-2v4h-2V2h-2z"/></svg>222 Order Food223 </div>224 <div class="chip-grey">+ 7 No-Halt stations</div>225 </div>226 <div style="margin-left:auto; width:220px; text-align:center; padding-right:20px; font-size:34px; color:#6f6f6f; position:absolute; right:0; top:96px;">17:45</div>227 </div>228 229 <!-- Stop 3: Raja Ki Mandi -->230 <div class="stop" style="background:rgba(255,255,255,0.35);">231 <div class="left-col">232 <div class="code">RKM</div>233 <div class="arr-time">18:18</div>234 </div>235 <div class="center-col">236 <div class="dot" style="top:122px;"></div>237 </div>238 <div class="right-col">239 <div class="station-name">Raja Ki Mandi<span style="font-size:28px; vertical-align:top;">03</span></div>240 <div class="meta">191 km | <a href="#">PF #2</a></div>241 <div class="status-red">Mostly Delayed</div>242 <div class="chip">243 <svg class="icon-food" viewBox="0 0 24 24"><path d="M7 2v9H6V2H4v9H3V2H2v11h5V2H7zm7 0v11h2v-5h2v5h2V2h-2v4h-2V2h-2z"/></svg>244 Order Food245 </div>246 </div>247 <div style="margin-left:auto; width:220px; text-align:center; padding-right:20px; font-size:34px; color:#6f6f6f; position:absolute; right:0; top:96px;">18:20</div>248 </div>249 250 <!-- Stop 4: Agra Cantt -->251 <div class="stop" style="background:rgba(255,255,255,0.35);">252 <div class="left-col">253 <div class="code">AGC</div>254 <div class="arr-time">18:30</div>255 </div>256 <div class="center-col">257 <div class="dot" style="top:120px;"></div>258 </div>259 <div class="right-col">260 <div class="station-name">Agra Cantt<span style="font-size:28px; vertical-align:top;">04</span></div>261 <div class="meta">195 km | <a href="#">PF #1</a></div>262 <div class="status-red">Mostly Delayed</div>263 <div class="chip">264 <svg class="icon-food" viewBox="0 0 24 24"><path d="M7 2v9H6V2H4v9H3V2H2v11h5V2H7zm7 0v11h2v-5h2v5h2V2h-2v4h-2V2h-2z"/></svg>265 Order Food266 </div>267 </div>268 <div style="margin-left:auto; width:220px; text-align:center; padding-right:20px; font-size:34px; color:#6f6f6f; position:absolute; right:0; top:96px;">18:35</div>269 </div>270 271 </div>272 273 <div class="home-indicator"></div>274</div>275</body>276</html>