GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search - Guwahati</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Top blue app bar */17  .app-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 180px;23    background: #2962FF;24    color: #FFFFFF;25  }26  .status-row {27    height: 72px;28    display: flex;29    align-items: center;30    padding: 0 32px;31    font-weight: 600;32    font-size: 36px;33    letter-spacing: 0.5px;34  }35  .status-row .spacer { flex: 1; }36  .icon-wifi, .icon-battery {37    width: 48px; height: 28px; margin-left: 20px;38  }39  .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; }40 41  /* Search field */42  .search-wrap {43    position: absolute;44    top: 180px;45    left: 0;46    width: 1080px;47    background: #FFFFFF;48    box-shadow: 0 1px 0 rgba(0,0,0,0.15);49  }50  .search-field {51    display: flex;52    align-items: center;53    padding: 28px 32px;54    font-size: 46px;55    color: #1F1F1F;56  }57  .back-btn, .close-btn {58    width: 72px; height: 72px;59    display: flex; align-items: center; justify-content: center;60    color: #616161;61  }62  .back-btn svg, .close-btn svg { width: 56px; height: 56px; }63  .search-text { flex: 1; padding-left: 12px; }64 65  /* Results list */66  .results {67    position: absolute;68    top: 300px;69    left: 0;70    width: 1080px;71    background: #FFFFFF;72  }73  .item {74    display: flex;75    align-items: center;76    padding: 36px 32px;77    border-bottom: 1px solid #EEEEEE;78  }79  .item .lead-icon {80    width: 72px; height: 72px; margin-right: 28px; color: #757575;81  }82  .item .lead-icon svg { width: 100%; height: 100%; }83  .item .title {84    font-size: 48px; color: #222; flex: 1;85  }86  .item .meta {87    font-size: 40px; color: #9E9E9E;88  }89 90  /* Empty space filler below list */91  .content-space {92    position: absolute;93    top: 660px;94    left: 0;95    right: 0;96    bottom: 960px; /* leaves space for keyboard */97    background: #FFFFFF;98  }99 100  /* Keyboard mock */101  .keyboard {102    position: absolute;103    bottom: 0;104    left: 0;105    width: 1080px;106    height: 960px;107    background: #121212;108    color: #EDEDED;109    border-top-left-radius: 24px;110    border-top-right-radius: 24px;111  }112  .kb-header {113    height: 80px;114    display: flex;115    align-items: center;116    justify-content: center;117    font-size: 44px;118    color: #EDEDED;119  }120  .kb-rows {121    padding: 24px 24px 0;122  }123  .kb-row {124    display: grid;125    grid-template-columns: repeat(10, 1fr);126    gap: 18px;127    margin-bottom: 26px;128  }129  .kb-key {130    background: #1E1E1E;131    border-radius: 22px;132    height: 110px;133    display: flex;134    align-items: center;135    justify-content: center;136    font-size: 46px;137    color: #FAFAFA;138  }139  .kb-row.short { grid-template-columns: repeat(9, 1fr); }140  .kb-bottom {141    display: grid;142    grid-template-columns: 1.3fr 1fr 3fr 1fr 1.3fr;143    gap: 18px;144    padding: 0 24px;145    align-items: center;146  }147  .kb-key.alt { background: #2A2A2A; color: #DADADA; }148  .kb-enter { background: #C8F7C2; color: #1A1A1A; }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Blue app bar with status icons -->155  <div class="app-bar">156    <div class="status-row">157      11:22158      <span class="spacer"></span>159      <!-- small icons between time and right side (mock dots) -->160      <span style="font-size:28px; margin-right: 14px;">• •</span>161      <div class="icon-wifi">162        <svg viewBox="0 0 24 24" fill="none">163          <path d="M2 8c5-4 15-4 20 0" stroke="white" stroke-width="2" stroke-linecap="round"/>164          <path d="M5 11c4-3 10-3 14 0" stroke="white" stroke-width="2" stroke-linecap="round"/>165          <path d="M8 14c3-2 5-2 8 0" stroke="white" stroke-width="2" stroke-linecap="round"/>166          <circle cx="12" cy="18" r="2" fill="white"/>167        </svg>168      </div>169      <div class="icon-battery">170        <svg viewBox="0 0 28 16" fill="none">171          <rect x="1" y="2" width="22" height="12" rx="2" stroke="white" stroke-width="2"/>172          <rect x="3" y="4" width="16" height="8" rx="1" fill="white"/>173          <rect x="24" y="5" width="3" height="6" rx="1" fill="white"/>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Search bar -->180  <div class="search-wrap">181    <div class="search-field">182      <div class="back-btn">183        <svg viewBox="0 0 24 24" fill="none">184          <path d="M15 18L9 12l6-6" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>185        </svg>186      </div>187      <div class="search-text">Guwahati</div>188      <div class="close-btn">189        <svg viewBox="0 0 24 24" fill="none">190          <path d="M6 6l12 12M18 6L6 18" stroke="#757575" stroke-width="2" stroke-linecap="round"/>191        </svg>192      </div>193    </div>194  </div>195 196  <!-- Results list -->197  <div class="results">198    <div class="item">199      <div class="lead-icon">200        <svg viewBox="0 0 24 24" fill="none">201          <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11z" stroke="#616161" stroke-width="2" />202          <circle cx="12" cy="10" r="3" stroke="#616161" stroke-width="2"/>203        </svg>204      </div>205      <div class="title">Guwahati</div>206      <div class="meta">City</div>207    </div>208 209    <div class="item">210      <div class="lead-icon">211        <svg viewBox="0 0 24 24" fill="none">212          <rect x="3" y="9" width="18" height="8" rx="2" stroke="#616161" stroke-width="2"/>213          <circle cx="7" cy="19" r="2" fill="#616161"/>214          <circle cx="17" cy="19" r="2" fill="#616161"/>215          <path d="M3 9l3-4h12l3 4" stroke="#616161" stroke-width="2" stroke-linecap="round"/>216        </svg>217      </div>218      <div class="title">GHY | Guwahati</div>219      <div class="meta">Station</div>220    </div>221 222    <div class="item">223      <div class="lead-icon">224        <svg viewBox="0 0 24 24" fill="none">225          <rect x="3" y="9" width="18" height="8" rx="2" stroke="#616161" stroke-width="2"/>226          <circle cx="7" cy="19" r="2" fill="#616161"/>227          <circle cx="17" cy="19" r="2" fill="#616161"/>228          <path d="M3 9l3-4h12l3 4" stroke="#616161" stroke-width="2" stroke-linecap="round"/>229        </svg>230      </div>231      <div class="title">NGC | New Guwahati</div>232      <div class="meta">Station</div>233    </div>234  </div>235 236  <div class="content-space"></div>237 238  <!-- Keyboard mock -->239  <div class="keyboard">240    <div class="kb-header">Guwahati</div>241    <div class="kb-rows">242      <div class="kb-row">243        <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div><div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>244      </div>245      <div class="kb-row">246        <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div><div class="kb-key">g</div><div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div><div class="kb-key">l</div><div class="kb-key alt">⌫</div>247      </div>248      <div class="kb-row short">249        <div class="kb-key alt">⇪</div><div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div><div class="kb-key">b</div><div class="kb-key">n</div><div class="kb-key">m</div><div class="kb-key">.</div>250      </div>251    </div>252    <div class="kb-bottom">253      <div class="kb-key alt">?123</div>254      <div class="kb-key alt">,</div>255      <div class="kb-key">space</div>256      <div class="kb-key alt">•</div>257      <div class="kb-key kb-enter">✓</div>258    </div>259  </div>260 261</div>262</body>263</html>