GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Notifications UI</title>5<style>6  * { box-sizing: border-box; }7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1f2225;14    color: #e9ecef;15  }16  .status-bar {17    height: 88px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #ffffff;23    font-size: 38px;24    letter-spacing: 0.5px;25  }26  .status-right {27    display: flex;28    align-items: center;29    gap: 26px;30    opacity: 0.85;31  }32  .icon-dot { width: 14px; height: 14px; background: #ffffff; border-radius: 50%; }33  .icon-circle { width: 28px; height: 28px; border: 3px solid #ffffff; border-radius: 50%; opacity: 0.85; }34  .battery {35    width: 56px; height: 28px; border: 3px solid #ffffff; border-radius: 6px; position: relative;36  }37  .battery::after {38    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #ffffff; border-radius: 2px;39  }40  .battery-level {41    position: absolute; left: 4px; top: 4px; height: 18px; width: 36px; background: #ffffff; border-radius: 3px;42  }43 44  .header {45    height: 120px;46    display: flex;47    align-items: center;48    padding: 0 36px;49    border-bottom: 1px solid #2e3236;50  }51  .back {52    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 18px;53  }54  .header h1 {55    margin: 0;56    font-size: 52px;57    font-weight: 600;58    color: #ffffff;59  }60 61  .content { padding: 12px 0 0 0; }62  .section {63    padding: 36px 36px 28px 36px;64    border-bottom: 1px solid #2e3236;65  }66  .section-header {67    display: flex;68    align-items: center;69    justify-content: space-between;70  }71  .section-title {72    font-size: 46px;73    font-weight: 600;74    letter-spacing: 0.2px;75    color: #ffffff;76  }77  .section-sub {78    margin-top: 18px;79    font-size: 34px;80    line-height: 1.38;81    color: #aab0b7;82  }83  .pill-premium {84    display: inline-flex;85    align-items: center;86    gap: 12px;87    background: #f57c00;88    color: #fff;89    font-weight: 700;90    font-size: 30px;91    padding: 12px 22px;92    border-radius: 24px;93  }94  .lock svg { display: block; }95  .status-label {96    color: #cdd3d9;97    font-size: 34px;98    margin-right: 12px;99  }100  .chevron {101    width: 40px; height: 40px; margin-left: 12px;102  }103  .right-part {104    display: flex; align-items: center; gap: 18px;105  }106 107  .chips {108    margin-top: 22px;109    display: flex;110    flex-wrap: wrap;111    gap: 16px;112  }113  .chip {114    padding: 12px 18px;115    border-radius: 24px;116    background: #2b3035;117    color: #d9dee3;118    font-size: 30px;119    font-weight: 600;120    letter-spacing: 0.3px;121    text-transform: uppercase;122  }123 124  .section-label {125    padding: 26px 36px;126    color: #9ca3aa;127    font-size: 32px;128    letter-spacing: 1px;129    border-bottom: 1px solid #2e3236;130  }131 132  .item {133    padding: 36px 36px;134    border-bottom: 1px solid #2e3236;135    display: flex; align-items: center; justify-content: space-between;136  }137  .item-title {138    font-size: 44px; font-weight: 600; color: #ffffff;139  }140 141  /* Smaller helpers */142  .location-chips { margin-top: 22px; }143  .location-chip { background: #2b3035; color: #d9dee3; padding: 12px 18px; border-radius: 24px; font-size: 30px; font-weight: 700; display: inline-block; }144 145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-left">8:20</div>153    <div class="status-right">154      <div class="icon-circle"></div>155      <div class="icon-circle"></div>156      <div class="icon-dot"></div>157      <div class="icon-circle"></div>158      <div class="battery"><div class="battery-level"></div></div>159    </div>160  </div>161 162  <!-- Header -->163  <div class="header">164    <div class="back">165      <svg width="44" height="44" viewBox="0 0 24 24">166        <path d="M15 5l-8 7 8 7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>167      </svg>168    </div>169    <h1>Notifications</h1>170  </div>171 172  <div class="content">173    <!-- AccuWeather Alerts -->174    <div class="section">175      <div class="section-header">176        <div class="section-title">AccuWeather Alerts™</div>177        <div class="pill-premium">178          <span>PREMIUM+</span>179          <span class="lock">180            <svg width="22" height="22" viewBox="0 0 22 22">181              <circle cx="11" cy="7" r="5" fill="none" stroke="#fff" stroke-width="2"></circle>182              <rect x="5" y="9" width="12" height="10" rx="2" fill="#fff"></rect>183            </svg>184          </span>185        </div>186      </div>187      <div class="section-sub">The most advanced severe weather notifications available.</div>188    </div>189 190    <!-- Government Alerts -->191    <div class="section">192      <div class="section-header">193        <div class="section-title">Government Alerts</div>194        <div class="right-part">195          <div class="status-label">ON</div>196          <svg class="chevron" viewBox="0 0 24 24">197            <path d="M9 6l6 6-6 6" fill="none" stroke="#9ca3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>198          </svg>199        </div>200      </div>201      <div class="section-sub">Standard watches and warnings that include a map outlining impacted areas and links to more information.</div>202      <div class="location-chips">203        <span class="location-chip">ORLÉANS, FR</span>204      </div>205    </div>206 207    <!-- Weather News -->208    <div class="section">209      <div class="section-header">210        <div class="section-title">Weather News</div>211        <div class="right-part">212          <div class="status-label">ON</div>213          <svg class="chevron" viewBox="0 0 24 24">214            <path d="M9 6l6 6-6 6" fill="none" stroke="#9ca3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>215          </svg>216        </div>217      </div>218      <div class="section-sub">The latest in weather-related news, sports, astronomy, and more.</div>219      <div class="chips">220        <div class="chip">Top Stories</div>221        <div class="chip">Astronomy</div>222        <div class="chip">Air Quality/Allergy</div>223        <div class="chip">Sports</div>224      </div>225    </div>226 227    <!-- More Options -->228    <div class="section-label">MORE OPTIONS</div>229 230    <!-- System Preferences -->231    <div class="item">232      <div class="item-title">System Preferences</div>233      <svg class="chevron" viewBox="0 0 24 24">234        <path d="M9 6l6 6-6 6" fill="none" stroke="#9ca3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>235      </svg>236    </div>237 238    <!-- Persistent Notification -->239    <div class="item">240      <div class="item-title">Persistent Notification</div>241      <div class="right-part">242        <div class="status-label">ON</div>243        <svg class="chevron" viewBox="0 0 24 24">244          <path d="M9 6l6 6-6 6" fill="none" stroke="#9ca3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>245        </svg>246      </div>247    </div>248 249  </div>250 251</div>252</body>253</html>