artyst.github.io/contact.html at main · ArtysT/artyst.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Contact</title>
  <style>
    :root{--bg:#f6f8fb;--card:#ffffff;--accent:#2563eb;--muted:#6b7280}
    html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
    body{display:grid;place-items:center;background:linear-gradient(180deg,var(--bg),#eef2ff);padding:24px}
    .card{background:var(--card);border-radius:12px;box-shadow:0 6px 30px rgba(16,24,40,0.08);padding:28px;max-width:420px;width:100%;text-align:center}
    h1{margin:0 0 8px;font-size:20px;color:#0f172a}
    p{margin:0 0 18px;color:var(--muted)}
    .email{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:#f8fafc;border:1px solid #e6edf8}
    a.email-link{font-weight:600;color:var(--accent);text-decoration:none}
    button.copy{margin-left:6px;padding:8px 10px;border-radius:8px;border:0;background:#eef2ff;color:var(--accent);cursor:pointer}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    footer{margin-top:14px;font-size:13px;color:var(--muted)}
  </style>
</head>
<body>
  <main class="card" role="main">
    <h1>Contact</h1>
    <p>If you want to reach me, email me at:</p>

    <div class="email" aria-live="polite">
      <a id="emailLink" class="email-link" href="mailto:info.antkowski@gmail.com">info.antkowski@gmail.com</a>
      <button class="copy" id="copyBtn" aria-label="Copy email to clipboard">Copy</button>
    </div>

    <footer>Click the email to open your mail client, or use the Copy button.</footer>
  </main>

  <script>
    (function(){
      const copyBtn = document.getElementById('copyBtn');
      const emailLink = document.getElementById('emailLink');
      copyBtn.addEventListener('click', async function(){
        const text = emailLink.textContent.trim();
        try{
          await navigator.clipboard.writeText(text);
          copyBtn.textContent = 'Copied!';
          setTimeout(()=> copyBtn.textContent = 'Copy', 1500);
        }catch(e){
          // fallback
          const ta = document.createElement('textarea');
          ta.value = text; document.body.appendChild(ta); ta.select();
          try{ document.execCommand('copy'); copyBtn.textContent = 'Copied!'; }
          catch(err){ alert('Copy failed — please select and copy manually.'); }
          ta.remove(); setTimeout(()=> copyBtn.textContent = 'Copy',1500);
        }
      });
    })();
  </script>
</body>
</html>