GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3  <head>4    <meta charset="UTF-8" />5    <title>Select Check-out Date</title>6    <style>7      body { margin:0; padding:0; background:transparent; }8      #render-target {9        width:1080px; height:2400px; position:relative; overflow:hidden;10        background:#ffffff; border-radius:28px; box-shadow: 0 8px 24px rgba(0,0,0,0.06);11        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;12        color:#0f172a;13      }14      .statusbar {15        height:96px; padding:0 48px; display:flex; align-items:flex-end; justify-content:space-between;16        font-size:36px; color:#1f2937;17      }18      .status-right { display:flex; align-items:center; gap:24px; }19      .appbar {20        height:120px; position:relative; display:flex; align-items:center;21        border-bottom:1px solid #eceff3;22      }23      .back-btn {24        width:96px; height:120px; display:flex; align-items:center; justify-content:center;25      }26      .app-title {27        position:absolute; left:0; right:0; text-align:center; font-weight:700; font-size:54px; color:#1f2937;28      }29 30      /* Weekday header */31      .weekday-bar {32        display:grid; grid-template-columns:repeat(7, 1fr);33        padding:24px 48px; font-size:34px; color:#6b7280;34        border-bottom:1px solid #edf2f7;35      }36      .month-title {37        text-align:center; font-size:48px; font-weight:600; margin:48px 0 16px; color:#111827;38      }39      .calendar-grid {40        display:grid; grid-template-columns:repeat(7, 1fr);41        padding:8px 48px 32px; grid-gap:8px;42      }43      .day {44        height:128px; display:flex; align-items:center; justify-content:center; color:#111827;45      }46      .num {47        width:96px; height:96px; display:flex; align-items:center; justify-content:center;48        border-radius:26px; font-size:40px; font-weight:600; color:#1f2937;49      }50      .muted { color:#cbd5e1; }51      .selected { background:#1a73e8; color:#fff; }52      .inrange { background:#eaf3ff; color:#1f2937; }53      .spacer { pointer-events:none; }54 55      /* Bottom inputs */56      .bottom-pane { position:absolute; left:0; right:0; bottom:236px; padding:24px 48px 0; background:#fff; }57      .date-inputs { display:flex; gap:24px; }58      .field {59        flex:1; border:2px solid #e5e7eb; border-radius:28px; padding:24px 28px;60        background:#fff;61      }62      .field .label { font-size:30px; color:#6b7280; margin-bottom:8px; }63      .field .value { font-size:42px; color:#111827; font-weight:600; }64      .field.active { border-color:#1a73e8; box-shadow:0 0 0 2px rgba(26,115,232,0.15) inset; }65 66      .actions { display:flex; justify-content:space-between; align-items:center; padding:40px 0 32px; }67      .btn {68        padding:34px 64px; border-radius:28px; font-size:42px; font-weight:700; cursor:pointer;69      }70      .btn.clear {71        background:#ffe9dc; color:#f97316; border:1px solid #ffd6bf;72      }73      .btn.primary {74        background:#ff7a00; color:#fff; box-shadow:0 4px 12px rgba(255,122,0,0.35);75      }76 77      /* Floating avatar placeholder */78      .avatar {79        position:absolute; right:64px; top:1470px; width:160px; height:160px; border-radius:50%;80        background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;81        color:#757575; font-size:28px; text-align:center; padding:12px;82      }83 84      /* Bottom gesture bar */85      .gesture {86        position:absolute; left:50%; transform:translateX(-50%);87        bottom:80px; width:280px; height:12px; border-radius:8px; background:#000000;88        opacity:0.8;89      }90      /* Utility */91      .mt-8 { margin-top:8px; }92      .mb-32 { margin-bottom:32px; }93    </style>94  </head>95  <body>96    <div id="render-target">97      <!-- Status bar -->98      <div class="statusbar">99        <div class="status-left">10:51</div>100        <div class="status-right">101          <!-- Simple Wi-Fi icon -->102          <svg width="44" height="44" viewBox="0 0 24 24">103            <path d="M2 8a14 14 0 0 1 20 0" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>104            <path d="M5 11a10 10 0 0 1 14 0" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>105            <path d="M8 14a6 6 0 0 1 8 0" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>106            <circle cx="12" cy="18" r="1.6" fill="#374151"/>107          </svg>108          <!-- Battery icon -->109          <svg width="44" height="44" viewBox="0 0 24 24">110            <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#374151" stroke-width="2" fill="none"/>111            <rect x="4" y="8" width="12" height="8" fill="#374151"/>112            <rect x="20" y="10" width="2" height="8" rx="1" fill="#374151"/>113          </svg>114        </div>115      </div>116 117      <!-- App bar -->118      <div class="appbar">119        <div class="back-btn">120          <svg width="48" height="48" viewBox="0 0 24 24">121            <path d="M15 18l-6-6 6-6" stroke="#1f2937" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122          </svg>123        </div>124        <div class="app-title">Select Check-out Date</div>125      </div>126 127      <!-- Weekday header -->128      <div class="weekday-bar">129        <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>130      </div>131 132      <!-- December -->133      <div class="month-title">December 2023</div>134      <div class="calendar-grid">135        <!-- Row 1: blanks until Fri -->136        <div class="day spacer"></div>137        <div class="day spacer"></div>138        <div class="day spacer"></div>139        <div class="day spacer"></div>140        <div class="day spacer"></div>141        <div class="day"><div class="num muted">1</div></div>142        <div class="day"><div class="num muted">2</div></div>143 144        <!-- Row 2 -->145        <div class="day"><div class="num muted">3</div></div>146        <div class="day"><div class="num muted">4</div></div>147        <div class="day"><div class="num muted">5</div></div>148        <div class="day"><div class="num muted">6</div></div>149        <div class="day"><div class="num muted">7</div></div>150        <div class="day"><div class="num muted">8</div></div>151        <div class="day"><div class="num muted">9</div></div>152 153        <!-- Row 3 -->154        <div class="day"><div class="num muted">10</div></div>155        <div class="day"><div class="num muted">11</div></div>156        <div class="day"><div class="num muted">12</div></div>157        <div class="day"><div class="num muted">13</div></div>158        <div class="day"><div class="num muted">14</div></div>159        <div class="day"><div class="num muted">15</div></div>160        <div class="day"><div class="num muted">16</div></div>161 162        <!-- Row 4 -->163        <div class="day"><div class="num">17</div></div>164        <div class="day"><div class="num">18</div></div>165        <div class="day"><div class="num">19</div></div>166        <div class="day"><div class="num">20</div></div>167        <div class="day"><div class="num">21</div></div>168        <div class="day"><div class="num">22</div></div>169        <div class="day">170          <div class="num selected">23</div>171        </div>172 173        <!-- Row 5 (range continues to 25) -->174        <div class="day"><div class="num inrange">24</div></div>175        <div class="day"><div class="num selected">25</div></div>176        <div class="day"><div class="num">26</div></div>177        <div class="day"><div class="num">27</div></div>178        <div class="day"><div class="num">28</div></div>179        <div class="day"><div class="num">29</div></div>180        <div class="day"><div class="num">30</div></div>181 182        <!-- Row 6 -->183        <div class="day"><div class="num">31</div></div>184        <div class="day spacer"></div>185        <div class="day spacer"></div>186        <div class="day spacer"></div>187        <div class="day spacer"></div>188        <div class="day spacer"></div>189        <div class="day spacer"></div>190      </div>191 192      <!-- January -->193      <div class="month-title">January 2024</div>194      <div class="calendar-grid">195        <!-- Row 1: Jan 1 starts on Monday -->196        <div class="day"><div class="num muted"></div></div>197        <div class="day"><div class="num">1</div></div>198        <div class="day"><div class="num">2</div></div>199        <div class="day"><div class="num">3</div></div>200        <div class="day"><div class="num">4</div></div>201        <div class="day"><div class="num">5</div></div>202        <div class="day"><div class="num">6</div></div>203 204        <!-- Row 2 -->205        <div class="day"><div class="num">7</div></div>206        <div class="day"><div class="num">8</div></div>207        <div class="day"><div class="num">9</div></div>208        <div class="day"><div class="num">10</div></div>209        <div class="day"><div class="num">11</div></div>210        <div class="day"><div class="num">12</div></div>211        <div class="day"><div class="num muted"></div></div>212      </div>213 214      <!-- Decorative avatar -->215      <div class="avatar">[IMG: Festive avatar]</div>216 217      <!-- Bottom selection inputs and actions -->218      <div class="bottom-pane">219        <div class="date-inputs">220          <div class="field">221            <div class="label">Check-in date</div>222            <div class="value">Sat, 23 Dec</div>223          </div>224          <div class="field active">225            <div class="label">Check-out date</div>226            <div class="value">Mon, 25 Dec</div>227          </div>228        </div>229        <div class="actions">230          <div class="btn clear">Clear</div>231          <div class="btn primary">Select</div>232        </div>233      </div>234 235      <!-- Gesture bar -->236      <div class="gesture"></div>237    </div>238  </body>239</html>