GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Search Screen Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: linear-gradient(180deg, #0c1d25 0%, #0b1a22 40%, #0b1a22 100%);18    color: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    padding: 0 40px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #d9e6ef;33    font-weight: 600;34    letter-spacing: 0.5px;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 20px;40    font-size: 40px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .status-icon {48    width: 42px;49    height: 42px;50    opacity: 0.9;51  }52 53  /* Search area */54  .top-search-area {55    position: absolute;56    top: 140px;57    left: 40px;58    right: 40px;59    display: flex;60    align-items: center;61    gap: 24px;62  }63  .search-box {64    flex: 1;65    height: 120px;66    background: #1c2a32;67    border: 2px solid #2a3a43;68    border-radius: 60px;69    display: flex;70    align-items: center;71    padding: 0 34px;72    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);73  }74  .search-icon {75    width: 52px;76    height: 52px;77    margin-right: 24px;78    opacity: 0.9;79  }80  .placeholder {81    font-size: 42px;82    color: #a7b6bf;83  }84  .cancel-text {85    font-size: 42px;86    color: #b6c6cf;87  }88 89  /* Center helper text */90  .helper-text {91    position: absolute;92    top: 430px;93    left: 120px;94    width: 840px;95    text-align: center;96    font-size: 48px;97    line-height: 66px;98    color: #e9f1f6;99    font-weight: 700;100    opacity: 0.95;101  }102 103  /* Keyboard */104  .keyboard {105    position: absolute;106    bottom: 0;107    left: 0;108    width: 1080px;109    height: 920px;110    background: #121718;111    border-top: 1px solid rgba(255,255,255,0.06);112    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);113  }114  .kb-toolbar {115    height: 120px;116    display: flex;117    align-items: center;118    justify-content: space-between;119    padding: 0 42px;120  }121  .tool {122    width: 90px;123    height: 90px;124    background: #1b2123;125    border: 1px solid #2b3235;126    border-radius: 22px;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #cfd8dc;131    font-size: 34px;132  }133  .mic {134    width: 96px;135    height: 96px;136    background: #1b2123;137    border: 1px solid #2b3235;138    border-radius: 50%;139    display: flex;140    align-items: center;141    justify-content: center;142  }143 144  .kb-rows {145    padding: 10px 28px 28px 28px;146    display: grid;147    gap: 22px;148  }149 150  .row {151    display: grid;152    grid-template-columns: repeat(10, 1fr);153    gap: 18px;154  }155  .row.row2 {156    grid-template-columns: 0.8fr repeat(8, 1fr) 0.8fr; /* add side spacers to center like mobile */157  }158  .key {159    height: 120px;160    background: #242b2f;161    border: 1px solid #2f363a;162    border-radius: 26px;163    color: #e6ecef;164    font-size: 48px;165    display: flex;166    align-items: center;167    justify-content: center;168    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);169  }170  .key.small {171    font-size: 44px;172  }173  .key.wide {174    grid-column: span 2;175  }176  .backspace {177    grid-column: span 2;178  }179 180  .bottom-row {181    margin-top: 6px;182    display: grid;183    grid-template-columns: 1.35fr 1fr 1fr 4.4fr 1fr 1.35fr;184    gap: 18px;185    padding: 0 28px;186    align-items: center;187  }188  .key.special {189    background: #2a3136;190    color: #d7dde0;191    font-size: 42px;192  }193  .space {194    height: 120px;195    background: #242b2f;196    border: 1px solid #2f363a;197    border-radius: 26px;198  }199  .enter {200    width: 140px;201    height: 140px;202    background: #c8f5d4;203    color: #0b1a22;204    border-radius: 70px;205    display: flex;206    align-items: center;207    justify-content: center;208    font-weight: 700;209    font-size: 44px;210    justify-self: end;211  }212  .period {213    height: 120px;214    background: #242b2f;215    border: 1px solid #2f363a;216    border-radius: 26px;217    color: #e6ecef;218    font-size: 66px;219    display: flex;220    align-items: center;221    justify-content: center;222  }223</style>224</head>225<body>226<div id="render-target">227 228  <!-- Status Bar -->229  <div class="status-bar">230    <div class="status-left">231      <div>3:44</div>232    </div>233    <div class="status-right">234      <!-- Simple wifi icon -->235      <svg class="status-icon" viewBox="0 0 24 24">236        <path fill="#e6eef4" d="M2 8c6-6 14-6 20 0l-2 2c-4.7-4.7-11.3-4.7-16 0L2 8zm4 4c3.9-3.9 10.1-3.9 14 0l-2 2c-2.8-2.8-7.2-2.8-10 0l-2-2zm5 5l3 3-3 3-3-3 3-3z"/>237      </svg>238      <!-- Battery icon -->239      <svg class="status-icon" viewBox="0 0 24 24">240        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#e6eef4" stroke-width="2"/>241        <rect x="4" y="8" width="14" height="8" fill="#e6eef4"/>242        <rect x="20" y="9" width="2" height="6" fill="#e6eef4"/>243      </svg>244    </div>245  </div>246 247  <!-- Search Bar -->248  <div class="top-search-area">249    <div class="search-box">250      <svg class="search-icon" viewBox="0 0 24 24">251        <circle cx="10" cy="10" r="7" stroke="#b7c5ce" stroke-width="2" fill="none"/>252        <line x1="15" y1="15" x2="22" y2="22" stroke="#b7c5ce" stroke-width="2"/>253      </svg>254      <div class="placeholder">Teacher, topic or duration</div>255    </div>256    <div class="cancel-text">Cancel</div>257  </div>258 259  <!-- Helper text -->260  <div class="helper-text">261    Search by title, teacher’s name<br/>or topic of choice262  </div>263 264  <!-- Keyboard -->265  <div class="keyboard">266    <div class="kb-toolbar">267      <div class="tool">🙂</div>268      <div class="tool">GIF</div>269      <div class="tool">⚙</div>270      <div class="tool">Gx</div>271      <div class="tool">🎨</div>272      <div class="mic">273        <svg width="48" height="48" viewBox="0 0 24 24">274          <rect x="9" y="4" width="6" height="10" rx="3" fill="#e6eef4"/>275          <path d="M6 11a6 6 0 0012 0" stroke="#e6eef4" stroke-width="2" fill="none"/>276          <path d="M12 17v3" stroke="#e6eef4" stroke-width="2"/>277          <path d="M8 20h8" stroke="#e6eef4" stroke-width="2"/>278        </svg>279      </div>280    </div>281 282    <div class="kb-rows">283      <div class="row">284        <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><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>285      </div>286      <div class="row row2">287        <div class="key small">a</div><div class="key small">s</div><div class="key small">d</div><div class="key small">f</div><div class="key small">g</div><div class="key small">h</div><div class="key small">j</div><div class="key small">k</div><div class="key small">l</div>288      </div>289      <div class="row">290        <div class="key wide">shift</div>291        <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><div class="key">n</div><div class="key">m</div>292        <div class="key backspace">⌫</div>293      </div>294    </div>295 296    <div class="bottom-row">297      <div class="key special">?123</div>298      <div class="key special">,</div>299      <div class="key special">🙂</div>300      <div class="space"></div>301      <div class="period">.</div>302      <div class="enter">✔</div>303    </div>304  </div>305 306</div>307</body>308</html>