GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Notifications UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2160px; position:relative; overflow:hidden;9    background:#121212; color:#ffffff;10  }11  /* Status bar */12  .status-bar {13    position:absolute; top:0; left:0; right:0; height:90px;14    background:#121212; display:flex; align-items:center; padding:0 28px; color:#fff;15    font-size:42px; letter-spacing:0.5px;16  }17  .status-right { margin-left:auto; display:flex; align-items:center; gap:22px; font-size:36px; opacity:0.9; }18  .dot { width:10px; height:10px; border-radius:50%; background:#bdbdbd; display:inline-block; }19  /* App bar */20  .app-bar {21    position:absolute; top:90px; left:0; right:0; height:120px; display:flex; align-items:center;22    padding:0 24px;23  }24  .back-btn {25    width:96px; height:96px; display:flex; align-items:center; justify-content:center;26  }27  .back-btn svg { width:44px; height:44px; fill:#ffffff; opacity:0.9; }28  .title { font-size:56px; font-weight:600; margin-left:8px; }29  /* Content */30  .content {31    position:absolute; top:210px; left:0; right:0; bottom:140px;32    padding:0 32px; overflow:hidden;33  }34  .section-label {35    color:#bdbdbd; font-size:34px; margin-bottom:24px;36  }37  .item {38    display:flex; align-items:flex-start; padding:26px 0; border-bottom:1px solid rgba(255,255,255,0.04);39  }40  .item:last-child { border-bottom:none; }41  .texts { flex:1; padding-right:20px; }42  .title-line { font-size:44px; margin-bottom:14px; }43  .subtitle { font-size:34px; color:#a8a8a8; line-height:1.35; }44  /* Toggle */45  .toggle {46    width:132px; height:72px; border-radius:36px;47    position:relative; margin-top:4px; flex-shrink:0;48  }49  .toggle .knob {50    position:absolute; top:6px; width:60px; height:60px; border-radius:50%;51    transition:all 0.2s ease;52  }53  .toggle.on { background:#1e88e5; }54  .toggle.on .knob { background:#ffffff; left:66px; }55  .toggle.off { background:#505050; }56  .toggle.off .knob { background:#bdbdbd; left:6px; }57  /* Bottom gesture area */58  .gesture-area {59    position:absolute; left:0; right:0; bottom:0; height:140px; background:transparent;60  }61  .back-gesture {62    position:absolute; left:34px; bottom:54px; width:64px; height:64px; border-radius:32px;63    border:2px solid #9e9e9e; display:flex; align-items:center; justify-content:center; opacity:0.7;64  }65  .nav-pill {66    position:absolute; left:50%; transform:translateX(-50%);67    bottom:50px; width:180px; height:22px; border-radius:12px; background:#8e8e8e; opacity:0.6;68  }69</style>70</head>71<body>72<div id="render-target">73 74  <!-- Status bar -->75  <div class="status-bar">76    2:1277    <div class="status-right">78      <span>🔕</span>79      <span>📶</span>80      <span>🔋 100%</span>81    </div>82  </div>83 84  <!-- App bar -->85  <div class="app-bar">86    <div class="back-btn">87      <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>88    </div>89    <div class="title">Notifications</div>90  </div>91 92  <!-- Content -->93  <div class="content">94    <div class="section-label">Mobile notifications</div>95 96    <div class="item">97      <div class="texts">98        <div class="title-line">Scheduled digest</div>99        <div class="subtitle">Get all your notifications as a daily digest at 7:00 PM. Tap to customize delivery time</div>100      </div>101      <div class="toggle off"><div class="knob"></div></div>102    </div>103 104    <div class="item">105      <div class="texts">106        <div class="title-line">Subscriptions</div>107        <div class="subtitle">Notify me about activity from the channels I'm subscribed to</div>108      </div>109      <div class="toggle on"><div class="knob"></div></div>110    </div>111 112    <div class="item">113      <div class="texts">114        <div class="title-line">Channel settings</div>115        <div class="subtitle">Tap here to manage notification settings for each subscribed channel</div>116      </div>117      <!-- no toggle for this row -->118    </div>119 120    <div class="item">121      <div class="texts">122        <div class="title-line">Recommended videos</div>123        <div class="subtitle">Notify me of videos I might like based on what I watch</div>124      </div>125      <div class="toggle on"><div class="knob"></div></div>126    </div>127 128    <div class="item">129      <div class="texts">130        <div class="title-line">Activity on my channel</div>131        <div class="subtitle">Notify me about comments and other activity on my channel or videos</div>132      </div>133      <div class="toggle on"><div class="knob"></div></div>134    </div>135 136    <div class="item">137      <div class="texts">138        <div class="title-line">Replies to my comments</div>139        <div class="subtitle">Notify me about replies to my comments</div>140      </div>141      <div class="toggle on"><div class="knob"></div></div>142    </div>143 144    <div class="item">145      <div class="texts">146        <div class="title-line">Mentions</div>147        <div class="subtitle">Notify me when others mention my channel</div>148      </div>149      <div class="toggle on"><div class="knob"></div></div>150    </div>151 152  </div>153 154  <!-- Bottom gesture area -->155  <div class="gesture-area">156    <div class="back-gesture">157      <svg viewBox="0 0 24 24" width="34" height="34"><path fill="#9e9e9e" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>158    </div>159    <div class="nav-pill"></div>160  </div>161 162</div>163</body>164</html>