GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>IndiGo Date Picker Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #ffffff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 90px;27    background: #ffffff;28    display: flex;29    align-items: center;30    padding: 0 40px;31    box-sizing: border-box;32    color: #4a4a4a;33    font-size: 32px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .icon {42    width: 36px;43    height: 36px;44  }45 46  /* App bar with logo */47  .app-bar {48    position: absolute;49    top: 90px;50    left: 0;51    width: 1080px;52    height: 120px;53    background: #ffffff;54    display: flex;55    align-items: center;56    padding: 0 32px;57    box-sizing: border-box;58    border-bottom: 1px solid #e9e9e9;59  }60  .close-left {61    width: 80px;62    height: 80px;63    display: flex;64    align-items: center;65    justify-content: center;66  }67  .brand {68    position: absolute;69    left: 50%;70    transform: translateX(-50%);71    font-size: 54px;72    font-weight: 600;73    color: #114c9f;74    letter-spacing: 1px;75  }76 77  /* Header image/banner placeholder */78  .header-img {79    position: absolute;80    top: 210px;81    left: 0;82    width: 1080px;83    height: 360px;84    background: #E0E0E0;85    border-top: 1px solid #BDBDBD;86    border-bottom: 1px solid #BDBDBD;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #757575;91    font-size: 34px;92  }93 94  /* Calendar container */95  .calendar {96    position: absolute;97    top: 570px;98    left: 0;99    width: 1080px;100    background: #ffffff;101    box-sizing: border-box;102    padding: 34px 64px 0 64px;103  }104  .calendar .dismiss {105    position: absolute;106    right: 64px;107    top: 24px;108    width: 60px;109    height: 60px;110  }111 112  .dow {113    display: grid;114    grid-template-columns: repeat(7, 1fr);115    gap: 14px;116    padding: 16px 0 8px 0;117    color: #7c7c7c;118    font-size: 36px;119  }120  .month-title {121    font-size: 44px;122    font-weight: 700;123    color: #222;124    margin: 28px 0 22px 0;125  }126  .grid {127    display: grid;128    grid-template-columns: repeat(7, 1fr);129    gap: 18px 18px;130    padding-bottom: 26px;131  }132  .cell {133    height: 96px;134    border-radius: 10px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 40px;139    color: #333;140  }141  .empty {142    color: transparent;143  }144  .selected {145    background: #3367d6;146    color: #ffffff;147    font-weight: 700;148  }149 150  /* Bottom footer area */151  .footer {152    position: absolute;153    bottom: 140px;154    left: 0;155    width: 1080px;156    padding: 20px 64px;157    box-sizing: border-box;158    text-align: center;159  }160  .footer .prompt {161    font-size: 40px;162    color: #555;163    margin-bottom: 24px;164  }165  .btn {166    width: 900px;167    height: 116px;168    margin: 0 auto;169    background: #d9d9d9;170    color: #0b0b0b;171    border-radius: 16px;172    font-size: 44px;173    display: flex;174    align-items: center;175    justify-content: center;176  }177 178  /* Home indicator */179  .home-indicator {180    position: absolute;181    bottom: 40px;182    left: 50%;183    transform: translateX(-50%);184    width: 420px;185    height: 18px;186    background: #000000;187    border-radius: 12px;188    opacity: 0.6;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="status-bar">197    <div>3:07</div>198    <div class="status-right">199      <!-- Simple wifi icon -->200      <svg class="icon" viewBox="0 0 24 24">201        <path d="M12 19.5c.7 0 1.25.55 1.25 1.25S12.7 22 12 22s-1.25-.55-1.25-1.25S11.3 19.5 12 19.5z" fill="#4a4a4a"/>202        <path d="M2.5 8.5c5.2-4.2 13.8-4.2 19 0" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>203        <path d="M5 12c4-3 10-3 14 0" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>204        <path d="M8 15c2.5-1.8 5.5-1.8 8 0" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>205      </svg>206      <!-- Battery icon -->207      <svg class="icon" viewBox="0 0 28 18">208        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#4a4a4a" fill="none" stroke-width="2"></rect>209        <rect x="3" y="5" width="16" height="8" fill="#4a4a4a"></rect>210        <rect x="24" y="6" width="3" height="6" fill="#4a4a4a"></rect>211      </svg>212    </div>213  </div>214 215  <!-- App bar -->216  <div class="app-bar">217    <div class="close-left">218      <svg viewBox="0 0 24 24" width="42" height="42">219        <path d="M5 5l14 14M19 5L5 19" stroke="#444" stroke-width="3" stroke-linecap="round"/>220      </svg>221    </div>222    <div class="brand">IndiGo ✈︎</div>223  </div>224 225  <!-- Header image/banner -->226  <div class="header-img">[IMG: Flight header/banner]</div>227 228  <!-- Calendar -->229  <div class="calendar">230    <div class="dismiss">231      <svg viewBox="0 0 24 24" width="60" height="60">232        <path d="M5 5l14 14M19 5L5 19" stroke="#777" stroke-width="3" stroke-linecap="round"/>233      </svg>234    </div>235 236    <div class="dow">237      <div>Mon</div>238      <div>Tue</div>239      <div>Wed</div>240      <div>Thu</div>241      <div>Fri</div>242      <div>Sat</div>243      <div>Sun</div>244    </div>245 246    <div class="month-title">August 2023</div>247    <div class="grid">248      <div class="cell empty">.</div> <!-- offset for Monday -->249      <div class="cell">1</div>250      <div class="cell">2</div>251      <div class="cell">3</div>252      <div class="cell">4</div>253      <div class="cell">5</div>254      <div class="cell">6</div>255 256      <div class="cell">7</div>257      <div class="cell">8</div>258      <div class="cell">9</div>259      <div class="cell selected">10</div>260      <div class="cell">11</div>261      <div class="cell">12</div>262      <div class="cell">13</div>263 264      <div class="cell">14</div>265      <div class="cell">15</div>266      <div class="cell">16</div>267      <div class="cell">17</div>268      <div class="cell">18</div>269      <div class="cell">19</div>270      <div class="cell">20</div>271 272      <div class="cell">21</div>273      <div class="cell">22</div>274      <div class="cell">23</div>275      <div class="cell">24</div>276      <div class="cell">25</div>277      <div class="cell">26</div>278      <div class="cell">27</div>279 280      <div class="cell">28</div>281      <div class="cell">29</div>282      <div class="cell">30</div>283      <div class="cell">31</div>284      <div class="cell empty">.</div>285      <div class="cell empty">.</div>286      <div class="cell empty">.</div>287    </div>288 289    <div class="month-title" style="margin-top: 18px;">September 2023</div>290    <div class="grid">291      <div class="cell empty">.</div>292      <div class="cell empty">.</div>293      <div class="cell empty">.</div>294      <div class="cell empty">.</div>295      <div class="cell">1</div>296      <div class="cell">2</div>297      <div class="cell">3</div>298 299      <div class="cell">4</div>300      <div class="cell">5</div>301      <div class="cell">6</div>302      <div class="cell">7</div>303      <div class="cell">8</div>304      <div class="cell">9</div>305      <div class="cell">10</div>306 307      <div class="cell">11</div>308      <div class="cell">12</div>309      <div class="cell">13</div>310      <div class="cell">14</div>311      <div class="cell">15</div>312      <div class="cell">16</div>313      <div class="cell">17</div>314 315      <div class="cell">18</div>316      <div class="cell">19</div>317      <div class="cell">20</div>318      <div class="cell">21</div>319      <div class="cell">22</div>320      <div class="cell">23</div>321      <div class="cell">24</div>322 323      <div class="cell">25</div>324      <div class="cell">26</div>325      <div class="cell">27</div>326      <div class="cell">28</div>327      <div class="cell">29</div>328      <div class="cell">30</div>329      <div class="cell empty">.</div>330    </div>331  </div>332 333  <!-- Footer area with button -->334  <div class="footer">335    <div class="prompt">Select a check-out date</div>336    <div class="btn">Done</div>337  </div>338 339  <!-- Home indicator -->340  <div class="home-indicator"></div>341 342</div>343</body>344</html>