GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Style Screen</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 */14  .status-bar {15    height: 90px; padding: 0 28px;16    display: flex; align-items: center; justify-content: space-between;17    color: #DADADA; font-size: 30px; letter-spacing: 0.5px;18  }19  .status-icons { display: flex; gap: 18px; align-items: center; }20  .dot { width: 10px; height: 10px; background: #BDBDBD; border-radius: 50%; opacity: .7; }21  .battery { width: 40px; height: 20px; border: 2px solid #BDBDBD; border-radius: 4px; position: relative; }22  .battery::after { content:""; position:absolute; right:-6px; top:5px; width:4px; height:10px; background:#BDBDBD; border-radius:1px; }23  .battery .level { position:absolute; left:2px; top:2px; bottom:2px; right:10px; background:#BDBDBD; }24 25  /* Header icons and back */26  .header {27    height: 90px;28    position: relative;29  }30  .back-btn {31    position: absolute; left: 22px; top: 18px; width: 80px; height: 80px; display:flex; align-items:center; justify-content:center;32  }33  .header-actions {34    position: absolute; right: 24px; top: 18px; display:flex; gap: 26px; align-items:center;35  }36  .icon-btn svg { width: 46px; height: 46px; fill: #DADADA; opacity: .9; }37 38  /* Subject area */39  .subject-area { padding: 12px 32px 18px 32px; }40  .subject-line { font-size: 56px; font-weight: 700; line-height: 1.2; color: #FFFFFF; }41  .subject-meta { margin-top: 14px; display: flex; align-items: center; gap: 18px; }42  .chip {43    font-size: 24px; color: #BDBDBD;44    background: #1E1E1E; border: 1px solid #2E2E2E; border-radius: 20px;45    padding: 8px 16px;46  }47  .star svg { width: 44px; height: 44px; fill: none; stroke: #BDBDBD; stroke-width: 2; }48 49  /* Message blocks */50  .message { display: flex; padding: 30px 32px; border-top: 1px solid #262626; }51  .avatar {52    width: 110px; height: 110px; border-radius: 55px; display:flex; align-items:center; justify-content:center;53    font-weight: 700; color: #121212; border: 2px solid #3A3A3A;54  }55  .avatar.grey { background:#8E9AA3; }56  .avatar.purple { background:#B196FF; }57  .msg-content { flex: 1; margin-left: 26px; }58  .line-top { display:flex; justify-content:space-between; align-items:center; }59  .sender { font-size: 36px; font-weight: 700; color:#FFFFFF; }60  .time { font-size: 26px; color:#BDBDBD; }61  .sub { margin-top: 8px; font-size: 28px; color:#C8C8C8; }62  .to { margin-left: 12px; font-size: 26px; color:#9E9E9E; }63 64  .body-text {65    margin: 36px 32px; font-size: 34px; color:#EDEDED;66  }67  .link-text { color:#76A7FF; font-size: 30px; margin: 20px 32px; }68 69  /* Smart replies */70  .smart-replies {71    position: absolute; left: 24px; right: 24px; bottom: 820px;72    display: flex; gap: 28px; justify-content: space-between;73  }74  .reply-chip {75    flex: 1; text-align: center; padding: 28px 16px; border-radius: 32px;76    background: #1A1A1A; border: 1px solid #303030; color:#BFD6FF;77    font-size: 34px;78  }79 80  /* Bottom action bar */81  .bottom-actions {82    position: absolute; left: 24px; right: 24px; bottom: 600px;83    display: flex; gap: 30px; justify-content: space-between;84  }85  .action-pill {86    flex: 1; height: 120px; border-radius: 60px; background: #1A1A1A; border: 1px solid #303030;87    display:flex; align-items:center; justify-content:center; gap: 18px; color:#EDEDED; font-size: 36px;88  }89  .action-pill svg { width: 44px; height: 44px; fill:#DADADA; }90 91  /* Floating compose/mail with badge */92  .floating-mail {93    position: absolute; left: 160px; bottom: 470px; width: 170px; height: 92px;94    background: #2B3440; border-radius: 46px; display:flex; align-items:center; justify-content:center; gap: 16px;95    box-shadow: 0 8px 20px rgba(0,0,0,0.5);96  }97  .mail-badge {98    position: absolute; right: -12px; top: -16px;99    background: #F06292; color:#fff; font-weight:700; font-size: 28px;100    border-radius: 28px; padding: 6px 14px; border:2px solid #121212;101  }102 103  /* Small bottom shortcuts */104  .bottom-mini {105    position: absolute; right: 40px; bottom: 470px; width: 90px; height: 90px;106    border-radius: 22px; background:#1F1F1F; border:1px solid #303030;107    display:flex; align-items:center; justify-content:center;108  }109  .bottom-mini svg { width: 44px; height: 44px; fill:#CECECE; }110 111  /* Gesture bar */112  .gesture { position:absolute; left: 50%; transform: translateX(-50%); bottom: 34px; width: 320px; height: 10px; background:#E0E0E0; border-radius: 6px; opacity: 0.9; }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="status-bar">120    <div>2:41</div>121    <div class="status-icons">122      <div class="dot"></div>123      <div class="dot"></div>124      <div class="dot"></div>125      <div class="dot"></div>126      <div class="battery"><div class="level"></div></div>127    </div>128  </div>129 130  <!-- Header with back and actions -->131  <div class="header">132    <div class="back-btn">133      <svg viewBox="0 0 24 24">134        <path fill="#E0E0E0" d="M15.5 4l-8 8 8 8 1.4-1.4L10.3 12l6.6-6.6z"/>135      </svg>136    </div>137    <div class="header-actions">138      <div class="icon-btn">139        <svg viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h4.67v6h4V9h4.67L12 2z"/></svg>140      </div>141      <div class="icon-btn">142        <svg viewBox="0 0 24 24"><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1z"/></svg>143      </div>144      <div class="icon-btn">145        <svg viewBox="0 0 24 24"><path d="M20 8l-8 5-8-5V6l8 5 8-5v2z"/></svg>146      </div>147      <div class="icon-btn">148        <svg viewBox="0 0 24 24"><path d="M12 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>149      </div>150    </div>151  </div>152 153  <!-- Subject -->154  <div class="subject-area">155    <div class="subject-line">OFFICIAL WEEKEND PARTY</div>156    <div class="subject-meta">157      <div class="chip">Inbox</div>158      <div class="star">159        <svg viewBox="0 0 24 24"><path d="M12 17l-5.2 3.1 1.5-5.9L3 9.8l6-.5L12 3l3 6.3 6 .5-5.3 4.4 1.6 5.9z"/></svg>160      </div>161    </div>162  </div>163 164  <!-- First message -->165  <div class="message">166    <div class="avatar grey">C</div>167    <div class="msg-content">168      <div class="line-top">169        <div class="sender">Cerebra Research</div>170        <div class="time">1:19 PM</div>171      </div>172      <div class="sub">You are invited to the official weekend party this weekend, organized by our company.</div>173    </div>174  </div>175 176  <!-- Second message -->177  <div class="message" style="border-top: 1px solid #2A2A2A;">178    <div class="avatar purple">C</div>179    <div class="msg-content">180      <div class="line-top">181        <div class="sender">Cerebra Research <span class="to">to me</span></div>182        <div class="time">2:12 PM</div>183      </div>184    </div>185  </div>186 187  <div class="body-text">I don't know anything about</div>188  <div class="link-text">Show quoted text</div>189 190  <!-- Smart replies -->191  <div class="smart-replies">192    <div class="reply-chip">That's weird.</div>193    <div class="reply-chip">Oh okay.</div>194    <div class="reply-chip">Ok, thanks for letting me know.</div>195  </div>196 197  <!-- Bottom action pills -->198  <div class="bottom-actions">199    <div class="action-pill">200      <svg viewBox="0 0 24 24"><path d="M10 8l-6 4 6 4v-3h8v-2h-8V8z"/></svg>201      <span>Reply</span>202    </div>203    <div class="action-pill">204      <svg viewBox="0 0 24 24"><path d="M10 8l-6 4 6 4v-3h4v2l6-4-6-4v2h-4V8z"/></svg>205      <span>Reply all</span>206    </div>207    <div class="action-pill">208      <svg viewBox="0 0 24 24"><path d="M14 8l6 4-6 4v-3H6v-2h8V8z"/></svg>209      <span>Forward</span>210    </div>211  </div>212 213  <!-- Floating mail with badge -->214  <div class="floating-mail">215    <svg viewBox="0 0 24 24" width="44" height="44" fill="#E7EFFF"><path d="M20 8l-8 5-8-5V6l8 5 8-5v2z"/></svg>216    <div class="mail-badge">98</div>217  </div>218 219  <!-- Bottom mini camera icon -->220  <div class="bottom-mini">221    <svg viewBox="0 0 24 24"><path d="M17 10.5V7a2 2 0 0 0-2-2H5A2 2 0 0 0 3 7v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3.5L21 16V8l-4 2.5z"/></svg>222  </div>223 224  <!-- Gesture bar -->225  <div class="gesture"></div>226</div>227</body>228</html>