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>Gmail Notifications UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #EDEDED; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15  }16 17  /* Top bars */18  .status-bar {19    height: 110px;20    background: #3a3a3a;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 40px;25    font-size: 40px;26    letter-spacing: 1px;27  }28  .status-icons { margin-left: 20px; font-size: 36px; opacity: 0.9; }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 20px;34    font-size: 36px;35    opacity: 0.95;36  }37 38  .app-bar {39    height: 160px;40    background: #4a4a4a;41    display: flex;42    align-items: center;43    padding: 0 40px;44    box-shadow: 0 2px 0 rgba(255,255,255,0.05);45  }46  .app-title {47    font-size: 60px;48    margin-left: 20px;49  }50  .back-icon {51    width: 72px; height: 72px;52  }53 54  /* Header icon and title */55  .app-header {56    padding: 40px 60px 20px 60px;57  }58  .gmail-icon {59    width: 140px; height: 140px; border-radius: 70px;60    background: #E0E0E0; border: 1px solid #BDBDBD;61    display: flex; align-items: center; justify-content: center;62    color: #757575; font-size: 28px; margin: 10px 0;63  }64  .header-title {65    font-size: 56px; font-weight: 600; margin-top: 10px;66  }67 68  /* Big master toggle pill */69  .pill {70    margin: 30px 60px;71    background: #c8dcff;72    color: #0a0a0a;73    border-radius: 60px;74    padding: 40px 40px;75    display: flex;76    align-items: center;77    justify-content: space-between;78  }79  .pill .label {80    font-size: 46px;81  }82 83  /* Sections and rows */84  .section {85    margin: 30px 60px 10px 60px;86    border-bottom: 1px solid rgba(255,255,255,0.08);87    padding-bottom: 30px;88  }89  .email {90    color: #a9c6ff;91    font-size: 34px;92    margin-bottom: 18px;93  }94  .row {95    display: flex; align-items: center; justify-content: space-between;96    padding: 22px 0;97  }98  .row .text-block {99    display: flex; align-items: center; gap: 24px;100  }101  .row .title {102    font-size: 48px;103  }104  .row .subtitle {105    font-size: 32px; color: #B0B0B0; margin-top: 6px;106  }107 108  .bell-icon { width: 54px; height: 54px; flex: 0 0 auto; opacity: 0.85; }109 110  /* Toggle */111  .toggle {112    width: 160px; height: 84px; border-radius: 42px;113    background: #94a7c6;114    position: relative;115    display: inline-block;116    margin-left: 30px;117  }118  .toggle::after {119    content: "";120    position: absolute;121    top: 8px; left: 10px;122    width: 68px; height: 68px; border-radius: 50%;123    background: #cfe1ff;124    box-shadow: 0 1px 2px rgba(0,0,0,0.3);125  }126  .toggle.on {127    background: #7b90b3;128  }129  .toggle.on::after {130    left: 82px;131  }132  .divider-toggle {133    display: flex; align-items: center; gap: 30px;134  }135  .divider {136    width: 1px; height: 90px; background: rgba(255,255,255,0.15);137  }138 139  /* Gesture handle */140  .gesture {141    position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);142    width: 380px; height: 10px; background: rgba(255,255,255,0.7); border-radius: 6px;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <!-- Status Bar -->150  <div class="status-bar">151    <div>9:06</div>152    <div class="status-icons">• • • • •</div>153    <div class="status-right">◦ ◦</div>154  </div>155 156  <!-- App Bar -->157  <div class="app-bar">158    <svg class="back-icon" viewBox="0 0 24 24">159      <path d="M15 6 L9 12 L15 18" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>160      <path d="M9 12 H22" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>161    </svg>162    <div class="app-title">Gmail</div>163  </div>164 165  <!-- Header -->166  <div class="app-header">167    <div class="gmail-icon">[IMG: Gmail app icon]</div>168    <div class="header-title">Gmail</div>169  </div>170 171  <!-- Master notifications pill -->172  <div class="pill">173    <div class="label">All Gmail notifications</div>174    <div class="toggle on"></div>175  </div>176 177  <!-- Account 1 -->178  <div class="section">179    <div class="email">amelia.miller2709@gmail.com</div>180    <div class="row">181      <div class="title">All "amelia.miller2709@gmail.com" notifications</div>182      <div class="toggle on"></div>183    </div>184 185    <div class="row">186      <div class="text-block">187        <svg class="bell-icon" viewBox="0 0 24 24">188          <path d="M6 9a6 6 0 0112 0v5l2 2H4l2-2V9" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>189          <path d="M10 19a2 2 0 004 0" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round"/>190        </svg>191        <div>192          <div class="title">Mail</div>193          <div class="subtitle">About 2 notifications per day</div>194        </div>195      </div>196      <div class="divider-toggle">197        <div class="divider"></div>198        <div class="toggle on"></div>199      </div>200    </div>201  </div>202 203  <!-- Account 2 -->204  <div class="section">205    <div class="email">jasonsmith9810244659106538@gmail.com</div>206    <div class="row">207      <div class="title">All "jasonsmith9810244659106538@gmail.com" notifications</div>208      <div class="toggle on"></div>209    </div>210 211    <div class="row">212      <div class="text-block">213        <svg class="bell-icon" viewBox="0 0 24 24">214          <path d="M6 9a6 6 0 0112 0v5l2 2H4l2-2V9" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215          <path d="M10 19a2 2 0 004 0" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round"/>216        </svg>217        <div>218          <div class="title">Mail</div>219        </div>220      </div>221      <div class="divider-toggle">222        <div class="divider"></div>223        <div class="toggle on"></div>224      </div>225    </div>226  </div>227 228  <!-- Account 3 -->229  <div class="section">230    <div class="email">miller.william197305@gmail.com</div>231    <div class="row">232      <div class="title">All "miller.william197305@gmail.com" notifications</div>233      <div class="toggle on"></div>234    </div>235 236    <div class="row">237      <div class="text-block">238        <svg class="bell-icon" viewBox="0 0 24 24">239          <path d="M6 9a6 6 0 0112 0v5l2 2H4l2-2V9" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>240          <path d="M10 19a2 2 0 004 0" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round"/>241        </svg>242        <div>243          <div class="title">Mail</div>244        </div>245      </div>246      <div class="divider-toggle">247        <div class="divider"></div>248        <div class="toggle on"></div>249      </div>250    </div>251  </div>252 253  <!-- Bottom gesture handle -->254  <div class="gesture"></div>255 256</div>257</body>258</html>