GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Upcoming Events UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #111317;19    color: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    height: 120px;25    padding: 24px 32px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EAEAEA;30    font-size: 40px;31    letter-spacing: 0.5px;32  }33  .status-left {34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .dot {44    width: 12px;45    height: 12px;46    background: #D8D8D8;47    border-radius: 50%;48    display: inline-block;49  }50 51  /* Top search header */52  .top-bar {53    display: flex;54    align-items: center;55    gap: 20px;56    padding: 12px 24px;57  }58  .back-btn {59    width: 72px;60    height: 72px;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  .search-container {66    flex: 1;67    height: 110px;68    background: #2A2D33;69    border-radius: 20px;70    display: flex;71    align-items: center;72    padding: 0 24px;73    gap: 18px;74    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;75  }76  .search-text {77    flex: 1;78    color: #DADADA;79    font-size: 42px;80    font-weight: 500;81    display: flex;82    align-items: center;83    gap: 8px;84  }85  .caret {86    width: 3px;87    height: 56px;88    background: #3B82F6;89    border-radius: 2px;90  }91  .icon-btn {92    width: 60px;93    height: 60px;94    border-radius: 12px;95    display: flex;96    align-items: center;97    justify-content: center;98  }99 100  /* Events card */101  .events-wrap {102    padding: 24px 40px;103  }104  .event-card {105    position: relative;106    width: 960px;107    margin-left: 40px;108    background: #24272C;109    border-radius: 18px;110    box-shadow: 0 12px 24px rgba(0,0,0,0.35);111    padding: 22px 28px 28px 28px;112  }113  .event-card .accent {114    position: absolute;115    left: 10px;116    top: 18px;117    bottom: 18px;118    width: 24px;119    background: #F1B51A;120    border-radius: 12px;121  }122  .card-header {123    display: flex;124    align-items: center;125    justify-content: space-between;126    padding-left: 26px; /* space to clear accent */127  }128  .title-chip {129    background: #B8901D;130    color: #FFFFFF;131    font-weight: 800;132    font-size: 46px;133    padding: 6px 14px;134    border-radius: 6px;135    letter-spacing: 0.2px;136  }137  .calendar-box {138    width: 64px;139    height: 64px;140    background: #34383E;141    border-radius: 10px;142    display: flex;143    align-items: center;144    justify-content: center;145  }146  .time {147    padding-left: 26px;148    margin-top: 12px;149    color: #BFC4CC;150    font-size: 34px;151    font-weight: 600;152  }153  .divider {154    height: 1px;155    background: #3A3E44;156    margin: 18px 0 12px 26px;157    width: 88%;158  }159  .event-lines {160    padding-left: 26px;161  }162  .event-lines .main {163    color: #D7DBE2;164    font-size: 34px;165    margin-bottom: 6px;166  }167  .event-lines .sub {168    color: #9AA0A8;169    font-size: 30px;170    letter-spacing: 0.3px;171  }172 173  /* Keyboard */174  .keyboard {175    position: absolute;176    left: 0;177    bottom: 0;178    width: 1080px;179    height: 930px;180    background: #1B1E23;181    border-top: 1px solid #2A2D33;182    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);183  }184  .kbd-toolbar {185    height: 110px;186    padding: 16px 24px;187    display: flex;188    align-items: center;189    justify-content: space-between;190    color: #DADADA;191    font-size: 36px;192  }193  .kbd-title {194    flex: 1;195    text-align: center;196    color: #DADADA;197    font-weight: 600;198  }199  .key-row {200    display: flex;201    gap: 16px;202    padding: 10px 24px;203    justify-content: center;204  }205  .key {206    height: 120px;207    min-width: 88px;208    background: #2A2D33;209    border-radius: 18px;210    color: #E6EAEE;211    display: flex;212    align-items: center;213    justify-content: center;214    font-size: 42px;215    font-weight: 500;216  }217  .key.small {218    min-width: 110px;219  }220  .key.wide {221    min-width: 220px;222  }223  .space {224    flex: 1;225    height: 120px;226    background: #2A2D33;227    border-radius: 18px;228  }229  .enter {230    min-width: 140px;231    height: 120px;232    background: #9EB9DA;233    color: #0B1A2B;234    border-radius: 18px;235    display: flex;236    align-items: center;237    justify-content: center;238  }239 240  /* Gesture bar */241  .gesture-bar {242    position: absolute;243    bottom: 14px;244    left: 50%;245    transform: translateX(-50%);246    width: 340px;247    height: 8px;248    background: #D8D8D8;249    border-radius: 8px;250    opacity: 0.85;251  }252</style>253</head>254<body>255<div id="render-target">256 257  <!-- Status Bar -->258  <div class="status-bar">259    <div class="status-left">260      <span>7:05</span>261      <span class="dot"></span>262      <span class="dot"></span>263      <span class="dot"></span>264    </div>265    <div class="status-right">266      <!-- Simple wifi icon -->267      <svg width="44" height="44" viewBox="0 0 44 44">268        <path d="M8 18c6-5 22-5 28 0" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>269        <path d="M13 24c4-3 14-3 18 0" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>270        <circle cx="22" cy="30" r="3" fill="#EDEDED"/>271      </svg>272      <!-- Battery icon -->273      <svg width="50" height="44" viewBox="0 0 50 44">274        <rect x="2" y="10" width="38" height="24" rx="5" stroke="#EDEDED" stroke-width="3" fill="none"/>275        <rect x="6" y="14" width="30" height="16" rx="3" fill="#EDEDED"/>276        <rect x="42" y="16" width="6" height="12" rx="2" fill="#EDEDED"/>277      </svg>278    </div>279  </div>280 281  <!-- Top Bar with Search -->282  <div class="top-bar">283    <div class="back-btn">284      <svg width="44" height="44" viewBox="0 0 44 44">285        <path d="M26 10L14 22l12 12" stroke="#EDEDED" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>286      </svg>287    </div>288    <div class="search-container">289      <svg width="48" height="48" viewBox="0 0 48 48">290        <circle cx="20" cy="20" r="12" stroke="#C8CDD4" stroke-width="3" fill="none"/>291        <path d="M32 32l10 10" stroke="#C8CDD4" stroke-width="3" stroke-linecap="round"/>292      </svg>293      <div class="search-text">294        <span>Upcoming Events</span>295        <span class="caret"></span>296      </div>297      <div class="icon-btn">298        <svg width="40" height="40" viewBox="0 0 40 40">299          <path d="M12 12l16 16M28 12L12 28" stroke="#C8CDD4" stroke-width="3" stroke-linecap="round"/>300        </svg>301      </div>302    </div>303  </div>304 305  <!-- Events Card -->306  <div class="events-wrap">307    <div class="event-card">308      <div class="accent"></div>309      <div class="card-header">310        <div class="title-chip">Upcoming Events</div>311        <div class="calendar-box">312          <svg width="36" height="36" viewBox="0 0 36 36">313            <rect x="5" y="8" width="26" height="22" rx="4" stroke="#AAB0B8" stroke-width="2" fill="none"/>314            <path d="M5 14h26" stroke="#AAB0B8" stroke-width="2"/>315            <rect x="10" y="18" width="6" height="6" rx="2" fill="#AAB0B8"/>316          </svg>317        </div>318      </div>319      <div class="time">17:27</div>320      <div class="divider"></div>321      <div class="event-lines">322        <div class="main">International Education week</div>323        <div class="sub">EMPLOYMENT FAIR</div>324      </div>325    </div>326  </div>327 328  <!-- Keyboard -->329  <div class="keyboard">330    <div class="kbd-toolbar">331      <div class="icon-btn">332        <!-- 4-square grid -->333        <svg width="42" height="42" viewBox="0 0 42 42">334          <rect x="6" y="6" width="10" height="10" rx="2" fill="#DADADA"/>335          <rect x="26" y="6" width="10" height="10" rx="2" fill="#DADADA"/>336          <rect x="6" y="26" width="10" height="10" rx="2" fill="#DADADA"/>337          <rect x="26" y="26" width="10" height="10" rx="2" fill="#DADADA"/>338        </svg>339      </div>340      <div class="kbd-title">Events</div>341      <div class="icon-btn">342        <!-- Mic icon -->343        <svg width="42" height="42" viewBox="0 0 42 42">344          <rect x="16" y="8" width="10" height="16" rx="5" fill="#DADADA"/>345          <path d="M12 22c0 6 6 9 9 9s9-3 9-9" stroke="#DADADA" stroke-width="3" fill="none" stroke-linecap="round"/>346          <path d="M21 31v5" stroke="#DADADA" stroke-width="3" stroke-linecap="round"/>347        </svg>348      </div>349    </div>350 351    <div class="key-row">352      <div class="key">q</div>353      <div class="key">w</div>354      <div class="key">e</div>355      <div class="key">r</div>356      <div class="key">t</div>357      <div class="key">y</div>358      <div class="key">u</div>359      <div class="key">i</div>360      <div class="key">o</div>361      <div class="key">p</div>362    </div>363 364    <div class="key-row" style="padding-left: 80px; padding-right: 80px;">365      <div class="key">a</div>366      <div class="key">s</div>367      <div class="key">d</div>368      <div class="key">f</div>369      <div class="key">g</div>370      <div class="key">h</div>371      <div class="key">j</div>372      <div class="key">k</div>373      <div class="key">l</div>374    </div>375 376    <div class="key-row">377      <div class="key small">378        <!-- Shift icon -->379        <svg width="40" height="40" viewBox="0 0 40 40">380          <path d="M20 8l10 12h-6v12h-8V20h-6z" fill="#E6EAEE"/>381        </svg>382      </div>383      <div class="key">z</div>384      <div class="key">x</div>385      <div class="key">c</div>386      <div class="key">v</div>387      <div class="key">b</div>388      <div class="key">n</div>389      <div class="key">m</div>390      <div class="key small">391        <!-- Backspace icon -->392        <svg width="44" height="44" viewBox="0 0 44 44">393          <path d="M10 22l8-8h16v16H18z" fill="#E6EAEE"/>394          <path d="M22 18l6 6M28 18l-6 6" stroke="#1B1E23" stroke-width="3" stroke-linecap="round"/>395        </svg>396      </div>397    </div>398 399    <div class="key-row">400      <div class="key wide">?123</div>401      <div class="key small">,</div>402      <div class="key small">403        <!-- Emoji icon (smile) -->404        <svg width="40" height="40" viewBox="0 0 40 40">405          <circle cx="20" cy="20" r="16" fill="#E6EAEE"/>406          <circle cx="14" cy="16" r="2" fill="#1B1E23"/>407          <circle cx="26" cy="16" r="2" fill="#1B1E23"/>408          <path d="M12 24c3 4 13 4 16 0" stroke="#1B1E23" stroke-width="3" fill="none" stroke-linecap="round"/>409        </svg>410      </div>411      <div class="space"></div>412      <div class="key small">.</div>413      <div class="enter">414        <!-- Search icon -->415        <svg width="42" height="42" viewBox="0 0 42 42">416          <circle cx="18" cy="18" r="10" stroke="#0B1A2B" stroke-width="3" fill="none"/>417          <path d="M26 26l10 10" stroke="#0B1A2B" stroke-width="3" stroke-linecap="round"/>418        </svg>419      </div>420    </div>421  </div>422 423  <div class="gesture-bar"></div>424</div>425</body>426</html>