GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>IndiGo Date Picker</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    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    font-size: 40px;28    color: #4b4b4b;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .icon-wifi, .icon-battery {36    width: 50px; height: 50px;37  }38 39  /* Header */40  .header {41    position: absolute;42    top: 110px;43    left: 0;44    width: 1080px;45    height: 140px;46    padding: 0 36px;47    display: flex;48    align-items: center;49    border-bottom: 1px solid #e6e6e6;50    background: #fff;51  }52  .header .close-btn {53    width: 90px; height: 90px;54    display: flex; align-items: center; justify-content: center;55    margin-right: 20px;56  }57  .header .app-title {58    font-weight: 700;59    font-size: 48px;60    letter-spacing: 0.5px;61    color: #0B4BC9;62    flex: 1;63    text-align: center;64  }65 66  /* Banner / hero placeholder */67  .hero {68    position: absolute;69    top: 250px;70    left: 0;71    width: 1080px;72    height: 480px;73    background: linear-gradient(#3d3d3f, #1f1f22);74    display: flex;75    align-items: center;76    justify-content: center;77    color: #d7d7d7;78    font-size: 38px;79  }80 81  /* Calendar overlay area */82  .calendar {83    position: absolute;84    top: 730px;85    left: 0;86    width: 1080px;87    background: #fff;88    border-top-left-radius: 24px;89    border-top-right-radius: 24px;90    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);91    padding: 30px 40px 0 40px;92  }93 94  .calendar .close-overlay {95    position: absolute;96    right: 40px;97    top: 34px;98    width: 70px; height: 70px;99    display: flex; align-items: center; justify-content: center;100    color: #888;101  }102 103  .dow {104    margin-top: 40px;105    display: grid;106    grid-template-columns: repeat(7, 1fr);107    color: #7a7a7a;108    font-size: 34px;109    column-gap: 16px;110    row-gap: 16px;111  }112  .dow div {113    text-align: center;114  }115 116  .month-header {117    margin-top: 24px;118    margin-bottom: 12px;119    display: flex;120    justify-content: flex-end;121    font-weight: 700;122    color: #222;123    font-size: 42px;124  }125 126  .grid {127    display: grid;128    grid-template-columns: repeat(7, 1fr);129    column-gap: 16px;130    row-gap: 16px;131  }132  .date {133    height: 92px;134    border-radius: 16px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 40px;139    color: #333;140  }141  .date.empty { background: transparent; }142  .date.normal { background: transparent; }143  .date.selected-start, .date.selected-end {144    background: #2F66D5;145    color: #fff;146  }147  .date.selected-middle {148    background: #EDEFF5;149    color: #333;150  }151 152  .summary {153    margin: 30px 0 20px 0;154    text-align: center;155    font-size: 40px;156    color: #333;157  }158 159  .btn-done {160    width: calc(100% - 80px);161    margin: 0 40px 40px 40px;162    height: 120px;163    background: #2F66D5;164    color: #fff;165    border-radius: 14px;166    display: flex; align-items: center; justify-content: center;167    font-size: 44px; font-weight: 600;168  }169 170  /* Home pill */171  .home-pill {172    position: absolute;173    bottom: 26px;174    left: 50%;175    transform: translateX(-50%);176    width: 400px;177    height: 14px;178    background: #cfcfcf;179    border-radius: 8px;180  }181 182  /* Thin image-style placeholder for top branding strip if needed */183  .brand-strip {184    position: absolute;185    top: 250px;186    left: 0;187    width: 1080px;188    height: 480px;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="status-bar">197    <div class="time">3:06</div>198    <div class="status-icons">199      <!-- Simple wifi icon -->200      <svg class="icon-wifi" viewBox="0 0 24 24">201        <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5z" fill="#6b6b6b"/>202        <path d="M4.2 12.8c4.9-4.4 10.7-4.4 15.6 0l-1.6 1.6c-3.9-3.4-8.5-3.4-12.4 0l-1.6-1.6z" fill="#6b6b6b"/>203        <path d="M7.4 15.7c3.1-2.8 6.7-2.8 9.8 0l-1.6 1.6c-2.2-1.9-4.4-1.9-6.6 0l-1.6-1.6z" fill="#6b6b6b"/>204      </svg>205      <!-- Simple battery icon -->206      <svg class="icon-battery" viewBox="0 0 24 24">207        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#6b6b6b"/>208        <rect x="21" y="9" width="2" height="6" fill="#6b6b6b"/>209        <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>210      </svg>211    </div>212  </div>213 214  <!-- Header -->215  <div class="header">216    <div class="close-btn">217      <svg width="48" height="48" viewBox="0 0 24 24">218        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#666" stroke-width="2" stroke-linecap="round"/>219      </svg>220    </div>221    <div class="app-title">IndiGo ✈︎</div>222  </div>223 224  <!-- Dark banner -->225  <div class="hero">[IMG: Dark Indigo Banner]</div>226 227  <!-- Calendar Overlay -->228  <div class="calendar">229    <div class="close-overlay">230      <svg width="48" height="48" viewBox="0 0 24 24">231        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#a0a0a0" stroke-width="2" stroke-linecap="round"/>232      </svg>233    </div>234 235    <!-- Day of week labels -->236    <div class="dow">237      <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>238    </div>239 240    <!-- August 2023 -->241    <div class="month-header">August 2023</div>242    <div class="grid">243      <!-- Row 1: Aug starts on Tue -->244      <div class="date empty"></div>245      <div class="date selected-start">1</div>246      <div class="date selected-middle">2</div>247      <div class="date selected-end">3</div>248      <div class="date normal">4</div>249      <div class="date normal">5</div>250      <div class="date normal">6</div>251 252      <!-- Row 2 -->253      <div class="date normal">7</div>254      <div class="date normal">8</div>255      <div class="date normal">9</div>256      <div class="date normal">10</div>257      <div class="date normal">11</div>258      <div class="date normal">12</div>259      <div class="date normal">13</div>260 261      <!-- Row 3 -->262      <div class="date normal">14</div>263      <div class="date normal">15</div>264      <div class="date normal">16</div>265      <div class="date normal">17</div>266      <div class="date normal">18</div>267      <div class="date normal">19</div>268      <div class="date normal">20</div>269 270      <!-- Row 4 -->271      <div class="date normal">21</div>272      <div class="date normal">22</div>273      <div class="date normal">23</div>274      <div class="date normal">24</div>275      <div class="date normal">25</div>276      <div class="date normal">26</div>277      <div class="date normal">27</div>278 279      <!-- Row 5 -->280      <div class="date normal">28</div>281      <div class="date normal">29</div>282      <div class="date normal">30</div>283      <div class="date normal">31</div>284      <div class="date empty"></div>285      <div class="date empty"></div>286      <div class="date empty"></div>287    </div>288 289    <!-- September 2023 -->290    <div class="month-header" style="margin-top: 42px;">September 2023</div>291    <div class="grid">292      <!-- Row 1: Sep 1 is Fri -->293      <div class="date empty"></div>294      <div class="date empty"></div>295      <div class="date empty"></div>296      <div class="date empty"></div>297      <div class="date normal">1</div>298      <div class="date normal">2</div>299      <div class="date normal">3</div>300 301      <!-- Row 2 -->302      <div class="date normal">4</div>303      <div class="date normal">5</div>304      <div class="date normal">6</div>305      <div class="date normal">7</div>306      <div class="date normal">8</div>307      <div class="date normal">9</div>308      <div class="date normal">10</div>309 310      <!-- Row 3 -->311      <div class="date normal">11</div>312      <div class="date normal">12</div>313      <div class="date normal">13</div>314      <div class="date normal">14</div>315      <div class="date normal">15</div>316      <div class="date normal">16</div>317      <div class="date normal">17</div>318 319      <!-- Row 4 -->320      <div class="date normal">18</div>321      <div class="date normal">19</div>322      <div class="date normal">20</div>323      <div class="date normal">21</div>324      <div class="date normal">22</div>325      <div class="date normal">23</div>326      <div class="date normal">24</div>327 328      <!-- Row 5 -->329      <div class="date normal">25</div>330      <div class="date normal">26</div>331      <div class="date normal">27</div>332      <div class="date normal">28</div>333      <div class="date normal">29</div>334      <div class="date normal">30</div>335      <div class="date empty"></div>336    </div>337 338    <!-- Summary and Done button -->339    <div class="summary">Tue 1 Aug - Thu 3 Aug (2 nights)</div>340    <div class="btn-done">Done</div>341  </div>342 343  <!-- Home pill -->344  <div class="home-pill"></div>345 346</div>347</body>348</html>