mainejs.github.io/index.html at main · MaineJS/mainejs.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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en">
  <head>
    <title>Maine JS Meetup</title>
    <link
      href="css/styles.css"
      media="screen"
      rel="stylesheet"
      type="text/css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="https://github.com/MaineJS" />
    <meta name="og:title" content="Maine JS Meetup" />
    <meta
      name="og:description"
      content="Maine JS is a monthly meetup for JavaScript and web developers in Maine who want to meet peers, share ideas, and stay connected to the local dev community."
    />
    <meta
      name="description"
      content="Maine JS is a monthly meetup for JavaScript and web developers in Maine who want to meet peers, share ideas, and stay connected to the local dev community."
    />
    <meta property="og:image" content="/images/twittercard.jpeg" />
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />

    <script>
      let keySequence = '';
      const targetWord = 'mainejs';
      let partyTimeout;

      function triggerPartyMode() {
        const image = document.getElementById('logo');
        const container = document.querySelector('.container');
        const badge = document.getElementById('party-badge');

        if (!image || !container || !badge) {
          return;
        }

        image.classList.remove('app-logo');
        void image.offsetWidth;
        image.classList.add('app-logo');

        document.body.classList.add('party-mode');
        badge.classList.add('is-visible');

        for (let i = 0; i < 18; i += 1) {
          const spark = document.createElement('span');
          spark.className = 'spark';
          spark.style.left = `${Math.random() * 100}%`;
          spark.style.animationDelay = `${Math.random() * 140}ms`;
          spark.style.background = `hsl(${Math.floor(Math.random() * 360)} 95% 62%)`;
          container.appendChild(spark);

          setTimeout(() => spark.remove(), 1050);
        }

        clearTimeout(partyTimeout);
        partyTimeout = setTimeout(() => {
          document.body.classList.remove('party-mode');
          badge.classList.remove('is-visible');
          image.classList.remove('app-logo');
        }, 1300);
      }

      document.addEventListener('keyup', (event) => {
        keySequence += event.key.toLowerCase();
        keySequence = keySequence.slice(-targetWord.length);

        if (keySequence === targetWord) {
          triggerPartyMode();
        }
      });
    </script>

    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-LY55YLXDM2"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'G-LY55YLXDM2');
    </script>
  </head>

  <body>
    <main class="container">
      <a href="/">
        <img id="logo" src="/images/logo.png" alt="Maine JS Logo" />
      </a>

      <h1><a href="/">Maine JS Meetup</a></h1>

      <p>
        Maine JS is a monthly meetup for JavaScript and web developers in Maine
        who want to meet peers, share ideas, and stay connected to the local dev
        community.
      </p>
      <p id="party-badge" class="party-badge" aria-live="polite">
        Now with JavaScript!
      </p>

      <h2>Links</h2>
      <ul>
        <li><a href="https://www.meetup.com/mainejs/">Meetup</a></li>
        <li><a href="https://discord.gg/pPdU3eJrDr">Discord</a></li>
        <li>
          <a href="https://jsconf.com/codeofconduct.html">Code of Conduct</a>
        </li>
      </ul>
    </main>
    <footer><p>© 2026 Maine JS</p></footer>
  </body>
</html>