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>Inbox notifications 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: #EDEDED;16    font-family: Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 100px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31    box-sizing: border-box;32    font-size: 36px;33    letter-spacing: 0.5px;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 22px;44    color: #ffffff;45  }46  .status-icon {47    width: 36px;48    height: 36px;49    opacity: 0.85;50  }51  .battery {52    display: flex;53    align-items: center;54    gap: 10px;55    font-size: 30px;56  }57 58  /* App bar */59  .appbar {60    position: absolute;61    top: 100px;62    left: 0;63    width: 1080px;64    height: 140px;65    display: flex;66    align-items: center;67    box-sizing: border-box;68    padding: 0 36px;69  }70  .appbar-title {71    font-size: 56px;72    font-weight: 500;73    margin-left: 18px;74  }75  .spacer {76    flex: 1;77  }78  .icon-btn {79    width: 72px;80    height: 72px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85 86  /* Content */87  .content {88    position: absolute;89    top: 240px;90    left: 0;91    width: 1080px;92    box-sizing: border-box;93    padding: 0 36px;94  }95  .section {96    padding: 34px 0;97  }98  .title {99    font-size: 44px;100    font-weight: 500;101    margin-bottom: 16px;102  }103  .subtext {104    font-size: 30px;105    color: #BDBDBD;106  }107  .section-label {108    font-size: 32px;109    color: #8BC34A;110    margin: 30px 0 18px 0;111    font-weight: 500;112  }113 114  .row {115    display: flex;116    align-items: center;117    justify-content: space-between;118    padding: 28px 0;119  }120  .row + .row {121    border-top: 1px solid #1F1F1F;122    margin-top: 12px;123  }124  .row-title {125    font-size: 42px;126    font-weight: 500;127  }128  .row-subtext {129    font-size: 30px;130    color: #9E9E9E;131    margin-top: 10px;132  }133  .checkbox {134    width: 60px;135    height: 60px;136    border-radius: 8px;137    border: 3px solid #9E9E9E;138    display: flex;139    align-items: center;140    justify-content: center;141    box-sizing: border-box;142  }143  .checkbox.checked {144    background: #8BC34A;145    border-color: #8BC34A;146  }147  .divider {148    height: 1px;149    background: #202020;150    margin: 28px 0;151  }152 153  /* Gesture bar */154  .gesture {155    position: absolute;156    bottom: 42px;157    left: 50%;158    transform: translateX(-50%);159    width: 260px;160    height: 12px;161    background: #DADADA;162    border-radius: 12px;163    opacity: 0.85;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="status-left">173      <div class="time">11:27</div>174      <!-- simple placeholders for small status icons -->175      <svg class="status-icon" viewBox="0 0 24 24">176        <circle cx="12" cy="12" r="10" fill="#CFCFCF"/>177        <path d="M12 6v6l4 4" stroke="#121212" stroke-width="3" fill="none" stroke-linecap="round"/>178      </svg>179      <svg class="status-icon" viewBox="0 0 24 24">180        <rect x="3" y="10" width="18" height="8" rx="2" fill="#CFCFCF"/>181        <rect x="5" y="12" width="8" height="4" rx="1" fill="#121212"/>182      </svg>183      <svg class="status-icon" viewBox="0 0 24 24">184        <circle cx="12" cy="12" r="10" fill="none" stroke="#CFCFCF" stroke-width="3"/>185        <circle cx="12" cy="12" r="3" fill="#CFCFCF"/>186      </svg>187    </div>188    <div class="status-right">189      <svg class="status-icon" viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="9" fill="none" stroke="#CFCFCF" stroke-width="3"/>191        <path d="M12 6v6" stroke="#CFCFCF" stroke-width="3" stroke-linecap="round"/>192      </svg>193      <div class="battery">194        <svg width="42" height="24" viewBox="0 0 42 24">195          <rect x="2" y="4" width="34" height="16" rx="3" fill="none" stroke="#CFCFCF" stroke-width="3"/>196          <rect x="38" y="8" width="4" height="8" rx="1" fill="#CFCFCF"/>197          <rect x="5" y="6.5" width="28" height="11" rx="2" fill="#CFCFCF"/>198        </svg>199        <span>100%</span>200      </div>201    </div>202  </div>203 204  <!-- App bar -->205  <div class="appbar">206    <div class="icon-btn">207      <svg width="64" height="64" viewBox="0 0 48 48">208        <path d="M30 8 L14 24 L30 40" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209      </svg>210    </div>211    <div class="appbar-title">Inbox notifications</div>212    <div class="spacer"></div>213    <div class="icon-btn">214      <svg width="52" height="52" viewBox="0 0 24 24">215        <circle cx="12" cy="4" r="2.5" fill="#BDBDBD"/>216        <circle cx="12" cy="12" r="2.5" fill="#BDBDBD"/>217        <circle cx="12" cy="20" r="2.5" fill="#BDBDBD"/>218      </svg>219    </div>220  </div>221 222  <!-- Content -->223  <div class="content">224    <div class="section">225      <div class="title">Sync messages</div>226      <div class="subtext">Last 30 days of messages will download when connected</div>227    </div>228 229    <div class="section-label">Notifications</div>230 231    <div class="row">232      <div>233        <div class="row-title">Label notifications</div>234      </div>235      <div class="checkbox checked">236        <svg width="46" height="46" viewBox="0 0 24 24">237          <path d="M5 12l4 4 10-10" stroke="#FFFFFF" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238        </svg>239      </div>240    </div>241 242    <div class="divider"></div>243 244    <div class="row">245      <div>246        <div class="row-title">Notify for every message</div>247        <div class="row-subtext">Play sound/vibrate when each new message arrives</div>248      </div>249      <div class="checkbox"></div>250    </div>251  </div>252 253  <!-- Gesture bar -->254  <div class="gesture"></div>255</div>256</body>257</html>