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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f10;15    border-radius: 32px;16    box-shadow: 0 20px 40px rgba(0,0,0,0.35);17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18    color: #fff;19  }20 21  /* Status bar */22  .status-bar {23    height: 100px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-weight: 600;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-icons { display: flex; align-items: center; gap: 24px; opacity: 0.9; }34  .icon { width: 44px; height: 44px; }35  .icon svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 2.5; }36 37  /* Header with back + actions */38  .header {39    height: 110px;40    padding: 0 32px;41    display: flex;42    align-items: center;43    justify-content: space-between;44  }45  .back { display: flex; align-items: center; gap: 16px; }46  .actions { display: flex; align-items: center; gap: 40px; opacity: 0.95; }47  .divider {48    height: 1px;49    background: #2a2a2c;50    margin: 8px 0 24px;51  }52 53  /* Search and filters */54  .search-wrap { padding: 0 40px; }55  .search {56    height: 110px;57    border-radius: 56px;58    border: 2px solid #3a3a3d;59    background: #18181a;60    display: flex;61    align-items: center;62    padding: 0 36px;63    gap: 24px;64    color: #bdbdbd;65    font-size: 36px;66  }67  .search .icon svg { stroke: #bdbdbd; }68  .chips {69    display: flex;70    gap: 24px;71    margin: 28px 0 24px;72  }73  .chip {74    padding: 22px 32px;75    border: 2px solid #6a6a6e;76    border-radius: 40px;77    color: #e8e8ea;78    font-size: 32px;79    display: inline-flex;80    align-items: center;81    gap: 16px;82    background: transparent;83  }84  .chip .icon svg { stroke: #cfcfd2; }85 86  .divider-wide {87    height: 2px;88    background: #1f1f21;89    margin: 24px 0 0;90  }91 92  /* Bottom sheet */93  .sheet {94    position: absolute;95    left: 0;96    bottom: 900px; /* sits above keyboard */97    width: 1080px;98    height: 800px;99    background: #0f0f10;100    border-top: 2px solid #262628;101  }102  .sheet .handle {103    width: 140px;104    height: 16px;105    border-radius: 8px;106    background: #2b2b2e;107    margin: 22px auto 24px;108  }109  .sheet .title {110    text-align: center;111    font-size: 48px;112    font-weight: 700;113    margin-bottom: 42px;114  }115  .sheet .content {116    padding: 0 40px;117  }118  .label {119    font-size: 34px;120    font-weight: 700;121    margin-bottom: 18px;122  }123  .text-input {124    height: 120px;125    border-radius: 20px;126    border: 3px solid #b9b9bd;127    background: #1a1a1c;128    padding: 0 30px;129    display: flex;130    align-items: center;131    font-size: 40px;132    color: #ffffff;133    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);134  }135  .create-btn {136    position: absolute;137    right: 40px;138    bottom: 40px;139    background: #ffffff;140    color: #181818;141    font-size: 38px;142    font-weight: 700;143    padding: 32px 44px;144    border-radius: 54px;145    box-shadow: 0 8px 16px rgba(0,0,0,0.35);146  }147 148  /* Keyboard mock */149  .keyboard {150    position: absolute;151    left: 0;152    bottom: 0;153    width: 1080px;154    height: 900px;155    background: #141416;156    border-top: 2px solid #2a2a2d;157    padding: 28px 26px;158    box-sizing: border-box;159  }160  .kbd-top-row {161    display: flex;162    align-items: center;163    gap: 22px;164    margin-bottom: 16px;165    color: #cfd1d5;166    font-size: 30px;167  }168  .kbd-pill {169    background: #2a2b2e;170    border-radius: 28px;171    padding: 18px 26px;172    border: 1px solid #3a3b3e;173  }174  .key-row {175    display: grid;176    grid-template-columns: repeat(10, 1fr);177    gap: 16px;178    margin-top: 18px;179  }180  .key {181    height: 120px;182    border-radius: 16px;183    background: #2a2b2e;184    border: 1px solid #3a3b3e;185  }186  .space-row {187    display: grid;188    grid-template-columns: 1.2fr 6fr 1fr 1fr;189    gap: 16px;190    margin-top: 18px;191  }192  .space, .enter, .shift, .sym {193    height: 120px;194    border-radius: 20px;195    background: #2a2b2e;196    border: 1px solid #3a3b3e;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div>12:30</div>206    <div class="status-icons">207      <div class="icon">208        <svg viewBox="0 0 24 24"><path d="M3 12h8l2 3h8"></path></svg>209      </div>210      <div class="icon">211        <svg viewBox="0 0 24 24"><path d="M4 4l16 0M6 8l12 0M8 12l8 0"></path></svg>212      </div>213      <div class="icon">214        <svg viewBox="0 0 24 24"><circle cx="18" cy="6" r="3"></circle><path d="M3 21l15-15"></path></svg>215      </div>216      <div class="icon">217        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"></path><circle cx="7" cy="19" r="2"></circle><circle cx="17" cy="19" r="2"></circle></svg>218      </div>219    </div>220  </div>221 222  <!-- Header -->223  <div class="header">224    <div class="back">225      <div class="icon">226        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg>227      </div>228    </div>229    <div class="actions">230      <div class="icon">231        <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"></circle><circle cx="12" cy="7" r="2"></circle><circle cx="18" cy="4" r="2"></circle><path d="M7.9 11l3.2-3.1M13.9 6.2l3.2-1.7"></path></svg>232      </div>233      <div class="icon">234        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z"></path></svg>235      </div>236      <div class="icon">237        <svg viewBox="0 0 24 24"><path d="M3 6h3l2 9h10l2-7H7"></path><circle cx="9" cy="20" r="2"></circle><circle cx="17" cy="20" r="2"></circle></svg>238      </div>239    </div>240  </div>241  <div class="divider"></div>242 243  <!-- Search and Filters -->244  <div class="search-wrap">245    <div class="search">246      <div class="icon">247        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>248      </div>249      <div>Search reviews...</div>250    </div>251    <div class="chips">252      <div class="chip">253        <div class="icon">254          <svg viewBox="0 0 24 24"><path d="M5 5h4v4H5zM10 10h4v4h-4zM15 15h4v4h-4z"></path></svg>255        </div>256        <span>Filters</span>257      </div>258      <div class="chip">259        <span>English</span>260      </div>261    </div>262  </div>263  <div class="divider-wide"></div>264 265  <!-- Bottom Sheet -->266  <div class="sheet">267    <div class="handle"></div>268    <div class="title">Create a Trip</div>269    <div class="content">270      <div class="label">Trip name</div>271      <div class="text-input">Dawson Creek Itinerary</div>272    </div>273    <div class="create-btn">Create a Trip</div>274  </div>275 276  <!-- Keyboard Mock -->277  <div class="keyboard">278    <div class="kbd-top-row">279      <div class="kbd-pill">Itinerary</div>280      <div class="kbd-pill">ITINERARY</div>281      <div class="kbd-pill">🎤</div>282    </div>283    <div class="key-row">284      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>285      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>286    </div>287    <div class="key-row">288      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>289      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>290    </div>291    <div class="key-row">292      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>293      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>294    </div>295    <div class="space-row">296      <div class="sym"></div>297      <div class="space"></div>298      <div class="enter"></div>299      <div class="shift"></div>300    </div>301  </div>302 303</div>304</body>305</html>