Cockerh.am/index.html at main · jamescockerham/Cockerh.am · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cockerh.am — Home</title>
  <link rel="stylesheet" href="/assets/css/style.css">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌳</text></svg>">
</head>
<body class="light">

  <header>
    <h1>Cockerh.am</h1>
    <p>One surname. Thousands of cousins. One collaborative home.</p>
  </header>

  <div class="nav-bar">
    <button id="hamburger" aria-label="Menu" aria-expanded="false">☰</button>
    <button id="theme-toggle" aria-label="Toggle dark mode">☀️</button>
  </div>

  <nav id="main-nav" aria-label="Main navigation">
    <ul id="nav-links">
      <li><a href="/">Home</a></li>
      <li><a href="/history/">History & Statistics</a></li>
      <li><a href="/tree/">Family Tree</a></li>
      <li><a href="/archive/">Archive</a></li>
      <li><a href="/dna/">DNA Project</a></li>
      <li><a href="/resources/">Resources</a></li>
      <li><a href="https://github.com/jamescockerham/Cockerh.am/issues/new/choose" class="contrib">Contribute →</a></li>
    </ul>
  </nav>

  <main>
    <h1 style="text-align:center;margin-top:40px;">Welcome, Cousin</h1>
    <p style="text-align:center;font-size:1.3em;max-width:720px;margin:40px auto;">
      The open, ever-growing hub for every Cockerham (and Cockram, Cockrem…) on Earth.
    </p>

    <div style="display:grid;gap:25px;margin:60px auto;max-width:600px;text-align:center;">
      <a href="/history/" class="button">Surname History & Live Statistics</a>
      <a href="/tree/" class="button">Interactive Global Family Tree</a>
      <a href="/dna/" class="button">Y-DNA Project</a>
      <a href="/archive/" class="button">Photo & Document Archive</a>
    </div>

    <div class="cta">
      <p>Have a photo, Bible record, DNA result, or just know your grandparents’ names?</p>
      <a href="https://github.com/jamescockerham/Cockerh.am/issues/new/choose" class="button">Contribute in 2 minutes – no coding needed</a>
    </div>
  </main>

  <footer>
    <p>Maintained with love by James Cockerham • <a href="https://x.com/JamesCockerham">@JamesCockerham</a></p>
  </footer>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const hamburger = document.getElementById('hamburger');
      const nav = document.getElementById('main-nav');
      const toggle = document.getElementById('theme-toggle');
      const body = document.body;

      hamburger.addEventListener('click', () => {
        const expanded = hamburger.getAttribute('aria-expanded') === 'true';
        hamburger.setAttribute('aria-expanded', !expanded);
        nav.classList.toggle('open');
      });

      nav.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          nav.classList.remove('open');
          hamburger.setAttribute('aria-expanded', 'false');
        });
      });

      if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        body.classList.add('dark');
        toggle.textContent = '🌙';
      } else {
        toggle.textContent = '☀️';
      }

      toggle.addEventListener('click', () => {
        body.classList.toggle('dark');
        toggle.textContent = body.classList.contains('dark') ? '🌙' : '☀️';
        localStorage.theme = body.classList.contains('dark') ? 'dark' : 'light';
      });
    });
  </script>
</body>
</html>