GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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: #F6F4E3; /* soft cream */15    color: #202020;16  }17 18  /* Status bar (top system info) */19  .status-bar {20    height: 100px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #5A5A5A;26    font-size: 40px;27    letter-spacing: 1px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .icon-small svg { width: 40px; height: 40px; fill: #5A5A5A; }35 36  /* Header and navigation */37  .nav-back {38    position: absolute;39    left: 40px;40    top: 130px;41    width: 70px;42    height: 70px;43  }44  .nav-back svg { width: 70px; height: 70px; stroke: #2D2D2D; stroke-width: 12; fill: none; }45  .page-title {46    margin: 210px 0 20px 40px;47    font-size: 110px;48    font-weight: 700;49    color: #222;50  }51 52  /* Content layout */53  .content { padding: 0 50px; }54  .section-title {55    color: #6C6680;56    font-weight: 700;57    font-size: 40px;58    margin: 60px 0 30px 10px;59  }60  .list-item {61    display: flex;62    align-items: center;63    padding: 34px 10px;64    border-radius: 18px;65  }66  .item-left {67    width: 120px;68    display: flex;69    align-items: center;70    justify-content: center;71  }72  .item-left svg {73    width: 70px; height: 70px; stroke: #2D2D2D; stroke-width: 10; fill: none;74  }75  .item-main {76    flex: 1;77    padding: 0 10px;78  }79  .item-title {80    font-size: 54px;81    font-weight: 700;82    color: #222;83    line-height: 1.2;84  }85  .item-sub {86    font-size: 36px;87    color: #656565;88    margin-top: 10px;89  }90  .item-right {91    width: 260px;92    display: flex;93    align-items: center;94    justify-content: flex-end;95    gap: 20px;96  }97  .link-purple {98    color: #5A3FD3;99    font-size: 42px;100    font-weight: 700;101  }102  .chev-right svg { width: 60px; height: 60px; stroke: #2D2D2D; stroke-width: 12; fill: none; }103 104  /* Toggle switch */105  .toggle {106    width: 220px;107    height: 110px;108    background: #6B52D7;109    border-radius: 80px;110    position: relative;111    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.25);112  }113  .toggle::after {114    content: "";115    position: absolute;116    top: 14px;117    left: 14px;118    width: 82px;119    height: 82px;120    background: #FFFFFF;121    border-radius: 50%;122    box-shadow: 0 4px 8px rgba(0,0,0,0.18);123    transition: left 0.2s ease;124  }125  .toggle.on::after { left: 124px; }126 127  /* Bottom gesture area */128  .bottom-bar {129    position: absolute;130    left: 0; right: 0; bottom: 0;131    height: 140px;132    background: #8A8C82;133    display: flex;134    align-items: center;135    justify-content: center;136  }137  .gesture-pill {138    width: 360px;139    height: 18px;140    background: #303030;141    border-radius: 12px;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Top Status Bar -->149  <div class="status-bar">150    <div>3:55</div>151    <div class="status-icons">152      <div style="font-size:40px;">32°</div>153      <div class="icon-small">154        <!-- Globe -->155        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18M12 3v18M6 6c3 2 9 2 12 0M6 18c3-2 9-2 12 0" stroke="#5A5A5A" stroke-width="2" fill="none"/></svg>156      </div>157      <div class="icon-small">158        <!-- Download arrow -->159        <svg viewBox="0 0 24 24"><path d="M12 4v10M7 9l5 5 5-5" stroke="#5A5A5A" stroke-width="2" fill="none"/><path d="M5 19h14" stroke="#5A5A5A" stroke-width="2"/></svg>160      </div>161      <div class="icon-small">162        <!-- Cloud -->163        <svg viewBox="0 0 24 24"><path d="M7 16h10a4 4 0 0 0 0-8 5 5 0 0 0-9.5-1.5A4 4 0 0 0 7 16z" fill="#5A5A5A"/></svg>164      </div>165      <div class="icon-small">166        <!-- Wifi -->167        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 20l1 1-1 1-1-1 1-1" stroke="#5A5A5A" stroke-width="2" fill="none" stroke-linecap="round"/></svg>168      </div>169      <div class="icon-small">170        <!-- Battery -->171        <svg viewBox="0 0 30 24"><rect x="2" y="5" width="22" height="14" rx="2" ry="2" fill="none" stroke="#5A5A5A" stroke-width="2"></rect><rect x="4" y="7" width="14" height="10" fill="#5A5A5A"></rect><rect x="24" y="9" width="4" height="6" fill="#5A5A5A"></rect></svg>172      </div>173    </div>174  </div>175 176  <!-- Back button -->177  <div class="nav-back">178    <svg viewBox="0 0 24 24"><path d="M15 5l-8 7 8 7" /></svg>179  </div>180 181  <!-- Title -->182  <div class="page-title">Notifications</div>183 184  <!-- Content -->185  <div class="content">186 187    <div class="section-title">Status Bar</div>188 189    <!-- Notification Bar -->190    <div class="list-item">191      <div class="item-left">192        <svg viewBox="0 0 24 24"><path d="M6 10a6 6 0 0 1 12 0v4l2 2H4l2-2v-4"></path><path d="M10 18c0 1 1 2 2 2s2-1 2-2" /></svg>193      </div>194      <div class="item-main">195        <div class="item-title">Notification Bar</div>196        <div class="item-sub">Turn On</div>197      </div>198      <div class="item-right">199        <div class="toggle on"></div>200      </div>201    </div>202 203    <!-- Show Notification Bar Extension -->204    <div class="list-item">205      <div class="item-left">206        <svg viewBox="0 0 24 24">207          <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" />208          <path d="M8 8l-5 0 0-5M16 8l5 0 0-5M8 16l-5 0 0 5M16 16l5 0 0 5" opacity="0"/>209        </svg>210      </div>211      <div class="item-main">212        <div class="item-title">Show Notification Bar Extension</div>213        <div class="item-sub">Turn On</div>214      </div>215      <div class="item-right">216        <div class="toggle on"></div>217      </div>218    </div>219 220    <!-- Location -->221    <div class="list-item">222      <div class="item-left">223        <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z"></path><circle cx="12" cy="10" r="3"></circle></svg>224      </div>225      <div class="item-main">226        <div class="item-title">Location</div>227      </div>228      <div class="item-right">229        <div class="link-purple">My Location</div>230      </div>231    </div>232 233    <!-- Notification Bar Style -->234    <div class="list-item">235      <div class="item-left">236        <svg viewBox="0 0 24 24">237          <rect x="3" y="3" width="8" height="8" rx="1" ry="1"></rect>238          <rect x="13" y="3" width="8" height="8" rx="1" ry="1"></rect>239          <rect x="3" y="13" width="8" height="8" rx="1" ry="1"></rect>240          <rect x="13" y="13" width="8" height="8" rx="1" ry="1"></rect>241        </svg>242      </div>243      <div class="item-main">244        <div class="item-title">Notification Bar Style</div>245      </div>246      <div class="item-right chev-right">247        <svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>248      </div>249    </div>250 251    <div class="section-title">Daily Weather</div>252 253    <!-- Daily Weather -->254    <div class="list-item">255      <div class="item-left">256        <svg viewBox="0 0 24 24">257          <rect x="3" y="5" width="18" height="12" rx="2" ry="2"></rect>258          <path d="M7 17l-2 3" />259          <path d="M6 9h12M6 12h9" />260        </svg>261      </div>262      <div class="item-main">263        <div class="item-title">Daily Weather</div>264        <div class="item-sub">Morning and evening weather notification and display weather briefing</div>265      </div>266      <div class="item-right">267        <div class="toggle on"></div>268      </div>269    </div>270 271    <div class="section-title">Alert</div>272 273    <!-- Weather Alert Notification -->274    <div class="list-item">275      <div class="item-left">276        <svg viewBox="0 0 24 24">277          <path d="M12 4l9 16H3L12 4z"></path>278          <path d="M12 9v5M12 17v2" />279        </svg>280      </div>281      <div class="item-main">282        <div class="item-title">Weather Alert Notification</div>283        <div class="item-sub">Turn On</div>284      </div>285      <div class="item-right">286        <div class="toggle on"></div>287      </div>288    </div>289 290  </div>291 292  <!-- Bottom gesture area -->293  <div class="bottom-bar">294    <div class="gesture-pill"></div>295  </div>296 297</div>298</body>299</html>