GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Itinerary Creator UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #ffffff;14    color: #1f2b45;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-weight: 600;25    color: #2c3a52;26  }27  .status-left { display: flex; align-items: center; gap: 16px; font-size: 40px; }28  .status-right { display: flex; align-items: center; gap: 26px; }29  .sb-icon { display: inline-flex; width: 44px; height: 44px; }30 31  /* Close icon row */32  .top-actions {33    height: 100px;34    display: flex;35    align-items: center;36    padding: 0 36px;37  }38  .close-btn { width: 60px; height: 60px; cursor: pointer; }39 40  /* Content */41  .content {42    padding: 0 36px;43  }44  .headline {45    font-size: 58px;46    line-height: 1.2;47    font-weight: 700;48    margin: 12px 0 28px;49    letter-spacing: 0.2px;50  }51 52  /* Field label */53  .field-label {54    font-size: 32px;55    color: #9aa4b4;56    margin: 18px 0 18px;57    display: flex;58    align-items: center;59    gap: 12px;60  }61  .field-label::after {62    content: "";63    flex: 1;64    height: 2px;65    background: #e6e9ef;66    margin-left: 16px;67  }68 69  /* Inputs */70  .input-box {71    border: 2px solid #c7cfda;72    border-radius: 28px;73    height: 128px;74    display: flex;75    align-items: center;76    padding: 0 28px;77    margin-bottom: 38px;78    box-sizing: border-box;79  }80  .input-icon { width: 56px; height: 56px; margin-right: 22px; flex: 0 0 auto; }81  .chip {82    display: inline-flex;83    align-items: center;84    gap: 18px;85    background: #eaf0ff;86    color: #2b3a59;87    border-radius: 20px;88    padding: 20px 26px;89    font-size: 34px;90    border: 2px solid #ced6ea;91  }92  .chip .chip-x { width: 34px; height: 34px; }93 94  /* Suggestion chips */95  .subheading {96    font-size: 36px;97    font-weight: 700;98    margin: 10px 0 24px;99  }100  .chips-grid {101    display: flex;102    flex-wrap: wrap;103    gap: 22px;104    margin-bottom: 40px;105  }106  .suggest-chip {107    background: #f2f5fa;108    color: #2b3a59;109    border-radius: 20px;110    padding: 22px 28px;111    font-size: 36px;112    border: 2px solid #e5e9f1;113  }114 115  /* Secondary input boxes */116  .form-group { margin: 24px 0; }117  .label-text {118    font-size: 38px;119    color: #2c3a52;120  }121  .muted { color: #94a2b6; }122 123  /* CTA section */124  .cta-section {125    position: absolute;126    left: 0;127    right: 0;128    bottom: 180px; /* keeps above nav bar */129    padding: 0 36px;130    text-align: center;131  }132  .hint-pill {133    display: inline-block;134    background: #e9edff;135    color: #3f63f5;136    border-radius: 16px;137    padding: 12px 20px;138    font-size: 30px;139    margin-bottom: 22px;140    border: 1px solid #cfd7ff;141  }142  .primary-btn {143    width: 100%;144    height: 124px;145    background: #3f63f5;146    color: #ffffff;147    border-radius: 22px;148    font-size: 42px;149    font-weight: 700;150    display: flex;151    align-items: center;152    justify-content: center;153    box-shadow: 0 12px 24px rgba(63,99,245,0.25);154  }155  .secondary-link {156    margin-top: 26px;157    font-size: 36px;158    color: #5a677d;159  }160 161  /* Bottom navigation bar */162  .nav-bar {163    position: absolute;164    left: 0;165    bottom: 0;166    width: 1080px;167    height: 140px;168    background: #000000;169    display: flex;170    align-items: center;171    justify-content: center;172  }173  .home-pill {174    width: 220px;175    height: 18px;176    background: #d9d9d9;177    border-radius: 9px;178    opacity: 0.9;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status bar -->186  <div class="status-bar">187    <div class="status-left">12:24</div>188    <div class="status-right">189      <!-- simple circular icons to mimic status dots -->190      <svg class="sb-icon" viewBox="0 0 24 24">191        <circle cx="12" cy="12" r="10" fill="#b0b7c7"></circle>192      </svg>193      <svg class="sb-icon" viewBox="0 0 24 24">194        <circle cx="12" cy="12" r="10" fill="#b0b7c7"></circle>195      </svg>196      <!-- WiFi -->197      <svg class="sb-icon" viewBox="0 0 24 24">198        <path d="M2 9c5-5 15-5 20 0M6 13c3-3 9-3 12 0M10 17c2-2 4-2 6 0M12 20l2-2-2-2-2 2 2 2z" stroke="#2c3a52" stroke-width="2" fill="none" stroke-linecap="round"/>199      </svg>200      <!-- Battery -->201      <svg class="sb-icon" viewBox="0 0 28 24">202        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#2c3a52" stroke-width="2" fill="none"></rect>203        <rect x="4" y="8" width="12" height="8" fill="#2c3a52"></rect>204        <rect x="22" y="9" width="4" height="6" fill="#2c3a52"></rect>205      </svg>206    </div>207  </div>208 209  <!-- Close -->210  <div class="top-actions">211    <svg class="close-btn" viewBox="0 0 24 24">212      <path d="M4 4l16 16M20 4L4 20" stroke="#2c3a52" stroke-width="2.5" stroke-linecap="round"/>213    </svg>214  </div>215 216  <!-- Main content -->217  <div class="content">218    <div class="headline">Create an itinerary for your next trip with ease!</div>219 220    <div class="field-label">Add destinations</div>221    <div class="input-box">222      <!-- Search icon -->223      <svg class="input-icon" viewBox="0 0 24 24">224        <circle cx="11" cy="11" r="7" stroke="#2c3a52" stroke-width="2.5" fill="none"></circle>225        <path d="M20 20l-4-4" stroke="#2c3a52" stroke-width="2.5" stroke-linecap="round"></path>226      </svg>227      <div class="chip">228        Vancouver229        <svg class="chip-x" viewBox="0 0 24 24">230          <path d="M5 5l14 14M19 5L5 19" stroke="#3f63f5" stroke-width="2.2" stroke-linecap="round"/>231        </svg>232      </div>233    </div>234 235    <div class="subheading">You may be interested in the following destinations</div>236    <div class="chips-grid">237      <div class="suggest-chip">Vancouver</div>238      <div class="suggest-chip">Dubai</div>239      <div class="suggest-chip">Faridabad</div>240      <div class="suggest-chip">Phnom Penh</div>241      <div class="suggest-chip">Greater Vancouver</div>242      <div class="suggest-chip">Toronto</div>243      <div class="suggest-chip">Abu Dhabi</div>244      <div class="suggest-chip">Sharjah</div>245    </div>246 247    <div class="form-group">248      <div class="input-box">249        <svg class="input-icon" viewBox="0 0 24 24">250          <circle cx="12" cy="12" r="9" stroke="#2c3a52" stroke-width="2.4" fill="none"></circle>251          <path d="M12 6v6l4 2" stroke="#2c3a52" stroke-width="2.4" stroke-linecap="round" fill="none"></path>252        </svg>253        <div class="label-text"><span class="muted">Trip length</span></div>254      </div>255    </div>256 257    <div class="form-group">258      <div class="input-box">259        <svg class="input-icon" viewBox="0 0 24 24">260          <rect x="3" y="5" width="18" height="15" rx="2" ry="2" stroke="#2c3a52" stroke-width="2.4" fill="none"></rect>261          <path d="M7 3v4M17 3v4" stroke="#2c3a52" stroke-width="2.4" stroke-linecap="round"></path>262          <rect x="6.5" y="11" width="11" height="6" fill="#2c3a52"></rect>263        </svg>264        <div class="label-text"><span class="muted">Trip start date (optional)</span></div>265      </div>266    </div>267  </div>268 269  <!-- CTA section -->270  <div class="cta-section">271    <div class="hint-pill">You can always edit it later</div>272    <div class="primary-btn">Create Itinerary With AI</div>273    <div class="secondary-link">Create Itinerary Manually</div>274  </div>275 276  <!-- Bottom navigation bar -->277  <div class="nav-bar">278    <div class="home-pill"></div>279  </div>280</div>281</body>282</html>