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 UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1f2a44; /* deep navy */20    color: #e8edf6;21  }22 23  /* Status bar */24  .status-bar {25    height: 88px;26    padding: 18px 28px;27    color: #d6deea;28    display: flex;29    align-items: center;30    justify-content: space-between;31    font-size: 28px;32    letter-spacing: 1px;33    opacity: 0.95;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 18px;39  }40  .icon-dot {41    width: 10px;42    height: 10px;43    background: #d6deea;44    border-radius: 50%;45    opacity: 0.9;46  }47  .wifi {48    width: 34px;49    height: 22px;50  }51  .battery {52    width: 40px;53    height: 22px;54  }55 56  /* Header */57  .header {58    padding: 8px 48px 0 48px;59    position: relative;60  }61  .back-row {62    display: flex;63    align-items: center;64    gap: 18px;65  }66  .back-icon {67    width: 44px;68    height: 44px;69    fill: #cfd8e6;70  }71  .title {72    font-size: 76px;73    font-weight: 500;74    margin: 28px 0 12px 0;75    color: #e9f0ff;76  }77  .floating-save {78    position: absolute;79    right: 48px;80    top: 140px;81    width: 66px;82    height: 66px;83    display: flex;84    align-items: center;85    justify-content: center;86    border-radius: 6px;87    background: transparent;88  }89  .floating-save svg {90    width: 48px;91    height: 48px;92    fill: #e5ebf7;93    opacity: 0.95;94  }95 96  /* Form */97  .form {98    margin-top: 30px;99    padding: 0 48px;100  }101  .field {102    position: relative;103    padding: 22px 64px 26px 0;104    margin: 8px 0;105  }106  .label {107    font-size: 30px;108    color: #9fb0c7;109    margin-bottom: 14px;110  }111  .value {112    font-size: 44px;113    color: #e9f0ff;114    line-height: 1.3;115  }116  .value.strong {117    font-weight: 700;118  }119  .divider {120    position: absolute;121    left: 0;122    right: 0;123    bottom: 0;124    height: 2px;125    background: #3a4561;126  }127  .field.active .divider {128    background: #1e88e5;129    height: 3px;130  }131  .clear-icon {132    position: absolute;133    right: 0;134    top: 58px;135    width: 48px;136    height: 48px;137    opacity: 0.6;138  }139  .clear-icon svg {140    width: 100%;141    height: 100%;142    stroke: #a5adba;143    stroke-width: 6;144    fill: none;145  }146 147  /* Bottom gesture bar */148  .nav-bottom {149    position: absolute;150    left: 0;151    right: 0;152    bottom: 0;153    height: 140px;154    background: #0d0d10;155    display: flex;156    align-items: center;157    justify-content: center;158  }159  .home-pill {160    width: 240px;161    height: 12px;162    background: #e6e6e6;163    border-radius: 10px;164    opacity: 0.9;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status Bar -->172  <div class="status-bar">173    <div>11:42</div>174    <div class="status-icons">175      <!-- simple placeholders for status icons -->176      <svg class="wifi" viewBox="0 0 24 14">177        <path fill="#d6deea" d="M12 14l2-2a3 3 0 0 0-4 0l2 2zM4 8l2 2a8 8 0 0 1 12 0l2-2A10 10 0 0 0 4 8zM0 4l2 2a14 14 0 0 1 20 0l2-2A16 16 0 0 0 0 4z"/>178      </svg>179      <div class="icon-dot"></div>180      <svg class="battery" viewBox="0 0 28 14">181        <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#d6deea" stroke-width="2"/>182        <rect x="3" y="4" width="16" height="6" fill="#d6deea"/>183        <rect x="23" y="5" width="4" height="4" fill="#d6deea"/>184      </svg>185    </div>186  </div>187 188  <!-- Header -->189  <div class="header">190    <div class="back-row">191      <svg class="back-icon" viewBox="0 0 24 24">192        <path d="M15.5 3.5L7 12l8.5 8.5" stroke="#cfd8e6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195    <div class="title">Add Trip</div>196 197    <!-- Floating Save Icon (floppy) -->198    <div class="floating-save" aria-label="Save">199      <svg viewBox="0 0 24 24">200        <path d="M4 3h12l4 4v14H4V3zm2 2v14h12V9H12V5H6zm8 10H6v2h8v-2z" />201      </svg>202    </div>203  </div>204 205  <!-- Form Fields -->206  <div class="form">207    <!-- Destination (active) -->208    <div class="field active">209      <div class="label">Destination</div>210      <div class="value">Montreal's Cruise</div>211      <div class="clear-icon">212        <svg viewBox="0 0 24 24">213          <path d="M6 6l12 12M18 6L6 18"/>214        </svg>215      </div>216      <div class="divider"></div>217    </div>218 219    <!-- Start Date -->220    <div class="field">221      <div class="label">Start Date</div>222      <div class="value strong">Nov 2, 2023</div>223      <div class="clear-icon">224        <svg viewBox="0 0 24 24">225          <path d="M6 6l12 12M18 6L6 18"/>226        </svg>227      </div>228      <div class="divider"></div>229    </div>230 231    <!-- End Date -->232    <div class="field">233      <div class="label">End Date</div>234      <div class="value strong">Nov 3, 2023</div>235      <div class="clear-icon">236        <svg viewBox="0 0 24 24">237          <path d="M6 6l12 12M18 6L6 18"/>238        </svg>239      </div>240      <div class="divider"></div>241    </div>242 243    <!-- Trip Name -->244    <div class="field">245      <div class="label">Trip Name</div>246      <div class="value" style="color:#b9c5d9;"> </div>247      <div class="divider"></div>248    </div>249 250    <!-- Description -->251    <div class="field">252      <div class="label">Description</div>253      <div class="value" style="color:#b9c5d9;"> </div>254      <div class="divider"></div>255    </div>256  </div>257 258  <!-- Bottom gesture navigation bar -->259  <div class="nav-bottom">260    <div class="home-pill"></div>261  </div>262</div>263</body>264</html>