GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=device-width, 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    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0f0f0f;14    color: #fff;15  }16 17  /* Status bar (top-most) */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    right: 0;23    height: 96px;24    padding: 0 34px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #eaeaea;29    font-size: 34px;30    letter-spacing: 0.5px;31    background: #0b0b0b;32  }33  .status-left {34    display: flex; align-items: center; gap: 22px;35  }36  .sb-dot {37    width: 24px; height: 24px; border-radius: 50%; background: #cfcfcf; opacity: 0.85;38  }39  .status-right { display: flex; align-items: center; gap: 24px; }40  .wifi {41    width: 34px; height: 26px; border: 3px solid #fff; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg);42    border-radius: 6px;43  }44  .battery {45    position: relative;46    width: 62px; height: 30px; border: 3px solid #fff; border-radius: 6px;47  }48  .battery::after {49    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #fff; border-radius: 2px;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 96px;56    left: 0; right: 0;57    height: 160px;58    display: flex; align-items: center;59    padding: 0 40px;60    background: #121212;61    box-sizing: border-box;62  }63  .back-btn {64    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 22px;65  }66  .title {67    font-size: 64px; font-weight: 700; letter-spacing: 0.3px;68  }69 70  /* Content */71  .content {72    position: absolute;73    top: 256px; left: 0; right: 0;74    padding: 40px;75    box-sizing: border-box;76  }77  .intro {78    color: #b9b9b9;79    font-size: 38px;80    line-height: 1.4;81    margin: 10px 0 60px 0;82    max-width: 940px;83  }84 85  .setting-row {86    display: flex;87    align-items: center;88    justify-content: space-between;89    padding: 40px 0;90  }91  .setting-title {92    font-size: 50px;93    font-weight: 600;94    color: #ffffff;95  }96  .setting-desc {97    color: #8e8e8e;98    font-size: 34px;99    line-height: 1.55;100    max-width: 940px;101    margin: 24px 0 28px 0;102  }103 104  /* Toggle */105  .toggle {106    width: 150px; height: 80px; border-radius: 50px;107    position: relative;108    background: #3a2a25;109    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);110  }111  .toggle.on {112    background: #5a3a2d;113  }114  .toggle .knob {115    position: absolute; top: 8px; left: 10px;116    width: 64px; height: 64px; border-radius: 50%;117    background: #ff8a65;118    box-shadow: 0 2px 0 rgba(0,0,0,0.35);119    transition: left 0.25s ease;120  }121  .toggle.on .knob { left: 76px; }122 123  /* Bottom gesture bar */124  .gesture-bar {125    position: absolute;126    bottom: 26px; left: 50%;127    transform: translateX(-50%);128    width: 480px; height: 12px; background: #e6e6e6; border-radius: 8px; opacity: 0.85;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Simulated Android status bar -->136  <div class="status-bar">137    <div class="status-left">138      <div style="font-weight:700;">8:41</div>139      <div class="sb-dot"></div>140      <div class="sb-dot"></div>141      <div class="sb-dot" style="width:22px;height:22px;opacity:.7;"></div>142      <div class="sb-dot" style="width:10px;height:10px;opacity:.5;"></div>143    </div>144    <div class="status-right">145      <div class="wifi"></div>146      <div class="battery"></div>147    </div>148  </div>149 150  <!-- App bar with back and title -->151  <div class="app-bar">152    <div class="back-btn">153      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">154        <path d="M15.5 19.5L8 12l7.5-7.5 1.5 1.5L11 12l6 6-1.5 1.5z"/>155      </svg>156    </div>157    <div class="title">Notifications</div>158  </div>159 160  <!-- Content -->161  <div class="content">162    <div class="intro">We will inform you about likes and answers to your comments.</div>163 164    <div class="setting-row">165      <div class="setting-title">Replies to your comments</div>166      <div class="toggle on"><div class="knob"></div></div>167    </div>168 169    <div class="setting-desc">Never miss out again on one of our delicious new recipe creations.</div>170 171    <div class="setting-row">172      <div class="setting-title">Weekly cooking inspiration</div>173      <div class="toggle on"><div class="knob"></div></div>174    </div>175  </div>176 177  <div class="gesture-bar"></div>178</div>179</body>180</html>