GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Notifications Settings Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target{8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0f0f0f; color:#fff;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; left:0; top:0;16    width:100%; height:120px;17    background:#0f0f0f;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 40px;20    color:#ffffff;21    font-size:40px; letter-spacing:1px;22  }23  .status-right{ display:flex; align-items:center; gap:28px; }24  .dot{ width:12px; height:12px; background:#ffffff; border-radius:50%; opacity:.9; }25  .sb-icon{26    width:38px; height:38px; border:2px solid #fff; border-radius:8px; opacity:.9;27  }28  .wifi{29    width:44px; height:30px;30    position:relative;31  }32  .wifi:before, .wifi:after{33    content:""; position:absolute; left:0; right:0; margin:auto;34    border:3px solid #fff; border-top-left-radius:22px; border-top-right-radius:22px; border-bottom:none;35  }36  .wifi:before{ top:8px; width:34px; height:18px; }37  .wifi:after{ top:0; width:44px; height:26px; opacity:.8; }38 39  /* App bar */40  .app-bar{41    position:absolute; left:0; top:120px; width:100%; height:160px;42    display:flex; align-items:center; gap:20px;43    padding:0 36px;44    background:#111111;45    box-sizing:border-box;46  }47  .back{48    width:84px; height:84px; display:flex; align-items:center; justify-content:center;49  }50  .back svg{ width:54px; height:54px; fill:#ffffff; }51  .title{52    font-size:64px; font-weight:700; color:#ffffff;53  }54 55  /* Content */56  .content{57    position:absolute; left:0; top:280px; width:100%;58    box-sizing:border-box; padding:28px 42px 40px 42px;59  }60  .helper{61    font-size:36px; color:#a6a6a6; line-height:1.5;62    margin:22px 6px 40px 6px;63  }64 65  .setting{66    padding:34px 6px; margin-top:10px;67    border-top:1px solid rgba(255,255,255,0.06);68    display:flex; align-items:center; justify-content:space-between;69  }70  .setting:first-of-type{ border-top:none; }71  .label{72    font-size:52px; color:#ffffff;73  }74  .desc{75    font-size:36px; color:#8e8e8e; line-height:1.5;76    margin:26px 6px 10px 6px;77  }78 79  /* Toggle Switch */80  .toggle{81    width:150px; height:78px; border-radius:40px;82    background:#5c3d2f; position:relative;83    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);84  }85  .toggle:before{86    content:""; position:absolute; top:15px; left:20px;87    width:48px; height:48px; border-radius:50%;88    background:#3b2a23; opacity:.6;89  }90  .toggle.on{ background:#6a4638; }91  .toggle.on:after{92    content:""; position:absolute; top:15px; right:16px;93    width:52px; height:52px; border-radius:50%;94    background:#f07c4a;95    box-shadow:0 2px 6px rgba(0,0,0,0.35);96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div class="status-left">7:45</div>105    <div class="status-right">106      <div class="dot"></div>107      <div class="dot"></div>108      <div class="dot"></div>109      <div class="dot"></div>110      <div class="wifi"></div>111      <div class="sb-icon"></div>112    </div>113  </div>114 115  <!-- App bar -->116  <div class="app-bar">117    <div class="back">118      <svg viewBox="0 0 24 24">119        <path d="M15.5 3.5 7 12l8.5 8.5-1.9 1.9L3.2 12l10.4-10.4 1.9 1.9z"/>120      </svg>121    </div>122    <div class="title">Notifications</div>123  </div>124 125  <!-- Content -->126  <div class="content">127    <div class="helper">128      We will inform you about likes and answers to your comments.129    </div>130 131    <div class="setting">132      <div class="label">Replies to your comments</div>133      <div class="toggle on"></div>134    </div>135 136    <div class="desc">137      Never miss out again on one of our delicious new recipe creations.138    </div>139 140    <div class="setting" style="margin-top:10px;">141      <div class="label">Weekly cooking inspiration</div>142      <div class="toggle on"></div>143    </div>144  </div>145 146</div>147</body>148</html>