GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock - Gmail Conversation</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:#141414; color:#eaeaea;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:120px; padding:0 40px;17    display:flex; align-items:center; justify-content:space-between;18    color:#d7d7d7; font-weight:600; font-size:40px;19  }20  .status-icons { display:flex; gap:28px; align-items:center; }21  .dot { width:14px; height:14px; background:#d7d7d7; border-radius:50%; display:inline-block; }22 23  /* Top toolbar */24  .toolbar {25    position:absolute; top:120px; left:0; right:0;26    height:120px; padding:0 24px;27    display:flex; align-items:center; justify-content:space-between;28  }29  .toolbar .left, .toolbar .right { display:flex; align-items:center; gap:30px; }30  .icon-btn {31    width:88px; height:88px; border-radius:20px;32    display:flex; align-items:center; justify-content:center;33    color:#eaeaea;34  }35  .icon svg { width:48px; height:48px; fill:#eaeaea; }36 37  /* Subject row */38  .subject-row {39    position:absolute; top:240px; left:0; right:0;40    padding:30px 40px 24px;41    border-bottom:1px solid #2a2a2a;42  }43  .subject-title {44    font-size:64px; font-weight:700; letter-spacing:1px;45  }46  .subject-meta { display:flex; align-items:center; gap:16px; margin-top:18px; }47  .pill {48    background:#2a2a2a; color:#cfcfcf; padding:10px 18px; border-radius:20px; font-size:30px;49  }50 51  /* Conversation area */52  .thread {53    position:absolute; top:410px; left:0; right:0; bottom:0;54    padding:24px 32px 320px; /* leave room for bottom actions */55    overflow:hidden;56  }57  .email {58    padding:32px 16px; border-bottom:1px solid #2a2a2a;59  }60  .header-line {61    display:flex; align-items:center; gap:24px;62  }63  .avatar {64    width:110px; height:110px; border-radius:55px;65    background:#8a9aa5; color:#111; display:flex; align-items:center; justify-content:center;66    font-weight:800; font-size:48px;67  }68  .sender {69    flex:1;70  }71  .sender .name { font-size:44px; font-weight:700; }72  .sender .time { font-size:34px; color:#a6a6a6; margin-left:10px; }73  .email-body { margin-left:154px; margin-top:18px; font-size:40px; line-height:1.4; color:#dcdcdc; }74  .small { font-size:34px; color:#9aa0a6; }75  .link { color:#66a2ff; cursor:pointer; }76  .email .right-icons { display:flex; gap:28px; }77  .star-outline svg { fill:none; stroke:#eaeaea; stroke-width:6px; }78 79  /* Open options menu overlay */80  .overlay-menu {81    position:absolute;82    top:960px; right:24px;83    width:540px;84    background:#1f1f1f; border-radius:28px; box-shadow:0 18px 40px rgba(0,0,0,0.5);85    border:1px solid #2c2c2c;86    padding:28px 32px;87  }88  .menu-item {89    padding:26px 10px; font-size:42px; color:#e8e8e8;90    border-bottom:1px solid #2a2a2a;91  }92  .menu-item:last-child { border-bottom:none; }93  .block-text { color:#b0b0b0; font-size:40px; }94 95  /* Smart reply chips */96  .chips {97    position:absolute; bottom:360px; left:24px; right:24px;98    display:flex; gap:24px; justify-content:space-between;99  }100  .chip {101    flex:1; padding:28px 22px; border-radius:30px;102    background:#1c1c1c; border:1px solid #2a2a2a;103    color:#9ec2ff; font-size:40px; text-align:center;104  }105 106  /* Bottom actions */107  .bottom-actions {108    position:absolute; bottom:220px; left:24px; right:24px;109    display:flex; gap:28px; justify-content:space-between;110  }111  .action-btn {112    flex:1; height:120px; border-radius:70px;113    background:#1c1c1c; border:1px solid #2a2a2a;114    display:flex; align-items:center; justify-content:center; gap:18px;115    color:#eaeaea; font-size:44px; font-weight:600;116  }117  .action-btn svg { width:50px; height:50px; fill:#eaeaea; }118 119  /* Floating bottom icons */120  .floating-bar {121    position:absolute; bottom:120px; left:0; right:0;122    display:flex; align-items:center; justify-content:center; gap:220px;123  }124  .bubble {125    background:#2a3440; color:#fff; height:100px; padding:0 30px; border-radius:50px;126    display:flex; align-items:center; gap:18px; border:1px solid #3a3a3a;127  }128  .badge {129    background:#ff6e70; color:#fff; font-weight:700; font-size:34px;130    padding:8px 16px; border-radius:30px;131    margin-left:-10px;132  }133  .camera {134    width:90px; height:90px; border-radius:10px; border:1px solid #3a3a3a;135    display:flex; align-items:center; justify-content:center; background:#1f1f1f;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="status-bar">144    <div>2:42</div>145    <div class="status-icons">146      <span>⏺</span>147      <span class="dot"></span>148      <span class="dot"></span>149      <span class="dot"></span>150      <span style="font-size:36px;">📶</span>151      <span style="font-size:36px;">🔋</span>152    </div>153  </div>154 155  <!-- Toolbar -->156  <div class="toolbar">157    <div class="left">158      <div class="icon-btn icon">159        <!-- Back arrow -->160        <svg viewBox="0 0 24 24"><path d="M20 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4L7.8 13H20z"/></svg>161      </div>162    </div>163    <div class="right">164      <div class="icon-btn icon">165        <!-- Download tray -->166        <svg viewBox="0 0 24 24"><path d="M5 19h14v2H5z"/><path d="M12 3v10l4-4 1.4 1.4L12 17 6.6 10.4 8 9l4 4V3z"/></svg>167      </div>168      <div class="icon-btn icon">169        <!-- Trash -->170        <svg viewBox="0 0 24 24"><path d="M6 7h12v2H6z"/><path d="M9 3h6l1 2H8z"/><path d="M7 9h10l-1 11H8z"/></svg>171      </div>172      <div class="icon-btn icon">173        <!-- Mail -->174        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 7l9 6 9-6v-2l-9 6-9-6z" /></svg>175      </div>176      <div class="icon-btn icon">177        <!-- More vertical -->178        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>179      </div>180    </div>181  </div>182 183  <!-- Subject row -->184  <div class="subject-row">185    <div class="subject-title">OFFICIAL WEEKEND PARTY</div>186    <div class="subject-meta">187      <div class="pill">Inbox</div>188      <div class="icon star-outline">189        <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.7-5.2 4.4 1.6 6.6L12 17l-6.2 3 1.6-6.6-5.2-4.4 6.9-.7L12 2z"/></svg>190      </div>191    </div>192  </div>193 194  <!-- Conversation -->195  <div class="thread">196 197    <!-- First email -->198    <div class="email">199      <div class="header-line">200        <div class="avatar">C</div>201        <div class="sender">202          <span class="name">Cerebra Research</span>203          <span class="time">1:19 PM</span>204        </div>205      </div>206      <div class="email-body">207        You are invited to the official weekend party this weekend, organized by our company.208      </div>209    </div>210 211    <!-- Second email -->212    <div class="email">213      <div class="header-line">214        <div class="avatar" style="background:#9b86cc;">C</div>215        <div class="sender">216          <span class="name">Cerebra Research</span>217          <span class="time">2:12 PM</span>218          <div class="small" style="margin-top:6px;">to me</div>219        </div>220        <div class="right-icons">221          <div class="icon">222            <!-- reply curving left -->223            <svg viewBox="0 0 24 24"><path d="M10 9V5l-7 7 7 7v-4h4c5 0 7-3 7-7h-2c0 3-2 5-5 5h-4z"/></svg>224          </div>225          <div class="icon">226            <!-- More vertical -->227            <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>228          </div>229        </div>230      </div>231      <div class="email-body">232        I don't know anything about233        <div class="link" style="margin-top:24px;">Show quoted text</div>234      </div>235    </div>236 237    <!-- Options menu overlay -->238    <div class="overlay-menu">239      <div class="menu-item">Reply all</div>240      <div class="menu-item">Forward</div>241      <div class="menu-item">Add star</div>242      <div class="menu-item">Print</div>243      <div class="menu-item">Mark unread from here</div>244      <div class="menu-item block-text">Block "Cerebra Research"</div>245    </div>246 247  </div>248 249  <!-- Smart reply chips -->250  <div class="chips">251    <div class="chip">That's weird.</div>252    <div class="chip">Oh okay.</div>253    <div class="chip">Ok, thanks for letting me know.</div>254  </div>255 256  <!-- Bottom actions -->257  <div class="bottom-actions">258    <div class="action-btn">259      <svg viewBox="0 0 24 24"><path d="M10 9V5l-7 7 7 7v-4h10v-6H10z"/></svg>260      <span>Reply</span>261    </div>262    <div class="action-btn">263      <svg viewBox="0 0 24 24"><path d="M10 9V5l-7 7 7 7v-4h6v-6h-6z"/><path d="M18 5l5 7-5 7v-4h-4v-6h4z"/></svg>264      <span>Reply all</span>265    </div>266    <div class="action-btn">267      <svg viewBox="0 0 24 24"><path d="M6 5l12 7-12 7v-5h8v-4H6z"/></svg>268      <span>Forward</span>269    </div>270  </div>271 272  <!-- Floating bottom bar -->273  <div class="floating-bar">274    <div class="bubble">275      <div class="icon">276        <!-- Envelope -->277        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 7l9 6 9-6v-2l-9 6-9-6z"/></svg>278      </div>279      <span style="font-size:40px;">Mail</span>280      <div class="badge">98</div>281    </div>282    <div class="camera">283      <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="#eaeaea"/><path d="M16 10l4 2-4 2z" fill="#141414"/></svg>284    </div>285  </div>286 287</div>288</body>289</html>