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>Inbox notifications (Mock)</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #121212;19    color: #EDEDED;20    font-family: Roboto, Arial, Helvetica, sans-serif;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #F1F1F1;31    font-size: 38px;32    letter-spacing: 1px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .icon {40    width: 44px;41    height: 44px;42    display: inline-flex;43    align-items: center;44    justify-content: center;45    color: #EDEDED;46  }47  .battery {48    width: 62px;49    height: 32px;50    border: 3px solid #EDEDED;51    border-radius: 6px;52    position: relative;53    margin-left: 6px;54  }55  .battery::after {56    content: "";57    position: absolute;58    right: -10px;59    top: 7px;60    width: 6px;61    height: 18px;62    background: #EDEDED;63    border-radius: 2px;64  }65  .battery .level {66    position: absolute;67    left: 3px;68    top: 3px;69    bottom: 3px;70    right: 12px;71    background: #EDEDED;72    border-radius: 3px;73  }74 75  /* App bar */76  .app-bar {77    height: 140px;78    display: flex;79    align-items: center;80    padding: 0 24px;81  }82  .back-btn {83    width: 80px;84    height: 80px;85    display: inline-flex;86    align-items: center;87    justify-content: center;88    margin-right: 8px;89  }90  .title {91    font-size: 58px;92    font-weight: 500;93    letter-spacing: 0.2px;94  }95  .menu-btn {96    margin-left: auto;97    width: 80px;98    height: 80px;99    display: inline-flex;100    align-items: center;101    justify-content: center;102  }103 104  /* Content */105  .content {106    padding: 20px 36px 120px 36px;107  }108  .subtitle-block {109    padding: 22px 0 6px 16px;110  }111  .primary {112    font-size: 44px;113    font-weight: 500;114    margin-bottom: 8px;115  }116  .secondary {117    color: #A8A8A8;118    font-size: 32px;119  }120 121  .section-label {122    color: #8BC34A;123    font-size: 36px;124    font-weight: 600;125    margin: 36px 0 18px 16px;126  }127 128  .row {129    display: flex;130    align-items: center;131    padding: 30px 16px;132  }133  .row + .row {134    border-top: 1px solid #1E1E1E;135  }136  .row .text {137    flex: 1;138  }139  .row .text .t {140    font-size: 44px;141    font-weight: 500;142  }143  .row .text .d {144    margin-top: 8px;145    font-size: 32px;146    color: #A8A8A8;147  }148 149  /* Checkbox (Material-like) */150  .check {151    width: 60px;152    height: 60px;153    border-radius: 8px;154    background: #8BC34A;155    display: inline-flex;156    align-items: center;157    justify-content: center;158    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);159  }160  .check svg {161    width: 38px;162    height: 38px;163    fill: none;164    stroke: #FFFFFF;165    stroke-width: 8;166    stroke-linecap: round;167    stroke-linejoin: round;168  }169 170  /* Gesture bar */171  .gesture {172    position: absolute;173    bottom: 26px;174    left: 50%;175    transform: translateX(-50%);176    width: 320px;177    height: 12px;178    background: #E6E6E6;179    border-radius: 10px;180    opacity: 0.9;181  }182</style>183</head>184<body>185<div id="render-target">186  <!-- Status bar -->187  <div class="status-bar">188    <div>11:28</div>189    <div class="status-right">190      <!-- Simple status icons -->191      <div class="icon">192        <svg viewBox="0 0 24 24" width="36" height="36">193          <circle cx="12" cy="12" r="10" stroke="#EDEDED" stroke-width="2" fill="none"></circle>194          <path d="M12 7v5l4 2" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"></path>195        </svg>196      </div>197      <div class="icon">198        <svg viewBox="0 0 24 24" width="36" height="36">199          <path d="M10 3h4v2h-4zM5 7h14v12H5z" fill="#EDEDED"></path>200        </svg>201      </div>202      <div class="icon">203        <svg viewBox="0 0 24 24" width="36" height="36">204          <path d="M3 12h18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>205          <path d="M12 3v18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>206        </svg>207      </div>208      <div style="display:flex; align-items:center; gap:10px;">209        <div class="battery"><div class="level"></div></div>210        <div style="font-size:34px;">100%</div>211      </div>212    </div>213  </div>214 215  <!-- App bar -->216  <div class="app-bar">217    <div class="back-btn">218      <svg viewBox="0 0 24 24" width="56" height="56">219        <path d="M15 19L8 12l7-7" stroke="#EDEDED" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>220      </svg>221    </div>222    <div class="title">Inbox notifications</div>223    <div class="menu-btn">224      <svg viewBox="0 0 24 24" width="40" height="40">225        <circle cx="12" cy="5" r="2.2" fill="#EDEDED"></circle>226        <circle cx="12" cy="12" r="2.2" fill="#EDEDED"></circle>227        <circle cx="12" cy="19" r="2.2" fill="#EDEDED"></circle>228      </svg>229    </div>230  </div>231 232  <!-- Content -->233  <div class="content">234    <div class="subtitle-block">235      <div class="primary">Sync messages</div>236      <div class="secondary">Last 30 days of messages will download when connected</div>237    </div>238 239    <div class="section-label">Notifications</div>240 241    <div class="row">242      <div class="text">243        <div class="t">Label notifications</div>244      </div>245      <div class="check" aria-checked="true">246        <svg viewBox="0 0 24 24">247          <path d="M4 12l5 5 11-11"></path>248        </svg>249      </div>250    </div>251 252    <div class="row">253      <div class="text">254        <div class="t">Notify for every message</div>255        <div class="d">Play sound/vibrate when each new message arrives</div>256      </div>257      <div class="check" aria-checked="true">258        <svg viewBox="0 0 24 24">259          <path d="M4 12l5 5 11-11"></path>260        </svg>261      </div>262    </div>263  </div>264 265  <!-- Gesture bar -->266  <div class="gesture"></div>267</div>268</body>269</html>