GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Date Picker UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#000000; border-radius:40px;11 box-shadow: 0 30px 80px rgba(0,0,0,0.6) inset;12 color:#ffffff;13 }14 15 /* Top status bar (simple) */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:120px; display:flex; align-items:center; justify-content:space-between;19 padding:0 40px; color:#EDEDED; font-size:38px; letter-spacing:0.5px;20 }21 .status-icons { display:flex; align-items:center; gap:24px; }22 .battery {23 width:44px; height:22px; border:3px solid #EDEDED; border-radius:6px; position:relative;24 }25 .battery::after {26 content:""; position:absolute; right:-10px; top:6px; width:6px; height:10px; background:#EDEDED; border-radius:2px;27 }28 .battery-fill { position:absolute; left:3px; top:3px; height:16px; width:30px; background:#EDEDED; border-radius:4px; }29 30 /* Modal sheet */31 .sheet {32 position:absolute; left:40px; right:40px; top:160px; bottom:180px;33 background:#191919; border-radius:48px;34 box-shadow: 0 20px 60px rgba(0,0,0,0.55);35 }36 37 /* Header inside sheet */38 .sheet-header {39 position:relative;40 padding:52px 72px 20px 120px;41 text-align:center;42 }43 .title {44 font-size:64px; font-weight:700; color:#FFFFFF;45 }46 .back-btn {47 position:absolute; left:40px; top:52px; width:80px; height:80px; display:flex; align-items:center; justify-content:center;48 border-radius:20px;49 }50 .back-btn svg { width:42px; height:42px; fill:#FFFFFF; }51 52 /* Month blocks */53 .months { padding:10px 40px 0 40px; }54 .month {55 background:#222222; border-radius:24px; margin:20px 0; padding:28px 28px 40px 28px;56 }57 .month-title {58 text-align:center; font-size:44px; color:#D0D0D0; margin:10px 0 30px 0;59 }60 .weekday-row {61 display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-bottom:16px;62 color:#A8A8A8; font-size:30px; text-align:center;63 }64 .days {65 display:grid; grid-template-columns:repeat(7, 1fr); gap:8px;66 }67 .day { height:120px; display:flex; align-items:center; justify-content:center; }68 .day.empty { opacity:0.08; }69 .day span {70 width:100px; height:100px; border-radius:50%;71 display:flex; align-items:center; justify-content:center;72 color:#EDEDED; font-size:38px;73 }74 .day.outline span { border:4px solid #ff5fa8; color:#FFFFFF; }75 .day.filled span { background:#ff5fa8; color:#FFFFFF; }76 .day.dim span { color:#BDBDBD; }77 78 /* Bottom info and actions */79 .footer {80 position:absolute; left:40px; right:40px; bottom:40px;81 padding:30px; background:#1E1E1E; border-radius:28px;82 display:flex; flex-direction:column; gap:24px;83 }84 .info-row {85 display:flex; justify-content:space-between; align-items:flex-start; gap:40px;86 color:#C9C9C9;87 }88 .info-block { flex:1; }89 .label { font-size:34px; color:#AFAFAF; }90 .value { font-size:40px; margin-top:10px; color:#FFFFFF; }91 .actions {92 display:flex; justify-content:space-between; align-items:center;93 }94 .link-btn {95 font-size:40px; color:#D9D9D9; padding:18px 20px; border-radius:18px;96 background:rgba(255,255,255,0.02);97 }98 .primary-btn {99 background:#ff5fa8; color:#FFFFFF; font-size:44px; font-weight:700;100 padding:22px 40px; border-radius:26px; box-shadow:0 6px 18px rgba(255,95,168,0.45);101 }102</style>103</head>104<body>105<div id="render-target">106 107 <!-- Simple status bar -->108 <div class="status-bar">109 <div>3:40</div>110 <div class="status-icons">111 <div style="width:24px; height:24px; border-radius:50%; border:3px solid #EDEDED;"></div>112 <div style="width:24px; height:24px; border-radius:50%; border:3px solid #EDEDED;"></div>113 <div class="battery"><div class="battery-fill"></div></div>114 <div style="font-size:32px;">97%</div>115 </div>116 </div>117 118 <!-- Dark modal sheet with calendar -->119 <div class="sheet">120 <div class="sheet-header">121 <div class="back-btn" aria-label="Back">122 <svg viewBox="0 0 24 24"><path d="M15.5 18.5L9 12l6.5-6.5-2-2L5 12l8.5 8.5z"/></svg>123 </div>124 <div class="title">Enter your dates</div>125 </div>126 127 <div class="months">128 129 <!-- October -->130 <div class="month">131 <div class="weekday-row">132 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>133 </div>134 <div class="month-title">October 2023</div>135 <div class="days">136 <!-- Row 1 -->137 <div class="day"><span>1</span></div>138 <div class="day"><span>2</span></div>139 <div class="day"><span>3</span></div>140 <div class="day"><span>4</span></div>141 <div class="day"><span>5</span></div>142 <div class="day"><span>6</span></div>143 <div class="day"><span>7</span></div>144 <!-- Row 2 -->145 <div class="day"><span>8</span></div>146 <div class="day"><span>9</span></div>147 <div class="day"><span>10</span></div>148 <div class="day"><span>11</span></div>149 <div class="day"><span>12</span></div>150 <div class="day"><span>13</span></div>151 <div class="day"><span>14</span></div>152 <!-- Row 3 -->153 <div class="day"><span>15</span></div>154 <div class="day"><span>16</span></div>155 <div class="day"><span>17</span></div>156 <div class="day"><span>18</span></div>157 <div class="day"><span>19</span></div>158 <div class="day"><span>20</span></div>159 <div class="day"><span>21</span></div>160 <!-- Row 4 -->161 <div class="day"><span>22</span></div>162 <div class="day"><span>23</span></div>163 <div class="day"><span>24</span></div>164 <div class="day"><span>25</span></div>165 <div class="day"><span>26</span></div>166 <div class="day outline"><span>27</span></div>167 <div class="day"><span>28</span></div>168 <!-- Row 5 -->169 <div class="day"><span>29</span></div>170 <div class="day"><span>30</span></div>171 <div class="day"><span>31</span></div>172 <div class="day empty"><span></span></div>173 <div class="day empty"><span></span></div>174 <div class="day empty"><span></span></div>175 <div class="day empty"><span></span></div>176 </div>177 </div>178 179 <!-- November -->180 <div class="month">181 <div class="weekday-row">182 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>183 </div>184 <div class="month-title">November 2023</div>185 <div class="days">186 <!-- Row 1: Nov 2023 starts on Wednesday -->187 <div class="day empty"><span></span></div>188 <div class="day empty"><span></span></div>189 <div class="day empty"><span></span></div>190 <div class="day filled"><span>1</span></div>191 <div class="day"><span>2</span></div>192 <div class="day"><span>3</span></div>193 <div class="day"><span>4</span></div>194 <!-- Row 2 -->195 <div class="day"><span>5</span></div>196 <div class="day"><span>6</span></div>197 <div class="day"><span>7</span></div>198 <div class="day"><span>8</span></div>199 <div class="day"><span>9</span></div>200 <div class="day"><span>10</span></div>201 <div class="day"><span>11</span></div>202 <!-- Row 3 -->203 <div class="day"><span>12</span></div>204 <div class="day"><span>13</span></div>205 <div class="day"><span>14</span></div>206 <div class="day"><span>15</span></div>207 <div class="day"><span>16</span></div>208 <div class="day"><span>17</span></div>209 <div class="day"><span>18</span></div>210 <!-- Row 4 -->211 <div class="day"><span>19</span></div>212 <div class="day"><span>20</span></div>213 <div class="day"><span>21</span></div>214 <div class="day"><span>22</span></div>215 <div class="day"><span>23</span></div>216 <div class="day"><span>24</span></div>217 <div class="day"><span>25</span></div>218 <!-- Row 5 -->219 <div class="day"><span>26</span></div>220 <div class="day"><span>27</span></div>221 <div class="day"><span>28</span></div>222 <div class="day"><span>29</span></div>223 <div class="day"><span>30</span></div>224 <div class="day empty"><span></span></div>225 <div class="day empty"><span></span></div>226 </div>227 </div>228 229 </div>230 231 <!-- Footer summary and actions -->232 <div class="footer">233 <div class="info-row">234 <div class="info-block">235 <div class="label">Check-in</div>236 <div class="value">01 Nov</div>237 </div>238 <div class="info-block">239 <div class="label">Check-out</div>240 <div class="value" style="opacity:0.4;">—</div>241 </div>242 <div class="info-block">243 <div class="label">Nights</div>244 <div class="value" style="opacity:0.4;">—</div>245 </div>246 </div>247 <div class="actions">248 <div class="link-btn">Cancel dates</div>249 <div class="primary-btn">Apply</div>250 </div>251 </div>252 253 </div>254 255</div>256</body>257</html>