GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Notifications UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2E3337; /* dark app surface */15    color: #E8ECEF;16    font-family: "Roboto", "Segoe UI", Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .statusbar {21    height: 80px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E8ECEF;27    font-size: 34px;28    letter-spacing: 0.5px;29    opacity: 0.95;30  }31  .status-left { display: flex; align-items: center; gap: 24px; }32  .status-right { display: flex; align-items: center; gap: 22px; }33  .dot {34    width: 12px; height: 12px; border-radius: 50%;35    background: #C8D0D7; opacity: 0.9;36  }37  .ghost {38    width: 20px; height: 20px; border-radius: 50%;39    border: 2px solid #C8D0D7;40    opacity: 0.9;41  }42  .icon-triangle {43    width: 22px; height: 22px;44    border-left: 10px solid transparent;45    border-right: 10px solid transparent;46    border-bottom: 16px solid #C8D0D7;47    opacity: 0.9;48  }49  .battery {50    width: 32px; height: 18px; border: 2px solid #C8D0D7; border-radius: 3px; position: relative;51  }52  .battery::after {53    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #C8D0D7; border-radius: 1px;54  }55  .battery .lvl { position: absolute; left: 2px; top: 2px; height: 12px; width: 18px; background: #C8D0D7; }56 57  /* Top app bar */58  .appbar {59    height: 96px;60    display: flex;61    align-items: center;62    padding: 0 24px;63    position: relative;64  }65  .appbar .title {66    position: absolute; left: 0; right: 0; text-align: center;67    font-weight: 700; font-size: 42px; color: #EDEFF2;68  }69  .nav-back {70    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;71  }72  .nav-back svg { width: 44px; height: 44px; }73 74  /* List and rows */75  .list { margin-top: 14px; }76  .section-divider { height: 1px; background: #3B4044; }77  .row {78    padding: 44px 40px 38px 40px;79    border-top: 1px solid #3B4044;80    display: flex;81    flex-direction: column;82    gap: 16px;83  }84  .row-header {85    display: flex;86    align-items: center;87    justify-content: space-between;88    gap: 16px;89  }90  .row-title {91    font-size: 44px;92    font-weight: 700;93    color: #F1F4F6;94  }95  .row-sub {96    font-size: 30px;97    line-height: 1.45;98    color: #9FA7AD;99    max-width: 900px;100  }101  .row-right {102    display: inline-flex; align-items: center; gap: 16px; color: #A9B1B7; font-size: 30px; font-weight: 700;103  }104  .chevron {105    width: 34px; height: 34px; opacity: 0.8;106  }107 108  .badge-premium {109    background: #EF6C28;110    color: #FFFFFF;111    font-weight: 800;112    font-size: 26px;113    padding: 10px 18px;114    border-radius: 22px;115    display: inline-flex; align-items: center; gap: 10px;116    letter-spacing: 0.5px;117    text-transform: uppercase;118    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);119  }120  .badge-premium .lock {121    width: 20px; height: 20px;122  }123 124  .chips {125    display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;126  }127  .chip {128    background: #3B4044;129    color: #CDD3D8;130    padding: 10px 18px;131    font-size: 26px;132    border-radius: 28px;133  }134 135  .subsection-label {136    padding: 34px 40px 18px 40px;137    color: #B9C0C6;138    font-size: 28px;139    letter-spacing: 1.2px;140    text-transform: uppercase;141  }142 143  /* Bottom gesture bar */144  .gesture-bar {145    position: absolute; bottom: 18px; left: 50%;146    transform: translateX(-50%);147    width: 300px; height: 12px;148    background: #EDEDED; border-radius: 6px; opacity: 0.9;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Status Bar -->156  <div class="statusbar">157    <div class="status-left">158      <div style="width: 60px;"></div>159      <div style="font-weight:600;">5:32</div>160      <div class="ghost"></div>161      <div class="ghost"></div>162      <div class="ghost"></div>163      <div class="ghost"></div>164      <div class="dot"></div>165    </div>166    <div class="status-right">167      <div class="icon-triangle"></div>168      <div class="battery"><div class="lvl"></div></div>169    </div>170  </div>171 172  <!-- App Bar -->173  <div class="appbar">174    <div class="nav-back" aria-label="Back">175      <svg viewBox="0 0 24 24" fill="none">176        <path d="M15 4 L7 12 L15 20" stroke="#D8DEE3" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>177      </svg>178    </div>179    <div class="title">Notifications</div>180  </div>181 182  <!-- List -->183  <div class="list">184 185    <!-- AccuWeather Alerts -->186    <div class="row" style="border-top: 2px solid #3B4044;">187      <div class="row-header">188        <div class="row-title">AccuWeather Alerts™</div>189        <div class="row-right">190          <div class="badge-premium">191            <span>Premium+</span>192            <svg class="lock" viewBox="0 0 24 24" fill="none">193              <rect x="5" y="10" width="14" height="10" rx="2" fill="#FFFFFF" opacity="0.95"/>194              <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"/>195            </svg>196          </div>197        </div>198      </div>199      <div class="row-sub">The most advanced severe weather notifications available.</div>200    </div>201 202    <!-- Government Alerts -->203    <div class="row">204      <div class="row-header">205        <div class="row-title">Government Alerts</div>206        <div class="row-right">207          <span>OFF</span>208          <svg class="chevron" viewBox="0 0 24 24" fill="none">209            <path d="M9 6 L15 12 L9 18" stroke="#A9B1B7" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>210          </svg>211        </div>212      </div>213      <div class="row-sub">Standard watches and warnings that include a map outlining impacted areas and links to more information.</div>214    </div>215 216    <!-- Weather News -->217    <div class="row">218      <div class="row-header">219        <div class="row-title">Weather News</div>220        <div class="row-right">221          <span>ON</span>222          <svg class="chevron" viewBox="0 0 24 24" fill="none">223            <path d="M9 6 L15 12 L9 18" stroke="#A9B1B7" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>224          </svg>225        </div>226      </div>227      <div class="row-sub">The latest in weather-related news, sports, astronomy, and more.</div>228      <div class="chips">229        <div class="chip">TOP STORIES</div>230        <div class="chip">ASTRONOMY</div>231        <div class="chip">AIR QUALITY/ALLERGY</div>232        <div class="chip">SPORTS</div>233      </div>234    </div>235 236    <!-- More Options -->237    <div class="subsection-label">More Options</div>238 239    <!-- System Preferences -->240    <div class="row">241      <div class="row-header">242        <div class="row-title">System Preferences</div>243        <div class="row-right">244          <svg class="chevron" viewBox="0 0 24 24" fill="none">245            <path d="M9 6 L15 12 L9 18" stroke="#A9B1B7" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>246          </svg>247        </div>248      </div>249    </div>250 251    <!-- Persistent Notification -->252    <div class="row" style="border-bottom: 1px solid #3B4044;">253      <div class="row-header">254        <div class="row-title">Persistent Notification</div>255        <div class="row-right">256          <span>ON</span>257          <svg class="chevron" viewBox="0 0 24 24" fill="none">258            <path d="M9 6 L15 12 L9 18" stroke="#A9B1B7" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>259          </svg>260        </div>261      </div>262    </div>263 264  </div>265 266  <!-- Bottom gesture bar -->267  <div class="gesture-bar"></div>268</div>269</body>270</html>