GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Email Detail - Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color:#1b1b1b;13  }14 15  /* Top app bar */16  .appbar { position:absolute; left:0; top:0; width:100%; background:#2ea3e6; color:#fff; }17  .statusbar {18    height:110px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;19    font-size:38px; letter-spacing:0.5px;20  }21  .status-right { display:flex; align-items:center; gap:24px; }22  .toolbar {23    height:150px; display:flex; align-items:center; justify-content:space-between;24    padding:0 24px 0 16px;25  }26  .tool-left, .tool-right { display:flex; align-items:center; gap:28px; }27  .tool-icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; cursor:default; }28  .tool-icon svg { width:60px; height:60px; fill:#ffffff; }29 30  /* Content area */31  .content {32    position:absolute; left:0; right:0; top:260px; bottom:0;33    overflow:hidden;34  }35  .scroll {36    height:100%; overflow:auto; padding-bottom:220px;37  }38 39  .row { display:flex; align-items:center; padding:34px 40px; }40  .row .label { color:#5f6368; font-size:44px; margin-right:20px; }41  .avatar { width:78px; height:78px; border-radius:50%; background:#2ea3e6; color:#fff; font-weight:600;42            display:flex; align-items:center; justify-content:center; font-size:42px; margin-right:24px; }43  .chip {44    background:#eeeeee; color:#2b2b2b; padding:12px 22px; border-radius:22px; font-size:40px; margin-right:auto;45  }46  .details-link { color:#1e88e5; font-weight:600; font-size:38px; letter-spacing:1px; }47  .divider { height:2px; background:#e6e6e6; margin:0 0; }48 49  .subject { font-size:64px; font-weight:700; padding:36px 40px 10px; }50  .meta { font-size:40px; color:#8a8a8a; padding:0 40px 28px; }51  .thin-divider { height:2px; background:#e6e6e6; margin:18px 0 6px; }52 53  .body { padding:30px 40px; font-size:44px; line-height:1.45; color:#222; }54  .body p { margin:28px 0; }55  .body a { color:#1976d2; text-decoration:underline; }56 57  .quoted-hr {58    border:none; border-top:2px solid #cfd8dc; margin:24px 0;59  }60  .quoted b { font-weight:700; }61  .quoted { color:#353535; }62  .footer-space { height:300px; }63 64  /* Floating action button */65  .fab {66    position:absolute; right:52px; bottom:220px;67    width:170px; height:170px; border-radius:50%;68    background:#6cc2f1; box-shadow:0 10px 24px rgba(0,0,0,0.25);69    display:flex; align-items:center; justify-content:center;70  }71  .fab svg { width:92px; height:92px; fill:#ffffff; }72 73  /* Gesture bar */74  .gesture {75    position:absolute; left:0; right:0; bottom:0; height:120px; background:#000;76    display:flex; align-items:center; justify-content:center;77  }78  .gesture .pill {79    width:260px; height:16px; border-radius:10px; background:#dcdcdc;80    opacity:0.9;81  }82 83  /* Scrollbar (subtle) */84  .scroll::-webkit-scrollbar { width:10px; }85  .scroll::-webkit-scrollbar-thumb { background:#d5d5d5; border-radius:8px; }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Top blue header -->92  <div class="appbar">93    <div class="statusbar">94      <div>7:55</div>95      <div class="status-right">96        <!-- Simple status icons -->97        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">98          <path d="M12 3L1 9h3v8h6v-6h4v6h6V9h3L12 3z"></path>99        </svg>100        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">101          <path d="M12 3C7 3 2.73 5.11 0 8.44l2.12 2.12C4.3 8.05 7.93 6 12 6s7.7 2.05 9.88 4.56L24 8.44C21.27 5.11 17 3 12 3zM12 9c-3.04 0-5.76 1.23-7.76 3.22L6.36 14.3C7.83 12.83 9.82 12 12 12s4.17.83 5.64 2.3l2.12-2.08C17.76 10.23 15.04 9 12 9z"></path>102        </svg>103        <!-- Battery with 100% -->104        <div style="display:flex; align-items:center; gap:12px;">105          <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">106            <path d="M16 7h1c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-1v2H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h10v2z"></path>107          </svg>108          <span style="font-size:36px;">100%</span>109        </div>110      </div>111    </div>112    <div class="toolbar">113      <div class="tool-left">114        <div class="tool-icon" aria-label="Back">115          <svg viewBox="0 0 24 24">116            <path d="M15.5 4l-8 8 8 8 1.5-1.5-6.5-6.5 6.5-6.5z"></path>117          </svg>118        </div>119      </div>120      <div class="tool-right">121        <div class="tool-icon" aria-label="Bookmark">122          <svg viewBox="0 0 24 24">123            <path d="M6 2h12v20l-6-4-6 4z"></path>124          </svg>125        </div>126        <div class="tool-icon" aria-label="Dislike">127          <svg viewBox="0 0 24 24">128            <path d="M2 10h4v8H2zM22 11c0-1.1-.9-2-2-2h-6l1-4-6 7v7h9l2-6h2c1.1 0 2-.9 2-2z"></path>129          </svg>130        </div>131        <div class="tool-icon" aria-label="Archive">132          <svg viewBox="0 0 24 24">133            <path d="M3 4h18v4H3V4zm2 6h14v10H5V10zm4 3h6v2H9v-2z"></path>134          </svg>135        </div>136        <div class="tool-icon" aria-label="Delete">137          <svg viewBox="0 0 24 24">138            <path d="M6 7h12v14H6zM9 4h6l1 2H8l1-2z"></path>139          </svg>140        </div>141      </div>142    </div>143  </div>144 145  <!-- Content -->146  <div class="content">147    <div class="scroll">148 149      <div class="row">150        <div class="label">From:</div>151        <div class="avatar">C</div>152        <div class="chip">Cer