GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</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; position:relative; overflow:hidden;9    background:#121212; color:#fff; border-radius:30px;10  }11 12  /* Status bar */13  .statusbar {14    height:70px; padding:0 30px; display:flex; align-items:center; justify-content:space-between;15    color:#eaeaea; font-size:28px; letter-spacing:0.2px;16  }17  .status-left { display:flex; align-items:center; gap:20px; }18  .status-right { display:flex; align-items:center; gap:20px; }19  .status-icon {20    width:22px; height:22px; background:#888; border-radius:4px;21  }22 23  /* App bar */24  .appbar {25    height:100px; border-bottom:1px solid #242424;26    display:flex; align-items:center; justify-content:space-between; padding:0 24px 0 14px;27  }28  .appbar-left { display:flex; align-items:center; gap:16px; }29  .back-btn { width:70px; height:70px; display:flex; align-items:center; justify-content:center; }30  .back-btn svg { width:40px; height:40px; fill:#fff; }31  .title { font-size:40px; font-weight:600; }32  .appbar-right { display:flex; align-items:center; gap:24px; }33  .action-dot { width:12px; height:12px; background:#bbb; border-radius:50%; box-shadow:0 18px 0 #bbb, 0 -18px 0 #bbb; }34 35  /* Select all strip */36  .select-strip {37    height:88px; display:flex; align-items:center; gap:26px; padding:0 28px; color:#cfcfcf;38    border-bottom:1px solid #232323;39    font-size:30px;40  }41  .checkbox {42    width:46px; height:46px; border:2px solid #9aa0a6; border-radius:8px;43  }44 45  /* List area */46  .list { padding:18px 0 160px 0; }47  .mail-row {48    display:flex; align-items:flex-start; padding:24px 28px; gap:20px;49    border-bottom:1px solid #1f1f1f;50  }51  .mail-row .avatar {52    width:100px; height:100px; border-radius:50%; flex:0 0 100px;53    display:flex; align-items:center; justify-content:center; font-weight:bold; color:#fff;54  }55  .avatar.gray { background:#7d7d7d; }56  .avatar.purple { background:#6c5ce7; }57  .avatar.yellow { background:#f2c033; color:#333; }58  .avatar.tag {59    width:70px; height:70px; border-radius:16px; background:#26a65b; position:relative; margin-top:6px;60  }61  .avatar.tag::after {62    content:""; position:absolute; right:-10px; top:26px; width:0; height:0;63    border-left:12px solid #26a65b; border-top:10px solid transparent; border-bottom:10px solid transparent;64  }65 66  .content { flex:1; }67  .title-line { font-size:36px; font-weight:700; color:#fff; margin-bottom:4px; }68  .subject-line { font-size:30px; color:#d7d7d7; margin-bottom:4px; }69  .snippet { font-size:28px; color:#b5b5b5; }70  .meta { width:150px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:16px; }71  .date { font-size:28px; color:#cfcfcf; }72  .star { font-size:40px; color:#c2c2c2; }73  .star.filled { color:#ffd54f; }74 75  /* Selected row highlight */76  .mail-row.selected {77    background:rgba(255,255,255,0.06);78    border-radius:22px;79    margin:12px 16px;80  }81  .selected .avatar {82    border:2px solid #a0a0a0; background:#3a3a3a;83    position:relative;84  }85  .selected .avatar::before {86    content:""; width:16px; height:16px; border-radius:50%; background:#fff; position:absolute; display:none;87  }88  .check-circle {89    width:84px; height:84px; border-radius:50%;90    border:2px solid #9aa0a6; display:flex; align-items:center; justify-content:center; color:#9aa0a6; font-size:40px;91  }92 93  /* Compose FAB */94  .compose {95    position:absolute; right:34px; bottom:120px;96    width:410px; height:130px; background:#2a2a2a; border-radius:36px;97    box-shadow:0 8px 24px rgba(0,0,0,0.6);98    display:flex; align-items:center; justify-content:center; gap:22px; font-size:36px;99  }100  .compose svg { width:48px; height:48px; fill:#eaeaea; }101 102  /* Overflow menu */103  .menu {104    position:absolute; right:30px; top:260px; width:520px; background:#1f1f1f; border-radius:24px;105    box-shadow:0 20px 40px rgba(0,0,0,0.7); padding:12px 0; border:1px solid #2b2b2b;106  }107  .menu-item {108    height:96px; display:flex; align-items:center; padding:0 26px; color:#efefef; font-size:34px;109    border-bottom:1px solid #262626;110  }111  .menu-item:last-child { border-bottom:none; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="statusbar">119    <div class="status-left">120      <div>6:20</div>121      <div class="status-icon"></div>122      <div class="status-icon"></div>123      <div class="status-icon"></div>124    </div>125    <div class="status-right">126      <div class="status-icon"></div>127      <div>100%</div>128    </div>129  </div>130 131  <!-- App bar -->132  <div class="appbar">133    <div class="appbar-left">134      <div class="back-btn">135        <svg viewBox="0 0 24 24"><path d="M15.5 5l-7.5 7 7.5 7-2 2-10-9 10-9z"/></svg>136      </div>137      <div class="title">1</div>138    </div>139    <div class="appbar-right">140      <div class="action-dot"></div>141    </div>142  </div>143 144  <!-- Select all strip -->145  <div class="select-strip">146    <div class="checkbox"></div>147    <div>Select all</div>148  </div>149 150  <!-- Email list -->151  <div class="list">152 153    <!-- Promotions chip row -->154    <div class="mail-row">155      <div class="avatar tag"></div>156      <div class="content">157        <div class="title-line">Promotions</div>158        <div class="subject-line">Kitchen Stories, Scribd</div>159      </div>160      <div class="meta">161        <div class="date"></div>162        <div class="star">☆</div>163      </div>164    </div>165 166    <!-- me, Quentin -->167    <div class="mail-row">168      <div class="avatar purple">Q</div>169      <div class="content">170        <div class="title-line">me, Quentin 3</div>171        <div class="subject-line">Important meeting time</div>172        <div class="snippet">Ok, see you then. On Friday we...</div>173      </div>174      <div class="meta">175        <div class="date"></div>176        <div class="star">☆</div>177      </div>178    </div>179 180    <!-- Kitchen Stories -->181    <div class="mail-row">182      <div class="avatar gray"></div>183      <div class="content">184        <div class="title-line">Kitchen Stories</div>185        <div class="subject-line">Good news is just one step away</div>186        <div class="snippet">Please confirm your registration...</div>187      </div>188      <div class="meta">189        <div class="date"></div>190        <div class="star">☆</div>191      </div>192    </div>193 194    <!-- me, Mail -->195    <div class="mail-row">196      <div class="avatar yellow">M</div>197      <div class="content">198        <div class="title-line">me, Mail 2</div>199        <div class="subject-line">(no subject)</div>200        <div class="snippet">Address not found. Your message wasn't deliv...</div>201      </div>202      <div class="meta">203        <div class="date">Oct 4</div>204        <div class="star">☆</div>205      </div>206    </div>207 208    <!-- Delivery Much -->209    <div class="mail-row">210      <div class="avatar gray"></div>211      <div class="content">212        <div class="title-line">Delivery Much</div>213        <div class="subject-line">Código de verificação</div>214        <div class="snippet">Delivery Much Bem-vindo a...</div>215      </div>216      <div class="meta">217        <div class="date">Oct 4</div>218        <div class="star">☆</div>219      </div>220    </div>221 222    <!-- Rappi selected -->223    <div class="mail-row selected">224      <div class="check-circle">✓</div>225      <div class="content">226        <div class="title-line">Rappi</div>227        <div class="subject-line">Verifique seu email</div>228        <div class="snippet">E comece desfrutar da Rappi Oi Fabio 😊 ...</div>229      </div>230      <div class="meta">231        <div class="date">Oct 3</div>232        <div class="star">☆</div>233      </div>234    </div>235 236    <!-- Scribd Welcome -->237    <div class="mail-row">238      <div class="avatar gray"></div>239      <div class="content">240        <div class="title-line">Scribd</div>241        <div class="subject-line">Welcome to Scribd!</div>242        <div class="snippet">Never stop growing with access to everything...</div>243      </div>244      <div class="meta">245        <div class="date">Sep 26</div>246        <div class="star">☆</div>247      </div>248    </div>249 250    <!-- Scribd verify -->251    <div class="mail-row">252      <div class="avatar gray"></div>253      <div class="content">254        <div class="title-line">Scribd</div>255        <div class="subject-line">Fabio, please verify your email</div>256        <div class="snippet">Didn't create a Scribd account?</div>257      </div>258      <div class="meta">259        <div class="date">Sep 26</div>260        <div class="star">☆</div>261      </div>262    </div>263 264  </div>265 266  <!-- Floating Compose -->267  <div class="compose">268    <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41L18.37 3.29c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>269    <div>Compose</div>270  </div>271 272  <!-- Overflow menu open -->273  <div class="menu">274    <div class="menu-item">Move to</div>275    <div class="menu-item">Snooze</div>276    <div class="menu-item">Change labels</div>277    <div class="menu-item">Add star</div>278    <div class="menu-item">Mark important</div>279    <div class="menu-item">Mute</div>280    <div class="menu-item">Report spam</div>281  </div>282 283</div>284</body>285</html>