GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Plan Screen UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #0f0f10;13  }14 15  /* Top app bar */16  .app-header {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 220px;22    background: #d32f2f;23    box-shadow: 0 4px 12px rgba(0,0,0,0.35);24    color: #fff;25  }26  .header-inner {27    position: absolute;28    top: 40px;29    left: 40px;30    right: 40px;31    height: 140px;32    display: flex;33    align-items: center;34    justify-content: space-between;35  }36  .header-title {37    font-size: 64px;38    font-weight: 600;39    text-align: center;40    flex: 1;41    color: #fff;42  }43  .icon-btn {44    width: 96px;45    height: 96px;46    display: flex;47    align-items: center;48    justify-content: center;49  }50  .icon-btn svg { width: 58px; height: 58px; fill: none; stroke: #fff; stroke-width: 6; }51 52  /* Search card */53  .search-card {54    position: absolute;55    top: 190px;56    left: 30px;57    width: 1020px;58    background: #111213;59    border-radius: 34px;60    box-shadow: 0 12px 28px rgba(0,0,0,0.55);61    padding: 30px 30px 24px 120px;62    color: #fff;63  }64  .route-indicator {65    position: absolute;66    left: 40px;67    top: 44px;68    width: 40px;69    height: 180px;70  }71  .route-indicator .line {72    position: absolute;73    left: 18px;74    top: 36px;75    width: 4px;76    height: 110px;77    background: #bdbdbd;78    border-radius: 2px;79  }80  .route-indicator .dot {81    position: absolute;82    left: 8px;83    width: 24px;84    height: 24px;85    border-radius: 50%;86    border: 4px solid #bdbdbd;87    background: transparent;88  }89  .route-indicator .top { top: 0; }90  .route-indicator .bottom { bottom: 0; }91 92  .field {93    position: relative;94    margin-bottom: 30px;95  }96  .field .label {97    font-size: 52px;98    font-weight: 600;99  }100  .divider {101    margin-top: 16px;102    height: 2px;103    background: #2a2a2a;104  }105  .to-line {106    display: flex;107    align-items: center;108    margin-top: 18px;109  }110  .caret {111    width: 6px;112    height: 56px;113    background: #e53935;114    border-radius: 3px;115    margin-right: 18px;116  }117  .to-text {118    font-size: 52px;119    color: #cccccc;120  }121  .clear-btn {122    position: absolute;123    right: 26px;124    top: 112px;125    width: 74px;126    height: 74px;127    border-radius: 38px;128    display: flex;129    align-items: center;130    justify-content: center;131    background: #1b1b1b;132  }133  .clear-btn svg { width: 34px; height: 34px; stroke: #9e9e9e; stroke-width: 6; }134 135  /* Suggestion list */136  .suggestions {137    position: absolute;138    top: 450px;139    left: 30px;140    width: 1020px;141    border-radius: 24px;142    overflow: hidden;143  }144  .suggest-row {145    display: flex;146    align-items: center;147    justify-content: space-between;148    background: #1b1c1d;149    color: #ffffff;150    height: 140px;151    padding: 0 34px;152    border-bottom: 1px solid #2a2a2a;153  }154  .suggest-left {155    display: flex;156    align-items: center;157    gap: 28px;158  }159  .suggest-left .symbol {160    width: 64px; height: 64px; display:flex; align-items:center; justify-content:center;161  }162  .suggest-left svg { width: 54px; height: 54px; stroke: #bdbdbd; stroke-width: 5; fill: none; }163  .suggest-text { font-size: 46px; }164  .star {165    width: 60px; height: 60px; display:flex; align-items:center; justify-content:center;166  }167  .star svg { width: 54px; height: 54px; stroke: #bdbdbd; stroke-width: 5; fill: none; }168 169  /* Spacer (content area) */170  .content-spacer {171    position: absolute;172    left: 0;173    right: 0;174    top: 870px;175    height: 980px;176    background: #141415;177  }178 179  /* Keyboard mock */180  .keyboard {181    position: absolute;182    left: 0;183    bottom: 0;184    width: 1080px;185    height: 550px;186    background: #121213;187    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);188    padding: 24px 24px 34px;189  }190  .key-row {191    display: flex;192    gap: 18px;193    margin-bottom: 26px;194    justify-content: space-between;195  }196  .key {197    height: 98px;198    background: #222325;199    border-radius: 22px;200    color: #e5e5e5;201    font-size: 40px;202    display: flex;203    align-items: center;204    justify-content: center;205    flex: 1;206    box-shadow: inset 0 0 0 1px #2c2d30;207  }208  .key.small { flex: 0 0 118px; }209  .key.wide { flex: 2; }210  .key.extra-wide { flex: 4; }211 212</style>213</head>214<body>215<div id="render-target">216 217  <div class="app-header">218    <div class="header-inner">219      <div class="icon-btn">220        <!-- Back Arrow -->221        <svg viewBox="0 0 24 24">222          <path d="M15 5 L7 12 L15 19" stroke-linecap="round" stroke-linejoin="round"></path>223        </svg>224      </div>225      <div class="header-title">Plan</div>226      <div class="icon-btn">227        <!-- Double rail chevrons -->228        <svg viewBox="0 0 24 24">229          <path d="M4 6 L10 12 L4 18" stroke-linecap="round" stroke-linejoin="round"></path>230          <path d="M14 6 L20 12 L14 18" stroke-linecap="round" stroke-linejoin="round"></path>231        </svg>232      </div>233    </div>234  </div>235 236  <div class="search-card">237    <div class="route-indicator">238      <span class="dot top"></span>239      <span class="line"></span>240      <span class="dot bottom"></span>241    </div>242 243    <div class="field">244      <div class="label">Dundee</div>245      <div class="divider"></div>246      <div class="to-line">247        <div class="caret"></div>248        <div class="to-text">To</div>249      </div>250      <div class="clear-btn">251        <!-- X icon -->252        <svg viewBox="0 0 24 24">253          <path d="M6 6 L18 18 M18 6 L6 18" stroke-linecap="round"></path>254        </svg>255      </div>256    </div>257  </div>258 259  <div class="suggestions">260    <div class="suggest-row">261      <div class="suggest-left">262        <div class="symbol">263          <!-- Eye with slash -->264          <svg viewBox="0 0 24 24">265            <path d="M2 12 C5 6 19 6 22 12 C19 18 5 18 2 12" stroke-linecap="round"></path>266            <path d="M3 3 L21 21" stroke-linecap="round"></path>267          </svg>268        </div>269        <div class="suggest-text" style="color:#dcdcdc;">Location access not given</div>270      </div>271    </div>272 273    <div class="suggest-row">274      <div class="suggest-left">275        <div class="symbol">276          <!-- Clock -->277          <svg viewBox="0 0 24 24">278            <circle cx="12" cy="12" r="8"></circle>279            <path d="M12 7 L12 12 L16 14" stroke-linecap="round"></path>280          </svg>281        </div>282        <div class="suggest-text">Dundee</div>283      </div>284      <div class="star">285        <!-- Star outline -->286        <svg viewBox="0 0 24 24">287          <path d="M12 4 L14.8 9.5 L20.8 10.2 L16.2 14.2 L17.6 20 L12 17 L6.4 20 L7.8 14.2 L3.2 10.2 L9.2 9.5 Z" stroke-linejoin="round"></path>288        </svg>289      </div>290    </div>291 292    <div class="suggest-row" style="border-bottom: none;">293      <div class="suggest-left">294        <div class="symbol">295          <!-- Clock -->296          <svg viewBox="0 0 24 24">297            <circle cx="12" cy="12" r="8"></circle>298            <path d="M12 7 L12 12 L16 14" stroke-linecap="round"></path>299          </svg>300        </div>301        <div class="suggest-text">Guildford</div>302      </div>303      <div class="star">304        <!-- Star outline -->305        <svg viewBox="0 0 24 24">306          <path d="M12 4 L14.8 9.5 L20.8 10.2 L16.2 14.2 L17.6 20 L12 17 L6.4 20 L7.8 14.2 L3.2 10.2 L9.2 9.5 Z" stroke-linejoin="round"></path>307        </svg>308      </div>309    </div>310  </div>311 312  <div class="content-spacer"></div>313 314  <!-- Keyboard mockup -->315  <div class="keyboard">316    <div class="key-row">317      <div class="key small">◧</div>318      <div class="key small">☺</div>319      <div class="key small">GIF</div>320      <div class="key small">⚙</div>321      <div class="key small">G↔</div>322      <div class="key small">🎨</div>323      <div class="key small">🎙</div>324    </div>325    <div class="key-row">326      <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><div class="key small">0</div>327    </div>328    <div class="key-row">329      <div class="key">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>330    </div>331    <div class="key-row">332      <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 small">⌫</div>333    </div>334    <div class="key-row">335      <div class="key wide">?123</div>336      <div class="key small">,</div>337      <div class="key extra-wide"></div>338      <div class="key small">.</div>339      <div class="key wide">✔</div>340    </div>341  </div>342 343</div>344</body>345</html>