abundant-waitlist/ferritin.html at main · analyticsgao/abundant-waitlist · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ferritin Tests-Abundant Science</title>

    <!-- Load Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />

    <!-- Load your stylesheet -->
    <link rel="stylesheet" href="styles.css" />

    <!-- Load Supabase client -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.39.5/dist/umd/supabase.min.js"></script>
</head>

<body>

    <!-- Navigation Bar -->
    <nav>
        <div class="logo-container">
            <a href="index.html"
                style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit;">
                <img src="logo-nobackground.jpg" alt="Abundant Science logo">
                <strong>Abundant Science</strong>
            </a>
        </div>
        <div class="nav-links">
            <a href="about.html">Our Mission</a>
        </div>
    </nav>

    <!-- Hero / Form Section -->
    <div class="container">

        <h1>Get Early Access to First At-Home Ferritin Test<br>

        </h1>

        <br>

        <p>
            Join the waitlist for the first at home Ferritin (Iron) Test in Canada<br>
        </p>

        <form id="waitlist-form">
            <input type="email" id="email" placeholder="Email" required />
            <button type="submit">Join Waitlist</button>
        </form>


        <div id="message"></div>
    </div>

    <!-- Supabase Script -->
    <script>
        window.addEventListener("DOMContentLoaded", function () {
            const SUPABASE_URL = "https://jicytgdlbevccejowlnf.supabase.co";
            const SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImppY3l0Z2RsYmV2Y2Nlam93bG5mIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDUzNDQzNTYsImV4cCI6MjA2MDkyMDM1Nn0.DRfZefUPOLjhdxYudhvQKGePr6ex-Xf3JBkedbF7_OY";

            const client = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

            document.getElementById("waitlist-form").addEventListener("submit", async function (e) {
                e.preventDefault();

                const email = document.getElementById("email").value.trim();
                const msg = document.getElementById("message");
                msg.textContent = "";
                msg.className = "";

                if (!email || !email.includes("@")) {
                    msg.textContent = "Please enter a valid email.";
                    msg.className = "error";
                    return;
                }

                try {
                    console.log("📨 Submitting:", email);
                    const { data, error } = await client
                        .from("waitlist")
                        .insert([{ email, source_page: "Ferritin Test" }]);

                    console.log("✅ Response:", data, error);

                    if (error) {
                        msg.textContent = "❌ Error: " + error.message;
                        msg.className = "error";
                    } else {
                        msg.textContent = "✅ You're on the list!";
                        msg.className = "success";
                        document.getElementById("waitlist-form").reset();
                    }
                } catch (err) {
                    console.error("❗ Unexpected error:", err);
                    msg.textContent = "❌ Something went wrong.";
                    msg.className = "error";
                }
            });
        });
    </script>

    <section class="biomarker-section">
        <p>
            <br>
            About Us – We provide rapid tests directly to customers and partner with the governemnt, organizations and
            other healthcare providers
            to make testing more accessible.
            <br><br>
            <br>

            <!-- <section class="resources-section"
            style="padding: 2rem; background-color: #f9f9f9; border-top: 1px solid #ddd;">
            <h2 style="font-size: 1.75rem; margin-bottom: 1rem;">Resources</h2>
            <ul style="list-style: none; padding: 0; line-height: 1.6;">
                <li>
                    📦 <strong>What’s in the Health Box?</strong> – Learn more about what comes in your rapid test kit
                    and how to use it.
                    <a href="https://rapidte.st/pages/health-box" target="_blank">View Health Box</a>
                </li>
                <li>
                    🧪 <strong>How Rapid Testing Works</strong> – Understand how lateral flow tests work and how
                    accurate they are.
                    <a href="https://rapidte.st/pages/how-it-works" target="_blank">Read More</a>
                </li>
                <li>
                    📍 <strong>Where to Get Tested</strong> – Locations, events, or organizations offering HIV testing
                    support.
                    <a href="https://rapidte.st/pages/locations" target="_blank">Find Locations</a>
                </li>
                <li>
                    📚 <strong>HIV Testing in Canada</strong> – Government resources and how you’re supported.
                    <a href="https://www.catie.ca/hiv-testing" target="_blank">View on CATIE.ca</a>
                </li>
            </ul>
        </section> -->

            <!-- <br>Join our Discord community <a href="https://discord.gg/abundant.science" target="_blank"
                rel="noopener noreferrer">here</a> -->
            <br>
            <br>Follow Us on <a href="https://www.tiktok.com/@abundant.science" target="_blank"
                rel="noopener noreferrer">TikTok</a>
            <br>Our <a href="https://rapidte.st" target="_blank" rel="noopener noreferrer">Rapid Tests</a>
        </p>
    </section>

    <footer class="site-footer">
        <p>&copy; 2025 Abundant Science. All rights reserved.</p>
        <p><a href="mailto:contact@abundant.science">Contact Us</a></p>
    </footer>

</body>

</html>