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>Dark Date Picker UI</title>7<style>8 body{ margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif; }9 #render-target{10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#0d1220; color:#e9edf3;13 border-radius:0;14 }15 16 /* Status bar */17 .status-bar{18 position:absolute; top:0; left:0; right:0; height:88px;19 padding:0 28px; display:flex; align-items:flex-end; justify-content:space-between;20 box-sizing:border-box; color:#eaeef7; font-weight:600; letter-spacing:1px;21 }22 .status-left{ font-size:36px; padding-bottom:14px; }23 .status-right{ display:flex; gap:26px; align-items:center; padding-bottom:18px; }24 .status-icon svg{ width:38px; height:38px; fill:#eaeef7; opacity:.9; }25 26 /* App header */27 .app-header{28 position:absolute; top:120px; left:40px; right:40px;29 display:flex; align-items:center; gap:18px;30 }31 .back-icon{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; }32 .back-icon svg{ width:46px; height:46px; fill:#cfd6e4; }33 .title{ font-size:76px; font-weight:600; color:#cfd6e4; opacity:.9; }34 35 /* Form scaffold (background content) */36 .form{37 position:absolute; top:240px; left:40px; right:40px;38 color:#9aa4b8;39 }40 .field{ margin:54px 0; }41 .label{ font-size:28px; text-transform:uppercase; letter-spacing:2px; opacity:.7; }42 .value{ margin-top:12px; font-size:44px; color:#cfd6e4; }43 .underline{ height:2px; background:#2a3042; margin-top:14px; }44 45 /* Floating save placeholder on right */46 .floating-save{47 position:absolute; top:480px; right:40px; width:66px; height:66px;48 background:#2a3042; border-radius:10px; opacity:.6;49 display:flex; align-items:center; justify-content:center;50 }51 .floating-save:after{52 content:'💾'; font-size:34px; opacity:.8;53 }54 55 /* Dialog (date picker) */56 .dialog{57 position:absolute; left:70px; right:70px; top:760px;58 border-radius:18px; overflow:hidden;59 box-shadow:0 26px 60px rgba(0,0,0,.55);60 }61 .dialog-header{62 background:#33405b;63 padding:34px 44px 30px 44px;64 }65 .dialog-title{66 font-size:28px; letter-spacing:3px; text-transform:uppercase; color:#c6cede; opacity:.9;67 }68 .selected-row{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; }69 .selected-date{ font-size:48px; font-weight:600; color:#ffffff; }70 .edit-icon svg{ width:36px; height:36px; fill:#e6e9f0; opacity:.9; }71 72 .dialog-body{73 background:#26334d;74 padding:26px 36px 30px 36px;75 }76 .month-bar{77 display:flex; align-items:center; justify-content:space-between;78 padding:18px 6px 10px 6px;79 }80 .month-left{ display:flex; align-items:center; gap:12px; }81 .month-text{82 font-size:34px; font-weight:700; letter-spacing:2px; color:#b8c0cf; opacity:.95;83 }84 .caret-down svg{ width:26px; height:26px; fill:#aeb6c6; }85 .month-nav{ display:flex; gap:18px; }86 .month-nav svg{ width:36px; height:36px; fill:#aeb6c6; }87 88 .weekdays{ display:grid; grid-template-columns:repeat(7,1fr); margin-top:14px; }89 .weekdays div{90 text-align:center; color:#aeb6c6; letter-spacing:6px; font-size:28px; padding:18px 0 10px 0;91 }92 93 .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:6px; }94 .day{95 height:98px; display:flex; align-items:center; justify-content:center;96 color:#cfd6e4; font-size:40px;97 }98 .day.muted{ opacity:.15; }99 .bubble{100 width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center;101 }102 .outlined .bubble{ border:2px solid #e7edf6; color:#e7edf6; }103 .selected .bubble{ background:#22a6ff; color:#ffffff; }104 .empty{ pointer-events:none; }105 106 .dialog-actions{107 display:flex; align-items:center; justify-content:flex-end;108 gap:44px; margin-top:30px; padding:18px 6px 8px 6px;109 }110 .dialog-actions .btn{111 font-size:34px; letter-spacing:6px; color:#e9edf3; opacity:.95;112 }113 114 /* Bottom gesture bar */115 .gesture{116 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);117 width:320px; height:10px; border-radius:8px; background:#eceff5; opacity:.85;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status bar -->125 <div class="status-bar">126 <div class="status-left">11:42</div>127 <div class="status-right">128 <div class="status-icon">129 <svg viewBox="0 0 24 24"><path d="M12 4L2 14h3v6h6v-4h2v4h6v-6h3L12 4z"></path></svg>130 </div>131 <div class="status-icon">132 <svg viewBox="0 0 24 24"><path d="M3 18h18v2H3zM6 14h12v2H6zM9 10h6v2H9zM11 6h2v2h-2z"></path></svg>133 </div>134 <div class="status-icon">135 <svg viewBox="0 0 24 24"><path d="M12 2a9 9 0 0 0-9 9h2a7 7 0 1 1 7 7v-3l-5 4 5 4v-3a9 9 0 0 0 0-18z"></path></svg>136 </div>137 <div class="status-icon">138 <svg viewBox="0 0 24 24"><path d="M20.5 6.5l-8.5 8-3-3L3.5 17l-1-1 6-6 3 3 7.5-7z"></path></svg>139 </div>140 <div class="status-icon">141 <svg viewBox="0 0 24 24"><path d="M17 4h-3V2H10v2H7C5.9 4 5 4.9 5 6v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H7V7h10v11z"></path></svg>142 </div>143 </div>144 </div>145 146 <!-- App header -->147 <div class="app-header">148 <div class="back-icon">149 <svg viewBox="0 0 24 24"><path d="M15.5 3.9L7.4 12l8.1 8.1-1.4 1.4L4.6 12l9.5-9.5 1.4 1.4z"></path></svg>150 </div>151 <div class="title">Add Trip</div>152 </div>153 154 <!-- Background form scaffold -->155 <div class="form">156 <div class="field">157 <div class="label">Destination</div>158 <div class="value">Mon...</div>159 <div class="underline"></div>160 </div>161 <div class="field">162 <div class="label">Start Date</div>163 <div class="value">Nov 1, 2023</div>164 <div class="underline"></div>165 </div>166 <div class="field">167 <div class="label">End Date</div>168 <div class="value" style="color:#6f7b8f;">Select...</div>169 <div class="underline"></div>170 </div>171 <div class="field">172 <div class="label">Trip Name</div>173 <div class="underline"></div>174 </div>175 <div class="field">176 <div class="label">Description</div>177 <div class="underline"></div>178 </div>179 </div>180 181 <div class="floating-save" title="Save"></div>182 183 <!-- Date Picker Dialog -->184 <div class="dialog">185 <div class="dialog-header">186 <div class="dialog-title">Select End Date</div>187 <div class="selected-row">188 <div class="selected-date">Nov 3, 2023</div>189 <div class="edit-icon">190 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>191 </div>192 </div>193 </div>194 195 <div class="dialog-body">196 <div class="month-bar">197 <div class="month-left">198 <div class="month-text">NOVEMBER 2023</div>199 <div class="caret-down">200 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>201 </div>202 </div>203 <div class="month-nav">204 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"></path></svg>205 <svg viewBox="0 0 24 24"><path d="M8.5 4l8 8-8 8-1.5-1.5L14 12 7 5.5z"></path></svg>206 </div>207 </div>208 209 <div class="weekdays">210 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>211 </div>212 213 <div class="days">214 <!-- Empty placeholders for Sun, Mon, Tue before Nov 1 -->215 <div class="day empty"></div>216 <div class="day empty"></div>217 <div class="day empty"></div>218 219 <div class="day outlined"><div class="bubble">1</div></div>220 <div class="day"><div class="bubble">2</div></div>221 <div class="day selected"><div class="bubble">3</div></div>222 <div class="day"><div class="bubble">4</div></div>223 224 <div class="day"><div class="bubble">5</div></div>225 <div class="day"><div class="bubble">6</div></div>226 <div class="day"><div class="bubble">7</div></div>227 <div class="day"><div class="bubble">8</div></div>228 <div class="day"><div class="bubble">9</div></div>229 <div class="day"><div class="bubble">10</div></div>230 <div class="day"><div class="bubble">11</div></div>231 232 <div class="day"><div class="bubble">12</div></div>233 <div class="day"><div class="bubble">13</div></div>234 <div class="day"><div class="bubble">14</div></div>235 <div class="day"><div class="bubble">15</div></div>236 <div class="day"><div class="bubble">16</div></div>237 <div class="day"><div class="bubble">17</div></div>238 <div class="day"><div class="bubble">18</div></div>239 240 <div class="day"><div class="bubble">19</div></div>241 <div class="day"><div class="bubble">20</div></div>242 <div class="day"><div class="bubble">21</div></div>243 <div class="day"><div class="bubble">22</div></div>244 <div class="day"><div class="bubble">23</div></div>245 <div class="day"><div class="bubble">24</div></div>246 <div class="day"><div class="bubble">25</div></div>247 248 <div class="day"><div class="bubble">26</div></div>249 <div class="day"><div class="bubble">27</div></div>250 <div class="day"><div class="bubble">28</div></div>251 <div class="day"><div class="bubble">29</div></div>252 <div class="day"><div class="bubble">30</div></div>253 <!-- Remaining grid cells for balance -->254 <div class="day muted"><div class="bubble">1</div></div>255 <div class="day muted"><div class="bubble">2</div></div>256 </div>257 258 <div class="dialog-actions">259 <div class="btn">CANCEL</div>260 <div class="btn">OK</div>261 </div>262 </div>263 </div>264 265 <div class="gesture"></div>266</div>267</body>268</html>