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; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2d3236;15    color: #e7ecef;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #cfd8dc;26    font-size: 36px;27    letter-spacing: 0.5px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .status-icon {35    width: 34px;36    height: 34px;37    opacity: 0.9;38  }39  .battery {40    display: flex;41    align-items: center;42    gap: 12px;43    font-size: 34px;44  }45 46  /* App bar */47  .app-bar {48    height: 120px;49    border-top: 1px solid #3a4044;50    border-bottom: 1px solid #3a4044;51    display: flex;52    align-items: center;53    padding: 0 24px;54    position: relative;55  }56  .back-btn {57    width: 84px;58    height: 84px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63  .title {64    position: absolute;65    left: 50%;66    transform: translateX(-50%);67    font-size: 44px;68    font-weight: 700;69    color: #e6eaee;70  }71 72  /* List */73  .content {74    padding: 10px 40px 0 40px;75  }76  .row {77    padding: 42px 0;78    border-bottom: 1px solid #3a4044;79    display: flex;80    align-items: center;81    justify-content: space-between;82  }83  .row .text {84    max-width: 760px;85  }86  .title-lg {87    font-size: 40px;88    font-weight: 700;89    color: #e7ecef;90    margin-bottom: 14px;91  }92  .desc {93    font-size: 30px;94    color: #9aa4aa;95    line-height: 1.4;96  }97  .right {98    display: flex;99    align-items: center;100    gap: 18px;101  }102  .pill {103    background: #ff6a00;104    color: #fff;105    font-size: 28px;106    font-weight: 800;107    padding: 12px 24px;108    border-radius: 26px;109    display: inline-flex;110    align-items: center;111    gap: 12px;112  }113  .off {114    color: #8c9499;115    font-size: 32px;116    font-weight: 700;117  }118  .chev {119    width: 36px;120    height: 36px;121    opacity: 0.9;122  }123 124  .section-label {125    padding: 34px 0 22px 0;126    color: #b8c0c5;127    font-size: 30px;128    letter-spacing: 1.8px;129    font-weight: 800;130  }131 132  /* Bottom gesture bar */133  .gesture {134    position: absolute;135    bottom: 40px;136    left: 50%;137    transform: translateX(-50%);138    width: 220px;139    height: 14px;140    background: #e9e9ea;141    border-radius: 20px;142    opacity: 0.85;143  }144</style>145</head>146<body>147<div id="render-target">148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="status-left">10:58</div>151    <div class="status-right">152      <!-- simple circular icon -->153      <svg class="status-icon" viewBox="0 0 24 24">154        <circle cx="12" cy="12" r="10" fill="none" stroke="#cfd8dc" stroke-width="2"/>155      </svg>156      <!-- wifi icon -->157      <svg class="status-icon" viewBox="0 0 24 24">158        <path d="M2 8c5.5-5.5 14.5-5.5 20 0M6 12c3.7-3.7 8.3-3.7 12 0M10 16c1.8-1.8 4.2-1.8 6 0M12 20l2-2-2-2-2 2 2 2z" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>159      </svg>160      <div class="battery">161        <svg class="status-icon" viewBox="0 0 28 24">162          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#cfd8dc" stroke-width="2"/>163          <rect x="22" y="9" width="4" height="6" fill="#cfd8dc"/>164          <rect x="4" y="8" width="14" height="8" fill="#cfd8dc"/>165        </svg>166        <span>100%</span>167      </div>168    </div>169  </div>170 171  <!-- App Bar -->172  <div class="app-bar">173    <div class="back-btn">174      <svg width="40" height="40" viewBox="0 0 80 80">175        <path d="M50 16 L26 40 L50 64" fill="none" stroke="#cfd8dc" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>176      </svg>177    </div>178    <div class="title">Notifications</div>179  </div>180 181  <!-- Content -->182  <div class="content">183    <!-- AccuWeather Alerts -->184    <div class="row">185      <div class="text">186        <div class="title-lg">AccuWeather Alerts™</div>187        <div class="desc">The most advanced severe weather notifications available.</div>188      </div>189      <div class="right">190        <div class="pill">191          <span>PREMIUM+</span>192          <svg width="22" height="22" viewBox="0 0 24 24">193            <rect x="5" y="10" width="14" height="9" rx="2" fill="#fff"/>194            <path d="M8 10V7a4 4 0 018 0v3" fill="none" stroke="#fff" stroke-width="2"/>195          </svg>196        </div>197      </div>198    </div>199 200    <!-- Government Alerts -->201    <div class="row">202      <div class="text">203        <div class="title-lg">Government Alerts</div>204        <div class="desc">Standard watches and warnings that include a map outlining impacted areas and links to more information.</div>205      </div>206      <div class="right">207        <div class="off">OFF</div>208        <svg class="chev" viewBox="0 0 24 24">209          <path d="M9 5l7 7-7 7" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>210        </svg>211      </div>212    </div>213 214    <!-- Weather News -->215    <div class="row">216      <div class="text">217        <div class="title-lg">Weather News</div>218        <div class="desc">The latest in weather-related news, sports, astronomy, and more.</div>219      </div>220      <div class="right">221        <div class="off">OFF</div>222        <svg class="chev" viewBox="0 0 24 24">223          <path d="M9 5l7 7-7 7" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>224        </svg>225      </div>226    </div>227 228    <!-- More Options label -->229    <div class="section-label">MORE OPTIONS</div>230 231    <!-- System Preferences -->232    <div class="row">233      <div class="text">234        <div class="title-lg" style="margin-bottom:0;">System Preferences</div>235      </div>236      <div class="right">237        <svg class="chev" viewBox="0 0 24 24">238          <path d="M9 5l7 7-7 7" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239        </svg>240      </div>241    </div>242 243    <!-- Persistent Notification -->244    <div class="row">245      <div class="text">246        <div class="title-lg" style="margin-bottom:0;">Persistent Notification</div>247      </div>248      <div class="right">249        <div class="off">OFF</div>250        <svg class="chev" viewBox="0 0 24 24">251          <path d="M9 5l7 7-7 7" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252        </svg>253      </div>254    </div>255  </div>256 257  <div class="gesture"></div>258</div>259</body>260</html>