GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Calendar Search</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11    color: #1f1f1f;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #F7F7F7;19  }20 21  /* Status bar */22  .status-bar {23    height: 120px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-size: 36px;29    color: #222;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .icon {42    width: 40px;43    height: 40px;44  }45 46  /* Top navigation */47  .top-bar {48    position: relative;49    padding: 20px 40px 0 40px;50  }51  .close-circle {52    width: 96px;53    height: 96px;54    border-radius: 48px;55    border: 2px solid #CFCFCF;56    display: flex;57    align-items: center;58    justify-content: center;59    color: #222;60    font-size: 44px;61    position: absolute;62    left: 40px;63    top: 110px;64    background: #fff;65  }66  .tabs {67    margin-top: 110px;68    display: flex;69    gap: 36px;70    padding-left: 160px;71  }72  .tab {73    font-size: 46px;74    color: #7a7a7a;75    padding-bottom: 12px;76  }77  .tab.active {78    color: #1f1f1f;79    border-bottom: 8px solid #1f1f1f;80  }81 82  /* Search bar */83  .search-card {84    margin: 40px;85    margin-top: 28px;86    background: #fff;87    border-radius: 36px;88    box-shadow: 0 10px 30px rgba(0,0,0,0.06);89    padding: 36px 40px;90  }91  .search-row {92    display: flex;93    align-items: center;94    justify-content: space-between;95    font-size: 40px;96  }97  .search-row .label {98    color: #747474;99  }100  .search-row .value {101    color: #222;102    font-weight: 600;103  }104 105  /* Main card */106  .main-card {107    margin: 24px 24px 0 24px;108    background: #fff;109    border-radius: 48px;110    box-shadow: 0 10px 30px rgba(0,0,0,0.06);111    padding: 48px 40px 40px 40px;112  }113  .title {114    font-size: 64px;115    font-weight: 700;116    margin-bottom: 24px;117  }118 119  .segmented {120    display: flex;121    gap: 20px;122    margin-bottom: 32px;123  }124  .seg {125    background: #EFEFEF;126    color: #333;127    padding: 24px 36px;128    border-radius: 52px;129    font-size: 38px;130  }131  .seg.active {132    background: #fff;133    border: 2px solid #d9d9d9;134    box-shadow: 0 2px 8px rgba(0,0,0,0.04);135  }136 137  .dow {138    display: grid;139    grid-template-columns: repeat(7, 1fr);140    gap: 18px;141    font-size: 34px;142    color: #7a7a7a;143    padding: 8px 4px 18px 4px;144    border-bottom: 2px solid #efefef;145    margin-bottom: 18px;146  }147 148  .date-row-top {149    display: grid;150    grid-template-columns: repeat(7, 1fr);151    gap: 18px;152    font-size: 40px;153    color: #222;154    margin: 18px 0 10px 0;155  }156  .month-title {157    font-size: 44px;158    font-weight: 700;159    margin: 18px 0 10px 4px;160  }161 162  .calendar-grid {163    display: grid;164    grid-template-columns: repeat(7, 1fr);165    gap: 18px;166    font-size: 42px;167    color: #222;168  }169  .day {170    height: 96px;171    display: flex;172    align-items: center;173    justify-content: center;174    border-radius: 22px;175  }176  .day.blank {177    background: transparent;178  }179  .day.filled {180    background: #fff;181    border: 2px solid #e6e6e6;182  }183 184  /* Chips */185  .chips {186    display: flex;187    gap: 24px;188    margin-top: 32px;189    flex-wrap: wrap;190  }191  .chip {192    padding: 26px 40px;193    border-radius: 56px;194    border: 2px solid #e1e1e1;195    font-size: 38px;196    background: #fff;197    color: #222;198  }199  .chip.active {200    border-color: #2a2a2a;201    font-weight: 600;202  }203 204  /* Footer actions */205  .footer {206    display: flex;207    align-items: center;208    justify-content: space-between;209    margin: 18px 24px 0 24px;210    padding: 30px 24px 40px 24px;211  }212  .skip {213    font-size: 42px;214    color: #111;215    text-decoration: underline;216  }217  .next-btn {218    background: #000;219    color: #fff;220    font-size: 44px;221    padding: 28px 60px;222    border-radius: 28px;223  }224 225  /* Home indicator */226  .home-indicator {227    position: absolute;228    bottom: 24px;229    left: 50%;230    width: 360px;231    height: 12px;232    background: #000;233    opacity: 0.3;234    border-radius: 6px;235    transform: translateX(-50%);236  }237</style>238</head>239<body>240<div id="render-target">241 242  <!-- Status bar -->243  <div class="status-bar">244    <div class="status-left">245      <div class="time">12:49</div>246      <!-- Simple calendar icon -->247      <svg class="icon" viewBox="0 0 24 24">248        <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="#9E9E9E"></rect>249        <rect x="3" y="9" width="18" height="4" fill="#CFCFCF"></rect>250      </svg>251      <!-- Cloud icon -->252      <svg class="icon" viewBox="0 0 24 24">253        <path d="M7 16h9a4 4 0 0 0 0-8 5 5 0 0 0-9-1 5 5 0 0 0-5 5 4 4 0 0 0 5 4z" fill="#9E9E9E"></path>254      </svg>255    </div>256    <div class="status-icons">257      <!-- Wi-Fi -->258      <svg class="icon" viewBox="0 0 24 24">259        <path d="M2 8c5-4 15-4 20 0" stroke="#7d7d7d" stroke-width="2" fill="none"></path>260        <path d="M5 12c3-3 11-3 14 0" stroke="#7d7d7d" stroke-width="2" fill="none"></path>261        <circle cx="12" cy="16" r="2" fill="#7d7d7d"></circle>262      </svg>263      <!-- Battery -->264      <svg class="icon" viewBox="0 0 24 24">265        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#7d7d7d" stroke-width="2" fill="none"></rect>266        <rect x="4" y="8" width="12" height="8" fill="#7d7d7d"></rect>267        <rect x="20" y="10" width="2" height="4" fill="#7d7d7d"></rect>268      </svg>269    </div>270  </div>271 272  <!-- Top bar content -->273  <div class="top-bar">274    <div class="close-circle">×</div>275    <div class="tabs">276      <div class="tab active">Stays</div>277      <div class="tab">Experiences</div>278    </div>279  </div>280 281  <!-- Search bar -->282  <div class="search-card">283    <div class="search-row">284      <div class="label">Where</div>285      <div class="value">Newark</div>286    </div>287  </div>288 289  <!-- Main calendar card -->290  <div class="main-card">291    <div class="title">When's your trip?</div>292 293    <div class="segmented">294      <div class="seg active">Dates</div>295      <div class="seg">Months</div>296      <div class="seg">Flexible</div>297    </div>298 299    <div class="dow">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="date-row-top">304      <div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div></div>305    </div>306 307    <div class="month-title">July 2023</div>308 309    <div class="calendar-grid">310      <div class="day blank"></div>311      <div class="day blank"></div>312      <div class="day blank"></div>313      <div class="day blank"></div>314      <div class="day blank"></div>315      <div class="day blank"></div>316      <div class="day filled">1</div>317 318      <div class="day filled">2</div>319      <div class="day filled">3</div>320      <div class="day filled">4</div>321      <div class="day filled">5</div>322      <div class="day filled">6</div>323      <div class="day filled">7</div>324      <div class="day filled">8</div>325 326      <div class="day filled">9</div>327      <div class="day filled">10</div>328      <div class="day filled">11</div>329      <div class="day filled">12</div>330      <div class="day filled">13</div>331      <div class="day filled">14</div>332      <div class="day filled">15</div>333 334      <div class="day filled">16</div>335      <div class="day filled">17</div>336      <div class="day filled">18</div>337      <div class="day filled">19</div>338      <div class="day filled">20</div>339      <div class="day filled">21</div>340      <div class="day filled">22</div>341    </div>342 343    <div class="chips">344      <div class="chip active">Exact dates</div>345      <div class="chip">+ 1 day</div>346      <div class="chip">+ 2 days</div>347      <div class="chip">+ 3 days</div>348    </div>349  </div>350 351  <div class="footer">352    <div class="skip">Skip</div>353    <div class="next-btn">Next</div>354  </div>355 356  <div class="home-indicator"></div>357</div>358</body>359</html>