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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #111;25    font-weight: 600;26    font-size: 36px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .icon {34    width: 36px;35    height: 36px;36  }37 38  /* Header with search */39  .header {40    padding: 18px 24px 12px 24px;41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .back-btn {46    width: 64px;47    height: 64px;48    display: flex;49    align-items: center;50    justify-content: center;51  }52  .search-bar {53    flex: 1;54    height: 92px;55    background: #F7F7F7;56    border: 1px solid #E3E3E3;57    border-radius: 46px;58    display: flex;59    align-items: center;60    padding: 0 20px;61    box-sizing: border-box;62  }63  .search-text {64    flex: 1;65    color: #111;66    font-size: 34px;67  }68  .clear-btn {69    width: 56px;70    height: 56px;71    border-radius: 28px;72    background: #EEEEEE;73    border: 1px solid #DDDDDD;74    display: flex;75    align-items: center;76    justify-content: center;77    margin-right: 8px;78  }79  .search-action {80    color: #1A73E8;81    font-size: 36px;82    font-weight: 700;83    padding: 0 18px;84  }85 86  /* Content */87  .content {88    padding: 16px 32px;89  }90  .results-title {91    color: #000;92    font-size: 40px;93    font-weight: 600;94    margin: 12px 8px 16px 8px;95  }96  .result-item {97    display: flex;98    align-items: center;99    padding: 28px 8px;100    border-bottom: 1px solid #F0F0F0;101  }102  .pdf-icon {103    width: 96px;104    height: 96px;105    border-radius: 22px;106    background: #F57C85;107    display: flex;108    align-items: center;109    justify-content: center;110    margin-right: 24px;111  }112  .pdf-icon svg { width: 56px; height: 56px; }113  .file-info {114    flex: 1;115  }116  .file-name {117    color: #1A73E8;118    font-size: 40px;119    font-weight: 700;120    line-height: 1.2;121    margin-bottom: 8px;122  }123  .file-meta {124    color: #737373;125    font-size: 30px;126  }127  .select-circle {128    width: 50px;129    height: 50px;130    border: 3px solid #D8D8D8;131    border-radius: 50%;132    margin-left: 18px;133  }134 135  /* Keyboard overlay */136  .keyboard {137    position: absolute;138    bottom: 46px;139    left: 0;140    width: 100%;141    height: 900px;142    background: #141414;143    color: #fff;144    box-sizing: border-box;145    padding: 22px 22px 26px 22px;146  }147  .kb-top {148    display: flex;149    align-items: center;150    gap: 26px;151    margin-bottom: 16px;152  }153  .kb-top .kb-icon {154    width: 72px;155    height: 72px;156    border-radius: 18px;157    background: #1E1E1E;158    border: 1px solid #2A2A2A;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #CFCFCF;163    font-size: 28px;164  }165  .keys {166    display: grid;167    grid-template-columns: repeat(10, 1fr);168    gap: 16px;169    margin-top: 14px;170  }171  .key {172    height: 100px;173    background: #1E1E1E;174    border: 1px solid #2A2A2A;175    border-radius: 18px;176    display: flex;177    align-items: center;178    justify-content: center;179    font-size: 40px;180    color: #ffffff;181  }182  .row2 { grid-template-columns: repeat(9, 1fr); margin-top: 16px; }183  .row3 { grid-template-columns: 1.4fr repeat(7, 1fr) 1.4fr; margin-top: 16px; }184  .bottom-row {185    display: grid;186    grid-template-columns: 1.3fr 1fr 1fr 5fr 1fr 1.5fr;187    gap: 16px;188    margin-top: 20px;189    align-items: center;190  }191  .key.alt { background: #2A2A2A; color: #E7E7E7; }192  .key.search {193    background: #E9F5A0;194    color: #111;195    border-color: #DDE68F;196    border-radius: 36px;197    height: 96px;198    display: flex;199    gap: 10px;200    font-weight: 700;201  }202  .space { background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 18px; height: 96px; }203 204  /* Bottom navigation handle */205  .home-handle {206    position: absolute;207    bottom: 10px;208    left: 50%;209    transform: translateX(-50%);210    width: 300px;211    height: 12px;212    background: #EDEDED;213    border-radius: 8px;214  }215</style>216</head>217<body>218<div id="render-target">219  <!-- Status bar -->220  <div class="status-bar">221    <div>10:50</div>222    <div class="status-icons">223      <!-- Silent / DND -->224      <svg class="icon" viewBox="0 0 24 24">225        <circle cx="12" cy="12" r="10" fill="#888"></circle>226        <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>227      </svg>228      <!-- Wi-Fi -->229      <svg class="icon" viewBox="0 0 24 24">230        <path d="M2 9c5-5 15-5 20 0" stroke="#444" stroke-width="2" fill="none"/>231        <path d="M6 13c3-3 9-3 12 0" stroke="#444" stroke-width="2" fill="none"/>232        <circle cx="12" cy="17" r="2" fill="#444"/>233      </svg>234      <!-- Battery -->235      <svg class="icon" viewBox="0 0 28 24">236        <rect x="2" y="6" width="20" height="12" rx="2" fill="#444"></rect>237        <rect x="4" y="8" width="14" height="8" rx="1" fill="#9ED06D"></rect>238        <rect x="22" y="9" width="4" height="6" rx="1" fill="#444"></rect>239      </svg>240    </div>241  </div>242 243  <!-- Header with search bar -->244  <div class="header">245    <div class="back-btn">246      <svg width="44" height="44" viewBox="0 0 24 24">247        <path d="M15 4L7 12l8 8" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>248      </svg>249    </div>250    <div class="search-bar">251      <div class="search-text">report.pdf</div>252      <div class="clear-btn">253        <svg width="22" height="22" viewBox="0 0 24 24">254          <path d="M5 5l14 14M19 5L5 19" stroke="#777" stroke-width="2" stroke-linecap="round"/>255        </svg>256      </div>257    </div>258    <div class="search-action">Search</div>259  </div>260 261  <!-- Content area -->262  <div class="content">263    <div class="results-title">Search results (1)</div>264    <div class="result-item">265      <div class="pdf-icon">266        <!-- Simple Acrobat-esque glyph -->267        <svg viewBox="0 0 24 24">268          <path d="M6 18c6-6 6-12 3-13m0 0c6 3 8 7 9 12" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>269        </svg>270      </div>271      <div class="file-info">272        <div class="file-name">Report.pdf</div>273        <div class="file-meta">21.53KB  Location: TeraBox</div>274      </div>275      <div class="select-circle"></div>276    </div>277  </div>278 279  <!-- Keyboard overlay -->280  <div class="keyboard">281    <div class="kb-top">282      <div class="kb-icon">⌨️</div>283      <div class="kb-icon">🙂</div>284      <div class="kb-icon">GIF</div>285      <div class="kb-icon">⚙️</div>286      <div class="kb-icon">G↔︎</div>287      <div class="kb-icon">🎨</div>288      <div class="kb-icon">🎤</div>289    </div>290 291    <!-- Row 1 -->292    <div class="keys">293      <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>294      <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>295    </div>296 297    <!-- Row 2 -->298    <div class="keys row2">299      <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>300      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>301    </div>302 303    <!-- Row 3 -->304    <div class="keys row3">305      <div class="key alt">⇧</div>306      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>307      <div class="key">b</div><div class="key">n</div><div class="key">m</div>308      <div class="key alt">⌫</div>309    </div>310 311    <!-- Bottom row -->312    <div class="bottom-row">313      <div class="key alt">?123</div>314      <div class="key alt">,</div>315      <div class="key alt">😊</div>316      <div class="space"></div>317      <div class="key alt">.</div>318      <div class="key search">319        <svg width="34" height="34" viewBox="0 0 24 24">320          <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"></circle>321          <path d="M16 16l6 6" stroke="#333" stroke-width="2" stroke-linecap="round"></path>322        </svg>323        Search324      </div>325    </div>326  </div>327 328  <div class="home-handle"></div>329</div>330</body>331</html>