Untitled

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>DEMO Email — NOT REAL</title>
<style>
  :root{--bg:#f5f7fb;--panel:#ffffff;--muted:#6b7280;--accent:#1a73e8;}
  body{margin:0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#111;}
  .container{max-width:980px;margin:36px auto;padding:18px;}
  .gmail-shell{display:flex;gap:18px;align-items:flex-start;}
  .left-col{width:220px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6e9ef;border-radius:8px;padding:16px;box-shadow:0 2px 6px rgba(12,18,36,0.05);}
  .left-col h3{margin:6px 0 12px;font-size:14px;color:#0f172a;}
  .inbox-item{padding:10px;border-radius:8px;margin-bottom:8px;background:#fff;border:1px solid #eef2ff}
  .main{flex:1;background:var(--panel);border:1px solid #e6e9ef;border-radius:8px;padding:18px;position:relative;box-shadow:0 6px 18px rgba(26,35,54,0.04);}
  /* header */
  .msg-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f4f8;padding-bottom:12px;margin-bottom:12px}
  .meta{font-size:13px}
  .meta .from{font-weight:600;color:#0f172a}
  .meta .to{color:var(--muted);font-size:12px;margin-top:4px}
  .timestamp{font-size:13px;color:var(--muted)}
  /* body */
  .msg-body{font-size:15px;line-height:1.55;color:#111;padding-bottom:18px}
  .demo-note{display:inline-block;padding:8px 10px;background:#fff5f5;border:1px solid #ffd6d6;color:#b42318;border-radius:6px;margin-bottom:12px;font-weight:600}
  .fake-link{display:inline-block;background:#f0f4ff;padding:6px 10px;border-radius:6px;color:var(--accent);font-weight:600;margin-top:8px}
  .footer-small{font-size:12px;color:var(--muted);margin-top:18px}
  /* watermark */
  .watermark{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-22deg);
    font-size:48px;color:rgba(220,38,38,0.14);font-weight:800;pointer-events:none;white-space:nowrap;
    text-shadow:0 1px 0 rgba(255,255,255,0.6);
  }
  /* small screen adjustments */
  @media (max-width:800px){.container{padding:12px}.left-col{display:none}}
</style>
</head>
<body>
<div class="container">
  <div style="font-size:13px;color:#374151;margin-bottom:10px">Webmail demo — <strong style="color:#b91c1c">SAMPLE — NOT REAL — FOR DEMO/PROP ONLY</strong></div>
  <div class="gmail-shell">
    <aside class="left-col" aria-hidden="true">
      <h3>Mailbox</h3>
      <div class="inbox-item">Inbox</div>
      <div class="inbox-item">Starred</div>
      <div class="inbox-item">Sent</div>
      <div class="inbox-item">Drafts</div>
    </aside>

    <main class="main" role="main" aria-label="Message view">
      <div class="watermark">SAMPLE — NOT REAL — FOR DEMO/PROP ONLY</div>

      <div class="msg-header">
        <div class="meta">
          <div class="from">Apple Support (DEMO — NOT REAL)</div>
          <div class="to">to [email protected]</div>
          <div style="margin-top:6px;color:#0f172a;font-weight:700">Subject: Security Alert: iCloud Activity</div>
        </div>
        <div class="timestamp">Oct 4, 2025, 10:35 AM</div>
      </div>

      <div class="msg-body">
        <div class="demo-note">DEMO NOTICE — THIS IS A FICTIONAL PROP. DO NOT USE TO IMITATE OR IMPERSONATE APPLE.</div>

        <p><strong>We detected unusual activity on your iCloud account.</strong> To secure your account, verify your identity at the provided link below. This is an example message for demonstration only and contains no real links.</p>

        <div class="fake-link">[DEMO LINK — DO NOT CLICK]</div>

        <p class="footer-small">This message is a fictional sample created for demonstration purposes only. It is intentionally marked clearly as not real and should not be used to mislead anyone.</p>
      </div>

    </main>
  </div>
</div>
</body>
</html>
Editor is loading...