GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Choose Date UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 /* Status bar */14 .status-bar {15 height: 120px;16 padding: 0 36px;17 display: flex;18 align-items: center;19 justify-content: space-between;20 color: #777;21 font-size: 36px;22 }23 .status-icons { display: flex; gap: 22px; align-items: center; }24 .dot { width: 26px; height: 26px; background: #8a8a8a; border-radius: 50%; display:inline-block; }25 .signal { width: 30px; height: 30px; border: 3px solid #7d7d7d; border-radius: 4px; }26 .battery { width: 30px; height: 30px; border: 3px solid #7d7d7d; border-radius: 6px; position: relative; }27 .battery:after { content:''; position:absolute; right:-8px; top:8px; width:6px; height:14px; background:#7d7d7d; border-radius:2px; }28 /* Header */29 .header {30 position: relative;31 padding: 16px 36px 8px 36px;32 }33 .close-btn {34 position: absolute; left: 24px; top: 24px;35 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;36 }37 .title {38 font-weight: 800; color: #14224b; font-size: 72px; letter-spacing: 0.5px;39 padding-left: 72px; /* give space under close icon */40 }41 .inputs-row {42 display: flex; gap: 36px; padding: 28px 36px 10px 108px;43 }44 .pill {45 flex: 1;46 height: 120px;47 border: 2px solid #c7cce0;48 border-radius: 24px;49 display: flex; align-items: center; justify-content: space-between;50 padding: 0 36px; color: #4e5b87; font-size: 44px; background: #f7f8fc;51 }52 .pill .clear {53 width: 60px; height: 60px; border-radius: 50%;54 display:flex; align-items:center; justify-content:center;55 color:#7a86b2;56 }57 /* Weekday labels */58 .weekdays {59 display: grid; grid-template-columns: repeat(7, 1fr);60 padding: 12px 60px; color: #7e86a3; font-size: 38px; letter-spacing: 10px; text-align: center;61 }62 /* Month section */63 .month-label {64 padding: 26px 60px 12px 60px; color: #7e86a3; font-weight: 700; font-size: 40px;65 background: #f4f6fb; margin-top: 20px;66 }67 .calendar {68 padding: 18px 60px 20px 60px;69 }70 .grid {71 display: grid; grid-template-columns: repeat(7, 1fr);72 gap: 22px;73 }74 .day {75 height: 130px;76 position: relative;77 border-radius: 28px;78 display: flex; align-items: center; justify-content: center;79 font-size: 44px; color: #2e3a68;80 }81 .day.muted { color: #bdc3d6; }82 .day.in-range { background: #dfe8fb; color: #2e3a68; }83 .day .bubble {84 position: absolute; width: 130px; height: 130px; background: #668dc6; border-radius: 50%;85 top: 0; left: 0;86 transform: scale(1); z-index: 1;87 }88 .day.selected span, .day.selected-end span {89 position: relative; z-index: 2; color: #ffffff; font-weight: 700;90 }91 .day.selected .bubble, .day.selected-end .bubble { background: #5f84c2; }92 /* Spacing between months */93 .month-separator { height: 26px; background:#f4f6fb; margin: 20px 0; }94 /* Confirm bar */95 .confirm-area {96 position: absolute; left: 0; right: 0; bottom: 160px;97 padding: 26px 26px;98 background: rgba(255,255,255,0.95);99 box-shadow: 0 -6px 20px rgba(0,0,0,0.06);100 }101 .confirm-btn {102 width: calc(100% - 52px);103 height: 140px; margin: 0 auto;104 background: #ea726d; color: #fff; font-size: 54px; font-weight: 700;105 border-radius: 28px; display: flex; align-items: center; justify-content: center;106 }107 /* Bottom system bar */108 .system-bar {109 position: absolute; left:0; right:0; bottom:0; height:160px; background:#0e1733;110 display:flex; align-items:center; justify-content:center;111 }112 .home-indicator {113 width: 360px; height: 12px; background:#d6d8e4; border-radius: 8px; opacity: 0.75;114 }115</style>116</head>117<body>118<div id="render-target">119 <!-- Status bar -->120 <div class="status-bar">121 <div style="font-weight:700;">9:59</div>122 <div class="status-icons">123 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>124 <div class="signal"></div>125 <div class="battery"></div>126 </div>127 </div>128 129 <!-- Header with title and close -->130 <div class="header">131 <div class="close-btn">132 <svg width="48" height="48" viewBox="0 0 24 24">133 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#1b2a57" stroke-width="2.5" stroke-linecap="round"/>134 </svg>135 </div>136 <div class="title">Choose date</div>137 <div class="inputs-row">138 <div class="pill">139 <span>Wed, Nov 15</span>140 </div>141 <div class="pill">142 <span>Mon, Nov 20</span>143 <div class="clear">144 <svg width="36" height="36" viewBox="0 0 24 24">145 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#7a86b2" stroke-width="2.5" stroke-linecap="round"/>146 </svg>147 </div>148 </div>149 </div>150 </div>151 152 <!-- Weekday row -->153 <div class="weekdays">154 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>155 </div>156 157 <!-- November -->158 <div class="month-label">NOVEMBER 2023</div>159 <div class="calendar">160 <div class="grid">161 <!-- First partial week -->162 <div class="day muted"><span>1</span></div>163 <div class="day muted"><span>2</span></div>164 <div class="day muted"><span>3</span></div>165 <div class="day muted"><span>4</span></div>166 <div class="day"><span>5</span></div>167 <div class="day"><span>6</span></div>168 <div class="day"><span>7</span></div>169 170 <!-- Week 2 -->171 <div class="day"><span>8</span></div>172 <div class="day"><span>9</span></div>173 <div class="day"><span>10</span></div>174 <div class="day"><span>11</span></div>175 <div class="day"><span>12</span></div>176 <div class="day"><span>13</span></div>177 <div class="day"><span>14</span></div>178 179 <!-- Week with start -->180 <div class="day selected">181 <div class="bubble"></div>182 <span>15</span>183 </div>184 <div class="day in-range"><span>16</span></div>185 <div class="day in-range"><span>17</span></div>186 <div class="day in-range"><span>18</span></div>187 <div class="day in-range"><span>19</span></div>188 <div class="day selected-end">189 <div class="bubble"></div>190 <span>20</span>191 </div>192 <div class="day"><span>21</span></div>193 194 <!-- Final weeks -->195 <div class="day"><span>22</span></div>196 <div class="day"><span>23</span></div>197 <div class="day"><span>24</span></div>198 <div class="day"><span>25</span></div>199 <div class="day"><span>26</span></div>200 <div class="day"><span>27</span></div>201 <div class="day"><span>28</span></div>202 203 <div class="day"><span>29</span></div>204 <div class="day"><span>30</span></div>205 </div>206 </div>207 208 <!-- December -->209 <div class="month-label">DECEMBER 2023</div>210 <div class="calendar">211 <div class="grid">212 <div class="day"><span>1</span></div>213 <div class="day"><span>2</span></div>214 <div class="day"><span>3</span></div>215 <div class="day"><span>4</span></div>216 <div class="day"><span>5</span></div>217 <div class="day"><span>6</span></div>218 <div class="day"><span>7</span></div>219 220 <div class="day"><span>8</span></div>221 <div class="day"><span>9</span></div>222 <div class="day"><span>10</span></div>223 <div class="day"><span>11</span></div>224 <div class="day"><span>12</span></div>225 <div class="day"><span>13</span></div>226 <div class="day"><span>14</span></div>227 228 <div class="day"><span>15</span></div>229 <div class="day"><span>16</span></div>230 <div class="day"><span>17</span></div>231 <div class="day"><span>18</span></div>232 <div class="day"><span>19</span></div>233 <div class="day"><span>20</span></div>234 <div class="day"><span>21</span></div>235 236 <div class="day"><span>22</span></div>237 <div class="day"><span>23</span></div>238 </div>239 </div>240 241 <!-- Confirm CTA -->242 <div class="confirm-area">243 <div class="confirm-btn">Confirm</div>244 </div>245 246 <!-- System bottom bar -->247 <div class="system-bar">248 <div class="home-indicator"></div>249 </div>250</div>251</body>252</html>