GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Add Trip UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #122246; /* deep navy */15    color: #FFFFFF;16  }17 18  /* Header */19  .header {20    position: absolute;21    left: 32px;22    top: 120px; /* below status bar area */23    right: 32px;24    height: 140px;25  }26  .back-icon {27    position: absolute;28    left: 0;29    top: 12px;30    width: 64px;31    height: 64px;32  }33  .title {34    position: absolute;35    left: 88px;36    top: 0;37    font-size: 64px;38    font-weight: 600;39    letter-spacing: 0.3px;40  }41 42  /* Floating save button on right */43  .save-fab {44    position: absolute;45    right: 64px;46    top: 460px;47    width: 88px;48    height: 88px;49    border-radius: 18px;50    background: rgba(255,255,255,0.12);51    display: flex;52    align-items: center;53    justify-content: center;54    border: 1px solid rgba(255,255,255,0.18);55  }56 57  /* Form area */58  .content {59    position: absolute;60    left: 40px;61    right: 40px;62    top: 300px;63  }64  .field {65    position: relative;66    padding: 32px 0 24px 0;67    margin-bottom: 8px;68  }69  .label {70    color: rgba(255,255,255,0.72);71    font-size: 36px;72    margin-bottom: 18px;73  }74  .input-text {75    font-size: 54px;76    line-height: 66px;77    color: #FFFFFF;78  }79  .underline {80    height: 2px;81    background: rgba(255,255,255,0.18);82    margin-top: 22px;83  }84  /* Active underline for first input */85  .underline.active {86    height: 4px;87    background: #2B8AF7;88    width: 900px;89  }90 91  /* Clear (X) icon in the first field */92  .clear-icon {93    position: absolute;94    right: 8px;95    top: 112px;96    width: 56px;97    height: 56px;98    opacity: 0.7;99  }100 101  /* Suggestion dropdown mock under first input */102  .suggestion {103    position: absolute;104    left: 0;105    top: 188px; /* just under the active underline */106    width: 940px;107    height: 220px;108    background: #2B2B2B;109    border: 1px solid #3A3A3A;110    border-radius: 16px;111    color: #BDBDBD;112    display: flex;113    align-items: center;114    padding-left: 24px;115    box-shadow: 0 8px 24px rgba(0,0,0,0.5);116  }117  .divider {118    height: 2px;119    background: rgba(255,255,255,0.12);120    margin-top: 24px;121  }122 123  /* Keyboard area (simplified representation) */124  .keyboard {125    position: absolute;126    left: 0;127    right: 0;128    bottom: 0;129    height: 980px;130    background: #121316;131    border-top: 1px solid rgba(255,255,255,0.08);132  }133  .kb-suggest {134    height: 100px;135    border-bottom: 1px solid rgba(255,255,255,0.08);136    display: flex;137    align-items: center;138    justify-content: center;139    color: #E0E0E0;140    font-size: 40px;141    gap: 28px;142  }143  .kb-keys {144    padding: 28px 24px;145    display: grid;146    grid-template-columns: repeat(10, 1fr);147    grid-row-gap: 20px;148    grid-column-gap: 14px;149  }150  .key {151    height: 120px;152    background: #1E1F23;153    border-radius: 22px;154    border: 1px solid rgba(255,255,255,0.06);155    display: flex;156    align-items: center;157    justify-content: center;158    color: #ECECEC;159    font-size: 44px;160  }161  .key.wide { grid-column: span 2; }162  .kb-bottom-row {163    position: absolute;164    left: 24px;165    right: 24px;166    bottom: 40px;167    display: flex;168    gap: 18px;169    align-items: center;170  }171  .bottom-key {172    height: 140px;173    flex: 1;174    background: #1E1F23;175    border-radius: 28px;176    border: 1px solid rgba(255,255,255,0.06);177    color: #ECECEC;178    font-size: 42px;179    display: flex;180    align-items: center;181    justify-content: center;182  }183  .bottom-key.small {184    flex: 0 0 180px;185    font-size: 36px;186    background: #2A2B2F;187  }188  .bottom-key.primary {189    flex: 0 0 180px;190    background: #C9CEFF;191    color: #0F0F12;192    font-weight: 700;193  }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Header -->200  <div class="header">201    <svg class="back-icon" viewBox="0 0 48 48">202      <path d="M30 8 L14 24 L30 40" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>203    </svg>204    <div class="title">Add Trip</div>205  </div>206 207  <!-- Floating Save Button -->208  <div class="save-fab" title="Save">209    <svg width="48" height="48" viewBox="0 0 48 48">210      <rect x="6" y="6" width="36" height="36" rx="8" ry="8" fill="none" stroke="#FFFFFF" stroke-width="3"/>211      <path d="M16 14 H32 V26 H16 Z" fill="none" stroke="#FFFFFF" stroke-width="3"/>212      <circle cx="24" cy="32" r="6" fill="none" stroke="#FFFFFF" stroke-width="3"/>213    </svg>214  </div>215 216  <!-- Form Content -->217  <div class="content">218    <!-- Destination Field -->219    <div class="field">220      <div class="label">Destination</div>221      <div class="input-text">Montreal's Cruise</div>222      <div class="underline active"></div>223 224      <!-- Clear icon -->225      <svg class="clear-icon" viewBox="0 0 48 48">226        <path d="M12 12 L36 36 M36 12 L12 36" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>227      </svg>228 229      <!-- Suggestion dropdown mock -->230      <div class="suggestion">Suggestion dropdown</div>231    </div>232 233    <!-- End Date Field -->234    <div class="field" style="margin-top: 260px;">235      <div class="label">End Date</div>236      <div class="underline"></div>237    </div>238 239    <!-- Trip Name Field -->240    <div class="field">241      <div class="label">Trip Name</div>242      <div class="underline"></div>243    </div>244 245    <!-- Description Field -->246    <div class="field">247      <div class="label">Description</div>248      <div class="underline"></div>249    </div>250  </div>251 252  <!-- Keyboard (simplified) -->253  <div class="keyboard">254    <div class="kb-suggest">Cruise | Cruiser | Cruises</div>255    <div class="kb-keys">256      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>257 258      <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>259 260      <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>261    </div>262    <div class="kb-bottom-row">263      <div class="bottom-key small">?123</div>264      <div class="bottom-key small">,</div>265      <div class="bottom-key">😊</div>266      <div class="bottom-key">space</div>267      <div class="bottom-key small">.</div>268      <div class="bottom-key primary">✓</div>269    </div>270  </div>271 272</div>273</body>274</html>