GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Notifications Settings</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18    color: #1a1a1a;19  }20 21  /* Status bar */22  .status-bar {23    height: 90px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #2b2b2b;29    font-weight: 600;30    font-size: 36px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .icon-dot {38    width: 28px;39    height: 28px;40    border-radius: 50%;41    background: #7A7A7A;42  }43  .icon-wifi {44    width: 36px;45    height: 24px;46    border: 3px solid #7A7A7A;47    border-top-left-radius: 18px;48    border-top-right-radius: 18px;49    border-bottom: none;50  }51  .icon-battery {52    width: 44px;53    height: 22px;54    border: 3px solid #7A7A7A;55    border-radius: 4px;56    position: relative;57  }58  .icon-battery::after {59    content: "";60    position: absolute;61    right: -8px;62    top: 6px;63    width: 6px;64    height: 10px;65    background: #7A7A7A;66    border-radius: 2px;67  }68 69  /* App bar */70  .app-bar {71    height: 140px;72    border-bottom: 2px solid #EDEDED;73    padding: 0 24px 0 24px;74    display: flex;75    align-items: center;76    gap: 12px;77  }78  .back-btn {79    width: 80px;80    height: 80px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .back-btn svg {86    width: 48px;87    height: 48px;88    fill: none;89    stroke: #2c2c2c;90    stroke-width: 8;91    stroke-linecap: round;92    stroke-linejoin: round;93  }94  .title {95    font-size: 64px;96    font-weight: 700;97    color: #202124;98  }99 100  /* Content */101  .content {102    padding: 24px 48px 0 48px;103  }104  .description {105    font-size: 36px;106    line-height: 1.5;107    color: #3d3d3d;108    margin: 32px 0 12px 0;109  }110  .setting-row {111    display: flex;112    align-items: center;113    justify-content: space-between;114    padding: 28px 0;115  }116  .setting-label {117    font-size: 44px;118    color: #1f1f1f;119  }120 121  /* Toggle Switch */122  .switch {123    width: 172px;124    height: 88px;125    background: #275A49;126    border-radius: 44px;127    position: relative;128    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);129  }130  .switch .knob {131    position: absolute;132    top: 9px;133    left: 94px; /* ON position */134    width: 70px;135    height: 70px;136    background: #FFFFFF;137    border-radius: 50%;138    box-shadow: 0 2px 4px rgba(0,0,0,0.25);139  }140 141  /* Secondary paragraph style */142  .subtext {143    font-size: 36px;144    line-height: 1.55;145    color: #3d3d3d;146    margin: 30px 0 12px 0;147  }148 149  /* Bottom gesture bar */150  .gesture {151    position: absolute;152    bottom: 32px;153    left: 50%;154    transform: translateX(-50%);155    width: 420px;156    height: 14px;157    background: #BDBDBD;158    border-radius: 8px;159    opacity: 0.9;160  }161</style>162</head>163<body>164<div id="render-target">165  <div class="status-bar">166    <div>5:58</div>167    <div class="status-icons">168      <div class="icon-dot"></div>169      <div class="icon-wifi"></div>170      <div class="icon-battery"></div>171    </div>172  </div>173 174  <div class="app-bar">175    <div class="back-btn">176      <svg viewBox="0 0 24 24">177        <path d="M15 4 L7 12 L15 20"></path>178      </svg>179    </div>180    <div class="title">Notifications</div>181  </div>182 183  <div class="content">184    <div class="description">185      We will inform you about likes and answers to your comments.186    </div>187 188    <div class="setting-row">189      <div class="setting-label">Replies to your comments</div>190      <div class="switch">191        <div class="knob"></div>192      </div>193    </div>194 195    <div class="subtext">196      Never miss out again on one of our delicious new recipe creations.197    </div>198 199    <div class="setting-row">200      <div class="setting-label">Weekly cooking inspiration</div>201      <div class="switch">202        <div class="knob"></div>203      </div>204    </div>205  </div>206 207  <div class="gesture"></div>208</div>209</body>210</html>