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 Tasks - Dark UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0b0b0b;20    color: #fff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 110px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #f5f5f5;35    font-size: 44px;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .status-icon svg {44    width: 42px;45    height: 42px;46    fill: #eaeaea;47  }48  .battery {49    width: 70px;50    height: 34px;51    border: 3px solid #eaeaea;52    border-radius: 6px;53    position: relative;54  }55  .battery::after {56    content: "";57    position: absolute;58    right: -10px;59    top: 8px;60    width: 6px;61    height: 16px;62    background: #eaeaea;63    border-radius: 2px;64  }65  .battery .level {66    position: absolute;67    left: 3px;68    top: 3px;69    bottom: 3px;70    width: 48px;71    background: #eaeaea;72    border-radius: 2px;73  }74 75  /* Search header */76  .search-row {77    position: absolute;78    top: 130px;79    left: 36px;80    right: 36px;81    display: flex;82    align-items: center;83    gap: 24px;84  }85  .search-field {86    flex: 1;87    height: 120px;88    background: #1a1a1a;89    border-radius: 28px;90    display: flex;91    align-items: center;92    padding: 0 28px;93    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);94  }95  .search-icon {96    width: 48px;97    height: 48px;98    margin-right: 16px;99    opacity: 0.9;100  }101  .search-text {102    flex: 1;103    font-size: 44px;104    color: #f3f3f3;105  }106  .clear-icon {107    width: 48px;108    height: 48px;109    opacity: 0.7;110  }111  .cancel-btn {112    font-size: 44px;113    color: #ff8c00;114  }115 116  /* Result card */117  .card {118    position: absolute;119    top: 300px;120    left: 36px;121    right: 36px;122    background: #1c1c1c;123    border-radius: 26px;124    padding: 26px;125    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;126  }127  .card .title {128    color: #bdbdbd;129    font-size: 36px;130    margin: 6px 10px 18px 10px;131  }132  .task-row {133    display: flex;134    align-items: flex-start;135    gap: 22px;136    background: #212121;137    border-radius: 22px;138    padding: 26px;139  }140  .checkbox {141    width: 48px;142    height: 48px;143    border: 3px solid #7a7a7a;144    border-radius: 8px;145    margin-top: 6px;146  }147  .task-content {148    flex: 1;149  }150  .task-title {151    font-size: 44px;152    color: #eeeeee;153    line-height: 1.3;154  }155  .hl {156    background: #ffb300;157    color: #1a1a1a;158    padding: 2px 6px;159    border-radius: 6px;160  }161  .task-meta {162    display: flex;163    align-items: center;164    justify-content: space-between;165    margin-top: 12px;166  }167  .due {168    color: #64a9ff;169    font-size: 34px;170  }171  .folder {172    color: #9e9e9e;173    font-size: 34px;174  }175 176  /* Helper / tip text */177  .tip {178    position: absolute;179    top: 860px;180    left: 0;181    right: 0;182    text-align: center;183    color: #9e9e9e;184    font-size: 42px;185  }186  .tip .link {187    color: #ff8c00;188  }189 190  /* Keyboard suggestion bar */191  .suggestion-bar {192    position: absolute;193    left: 0;194    right: 0;195    bottom: 740px;196    height: 80px;197    background: #141414;198    display: flex;199    align-items: center;200    padding: 0 26px;201    gap: 22px;202    color: #cfcfcf;203    font-size: 36px;204  }205  .sugg-left {206    width: 64px;207    height: 64px;208    border-radius: 10px;209    background: #2a2a2a;210    display: flex;211    align-items: center;212    justify-content: center;213  }214  .sugg-spacer {215    opacity: 0.5;216  }217  .sugg-right {218    margin-left: auto;219    width: 64px;220    height: 64px;221    border-radius: 50%;222    background: #2a2a2a;223    display: flex;224    align-items: center;225    justify-content: center;226  }227 228  /* Keyboard */229  .keyboard {230    position: absolute;231    left: 0;232    right: 0;233    bottom: 64px;234    height: 660px;235    background: #191919;236    padding: 18px 18px 24px;237    box-sizing: border-box;238  }239  .key-row {240    display: flex;241    justify-content: center;242    gap: 14px;243    margin: 18px 0;244  }245  .key {246    min-width: 86px;247    height: 110px;248    background: #2a2a2a;249    border-radius: 18px;250    color: #e8e6e3;251    display: flex;252    align-items: center;253    justify-content: center;254    font-size: 44px;255    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);256  }257  .key.wide { min-width: 130px; }258  .key.shift { min-width: 160px; }259  .key.back { min-width: 160px; }260  .key.space { min-width: 530px; }261  .key.enter {262    min-width: 160px;263    background: #ffd9c4;264    color: #2b2b2b;265  }266  .key.accent {267    background: #3a3a3a;268  }269 270  /* Gesture bar */271  .gesture {272    position: absolute;273    bottom: 16px;274    left: 50%;275    transform: translateX(-50%);276    width: 280px;277    height: 10px;278    background: #e6e6e6;279    border-radius: 10px;280    opacity: 0.9;281  }282</style>283</head>284<body>285<div id="render-target">286 287  <!-- Status Bar -->288  <div class="status-bar">289    <div class="status-left">9:57</div>290    <div class="status-right">291      <div class="status-icon">292        <!-- simple alarm/bell -->293        <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2z"/></svg>294      </div>295      <div class="status-icon">296        <!-- cloud -->297        <svg viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 .5-7.98A6 6 0 0 0 6.5 7 5 5 0 0 0 6 18z"/></svg>298      </div>299      <div class="status-icon">300        <!-- wifi -->301        <svg viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6-6a10 10 0 0 1 12 0l-1.5 1.5a8 8 0 0 0-9 0L6 14zm-3-4a16 16 0 0 1 18 0l-1.6 1.6a13.5 13.5 0 0 0-14.8 0L3 10z"/></svg>302      </div>303      <div class="battery"><div class="level"></div></div>304    </div>305  </div>306 307  <!-- Search -->308  <div class="search-row">309    <div class="search-field">310      <svg class="search-icon" viewBox="0 0 24 24"><path fill="#e8e8e8" d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>311      <div class="search-text">anniversary</div>312      <svg class="clear-icon" viewBox="0 0 24 24"><path fill="#cfcfcf" d="M18 6L6 18M6 6l12 12" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/></svg>313    </div>314    <div class="cancel-btn">Cancel</div>315  </div>316 317  <!-- Result Card -->318  <div class="card">319    <div class="title">Tasks</div>320    <div class="task-row">321      <div class="checkbox"></div>322      <div class="task-content">323        <div class="task-title">Mumma's <span class="hl">anniversary</span> celebration</div>324        <div class="task-meta">325          <div class="due">11 Days Left</div>326          <div class="folder">Inbox</div>327        </div>328      </div>329    </div>330  </div>331 332  <!-- Tip text -->333  <div class="tip">334    Not found yet? <span class="link">Try Cloud Search.</span>335  </div>336 337  <!-- Suggestion bar above keyboard -->338  <div class="suggestion-bar">339    <div class="sugg-left">🏷️</div>340    <div>day</div>341    <div class="sugg-spacer">|</div>342    <div>to</div>343    <div class="sugg-spacer">|</div>344    <div>🎂</div>345    <div class="sugg-spacer">|</div>346    <div>🎉</div>347    <div class="sugg-right">🎙️</div>348  </div>349 350  <!-- Keyboard -->351  <div class="keyboard">352    <div class="key-row">353      <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>354      <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>355    </div>356    <div class="key-row" style="padding: 0 40px;">357      <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>358      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>359    </div>360    <div class="key-row">361      <div class="key shift">⇧</div>362      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>363      <div class="key">b</div><div class="key">n</div><div class="key">m</div>364      <div class="key back">⌫</div>365    </div>366    <div class="key-row">367      <div class="key wide accent">?123</div>368      <div class="key wide">,</div>369      <div class="key wide">😊</div>370      <div class="key space"></div>371      <div class="key wide">.</div>372      <div class="key enter">✓</div>373    </div>374  </div>375 376  <!-- Gesture bar -->377  <div class="gesture"></div>378</div>379</body>380</html>