GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>RailYatri UI Mock</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;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 box-shadow: 0 0 0 rgba(0,0,0,0);15 }16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 background: #0f3c8e;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 }29 .status-time { font-weight: 700; font-size: 40px; letter-spacing: 1px; }30 .status-icons { margin-left: auto; display: flex; gap: 26px; align-items: center; }31 .icon-sm svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 4; }32 33 .app-bar {34 position: absolute;35 top: 110px;36 left: 0;37 width: 1080px;38 height: 120px;39 background: #0f3c8e;40 color: #fff;41 display: flex;42 align-items: center;43 padding: 0 34px;44 box-sizing: border-box;45 }46 .hamburger { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }47 .hamburger svg { stroke: #fff; stroke-width: 10; }48 .app-title { font-size: 54px; font-weight: 700; letter-spacing: 0.5px; }49 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 34px; }50 .pill-count {51 position: absolute; top: -8px; right: -8px;52 background: #ffd84d; color: #0f3c8e; width: 40px; height: 40px;53 border-radius: 20px; font-size: 26px; font-weight: 700;54 display: flex; align-items: center; justify-content: center;55 border: 2px solid rgba(0,0,0,0.1);56 }57 .bell { position: relative; }58 .badge {59 background: #0f3c8e; color: #fff; border: 2px solid #fff;60 width: 60px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-weight: 800;61 }62 63 .blue-feature {64 position: absolute;65 top: 260px;66 left: 30px;67 width: 1020px;68 height: 250px;69 background: #153f91;70 border-radius: 16px;71 box-shadow: 0 6px 18px rgba(0,0,0,0.15);72 display: flex;73 padding: 20px 24px;74 box-sizing: border-box;75 color: #fff;76 gap: 20px;77 }78 .feature-block {79 flex: 1;80 border-radius: 12px;81 display: flex;82 flex-direction: column;83 align-items: flex-start;84 justify-content: center;85 position: relative;86 padding-left: 20px;87 }88 .feature-label { font-size: 48px; font-weight: 700; margin-top: 18px; }89 .feature-pill {90 position: absolute; top: 6px; left: 18px;91 background: #ffd84d; color: #0f3c8e; font-weight: 700; font-size: 24px;92 padding: 10px 18px; border-radius: 22px;93 }94 .mini-badge {95 margin-top: 8px;96 background: rgba(255,255,255,0.18);97 border: 1px solid rgba(255,255,255,0.5);98 color: #fff; font-size: 26px; padding: 6px 12px; border-radius: 18px;99 }100 .ficon { width: 64px; height: 64px; background: rgba(255,255,255,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; }101 .ficon svg { fill: none; stroke: #fff; stroke-width: 6; }102 103 .search-card {104 position: absolute;105 top: 540px;106 left: 30px;107 width: 1020px;108 background: #fff;109 border-radius: 20px;110 box-shadow: 0 10px 28px rgba(0,0,0,0.12);111 padding: 30px;112 box-sizing: border-box;113 }114 .row { display: flex; align-items: center; }115 .col { flex: 1; }116 .label { font-size: 30px; color: #6b7a99; }117 .value { font-size: 56px; font-weight: 800; color: #111; margin-top: 10px; }118 .swap {119 width: 90px; height: 90px; background: #eef3ff; border: 1px solid #d4deff; border-radius: 16px;120 display: flex; align-items: center; justify-content: center; margin: 40px 24px 0 24px;121 }122 .date-row { margin-top: 22px; display: flex; align-items: center; }123 .calendar {124 display: flex; align-items: center; gap: 18px;125 background: #f7f9ff; border: 1px solid #e2e8ff; padding: 18px 20px; border-radius: 16px;126 color: #222; font-size: 40px; font-weight: 700;127 }128 .chips { margin-left: auto; display: flex; gap: 16px; }129 .chip {130 background: #eef3ff; color: #103a8b; border: 1px solid #dbe5ff; padding: 14px 26px;131 border-radius: 28px; font-weight: 700; font-size: 34px;132 }133 .action-bar { margin-top: 26px; display: flex; gap: 28px; padding-top: 22px; border-top: 2px dashed #e7ecf7; }134 .btn {135 flex: 1; display: flex; align-items: center; gap: 18px;136 background: #f1f6ff; color: #153f91; border-radius: 22px; border: 1px solid #d9e5ff;137 padding: 28px; font-size: 40px; font-weight: 800; justify-content: center;138 }139 .btn.primary { background: #1542a8; color: #fff; border-color: #1542a8; }140 .btn svg { width: 48px; height: 48px; stroke-width: 5; stroke: currentColor; fill: none; }141 142 .section-title {143 position: absolute; top: 930px; left: 30px; width: 1020px;144 font-size: 56px; font-weight: 800; color: #1a1a1a;145 }146 .two-cards {147 position: absolute; top: 1000px; left: 30px; width: 1020px;148 display: flex; gap: 26px;149 }150 .big-card {151 flex: 1; background: #fff; border-radius: 20px; box-shadow: 0 12px 24px rgba(0,0,0,0.1);152 height: 150px; display: flex; align-items: center; padding: 0 26px; box-sizing: border-box;153 }154 .big-card .icon { width: 80px; height: 80px; background: #eaf1ff; border: 1px solid #d7e3ff; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }155 .big-card .label { font-size: 46px; color: #0f3c8e; font-weight: 800; }156 .chev { margin-left: auto; color: #97a4c2; }157 .chev svg { width: 40px; height: 40px; stroke: #97a4c2; stroke-width: 8; }158 159 .grid-quick {160 position: absolute; top: 1180px; left: 30px; width: 1020px;161 display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;162 }163 .quick-item { background: #fff; border-radius: 20px; box-shadow: 0 10px 22px rgba(0,0,0,0.09); height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }164 .quick-icon { width: 90px; height: 90px; background: #eaf1ff; border: 1px solid #d7e3ff; border-radius: 22px; display: flex; align-items: center; justify-content: center; }165 .quick-text { text-align: center; color: #24324d; font-size: 36px; font-weight: 700; line-height: 1.15; }166 167 .spotlight-title {168 position: absolute; top: 1700px; left: 30px; font-size: 54px; font-weight: 800; color: #1a1a1a;169 }170 .banner-row {171 position: absolute; top: 1780px; left: 30px; width: 1020px; display: flex; gap: 26px;172 }173 .img-placeholder {174 flex: 1; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;175 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; font-weight: 700;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status Bar -->183 <div class="status-bar">184 <div class="status-time">11:23</div>185 <div class="status-icons">186 <div class="icon-sm">187 <!-- GPS / dot icon -->188 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"></circle><circle cx="12" cy="12" r="9"></circle></svg>189 </div>190 <div class="icon-sm">191 <!-- Currency or network icon -->192 <svg viewBox="0 0 24 24"><path d="M6 5h12M6 12h12M6 19h12"></path></svg>193 </div>194 <div class="icon-sm">195 <!-- Signal S -->196 <svg viewBox="0 0 24 24"><path d="M4 18c3-5 13-2 16-7M4 6c3 5 13 2 16 7" stroke-linecap="round"></path></svg>197 </div>198 <div class="icon-sm">199 <!-- WiFi icon -->200 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0"></path><circle cx="12" cy="19" r="1.8" fill="#fff"></circle></svg>201 </div>202 <div class="icon-sm">203 <!-- Battery icon -->204 <svg viewBox="0 0 32 24"><rect x="2" y="4" width="26" height="16" rx="3"></rect><rect x="28" y="8" width="4" height="8" rx="1"></rect><rect x="4" y="6" width="20" height="12" fill="#fff" stroke="none"></rect></svg>205 </div>206 </div>207 </div>208 209 <!-- App Bar -->210 <div class="app-bar">211 <div class="hamburger">212 <svg viewBox="0 0 64 64">213 <line x1="8" y1="16" x2="56" y2="16"></line>214 <line x1="8" y1="32" x2="56" y2="32"></line>215 <line x1="8" y1="48" x2="56" y2="48"></line>216 </svg>217 </div>218 <div class="app-title">RailYatri</div>219 <div class="app-actions">220 <div class="bell">221 <div class="badge">222 <svg viewBox="0 0 24 24"><path d="M12 22c1.2 0 2-1 2-2H10c0 1 0.8 2 2 2zm8-6H4l2-2v-4a6 6 0 1 1 12 0v4l2 2z" fill="#fff" stroke="none"></path></svg>223 </div>224 <div class="pill-count">1</div>225 </div>226 <div class="badge">%</div>227 </div>228 </div>229 230 <!-- Blue Feature Panel -->231 <div class="blue-feature">232 <div class="feature-block">233 <div class="feature-pill">Book Instantly</div>234 <div class="ficon">235 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"></rect><circle cx="7" cy="17" r="1.8" fill="#fff"></circle><circle cx="17" cy="17" r="1.8" fill="#fff"></circle></svg>236 </div>237 <div class="feature-label">Train Tickets</div>238 <div class="mini-badge">IRCTC</div>239 </div>240 <div class="feature-block">241 <div class="feature-pill">Book Now</div>242 <div class="ficon">243 <svg viewBox="0 0 24 24"><rect x="3" y="8" width="18" height="12" rx="2"></rect><rect x="7" y="5" width="10" height="3" rx="1"></rect></svg>244 </div>245 <div class="feature-label">Bus Tickets</div>246 </div>247 <div class="feature-block">248 <div class="ficon">249 <svg viewBox="0 0 24 24"><path d="M6 20V8h12v12M10 8V4h4v4" ></path><path d="M9 12h6M9 16h6"></path></svg>250 </div>251 <div class="feature-label">Food on Train</div>252 <div class="mini-badge">Hygienic</div>253 </div>254 </div>255 256 <!-- Search Card -->257 <div class="search-card">258 <div class="row">259 <div class="col">260 <div class="label">From</div>261 <div class="value">NDLS | New Delhi</div>262 </div>263 <div class="swap">264 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5">265 <path d="M7 8h10l-3-3M17 16H7l3 3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>266 </svg>267 </div>268 <div class="col">269 <div class="label">To</div>270 <div class="value">GHY | Guwahati</div>271 </div>272 </div>273 <div class="date-row">274 <div class="label" style="margin-right:16px;">Date</div>275 <div class="calendar">276 <svg viewBox="0 0 24 24" width="44" height="44" stroke="#103a8b" stroke-width="2.5" fill="none">277 <rect x="3" y="5" width="18" height="16" rx="2"></rect>278 <line x1="3" y1="10" x2="21" y2="10"></line>279 <line x1="7" y1="3" x2="7" y2="7"></line>280 <line x1="17" y1="3" x2="17" y2="7"></line>281 </svg>282 <div>30 Jun, Fri</div>283 </div>284 <div class="chips">285 <div class="chip">01 Jul</div>286 <div class="chip">02 Jul</div>287 <div class="chip">03 Jul</div>288 </div>289 </div>290 <div class="action-bar">291 <div class="btn">292 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="22" y2="22"></line></svg>293 Search Buses294 </div>295 <div class="btn primary">296 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"></rect><circle cx="7" cy="17" r="1.6" fill="currentColor" stroke="none"></circle><circle cx="17" cy="17" r="1.6" fill="currentColor" stroke="none"></circle></svg>297 Search Trains298 </div>299 </div>300 </div>301 302 <!-- Train Enquiry Center -->303 <div class="section-title">Train Enquiry Center</div>304 <div class="two-cards">305 <div class="big-card">306 <div class="icon">307 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5" fill="none">308 <path d="M4 17h16l-2-3V8a6 6 0 1 0-12 0v6l-2 3z"></path>309 </svg>310 </div>311 <div class="label">Train Status</div>312 <div class="chev"><svg viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none"></polyline></svg></div>313 </div>314 <div class="big-card">315 <div class="icon">316 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5" fill="none">317 <rect x="5" y="4" width="14" height="16" rx="2"></rect>318 <line x1="8" y1="8" x2="16" y2="8"></line>319 <line x1="8" y1="12" x2="16" y2="12"></line>320 </svg>321 </div>322 <div class="label">PNR Status</div>323 <div class="chev"><svg viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none"></polyline></svg></div>324 </div>325 </div>326 327 <!-- Quick Grid -->328 <div class="grid-quick">329 <div class="quick-item">330 <div class="quick-icon">331 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5" fill="none">332 <line x1="6" y1="6" x2="18" y2="6"></line>333 <line x1="6" y1="12" x2="18" y2="12"></line>334 <line x1="6" y1="18" x2="18" y2="18"></line>335 </svg>336 </div>337 <div class="quick-text">Trains b/w Stations</div>338 </div>339 <div class="quick-item">340 <div class="quick-icon">341 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5" fill="none">342 <rect x="3" y="5" width="18" height="14" rx="2"></rect>343 <line x1="3" y1="10" x2="21" y2="10"></line>344 </svg>345 </div>346 <div class="quick-text">Time Table</div>347 </div>348 <div class="quick-item">349 <div class="quick-icon">350 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5" fill="none">351 <path d="M6 18l4-8 4 4 4-8"></path>352 </svg>353 </div>354 <div class="quick-text">Ticket Availability</div>355 </div>356 <div class="quick-item">357 <div class="quick-icon">358 <svg viewBox="0 0 24 24" stroke="#103a8b" stroke-width="2.5" fill="none">359 <circle cx="12" cy="12" r="9"></circle>360 <circle cx="12" cy="12" r="2" fill="#103a8b"></circle>361 </svg>362 </div>363 <div class="quick-text">View More</div>364 </div>365 </div>366 367 <!-- Spotlight -->368 <div class="spotlight-title">In the Spotlight</div>369 <div class="banner-row">370 <div class="img-placeholder">[IMG: Promotional Banner 1]</div>371 <div class="img-placeholder">[IMG: Promotional Banner 2]</div>372 </div>373 374</div>375</body>376</html>