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>Notifications Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2160px;10    position: relative; overflow: hidden;11    background: #121212; color: #FFFFFF;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 96px;17    padding: 0 28px;18    display: flex; align-items: center; justify-content: space-between;19    color: #ffffff; font-size: 36px;20  }21  .status-right { display: flex; align-items: center; gap: 18px; }22  .icon { width: 42px; height: 42px; }23  .battery-text { font-size: 32px; opacity: 0.9; }24 25  /* Header */26  .header {27    position: absolute; top: 96px; left: 0; width: 100%;28    padding: 10px 28px 0 28px;29  }30  .back {31    width: 70px; height: 70px; display: inline-block; vertical-align: middle;32  }33  .title {34    display: block;35    font-size: 68px; font-weight: 700; letter-spacing: 0.5px;36    margin: 12px 0 8px 0;37  }38 39  /* List */40  .list { position: absolute; left: 0; top: 260px; width: 100%; }41  .item {42    display: flex; align-items: flex-start;43    padding: 34px 32px;44    border-bottom: 1px solid #1E1E1E;45  }46  .texts { max-width: 760px; }47  .label {48    font-size: 44px; font-weight: 600; line-height: 1.2; color: #FFFFFF;49  }50  .sublabel {51    font-size: 32px; color: #9E9E9E; margin-top: 14px; line-height: 1.36;52  }53 54  /* Switch */55  .switch {56    margin-left: auto;57    width: 150px; height: 76px; border-radius: 38px;58    position: relative; background: #2A2A2A;59    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);60  }61  .switch.on { background: #1E88E5; }62  .knob {63    position: absolute; top: 8px; left: 8px;64    width: 60px; height: 60px; border-radius: 30px;65    background: #4DA3FF; box-shadow: 0 2px 6px rgba(0,0,0,0.35);66    transition: left 0.2s ease;67  }68  .switch.on .knob { left: 82px; }69 70  /* Bottom pill */71  .bottom-pill {72    position: absolute; left: 50%; bottom: 36px;73    width: 170px; height: 18px; border-radius: 9px;74    background: #9A9A9A; opacity: 0.6; transform: translateX(-50%);75  }76</style>77</head>78<body>79<div id="render-target">80 81  <!-- Status Bar -->82  <div class="status-bar">83    <div class="status-left">2:13</div>84    <div class="status-right">85      <!-- simplified icons -->86      <svg class="icon" viewBox="0 0 24 24">87        <path fill="#FFFFFF" d="M12 18l5-5c-1.7-1.7-3.9-2.7-5-2.7S8.7 11.3 7 13l5 5z" opacity="0.9"/>88        <path fill="#FFFFFF" d="M2 9c2.8-2.8 6.5-4.5 10-4.5S19.2 6.2 22 9l-2 2c-2.3-2.3-5.4-3.7-8-3.7S6.3 8.7 4 11L2 9z" opacity="0.6"/>89      </svg>90      <svg class="icon" viewBox="0 0 24 24">91        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#FFFFFF"/>92        <rect x="20" y="9" width="2.5" height="6" fill="#FFFFFF"/>93      </svg>94      <div class="battery-text">100%</div>95    </div>96  </div>97 98  <!-- Header -->99  <div class="header">100    <svg class="back" viewBox="0 0 24 24">101      <path fill="#FFFFFF" d="M15.5 19l-7-7 7-7 1.4 1.4L10.3 12l6.6 6.6z"/>102    </svg>103    <span class="title">Notifications</span>104  </div>105 106  <!-- List of settings -->107  <div class="list">108 109    <div class="item">110      <div class="texts">111        <div class="label">Recommended videos</div>112        <div class="sublabel">Notify me of videos I might like based on what I watch</div>113      </div>114      <div class="switch on"><div class="knob"></div></div>115    </div>116 117    <div class="item">118      <div class="texts">119        <div class="label">Activity on my channel</div>120        <div class="sublabel">Notify me about comments and other activity on my channel or videos</div>121      </div>122      <div class="switch on"><div class="knob"></div></div>123    </div>124 125    <div class="item">126      <div class="texts">127        <div class="label">Replies to my comments</div>128        <div class="sublabel">Notify me about replies to my comments</div>129      </div>130      <div class="switch on"><div class="knob"></div></div>131    </div>132 133    <div class="item">134      <div class="texts">135        <div class="label">Mentions</div>136        <div class="sublabel">Notify me when others mention my channel</div>137      </div>138      <div class="switch on"><div class="knob"></div></div>139    </div>140 141    <div class="item">142      <div class="texts">143        <div class="label">Shared content</div>144        <div class="sublabel">Notify me when others share my content on their channels</div>145      </div>146      <div class="switch on"><div class="knob"></div></div>147    </div>148 149    <div class="item">150      <div class="texts">151        <div class="label">Product updates</div>152        <div class="sublabel">Notify me of new product updates and announcements</div>153      </div>154      <div class="switch on"><div class="knob"></div></div>155    </div>156 157    <div class="item">158      <div class="texts">159        <div class="label">Watch on TV</div>160        <div class="sublabel">Suggest videos I might like to watch on TV.</div>161      </div>162      <div class="switch on"><div class="knob"></div></div>163    </div>164 165    <div class="item">166      <div class="texts">167        <div class="label">Disable sounds &amp; vibrations</div>168        <div class="sublabel">Silence notifications during the hours you specify. Tap to customize time.</div>169      </div>170      <div class="switch on"><div class="knob"></div></div>171    </div>172 173  </div>174 175  <!-- Bottom navigation pill -->176  <div class="bottom-pill"></div>177 178</div>179</body>180</html>