GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Notifications Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    color: #FFFFFF;24  }25  .time {26    position: absolute;27    left: 36px;28    top: 36px;29    font-size: 44px;30    letter-spacing: 1px;31  }32  .right-icons {33    position: absolute;34    right: 36px;35    top: 30px;36    display: flex;37    align-items: center;38    gap: 22px;39  }40  /* Simple wifi icon */41  .wifi svg, .battery svg { display: block; }42  .battery {43    width: 54px;44    height: 28px;45    border: 3px solid #fff;46    border-radius: 6px;47    position: relative;48  }49  .battery::after {50    content: "";51    position: absolute;52    right: -10px;53    top: 8px;54    width: 6px;55    height: 12px;56    background: #fff;57    border-radius: 2px;58  }59  .battery .level {60    position: absolute;61    left: 4px;62    top: 4px;63    height: 16px;64    width: 32px;65    background: #fff;66    border-radius: 3px;67  }68 69  /* Back arrow */70  .back-btn {71    position: absolute;72    top: 140px;73    left: 36px;74    width: 72px;75    height: 72px;76  }77  .back-btn svg { fill: none; stroke: #FFFFFF; stroke-width: 10; }78 79  /* Title */80  .title {81    position: absolute;82    top: 240px;83    left: 44px;84    font-size: 96px;85    font-weight: 600;86  }87 88  /* App logo placeholder */89  .logo-wrap {90    position: absolute;91    top: 480px;92    left: 0;93    width: 100%;94    display: flex;95    justify-content: center;96  }97  .logo {98    width: 170px;99    height: 170px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    border-radius: 50%;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #555;107    font-weight: 700;108    font-size: 28px;109  }110  .app-name {111    position: absolute;112    top: 680px;113    width: 100%;114    text-align: center;115    font-size: 64px;116    font-weight: 600;117  }118 119  /* Notification card */120  .card {121    position: absolute;122    top: 780px;123    left: 60px;124    width: 960px;125    height: 220px;126    background: #d8e2f2;127    border-radius: 110px;128    display: flex;129    align-items: center;130    padding: 0 60px;131    box-sizing: border-box;132    color: #111;133  }134  .card .label {135    font-size: 52px;136    color: #111;137  }138  .toggle {139    margin-left: auto;140    width: 230px;141    height: 110px;142    background: #3f3f3f;143    border-radius: 80px;144    position: relative;145  }146  .toggle .knob {147    position: absolute;148    left: 18px; /* off position */149    top: 15px;150    width: 80px;151    height: 80px;152    background: #8a8a8a;153    border-radius: 50%;154  }155 156  /* Info text */157  .info-row {158    position: absolute;159    top: 1050px;160    left: 60px;161    display: flex;162    align-items: center;163    gap: 24px;164    color: #bdbdbd;165  }166  .info-icon {167    width: 60px;168    height: 60px;169    border-radius: 50%;170    border: 2px solid #bdbdbd;171    display: flex;172    align-items: center;173    justify-content: center;174    font-weight: 700;175    color: #bdbdbd;176  }177  .info-text {178    font-size: 44px;179  }180 181  /* Home indicator at bottom */182  .home-indicator {183    position: absolute;184    bottom: 40px;185    left: 290px;186    width: 500px;187    height: 10px;188    background: #f0f0f0;189    border-radius: 8px;190    opacity: 0.9;191  }192 193  /* decorative tiny icons near the time to hint status icons */194  .tiny-dots {195    position: absolute;196    top: 40px;197    left: 170px;198    display: flex;199    gap: 16px;200  }201  .tiny-dots span {202    width: 22px;203    height: 22px;204    background: #FFFFFF;205    border-radius: 50%;206    opacity: 0.85;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <div class="status-bar">214    <div class="time">8:22</div>215 216    <div class="tiny-dots">217      <span></span><span></span><span></span><span></span><span></span><span style="width:10px;height:10px;border-radius:50%;opacity:.7;"></span>218    </div>219 220    <div class="right-icons">221      <div class="wifi">222        <svg width="46" height="38" viewBox="0 0 46 38">223          <path d="M23 31c-2.5 0-4.5 2-4.5 4.5S20.5 40 23 40s4.5-2 4.5-4.5S25.5 31 23 31z" fill="#fff"/>224          <path d="M6 17c9-8 25-8 34 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>225          <path d="M12 23c6-5 16-5 22 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>226        </svg>227      </div>228      <div class="battery">229        <div class="level"></div>230      </div>231    </div>232  </div>233 234  <div class="back-btn">235    <svg viewBox="0 0 100 100">236      <path d="M65 15 L25 50 L65 85" />237    </svg>238  </div>239 240  <div class="title">Gmail</div>241 242  <div class="logo-wrap">243    <div class="logo">[IMG: Gmail Logo]</div>244  </div>245  <div class="app-name">Gmail</div>246 247  <div class="card">248    <div class="label">All Gmail notifications</div>249    <div class="toggle">250      <div class="knob"></div>251    </div>252  </div>253 254  <div class="info-row">255    <div class="info-icon">i</div>256    <div class="info-text">You haven't allowed notifications from this app</div>257  </div>258 259  <div class="home-indicator"></div>260 261</div>262</body>263</html>