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>Upcoming Events - UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121418;13    color: #eaeaea;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 28px 36px 0 36px;20    box-sizing: border-box;21    display: flex; align-items: center; justify-content: space-between;22    color: #eaeaea;23    font-size: 40px; font-weight: 600;24  }25  .status-icons { display: flex; align-items: center; gap: 22px; }26  .dot { width: 14px; height: 14px; background: #9aa0a6; border-radius: 50%; display: inline-block; }27  .wifi {28    width: 36px; height: 36px;29    display: inline-block;30  }31  .battery {32    width: 40px; height: 22px; border: 3px solid #eaeaea; border-radius: 5px; position: relative;33    display: inline-block; margin-left: 6px;34  }35  .battery::after { content: ""; position: absolute; right: -9px; top: 4px; width: 6px; height: 14px; background: #eaeaea; border-radius: 2px; }36  .battery .level { position: absolute; top: 2px; left: 2px; right: 10px; bottom: 2px; background: #eaeaea; }37 38  /* Top bar with back and search */39  .topbar { display: flex; align-items: center; gap: 26px; padding: 10px 36px; }40  .back-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }41  .search-box {42    flex: 1;43    height: 110px;44    background: #252a31;45    border-radius: 20px;46    display: flex; align-items: center;47    padding: 0 28px;48    box-sizing: border-box;49    color: #cfd3d8;50    font-size: 42px;51  }52  .search-box .label { margin-left: 20px; flex: 1; color: #d7dbe0; }53  .icon-btn { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #cfd3d8; }54 55  /* Event card */56  .event-card {57    position: relative;58    margin: 38px 36px;59    background: #252a31;60    border-radius: 22px;61    padding: 32px 32px 40px 48px;62    box-sizing: border-box;63    width: calc(100% - 72px);64    color: #e6e6e6;65    box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;66  }67  .event-card .accent {68    position: absolute; left: 18px; top: 24px; bottom: 24px;69    width: 18px; background: #E0A800; border-radius: 12px;70  }71  .event-card .header {72    display: flex; align-items: center; justify-content: space-between;73  }74  .event-card .title-highlight {75    display: inline-block;76    background: #A67C19;77    color: #ffffff;78    font-weight: 800;79    font-size: 46px;80    padding: 8px 14px;81    border-radius: 6px;82  }83  .event-card .calendar {84    width: 60px; height: 60px; background: #5a6169; border-radius: 10px;85    display: flex; align-items: center; justify-content: center;86  }87  .event-card .calendar svg { width: 34px; height: 34px; }88  .event-card .time {89    margin-top: 18px; font-size: 34px; color: #9aa0a6; font-weight: 700;90  }91  .event-card .divider {92    height: 2px; background: #3a4046; margin: 22px 0;93  }94  .event-card .line { font-size: 36px; margin-top: 8px; color: #d7dbe0; }95  .event-card .subline { font-size: 34px; margin-top: 6px; color: #9aa0a6; letter-spacing: 0.5px; }96 97  /* Keyboard */98  .keyboard {99    position: absolute; left: 0; right: 0; bottom: 0;100    height: 950px;101    background: #1a1d22;102    border-top: 1px solid #2a2f36;103    box-sizing: border-box;104    padding: 24px 22px 40px 22px;105  }106  .key-row { display: flex; justify-content: center; gap: 16px; margin-bottom: 22px; }107  .key {108    background: #2b3036;109    color: #e6e6e6;110    border-radius: 18px;111    min-width: 84px;112    height: 110px;113    display: flex; align-items: center; justify-content: center;114    font-size: 40px; font-weight: 600;115  }116  .key.small { height: 92px; min-width: 80px; font-size: 34px; }117  .key.wide { min-width: 160px; }118  .space { flex: 1; min-width: 360px; }119  .enter { background: #bcd3f0; color: #1b2836; font-weight: 700; min-width: 150px; }120  .shift { min-width: 120px; }121  .backspace { min-width: 120px; }122  .special { background: #99a1aa; color: #121418; }123  .comma, .period { min-width: 120px; }124  .bottom-indicator {125    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);126    width: 280px; height: 8px; background: #8a8f99; border-radius: 4px; opacity: 0.6;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status-bar">135    <div>7:07</div>136    <div class="status-icons">137      <span class="dot"></span>138      <span class="dot"></span>139      <span class="dot"></span>140      <svg class="wifi" viewBox="0 0 24 24">141        <path d="M2 8c6-4 14-4 20 0M6 12c4-3 8-3 12 0M10 16c2-1 4-1 6 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>142        <circle cx="12" cy="20" r="2" fill="#eaeaea"/>143      </svg>144      <div class="battery"><div class="level"></div></div>145    </div>146  </div>147 148  <!-- Back and search -->149  <div class="topbar">150    <div class="back-btn">151      <svg width="44" height="44" viewBox="0 0 44 44">152        <path d="M26 10 L14 22 L26 34" stroke="#eaeaea" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>153      </svg>154    </div>155    <div class="search-box">156      <svg width="44" height="44" viewBox="0 0 24 24">157        <circle cx="10" cy="10" r="6" stroke="#cfd3d8" stroke-width="2" fill="none"/>158        <path d="M15 15 L22 22" stroke="#cfd3d8" stroke-width="2" stroke-linecap="round"/>159      </svg>160      <div class="label">Upcoming Events</div>161      <div class="icon-btn">162        <svg width="34" height="34" viewBox="0 0 24 24">163          <path d="M4 4 L20 20 M20 4 L4 20" stroke="#cfd3d8" stroke-width="2" stroke-linecap="round"/>164        </svg>165      </div>166    </div>167  </div>168 169  <!-- Event card -->170  <div class="event-card">171    <div class="accent"></div>172    <div class="header">173      <span class="title-highlight">Upcoming Events</span>174      <div class="calendar">175        <svg viewBox="0 0 24 24">176          <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="#d0d4d9"/>177          <rect x="3" y="5" width="18" height="5" fill="#b7bcc2"/>178        </svg>179      </div>180    </div>181    <div class="time">17:27</div>182    <div class="divider"></div>183    <div class="line">International Education week</div>184    <div class="subline">EMPLOYMENT FAIR</div>185  </div>186 187  <!-- Keyboard -->188  <div class="keyboard">189    <div class="key-row">190      <div class="key small">1</div>191      <div class="key small">2</div>192      <div class="key small">3</div>193      <div class="key small">4</div>194      <div class="key small">5</div>195      <div class="key small">6</div>196      <div class="key small">7</div>197      <div class="key small">8</div>198      <div class="key small">9</div>199      <div class="key small">0</div>200    </div>201    <div class="key-row">202      <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>203      <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>204    </div>205    <div class="key-row">206      <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>207      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>208    </div>209    <div class="key-row">210      <div class="key shift">⇧</div>211      <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>212      <div class="key backspace">⌫</div>213    </div>214    <div class="key-row">215      <div class="key wide special">?123</div>216      <div class="key comma">,</div>217      <div class="key space"></div>218      <div class="key period">.</div>219      <div class="key enter">↵</div>220    </div>221    <div class="bottom-indicator"></div>222  </div>223 224</div>225</body>226</html>