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>Select destination UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 100px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 28px;26    box-sizing: border-box;27    font-size: 34px;28    letter-spacing: 0.5px;29  }30  .status-left { flex: 1; }31  .status-left .time { font-weight: 600; }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36    font-size: 28px;37    opacity: 0.95;38  }39  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }40 41  /* Header and search */42  .top-sheet {43    background: #fff;44    box-shadow: 0 1px 0 rgba(0,0,0,0.08);45    padding: 26px 28px 22px 28px;46  }47  .title-row {48    display: flex;49    align-items: center;50    gap: 26px;51    padding: 12px 0 18px;52  }53  .title {54    font-size: 48px;55    font-weight: 700;56    color: #1f1f1f;57  }58  .icon-btn {59    width: 56px; height: 56px; border-radius: 28px;60    display: flex; align-items: center; justify-content: center;61  }62 63  .search-wrap { padding: 6px 0 12px; }64  .search-bar {65    height: 96px;66    border-radius: 48px;67    background: #F1F3F4;68    display: flex;69    align-items: center;70    padding: 0 26px;71    box-sizing: border-box;72    border: 1px solid #E6E8EA;73  }74  .search-bar svg { fill: #6A6D72; }75  .search-input {76    flex: 1;77    color: #6A6D72;78    font-size: 34px;79    padding: 0 20px;80  }81 82  /* Options list */83  .options { background: #fff; }84  .opt-row {85    display: flex;86    align-items: center;87    gap: 28px;88    padding: 36px 28px;89    box-sizing: border-box;90    border-top: 1px solid #E3E5E7;91  }92  .opt-row:first-of-type { border-top: 1px solid #E3E5E7; }93  .opt-text {94    font-size: 40px;95    color: #1A73E8;96  }97  .opt-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }98  .divider { height: 1px; background: #E3E5E7; margin-left: 112px; }99 100  /* Spacer before keyboard */101  .spacer {102    height: 820px; /* approximate empty area above keyboard */103    background: #ffffff;104  }105 106  /* Keyboard mock */107  .keyboard {108    position: absolute;109    bottom: 0;110    left: 0;111    width: 1080px;112    height: 900px;113    background: #121212;114    color: #e9e9e9;115    box-sizing: border-box;116    padding: 18px 22px 22px;117  }118  .kb-toolbar {119    height: 96px;120    display: flex;121    align-items: center;122    justify-content: space-between;123    padding: 0 10px;124  }125  .kb-pill {126    width: 74px; height: 74px; border-radius: 22px;127    background: #2A2A2A; display: flex; align-items: center; justify-content: center;128    color: #e9e9e9; font-size: 30px;129  }130  .kb-pill.wide { width: 110px; font-weight: 700; }131  .keys {132    margin-top: 10px;133    display: grid;134    grid-template-rows: repeat(4, 120px);135    row-gap: 16px;136  }137  .row {138    display: grid;139    column-gap: 14px;140    align-items: center;141  }142  .row.r1, .row.r2 { grid-template-columns: repeat(10, 1fr); }143  .row.r3 { grid-template-columns: 1.2fr repeat(8, 1fr) 1.2fr; }144  .row.r4 { grid-template-columns: 1.6fr 1fr 1fr 1fr 3.8fr 1fr 1.6fr; }145  .key {146    height: 100%;147    background: #2D2D2D;148    border-radius: 22px;149    display: flex;150    align-items: center;151    justify-content: center;152    font-size: 42px;153    color: #F2F2F2;154  }155  .key.dim { background: #262626; color: #CFCFCF; }156  .key.green { background: #C3F36D; color: #1a1a1a; font-weight: 700; }157  .space { text-transform: lowercase; font-size: 34px; color: #CFCFCF; }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status bar -->164  <div class="status-bar">165    <div class="status-left">166      <span class="time">6:24</span>167    </div>168    <div class="status-right">169      <span class="dot"></span>170      <span class="dot"></span>171      <span class="dot"></span>172      <span style="display:inline-flex; align-items:center; gap:8px;">173        <svg width="44" height="28" viewBox="0 0 44 28">174          <rect x="1" y="3" width="36" height="22" rx="4" fill="#fff"></rect>175          <rect x="39" y="9" width="4" height="10" rx="1" fill="#fff"></rect>176        </svg>177        <span style="font-size:28px;">100%</span>178      </span>179    </div>180  </div>181 182  <!-- Top sheet with title and search -->183  <div class="top-sheet">184    <div class="title-row">185      <div class="icon-btn">186        <svg width="44" height="44" viewBox="0 0 24 24">187          <path fill="#202124" d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3z"/>188        </svg>189      </div>190      <div class="title">Select destination</div>191    </div>192 193    <div class="search-wrap">194      <div class="search-bar">195        <svg width="44" height="44" viewBox="0 0 24 24">196          <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8L20 21.5 21.5 20 15.5 14zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>197        </svg>198        <div class="search-input">Location, landmark, or property</div>199        <svg width="40" height="40" viewBox="0 0 24 24">200          <path d="M12 2a3 3 0 00-3 3v5a3 3 0 006 0V5a3 3 0 00-3-3zm5 8a5 5 0 01-10 0H5a7 7 0 0014 0h-2z" fill="#6A6D72"/>201        </svg>202      </div>203    </div>204  </div>205 206  <!-- Options -->207  <div class="options">208    <div class="opt-row">209      <div class="opt-icon">210        <svg width="48" height="48" viewBox="0 0 24 24">211          <circle cx="12" cy="12" r="7" stroke="#5f6368" stroke-width="1.6" fill="none"/>212          <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#5f6368" stroke-width="1.6"/>213          <circle cx="12" cy="12" r="1.8" fill="#5f6368"/>214        </svg>215      </div>216      <div class="opt-text">Near me</div>217    </div>218    <div class="divider"></div>219    <div class="opt-row">220      <div class="opt-icon">221        <svg width="48" height="48" viewBox="0 0 24 24">222          <path d="M12 2a7 7 0 00-7 7c0 4.4 7 13 7 13s7-8.6 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 112.5-2.5A2.5 2.5 0 0112 11.5z" fill="#5f6368"/>223        </svg>224      </div>225      <div class="opt-text">Choose on map</div>226    </div>227    <div class="divider"></div>228  </div>229 230  <div class="spacer"></div>231 232  <!-- Keyboard mock -->233  <div class="keyboard">234    <div class="kb-toolbar">235      <div class="kb-pill">◧</div>236      <div class="kb-pill">😊</div>237      <div class="kb-pill wide">GIF</div>238      <div class="kb-pill">⚙️</div>239      <div class="kb-pill">G</div>240      <div class="kb-pill">🎨</div>241      <div class="kb-pill">🎤</div>242    </div>243 244    <div class="keys">245      <div class="row r1">246        <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>247        <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>248      </div>249      <div class="row r2">250        <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>251        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key dim">⌫</div>252      </div>253      <div class="row r3">254        <div class="key dim">⇧</div>255        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>256        <div class="key">b</div><div class="key">n</div><div class="key">m</div>257        <div class="key dim">.</div>258      </div>259      <div class="row r4">260        <div class="key green">?123</div>261        <div class="key dim">,</div>262        <div class="key dim">☺</div>263        <div class="key dim">•</div>264        <div class="key space">space</div>265        <div class="key dim">.</div>266        <div class="key green">267          <svg width="42" height="42" viewBox="0 0 24 24">268            <path d="M9.5 16.6l-3.8-3.8 1.4-1.4 2.4 2.4 7-7 1.4 1.4-8.4 8.4z" fill="#1a1a1a"/>269          </svg>270        </div>271      </div>272    </div>273  </div>274 275</div>276</body>277</html>