GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Notifications Settings UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#111;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#F3F5F7;10  }11  /* Status bar */12  .status-bar{13    height:120px;background:#ffffff;display:flex;align-items:center;14    padding:0 36px;box-shadow:0 1px 0 rgba(0,0,0,0.06);15  }16  .status-left{font-size:40px;color:#333;}17  .status-right{margin-left:auto;display:flex;align-items:center;gap:26px;color:#444;font-size:34px;}18  .battery{19    width:80px;height:38px;border:2px solid #333;border-radius:8px;position:relative;20  }21  .battery::after{22    content:"";position:absolute;right:-10px;top:10px;width:8px;height:18px;background:#333;border-radius:2px;23  }24  .battery .level{width:64px;height:28px;background:#333;margin:4px;border-radius:6px;}25  /* App bar */26  .app-bar{27    height:160px;background:#ffffff;display:flex;align-items:center;28    padding:0 36px;gap:24px;box-shadow:0 2px 0 rgba(0,0,0,0.06);29  }30  .back-icon{width:60px;height:60px;}31  .title{font-size:64px;font-weight:600;color:#222;}32  /* Content sections */33  .content{padding:24px 0 0 0;}34  .section{padding:36px 36px 20px 36px;}35  .section-title{36    color:#2A62D7;font-size:36px;font-weight:700;letter-spacing:1px;margin-bottom:30px;37  }38  .card{39    background:#EEF1F5;border-radius:0; /* flat section look */40    padding:36px 36px;border-top:1px solid rgba(0,0,0,0.06);41    border-bottom:1px solid rgba(0,0,0,0.06);42  }43  .row{display:flex;align-items:center;margin-bottom:46px;}44  .row:last-child{margin-bottom:0;}45  .label{font-size:52px;color:#1a1a1a;}46  .desc{font-size:40px;color:#6b6f74;margin-top:20px;line-height:1.35;}47  .grow{flex:1;}48  /* Toggle switch */49  .toggle{50    width:126px;height:68px;border-radius:34px;background:#e0e3e7;position:relative;box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);51  }52  .toggle .thumb{53    width:64px;height:64px;border-radius:32px;background:#ffffff;position:absolute;top:2px;left:2px;54    box-shadow:0 1px 3px rgba(0,0,0,0.25);55  }56  .toggle.on{background:#5AD083;}57  .toggle.on .thumb{left:60px;background:#EDEFF2;}58  /* Gesture pill */59  .gesture{60    position:absolute;left:50%;transform:translateX(-50%);61    bottom:40px;width:500px;height:18px;background:#B8BCC3;border-radius:12px;62  }63</style>64</head>65<body>66<div id="render-target">67  <!-- Status Bar -->68  <div class="status-bar">69    <div class="status-left">6:13</div>70    <div class="status-right">71      <span>📶</span>72      <span>⟲</span>73      <span>🔋 100%</span>74      <div class="battery"><div class="level"></div></div>75    </div>76  </div>77 78  <!-- App Bar -->79  <div class="app-bar">80    <svg class="back-icon" viewBox="0 0 24 24">81      <path d="M15.5 19l-7-7 7-7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>82    </svg>83    <div class="title">Notifications</div>84  </div>85 86  <!-- Content -->87  <div class="content">88    <!-- FRIEND REQUESTS -->89    <div class="section">90      <div class="section-title">FRIEND REQUESTS</div>91      <div class="card">92        <div class="row">93          <div class="grow">94            <div class="label">Private mode</div>95            <div class="desc">By enabling private mode, you choose not to receive friend requests from otherlearners</div>96          </div>97          <div class="toggle"><div class="thumb"></div></div>98        </div>99      </div>100    </div>101 102    <!-- GENERAL -->103    <div class="section">104      <div class="section-title">GENERAL</div>105      <div class="card">106        <div class="row">107          <div class="grow">108            <div class="label">Notifications</div>109          </div>110          <div class="toggle on"><div class="thumb"></div></div>111        </div>112 113        <div class="row">114          <div class="grow">115            <div class="label">Correction received</div>116            <div class="desc">i.e. Alexandra has corrected your exercise</div>117          </div>118          <div class="toggle on"><div class="thumb"></div></div>119        </div>120 121        <div class="row">122          <div class="grow">123            <div class="label">Correction added</div>124            <div class="desc">e.g. Alexandra added a correction</div>125          </div>126          <div class="toggle on"><div class="thumb"></div></div>127        </div>128 129        <div class="row">130          <div class="grow">131            <div class="label">Replies</div>132            <div class="desc">e.g. Alexandra has replied to your correction</div>133          </div>134          <div class="toggle on"><div class="thumb"></div></div>135        </div>136 137        <div class="row">138          <div class="grow">139            <div class="label">Friend requests</div>140            <div class="desc">e.g. Alexandra has sent you a friend request</div>141          </div>142          <div class="toggle on"><div class="thumb"></div></div>143        </div>144      </div>145    </div>146  </div>147 148  <!-- Gesture pill -->149  <div class="gesture"></div>150</div>151</body>152</html>