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>Date Picker UI</title>7<style>8 :root{9 --dark:#33383d;10 --text:#212121;11 --muted:#9e9e9e;12 --blue:#1a73e8;13 --bg:#ffffff;14 --line:#e0e0e0;15 }16 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }17 #render-target{18 width:1080px; height:2400px;19 position:relative; overflow:hidden;20 background:#f9f9fb; /* overall screen bg */21 color:var(--text);22 }23 24 /* System status bar (Android) */25 .system-bar{26 height:120px;27 background:var(--dark);28 color:#fff;29 display:flex;30 align-items:center;31 padding:0 40px;32 font-size:36px;33 letter-spacing:0.2px;34 box-sizing:border-box;35 }36 .sys-left{ display:flex; gap:28px; align-items:center; }37 .sys-right{ margin-left:auto; display:flex; gap:28px; align-items:center; }38 39 /* Browser/app bar */40 .app-bar{41 height:160px;42 background:var(--dark);43 color:#fff;44 box-sizing:border-box;45 padding:0 40px;46 display:flex; align-items:center;47 }48 .row{ display:flex; align-items:center; width:100%; }49 .title-wrap{ margin-left:20px; }50 .title{ font-size:44px; font-weight:600; }51 .subtitle{ font-size:32px; color:#cfd8dc; }52 .app-actions{ margin-left:auto; display:flex; gap:36px; align-items:center; }53 54 /* Tabs */55 .tabs{56 height:130px; background:#fff;57 border-bottom:1px solid var(--line);58 display:flex; align-items:flex-end; gap:80px;59 padding:0 40px 0 40px;60 box-sizing:border-box;61 }62 .tab{63 font-size:40px; color:#666; padding:36px 0; position:relative;64 }65 .tab.active{ color:#000; font-weight:600; }66 .tab.active::after{67 content:""; position:absolute; left:0; right:0; bottom:-1px;68 height:6px; background:var(--blue); border-radius:3px;69 }70 71 /* Date controls */72 .date-controls{73 background:#fff; border-bottom:1px solid var(--line);74 padding:24px 40px 30px; box-sizing:border-box;75 }76 .control-row{ display:flex; gap:28px; }77 .control{78 flex:1; height:110px; border:1px solid var(--line);79 border-radius:18px; background:#fafafa;80 display:flex; align-items:center; justify-content:space-between;81 padding:0 24px; box-sizing:border-box;82 font-size:40px; color:#555;83 }84 .control .label{ color:#222; font-weight:600; }85 .chev{86 width:42px; height:42px; display:flex; align-items:center; justify-content:center;87 }88 .weekday-bar{89 background:#fff; border-top:1px solid var(--line);90 padding:18px 40px; box-sizing:border-box;91 display:grid; grid-template-columns:repeat(7,1fr); gap:0;92 font-size:34px; color:#777; letter-spacing:1px;93 }94 95 /* Calendar sections */96 .calendar-wrap{ background:#fff; }97 .month{98 padding:40px; box-sizing:border-box;99 border-bottom:1px solid #f0f0f0;100 }101 .month h2{102 font-size:56px; font-weight:600; text-align:center; margin:30px 0 30px;103 }104 .grid{105 display:grid; grid-template-columns:repeat(7,1fr);106 gap:12px; padding:0 8px; box-sizing:border-box;107 }108 .day{109 height:120px; display:flex; align-items:center; justify-content:center;110 color:var(--muted); font-size:40px; border-radius:60px;111 }112 .day.blank{ background:transparent; }113 .day.selected{114 background:var(--blue); color:#fff; font-weight:700;115 }116 117 /* Bottom action bar */118 .actions{119 position:absolute; left:0; right:0; bottom:100px;120 height:170px; background:#fff; border-top:1px solid var(--line);121 display:flex; align-items:center; justify-content:space-between;122 padding:0 40px; box-sizing:border-box;123 font-size:40px;124 }125 .btn{126 height:104px; padding:0 42px; border-radius:52px; display:flex;127 align-items:center; justify-content:center; font-size:40px; font-weight:600;128 border:1px solid #d9d9d9; color:#1976d2; background:#fff;129 }130 .btn.primary{ background:var(--blue); color:#fff; border-color:var(--blue); }131 132 /* Bottom navigation pill */133 .nav-bar{134 position:absolute; left:0; right:0; bottom:0;135 height:100px; background:var(--dark); display:flex; align-items:center; justify-content:center;136 }137 .gesture-pill{138 width:220px; height:14px; border-radius:7px; background:#cfd8dc;139 }140 141 /* Simple icon styles */142 svg{ display:block; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Android system status bar -->149 <div class="system-bar">150 <div class="sys-left">151 <div>2:06</div>152 <!-- small settings gear -->153 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm10 4-2.2-.6.4-2.3-2-.9-1.3 1.9-2.2-.6-.6-2.2H10l-.6 2.2-2.2.6-1.3-1.9-2 .9.4 2.3L2 12l.6 2.2-2.3.4.9 2 1.9-1.3.6 2.2L8 18l.6-2.2 2.2-.6 1.3 1.9 2-.9-.4-2.3L22 12z"/></svg>154 <!-- wifi -->155 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 18l-2 2 2 2 2-2-2-2zm-7-7 2 2a9 9 0 0 1 14 0l2-2c-5-5-15-5-18 0zm3 3 2 2a5 5 0 0 1 8 0l2-2c-3-3-9-3-12 0z"/></svg>156 <!-- notifications -->157 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z"/></svg>158 </div>159 <div class="sys-right">160 <!-- signal -->161 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2V9h-2v11zm4 0h2V5h-2v15zm4 0h2V2h-2v18z"/></svg>162 <!-- battery -->163 <svg width="60" height="36" viewBox="0 0 28 16" fill="none">164 <rect x="1" y="1" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"></rect>165 <rect x="3" y="3" width="18" height="10" fill="#fff"></rect>166 <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"></rect>167 </svg>168 <div style="font-size:36px;">100%</div>169 </div>170 </div>171 172 <!-- Browser/app bar -->173 <div class="app-bar">174 <div class="row">175 <!-- close/back X -->176 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round">177 <path d="M5 5l14 14M19 5L5 19"/>178 </svg>179 180 <!-- lock icon -->181 <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff">182 <path d="M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-6 0V7a2 2 0 0 1 4 0v2h-4z"/>183 </svg>184 185 <div class="title-wrap">186 <div class="title">Change search criteria</div>187 <div class="subtitle">google.com</div>188 </div>189 190 <div class="app-actions">191 <!-- share -->192 <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff">193 <path d="M18 8a3 3 0 1 0-2.8-4H15l-7 4a3 3 0 1 0 0 4l7 4a3 3 0 1 0 1-2l-7-4 7-4A3 3 0 0 0 18 8z"/>194 </svg>195 <!-- bookmark -->196 <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff">197 <path d="M6 2h12a2 2 0 0 1 2 2v18l-8-4-8 4V4a2 2 0 0 1 2-2z"/>198 </svg>199 <!-- menu -->200 <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff">201 <circle cx="12" cy="5" r="2"></circle>202 <circle cx="12" cy="12" r="2"></circle>203 <circle cx="12" cy="19" r="2"></circle>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Tabs -->210 <div class="tabs">211 <div class="tab">Search</div>212 <div class="tab active">Dates</div>213 <div class="tab">Guests</div>214 </div>215 216 <!-- Date controls -->217 <div class="date-controls">218 <div class="control-row">219 <div class="control">220 <div class="chev">221 <svg width="32" height="32" viewBox="0 0 24 24" fill="#777"><path d="M15 6l-6 6 6 6V6z"/></svg>222 </div>223 <div class="label">Mon, 1 Jan</div>224 <div class="chev">225 <svg width="32" height="32" viewBox="0 0 24 24" fill="#777"><path d="M9 6l6 6-6 6V6z"/></svg>226 </div>227 </div>228 229 <div class="control">230 <div class="chev">231 <svg width="32" height="32" viewBox="0 0 24 24" fill="#777"><path d="M15 6l-6 6 6 6V6z"/></svg>232 </div>233 <div>Check-out</div>234 <div class="chev">235 <svg width="32" height="32" viewBox="0 0 24 24" fill="#777"><path d="M9 6l6 6-6 6V6z"/></svg>236 </div>237 </div>238 </div>239 <div class="weekday-bar">240 <div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>241 </div>242 </div>243 244 <!-- Calendar scroll area -->245 <div class="calendar-wrap" style="height:1470px; overflow:hidden; overflow-y:auto;">246 <!-- December -->247 <div class="month">248 <h2>December</h2>249 <div class="grid">250 <!-- December 2023 starts on Friday: four blanks -->251 <div class="day blank"></div><div class="day blank"></div><div class="day blank"></div><div class="day blank"></div>252 <div class="day">1</div><div class="day">2</div><div class="day">3</div>253 <div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div><div class="day">8</div><div class="day">9</div><div class="day">10</div>254 <div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div>255 <div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div><div class="day">24</div>256 <div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day">31</div>257 </div>258 </div>259 260 <!-- January 2024 -->261 <div class="month">262 <h2>January 2024</h2>263 <div class="grid">264 <!-- January 2024 starts on Monday: no blanks -->265 <div class="day selected">1</div>266 <div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>267 <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>268 <div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div>269 <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>270 <div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="day blank"></div><div class="day blank"></div><div class="day blank"></div><div class="day blank"></div>271 </div>272 </div>273 </div>274 275 <!-- Bottom action bar -->276 <div class="actions">277 <div style="color:#333;">Select check-out date</div>278 <div style="display:flex; gap:24px; align-items:center;">279 <div class="btn">Reset</div>280 <div class="btn primary">Done</div>281 </div>282 </div>283 284 <!-- Bottom navigation pill -->285 <div class="nav-bar">286 <div class="gesture-pill"></div>287 </div>288 289</div>290</body>291</html>