GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Search for City/Station UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10    border-radius:24px; box-shadow:0 4px 20px rgba(0,0,0,0.2);11  }12 13  /* Top blue bar */14  .blue-bar {15    position:absolute; top:0; left:0; width:100%; height:220px;16    background:#2767d6;17    color:#fff;18  }19  .status-row {20    height:88px; display:flex; align-items:center; padding:0 32px;21    font-weight:600; font-size:34px;22  }23  .status-icons { margin-left:auto; display:flex; align-items:center; gap:22px; }24  .status-dot { width:18px; height:18px; border-radius:50%; background:#fff; opacity:.9; }25  .wifi-icon, .battery-icon { width:44px; height:28px; }26  .wifi-icon svg, .battery-icon svg { width:100%; height:100%; fill:#fff; }27  .appbar {28    height:132px; display:flex; align-items:center; padding:0 30px; gap:24px;29  }30  .back-icon { width:64px; height:64px; }31  .back-icon svg { width:100%; height:100%; fill:#fff; }32  .title { font-size:46px; font-weight:700; }33 34  /* Content area */35  .content {36    position:absolute; top:220px; left:0; right:0; bottom:900px; /* leave room for keyboard */37    padding:40px 30px 0 30px;38    overflow:hidden;39  }40  .section-title {41    color:#7a7a7a; font-size:34px; margin-bottom:26px;42  }43  .list {44    background:#fff; border-radius:12px;45  }46  .row {47    display:flex; align-items:center; padding:28px 16px 28px 6px;48    border-bottom:1px solid #e6e6e6; font-size:42px; color:#222;49  }50  .row:last-child { border-bottom:none; }51  .history-icon {52    width:64px; height:64px; margin:0 26px;53  }54  .history-icon svg { width:100%; height:100%; fill:#6b6b6b; }55 56  /* Keyboard */57  #keyboard {58    position:absolute; bottom:0; left:0; width:100%; height:900px;59    background:#121212; color:#fff; border-top:1px solid #1f1f1f;60    padding-top:22px;61  }62  .kb-topbar {63    display:flex; align-items:center; justify-content:space-between;64    padding:0 32px; height:120px;65  }66  .kb-top-icons { display:flex; gap:44px; }67  .kb-icon {68    width:60px; height:60px; border-radius:14px; background:#1d1d1d;69    border:1px solid #2b2b2b;70  }71 72  .keys-row { display:flex; gap:20px; padding:20px 28px; }73  .key {74    height:120px; flex:1;75    background:#1f1f1f; border-radius:18px; border:1px solid #2b2b2b;76    display:flex; align-items:center; justify-content:center;77    font-size:46px; color:#dcdcdc;78  }79  .key.small { flex:0 0 90px; }80  .key.medium { flex:0 0 120px; }81  .key.large { flex:1 0 280px; }82  .key.wide { flex:1 0 380px; }83  .enter-btn {84    position:absolute; right:30px; bottom:40px;85    width:150px; height:150px; background:#baf2c2; color:#133d20;86    border-radius:999px; display:flex; align-items:center; justify-content:center;87    font-size:62px; font-weight:700; border:2px solid #8fd7a0;88  }89 90  /* Divider lines between sections */91  .divider { height:1px; background:#ececec; margin:8px 0 24px; }92 93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Top bar -->99  <div class="blue-bar">100    <div class="status-row">101      11:22102      <div class="status-icons">103        <div class="status-dot"></div>104        <div class="wifi-icon">105          <svg viewBox="0 0 24 24">106            <path d="M12 18.5c1.2 0 2.2.9 2.2 2.1S13.2 22.7 12 22.7s-2.2-.9-2.2-2.1 1-2.1 2.2-2.1zm-6.6-6c4.1-2.7 8.7-2.7 12.8 0l1.6-2.2C14.8 7.1 9.2 7.1 4.6 10.3l.8 2.2zm3.7 3.2c2.6-1.9 5.8-1.9 8.4 0l1.5-2c-3.6-2.6-7.8-2.6-11.4 0l1.5 2z"/>107          </svg>108        </div>109        <div class="battery-icon">110          <svg viewBox="0 0 24 24">111            <path d="M18 6h1v3h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1h-1v3h-1V6zM3 7.5C3 6.7 3.7 6 4.5 6h11c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5h-11C3.7 18 3 17.3 3 16.5v-9zm2 1.5v6h10V9H5z"/>112          </svg>113        </div>114      </div>115    </div>116    <div class="appbar">117      <div class="back-icon">118        <svg viewBox="0 0 24 24">119          <path d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5-1.5 1.5z"/>120        </svg>121      </div>122      <div class="title">Search for City/Station</div>123    </div>124  </div>125 126  <!-- Content -->127  <div class="content">128    <div class="section-title">Recent City Searches</div>129    <div class="list">130      <div class="row">131        <div class="history-icon">132          <svg viewBox="0 0 24 24">133            <path d="M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7v2l4-3-4-3v2zM11 7h2v6h-2V7zm5.5 6H12v2h6v-2h-1.5z"/>134          </svg>135        </div>136        <div>Manali</div>137      </div>138    </div>139 140    <div class="divider"></div>141 142    <div class="section-title">Recent Station Searches</div>143    <div class="list">144      <div class="row">145        <div class="history-icon">146          <svg viewBox="0 0 24 24">147            <path d="M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7v2l4-3-4-3v2zM11 7h2v6h-2V7zm5.5 6H12v2h6v-2h-1.5z"/>148          </svg>149        </div>150        <div>NDLS | New Delhi</div>151      </div>152      <div class="row">153        <div class="history-icon">154          <svg viewBox="0 0 24 24">155            <path d="M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7v2l4-3-4-3v2zM11 7h2v6h-2V7zm5.5 6H12v2h6v-2h-1.5z"/>156          </svg>157        </div>158        <div>GHY | Guwahati</div>159      </div>160    </div>161  </div>162 163  <!-- Keyboard -->164  <div id="keyboard">165    <div class="kb-topbar">166      <div class="kb-top-icons">167        <div class="kb-icon"></div>168        <div class="kb-icon"></div>169        <div class="kb-icon"></div>170      </div>171      <div class="kb-top-icons">172        <div class="kb-icon"></div>173        <div class="kb-icon"></div>174        <div class="kb-icon"></div>175      </div>176    </div>177 178    <!-- Row 1 -->179    <div class="keys-row">180      <div class="key">q</div>181      <div class="key">w</div>182      <div class="key">e</div>183      <div class="key">r</div>184      <div class="key">t</div>185      <div class="key">y</div>186      <div class="key">u</div>187      <div class="key">i</div>188      <div class="key">o</div>189      <div class="key">p</div>190    </div>191 192    <!-- Row 2 -->193    <div class="keys-row">194      <div class="key">a</div>195      <div class="key">s</div>196      <div class="key">d</div>197      <div class="key">f</div>198      <div class="key">g</div>199      <div class="key">h</div>200      <div class="key">j</div>201      <div class="key">k</div>202      <div class="key">l</div>203    </div>204 205    <!-- Row 3 -->206    <div class="keys-row">207      <div class="key medium">⇧</div>208      <div class="key">z</div>209      <div class="key">x</div>210      <div class="key">c</div>211      <div class="key">v</div>212      <div class="key">b</div>213      <div class="key">n</div>214      <div class="key">m</div>215      <div class="key medium">⌫</div>216    </div>217 218    <!-- Row 4 -->219    <div class="keys-row">220      <div class="key wide">?123</div>221      <div class="key medium">,</div>222      <div class="key large">😀</div>223      <div class="key wide">space</div>224      <div class="key medium">.</div>225    </div>226 227    <div class="enter-btn">✓</div>228  </div>229 230</div>231</body>232</html>