GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>AccuWeather Notifications UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #ffffff;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13  }14 15  /* Status bar */16  .status-bar {17    height: 110px;18    padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #eaeaea; font-size: 40px;21  }22  .status-right {23    display: flex; align-items: center; gap: 22px;24  }25  .status-icon {26    width: 32px; height: 32px; border-radius: 50%;27    border: 2px solid #bdbdbd;28  }29  .battery {30    display: inline-flex; align-items: center; gap: 8px; font-size: 34px; color: #eaeaea;31  }32  .battery svg { width: 46px; height: 26px; }33  .wifi svg { width: 34px; height: 34px; }34 35  /* Back arrow area and title */36  .top-area {37    position: relative;38    padding: 24px 40px 0 40px;39  }40  .back-btn {41    position: absolute; left: 32px; top: 140px;42    width: 64px; height: 64px;43  }44  .title-large {45    margin-top: 210px;46    margin-left: 48px;47    font-size: 112px; font-weight: 500; letter-spacing: -1px;48    color: #e5e5e5;49  }50 51  /* Centered app badge and name */52  .app-center {53    margin-top: 60px;54    display: flex; flex-direction: column; align-items: center; gap: 28px;55  }56  .img-placeholder {57    width: 150px; height: 150px; background: #E0E0E0;58    border: 1px solid #BDBDBD; border-radius: 50%;59    display: flex; align-items: center; justify-content: center;60    color: #757575; font-size: 26px; text-align: center;61  }62  .app-name { font-size: 48px; color: #eaeaea; }63 64  /* Big master toggle card */65  .master-card {66    margin: 52px auto 40px auto;67    width: 960px; min-height: 230px;68    background: #B7F6A1; color: #121212;69    border-radius: 60px; padding: 52px 48px;70    display: flex; align-items: center; justify-content: space-between;71  }72  .card-text {73    font-size: 52px; line-height: 1.15; max-width: 680px;74  }75 76  /* Sections */77  .section {78    padding: 26px 60px 0 60px;79  }80  .section h3 {81    margin: 16px 0 30px 0;82    font-size: 36px; font-weight: 600; color: #9BE784;83  }84 85  /* Rows */86  .row {87    padding: 26px 0;88    margin: 6px 0;89    display: flex; align-items: center; justify-content: space-between;90  }91  .row-left {92    display: flex; align-items: center; gap: 26px;93  }94  .row-text {95    font-size: 48px; line-height: 1.2; color: #f5f5f5;96    max-width: 760px;97  }98  .divider {99    width: 2px; height: 84px; background: #3a3a3a; margin: 0 26px;100  }101 102  /* Toggle */103  .toggle {104    width: 174px; height: 88px; border-radius: 44px;105    background: #6c6c6c; position: relative;106  }107  .toggle .knob {108    position: absolute; top: 9px; left: 10px;109    width: 70px; height: 70px; border-radius: 50%;110    background: #A8F49A;111    box-shadow: 0 2px 4px rgba(0,0,0,0.35);112  }113  .toggle.on { background: #A8F49A; }114  .toggle.on .knob { left: 94px; background: #58D66F; }115 116  /* Bell icon */117  .bell {118    width: 48px; height: 48px;119  }120  .bell path { stroke: #9BE784; fill: none; stroke-width: 4; }121 122  /* Gesture bar */123  .gesture-bar {124    position: absolute; left: 50%; transform: translateX(-50%);125    bottom: 40px; width: 360px; height: 12px; border-radius: 6px;126    background: #d9d9d9; opacity: 0.85;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status-bar">135    <div>11:00</div>136    <div class="status-right">137      <div class="status-icon"></div>138      <div class="status-icon"></div>139      <div class="status-icon"></div>140      <div class="wifi">141        <svg viewBox="0 0 24 24">142          <path d="M2 8c5-4 15-4 20 0M5 11c3-2 11-2 14 0M9 15c2-1 4-1 6 0M12 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>143        </svg>144      </div>145      <div class="battery">146        <svg viewBox="0 0 28 14">147          <rect x="1" y="2" width="22" height="10" rx="2" ry="2" stroke="#eaeaea" fill="none" stroke-width="2"/>148          <rect x="3" y="4" width="16" height="6" fill="#eaeaea"/>149          <rect x="24" y="5" width="3" height="4" fill="#eaeaea"/>150        </svg>151        <span>100%</span>152      </div>153    </div>154  </div>155 156  <div class="top-area">157    <!-- Back arrow -->158    <svg class="back-btn" viewBox="0 0 24 24">159      <path d="M15 19L8 12l7-7" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160    </svg>161 162    <!-- Large title -->163    <div class="title-large">AccuWeather</div>164  </div>165 166  <!-- Centered app logo and name -->167  <div class="app-center">168    <div class="img-placeholder">[IMG: AccuWeather logo]</div>169    <div class="app-name">AccuWeather</div>170  </div>171 172  <!-- Master notifications card -->173  <div class="master-card">174    <div class="card-text">All AccuWeather notifications</div>175    <div class="toggle">176      <div class="knob"></div>177    </div>178  </div>179 180  <!-- Government Alerts section -->181  <div class="section">182    <h3>Government Alerts</h3>183 184    <div class="row">185      <div class="row-left">186        <div class="row-text">All "Government Alerts" notifications</div>187      </div>188      <div class="toggle on">189        <div class="knob"></div>190      </div>191    </div>192 193    <div class="row">194      <div class="row-left">195        <svg class="bell" viewBox="0 0 24 24">196          <path d="M12 3c-3 0-5 2-5 5v3l-2 3h14l-2-3V8c0-3-2-5-5-5M10 19c1 1 3 1 4 0" />197        </svg>198        <div class="row-text">Other Government Alerts</div>199      </div>200      <div class="divider"></div>201      <div class="toggle on">202        <div class="knob"></div>203