GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>RailYatri UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; border-radius:0;10 box-shadow: 0 0 0 rgba(0,0,0,0);11 }12 .statusbar {13 height:60px; color:#ffffff; font-weight:600; font-size:32px;14 display:flex; align-items:center; justify-content:space-between;15 padding:0 32px; background:#0c3f8a;16 }17 .topbar {18 height:100px; background:#0c3f8a; color:#fff;19 display:flex; align-items:center; justify-content:space-between;20 padding:0 32px 0 28px;21 }22 .brand { font-size:48px; font-weight:700; letter-spacing:0.5px; }23 .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }24 .badge {25 position:absolute; top:-6px; right:-2px; background:#f7c843; color:#0c3f8a;26 font-size:28px; width:48px; height:48px; border-radius:50%;27 display:flex; align-items:center; justify-content:center; font-weight:800;28 border:2px solid rgba(255,255,255,0.4);29 }30 .blue-section {31 background:#0c3f8a; padding:20px 24px 28px 24px;32 }33 .three-actions {34 display:flex; gap:24px;35 }36 .action-box {37 flex:1; background:#153c8e; border-radius:18px; padding:24px; color:#fff;38 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);39 }40 .chip {41 display:inline-block; background:#f6d349; color:#0c3f8a; font-weight:700;42 border-radius:20px; padding:8px 18px; font-size:26px; margin-bottom:16px;43 }44 .action-title { font-size:42px; font-weight:800; margin-top:12px; }45 .action-icon { width:72px; height:72px; margin-bottom:10px; }46 .content {47 background:#f4f6fb; padding:24px;48 }49 .search-card {50 background:#ffffff; border-radius:24px; box-shadow:0 6px 16px rgba(12,63,138,0.15);51 padding:28px; margin-bottom:26px;52 }53 .row { display:flex; align-items:center; }54 .field {55 flex:1; padding:18px 0;56 }57 .label { color:#7a8aa6; font-size:30px; margin-bottom:8px; }58 .value { color:#0b2f66; font-size:54px; font-weight:800; }59 .swap {60 width:88px; height:88px; background:#ecf2ff; border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 24px;61 border:1px dashed #bcd0ff;62 }63 .date-row { margin-top:18px; display:flex; align-items:center; }64 .calendar { display:flex; align-items:center; color:#0b2f66; font-size:40px; font-weight:800; }65 .calendar svg { margin-right:16px; }66 .date-chip {67 margin-left:18px; background:#eaf1ff; color:#0b2f66; border-radius:26px;68 padding:14px 24px; font-size:34px; font-weight:800;69 }70 .divider {71 border-top:2px dashed #e3e9f6; margin:26px 0;72 }73 .cta-row { display:flex; gap:26px; }74 .cta {75 flex:1; background:#eef4ff; color:#0b2f66; border-radius:22px; padding:28px;76 font-size:44px; font-weight:900; display:flex; align-items:center; justify-content:center;77 }78 .cta svg { margin-right:18px; }79 .section-title {80 font-size:56px; font-weight:800; color:#1b2a4d; margin:26px 10px;81 }82 .two-cards { display:flex; gap:26px; }83 .mini-card {84 flex:1; background:#ffffff; border-radius:22px; padding:26px; box-shadow:0 8px 18px rgba(12,63,138,0.12);85 display:flex; align-items:center; justify-content:space-between;86 }87 .mini-title { font-size:46px; font-weight:800; color:#1b2a4d; }88 .grid-four {89 display:flex; justify-content:space-between; margin:40px 10px 10px 10px;90 }91 .grid-item {92 width:240px; text-align:center;93 }94 .circle {95 width:120px; height:120px; border-radius:50%; background:#eef4ff; border:2px solid #cddaf6; margin:0 auto 18px;96 display:flex; align-items:center; justify-content:center;97 }98 .grid-text { font-size:40px; font-weight:800; color:#1b2a4d; line-height:1.1; }99 .spotlight { margin-top:30px; padding:10px; }100 .spot-title { font-size:54px; font-weight:800; color:#1b2a4d; margin:10px 0 20px 10px; }101 .banner-wrap { display:flex; gap:26px; }102 .banner {103 flex:1; height:260px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;104 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; font-weight:700;105 }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status bar -->112 <div class="statusbar">113 <div>11:24</div>114 <div style="display:flex; align-items:center; gap:28px; font-size:28px;">115 <span>◈</span>116 <span>₹</span>117 <span>S</span>118 <span style="display:inline-flex; align-items:center;">📶</span>119 <span style="display:inline-flex; align-items:center;">🔋</span>120 </div>121 </div>122 123 <!-- Top bar -->124 <div class="topbar">125 <div class="icon-btn">126 <svg width="56" height="56">127 <rect x="6" y="12" width="44" height="6" fill="#fff"></rect>128 <rect x="6" y="26" width="44" height="6" fill="#fff"></rect>129 <rect x="6" y="40" width="44" height="6" fill="#fff"></rect>130 </svg>131 </div>132 <div class="brand">RailYatri</div>133 <div style="display:flex; align-items:center; gap:26px; position:relative;">134 <div class="icon-btn" style="position:relative;">135 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">136 <path d="M12 2a6 6 0 0 1 6 6v4l2 3v1H4v-1l2-3V8a6 6 0 0 1 6-6z"></path>137 </svg>138 <div class="badge">1</div>139 </div>140 <div class="icon-btn">141 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">142 <circle cx="12" cy="12" r="9"></circle>143 <line x1="8" y1="12" x2="16" y2="12"></line>144 <line x1="12" y1="8" x2="12" y2="16"></line>145 </svg>146 </div>147 </div>148 </div>149 150 <!-- Blue action section -->151 <div class="blue-section">152 <div class="three-actions">153 <div class="action-box">154 <div class="chip">Book Instantly</div>155 <div class="action-icon">156 <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff">157 <rect x="5" y="8" width="14" height="8" rx="2"></rect>158 <circle cx="8" cy="18" r="2"></circle>159 <circle cx="16" cy="18" r="2"></circle>160 <rect x="7" y="5" width="10" height="3" rx="1"></rect>161 </svg>162 </div>163 <div style="background:#1b4aa6; display:inline-block; padding:6px 14px; border-radius:14px; font-size:24px; font-weight:800; margin-bottom:8px;">IRCTC</div>164 <div class="action-title">Train Tickets</div>165 </div>166 <div class="action-box">167 <div class="chip">Book Now</div>168 <div class="action-icon">169 <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff">170 <rect x="5" y="6" width="14" height="10" rx="2"></rect>171 <rect x="7" y="10" width="10" height="4" fill="#153c8e"></rect>172 <line x1="7" y1="17" x2="17" y2="17" stroke="#fff" stroke-width="2"></line>173 </svg>174 </div>175 <div class="action-title">Bus Tickets</div>176 </div>177 <div class="action-box">178 <div class="chip">Hygienic</div>179 <div class="action-icon">180 <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff">181 <rect x="7" y="4" width="3" height="14"></rect>182 <rect x="14" y="8" width="3" height="10"></rect>183 <circle cx="8.5" cy="20" r="1.5" fill="#fff"></circle>184 <circle cx="15.5" cy="20" r="1.5" fill="#fff"></circle>185 </svg>186 </div>187 <div class="action-title">Food on Train</div>188 </div>189 </div>190 </div>191 192 <!-- Main content -->193 <div class="content">194 <div class="search-card">195 <div class="row">196 <div class="field">197 <div class="label">From</div>198 <div class="value">NDLS | New Delhi</div>199 </div>200 <div class="swap">201 <svg width="58" height="58" viewBox="0 0 24 24" fill="#0b2f66">202 <path d="M7 7h10l-3-3m3 3-3 3" stroke="#0b2f66" stroke-width="2" fill="none"></path>203 <path d="M17 17H7l3 3m-3-3 3-3" stroke="#0b2f66" stroke-width="2" fill="none"></path>204 </svg>205 </div>206 <div class="field">207 <div class="label" style="text-align:right;">To</div>208 <div class="value" style="text-align:right;">GHY | Guwahati</div>209 </div>210 </div>211 212 <div class="date-row">213 <div class="calendar">214 <svg width="52" height="52" viewBox="0 0 24 24" fill="#0b2f66">215 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="none" stroke="#0b2f66" stroke-width="2"></rect>216 <line x1="3" y1="9" x2="21" y2="9" stroke="#0b2f66" stroke-width="2"></line>217 <line x1="7" y1="2" x2="7" y2="6" stroke="#0b2f66" stroke-width="2"></line>218 <line x1="17" y1="2" x2="17" y2="6" stroke="#0b2f66" stroke-width="2"></line>219 </svg>220 <span>30 Jun, Fri</span>221 </div>222 <div class="date-chip">01 Jul</div>223 <div class="date-chip">02 Jul</div>224 <div class="date-chip">03 Jul</div>225 </div>226 227 <div class="divider"></div>228 229 <div class="cta-row">230 <div class="cta">231 <svg width="52" height="52" viewBox="0 0 24 24" fill="#0b2f66">232 <rect x="5" y="6" width="14" height="10" rx="2"></rect>233 <line x1="7" y1="17" x2="17" y2="17" stroke="#0b2f66" stroke-width="2"></line>234 </svg>235 Search Buses236 </div>237 <div class="cta">238 <svg width="52" height="52" viewBox="0 0 24 24" fill="#0b2f66">239 <rect x="5" y="8" width="14" height="8" rx="2"></rect>240 <circle cx="8" cy="18" r="2"></circle>241 <circle cx="16" cy="18" r="2"></circle>242 </svg>243 Search Trains244 </div>245 </div>246 </div>247 248 <div class="section-title">Train Enquiry Center</div>249 250 <div class="two-cards">251 <div class="mini-card">252 <div style="display:flex; align-items:center;">253 <div style="width:70px; height:70px; border-radius:14px; background:#eef4ff; display:flex; align-items:center; justify-content:center; margin-right:18px; border:1px solid #cddaf6;">254 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0b2f66">255 <path d="M12 3l4 4H8l4-4z"></path>256 <rect x="5" y="8" width="14" height="8" rx="2"></rect>257 </svg>258 </div>259 <div class="mini-title">Train Status</div>260 </div>261 <svg width="36" height="36" viewBox="0 0 24 24" fill="#7a8aa6">262 <path d="M9 6l6 6-6 6" fill="none" stroke="#7a8aa6" stroke-width="2"></path>263 </svg>264 </div>265 266 <div class="mini-card">267 <div style="display:flex; align-items:center;">268 <div style="width:70px; height:70px; border-radius:14px; background:#eef4ff; display:flex; align-items:center; justify-content:center; margin-right:18px; border:1px solid #cddaf6;">269 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0b2f66">270 <rect x="6" y="4" width="12" height="16" rx="2"></rect>271 <line x1="8" y1="8" x2="16" y2="8" stroke="#fff" stroke-width="2"></line>272 </svg>273 </div>274 <div class="mini-title">PNR Status</div>275 </div>276 <svg width="36" height="36" viewBox="0 0 24 24" fill="#7a8aa6">277 <path d="M9 6l6 6-6 6" fill="none" stroke="#7a8aa6" stroke-width="2"></path>278 </svg>279 </div>280 </div>281 282 <div class="grid-four">283 <div class="grid-item">284 <div class="circle">285 <svg width="60" height="60" viewBox="0 0 24 24" fill="#0b2f66">286 <path d="M5 12h14M5 7h10M5 17h10" stroke="#0b2f66" stroke-width="2" fill="none"></path>287 </svg>288 </div>289 <div class="grid-text">Trains b/w Stations</div>290 </div>291 292 <div class="grid-item">293 <div class="circle">294 <svg width="60" height="60" viewBox="0 0 24 24" fill="#0b2f66">295 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="none" stroke="#0b2f66" stroke-width="2"></rect>296 <line x1="3" y1="9" x2="21" y2="9" stroke="#0b2f66" stroke-width="2"></line>297 </svg>298 </div>299 <div class="grid-text">Time Table</div>300 </div>301 302 <div class="grid-item">303 <div class="circle">304 <svg width="60" height="60" viewBox="0 0 24 24" fill="#0b2f66">305 <path d="M4 12h16M12 4v16" stroke="#0b2f66" stroke-width="2"></path>306 </svg>307 </div>308 <div class="grid-text">Ticket Availability</div>309 </div>310 311 <div class="grid-item">312 <div class="circle">313 <svg width="60" height="60" viewBox="0 0 24 24" fill="#0b2f66">314 <circle cx="12" cy="12" r="4"></circle>315 <circle cx="4" cy="12" r="2"></circle>316 <circle cx="20" cy="12" r="2"></circle>317 </svg>318 </div>319 <div class="grid-text">View More</div>320 </div>321 </div>322 323 <div class="spotlight">324 <div class="spot-title">In the Spotlight</div>325 <div class="banner-wrap">326 <div class="banner">[IMG: Spotlight Banner 1]</div>327 <div class="banner">[IMG: Spotlight Banner 2]</div>328 </div>329 </div>330 331 </div>332 333</div>334</body>335</html>