GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>RailYatri Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#f3f6fb;11    color:#222;12  }13 14  /* Top bars */15  .statusbar{16    height:100px; background:#1d4fad; color:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; font-size:36px; letter-spacing:0.5px;19  }20  .status-icons{ display:flex; align-items:center; gap:26px; opacity:0.95; }21  .appbar{22    height:140px; background:#1d4fad; color:#fff;23    display:flex; align-items:center; justify-content:space-between;24    padding:0 36px 14px 36px;25    box-sizing:border-box;26  }27  .left-app{ display:flex; align-items:center; gap:28px; }28  .hamburger{ width:56px; height:44px; position:relative; }29  .hamburger span{30    position:absolute; left:0; right:0; height:6px; background:#fff; border-radius:4px;31  }32  .hamburger span:nth-child(1){ top:0; }33  .hamburger span:nth-child(2){ top:18px; width:80%; }34  .hamburger span:nth-child(3){ bottom:0; }35  .title{ font-size:56px; font-weight:700; letter-spacing:0.5px; }36  .right-app{ display:flex; align-items:center; gap:32px; }37  .badge{ position:relative; }38  .dot{39    position:absolute; top:-10px; right:-10px; width:34px; height:34px;40    background:#ffd54f; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center;41    font-size:22px; font-weight:700;42  }43 44  /* Quick actions strip */45  .quick-actions{46    background:#1d4fad; padding:18px 28px 28px 28px;47  }48  .qa-row{49    background:#163f95; border-radius:18px; padding:18px 18px;50    display:flex; gap:18px;51  }52  .qa-card{53    flex:1; background:#163f95; color:#fff; border-radius:16px;54    height:250px; display:flex; align-items:center; justify-content:center; flex-direction:column;55    position:relative;56  }57  .qa-pill{58    position:absolute; top:16px; background:#ffd54f; color:#1d1d1d; font-weight:700;59    padding:8px 20px; border-radius:28px; font-size:28px;60  }61  .qa-icon{62    width:120px; height:120px; margin-top:10px; margin-bottom:10px;63    display:flex; align-items:center; justify-content:center;64  }65  .qa-title{ font-size:44px; font-weight:700; text-align:center; }66 67  /* Search card */68  .search-card{69    background:#fff; margin:26px 32px; margin-top:22px;70    border-radius:26px; box-shadow:0 4px 16px rgba(0,0,0,0.08);71    padding:32px;72  }73  .row-between{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }74  .label{ color:#6f7f97; font-size:30px; margin-bottom:8px; }75  .place{76    font-size:56px; font-weight:700; padding:14px 0; border-bottom:2px solid #e8edf7;77  }78  .swap{79    width:90px; height:90px; display:flex; align-items:center; justify-content:center; margin-top:56px;80    color:#1d4fad;81  }82  .dates{ display:flex; align-items:center; gap:24px; margin-top:30px; flex-wrap:wrap; }83  .chip{84    background:#eef3ff; color:#1d4fad; padding:16px 26px; border-radius:38px;85    font-size:34px; font-weight:700;86  }87  .cal{ display:flex; align-items:center; gap:16px; color:#2b3d5b; background:#f6f8fe; border-radius:14px; padding:14px 20px; font-size:36px; }88  .search-actions{ display:flex; gap:28px; margin-top:30px; }89  .btn{90    flex:1; border:2px solid #dbe5ff; background:#f6f8ff; color:#1d3e82; border-radius:22px;91    height:120px; display:flex; align-items:center; justify-content:center; gap:18px; font-weight:800; font-size:42px;92  }93  .btn.train{ background:#eaf0ff; }94  .btn svg{ width:52px; height:52px; }95 96  /* Enquiry Center */97  .section-title{98    font-size:56px; font-weight:800; color:#1d335b; margin:24px 32px 12px 32px;99  }100  .large-tiles{ display:flex; gap:28px; padding:0 32px; }101  .tile{102    flex:1; background:#fff; border-radius:22px; box-shadow:0 4px 14px rgba(0,0,0,0.06);103    padding:28px; display:flex; align-items:center; justify-content:space-between;104  }105  .tile .left{ display:flex; align-items:center; gap:20px; }106  .tile .icon{107    width:80px; height:80px; border-radius:18px; background:#eaf0ff;108    display:flex; align-items:center; justify-content:center; color:#1d4fad;109  }110  .arrow{ color:#9aa9c2; font-size:46px; }111  .sub-tiles{ display:flex; gap:26px; padding:28px 32px 10px 32px; }112  .mini{113    flex:1; background:#fff; border-radius:22px; box-shadow:0 4px 14px rgba(0,0,0,0.05);114    padding:28px 16px; text-align:center;115  }116  .mini .micon{117    width:86px; height:86px; border-radius:18px; background:#eaf0ff; margin:0 auto 16px auto;118    display:flex; align-items:center; justify-content:center; color:#1d4fad;119  }120  .mini .mtxt{ font-size:34px; color:#1d335b; line-height:1.15; font-weight:700; }121 122  .banner{123    margin:16px 32px; border:1px solid #BDBDBD; height:220px; background:#E0E0E0;124    display:flex; align-items:center; justify-content:center; color:#616161; border-radius:16px;125  }126  .spot-title{ font-size:56px; font-weight:800; color:#1d335b; margin:18px 32px; }127  .card-placeholder{128    margin:0 32px; height:240px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:18px;129    display:flex; align-items:center; justify-content:center; color:#616161;130  }131 132  /* Simple icons via SVG */133  .wifi svg, .battery svg { width:46px; height:46px; fill:#fff; }134 135  /* helper */136  .muted{ color:#5472c4; }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="statusbar">144    <div class="status">11:21</div>145    <div class="status-icons">146      <div class="wifi">147        <svg viewBox="0 0 24 24"><path d="M12 20c.9 0 1.6-.7 1.6-1.6S12.9 16.8 12 16.8s-1.6.7-1.6 1.6.7 1.6 1.6 1.6zm7.2-4.9c-3.9-3.8-10.2-3.8-14.1 0l1.5 1.5c3-3 8-3 11 0l1.6-1.5zm3.2-3.3C16.9 4.3 7.1 4.3 1.6 11.8l1.6 1.5c4.8-6 13.8-6 18.6 0l1.6-1.5z"/></svg>148      </div>149      <div class="battery">150        <svg viewBox="0 0 24 24"><path d="M16 6h1c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2h-1v1h-2v-1H6c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h10zm-1 2H6v8h9V8z"/></svg>151      </div>152    </div>153  </div>154 155  <!-- App bar -->156  <div class="appbar">157    <div class="left-app">158      <div class="hamburger" aria-label="menu">159        <span></span><span></span><span></span>160      </div>161      <div class="title">RailYatri</div>162    </div>163    <div class="right-app">164      <div class="badge">165        <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V9c0-3.1-1.6-5.6-4.5-6.3V2h-3v.7C7.6 3.4 6 5.9 6 9v7l-2 2v1h16v-1l-2-2z"/></svg>166        <div class="dot">1</div>167      </div>168      <div style="width:60px; height:60px; background:#123a8e; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;">%</div>169    </div>170  </div>171 172  <!-- Quick actions -->173  <div class="quick-actions">174    <div class="qa-row">175      <div class="qa-card">176        <div class="qa-pill">Book Instantly</div>177        <div class="qa-icon">178          <svg viewBox="0 0 24 24" width="120" height="120" fill="#fff"><path d="M4 16V7c0-1.1.9-2 2-2h2V3h2v2h4V3h2v2h2c1.1 0 2 .9 2 2v9H4zm0 2h16v2H4v-2zm2-9h12V9H6v0z"/></svg>179        </div>180        <div class="qa-title">Train Tickets</div>181      </div>182      <div class="qa-card">183        <div class="qa-pill">Book Now</div>184        <div class="qa-icon">185          <svg viewBox="0 0 24 24" width="120" height="120" fill="#fff"><path d="M4 16V7c0-1.7 1.3-3 3-3h10c1.7 0 3 1.3 3 3v9c0 1.7-1.3 3-3 3h-1l1 1v1H7v-1l1-1H7c-1.7 0-3-1.3-3-3zm3-7h10V7H7v2z"/></svg>186        </div>187        <div class="qa-title">Bus Tickets</div>188      </div>189      <div class="qa-card">190        <div class="qa-pill">Hygienic</div>191        <div class="qa-icon">192          <svg viewBox="0 0 24 24" width="120" height="120" fill="#fff"><path d="M7 2h2l2 7-2 1 2 10H9L7 10l-2-1 2-7zm9 0h2v7h-2V2zm0 9h2v11h-2V11z"/></svg>193        </div>194        <div class="qa-title">Food on Train</div>195      </div>196    </div>197  </div>198 199  <!-- Search card -->200  <div class="search-card">201    <div class="row-between">202      <div style="flex:1">203        <div class="label">From</div>204        <div class="place">NDLS | New Delhi</div>205      </div>206      <div class="swap" title="swap">207        <svg viewBox="0 0 24 24" width="70" height="70" fill="#1d4fad"><path d="M7 7h11l-3-3 1.4-1.4L22.8 8l-6.4 5.4L15 12l3-3H7V7zm10 10H6l3 3-1.4 1.4L1.2 16l6.4-5.4L9 12l-3 3h11v2z"/></svg>208      </div>209      <div style="flex:1">210        <div class="label" style="text-align:right">To</div>211        <div class="place" style="text-align:right">Manali</div>212      </div>213    </div>214 215    <div class="dates">216      <div class="cal">217        <svg viewBox="0 0 24 24" width="40" height="40" fill="#1d4fad"><path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 7H4v11h16V9z"/></svg>218        <span>30 Jun, Fri</span>219      </div>220      <div class="chip">01 Jul</div>221      <div class="chip">02 Jul</div>222      <div class="chip">03 Jul</div>223    </div>224 225    <div class="search-actions">226      <div class="btn">227        <svg viewBox="0 0 24 24" fill="#1d4fad"><path d="M4 16V7c0-1.7 1.3-3 3-3h10c1.7 0 3 1.3 3 3v9c0 1.7-1.3 3-3 3h-1l1 1v1H7v-1l1-1H7c-1.7 0-3-1.3-3-3zm3-7h10V7H7v2z"/></svg>228        <span>Search Buses</span>229      </div>230      <div class="btn train">231        <svg viewBox="0 0 24 24" fill="#1d4fad"><path d="M4 16V7c0-1.1.9-2 2-2h2V3h2v2h4V3h2v2h2c1.1 0 2 .9 2 2v9H4zm2 2h2l-2 2H4l2-2zm12 0-2 2h-2l2-2h2z"/></svg>232        <span>Search Trains</span>233      </div>234    </div>235  </div>236 237  <!-- Train Enquiry Center -->238  <div class="section-title">Train Enquiry Center</div>239  <div class="large-tiles">240    <div class="tile">241      <div class="left">242        <div class="icon">243          <svg viewBox="0 0 24 24" width="48" height="48" fill="#1d4fad"><path d="M12 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 3v6l4 2-.6 1L11 11V5h1z"/></svg>244        </div>245        <div style="font-size:44px; font-weight:800; color:#1d335b;">Train Status</div>246      </div>247      <div class="arrow">›</div>248    </div>249    <div class="tile">250      <div class="left">251        <div class="icon">252          <svg viewBox="0 0 24 24" width="48" height="48" fill="#1d4fad"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2z"/></svg>253        </div>254        <div style="font-size:44px; font-weight:800; color:#1d335b;">PNR Status</div>255      </div>256      <div class="arrow">›</div>257    </div>258  </div>259 260  <div class="sub-tiles">261    <div class="mini">262      <div class="micon">263        <svg viewBox="0 0 24 24" width="42" height="42" fill="#1d4fad"><path d="M4 9h16v2H4V9zm0 4h16v2H4v-2zm0 4h10v2H4v-2zM4 5h16v2H4V5z"/></svg>264      </div>265      <div class="mtxt">Trains b/w Stations</div>266    </div>267    <div class="mini">268      <div class="micon">269        <svg viewBox="0 0 24 24" width="42" height="42" fill="#1d4fad"><path d="M7 3h10v2H7V3zM5 7h14v12H5V7zm2 2v8h10V9H7z"/></svg>270      </div>271      <div class="mtxt">Time Table</div>272    </div>273    <div class="mini">274      <div class="micon">275        <svg viewBox="0 0 24 24" width="42" height="42" fill="#1d4fad"><path d="M12 2l3 7h7l-5.5 4.1L18 21l-6-4-6 4 1.5-7.9L2 9h7l3-7z"/></svg>276      </div>277      <div class="mtxt">Ticket Availability</div>278    </div>279    <div class="mini">280      <div class="micon">281        <svg viewBox="0 0 24 24" width="42" height="42" fill="#1d4fad"><path d="M12 8h8v2h-8V8zm0 4h8v2h-8v-2zm0 4h8v2h-8v-2zM4 8h6v6H4V8z"/></svg>282      </div>283      <div class="mtxt">View More</div>284    </div>285  </div>286 287  <div class="banner">[IMG: Advertisement Banner - Tata AIA]</div>288 289  <div class="spot-title">In the Spotlight</div>290  <div class="card-placeholder">[IMG: Spotlight Cards / Promotions]</div>291 292</div>293</body>294</html>