GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Email View - Facebook Code</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15  }16 17  /* Top system status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .dot { width: 10px; height: 10px; background:#EDEDED; border-radius: 50%; display:inline-block; opacity:.9; }34  .sb-icon{ width:36px; height:36px; border:2px solid #EDEDED; border-radius:6px; }35 36  /* App bar for conversation title */37  .app-bar {38    height: 150px;39    border-bottom: 1px solid #262626;40    display: flex;41    align-items: center;42    padding: 0 26px;43    gap: 24px;44  }45  .icon-btn {46    width: 78px;47    height: 78px;48    display: flex; align-items: center; justify-content: center;49    border-radius: 8px;50    color: #EDEDED;51  }52  .title-wrap {53    flex: 1;54    padding-right: 20px;55  }56  .title {57    font-size: 54px;58    line-height: 1.15;59    color: #FFFFFF;60  }61  .subtitle {62    margin-top: 8px;63    font-size: 28px;64    color: #9AA0A6;65  }66  .app-actions { display: flex; align-items: center; gap: 18px; }67 68  /* Sender row */69  .sender-row {70    padding: 26px 26px;71    display: flex;72    align-items: center;73    border-bottom: 1px solid #262626;74    gap: 22px;75  }76  .avatar {77    width: 96px; height: 96px; border-radius: 50%;78    background: #2A2A2A;79    display: flex; align-items: center; justify-content: center;80    font-weight: bold; color:#CFCFCF;81  }82  .sender-text { flex: 1; }83  .sender-name { font-size: 42px; color: #FFFFFF; }84  .sender-meta { font-size: 28px; color: #9AA0A6; margin-top: 6px; }85  .sender-actions { display:flex; align-items:center; gap: 24px; }86 87  /* Email content card */88  .mail-card {89    margin: 30px 26px;90    background: #0F0F0F;91    border: 1px solid #262626;92    border-radius: 8px;93    padding: 28px;94  }95  .fb-header {96    display: flex;97    align-items: center;98    gap: 18px;99    padding: 10px 4px 24px 4px;100    border-bottom: 1px solid #262626;101  }102  .fb-logo {103    width: 62px; height: 62px; border-radius: 50%;104    background: #2D4CC8; color: #FFFFFF;105    display:flex; align-items:center; justify-content:center;106    font-weight: bold; font-size: 42px;107  }108  .mail-body {109    padding: 32px 6px 8px 6px;110    font-size: 38px;111    line-height: 1.55;112    color: #EDEDED;113  }114  .btn {115    margin: 32px 0;116    background: #1E6BF1;117    color: #FFFFFF;118    font-size: 42px;119    font-weight: 700;120    width: 100%;121    height: 120px;122    border-radius: 16px;123    display: flex; align-items: center; justify-content: center;124  }125  .code-block {126    margin-top: 28px;127    font-size: 36px;128    color: #CFCFCF;129  }130  .the-code {131    margin-top: 18px;132    font-size: 64px;133    color: #FFFFFF;134    text-align: center;135    letter-spacing: 2px;136    font-weight: 700;137  }138 139  /* Bottom dock placeholders */140  .bottom-dock {141    position: absolute; left: 0; right: 0; bottom: 40px;142    display: flex; justify-content: space-between; align-items: center;143    padding: 0 120px;144  }145  .fab {146    width: 160px; height: 80px; background:#1F1F1F; border:1px solid #2A2A2A;147    border-radius: 44px; display:flex; align-items:center; justify-content:center;148    color:#EDEDED; font-size:32px;149  }150 151  /* Simple inline SVG icons styling */152  svg { fill: currentColor; }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status Bar -->159  <div class="status-bar">160    <div>9:03</div>161    <div class="status-right">162      <span class="dot"></span>163      <span class="dot"></span>164      <span class="dot"></span>165      <div class="sb-icon"></div>166      <div class="sb-icon"></div>167    </div>168  </div>169 170  <!-- App Bar -->171  <div class="app-bar">172    <div class="icon-btn" title="Back">173      <svg width="44" height="44" viewBox="0 0 24 24">174        <path d="M15.5 19 8.5 12l7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175      </svg>176    </div>177    <div class="title-wrap">178      <div class="title">62651 is your Facebook confirmation code</div>179      <div class="subtitle">Inbox</div>180    </div>181    <div class="app-actions">182      <div class="icon-btn" title="Download">183        <svg width="42" height="42" viewBox="0 0 24 24">184          <path d="M12 3v10m0 0 4-4m-4 4-4-4M4 20h16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185        </svg>186      </div>187      <div class="icon-btn" title="Delete">188        <svg width="42" height="42" viewBox="0 0 24 24">189          <path d="M3 6h18M8 6l1-2h6l1 2M7 6v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>190        </svg>191      </div>192      <div class="icon-btn" title="Mark as mail">193        <svg width="42" height="42" viewBox="0 0 24 24">194          <path d="M3 5h18v14H3z" fill="none" stroke="currentColor" stroke-width="2"/>195          <path d="M3 6l9 6 9-6" stroke="currentColor" stroke-width="2" fill="none"/>196        </svg>197      </div>198      <div class="icon-btn" title="More">199        <svg width="42" height="42" viewBox="0 0 24 24">200          <circle cx="12" cy="5" r="2"/>201          <circle cx="12" cy="12" r="2"/>202          <circle cx="12" cy="19" r="2"/>203        </svg>204      </div>205      <div class="icon-btn" title="Star">206        <svg width="44" height="44" viewBox="0 0 24 24">207          <path d="M12 3.5 14.9 9l6.1.9-4.4 4.3 1 6.1L12 17.8 6.4 20.3l1-6.1L3 9.9 9.1 9 12 3.5z" />208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Sender Row -->214  <div class="sender-row">215    <div class="avatar">F</div>216    <div class="sender-text">217      <div class="sender-name">Facebook <span style="color:#9AA0A6; font-size:30px;">Aug 18</span></div>218      <div class="sender-meta">to me ▾</div>219    </div>220    <div class="sender-actions">221      <div class="icon-btn" title="Reply">222        <svg width="42" height="42" viewBox="0 0 24 24">223          <path d="M11 19 4 12l7-7v4c6 0 9 2 9 9-2.5-3.5-5.5-4-9-4v4z" fill="currentColor"/>224        </svg>225      </div>226      <div class="icon-btn" title="More">227        <svg width="42" height="42" viewBox="0 0 24 24">228          <circle cx="12" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="18" r="2"/>229        </svg>230      </div>231    </div>232  </div>233 234  <!-- Email Content -->235  <div class="mail-card">236    <div class="fb-header">237      <div class="fb-logo">f</div>238    </div>239 240    <div class="mail-body">241      <div>Hi,</div>242      <div style="margin-top: 26px;">243        Someone tried to create a Facebook account with this email address. If it was you, please confirm your account.244      </div>245 246      <div class="btn">Confirm your account</div>247 248      <div class="code-block">You may be asked to enter this confirmation code:</div>249      <div class="the-code">62651</div>250    </div>251  </div>252 253  <!-- Bottom dock (placeholders similar to screenshot) -->254  <div class="bottom-dock">255    <div class="fab">✉ Compose</div>256    <div class="fab">📷</div>257  </div>258 259</div>260</body>261</html>