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>Settings - Notifications</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target{9    position: relative;10    width:1080px; height:2400px;11    overflow:hidden;12    background:#0b0b0b;13    color:#e6e6e6;14  }15 16  /* Header */17  .header{18    position:relative;19    width:100%;20    height:320px;21    background: linear-gradient(90deg, #d7bf89 0%, #b69461 45%, #8a6b48 100%);22    padding: 40px 56px;23    box-sizing: border-box;24  }25  .back{26    width:96px; height:96px; border-radius:48px;27    background:rgba(255,255,255,0.25);28    display:flex; align-items:center; justify-content:center;29    position:absolute; top:48px; left:40px;30  }31  .back svg{ width:42px; height:42px; fill:#2b220e; }32  .header-title{33    margin-top:70px;34    font-size:64px; font-weight:700; color:#f5e7c7;35    letter-spacing:0.5px;36  }37  .header-desc{38    margin-top:18px;39    font-size:34px; line-height:1.35; color:#f5edd7;40    opacity:0.9;41    max-width:890px;42  }43  .pill{44    position:absolute;45    left:172px; top:164px;46    background:#2b6b54;47    color:#e9f7ec;48    padding:28px 44px;49    border-radius:56px;50    font-size:44px; font-weight:700;51    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);52  }53 54  /* Main content */55  .content{ padding: 20px 44px 40px; }56  .row{57    display:flex; align-items:center; justify-content:space-between;58    padding:34px 16px;59    border-bottom:1px solid rgba(255,255,255,0.06);60    color:#e7e7e7;61  }62  .row .title{ font-size:44px; }63  .subtext{64    font-size:32px; color:#c6c6c6; line-height:1.4; margin:18px 0 8px 16px;65    max-width:880px;66  }67  .mini-pill{68    display:inline-block; background:#c0a24f; color:#1a1408;69    padding:18px 34px; border-radius:44px; font-weight:800; font-size:34px;70  }71 72  .section{73    margin-top:34px; margin-bottom:8px;74    padding: 18px 16px 10px;75    color:#a8a8a8; font-size:32px; letter-spacing:4px;76  }77 78  /* Icons */79  .leading{80    display:flex; align-items:center; gap:26px;81  }82  .ico{83    width:68px; height:68px; border-radius:18px;84    background:#202020; border:1px solid #3a3a3a;85    display:flex; align-items:center; justify-content:center;86    color:#bdbdbd;87  }88  .ico svg{ width:38px; height:38px; fill:#bdbdbd; }89 90  /* Toggle */91  .toggle{92    width:132px; height:68px; border-radius:34px;93    background:#4f4f4f; position:relative;94    transition:background .2s;95  }96  .toggle::after{97    content:"";98    position:absolute; top:6px; left:6px;99    width:56px; height:56px; border-radius:28px;100    background:#eaeaea; transition:left .2s;101  }102  .toggle.on{ background:#79553a; }103  .toggle.on::after{ left:70px; background:#f6efe8; }104 105  .right-label{ font-size:42px; color:#cfcfcf; }106 107  /* Footer space */108  .spacer{ height:260px; }109</style>110</head>111<body>112<div id="render-target">113 114  <div class="header">115    <div class="back">116      <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.7 2L3.5 12 13.8 2.5z"/></svg>117    </div>118    <div class="header-title">Notifications</div>119    <div class="pill">Unlock cookbook+</div>120    <div class="header-desc">We will inform you about likes and answers to your comments.</div>121  </div>122 123  <div class="content">124 125    <div class="row">126      <div class="leading">127        <div class="title">Replies to your comments</div>128      </div>129      <div class="toggle on"></div>130    </div>131 132    <div class="row">133      <div class="leading">134        <div class="title">Current Plan</div>135      </div>136      <div class="right-label">Free</div>137    </div>138    <div class="subtext">Never miss out again on one of our delicious new recipe creations.</div>139    <div class="subtext"><span class="mini-pill">TRY COOKBOOK+</span></div>140 141    <div class="row">142      <div class="leading">143        <div class="title">Weekly cooking inspiration</div>144      </div>145      <div class="toggle"></div>146    </div>147 148    <div class="section">SYSTEM</div>149 150    <div class="row">151      <div class="leading">152        <div class="ico">153          <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 2a8 8 0 016.9 4H5.1A8 8 0 0112 4zm0 16a8 8 0 01-7-4h14a8 8 0 01-7 4z"/></svg>154        </div>155        <div class="title">Languages</div>156      </div>157      <div class="right-label"></div>158    </div>159 160    <div class="row">161      <div class="leading">162        <div class="ico">163          <svg viewBox="0 0 24 24"><path d="M3 3h18v6H3zm0 8h18v10H3zm4-6h10v2H7zm0 8h4v4H7z"/></svg>164        </div>165        <div class="title">Measurement System</div>166      </div>167      <div class="right-label"></div>168    </div>169 170    <div class="row">171      <div class="leading">172        <div class="ico">173          <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4zM2 8h2v8H2zm18 0h2v8h-2zM8 9l7 3-7 3z"/></svg>174        </div>175        <div class="title">Video autoplay</div>176      </div>177      <div class="right-label"></div>178    </div>179 180    <div class="row">181      <div class="leading">182        <div class="ico">183          <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V9a6 6 0 10-12 0v7L4 17v2h16v-2z"/></svg>184        </div>185        <div class="title">Notifications</div>186      </div>187      <div class="right-label"></div>188    </div>189 190    <div class="row">191      <div class="leading">192        <div class="ico">193          <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3zm3 4h12v10H6z"/></svg>194        </div>195        <div class="title">Display</div>196      </div>197      <div class="right-label"></div>198    </div>199 200    <div class="section">APPLIANCES</div>201 202    <div class="row">203      <div class="leading">204        <div class="ico">205          <svg viewBox="0 0 24 24"><path d="M6 3h12v18H6zM8 5h8v4H8zm0 6h8v6H8z"/></svg>206        </div>207        <div class="title">Home Connect</div>208      </div>209      <div class="toggle"></div>210    </div>211 212    <div class="section">MORE</div>213 214    <div class="spacer"></div>215 216  </div>217</div>218</body>219</html>