GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Date Picker UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#000000;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; left:0; top:0; width:100%; height:110px;16 padding:0 36px;17 display:flex; align-items:center; justify-content:space-between;18 color:#ffffff;19 font-weight:600;20 }21 .status-left { display:flex; align-items:center; gap:18px; }22 .status-time { font-size:48px; letter-spacing:0.5px; }23 .status-icons { display:flex; align-items:center; gap:24px; }24 .icon-dot { width:22px; height:22px; background:#bdbdbd; border-radius:50%; opacity:0.7; }25 .icon-wifi, .icon-battery, .icon-signal {26 width:48px; height:48px; display:flex; align-items:center; justify-content:center;27 }28 .icon-battery svg { width:48px; height:48px; }29 .icon-wifi svg, .icon-signal svg { width:40px; height:40px; }30 .battery-text { margin-left:10px; font-size:36px; opacity:0.9; }31 32 /* Modal sheet */33 .sheet {34 position:absolute; left:40px; right:40px; top:180px; bottom:140px;35 background:#1f1f1f; border-radius:42px; box-shadow:0 20px 60px rgba(0,0,0,0.6);36 color:#fff;37 }38 .sheet-inner { position:absolute; left:36px; right:36px; top:36px; bottom:36px; }39 .header-row {40 display:flex; align-items:center; gap:20px;41 margin-top:10px;42 }43 .back-btn {44 width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center;45 }46 .back-btn svg { width:40px; height:40px; fill:none; stroke:#ffffff; stroke-width:10px; }47 .title {48 flex:1; text-align:center; font-size:64px; font-weight:700; letter-spacing:0.5px;49 }50 51 /* Week header */52 .week-header {53 margin-top:40px; margin-bottom:14px;54 display:grid; grid-template-columns:repeat(7, 1fr);55 color:#bdbdbd; font-size:30px; text-align:center;56 }57 58 /* Month block */59 .month {60 margin-top:12px;61 }62 .month-title {63 text-align:center; font-size:40px; font-weight:700; color:#e0e0e0;64 padding:28px 0 18px 0; border-top:1px solid rgba(255,255,255,0.06);65 }66 .calendar-grid {67 display:grid; grid-template-columns:repeat(7, 1fr); gap:12px;68 padding:0 6px 24px 6px;69 }70 .day, .empty {71 height:120px; display:flex; align-items:center; justify-content:center;72 }73 .empty { opacity:0.15; }74 .bubble {75 width:96px; height:96px; border-radius:48px;76 display:flex; align-items:center; justify-content:center;77 font-size:36px; font-weight:700; color:#e6e6e6;78 }79 .today-outline { border:6px solid #ff5a9a; color:#fff; }80 .selected { background:#ff5a9a; color:#ffffff; }81 .plain { color:#cfcfcf; }82 .light { color:#ffffff; } /* used for 30/31 contrasting in screenshot */83 84 /* Bottom summary */85 .summary {86 position:absolute; left:36px; right:36px; bottom:150px;87 display:flex; align-items:center; justify-content:space-between;88 color:#ffffff;89 }90 .summary .col { display:flex; flex-direction:column; gap:8px; }91 .label { font-size:34px; color:#bdbdbd; }92 .value { font-size:44px; font-weight:700; }93 94 .actions {95 position:absolute; left:36px; right:36px; bottom:60px;96 display:flex; align-items:center; justify-content:space-between;97 }98 .link { font-size:38px; color:#d3d3d3; }99 .apply-btn {100 background:#ff5a9a; color:#fff; font-weight:800; font-size:40px;101 padding:22px 42px; border-radius:22px;102 box-shadow:0 6px 0 rgba(0,0,0,0.25);103 }104 105 /* Home bar */106 .home-indicator {107 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);108 width:300px; height:10px; border-radius:8px; background:#ffffff; opacity:0.8;109 }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status Bar -->116 <div class="status-bar">117 <div class="status-left">118 <div class="status-time">3:39</div>119 <div class="icon-dot"></div>120 <div class="icon-dot"></div>121 </div>122 <div class="status-icons">123 <div class="icon-signal">124 <svg viewBox="0 0 24 24">125 <path fill="#ffffff" d="M2 20h3v-4H2v4zm5 0h3v-7H7v7zm5 0h3v-10h-3v10zm5 0h3V4h-3v16z"/>126 </svg>127 </div>128 <div class="icon-wifi">129 <svg viewBox="0 0 24 24">130 <path fill="#ffffff" d="M12 18.5l-1.6-1.6a2.3 2.3 0 0 1 3.2 0L12 18.5zm6.3-4.3a8.5 8.5 0 0 0-12.6 0l-1.6-1.6a10.7 10.7 0 0 1 15.8 0l-1.6 1.6zm3.2-3.2A14 14 0 0 0 2.5 11l-1.6-1.6A16.2 16.2 0 0 1 21.1 9l1.4 2z"/>131 </svg>132 </div>133 <div class="icon-battery">134 <svg viewBox="0 0 50 24">135 <rect x="1" y="3" width="40" height="18" rx="4" ry="4" fill="none" stroke="#ffffff" stroke-width="3"/>136 <rect x="4" y="6" width="30" height="12" rx="3" fill="#ffffff"/>137 <rect x="43" y="8" width="6" height="8" rx="2" fill="#ffffff"/>138 </svg>139 </div>140 <div class="battery-text">97%</div>141 </div>142 </div>143 144 <!-- Modal Sheet -->145 <div class="sheet">146 <div class="sheet-inner">147 148 <div class="header-row">149 <div class="back-btn">150 <svg viewBox="0 0 24 24">151 <path d="M15 5l-7 7 7 7" />152 </svg>153 </div>154 <div class="title">Enter your dates</div>155 <div style="width:80px;"></div>156 </div>157 158 <div class="week-header">159 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>160 </div>161 162 <!-- October 2023 -->163 <div class="month">164 <div class="month-title">October 2023</div>165 <div class="calendar-grid">166 <!-- Row 1 -->167 <div class="day"><div class="bubble plain">1</div></div>168 <div class="day"><div class="bubble plain">2</div></div>169 <div class="day"><div class="bubble plain">3</div></div>170 <div class="day"><div class="bubble plain">4</div></div>171 <div class="day"><div class="bubble plain">5</div></div>172 <div class="day"><div class="bubble plain">6</div></div>173 <div class="day"><div class="bubble plain">7</div></div>174 <!-- Row 2 -->175 <div class="day"><div class="bubble plain">8</div></div>176 <div class="day"><div class="bubble plain">9</div></div>177 <div class="day"><div class="bubble plain">10</div></div>178 <div class="day"><div class="bubble plain">11</div></div>179 <div class="day"><div class="bubble plain">12</div></div>180 <div class="day"><div class="bubble plain">13</div></div>181 <div class="day"><div class="bubble plain">14</div></div>182 <!-- Row 3 -->183 <div class="day"><div class="bubble plain">15</div></div>184 <div class="day"><div class="bubble plain">16</div></div>185 <div class="day"><div class="bubble plain">17</div></div>186 <div class="day"><div class="bubble plain">18</div></div>187 <div class="day"><div class="bubble plain">19</div></div>188 <div class="day"><div class="bubble plain">20</div></div>189 <div class="day"><div class="bubble plain">21</div></div>190 <!-- Row 4 -->191 <div class="day"><div class="bubble plain">22</div></div>192 <div class="day"><div class="bubble plain">23</div></div>193 <div class="day"><div class="bubble plain">24</div></div>194 <div class="day"><div class="bubble plain">25</div></div>195 <div class="day"><div class="bubble plain">26</div></div>196 <div class="day"><div class="bubble today-outline">27</div></div>197 <div class="day"><div class="bubble selected">28</div></div>198 <!-- Row 5 -->199 <div class="day"><div class="bubble selected">29</div></div>200 <div class="day"><div class="bubble light">30</div></div>201 <div class="day"><div class="bubble light">31</div></div>202 <div class="empty"></div>203 <div class="empty"></div>204 <div class="empty"></div>205 <div class="empty"></div>206 </div>207 </div>208 209 <!-- November 2023 -->210 <div class="month">211 <div class="month-title">November 2023</div>212 <div class="calendar-grid">213 <!-- first week starts on Wednesday, so two blanks -->214 <div class="empty"></div>215 <div class="empty"></div>216 <div class="day"><div class="bubble plain">1</div></div>217 <div class="day"><div class="bubble plain">2</div></div>218 <div class="day"><div class="bubble plain">3</div></div>219 <div class="day"><div class="bubble plain">4</div></div>220 <div class="day"><div class="bubble plain">5</div></div>221 <!-- next rows -->222 <div class="day"><div class="bubble plain">6</div></div>223 <div class="day"><div class="bubble plain">7</div></div>224 <div class="day"><div class="bubble plain">8</div></div>225 <div class="day"><div class="bubble plain">9</div></div>226 <div class="day"><div class="bubble plain">10</div></div>227 <div class="day"><div class="bubble plain">11</div></div>228 <div class="day"><div class="bubble plain">12</div></div>229 230 <div class="day"><div class="bubble plain">13</div></div>231 <div class="day"><div class="bubble plain">14</div></div>232 <div class="day"><div class="bubble plain">15</div></div>233 <div class="day"><div class="bubble plain">16</div></div>234 <div class="day"><div class="bubble plain">17</div></div>235 <div class="day"><div class="bubble plain">18</div></div>236 <div class="day"><div class="bubble plain">19</div></div>237 238 <div class="day"><div class="bubble plain">20</div></div>239 <div class="day"><div class="bubble plain">21</div></div>240 <div class="day"><div class="bubble plain">22</div></div>241 <div class="day"><div class="bubble plain">23</div></div>242 <div class="day"><div class="bubble plain">24</div></div>243 <div class="day"><div class="bubble plain">25</div></div>244 <div class="day"><div class="bubble plain">26</div></div>245 246 <div class="day"><div class="bubble plain">27</div></div>247 <div class="day"><div class="bubble plain">28</div></div>248 <div class="day"><div class="bubble plain">29</div></div>249 <div class="day"><div class="bubble plain">30</div></div>250 <div class="empty"></div>251 <div class="empty"></div>252 <div class="empty"></div>253 </div>254 </div>255 256 <!-- Summary -->257 <div class="summary">258 <div class="col">259 <div class="label">Check-in</div>260 <div class="value">28 Oct</div>261 </div>262 <div class="col">263 <div class="label">Check-out</div>264 <div class="value">29 Oct</div>265 </div>266 <div class="col">267 <div class="label">Nights</div>268 <div class="value">1</div>269 </div>270 </div>271 272 <!-- Actions -->273 <div class="actions">274 <div class="link">Cancel dates</div>275 <div class="apply-btn">Apply</div>276 </div>277 278 </div>279 </div>280 281 <!-- Home Indicator -->282 <div class="home-indicator"></div>283 284</div>285</body>286</html>