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>Search Screen Mock</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: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #2c2c2c;17  }18  .status-bar {19    height: 100px;20    background: #0A0A0A;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-weight: 600;26    letter-spacing: 0.3px;27    font-size: 36px;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 30px; }31  .content {32    position: absolute;33    top: 100px;34    left: 0;35    right: 0;36    bottom: 820px; /* space for keyboard */37    overflow: hidden;38    background: #fff;39  }40  .search-header {41    position: relative;42    padding: 28px 36px 22px 36px;43  }44  .search-row {45    display: flex;46    align-items: center;47    gap: 26px;48  }49  .search-text {50    font-size: 44px;51    color: #616161;52    font-weight: 500;53  }54  .underline {55    position: absolute;56    left: 220px; /* start after icons */57    right: 36px;58    height: 6px;59    background: #22C3CF;60    bottom: 10px;61    border-radius: 3px;62  }63  .list {64    padding: 16px 36px 0 36px;65    overflow-y: auto;66    height: calc(100% - 120px);67  }68  .item {69    display: flex;70    align-items: center;71    gap: 26px;72    padding: 24px 0;73  }74  .item .label {75    font-size: 42px;76    color: #222;77  }78  .item .sub {79    font-size: 32px;80    color: #95A0A8;81    margin-top: 10px;82  }83  .section-title {84    margin-top: 18px;85    font-size: 32px;86    color: #A8B0B7;87    font-weight: 800;88    letter-spacing: 2px;89  }90  .icon-circle {91    width: 86px;92    height: 86px;93    min-width: 86px;94    border-radius: 50%;95    background: #12C4CD;96    display: flex;97    align-items: center;98    justify-content: center;99  }100  /* Powered by Google */101  .powered {102    position: absolute;103    right: 36px;104    bottom: 840px;105    font-size: 30px;106    color: #8a8a8a;107    display: flex;108    align-items: baseline;109    gap: 10px;110  }111  .google {112    display: inline-flex;113    gap: 3px;114    font-weight: 700;115    letter-spacing: 0.3px;116  }117  .g-b { color: #4285F4; }118  .g-r { color: #DB4437; }119  .g-y { color: #F4B400; }120  .g-g { color: #0F9D58; }121 122  /* Keyboard mock */123  .keyboard {124    position: absolute;125    left: 0;126    right: 0;127    bottom: 0;128    height: 820px;129    background: #11171B;130    border-top-left-radius: 18px;131    border-top-right-radius: 18px;132    padding: 24px 22px;133    box-sizing: border-box;134  }135  .kb-top {136    display: flex;137    gap: 28px;138    margin-bottom: 18px;139  }140  .kb-pill {141    width: 120px;142    height: 88px;143    background: #1E262B;144    border-radius: 18px;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #D6E1E5;149    font-size: 30px;150  }151  .kb-keys {152    display: grid;153    grid-template-columns: repeat(10, 1fr);154    gap: 16px;155  }156  .key {157    height: 108px;158    background: #222C31;159    border-radius: 18px;160    color: #D7E3E7;161    display: flex;162    align-items: center;163    justify-content: center;164    font-size: 44px;165    text-transform: lowercase;166  }167  .kb-row { margin-top: 14px; }168  .key.wide { grid-column: span 2; }169  .key.wider { grid-column: span: 3; }170  .kb-footer {171    margin-top: 20px;172    display: grid;173    grid-template-columns: 1.2fr 6fr 1.2fr 1fr;174    gap: 16px;175  }176  .enter {177    background: #6FE4C3;178    color: #0B2A26;179    font-weight: 700;180  }181 182  /* Small helpers for icons */183  svg { display: block; }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>12:40</div>193      <!-- simple alert triangle -->194      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" opacity="0.9">195        <path d="M1 20h22L12 2 1 20zm12-3h-2v2h2v-2zm0-6h-2v5h2V11z"/>196      </svg>197    </div>198    <div class="status-right">199      <!-- wifi -->200      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">201        <path d="M12 20.5l3.5-3.5h-7zM2 8.82l2.82 2.82C7.06 9.4 9.39 8.5 12 8.5s4.94.9 7.18 3.14L22 8.82C19.03 5.85 15.66 4.5 12 4.5S4.97 5.85 2 8.82z"/>202      </svg>203      <!-- battery -->204      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff">205        <path d="M16 7H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm6 3h-1V14h1v-4z"/>206      </svg>207      <div style="font-size:32px;">100%</div>208    </div>209  </div>210 211  <div class="content">212    <!-- Search Header -->213    <div class="search-header">214      <div class="search-row">215        <!-- Back arrow -->216        <svg width="54" height="54" viewBox="0 0 24 24" fill="#6A6A6A">217          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>218        </svg>219        <!-- Search icon -->220        <svg width="54" height="54" viewBox="0 0 24 24" fill="#6A6A6A">221          <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 119.5 5a4.5 4.5 0 010 9z"/>222        </svg>223        <div class="search-text">Address, City or Landmark</div>224      </div>225      <div class="underline"></div>226    </div>227 228    <!-- List -->229    <div class="list">230      <div class="item">231        <div class="icon-circle">232          <!-- target icon -->233          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">234            <path d="M13 3h-2v3.06A6.985 6.985 0 006.06 11H3v2h3.06A6.985 6.985 0 0011 17.94V21h2v-3.06A6.985 6.985 0 0017.94 13H21v-2h-3.06A6.985 6.985 0 0013 6.06V3zM12 8a4 4 0 100 8 4 4 0 000-8z"/>235          </svg>236        </div>237        <div class="label">Current Location</div>238      </div>239 240      <div class="section-title">RECENT LOCATIONS</div>241 242      <div class="item">243        <div class="icon-circle">244          <!-- clock/history icon -->245          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">246            <path d="M13 3a9 9 0 109 9h-2a7 7 0 11-7-7V3l-4 3 4 3V7a5 5 0 105 5h-2a3 3 0 11-3-3v4h2V9.9A4.99 4.99 0 0013 8z"/>247          </svg>248        </div>249        <div class="label">Ulm</div>250      </div>251 252      <div class="item">253        <div class="icon-circle">254          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">255            <path d="M13 3a9 9 0 109 9h-2a7 7 0 11-7-7V3l-4 3 4 3V7a5 5 0 105 5h-2a3 3 0 11-3-3v4h2V9.9A4.99 4.99 0 0013 8z"/>256          </svg>257        </div>258        <div class="label">Berlin</div>259      </div>260 261      <div class="section-title">RECENT HISTORY</div>262 263      <div class="item" style="align-items:flex-start;">264        <div class="icon-circle" style="margin-top:6px;">265          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">266            <path d="M13 3a9 9 0 109 9h-2a7 7 0 11-7-7V3l-4 3 4 3V7a5 5 0 105 5h-2a3 3 0 11-3-3v4h2V9.9A4.99 4.99 0 0013 8z"/>267          </svg>268        </div>269        <div>270          <div class="label">Ulm ➔ Berlin</div>271          <div class="sub">Nov 5</div>272        </div>273      </div>274    </div>275 276    <div class="powered">277      <div>powered by</div>278      <div class="google">279        <span class="g-b">G</span><span class="g-r">o</span><span class="g-y">o</span><span class="g-b">g</span><span class="g-g">l</span><span class="g-r">e</span>280      </div>281    </div>282  </div>283 284  <!-- Keyboard Mock -->285  <div class="keyboard">286    <div class="kb-top">287      <div class="kb-pill">⌨</div>288      <div class="kb-pill">😊</div>289      <div class="kb-pill">GIF</div>290      <div class="kb-pill">⚙</div>291      <div class="kb-pill">G✱</div>292      <div class="kb-pill">🎨</div>293      <div class="kb-pill" style="margin-left:auto;">🎙</div>294    </div>295 296    <!-- Keys rows -->297    <div class="kb-keys">298      <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>299      <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>300    </div>301    <div class="kb-keys kb-row" style="grid-template-columns: repeat(9, 1fr);">302      <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>303      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>304    </div>305    <div class="kb-keys kb-row" style="grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr;">306      <div class="key">⇧</div>307      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>308      <div class="key">b</div><div class="key">n</div><div class="key">m</div>309      <div class="key">⌫</div>310    </div>311 312    <div class="kb-footer">313      <div class="key">?123</div>314      <div class="key">space</div>315      <div class="key">.</div>316      <div class="key enter">✓</div>317    </div>318  </div>319 320</div>321</body>322</html>