GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Notifications Settings</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F3F6FA;14    color: #0f172a;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #1f2937;30    font-size: 30px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .dot { width: 10px; height: 10px; background:#1f2937; border-radius:50%; display:inline-block; opacity:.7 }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 90px;43    left: 0;44    width: 1080px;45    height: 150px;46    background: #ffffff;47    border-bottom: 1px solid #E6EBF2;48    display: flex;49    align-items: center;50    padding: 0 30px;51    box-sizing: border-box;52  }53  .back-btn {54    width: 96px;55    height: 96px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .title {61    font-size: 56px;62    font-weight: 700;63    color: #121926;64    margin-left: 6px;65  }66 67  /* Content */68  .content {69    position: absolute;70    top: 240px;71    left: 0;72    right: 0;73    bottom: 0;74    overflow: hidden;75    padding-bottom: 48px;76  }77  .section {78    padding: 38px 36px 10px 36px;79  }80  .section-box {81    background: #F3F6FA;82    border-top: 1px solid #E6EBF2;83  }84  .section-title {85    color: #2563EB;86    font-size: 30px;87    font-weight: 700;88    letter-spacing: 1px;89    margin: 18px 0 22px;90    text-transform: uppercase;91  }92 93  .row {94    position: relative;95    padding: 30px 180px 24px 30px;96    background: #F3F6FA;97    border-bottom: 1px solid #E6EBF2;98  }99  .row h3 {100    margin: 0;101    font-size: 44px;102    font-weight: 700;103    color: #0F172A;104  }105  .desc {106    margin-top: 16px;107    font-size: 34px;108    line-height: 1.35;109    color: #6B7280;110    max-width: 900px;111  }112 113  /* Toggle (OFF) */114  .toggle {115    position: absolute;116    right: 36px;117    top: 36px;118    width: 128px;119    height: 68px;120    background: #E5EAF2;121    border-radius: 34px;122    border: 1px solid #D7DEE8;123    box-sizing: border-box;124  }125  .toggle .knob {126    position: absolute;127    top: 5px;128    left: 5px;129    width: 58px;130    height: 58px;131    background: #FFFFFF;132    border-radius: 50%;133    border: 1px solid #D8DFEA;134    box-shadow: 0 2px 4px rgba(16,24,40,0.08);135  }136 137  /* Simple icons */138  svg { display: block }139</style>140</head>141<body>142<div id="render-target">143  <!-- Status Bar -->144  <div class="status-bar">145    <div class="status-left">6:12</div>146    <div class="status-right">147      <!-- signal -->148      <svg width="32" height="28" viewBox="0 0 24 24">149        <rect x="2" y="14" width="3" height="8" fill="#111827" opacity="0.35"/>150        <rect x="7" y="12" width="3" height="10" fill="#111827" opacity="0.55"/>151        <rect x="12" y="9" width="3" height="13" fill="#111827" opacity="0.75"/>152        <rect x="17" y="6" width="3" height="16" fill="#111827"/>153      </svg>154      <!-- wifi -->155      <svg width="32" height="28" viewBox="0 0 24 24">156        <path d="M2 8c5-4 15-4 20 0" stroke="#111827" stroke-width="2" fill="none"/>157        <path d="M5 12c4-3 10-3 14 0" stroke="#111827" stroke-width="2" fill="none"/>158        <path d="M8 16c3-2 5-2 8 0" stroke="#111827" stroke-width="2" fill="none"/>159        <circle cx="12" cy="19" r="2" fill="#111827"/>160      </svg>161      <!-- battery -->162      <svg width="46" height="28" viewBox="0 0 36 20">163        <rect x="1" y="3" width="30" height="14" rx="3" ry="3" fill="none" stroke="#111827" stroke-width="2"/>164        <rect x="3" y="5" width="22" height="10" fill="#111827"/>165        <rect x="32" y="7" width="3" height="6" rx="1" fill="#111827"/>166      </svg>167      <span>100%</span>168    </div>169  </div>170 171  <!-- App Bar -->172  <div class="app-bar">173    <div class="back-btn">174      <svg width="50" height="50" viewBox="0 0 24 24">175        <path d="M15 4L7 12l8 8" stroke="#111827" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>176      </svg>177    </div>178    <div class="title">Notifications</div>179  </div>180 181  <!-- Content -->182  <div class="content">183    <div class="section section-box">184      <div class="section-title">Friend Requests</div>185 186      <div class="row">187        <h3>Private mode</h3>188        <div class="desc">By enabling private mode, you choose not to receive friend requests from otherlearners</div>189        <div class="toggle"><div class="knob"></div></div>190      </div>191    </div>192 193    <div class="section section-box">194      <div class="section-title">General</div>195 196      <div class="row">197        <h3>Notifications</h3>198        <div class="toggle"><div class="knob"></div></div>199      </div>200 201      <div class="row">202        <h3>Correction received</h3>203        <div class="desc">i.e. Alexandra has corrected your exercise</div>204        <div class="toggle"><div class="knob"></div></div>205      </div>206 207      <div class="row">208        <h3>Correction added</h3>209        <div class="desc">e.g. Alexandra added a correction</div>210        <div class="toggle"><div class="knob"></div></div>211      </div>212 213      <div class="row">214        <h3>Replies</h3>215        <div class="desc">e.g. Alexandra has replied to your correction</div>216        <div class="toggle"><div class="knob"></div></div>217      </div>218 219      <div class="row" style="border-bottom:none;">220        <h3>Friend requests</h3>221        <div class="desc">e.g. Alexandra has sent you a friend request</div>222        <div class="toggle"><div class="knob"></div></div>223      </div>224    </div>225  </div>226</div>227</body>228</html>