GD-ML/AndroidCode

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>Add Trip - Date Picker</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1322; /* dark app background */15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    color: #ffffff;25    font-size: 34px;26    letter-spacing: 1px;27    display: flex;28    align-items: center;29    padding: 0 28px;30    box-sizing: border-box;31    opacity: 0.95;32  }33  .status-bar .left { flex: 1; }34  .status-bar .right { display: flex; align-items: center; gap: 26px; }35  .icon {36    width: 40px; height: 40px;37    display: inline-flex; align-items: center; justify-content: center;38  }39 40  /* Header with back and title */41  .header {42    position: absolute;43    top: 120px;44    left: 32px;45    right: 32px;46    height: 120px;47    display: flex;48    align-items: center;49    gap: 24px;50    color: #d8dbe6;51  }52  .header .title {53    font-size: 72px;54    font-weight: 300;55    letter-spacing: 0.5px;56    color: #cfd5e6;57  }58 59  /* Form scaffolding behind the dialog */60  .form {61    position: absolute;62    top: 280px;63    left: 56px;64    right: 56px;65    color: #8f97aa;66  }67  .field {68    margin: 34px 0 26px;69  }70  .label {71    font-size: 34px;72    margin-bottom: 10px;73    opacity: 0.8;74  }75  .input-line {76    height: 74px;77    border-bottom: 2px solid #243049;78    display: flex; align-items: center; color: #c9d2e8;79    font-size: 42px;80  }81 82  /* Date Picker Dialog */83  .dialog {84    position: absolute;85    left: 72px;86    right: 72px;87    bottom: 360px;88    height: 1180px;89    background: #1f2940;90    border-radius: 18px;91    box-shadow: 0 28px 70px rgba(0,0,0,0.6);92    overflow: hidden;93  }94  .dialog-header {95    background: #32405f;96    color: #cfd7ea;97    padding: 36px 44px 32px;98    letter-spacing: 2px;99  }100  .dialog-header .hint {101    font-size: 30px;102    text-transform: uppercase;103    opacity: 0.8;104    margin-bottom: 26px;105  }106  .dialog-header .selected-date {107    display: flex;108    justify-content: space-between;109    align-items: center;110  }111  .dialog-header .date-text {112    font-size: 56px;113    color: #ffffff;114    font-weight: 500;115  }116  .dialog-body {117    padding: 38px 44px 24px;118    color: #cfd7ea;119  }120  .month-row {121    display: flex;122    align-items: center;123    justify-content: space-between;124    margin-bottom: 24px;125  }126  .month-title {127    font-size: 36px;128    letter-spacing: 3px;129    color: #9aa6bf;130    font-weight: 700;131  }132  .nav {133    display: flex; gap: 28px; align-items: center;134  }135 136  .dow {137    display: grid;138    grid-template-columns: repeat(7, 1fr);139    margin: 10px 0 20px;140    color: #a8b3c9;141    text-align: center;142    font-size: 32px;143    letter-spacing: 6px;144  }145  .days {146    display: grid;147    grid-template-columns: repeat(7, 1fr);148    grid-auto-rows: 110px;149    gap: 8px;150  }151  .day {152    display: flex; align-items: center; justify-content: center;153    color: #d7dfef;154    font-size: 42px;155    position: relative;156  }157  .day.muted { opacity: 0.35; }158  .day.ring::before {159    content: "";160    position: absolute;161    width: 84px; height: 84px;162    border: 3px solid #e6eefc;163    border-radius: 50%;164  }165  .day.fill {166    color: #ffffff;167  }168  .day.fill::before {169    content: "";170    position: absolute;171    width: 88px; height: 88px;172    background: #19a8ff;173    border-radius: 50%;174    box-shadow: 0 6px 10px rgba(0,0,0,0.3);175  }176  .dialog-footer {177    position: absolute;178    bottom: 22px;179    left: 44px;180    right: 44px;181    display: flex;182    justify-content: flex-end;183    gap: 70px;184  }185  .btn {186    color: #e9eef8;187    font-size: 38px;188    letter-spacing: 6px;189    text-transform: uppercase;190  }191 192  /* Bottom gesture pill */193  .gesture-pill {194    position: absolute;195    bottom: 24px;196    left: 50%;197    transform: translateX(-50%);198    width: 260px;199    height: 10px;200    background: #e6e6ea;201    border-radius: 10px;202    opacity: 0.9;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status Bar -->210  <div class="status-bar">211    <div class="left">11:41</div>212    <div class="right">213      <!-- Simple icons -->214      <div class="icon" title="WiFi">215        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><path d="M2 8a15 15 0 0 1 20 0"/><path d="M5 12a10 10 0 0 1 14 0"/><path d="M8 16a6 6 0 0 1 8 0"/><circle cx="12" cy="20" r="1.5" fill="#fff"/></svg>216      </div>217      <div class="icon" title="Battery">218        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">219          <rect x="2" y="7" width="18" height="10" rx="2"></rect>220          <rect x="4" y="9" width="14" height="6" fill="#ffffff"></rect>221          <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>222        </svg>223      </div>224    </div>225  </div>226 227  <!-- App Header -->228  <div class="header">229    <div class="icon" aria-label="Back">230      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#cfd5e6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">231        <path d="M15 6l-6 6 6 6"></path>232      </svg>233    </div>234    <div class="title">Add Trip</div>235  </div>236 237  <!-- Form scaffolding (dimmed content behind dialog) -->238  <div class="form">239    <div class="field">240      <div class="label">Destination</div>241      <div class="input-line">Mon...</div>242    </div>243 244    <div class="field">245      <div class="label">Start Date</div>246      <div class="input-line" style="color:#ffffff; font-weight:600;">Nov 1, 2023</div>247    </div>248 249    <div class="field">250      <div class="label">End Date</div>251      <div class="input-line">Select...</div>252    </div>253 254    <div class="field">255      <div class="label">Trip Name</div>256      <div class="input-line"></div>257    </div>258 259    <div class="field">260      <div class="label">Description</div>261      <div class="input-line"></div>262    </div>263  </div>264 265  <!-- Date Picker Dialog -->266  <div class="dialog">267    <div class="dialog-header">268      <div class="hint">Select End Date</div>269      <div class="selected-date">270        <div class="date-text">Nov 2, 2023</div>271        <div class="icon" aria-label="Edit date">272          <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff">273            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>274            <path d="M20.71 7.04a1 1 0 0 0 0-1.41L18.37 3.3a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.84z"></path>275          </svg>276        </div>277      </div>278    </div>279 280    <div class="dialog-body">281      <div class="month-row">282        <div class="month-title">NOVEMBER 2023</div>283        <div class="nav">284          <div class="icon" title="Previous">285            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#cfd7ea" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg>286          </div>287          <div class="icon" title="Next">288            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#cfd7ea" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"></path></svg>289          </div>290        </div>291      </div>292 293      <div class="dow">294        <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>295      </div>296 297      <div class="days">298        <!-- First row (starts on Wednesday) -->299        <div class="day muted"></div>300        <div class="day muted"></div>301        <div class="day ring">1</div>302        <div class="day fill">2</div>303        <div class="day">3</div>304        <div class="day">4</div>305        <div class="day">5</div>306 307        <!-- Second row -->308        <div class="day">6</div>309        <div class="day">7</div>310        <div class="day">8</div>311        <div class="day">9</div>312        <div class="day">10</div>313        <div class="day">11</div>314        <div class="day">12</div>315 316        <!-- Third row -->317        <div class="day">13</div>318        <div class="day">14</div>319        <div class="day">15</div>320        <div class="day">16</div>321        <div class="day">17</div>322        <div class="day">18</div>323        <div class="day">19</div>324 325        <!-- Fourth row -->326        <div class="day">20</div>327        <div class="day">21</div>328        <div class="day">22</div>329        <div class="day">23</div>330        <div class="day">24</div>331        <div class="day">25</div>332        <div class="day">26</div>333 334        <!-- Fifth row -->335        <div class="day">27</div>336        <div class="day">28</div>337        <div class="day">29</div>338        <div class="day">30</div>339        <div class="day muted"></div>340        <div class="day muted"></div>341        <div class="day muted"></div>342      </div>343    </div>344 345    <div class="dialog-footer">346      <div class="btn">Cancel</div>347      <div class="btn">OK</div>348    </div>349  </div>350 351  <!-- Bottom gesture pill -->352  <div class="gesture-pill"></div>353</div>354</body>355</html>