Software_Website/Join.html at main · WEMARS-Rover/Software_Website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEMARS | Join Us</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="Join.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

    <section class="sub-header">
        <nav>
            <a href="index.html"><img src="images/WEMARS_Logo_New.png" alt="WEMARS home"></a>
            <div class="nav-links" id="navLinks">
                <ul>
                    <li><a href="index.html"><span class="top"><span>Home</span></span><span class="bottom"><span>Home</span></span></a></li>
                    <li><a href="about.html"><span class="top"><span>About</span></span><span class="bottom"><span>About</span></span></a></li>
                    <li><a href="subsystems.html"><span class="top"><span>Subsystems</span></span><span class="bottom"><span>Subsystems</span></span></a></li>
                    <li><a href="sponsor.html"><span class="top"><span>Sponsor</span></span><span class="bottom"><span>Sponsor</span></span></a></li>
                    <li><a href="Join.html"><span class="top"><span>Join Us</span></span><span class="bottom"><span>Join Us</span></span></a></li>
                </ul>
            </div>
        </nav>

        <nav class="m-nav">
            <div class="responsive-nav">
                <a href="javascript:void(0);" class="icon" onclick="toggleMenu()" aria-expanded="false" aria-label="Open menu"><i class="fa fa-bars"></i></a>
                <img src="images/WEMARS_Logo_New.png" class="logo" alt="WEMARS logo">
                <div class="bar" id="myLinks">
                    <a href="index.html">Home</a>
                    <a href="about.html">About</a>
                    <a href="subsystems.html">Subsystems</a>
                    <a href="sponsor.html">Sponsor</a>
                    <a href="Join.html">Join Us</a>
                </div>
            </div>
        </nav>

        <h1>Join Us</h1>
    </section>

    <section class="join-section">
        <div class="join-card">
            <span class="join-eyebrow">Get involved</span>
            <p class="join-lead">Interested in building rovers with us? Enter your Western email and we'll send
                you a link to our Discord.</p>
            <div class="join-body">
                <p class="join-notice" id="join-notice" hidden>
                    This form only works on the live site or a local server, not when opening the HTML file directly.
                </p>
                <form
                    id="join-form"
                    class="join-form"
                    action="https://formsubmit.co/bheddle4@uwo.ca"
                    method="POST"
                    novalidate
                >
                    <input type="hidden" name="_subject" value="WEMARS Discord invite request">
                    <input type="hidden" name="_autoresponse" id="join-autoresponse" value="">
                    <input type="hidden" name="_next" id="join-next" value="">
                    <input type="text" name="_honey" class="join-honey" tabindex="-1" autocomplete="off" aria-hidden="true">
                    <div class="join-field">
                        <label class="join-label" for="join-email">Western email</label>
                        <input
                            type="email"
                            id="join-email"
                            name="email"
                            class="join-input"
                            placeholder="name@uwo.ca"
                            autocomplete="email"
                            inputmode="email"
                            spellcheck="false"
                            required
                        >
                    </div>
                    <p class="join-error" id="join-error" hidden></p>
                    <button type="submit" class="join-submit" id="join-submit">
                        Get Discord invite
                    </button>
                </form>
                <div class="join-success" id="join-success" hidden>
                    <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                    <div class="join-success-content">
                        <p id="join-success-message">Check your inbox for the Discord invite link. If you do not see it, check your junk or spam folder.</p>
                        <p class="join-success-note" id="join-success-email"></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        function toggleMenu() {
            var menu = document.getElementById("myLinks");
            var isOpen = menu.classList.toggle("is-open");
            var icon = document.querySelector(".m-nav .icon");
            if (icon) {
                icon.setAttribute("aria-expanded", isOpen ? "true" : "false");
                icon.setAttribute("aria-label", isOpen ? "Close menu" : "Open menu");
            }
            var iconMark = icon && icon.querySelector("i");
            if (iconMark) {
                iconMark.classList.toggle("fa-bars", !isOpen);
                iconMark.classList.toggle("fa-xmark", isOpen);
            }
        }
    </script>
    <script src="join.js"></script>

</body>
</html>