GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Train Time Table UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #f7f8fa;11 }12 13 /* Status bar */14 .status-bar {15 height: 72px; background: #0b4e9b; color: #fff; display: flex; align-items: center; padding: 0 36px; font-weight: 600;16 }17 .status-bar .left { display: flex; align-items: center; gap: 16px; }18 .status-bar .right { margin-left: auto; display: flex; align-items: center; gap: 24px; }19 .status-icon { width: 32px; height: 32px; }20 21 /* Header */22 .header {23 background: #0b4e9b; color: #fff; padding: 30px 36px; display: flex; align-items: center;24 height: 180px;25 }26 .back-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-right: 24px; }27 .title { font-size: 46px; font-weight: 600; letter-spacing: 0.3px; }28 .header .info {29 margin-left: auto; padding-left: 36px; border-left: 2px solid rgba(255,255,255,0.4);30 }31 .header .info .big { font-size: 36px; font-weight: 700; }32 .header .info .small { font-size: 28px; opacity: 0.9; }33 34 /* Tabs */35 .tabs {36 height: 120px; background: #fff; display: flex; align-items: center; gap: 60px; padding: 0 36px;37 box-shadow: 0 2px 0 rgba(0,0,0,0.05);38 color: #8b9098;39 font-weight: 600;40 }41 .tab { font-size: 34px; }42 .tab.active { color: #1f6fe5; position: relative; }43 .tab.active::after {44 content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 8px; background: #4f8fea; border-radius: 8px;45 }46 47 /* Timeline layout */48 .content { position: relative; padding: 24px 36px; }49 .timeline {50 display: grid; grid-template-columns: 180px 70px 1fr 160px; column-gap: 24px;51 }52 .mid {53 position: relative;54 }55 .mid::before {56 content: ""; position: absolute; left: 34px; top: 0; width: 6px; height: 1800px; background: #d0d3d8; border-radius: 3px;57 }58 .dot {59 width: 30px; height: 30px; background: #9aa0a6; border-radius: 50%; position: absolute; left: 25px; top: 40px;60 box-shadow: 0 0 0 6px rgba(240,240,240,0.9);61 }62 63 .station { padding: 36px 0; border-bottom: 1px solid #eee; }64 .code { color: #3d84ff; font-size: 40px; font-weight: 700; letter-spacing: 1px; }65 .left-time { color: #9aa0a6; font-size: 30px; margin-top: 8px; }66 .name { font-size: 42px; color: #333; font-weight: 700; }67 .meta { margin-top: 12px; font-size: 30px; color: #6b7280; }68 .meta .link { color: #3d84ff; font-weight: 700; }69 .status.red { color: #e53935; font-size: 32px; margin-top: 10px; }70 .status.orange { color: #f39c12; font-size: 32px; margin-top: 10px; }71 .right-time { text-align: right; color: #9aa0a6; font-size: 32px; padding-top: 8px; }72 73 .chip {74 display: inline-block; padding: 14px 22px; background: #ececec; color: #6b7280; border-radius: 30px; font-size: 28px; margin-top: 18px;75 }76 77 .order-food {78 display: inline-flex; align-items: center; gap: 14px; padding: 20px 26px; background: #fff; border: 1px solid #ddd;79 border-radius: 16px; font-size: 34px; color: #333; margin-top: 24px; box-shadow: 0 4px 10px rgba(0,0,0,0.08);80 }81 .food-icon { width: 44px; height: 44px; }82 83 /* Region banners and section shading */84 .region-strip {85 display: flex; align-items: center; gap: 18px; padding: 18px 24px; border-radius: 18px; margin: 20px 0;86 }87 .region-strip .img {88 width: 140px; height: 80px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 10px;89 }90 .region-strip .label { font-size: 34px; color: #2f6f5f; font-weight: 700; }91 .section-light {92 background: #fbfcf6; border-radius: 20px; padding: 16px; margin: 16px 0;93 }94 95 .day-chip {96 position: absolute; left: 220px; top: 1180px; background: #6b6f76; color: #fff; padding: 14px 24px; border-radius: 24px; font-size: 30px; font-weight: 700;97 }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 <div class="left">106 <div>9:53</div>107 <!-- simple keyhole icon -->108 <svg class="status-icon" viewBox="0 0 24 24">109 <circle cx="12" cy="10" r="5" fill="#fff"></circle>110 <rect x="11" y="14" width="2" height="7" fill="#fff"></rect>111 </svg>112 </div>113 <div class="right">114 <!-- WiFi -->115 <svg class="status-icon" viewBox="0 0 24 24">116 <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none"/>117 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none"/>118 <circle cx="12" cy="17" r="2" fill="#fff"></circle>119 </svg>120 <!-- Battery -->121 <svg class="status-icon" viewBox="0 0 28 24">122 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>123 <rect x="24" y="9" width="2" height="6" fill="#fff"/>124 <rect x="4" y="8" width="14" height="8" fill="#fff"/>125 </svg>126 </div>127 </div>128 129 <!-- Header -->130 <div class="header">131 <div class="back-btn">132 <svg viewBox="0 0 24 24" width="44" height="44">133 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134 </svg>135 </div>136 <div class="title">12616 - Grand Trunk Express</div>137 <div class="info">138 <div class="big">36hr:20min</div>139 <div class="small">Runs Daily</div>140 </div>141 </div>142 143 <!-- Tabs -->144 <div class="tabs">145 <div class="tab">Train Status</div>146 <div class="tab">Map View</div>147 <div class="tab active">Time Table</div>148 <div class="tab">Coach Position</div>149 <div class="tab">Med...</div>150 </div>151 152 <!-- Content and timeline -->153 <div class="content">154 <div class="timeline">155 <!-- Left column spacer -->156 <div></div>157 <!-- Middle column vertical line -->158 <div class="mid">159 <div class="dot" style="top: 10px;"></div>160 <div class="dot" style="top: 230px;"></div>161 <div class="dot" style="top: 540px;"></div>162 <div class="dot" style="top: 870px;"></div>163 <div class="dot" style="top: 1260px;"></div>164 </div>165 <!-- Top section with region strips -->166 <div class="section-light">167 <div style="display:flex; justify-content: space-between; color:#6b7280; font-size:28px; padding: 6px 12px 12px 12px;">168 <div>247 km | <span class="link" style="color:#3d84ff;">PF #2</span></div>169 <div>19:32</div>170 </div>171 <div class="status red">Mostly Delayed</div>172 <div class="chip">+ 3 No-Halt stations</div>173 <div class="region-strip" style="background:#d9f7e7;">174 <div class="img">[IMG: Rajasthan]</div>175 <div class="label">Rajasthan</div>176 </div>177 <div class="region-strip" style="background:#eaf2d6;">178 <div class="img">[IMG: Madhya Pradesh]</div>179 <div class="label">Madhya pradesh</div>180 </div>181 </div>182 <div></div>183 184 <!-- Station 1: Morena -->185 <div class="station">186 <div class="code">MRA</div>187 <div class="left-time">20:21</div>188 </div>189 <div class="mid"></div>190 <div class="station">191 <div class="name">Morena<span style="font-size:32px; vertical-align: super;">06</span></div>192 <div class="meta">275 km | <span class="link">PF #1</span></div>193 <div class="status orange">Irregular Ontime</div>194 <div class="chip">+ 5 No-Halt stations</div>195 </div>196 <div class="station">197 <div class="right-time">20:23</div>198 </div>199 200 <!-- Station 2: Gwalior -->201 <div class="station">202 <div class="code">GWL</div>203 <div class="left-time">21:00</div>204 </div>205 <div class="mid"></div>206 <div class="station">207 <div class="name">Gwalior Jn<span style="font-size:32px; vertical-align: super;">07</span></div>208 <div class="meta">313 km | <span class="link">PF #1</span></div>209 <div class="status red">Mostly Delayed</div>210 <div class="order-food">211 <svg class="food-icon" viewBox="0 0 24 24">212 <circle cx="8" cy="12" r="4" stroke="#333" stroke-width="2" fill="none"/>213 <rect x="14" y="6" width="2" height="12" fill="#333"/>214 <rect x="17" y="6" width="2" height="12" fill="#333"/>215 </svg>216 <span>Order Food</span>217 </div>218 <div class="chip">+ 9 No-Halt stations</div>219 </div>220 <div class="station">221 <div class="right-time">21:02</div>222 </div>223 224 <!-- Station 3: Jhansi -->225 <div class="station" style="background:#fffef6;">226 <div class="code">VGLJ</div>227 <div class="left-time">23:00</div>228 </div>229 <div class="mid"></div>230 <div class="station" style="background:#fffef6;">231 <div class="name">Veerangana Laxmibai Jhansi<span style="font-size:32px; vertical-align: super;">08</span></div>232 <div class="meta">410 km | <span class="link">PF #2</span></div>233 <div class="status orange">Irregular Ontime</div>234 <div class="order-food">235 <svg class="food-icon" viewBox="0 0 24 24">236 <circle cx="8" cy="12" r="4" stroke="#333" stroke-width="2" fill="none"/>237 <rect x="14" y="6" width="2" height="12" fill="#333"/>238 <rect x="17" y="6" width="2" height="12" fill="#333"/>239 </svg>240 <span>Order Food</span>241 </div>242 <div class="chip">+ 16 No-Halt stations</div>243 </div>244 <div class="station" style="background:#fffef6;">245 <div class="right-time">23:08</div>246 </div>247 248 <!-- Day 2 chip -->249 <div></div>250 <div class="mid"></div>251 <div class="day-chip">Day 2</div>252 <div></div>253 254 <!-- Station 4: Bina -->255 <div class="station">256 <div class="code">BINA</div>257 <div class="left-time">01:20</div>258 </div>259 <div class="mid"></div>260 <div class="station">261 <div class="name">Bina Jn<span style="font-size:32px; vertical-align: super;">09</span></div>262 <div class="meta">563 km | <span class="link">PF #2</span></div>263 <div class="status orange">Irregular Ontime</div>264 </div>265 <div class="station">266 <div class="right-time">01:25</div>267 </div>268 </div>269 </div>270 271</div>272</body>273</html>