GD-ML/AndroidCode
13.4k
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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF; border-radius: 32px;13 box-shadow: 0 4px 24px rgba(0,0,0,0.08);14 }15 16 /* Top bar (status area) */17 .status-bar {18 height: 90px; padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #111; font-weight: 600; font-size: 34px;21 }22 .status-icons { display: flex; align-items: center; gap: 22px; color: #666; font-size: 28px; }23 .icon-dot { width: 10px; height: 10px; background: #666; border-radius: 50%; display: inline-block; }24 .battery {25 width: 44px; height: 22px; border: 2px solid #666; border-radius: 6px; position: relative; display: inline-block;26 }27 .battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #666; border-radius: 2px; }28 .battery .fill { position: absolute; left: 2px; top: 2px; height: 16px; width: 28px; background: #666; border-radius: 4px; }29 30 /* Header */31 .header {32 padding: 16px 40px 24px 40px;33 }34 .title-row {35 display: flex; align-items: center; gap: 22px; margin-top: 8px;36 }37 .title-text {38 font-size: 56px; font-weight: 700; color: #111;39 letter-spacing: 0.2px;40 }41 .close-btn {42 width: 56px; height: 56px;43 }44 .close-btn svg { width: 56px; height: 56px; }45 .close-btn line { stroke: #111; stroke-width: 6; stroke-linecap: round; }46 47 .dates-row {48 display: flex; align-items: flex-start; justify-content: space-between;49 margin-top: 24px;50 }51 .date-block { width: 40%; }52 .label { color: #9AA0A6; font-size: 30px; margin-bottom: 8px; }53 .date-value { color: #111; font-weight: 800; font-size: 46px; }54 .nights-pill {55 align-self: center;56 background: #EAF1FF; color: #2F6BFF;57 font-weight: 700; font-size: 32px;58 padding: 16px 28px; border-radius: 999px;59 border: 1px solid #D8E4FF;60 }61 62 .weekdays {63 margin-top: 28px; padding: 0 40px;64 display: grid; grid-template-columns: repeat(7, 1fr);65 color: #70757A; font-size: 28px; letter-spacing: 1px;66 }67 .weekdays div { text-align: center; padding: 12px 0; font-weight: 600; }68 .weekdays .accent { color: #FF6F3D; }69 .divider { height: 2px; background: #E0E0E0; margin: 4px 0 28px 0; }70 71 /* Month section */72 .month-title {73 text-align: center; font-size: 40px; font-weight: 700; color: #111;74 margin: 28px 0 18px 0;75 }76 .month-grid {77 padding: 0 40px;78 display: grid; grid-template-columns: repeat(7, 1fr);79 grid-auto-rows: 150px; column-gap: 0; row-gap: 12px;80 }81 .cell {82 position: relative;83 display: flex; align-items: center; justify-content: center;84 font-size: 42px; font-weight: 700; color: #111;85 }86 .muted { color: #D0D0D0; font-weight: 600; }87 .cell .num { position: relative; z-index: 2; }88 /* Selected range visuals */89 .in-range::before {90 content: ""; position: absolute; left: 16px; right: 16px;91 top: 50%; transform: translateY(-50%);92 height: 72px; background: #E9F1FF; border-radius: 36px; z-index: 1;93 }94 .selected::before {95 content: ""; position: absolute; left: 16px; right: 16px;96 top: 50%; transform: translateY(-50%);97 height: 72px; background: #E9F1FF; border-radius: 36px; z-index: 0;98 }99 .selected::after {100 content: ""; position: absolute; width: 118px; height: 118px;101 background: #2F6BFF; border-radius: 50%;102 top: 50%; left: 50%; transform: translate(-50%, -50%);103 z-index: 1;104 }105 .selected .num { color: #fff; }106 107 /* Footer button */108 .footer {109 position: absolute; left: 0; right: 0; bottom: 140px; padding: 0 32px;110 }111 .primary-btn {112 width: 100%; height: 120px; border-radius: 24px;113 background: #FF6F3D; color: #fff;114 font-size: 40px; font-weight: 800; letter-spacing: 0.5px;115 display: flex; align-items: center; justify-content: center;116 box-shadow: 0 12px 24px rgba(255, 111, 61, 0.35);117 }118 119 /* Gesture bar */120 .gesture-bar {121 position: absolute; left: 50%; transform: translateX(-50%);122 bottom: 42px; width: 280px; height: 10px; background: #000;123 border-radius: 8px;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Simulated status bar -->131 <div class="status-bar">132 <div>12:48</div>133 <div class="status-icons">134 <span class="icon-dot"></span>135 <span class="icon-dot"></span>136 <span class="icon-dot"></span>137 <span class="battery"><span class="fill"></span></span>138 <span>100%</span>139 </div>140 </div>141 142 <div class="header">143 <div class="title-row">144 <div class="close-btn">145 <svg viewBox="0 0 56 56">146 <line x1="12" y1="12" x2="44" y2="44"></line>147 <line x1="44" y1="12" x2="12" y2="44"></line>148 </svg>149 </div>150 <div class="title-text">Select Dates</div>151 </div>152 153 <div class="dates-row">154 <div class="date-block">155 <div class="label">Check-in</div>156 <div class="date-value">20 Dec 2023</div>157 </div>158 <div class="nights-pill">4 Nights</div>159 <div class="date-block" style="text-align: right;">160 <div class="label">Check-out</div>161 <div class="date-value">24 Dec 2023</div>162 </div>163 </div>164 165 <div class="weekdays">166 <div>MON</div>167 <div>TUE</div>168 <div>WED</div>169 <div>THU</div>170 <div>FRI</div>171 <div class="accent">SAT</div>172 <div class="accent">SUN</div>173 </div>174 <div class="divider"></div>175 </div>176 177 <!-- December -->178 <div class="month-title">December 2023</div>179 <div class="month-grid">180 <!-- Row 1 -->181 <div class="cell"></div>182 <div class="cell"></div>183 <div class="cell"></div>184 <div class="cell"></div>185 <div class="cell muted"><span class="num">1</span></div>186 <div class="cell muted"><span class="num">2</span></div>187 <div class="cell muted"><span class="num">3</span></div>188 189 <!-- Row 2 -->190 <div class="cell muted"><span class="num">4</span></div>191 <div class="cell muted"><span class="num">5</span></div>192 <div class="cell muted"><span class="num">6</span></div>193 <div class="cell muted"><span class="num">7</span></div>194 <div class="cell muted"><span class="num">8</span></div>195 <div class="cell muted"><span class="num">9</span></div>196 <div class="cell muted"><span class="num">10</span></div>197 198 <!-- Row 3 -->199 <div class="cell muted"><span class="num">11</span></div>200 <div class="cell muted"><span class="num">12</span></div>201 <div class="cell muted"><span class="num">13</span></div>202 <div class="cell muted"><span class="num">14</span></div>203 <div class="cell muted"><span class="num">15</span></div>204 <div class="cell muted"><span class="num">16</span></div>205 <div class="cell muted"><span class="num">17</span></div>206 207 <!-- Row 4 (selected range) -->208 <div class="cell"><span class="num">18</span></div>209 <div class="cell"><span class="num">19</span></div>210 <div class="cell selected"><span class="num">20</span></div>211 <div class="cell in-range"><span class="num">21</span></div>212 <div class="cell in-range"><span class="num">22</span></div>213 <div class="cell in-range"><span class="num">23</span></div>214 <div class="cell selected"><span class="num">24</span></div>215 216 <!-- Row 5 -->217 <div class="cell"><span class="num">25</span></div>218 <div class="cell"><span class="num">26</span></div>219 <div class="cell"><span class="num">27</span></div>220 <div class="cell"><span class="num">28</span></div>221 <div class="cell"><span class="num">29</span></div>222 <div class="cell"><span class="num">30</span></div>223 <div class="cell"><span class="num">31</span></div>224 </div>225 226 <!-- January -->227 <div class="month-title" style="margin-top: 46px;">January 2024</div>228 <div class="month-grid">229 <!-- Row 1 (starts Monday for simplicity) -->230 <div class="cell"><span class="num">1</span></div>231 <div class="cell"><span class="num">2</span></div>232 <div class="cell"><span class="num">3</span></div>233 <div class="cell"><span class="num">4</span></div>234 <div class="cell"><span class="num">5</span></div>235 <div class="cell"><span class="num">6</span></div>236 <div class="cell"><span class="num">7</span></div>237 238 <!-- Row 2 -->239 <div class="cell"><span class="num">8</span></div>240 <div class="cell"><span class="num">9</span></div>241 <div class="cell"><span class="num">10</span></div>242 <div class="cell"><span class="num">11</span></div>243 <div class="cell"><span class="num">12</span></div>244 <div class="cell"><span class="num">13</span></div>245 <div class="cell"><span class="num">14</span></div>246 247 <!-- Row 3 -->248 <div class="cell"><span class="num">15</span></div>249 <div class="cell"><span class="num">16</span></div>250 <div class="cell"><span class="num">17</span></div>251 <div class="cell"><span class="num">18</span></div>252 <div class="cell"><span class="num">19</span></div>253 <div class="cell"><span class="num">20</span></div>254 <div class="cell"><span class="num">21</span></div>255 256 <!-- Row 4 -->257 <div class="cell"><span class="num">22</span></div>258 <div class="cell"><span class="num">23</span></div>259 <div class="cell"><span class="num">24</span></div>260 <div class="cell"><span class="num">25</span></div>261 <div class="cell"><span class="num">26</span></div>262 <div class="cell"><span class="num">27</span></div>263 <div class="cell"><span class="num">28</span></div>264 265 <!-- Row 5 -->266 <div class="cell"><span class="num">29</span></div>267 <div class="cell"><span class="num">30</span></div>268 <div class="cell"><span class="num">31</span></div>269 <div class="cell"></div>270 <div class="cell"></div>271 <div class="cell"></div>272 <div class="cell"></div>273 </div>274 275 <!-- Footer CTA -->276 <div class="footer">277 <div class="primary-btn">Continue For 4 Nights</div>278 </div>279 280 <div class="gesture-bar"></div>281</div>282</body>283</html>