GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Events Settings UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EAEAEA;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #FFFFFF;32  }33  .status-time {34    font-size: 40px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 22px;41  }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 180px;50    display: flex;51    align-items: center;52    padding: 0 40px;53    box-sizing: border-box;54  }55  .back-icon {56    width: 60px;57    height: 60px;58    margin-right: 26px;59  }60  .title {61    font-size: 72px;62    font-weight: 500;63    letter-spacing: 0.3px;64  }65  .kebab {66    position: absolute;67    right: 36px;68    top: 160px; /* within app bar area */69  }70  .kebab svg { width: 36px; height: 60px; }71 72  /* Content area */73  .content {74    position: absolute;75    top: 300px;76    left: 0;77    width: 1080px;78    padding: 0 40px;79    box-sizing: border-box;80  }81  .row {82    display: flex;83    align-items: center;84    padding: 30px 0;85  }86  .dot {87    width: 72px;88    height: 72px;89    border-radius: 50%;90    background: #5D82C5; /* peacock-like blue */91    margin-right: 32px;92  }93  .row .texts .primary {94    font-size: 56px;95    line-height: 1.2;96  }97  .row .texts .secondary {98    margin-top: 10px;99    font-size: 36px;100    color: #9AA1A8;101  }102  .divider {103    height: 1px;104    background: #2A2A2A;105    margin: 18px -40px 18px -40px;106  }107 108  .section-label {109    font-size: 36px;110    color: #9AA1A8;111    margin-top: 32px;112    margin-bottom: 22px;113  }114  .item {115    font-size: 56px;116    padding: 26px 0;117    color: #EDEDED;118  }119 120  /* Bottom gesture bar */121  .gesture {122    position: absolute;123    bottom: 52px;124    left: 50%;125    transform: translateX(-50%);126    width: 290px;127    height: 14px;128    background: #E0E0E0;129    border-radius: 10px;130    opacity: 0.9;131  }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status Bar -->138  <div class="status-bar">139    <div class="status-time">6:34</div>140    <div class="status-icons">141      <!-- Wi‑Fi icon -->142      <svg width="44" height="44" viewBox="0 0 24 24">143        <path d="M2 8c5.5-4.7 14.5-4.7 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>144        <path d="M5 12c3.8-3 10.2-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>145        <path d="M8.5 15.5c2.1-1.6 4.9-1.6 7 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>146        <circle cx="12" cy="19" r="2" fill="#fff"/>147      </svg>148      <!-- Battery icon -->149      <svg width="44" height="44" viewBox="0 0 24 24">150        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>151        <rect x="21" y="9" width="2" height="6" fill="#fff"/>152        <rect x="4" y="8" width="14" height="8" fill="#fff"/>153      </svg>154    </div>155  </div>156 157  <!-- App Bar -->158  <div class="app-bar">159    <!-- Back arrow -->160    <svg class="back-icon" viewBox="0 0 24 24">161      <path d="M15 5l-7 7 7 7" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>162    </svg>163    <div class="title">Events</div>164  </div>165 166  <!-- Kebab menu -->167  <div class="kebab">168    <svg viewBox="0 0 24 24">169      <circle cx="12" cy="5" r="2" fill="#BDBDBD"/>170      <circle cx="12" cy="12" r="2" fill="#BDBDBD"/>171      <circle cx="12" cy="19" r="2" fill="#BDBDBD"/>172    </svg>173  </div>174 175  <!-- Content -->176  <div class="content">177 178    <!-- Color row -->179    <div class="row">180      <div class="dot"></div>181      <div class="texts">182        <div class="primary">Color</div>183        <div class="secondary">Peacock</div>184      </div>185    </div>186 187    <div class="divider"></div>188 189    <div class="section-label">Default notifications</div>190    <div class="item">30 minutes before</div>191    <div class="item" style="color:#EAEAEA;">Add another notification</div>192 193    <div class="divider" style="margin-top: 24px;"></div>194 195    <div class="section-label">Default notifications for all-day events</div>196    <div class="item">Add a notification</div>197  </div>198 199  <!-- Gesture bar -->200  <div class="gesture"></div>201 202</div>203</body>204</html>