GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Notifications UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #121212;11    color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 90px; padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    font-size: 40px; color: #FFFFFF;20  }21  .status-left { display: flex; align-items: center; gap: 24px; }22  .ghosts { font-size: 38px; opacity: 0.95; letter-spacing: 10px; }23  .status-right { display: flex; align-items: center; gap: 26px; }24 25  /* Simple icons */26  .icon { display: inline-flex; align-items: center; justify-content: center; }27  .wifi svg { width: 44px; height: 44px; fill: #fff; opacity: 0.9; }28  .battery { width: 64px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative; }29  .battery:after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #fff; border-radius: 2px; }30  .battery .level { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 44px; background: #fff; border-radius: 3px; }31 32  /* Header area */33  .header {34    position: absolute; top: 100px; left: 36px; right: 36px;35  }36  .back-row { display: flex; align-items: center; gap: 24px; }37  .back {38    width: 64px; height: 64px; border-radius: 32px;39    display: inline-flex; align-items: center; justify-content: center;40  }41  .back svg { width: 48px; height: 48px; fill: #EDEDED; }42  .title {43    margin-top: 28px; font-size: 110px; font-weight: 600; letter-spacing: 1px;44  }45 46  .logo-area {47    margin-top: 60px; display: flex; flex-direction: column; align-items: center; gap: 24px;48  }49  .avatar {50    width: 140px; height: 140px; border-radius: 70px;51    background: #E0E0E0; border: 1px solid #BDBDBD;52    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;53  }54  .app-name { font-size: 70px; font-weight: 600; }55 56  /* Main card toggle */57  .main-card {58    margin: 70px 36px 36px 36px; padding: 40px 40px;59    background: #cfe1ff; color: #0d1a2b;60    border-radius: 120px;61    display: flex; align-items: center; justify-content: space-between;62  }63  .main-card .label { font-size: 64px; font-weight: 600; }64  .toggle {65    width: 210px; height: 110px; border-radius: 55px; position: relative;66    background: #5f6b78; transition: background 0.2s ease;67  }68  .toggle .knob {69    position: absolute; top: 8px; left: 8px;70    width: 94px; height: 94px; border-radius: 47px; background: #C9D1D9;71    box-shadow: 0 2px 6px rgba(0,0,0,0.4);72    transition: left 0.2s ease;73  }74  .toggle.on { background: #9fc3e9; }75  .toggle.on .knob { left: 108px; background: #E7F0FF; }76  .toggle.light { background: #9fc3e9; } /* for enabled rows */77 78  /* Sections */79  .section { margin: 24px 36px; }80  .email-heading {81    font-size: 38px; color: #a9b0b7; margin-bottom: 18px;82  }83 84  .row {85    display: flex; align-items: center; justify-content: space-between;86    padding: 26px 0;87    border-bottom: 1px solid rgba(255,255,255,0.06);88  }89  .row:last-child { border-bottom: none; }90 91  .row .text {92    font-size: 50px; line-height: 1.2; max-width: 760px;93  }94  .sub-row {95    display: flex; align-items: center; gap: 24px; padding: 30px 0;96  }97  .bell { width: 60px; height: 60px; }98  .bell svg { width: 60px; height: 60px; fill: #EDEDED; opacity: 0.9; }99  .sub-content { display: flex; align-items: center; gap: 26px; flex: 1; }100  .mail-title { font-size: 58px; }101  .mail-desc { font-size: 36px; color: #B7BDC3; margin-top: 6px; }102  .divider {103    width: 2px; height: 70px; background: rgba(255,255,255,0.12);104  }105 106  /* Footer spacer mimicking Android bottom bar area */107  .bottom-spacer {108    position: absolute; bottom: 24px; left: calc(50% - 210px); width: 420px; height: 10px;109    background: #E0E0E0; border-radius: 6px; opacity: 0.5;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <div class="status-bar">117    <div class="status-left">118      <div style="font-weight:600;">8:22</div>119      <div class="ghosts">👻👻👻👻👻</div>120      <div style="font-size: 24px; color:#9AA0A6;">•</div>121    </div>122    <div class="status-right">123      <div class="wifi icon">124        <svg viewBox="0 0 24 24"><path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-6c-1.8-1.8-4.1-3-6-3s-4.2 1.2-6 3l1.4 1.4C8.7 14.9 10.3 14 12 14s3.3.9 4.6 2.4L18 14zm4-4C18.6 6.6 15.4 5 12 5S5.4 6.6 2 10l1.4 1.4C6.1 8.7 8.9 7.5 12 7.5s5.9 1.2 8.6 3.9L22 10z"/></svg>125      </div>126      <div class="battery"><div class="level"></div></div>127    </div>128  </div>129 130  <div class="header">131    <div class="back-row">132      <div class="back">133        <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>134      </div>135    </div>136    <div class="title">Gmail</div>137 138    <div class="logo-area">139      <div class="avatar">[IMG: Gmail Logo]</div>140      <div class="app-name">Gmail</div>141    </div>142 143    <div class="main-card">144      <div class="label">All Gmail notifications</div>145      <div class="toggle off"><div class="knob"></div></div>146    </div>147  </div>148 149  <!-- Account 1 -->150  <div class="section" style="margin-top: 10px;">151    <div class="email-heading">amelia.miller2709@gmail.com</div>152 153    <div class="row">154      <div class="text">All "amelia.miller2709@gmail<br>.com" notifications</div>155      <div class="toggle on"><div class="knob"></div></div>156    </div>157 158    <div class="sub-row">159      <div class="bell">160        <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.1-1.6-5.6-4.5-6.3V4c0-.8-.7-1.5-1.5-1.5S10.5 3.2 10.5 4v.7C7.6 5.4 6 7.9 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>161      </div>162      <div class="sub-content">163        <div>164          <div class="mail-title">Mail</div>165          <div class="mail-desc">About 2 notifications per day</div>166        </div>167        <div class="divider"></div>168      </div>169      <div class="toggle on"><div class="knob"></div></div>170    </div>171  </div>172 173  <!-- Account 2 -->174  <div class="section">175    <div class="email-heading">jasonsmith9810244659106538@gmail.com</div>176 177    <div class="row">178      <div class="text">All "jasonsmith9810244<br>659106538@gmail.com" notifications</div>179      <div class="toggle on"><div class="knob"></div></div>180    </div>181 182    <div class="sub-row">183      <div class="bell">184        <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.1-1.6-5.6-4.5-6.3V4c0-.8-.7-1.5-1.5-1.5S10.5 3.2 10.5 4v.7C7.6 5.4 6 7.9 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>185      </div>186      <div class="sub-content">187        <div>188          <div class="mail-title">Mail</div>189        </div>190        <div class="divider"></div>191      </div>192      <div class="toggle on"><div class="knob"></div></div>193    </div>194  </div>195 196  <div class="bottom-spacer"></div>197</div>198</body>199</html>