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>Create Itinerary Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20    border-radius: 0;21    box-shadow: none;22    color: #1E2B4F;23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    width: 1080px;31    height: 120px;32    padding: 0 36px;33    box-sizing: border-box;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #2E3A4F;38  }39  .status-left {40    display: flex;41    align-items: center;42    gap: 24px;43    font-weight: 600;44    font-size: 36px;45  }46  .status-right {47    display: flex;48    align-items: center;49    gap: 26px;50  }51  .status-icon {52    width: 40px;53    height: 40px;54    opacity: 0.75;55  }56 57  /* Close/back */58  .close-wrap {59    position: absolute;60    top: 140px;61    left: 36px;62    width: 72px;63    height: 72px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .section {69    position: absolute;70    left: 36px;71    right: 36px;72  }73 74  /* Title */75  .title {76    top: 240px;77    font-size: 58px;78    line-height: 1.2;79    font-weight: 800;80    letter-spacing: -0.4px;81    margin-right: 36px;82  }83 84  /* Inputs */85  .input {86    height: 120px;87    border: 2px solid #C9D3E0;88    border-radius: 24px;89    padding: 0 32px;90    display: flex;91    align-items: center;92    gap: 24px;93    box-sizing: border-box;94    color: #8C97A8;95    font-size: 38px;96    font-weight: 600;97    background: #FFFFFF;98  }99  .input.search {100    top: 520px;101  }102 103  .hint-title {104    top: 676px;105    font-size: 36px;106    font-weight: 700;107    color: #1E2B4F;108  }109  .chips {110    top: 740px;111    display: flex;112    flex-wrap: wrap;113    gap: 24px;114  }115  .chip {116    background: #F3F6FB;117    color: #283850;118    font-size: 34px;119    font-weight: 700;120    padding: 26px 32px;121    border-radius: 24px;122  }123 124  .input.length {125    top: 1180px;126  }127  .input.date {128    top: 1360px;129  }130  .icon {131    width: 50px;132    height: 50px;133  }134 135  /* CTA area */136  .cta-area {137    position: absolute;138    left: 36px;139    right: 36px;140    bottom: 200px;141    text-align: center;142  }143  .cta-tip {144    display: inline-block;145    background: #E6ECFF;146    color: #5F78FF;147    font-size: 30px;148    font-weight: 700;149    padding: 16px 22px;150    border-radius: 18px;151    margin-bottom: 24px;152  }153  .cta-btn {154    width: 100%;155    height: 132px;156    background: #4163FF;157    color: #FFFFFF;158    font-size: 42px;159    font-weight: 800;160    border-radius: 24px;161    display: flex;162    align-items: center;163    justify-content: center;164    box-shadow: 0 10px 16px rgba(65,99,255,0.25);165    margin-bottom: 32px;166  }167  .link-secondary {168    color: #5E6A7E;169    font-size: 36px;170    font-weight: 700;171  }172 173  /* Bottom nav bar (gesture) */174  .nav-bottom {175    position: absolute;176    left: 0;177    bottom: 0;178    width: 1080px;179    height: 120px;180    background: #000000;181  }182  .gesture-pill {183    position: absolute;184    left: 50%;185    bottom: 32px;186    transform: translateX(-50%);187    width: 220px;188    height: 12px;189    background: #EDEDED;190    border-radius: 6px;191    opacity: 0.95;192  }193 194  /* Subtle divider under header area */195  .divider {196    position: absolute;197    left: 0;198    right: 0;199    top: 220px;200    height: 2px;201    background: #EEF2F7;202  }203</style>204</head>205<body>206<div id="render-target">207 208  <!-- Status Bar -->209  <div class="status-bar">210    <div class="status-left">211      <span>12:24</span>212      <!-- small info icon -->213      <svg class="status-icon" viewBox="0 0 24 24">214        <circle cx="12" cy="12" r="10" fill="#B0B8C5"></circle>215        <rect x="11" y="6" width="2" height="2" fill="#FFFFFF"></rect>216        <rect x="11" y="10" width="2" height="8" fill="#FFFFFF"></rect>217      </svg>218      <!-- search icon mimic -->219      <svg class="status-icon" viewBox="0 0 24 24">220        <circle cx="11" cy="11" r="7" fill="none" stroke="#B0B8C5" stroke-width="2"></circle>221        <line x1="16" y1="16" x2="21" y2="21" stroke="#B0B8C5" stroke-width="2"></line>222      </svg>223      <!-- N letter placeholder -->224      <svg class="status-icon" viewBox="0 0 24 24">225        <rect x="3" y="3" width="18" height="18" rx="4" fill="#B0B8C5"></rect>226        <path d="M7 17V7l10 10V7" stroke="#FFFFFF" stroke-width="2" fill="none"></path>227      </svg>228      <!-- square dots -->229      <svg class="status-icon" viewBox="0 0 24 24">230        <circle cx="6" cy="12" r="2" fill="#B0B8C5"></circle>231        <circle cx="12" cy="12" r="2" fill="#B0B8C5"></circle>232        <circle cx="18" cy="12" r="2" fill="#B0B8C5"></circle>233      </svg>234    </div>235    <div class="status-right">236      <!-- wifi -->237      <svg class="status-icon" viewBox="0 0 24 24">238        <path d="M3 9c5-4 13-4 18 0" stroke="#B0B8C5" stroke-width="2" fill="none"></path>239        <path d="M6 12c3-2 9-2 12 0" stroke="#B0B8C5" stroke-width="2" fill="none"></path>240        <circle cx="12" cy="16" r="2" fill="#B0B8C5"></circle>241      </svg>242      <!-- battery -->243      <svg class="status-icon" viewBox="0 0 28 20">244        <rect x="2" y="4" width="20" height="12" rx="2" fill="none" stroke="#B0B8C5" stroke-width="2"></rect>245        <rect x="23" y="8" width="3" height="4" fill="#B0B8C5"></rect>246        <rect x="4" y="6" width="16" height="8" fill="#B0B8C5"></rect>247      </svg>248    </div>249  </div>250 251  <!-- Close icon -->252  <div class="close-wrap">253    <svg width="48" height="48" viewBox="0 0 24 24">254      <path d="M5 5l14 14M19 5L5 19" stroke="#1E2B4F" stroke-width="2" stroke-linecap="round"></path>255    </svg>256  </div>257 258  <div class="divider"></div>259 260  <!-- Title -->261  <div class="section title">262    Create an itinerary for your next trip with ease!263  </div>264 265  <!-- Search input -->266  <div class="section input search">267    <svg class="icon" viewBox="0 0 24 24">268      <circle cx="11" cy="11" r="7" fill="none" stroke="#1E2B4F" stroke-width="2"></circle>269      <line x1="16" y1="16" x2="21" y2="21" stroke="#1E2B4F" stroke-width="2"></line>270    </svg>271    <span>Add destinations</span>272  </div>273 274  <!-- Suggested destinations -->275  <div class="section hint-title">276    You may be interested in the following destinations277  </div>278  <div class="section chips">279    <div class="chip">Vancouver</div>280    <div class="chip">Dubai</div>281    <div class="chip">Faridabad</div>282    <div class="chip">Phnom Penh</div>283    <div class="chip">Greater Vancouver</div>284    <div class="chip">Toronto</div>285    <div class="chip">Abu Dhabi</div>286    <div class="chip">Sharjah</div>287  </div>288 289  <!-- Trip length -->290  <div class="section input length">291    <svg class="icon" viewBox="0 0 24 24">292      <circle cx="12" cy="12" r="9" fill="none" stroke="#16284D" stroke-width="2"></circle>293      <path d="M12 7v6l4 2" stroke="#16284D" stroke-width="2" fill="none" stroke-linecap="round"></path>294    </svg>295    <span>Trip length</span>296  </div>297 298  <!-- Trip start date -->299  <div class="section input date">300    <svg class="icon" viewBox="0 0 24 24">301      <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#16284D" stroke-width="2"></rect>302      <line x1="3" y1="9" x2="21" y2="9" stroke="#16284D" stroke-width="2"></line>303      <rect x="6" y="12" width="4" height="4" fill="#16284D"></rect>304      <rect x="12" y="12" width="4" height="4" fill="#16284D"></rect>305    </svg>306    <span>Trip start date (optional)</span>307  </div>308 309  <!-- CTA Area -->310  <div class="cta-area">311    <div class="cta-tip">You can always edit it later</div>312    <div class="cta-btn">Create Itinerary With AI</div>313    <div class="link-secondary">Create Itinerary Manually</div>314  </div>315 316  <!-- Bottom Navigation (gesture bar) -->317  <div class="nav-bottom">318    <div class="gesture-pill"></div>319  </div>320 321</div>322</body>323</html>