GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Date Picker UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Inter, Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff;12 color:#1a2440;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:110px; padding:0 36px;19 display:flex; align-items:center; justify-content:space-between;20 font-size:40px; color:#111;21 }22 .status-right { display:flex; align-items:center; gap:22px; }23 .dot { width:18px; height:18px; background:#222; border-radius:50%; opacity:.9; }24 .icon-battery {25 width:60px; height:30px; border:4px solid #222; border-radius:6px; position:relative;26 }27 .icon-battery::after {28 content:""; position:absolute; right:-10px; top:8px; width:6px; height:14px; background:#222; border-radius:2px;29 }30 .icon-battery .fill { width:38px; height:22px; background:#222; margin:2px; }31 32 /* Header */33 .header {34 position:absolute; top:110px; left:0; right:0;35 padding:34px 44px 18px 44px;36 }37 .title-row {38 display:flex; align-items:center; gap:24px;39 }40 .close-btn {41 width:84px; height:84px; display:flex; align-items:center; justify-content:center;42 border-radius:18px; cursor:pointer;43 }44 .title {45 font-size:64px; font-weight:800; color:#0f2150; letter-spacing:0.2px;46 }47 48 /* Input chips */49 .chips {50 margin-top:28px; display:flex; gap:32px;51 }52 .chip {53 flex:1;54 height:120px; border-radius:26px; border:2px solid #C9D4EA;55 background:#EEF2FA;56 display:flex; align-items:center; justify-content:space-between;57 padding:0 36px; color:#5A6C8D; font-size:44px; font-weight:600;58 }59 .chip .right-x {60 width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;61 border:2px solid #C9D4EA; color:#7E8DAA; font-size:40px;62 }63 64 /* Weekdays */65 .weekdays {66 margin-top:26px; padding:0 44px; display:grid;67 grid-template-columns: repeat(7, 1fr);68 color:#98A5BE; font-weight:700; font-size:34px;69 text-align:center; letter-spacing:2px;70 }71 72 /* Month header bars */73 .month-bar {74 margin-top:26px; background:#F1F4F8; color:#6D7C99;75 padding:26px 44px; font-size:36px; font-weight:800; text-transform:uppercase;76 }77 78 /* Calendar grids */79 .calendar {80 padding:22px 44px 10px 44px;81 }82 .calendar-grid {83 display:grid; grid-template-columns:repeat(7, 1fr);84 row-gap:40px; column-gap:16px; text-align:center;85 }86 .day {87 height:124px; display:flex; align-items:center; justify-content:center;88 font-size:44px; color:#2F4472; font-weight:600;89 position:relative;90 }91 .muted { color:#C7CEDF; }92 .selected .bubble {93 position:absolute; width:152px; height:152px; background:#6E8EC6;94 border-radius:50%; z-index:0;95 }96 .selected span { color:#fff; position:relative; z-index:1; font-weight:800; }97 .spacer { height:40px; }98 99 /* Confirm button */100 .confirm-wrap {101 position:absolute; left:0; right:0; bottom:120px;102 padding:0 26px;103 }104 .confirm-btn {105 height:150px; background:#E7706C; color:#fff; font-size:54px; font-weight:800;106 border-radius:26px; display:flex; align-items:center; justify-content:center;107 box-shadow:0 6px 12px rgba(231,112,108,0.35);108 }109 110 /* Gesture bar */111 .gesture {112 position:absolute; bottom:34px; left:50%; transform:translateX(-50%);113 width:420px; height:12px; border-radius:10px; background:#C9CEDA;114 }115 116 /* Simple svg line icons */117 svg { display:block }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div class="time">9:58</div>126 <div class="status-right">127 <div class="dot"></div>128 <div class="dot"></div>129 <div class="dot"></div>130 <div class="dot"></div>131 <div class="dot"></div>132 <div class="icon-battery"><div class="fill"></div></div>133 </div>134 </div>135 136 <!-- Header and date inputs -->137 <div class="header">138 <div class="title-row">139 <div class="close-btn" aria-label="Close">140 <svg width="44" height="44" viewBox="0 0 24 24">141 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#23345F" stroke-width="2.4" stroke-linecap="round"/>142 </svg>143 </div>144 <div class="title">Choose date</div>145 </div>146 147 <div class="chips">148 <div class="chip">149 <div>Wed, Nov 15</div>150 <div style="width:1px; height:0;"></div>151 </div>152 <div class="chip">153 <div>Wed, Nov 15</div>154 <div class="right-x">×</div>155 </div>156 </div>157 </div>158 159 <!-- Weekday header -->160 <div class="weekdays" style="position:absolute; top:430px; left:0; right:0;">161 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>162 </div>163 164 <!-- November -->165 <div class="month-bar" style="position:absolute; top:520px; left:0; right:0;">November 2023</div>166 <div class="calendar" style="position:absolute; top:602px; left:0; right:0;">167 <div class="calendar-grid">168 <!-- Row 1: empty, empty, empty, 1,2,3,4 -->169 <div class="day"></div>170 <div class="day"></div>171 <div class="day"></div>172 <div class="day muted"><span>1</span></div>173 <div class="day muted"><span>2</span></div>174 <div class="day muted"><span>3</span></div>175 <div class="day muted"><span>4</span></div>176 177 <!-- Row 2: 5 - 11 -->178 <div class="day"><span>5</span></div>179 <div class="day"><span>6</span></div>180 <div class="day"><span>7</span></div>181 <div class="day"><span>8</span></div>182 <div class="day"><span>9</span></div>183 <div class="day"><span>10</span></div>184 <div class="day"><span>11</span></div>185 186 <!-- Row 3: 12 - 18 -->187 <div class="day"><span>12</span></div>188 <div class="day"><span>13</span></div>189 <div class="day"><span>14</span></div>190 <div class="day selected"><div class="bubble"></div><span>15</span></div>191 <div class="day"><span>16</span></div>192 <div class="day"><span>17</span></div>193 <div class="day"><span>18</span></div>194 195 <!-- Row 4: 19 - 25 -->196 <div class="day"><span>19</span></div>197 <div class="day"><span>20</span></div>198 <div class="day"><span>21</span></div>199 <div class="day"><span>22</span></div>200 <div class="day"><span>23</span></div>201 <div class="day"><span>24</span></div>202 <div class="day"><span>25</span></div>203 204 <!-- Row 5: 26 - 30 -->205 <div class="day"><span>26</span></div>206 <div class="day"><span>27</span></div>207 <div class="day"><span>28</span></div>208 <div class="day"><span>29</span></div>209 <div class="day"><span>30</span></div>210 <div class="day"></div>211 <div class="day"></div>212 </div>213 </div>214 215 <!-- December -->216 <div class="month-bar" style="position:absolute; top:1250px; left:0; right:0;">December 2023</div>217 <div class="calendar" style="position:absolute; top:1332px; left:0; right:0;">218 <div class="calendar-grid">219 <!-- Row 1: Sun-Thu blank, 1,2 -->220 <div class="day"></div>221 <div class="day"></div>222 <div class="day"></div>223 <div class="day"></div>224 <div class="day"></div>225 <div class="day"><span>1</span></div>226 <div class="day"><span>2</span></div>227 228 <!-- Row 2: 3 - 9 -->229 <div class="day"><span>3</span></div>230 <div class="day"><span>4</span></div>231 <div class="day"><span>5</span></div>232 <div class="day"><span>6</span></div>233 <div class="day"><span>7</span></div>234 <div class="day"><span>8</span></div>235 <div class="day"><span>9</span></div>236 237 <!-- Row 3: 10 - 16 -->238 <div class="day"><span>10</span></div>239 <div class="day"><span>11</span></div>240 <div class="day"><span>12</span></div>241 <div class="day"><span>13</span></div>242 <div class="day"><span>14</span></div>243 <div class="day"><span>15</span></div>244 <div class="day"><span>16</span></div>245 246 <!-- Row 4: 17 - 23 -->247 <div class="day"><span>17</span></div>248 <div class="day"><span>18</span></div>249 <div class="day"><span>19</span></div>250 <div class="day"><span>20</span></div>251 <div class="day"><span>21</span></div>252 <div class="day"><span>22</span></div>253 <div class="day"><span>23</span></div>254 </div>255 </div>256 257 <!-- Confirm Button -->258 <div class="confirm-wrap">259 <div class="confirm-btn">Confirm</div>260 </div>261 262 <!-- Gesture bar -->263 <div class="gesture"></div>264</div>265</body>266</html>