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>AccuWeather 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: #121212;15  }16  * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    color: #FFFFFF;26    font-size: 34px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    opacity: 0.95;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37    color: #FFFFFF;38  }39  .icon-circle {40    width: 32px;41    height: 32px;42    border-radius: 50%;43    border: 2px solid #D0D0D0;44    opacity: 0.85;45  }46  .battery {47    display: flex;48    align-items: center;49    gap: 10px;50  }51  .battery svg { width: 44px; height: 24px; }52 53  /* Back arrow */54  .back-btn {55    position: absolute;56    top: 130px;57    left: 28px;58    width: 72px;59    height: 72px;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .back-btn svg {65    width: 44px;66    height: 44px;67    stroke: #FFFFFF;68    stroke-width: 6;69    fill: none;70    opacity: 0.9;71  }72 73  /* Title */74  .title {75    position: absolute;76    top: 220px;77    left: 48px;78    color: #FFFFFF;79    font-size: 108px;80    font-weight: 500;81    letter-spacing: -1px;82  }83 84  /* App header block */85  .app-header {86    position: absolute;87    top: 540px;88    left: 0;89    width: 100%;90    text-align: center;91    color: #EDEDED;92  }93  .app-icon {94    width: 130px;95    height: 130px;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    border-radius: 50%;99    margin: 0 auto 26px auto;100    display: flex;101    align-items: center;102    justify-content: center;103    color: #757575;104    font-size: 22px;105    padding: 6px;106  }107  .app-name {108    font-size: 52px;109    color: #ECECEC;110    font-weight: 600;111  }112 113  /* Notification toggle card */114  .card {115    position: absolute;116    top: 840px;117    left: 48px;118    width: 984px;119    background: #D9E9C8;120    border-radius: 64px;121    padding: 56px 56px;122    display: flex;123    align-items: center;124    justify-content: space-between;125  }126  .card-title {127    color: #111111;128    font-size: 48px;129    line-height: 1.2;130    max-width: 700px;131  }132  .toggle {133    width: 210px;134    height: 96px;135    background: #5A5A5A;136    border-radius: 48px;137    position: relative;138    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);139  }140  .toggle .knob {141    position: absolute;142    top: 14px;143    left: 20px; /* off position */144    width: 68px;145    height: 68px;146    background: #8C8C8C;147    border-radius: 50%;148  }149 150  /* Info row */151  .info-row {152    position: absolute;153    top: 1180px;154    left: 48px;155    display: flex;156    align-items: center;157    gap: 24px;158  }159  .info-icon {160    width: 56px;161    height: 56px;162    border-radius: 28px;163    border: 2px solid #9E9E9E;164    display: flex;165    align-items: center;166    justify-content: center;167    opacity: 0.9;168  }169  .info-icon svg {170    width: 28px;171    height: 28px;172    fill: none;173    stroke: #9E9E9E;174    stroke-width: 6;175  }176  .info-text {177    position: absolute;178    top: 1246px;179    left: 48px;180    width: 980px;181    color: #BDBDBD;182    font-size: 36px;183  }184 185  /* Gesture bar */186  .gesture {187    position: absolute;188    bottom: 50px;189    left: 50%;190    transform: translateX(-50%);191    width: 320px;192    height: 14px;193    background: #FFFFFF;194    border-radius: 8px;195    opacity: 0.85;196  }197</style>198</head>199<body>200<div id="render-target">201  <!-- Status bar -->202  <div class="statusbar">203    <div class="status-left">10:59</div>204    <div class="status-right">205      <div class="icon-circle"></div>206      <div class="icon-circle" style="width: 30px; height: 30px;"></div>207      <div class="icon-circle" style="width: 30px; height: 30px;"></div>208      <div class="battery">209        <svg viewBox="0 0 50 24">210          <rect x="2" y="2" width="40" height="20" rx="4" ry="4" fill="none" stroke="#FFFFFF" stroke-width="3"/>211          <rect x="44" y="7" width="4" height="10" rx="2" fill="#FFFFFF"/>212          <rect x="5" y="5" width="30" height="14" fill="#FFFFFF" opacity="0.9"/>213        </svg>214        <div>100%</div>215      </div>216    </div>217  </div>218 219  <!-- Back arrow -->220  <div class="back-btn">221    <svg viewBox="0 0 24 24">222      <path d="M15 5 L7 12 L15 19" />223    </svg>224  </div>225 226  <!-- Title -->227  <div class="title">AccuWeather</div>228 229  <!-- App header -->230  <div class="app-header">231    <div class="app-icon">[IMG: AccuWeather Icon]</div>232    <div class="app-name">AccuWeather</div>233  </div>234 235  <!-- Toggle card -->236  <div class="card">237    <div class="card-title">All AccuWeather<br>notifications</div>238    <div class="toggle">239      <div class="knob"></div>240    </div>241  </div>242 243  <!-- Info row and text -->244  <div class="info-row">245    <div class="info-icon">246      <svg viewBox="0 0 24 24">247        <circle cx="12" cy="12" r="8"></circle>248        <line x1="12" y1="8" x2="12" y2="8"></line>249        <line x1="12" y1="11" x2="12" y2="16"></line>250      </svg>251    </div>252  </div>253  <div class="info-text">You haven't allowed notifications from this app</div>254 255  <!-- Gesture bar -->256  <div class="gesture"></div>257</div>258</body>259</html>