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 a Trip - Dark UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #fff; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0f0f0f;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #ffffff;25    font-weight: 600;26    letter-spacing: 0.5px;27    font-size: 38px;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }35 36  /* Top app bar */37  .app-bar {38    height: 120px;39    padding: 0 36px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .icon-btn {45    width: 84px;46    height: 84px;47    border-radius: 42px;48    display: flex;49    align-items: center;50    justify-content: center;51    color: #e6e6e6;52  }53  .icon-btn svg { width: 48px; height: 48px; stroke: #e6e6e6; fill: none; stroke-width: 3; }54  .icon-set { display: flex; gap: 26px; align-items: center; }55 56  .divider { height: 2px; background: #2a2a2a; width: 100%; }57 58  /* Search */59  .content { padding: 30px 36px 0 36px; }60  .search-wrap {61    margin-top: 30px;62    background: #222;63    border: 2px solid #3b3b3b;64    border-radius: 60px;65    height: 118px;66    display: flex;67    align-items: center;68    padding: 0 36px;69    color: #bdbdbd;70    font-size: 42px;71    letter-spacing: 0.2px;72  }73  .search-wrap svg { width: 46px; height: 46px; margin-right: 22px; stroke: #9e9e9e; fill: none; stroke-width: 3; }74 75  .chips {76    margin-top: 30px;77    display: flex;78    gap: 24px;79  }80  .chip {81    display: inline-flex;82    align-items: center;83    gap: 16px;84    height: 92px;85    padding: 0 34px;86    border-radius: 50px;87    border: 2px solid #808080;88    color: #f1f1f1;89    background: #141414;90    font-size: 38px;91  }92  .chip svg { width: 40px; height: 40px; stroke: #cfcfcf; fill: none; stroke-width: 2.5; }93 94  /* Bottom sheet handle + Create section */95  .sheet-divider { margin: 36px 0 0 0; height: 2px; background: #2a2a2a; }96  .handle {97    width: 140px;98    height: 18px;99    background: #303030;100    border-radius: 9px;101    margin: 26px auto 0;102  }103  .create-section {104    padding: 28px 36px 0 36px;105  }106  .title {107    text-align: center;108    font-size: 58px;109    font-weight: 700;110    margin: 24px 0 36px;111  }112  .field-label {113    font-size: 40px;114    font-weight: 700;115    color: #e9e9e9;116    margin-bottom: 18px;117  }118  .input {119    height: 120px;120    border-radius: 20px;121    border: 3px solid #e0e0e0;122    background: #2b2b2b;123    display: flex;124    align-items: center;125    font-size: 44px;126    padding: 0 28px;127    color: #dcdcdc;128  }129  .placeholder { color: #c7c7c7; }130  .placeholder .ex { color: #7ccf8a; }131 132  .cta-row {133    display: flex;134    justify-content: flex-end;135    margin-top: 36px;136  }137  .cta-disabled {138    height: 104px;139    width: 420px;140    border-radius: 52px;141    background: #595959;142    color: #cfcfcf;143    opacity: 0.5;144    display: flex;145    align-items: center;146    justify-content: center;147    font-size: 42px;148    font-weight: 700;149  }150 151  /* Keyboard mock */152  .keyboard {153    position: absolute;154    left: 0;155    right: 0;156    bottom: 36px;157    height: 840px;158    background: #191919;159    border-top: 2px solid #2a2a2a;160    padding: 28px 20px 40px;161  }162  .kb-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 18px; }163  .key {164    background: #2b2b2b;165    border-radius: 14px;166    height: 120px;167    min-width: 88px;168    padding: 0 24px;169    display: flex;170    align-items: center;171    justify-content: center;172    color: #e5e5e5;173    font-size: 44px;174    border: 1px solid #3a3a3a;175  }176  .key.wide { min-width: 140px; }177  .key.xwide { min-width: 200px; }178  .key.light { background: #d2dceb; color: #1a1a1a; }179  .bottom-gesture {180    position: absolute;181    bottom: 10px;182    left: 50%;183    transform: translateX(-50%);184    width: 300px;185    height: 10px;186    background: #e6e6e6;187    opacity: 0.8;188    border-radius: 6px;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="status-bar">197    <div class="status-left">198      <span>12:29</span>199      <span class="dot"></span>200      <span class="dot"></span>201      <span class="dot"></span>202      <span class="dot"></span>203      <span class="dot"></span>204    </div>205    <div class="status-right">206      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 9l9 9m-9-9v6a2 2 0 002 2h6"/></svg>207      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M20 7l-8 8-4-4"/></svg>208      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M18 7a6 6 0 10-12 0c0 7 6 10 6 10s6-3 6-10z"/></svg>209      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 6h18l-2 12H5L3 6zM9 6V4h6v2"/></svg>210      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M18 7v10m-6-6v6m-6-3v3"/></svg>211      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M4 12h16M4 12a8 8 0 018-8 8 8 0 018 8"/></svg>212      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" stroke="none"><rect x="6" y="4" width="12" height="16" rx="2"/></svg>213    </div>214  </div>215 216  <!-- App bar -->217  <div class="app-bar">218    <div class="icon-btn" title="Back">219      <svg viewBox="0 0 24 24"><path d="M15 5L6 12l9 7"/></svg>220    </div>221    <div class="icon-set">222      <div class="icon-btn" title="Share">223        <svg viewBox="0 0 24 24"><path d="M4 12v7m0-7l12-7m-12 7l12 7M16 5h4v14h-4"/></svg>224      </div>225      <div class="icon-btn" title="Favorite">226        <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9a4 4 0 017-3 4 4 0 017 3c0 4.5-7 9-7 9z"/></svg>227      </div>228      <div class="icon-btn" title="Cart">229        <svg viewBox="0 0 24 24"><path d="M6 6h14l-2 9H7L6 6zM6 6l-2-2M9 20h.01M17 20h.01"/></svg>230      </div>231    </div>232  </div>233 234  <div class="divider"></div>235 236  <div class="content">237    <div class="search-wrap">238      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>239      <span>Search reviews...</span>240    </div>241 242    <div class="chips">243      <div class="chip">244        <svg viewBox="0 0 24 24"><path d="M4 6h6M14 6h6M4 12h10M4 18h14"/></svg>245        <span>Filters</span>246      </div>247      <div class="chip">248        <span>English</span>249      </div>250    </div>251  </div>252 253  <div class="sheet-divider"></div>254  <div class="handle"></div>255 256  <div class="create-section">257    <div class="title">Create a Trip</div>258    <div class="field-label">Trip name</div>259    <div class="input">260      <span class="placeholder"><span class="ex">Ex:</span> Weekend in NYC</span>261    </div>262 263    <div class="cta-row">264      <div class="cta-disabled">Create a Trip</div>265    </div>266  </div>267 268  <!-- Keyboard mock -->269  <div class="keyboard">270    <div class="kb-row">271      <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>272      <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>273    </div>274    <div class="kb-row">275      <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>276      <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>277    </div>278    <div class="kb-row">279      <div class="key wide">⇧</div>280      <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>281      <div class="key">B</div><div class="key">N</div><div class="key">M</div>282      <div class="key wide">⌫</div>283    </div>284    <div class="kb-row">285      <div class="key xwide">?123</div>286      <div class="key">,</div>287      <div class="key xwide">🙂</div>288      <div class="key" style="flex:1 1 380px; min-width:380px;"> </div>289      <div class="key">.</div>290      <div class="key light xwide">✓</div>291    </div>292  </div>293 294  <div class="bottom-gesture"></div>295</div>296</body>297</html>