GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Select Dates UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF; color: #111;12  }13 14  /* Top app bar */15  .top-area { padding: 60px 48px 24px 48px; }16  .nav-row { display: flex; align-items: center; gap: 20px; }17  .close-icon {18    width: 40px; height: 40px;19  }20  .title { font-size: 54px; font-weight: 700; letter-spacing: 0.2px; }21 22  /* Check-in / Check-out row */23  .io-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 26px; }24  .checkin { color: #6B7280; }25  .checkin .label { font-size: 30px; }26  .checkin .value { font-size: 48px; font-weight: 800; color: #111; margin-top: 10px; }27 28  .checkout-pill {29    position: relative;30    width: 500px;31    height: 120px;32    border: 3px solid #2E6BFF;33    border-radius: 30px;34    display: flex; align-items: center; justify-content: flex-end;35    padding: 16px 26px;36  }37  .checkout-text {38    text-align: right;39    color: #2E6BFF;40    line-height: 1.2;41  }42  .checkout-text .label { font-size: 32px; font-weight: 600; }43  .checkout-text .select { font-size: 40px; font-weight: 800; }44  .connector {45    position: absolute;46    left: -24px; top: 50%;47    transform: translateY(-50%);48    width: 86px; height: 60px;49    background: #E9EEF5; border: 1px solid #C7D2E5;50    border-radius: 30px;51    display: flex; align-items: center; justify-content: center;52    color: #6B7280; font-weight: 700; font-size: 34px;53    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);54  }55 56  /* Weekday header */57  .weekday-bar {58    margin: 28px 48px 14px 48px;59    display: grid; grid-template-columns: repeat(7, 1fr);60    color: #8E8E8E; font-weight: 600; font-size: 28px; letter-spacing: 0.4px;61  }62  .weekday-bar .weekend { color: #FF5A5F; font-weight: 700; }63 64  /* Month section */65  .month { margin-top: 32px; }66  .month .name { text-align: center; font-size: 40px; font-weight: 700; margin: 24px 0 18px; }67  .days {68    margin: 0 60px;69    display: grid; grid-template-columns: repeat(7, 1fr); gap: 28px 38px;70  }71  .day {72    height: 92px; display: flex; align-items: center; justify-content: center;73    font-size: 34px; font-weight: 700; color: #1F2937;74  }75  .day.disabled { color: #C7CBD1; }76  .day.empty { color: transparent; }77  .day.selected {78    width: 92px; height: 92px; border-radius: 50%;79    background: #2E6BFF; color: #FFFFFF; font-weight: 800;80  }81 82  /* Bottom system bar mimic */83  .bottom-bar {84    position: absolute; left: 0; right: 0; bottom: 0;85    height: 140px; background: #000000;86  }87  .home-indicator {88    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);89    width: 360px; height: 12px; background: #E5E7EB; border-radius: 8px; opacity: 0.9;90  }91</style>92</head>93<body>94<div id="render-target">95  <div class="top-area">96    <div class="nav-row">97      <svg class="close-icon" viewBox="0 0 24 24">98        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2.4" stroke-linecap="round" fill="none"/>99      </svg>100      <div class="title">Select Dates</div>101    </div>102 103    <div class="io-row">104      <div class="checkin">105        <div class="label">Check-in</div>106        <div class="value">1 Jan 2024</div>107      </div>108 109      <div class="checkout-pill">110        <div class="connector">-</div>111        <div class="checkout-text">112          <div class="label">Check-out</div>113          <div class="select">Select</div>114        </div>115      </div>116    </div>117  </div>118 119  <div class="weekday-bar">120    <div>MON</div>121    <div>TUE</div>122    <div>WED</div>123    <div>THU</div>124    <div>FRI</div>125    <div class="weekend">SAT</div>126    <div class="weekend">SUN</div>127  </div>128 129  <!-- December 2023 -->130  <div class="month">131    <div class="name">December 2023</div>132    <div class="days">133      <!-- Mon-Thu placeholders before Dec 1 (Fri) -->134      <div class="day empty">.</div>135      <div class="day empty">.</div>136      <div class="day empty">.</div>137      <div class="day empty">.</div>138      <div class="day disabled">1</div>139      <div class="day disabled">2</div>140      <div class="day disabled">3</div>141 142      <div class="day disabled">4</div>143      <div class="day disabled">5</div>144      <div class="day disabled">6</div>145      <div class="day disabled">7</div>146      <div class="day disabled">8</div>147      <div class="day disabled">9</div>148      <div class="day disabled">10</div>149 150      <div class="day disabled">11</div>151      <div class="day disabled">12</div>152      <div class="day disabled">13</div>153      <div class="day disabled">14</div>154      <div class="day disabled">15</div>155      <div class="day disabled">16</div>156      <div class="day disabled">17</div>157 158      <div class="day disabled">18</div>159      <div class="day">19</div>160      <div class="day">20</div>161      <div class="day">21</div>162      <div class="day">22</div>163      <div class="day">23</div>164      <div class="day">24</div>165 166      <div class="day">25</div>167      <div class="day">26</div>168      <div class="day">27</div>169      <div class="day">28</div>170      <div class="day">29</div>171      <div class="day">30</div>172      <div class="day">31</div>173    </div>174  </div>175 176  <!-- January 2024 -->177  <div class="month" style="margin-top: 70px;">178    <div class="name">January 2024</div>179    <div class="days">180      <!-- Starts Monday -->181      <div class="day selected">1</div>182      <div class="day">2</div>183      <div class="day">3</div>184      <div class="day">4</div>185      <div class="day">5</div>186      <div class="day">6</div>187      <div class="day">7</div>188 189      <div class="day">8</div>190      <div class="day">9</div>191      <div class="day">10</div>192      <div class="day">11</div>193      <div class="day">12</div>194      <div class="day">13</div>195      <div class="day">14</div>196 197      <div class="day">15</div>198      <div class="day">16</div>199      <div class="day">17</div>200      <div class="day">18</div>201      <div class="day">19</div>202      <div class="day">20</div>203      <div class="day">21</div>204 205      <div class="day">22</div>206      <div class="day">23</div>207      <div class="day">24</div>208      <div class="day">25</div>209      <div class="day">26</div>210      <div class="day">27</div>211      <div class="day">28</div>212 213      <div class="day">29</div>214      <div class="day">30</div>215      <div class="day">31</div>216      <!-- trailing empty spots for alignment -->217      <div class="day empty">.</div>218      <div class="day empty">.</div>219      <div class="day empty">.</div>220      <div class="day empty">.</div>221    </div>222  </div>223 224  <!-- February 2024 heading preview -->225  <div class="month" style="margin-top: 60px;">226    <div class="name">February 2024</div>227  </div>228 229  <div class="bottom-bar">230    <div class="home-indicator"></div>231  </div>232</div>233</body>234</html>