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>Booking.com - Date Picker Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0b2c6f; /* deep navy header background */13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 100px; padding: 0 40px;20 display: flex; align-items: center; justify-content: space-between;21 font-size: 36px; letter-spacing: 0.2px;22 opacity: 0.95;23 }24 .status-right { display: flex; align-items: center; gap: 24px; }25 .status-icon {26 width: 40px; height: 40px; border-radius: 6px; background: rgba(255,255,255,0.15);27 }28 29 /* Header */30 .brand {31 position: absolute; top: 160px; left: 0; right: 0;32 text-align: center; font-weight: 800; font-size: 72px;33 }34 .header-actions {35 position: absolute; top: 170px; right: 40px; display: flex; gap: 40px; align-items: center;36 }37 .icon-btn { width: 72px; height: 72px; position: relative; }38 .icon-btn svg { width: 100%; height: 100%; }39 .notif-badge {40 position: absolute; right: -4px; top: -6px;41 width: 42px; height: 42px; background: #d93025; color: #fff;42 border-radius: 50%; display: flex; align-items: center; justify-content: center;43 font-size: 26px; font-weight: 700;44 box-shadow: 0 2px 4px rgba(0,0,0,0.3);45 }46 47 /* Tabs */48 .tabs {49 position: absolute; top: 300px; left: 40px; right: 40px;50 display: flex; align-items: center; gap: 40px; color: #e6eaf4;51 }52 .tab {53 display: flex; align-items: center; gap: 18px; font-size: 36px; opacity: 0.9;54 }55 .tab svg { width: 60px; height: 60px; }56 .tab.stays {57 border: 3px solid rgba(255,255,255,0.6);58 border-radius: 100px; padding: 18px 36px;59 color: #fff;60 }61 62 /* Bottom sheet (calendar) */63 .sheet {64 position: absolute; left: 0; right: 0; bottom: 0; top: 430px;65 background: #fff; color: #222;66 border-top-left-radius: 42px; border-top-right-radius: 42px;67 box-shadow: 0 -6px 20px rgba(0,0,0,0.35);68 }69 .sheet-handle {70 position: absolute; top: 20px; left: 50%; transform: translateX(-50%);71 width: 180px; height: 16px; background: #d0d0d0; border-radius: 10px;72 }73 74 .sheet-inner { padding: 60px 48px 40px; }75 76 .weekday-row {77 display: grid; grid-template-columns: repeat(7, 1fr); color: #666;78 font-size: 34px; text-align: center; margin-bottom: 20px;79 }80 81 .month-title {82 font-size: 46px; font-weight: 800; margin: 40px 0 20px 8px;83 }84 85 .calendar-grid {86 display: grid; grid-template-columns: repeat(7, 1fr);87 grid-auto-rows: 120px; gap: 16px; margin-bottom: 40px;88 }89 .day, .empty {90 border-radius: 24px; display: flex; align-items: center; justify-content: center;91 font-size: 38px; color: #222; position: relative;92 }93 .empty { background: transparent; }94 .day:hover { box-shadow: inset 0 0 0 2px #e5e5e5; }95 96 /* Selection styling */97 .selected-start, .selected-end { background: #2c64e8; color: #fff; font-weight: 700; }98 .selected-start { border-top-left-radius: 28px; border-bottom-left-radius: 28px; }99 .selected-end { border-top-right-radius: 28px; border-bottom-right-radius: 28px; }100 .selected-range { background: #eceff6; color: #222; }101 102 /* Chips and CTA */103 .chips {104 display: flex; gap: 24px; align-items: center; flex-wrap: nowrap;105 overflow-x: auto; padding-bottom: 12px; margin-top: 10px;106 }107 .chip {108 padding: 26px 34px; border-radius: 100px; font-size: 34px;109 border: 2px solid #cfcfcf; color: #1f1f1f; background: #fff;110 box-shadow: 0 2px 3px rgba(0,0,0,0.06);111 white-space: nowrap;112 }113 .chip.primary {114 border-color: #2c64e8; color: #2c64e8; font-weight: 600; background: #fff;115 }116 117 .date-summary {118 text-align: center; font-size: 40px; font-weight: 700;119 margin: 24px 0 26px;120 }121 .cta {122 margin: 0 24px; height: 120px; border-radius: 20px; background: #2c64e8; color: #fff;123 display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800;124 box-shadow: 0 6px 14px rgba(44,100,232,0.35);125 }126 127 /* Bottom system gesture bar */128 .gesture-bar {129 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);130 width: 280px; height: 14px; background: #bfbfbf; border-radius: 8px;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status Bar -->138 <div class="status-bar">139 <div>2:58</div>140 <div class="status-right">141 <div class="status-icon"></div>142 <div class="status-icon"></div>143 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">144 <path d="M3 8h18l-2 11H5L3 8zM7 8V6a5 5 0 019 0v2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>145 </svg>146 </div>147 </div>148 149 <!-- Brand -->150 <div class="brand">Booking.com</div>151 152 <!-- Header actions -->153 <div class="header-actions">154 <!-- Chat bubble -->155 <div class="icon-btn">156 <svg viewBox="0 0 24 24">157 <path d="M4 5h16a2 2 0 012 2v9a2 2 0 01-2 2H9l-5 4V7a2 2 0 012-2z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>158 </svg>159 </div>160 <!-- Bell -->161 <div class="icon-btn">162 <svg viewBox="0 0 24 24">163 <path d="M12 3a5 5 0 00-5 5v4l-2 3h14l-2-3V8a5 5 0 00-5-5z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>164 <circle cx="12" cy="20" r="2" fill="#ffffff"/>165 </svg>166 <div class="notif-badge">2</div>167 </div>168 </div>169 170 <!-- Tabs -->171 <div class="tabs">172 <div class="tab stays">173 <svg viewBox="0 0 24 24">174 <rect x="3" y="10" width="18" height="6" rx="1" fill="none" stroke="#ffffff" stroke-width="2"/>175 <rect x="6" y="7" width="6" height="3" rx="1" fill="none" stroke="#ffffff" stroke-width="2"/>176 </svg>177 <div>Stays</div>178 </div>179 <div class="tab">180 <svg viewBox="0 0 24 24">181 <path d="M2 14l9-4 11 4-5 1-3 3-4-3-8-1z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>182 </svg>183 <div>Flights</div>184 </div>185 <div class="tab">186 <svg viewBox="0 0 24 24">187 <path d="M4 15h16l-2-4H6l-2 4zm2 0v2m12-2v2M7 19h2m6 0h2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>188 </svg>189 <div>Car rental</div>190 </div>191 <div class="tab">192 <svg viewBox="0 0 24 24">193 <rect x="3" y="7" width="18" height="10" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>194 <text x="12" y="15" text-anchor="middle" font-size="6" fill="#ffffff" font-weight="700">TAXI</text>195 </svg>196 <div>Taxi</div>197 </div>198 </div>199 200 <!-- Calendar Sheet -->201 <div class="sheet">202 <div class="sheet-handle"></div>203 <div class="sheet-inner">204 205 <!-- Weekdays -->206 <div class="weekday-row">207 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>208 </div>209 210 <!-- July 2023 -->211 <div class="month-title">July 2023</div>212 <div class="calendar-grid">213 <!-- Row 1: July starts on Saturday -->214 <div class="empty"></div>215 <div class="empty"></div>216 <div class="empty"></div>217 <div class="empty"></div>218 <div class="empty"></div>219 <div class="empty"></div>220 <div class="day">1</div>221 222 <!-- Row 2 -->223 <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><div class="day">8</div>224 225 <!-- Row 3 -->226 <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><div class="day">15</div>227 228 <!-- Row 4 -->229 <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><div class="day">22</div>230 231 <!-- Row 5 -->232 <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><div class="day">29</div>233 234 <!-- Row 6 -->235 <div class="day">30</div><div class="day">31</div><div class="empty"></div><div class="empty"></div><div class="empty"></div><div class="empty"></div><div class="empty"></div>236 </div>237 238 <!-- August 2023 -->239 <div class="month-title">August 2023</div>240 <div class="calendar-grid">241 <!-- Row 1: Aug 2023 starts on Tuesday -->242 <div class="empty"></div>243 <div class="empty"></div>244 <div class="day">1</div>245 <div class="day selected-start">2</div>246 <div class="day selected-range">3</div>247 <div class="day selected-range">4</div>248 <div class="day selected-range">5</div>249 250 <!-- Row 2 -->251 <div class="day selected-end">6</div>252 <div class="day">7</div><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>253 254 <!-- Row 3 -->255 <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><div class="day">18</div><div class="day">19</div>256 257 <!-- Row 4 -->258 <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><div class="day">25</div><div class="day">26</div>259 260 <!-- Row 5 -->261 <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><div class="empty"></div><div class="empty"></div>262 </div>263 264 <!-- Chips -->265 <div class="chips">266 <div class="chip primary">Exact dates</div>267 <div class="chip">± 1 day</div>268 <div class="chip">± 2 days</div>269 <div class="chip">± 3 days</div>270 <div class="chip">± 7 days</div>271 </div>272 273 <!-- Summary and CTA -->274 <div class="date-summary">Aug 2 - Aug 6 (4 nights)</div>275 <div class="cta">Select dates</div>276 </div>277 278 <!-- System gesture bar -->279 <div class="gesture-bar"></div>280 </div>281 282</div>283</body>284</html>