GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Select outbound date UI</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#F2F4FA;11    font-family: "Segoe UI", Arial, sans-serif;12    color:#111;13  }14 15  /* Top system status bar */16  .status-bar{17    height:90px;18    padding:0 32px;19    display:flex;20    align-items:center;21    justify-content:space-between;22    color:#2b2b2b;23    font-weight:600;24    font-size:36px;25  }26  .status-right{27    display:flex; gap:22px; align-items:center;28  }29  .icon-wifi, .icon-signal, .icon-battery{30    width:46px; height:46px;31  }32  .icon-battery rect{ stroke:#444; fill:none; stroke-width:4; }33  .icon-battery .cap{ fill:#444; }34  .icon-battery .level{ fill:#444; }35 36  /* App bar */37  .app-bar{38    height:140px;39    background:#fff;40    border-bottom:1px solid #E6E8F0;41    display:flex; align-items:center;42    padding:0 36px;43    gap:18px;44  }45  .back-btn{46    width:64px; height:64px; display:flex; align-items:center; justify-content:center;47  }48  .app-title{49    color:#0B1C86;50    font-size:56px;51    font-weight:700;52    letter-spacing:0.2px;53  }54 55  /* Content area */56  .content{57    position:absolute; left:0; right:0; top:230px; /* status(90) + appbar(140) */58    bottom:180px; /* space for bottom nav */59    background:#fff;60    overflow:hidden;61    padding-bottom:20px;62  }63 64  .months{65    padding:0 44px 24px;66  }67 68  .month-header{69    color:#0B1C86;70    font-size:44px;71    font-weight:800;72    margin:32px 0 18px;73  }74 75  .weekdays{76    display:grid;77    grid-template-columns:repeat(7, 1fr);78    font-size:36px;79    color:#6A78B0;80    margin-bottom:18px;81  }82  .weekdays div{83    text-align:left;84  }85 86  .calendar{87    display:grid;88    grid-template-columns:repeat(7, 1fr);89    grid-auto-rows:120px;90    gap:6px 6px;91    margin-bottom:40px;92  }93  .cell{94    display:flex; align-items:center; justify-content:center;95    font-size:44px; color:#111; font-weight:600;96  }97  .cell.empty{ color:transparent; }98  .cell.gray{ color:#C4C8D3; }99  .cell .bubble{100    background:#E7A13A; color:#fff;101    padding:20px 40px; border-radius:36px;102    font-weight:800; line-height:1;103  }104 105  .divider{106    height:1px; background:#EAEFF6; margin:10px -44px 0;107  }108 109  /* Bottom navigation */110  .bottom-nav{111    position:absolute; left:0; right:0; bottom:0;112    height:180px; background:#fff; border-top:1px solid #E6E8F0;113    display:flex; align-items:center; justify-content:space-around;114  }115  .nav-item{116    display:flex; flex-direction:column; align-items:center; gap:14px;117    color:#0B1C86;118  }119  .nav-item span{120    font-size:36px; color:#1D2A5B;121  }122  .nav-icon { width:76px; height:76px; }123 124  /* Small label above bottom showing next month */125  .next-month{126    position:absolute; left:44px; right:44px; bottom:200px;127    color:#0B1C86; font-size:44px; font-weight:800;128  }129 130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status Bar -->136  <div class="status-bar">137    <div>3:30</div>138    <div class="status-right">139      <!-- simple signal dots -->140      <svg class="icon-signal" viewBox="0 0 24 24">141        <circle cx="4" cy="20" r="3" fill="#444"></circle>142        <circle cx="12" cy="16" r="3" fill="#444"></circle>143        <circle cx="20" cy="12" r="3" fill="#444"></circle>144      </svg>145      <!-- WiFi -->146      <svg class="icon-wifi" viewBox="0 0 24 24">147        <path d="M2 8c6-6 14-6 20 0" stroke="#444" stroke-width="2" fill="none"/>148        <path d="M6 12c4-4 8-4 12 0" stroke="#444" stroke-width="2" fill="none"/>149        <path d="M10 16c2-2 4-2 6 0" stroke="#444" stroke-width="2" fill="none"/>150        <circle cx="12" cy="20" r="2" fill="#444"></circle>151      </svg>152      <!-- Battery -->153      <svg class="icon-battery" viewBox="0 0 36 24">154        <rect x="2" y="4" width="28" height="16" rx="3"/>155        <rect class="cap" x="31" y="8" width="3" height="8"/>156        <rect class="level" x="5" y="7" width="22" height="10" rx="2"/>157      </svg>158    </div>159  </div>160 161  <!-- App Bar -->162  <div class="app-bar">163    <div class="back-btn">164      <svg width="44" height="44" viewBox="0 0 24 24">165        <path d="M15 5l-7 7 7 7" stroke="#1D2A5B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>166      </svg>167    </div>168    <div class="app-title">Select outbound date</div>169  </div>170 171  <!-- Content -->172  <div class="content">173    <div class="months">174 175      <!-- NOVEMBER 2023 -->176      <div class="month-header">NOVEMBER 2023</div>177      <div class="weekdays">178        <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>179      </div>180      <div class="calendar">181        <!-- Row 1 -->182        <div class="cell empty"></div>183        <div class="cell empty"></div>184        <div class="cell">1</div>185        <div class="cell">2</div>186        <div class="cell">3</div>187        <div class="cell">4</div>188        <div class="cell">5</div>189        <!-- Row 2 -->190        <div class="cell gray">6</div>191        <div class="cell"><div class="bubble">7</div></div>192        <div class="cell">8</div>193        <div class="cell">9</div>194        <div class="cell">10</div>195        <div class="cell">11</div>196        <div class="cell">12</div>197        <!-- Row 3 -->198        <div class="cell">13</div>199        <div class="cell">14</div>200        <div class="cell">15</div>201        <div class="cell">16</div>202        <div class="cell">17</div>203        <div class="cell">18</div>204        <div class="cell">19</div>205        <!-- Row 4 -->206        <div class="cell">20</div>207        <div class="cell">21</div>208        <div class="cell">22</div>209        <div class="cell">23</div>210        <div class="cell">24</div>211        <div class="cell">25</div>212        <div class="cell">26</div>213        <!-- Row 5 -->214        <div class="cell">27</div>215        <div class="cell">28</div>216        <div class="cell">29</div>217        <div class="cell">30</div>218        <div class="cell empty"></div>219        <div class="cell empty"></div>220        <div class="cell empty"></div>221      </div>222 223      <!-- DECEMBER 2023 -->224      <div class="month-header">DECEMBER 2023</div>225      <div class="weekdays">226        <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>227      </div>228      <div class="calendar">229        <!-- Row 1 -->230        <div class="cell empty"></div>231        <div class="cell empty"></div>232        <div class="cell empty"></div>233        <div class="cell empty"></div>234        <div class="cell">1</div>235        <div class="cell">2</div>236        <div class="cell">3</div>237        <!-- Row 2 -->238        <div class="cell">4</div>239        <div class="cell">5</div>240        <div class="cell">6</div>241        <div class="cell">7</div>242        <div class="cell">8</div>243        <div class="cell">9</div>244        <div class="cell">10</div>245        <!-- Row 3 -->246        <div class="cell">11</div>247        <div class="cell">12</div>248        <div class="cell">13</div>249        <div class="cell">14</div>250        <div class="cell">15</div>251        <div class="cell">16</div>252        <div class="cell">17</div>253        <!-- Row 4 -->254        <div class="cell">18</div>255        <div class="cell">19</div>256        <div class="cell">20</div>257        <div class="cell">21</div>258        <div class="cell">22</div>259        <div class="cell">23</div>260        <div class="cell">24</div>261        <!-- Row 5 -->262        <div class="cell">25</div>263        <div class="cell">26</div>264        <div class="cell">27</div>265        <div class="cell">28</div>266        <div class="cell">29</div>267        <div class="cell">30</div>268        <div class="cell">31</div>269      </div>270 271      <div class="divider"></div>272    </div>273 274    <!-- Next section label that appears at the bottom of the viewport -->275    <div class="next-month">JANUARY 2024</div>276  </div>277 278  <!-- Bottom Navigation -->279  <div class="bottom-nav">280    <div class="nav-item">281      <svg class="nav-icon" viewBox="0 0 24 24">282        <circle cx="11" cy="11" r="7" stroke="#1D2A5B" stroke-width="2" fill="none"/>283        <path d="M17 17l4 4" stroke="#1D2A5B" stroke-width="2" fill="none" stroke-linecap="round"/>284      </svg>285      <span>Search</span>286    </div>287    <div class="nav-item">288      <svg class="nav-icon" viewBox="0 0 24 24">289        <rect x="4" y="5" width="16" height="14" rx="2" stroke="#1D2A5B" stroke-width="2" fill="none"/>290        <path d="M8 9h8M8 13h8" stroke="#1D2A5B" stroke-width="2"/>291        <circle cx="6" cy="7" r="2" fill="#1D2A5B"/>292      </svg>293      <span>Booking</span>294    </div>295    <div class="nav-item">296      <svg class="nav-icon" viewBox="0 0 24 24">297        <path d="M4 6h16M4 12h16M4 18h16" stroke="#1D2A5B" stroke-width="2" stroke-linecap="round"/>298      </svg>299      <span>Menu</span>300    </div>301  </div>302 303</div>304</body>305</html>