GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mail List - Dark</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target{8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#121212; color:#EDEDED;11  }12 13  /* Status bar (mock) */14  .status-bar{15    height:96px;16    padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#EDEDED; font-size:36px;19  }20  .status-right{ display:flex; align-items:center; gap:22px; color:#CFCFCF; }21  .dot{ width:16px; height:16px; background:#CFCFCF; border-radius:50%; display:inline-block; }22 23  /* Email list */24  .list{ position:absolute; top:96px; left:0; right:0; bottom:0; padding-bottom:200px; }25  .email{26    display:flex; align-items:flex-start;27    padding:28px 32px;28    border-bottom:1px solid rgba(255,255,255,0.06);29  }30  .avatar{31    width:96px; height:96px; border-radius:50%;32    background:#3A3A3A; color:#EDEDED;33    display:flex; align-items:center; justify-content:center;34    font-weight:700; font-size:44px; flex:0 0 auto;35    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);36    margin-right:28px;37  }38  .avatar.alt{ background:#606060; }39  .avatar.yellow{ background:#F2C84B; color:#2B2B2B; }40  .avatar.purple{ background:#8B86F4; color:#1A1A1A; }41 42  .info{ flex:1; min-width:0; }43  .sender{ font-size:42px; font-weight:700; color:#EDEDED; line-height:1.2; }44  .subject{ font-size:36px; color:#CFCFCF; margin-top:6px; line-height:1.25; }45  .snippet{ font-size:32px; color:#9E9E9E; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }46 47  .meta{48    width:140px; flex:0 0 140px;49    display:flex; flex-direction:column; align-items:flex-end; gap:20px;50    margin-left:10px;51  }52  .date{ font-size:32px; color:#CFCFCF; }53  .star svg{ width:56px; height:56px; }54  .star svg path{ fill:none; stroke:#B0B0B0; stroke-width:2.5; }55 56  /* Floating compose button */57  .fab{58    position:absolute; right:40px; bottom:64px;59    width:176px; height:176px; border-radius:36px;60    background:#2E4C49; display:flex; align-items:center; justify-content:center;61    box-shadow:0 12px 24px rgba(0,0,0,0.45);62  }63  .fab svg{ width:72px; height:72px; }64  .fab svg path{ fill:#D7EAE6; }65 66  /* Bottom spacer to mimic navigation bar line */67  .bottom-line{68    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);69    width:480px; height:12px; background:#E0E0E0; opacity:0.35; border-radius:8px;70  }71</style>72</head>73<body>74<div id="render-target">75 76  <!-- Mock Android status bar -->77  <div class="status-bar">78    <div>9:02</div>79    <div class="status-right">80      <span class="dot"></span>81      <span class="dot"></span>82      <span class="dot"></span>83      <span>▴</span>84      <span>🔋</span>85    </div>86  </div>87 88  <!-- Email list -->89  <div class="list">90 91    <div class="email">92      <div class="avatar alt"></div>93      <div class="info">94        <div class="sender">401k monthly</div>95        <div class="subject">401k monthly data</div>96        <div class="snippet"></div>97      </div>98      <div class="meta">99        <div class="date"></div>100        <div class="star">101          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>102        </div>103      </div>104    </div>105 106    <div class="email">107      <div class="avatar alt"></div>108      <div class="info">109        <div class="sender">Cerebra Research</div>110        <div class="subject">Wix, I use wix for my blogs</div>111        <div class="snippet">Please use wix for the blogs</div>112      </div>113      <div class="meta">114        <div class="date">Aug 21</div>115        <div class="star">116          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>117        </div>118      </div>119    </div>120 121    <div class="email">122      <div class="avatar alt"></div>123      <div class="info">124        <div class="sender">Cerebra Research</div>125        <div class="subject">401k monthly</div>126        <div class="snippet">This is an official email for monthly updates...</div>127      </div>128      <div class="meta">129        <div class="date">Aug 21</div>130        <div class="star">131          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>132        </div>133      </div>134    </div>135 136    <div class="email">137      <div class="avatar alt"></div>138      <div class="info">139        <div class="sender">Cerebra Research</div>140        <div class="subject">Wix, I use wix for my blogs</div>141        <div class="snippet">Hello Jane, Do you use wix for your blog?</div>142      </div>143      <div class="meta">144        <div class="date">Aug 21</div>145        <div class="star">146          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>147        </div>148      </div>149    </div>150 151    <div class="email">152      <div class="avatar alt"></div>153      <div class="info">154        <div class="sender">Cerebra Research</div>155        <div class="subject">401k monthly</div>156        <div class="snippet">June 2023 monthly update</div>157      </div>158      <div class="meta">159        <div class="date">Aug 21</div>160        <div class="star">161          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>162        </div>163      </div>164    </div>165 166    <div class="email">167      <div class="avatar purple">C</div>168      <div class="info">169        <div class="sender">Cerebra Research</div>170        <div class="subject">Wix, I use wix for my blogs</div>171        <div class="snippet">Jane use wix for blogs</div>172      </div>173      <div class="meta">174        <div class="date">Aug 21</div>175        <div class="star">176          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>177        </div>178      </div>179    </div>180 181    <div class="email">182      <div class="avatar alt"></div>183      <div class="info">184        <div class="sender">Cerebra Research</div>185        <div class="subject">401k monthly</div>186        <div class="snippet">Jane monthly updates</div>187      </div>188      <div class="meta">189        <div class="date">Aug 21</div>190        <div class="star">191          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>192        </div>193      </div>194    </div>195 196    <div class="email">197      <div class="avatar yellow">C</div>198      <div class="info">199        <div class="sender">Cerebra Research</div>200        <div class="subject">Wix, I use Wix for my blogs</div>201        <div class="snippet">Hello Jane I am using Wix for my blogs you...</div>202      </div>203      <div class="meta">204        <div class="date">Aug 21</div>205        <div class="star">206          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>207        </div>208      </div>209    </div>210 211    <div class="email">212      <div class="avatar yellow">C</div>213      <div class="info">214        <div class="sender">Cerebra Research</div>215        <div class="subject">401k monthly</div>216        <div class="snippet">Monthly updates</div>217      </div>218      <div class="meta">219        <div class="date">Aug 21</div>220        <div class="star">221          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>222        </div>223      </div>224    </div>225 226    <div class="email">227      <div class="avatar alt"></div>228      <div class="info">229        <div class="sender">Team Snapchat</div>230        <div class="subject"></div>231        <div class="snippet"></div>232      </div>233      <div class="meta">234        <div class="date">Aug 19</div>235        <div class="star">236          <svg viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>237        </div>238      </div>239    </div>240 241  </div>242 243  <!-- Floating compose button -->244  <div class="fab" title="Compose">245    <svg viewBox="0 0 24 24">246      <path d="M3 17.3V21h3.7l11-11-3.7-3.7-11 11zM20.7 7.3c.4-.4.4-1 0-1.4L18.1 3.3c-.4-.4-1-.4-1.4 0l-1.8 1.8 3.7 3.7 2.1-1.5z"/>247    </svg>248  </div>249 250  <div class="bottom-line"></div>251</div>252</body>253</html>