GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Search - Guwahati</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #FFFFFF;14    border-radius: 18px;15    box-shadow: 0 2px 8px rgba(0,0,0,0.15);16  }17 18  /* Top app bar */19  .appbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 180px;25    background: #2F66C8;26  }27  .status {28    position: absolute;29    top: 14px;30    left: 30px;31    color: #FFFFFF;32    font-weight: 600;33    font-size: 40px;34    letter-spacing: 1px;35  }36  .status-icons {37    position: absolute;38    top: 22px;39    right: 30px;40    display: flex;41    gap: 24px;42    align-items: center;43    color: #FFFFFF;44  }45  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #FFF; stroke-width: 2.5; }46 47  /* Search Field */48  .search-field {49    position: absolute;50    top: 90px;51    left: 24px;52    width: 1032px;53    height: 110px;54    background: #FFFFFF;55    border-radius: 12px;56    box-shadow: 0 2px 0 rgba(0,0,0,0.1);57    display: flex;58    align-items: center;59    padding: 0 24px;60    gap: 20px;61  }62  .search-field .back svg { width: 46px; height: 46px; fill: none; stroke: #3E3E3E; stroke-width: 3.5; }63  .search-input {64    flex: 1;65    font-size: 48px;66    color: #1F1F1F;67  }68  .clear svg { width: 44px; height: 44px; fill: none; stroke: #777; stroke-width: 3.5; }69 70  /* List section */71  .list {72    position: absolute;73    top: 200px;74    left: 0;75    width: 1080px;76    padding-top: 40px;77    background: #FFFFFF;78  }79  .row {80    width: 1080px;81    height: 170px;82    display: flex;83    align-items: center;84    gap: 36px;85    padding: 0 30px;86    border-top: 1px solid #EEE;87  }88  .row:first-child { border-top: none; }89  .row .icon {90    width: 80px;91    height: 80px;92    display: flex;93    justify-content: center;94    align-items: center;95  }96  .row .icon svg { width: 64px; height: 64px; fill: none; stroke: #808080; stroke-width: 3; }97  .row .text {98    flex: 1;99    font-size: 50px;100    color: #333;101  }102  .row .label {103    font-size: 40px;104    color: #9E9E9E;105  }106 107  /* Suggestion above keyboard */108  .suggestion-bar {109    position: absolute;110    bottom: 950px;111    left: 0;112    width: 1080px;113    height: 90px;114    display: flex;115    justify-content: center;116    align-items: center;117    font-size: 46px;118    color: #FFFFFF;119  }120  .suggestion-pill {121    background: #333;122    color: #FFFFFF;123    padding: 8px 24px;124    border-radius: 28px;125  }126 127  /* Keyboard */128  .keyboard {129    position: absolute;130    bottom: 0;131    left: 0;132    width: 1080px;133    height: 920px;134    background: #121212;135    border-top-left-radius: 26px;136    border-top-right-radius: 26px;137    box-shadow: 0 -3px 10px rgba(0,0,0,0.3);138    padding: 40px 30px;139  }140  .keys-row {141    display: grid;142    grid-template-columns: repeat(10, 1fr);143    gap: 22px;144    margin-bottom: 50px;145  }146  .key {147    background: #1E1E1E;148    border-radius: 20px;149    height: 120px;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #EDEDED;154    font-size: 56px;155    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);156  }157  .key.small { font-size: 50px; }158  .bottom-row {159    display: grid;160    grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 1.6fr;161    gap: 22px;162  }163  .action-left {164    background: #BFD8B3;165    color: #1C1C1C;166  }167  .action-right {168    background: #C7F2C4;169    color: #1C1C1C;170    font-weight: 700;171  }172  .space {173    grid-column: span 5;174    background: #1E1E1E;175  }176  .microphone {177    position: absolute;178    right: 40px;179    bottom: 980px;180    width: 80px;181    height: 80px;182    background: #1E1E1E;183    border-radius: 40px;184    display: flex;185    align-items: center;186    justify-content: center;187  }188  .microphone svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 3; }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- App bar -->195  <div class="appbar">196    <div class="status">11:22</div>197    <div class="status-icons">198      <!-- wifi -->199      <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M9 16c2-1 4-1 6 0M12 19l0 0"/></svg>200      <!-- signal -->201      <svg viewBox="0 0 24 24"><path d="M4 20h3M9 16h3M14 12h3M19 8h3" /></svg>202      <!-- battery -->203      <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" /><rect x="23" y="9" width="3" height="6" rx="1"/></svg>204    </div>205 206    <!-- Search field -->207    <div class="search-field">208      <div class="back">209        <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>210      </div>211      <div class="search-input">Guwahati</div>212      <div class="clear">213        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5l-14 14"/></svg>214      </div>215    </div>216  </div>217 218  <!-- Results list -->219  <div class="list">220    <div class="row">221      <div class="icon">222        <!-- Location pin -->223        <svg viewBox="0 0 24 24">224          <path d="M12 21c-5-6-7-9-7-12a7 7 0 1114 0c0 3-2 6-7 12z"/>225          <circle cx="12" cy="9" r="3"></circle>226        </svg>227      </div>228      <div class="text">Guwahati</div>229      <div class="label">City</div>230    </div>231 232    <div class="row">233      <div class="icon">234        <!-- Train icon (simple) -->235        <svg viewBox="0 0 24 24">236          <rect x="5" y="4" width="14" height="10" rx="2"></rect>237          <circle cx="9" cy="16" r="2"></circle>238          <circle cx="15" cy="16" r="2"></circle>239          <path d="M7 20l3-2h4l3 2"></path>240        </svg>241      </div>242      <div class="text">GHY | Guwahati</div>243      <div class="label">Station</div>244    </div>245 246    <div class="row">247      <div class="icon">248        <!-- Train icon -->249        <svg viewBox="0 0 24 24">250          <rect x="5" y="4" width="14" height="10" rx="2"></rect>251          <circle cx="9" cy="16" r="2"></circle>252          <circle cx="15" cy="16" r="2"></circle>253          <path d="M7 20l3-2h4l3 2"></path>254        </svg>255      </div>256      <div class="text">NGC | New Guwahati</div>257      <div class="label">Station</div>258    </div>259  </div>260 261  <!-- Mic near suggestion -->262  <div class="microphone">263    <svg viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3"></rect><path d="M12 15v3M7 11c0 3 2 5 5 5s5-2 5-5"/></svg>264  </div>265 266  <!-- Suggestion above keyboard -->267  <div class="suggestion-bar">268    <div class="suggestion-pill">Guwahati</div>269  </div>270 271  <!-- Keyboard -->272  <div class="keyboard">273 274    <div class="keys-row">275      <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>276      <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>277    </div>278 279    <div class="keys-row">280      <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>281      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>282    </div>283 284    <div class="keys-row">285      <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>286      <div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div><div class="key">✓</div>287    </div>288 289    <div class="bottom-row">290      <div class="key action-left small">?123</div>291      <div class="key small">◀</div>292      <div class="key small">😀</div>293      <div class="key space"></div>294      <div class="key small">.</div>295      <div class="key action-right small">✓</div>296    </div>297  </div>298 299</div>300</body>301</html>