GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Booking Calendar Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0F2A66; /* deep navy app background */14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 42px;29 }30 .status-left { flex: 1; }31 .status-center {32 display: flex;33 gap: 20px;34 align-items: center;35 }36 .mini-chip {37 background: rgba(255,255,255,0.15);38 border: 1px solid rgba(255,255,255,0.25);39 color: #fff;40 padding: 6px 14px;41 border-radius: 10px;42 font-size: 28px;43 }44 .status-right {45 display: flex;46 gap: 24px;47 align-items: center;48 }49 .icon-wifi, .icon-battery {50 width: 46px; height: 46px;51 }52 .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; }53 54 /* App header */55 .app-header {56 position: absolute;57 top: 120px;58 left: 0;59 width: 1080px;60 text-align: center;61 color: #ffffff;62 }63 .brand {64 font-weight: 700;65 font-size: 72px;66 letter-spacing: 1px;67 margin-top: 30px;68 }69 .header-actions {70 position: absolute;71 right: 36px;72 top: 20px;73 display: flex;74 gap: 30px;75 }76 .circle-action {77 width: 70px; height: 70px;78 border-radius: 50%;79 border: 2px solid rgba(255,255,255,0.4);80 display: flex; align-items: center; justify-content: center;81 }82 .circle-action svg { width: 38px; height: 38px; stroke: #fff; }83 84 .tabs {85 margin-top: 85px;86 display: flex;87 justify-content: center;88 gap: 30px;89 }90 .tab {91 display: flex; align-items: center; gap: 16px;92 color: #cfe0ff;93 border: 2px solid rgba(255,255,255,0.45);94 border-radius: 50px;95 padding: 18px 30px;96 font-size: 40px;97 box-sizing: border-box;98 }99 .tab svg { width: 54px; height: 54px; stroke: #cfe0ff; }100 .tab.active {101 border-color: #cfe0ff;102 color: #ffffff;103 }104 .tab.active svg { stroke: #ffffff; }105 106 /* Bottom sheet calendar */107 .sheet {108 position: absolute;109 left: 0;110 right: 0;111 top: 520px;112 height: 1560px;113 background: #ffffff;114 border-top-left-radius: 40px;115 border-top-right-radius: 40px;116 box-shadow: 0 -12px 24px rgba(0,0,0,0.35);117 }118 .sheet-handle {119 width: 180px; height: 16px;120 background: #CFCFCF;121 border-radius: 8px;122 margin: 16px auto 10px;123 }124 .sheet-inner {125 padding: 20px 46px 0 46px;126 }127 .weekday-row {128 display: flex;129 justify-content: space-between;130 color: #666;131 font-size: 36px;132 margin-top: 14px;133 margin-bottom: 30px;134 }135 .month-title {136 font-size: 54px;137 font-weight: 700;138 color: #111;139 margin: 26px 0 24px 4px;140 }141 142 .calendar-grid {143 display: grid;144 grid-template-columns: repeat(7, 1fr);145 grid-row-gap: 56px;146 grid-column-gap: 0;147 padding: 0 4px;148 }149 .day {150 text-align: center;151 font-size: 40px;152 color: #222;153 }154 .empty { color: transparent; }155 .selected {156 display: inline-block;157 background: #2E6FF2;158 color: #fff;159 border-radius: 26px;160 padding: 18px 24px;161 min-width: 92px;162 }163 164 /* bottom controls */165 .flex-chips {166 display: flex;167 gap: 24px;168 margin: 44px 0 22px 0;169 flex-wrap: wrap;170 }171 .choice-chip {172 border: 2px solid #2E6FF2;173 color: #2E6FF2;174 border-radius: 40px;175 padding: 20px 32px;176 font-size: 40px;177 background: #fff;178 }179 .choice-chip.outlined {180 border-color: #BDBDBD;181 color: #333;182 }183 .hint {184 text-align: center;185 color: #666;186 font-size: 40px;187 margin: 12px 0 24px 0;188 }189 .cta-disabled {190 margin: 0 auto;191 width: 980px;192 height: 140px;193 background: #E5E5E5;194 border-radius: 22px;195 color: #A0A0A0;196 font-size: 50px;197 display: flex; align-items: center; justify-content: center;198 }199 200 /* Bottom gesture bar */201 .gesture-bar {202 position: absolute;203 bottom: 22px;204 left: 50%;205 transform: translateX(-50%);206 width: 240px;207 height: 14px;208 background: #C7C7C7;209 border-radius: 8px;210 }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div class="status-left">2:57</div>219 <div class="status-center">220 <div class="mini-chip">oyo</div>221 <div class="mini-chip">ebay</div>222 <div class="mini-chip">YT</div>223 <div style="color:#fff;">•</div>224 </div>225 <div class="status-right">226 <div class="icon-wifi">227 <svg viewBox="0 0 24 24">228 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>229 <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>230 <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>231 <circle cx="12" cy="18" r="1.5" fill="#fff"/>232 </svg>233 </div>234 <div class="icon-battery">235 <svg viewBox="0 0 28 16">236 <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/>237 <rect x="3" y="5" width="14" height="6" rx="1" fill="#fff"/>238 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- App header -->245 <div class="app-header">246 <div class="brand">Booking.com</div>247 <div class="header-actions">248 <div class="circle-action">249 <svg viewBox="0 0 24 24" fill="none">250 <path d="M5 18c0-4 14-4 14 0" stroke-width="2"/>251 <rect x="6" y="6" width="12" height="8" rx="2" stroke-width="2"/>252 </svg>253 </div>254 <div class="circle-action">255 <svg viewBox="0 0 24 24" fill="none">256 <path d="M12 3v3M12 18v3M5 12h14" stroke-width="2"/>257 <rect x="4" y="5" width="16" height="14" rx="7" stroke-width="2"/>258 </svg>259 </div>260 </div>261 <div class="tabs">262 <div class="tab active">263 <svg viewBox="0 0 24 24" fill="none">264 <rect x="3" y="9" width="18" height="10" rx="2" stroke-width="2"/>265 <path d="M7 9V7a4 4 0 0 1 10 0v2" stroke-width="2"/>266 </svg>267 <span>Stays</span>268 </div>269 <div class="tab">270 <svg viewBox="0 0 24 24" fill="none">271 <path d="M2 14h20M6 14l2-5h8l2 5" stroke-width="2"/>272 <circle cx="7" cy="17" r="2" stroke-width="2"/>273 <circle cx="17" cy="17" r="2" stroke-width="2"/>274 </svg>275 <span>Flights</span>276 </div>277 <div class="tab">278 <svg viewBox="0 0 24 24" fill="none">279 <rect x="3" y="8" width="18" height="8" rx="2" stroke-width="2"/>280 <path d="M5 16l-1 2h16l-1-2" stroke-width="2"/>281 </svg>282 <span>Car rental</span>283 </div>284 <div class="tab">285 <svg viewBox="0 0 24 24" fill="none">286 <rect x="4" y="8" width="16" height="8" rx="2" stroke-width="2"/>287 <path d="M2 16h20" stroke-width="2"/>288 <path d="M7 8l1-3h8l1 3" stroke-width="2"/>289 </svg>290 <span>Taxi</span>291 </div>292 </div>293 </div>294 295 <!-- Bottom sheet calendar -->296 <div class="sheet">297 <div class="sheet-handle"></div>298 <div class="sheet-inner">299 <div class="weekday-row">300 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>301 </div>302 303 <div class="month-title">July 2023</div>304 <div class="calendar-grid">305 <div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div><div class="day">1</div>306 <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>307 <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>308 <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>309 <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>310 <div class="day">30</div><div class="day">31</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div>311 </div>312 313 <div class="month-title" style="margin-top:70px;">August 2023</div>314 <div class="calendar-grid">315 <div class="day empty">.</div><div class="day">1</div>316 <div class="day"><span class="selected">2</span></div>317 <div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div>318 <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><div class="day">13</div>319 <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><div class="day">20</div>320 <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><div class="day">27</div>321 <div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="day empty">.</div><div class="day empty">.</div><div class="day empty">.</div>322 </div>323 324 <div class="flex-chips">325 <div class="choice-chip">Exact dates</div>326 <div class="choice-chip outlined">± 1 day</div>327 <div class="choice-chip outlined">± 2 days</div>328 <div class="choice-chip outlined">± 3 days</div>329 <div class="choice-chip outlined">± 7 days</div>330 </div>331 <div class="hint">Select a check-out date</div>332 <div class="cta-disabled">Select dates</div>333 </div>334 </div>335 336 <div class="gesture-bar"></div>337</div>338</body>339</html>