roadmap/index.html at main · RoadMapBeta/roadmap · 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
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta property="og:title" content="RoadMap: Discover New Roads & Compete with Friends!" />
    <meta property="og:description" content="RoadMap is an exciting new app for iOS and Android that allows you to discover new roads, track your journeys, and compete with friends. See where you've been on a map and challenge each other to explore more!" />
    <meta property="og:image" content="https://media.discordapp.net/attachments/1300075798035959818/1300080273735684107/screely-1730032905584.png?ex=67281b5b&is=6726c9db&hm=109a45fa015d2c4bfb4d8be4bccd5897dbbe9b29fc944919ec68e1826efacc56&=&format=webp&quality=lossless&width=1804&height=942" />
    <meta property="og:url" content="https://roadmapbeta.github.io/roadmap/" />
    <meta property="og:type" content="website" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RoadMap - Explore New Roads, Challenge Friends</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" type="image/png" href="images/roadmap.png">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
    <script>
        (function(){
            emailjs.init("XmzyxDkluSnOXrJjj");
        })();
    </script>
    <script>
        if (window.location.pathname.endsWith('index.html') || window.location.pathname.endsWith('index')) {
            window.location.replace('/roadmap/');
        }
    </script>
</head>
<body>

<header>
    <a href="index.html" class="logo">RoadMap</a>
    <div class="header-links">
        <a href="credits.html" class="credits">Credits</a>
        <a href="https://github.com/RoadMapBeta" class="join-heading">
            <img class="gh-logo" src="images/github.png" alt="GitHub Logo" />
            <span>GitHub</span>
        </a>
    </div>
</header>

<div class="center">
    <div class="xl-text">
        Discover new <span class="road-texture">roads</span>. <br />
        Forge your own path.
    </div>
    <div class="subtext">Redefining Exploration, One Road at a Time.</div>
</div>

<div class="email-form">
    <form id="waitlist-form">
        <input
            type="email"
            id="email"
            name="email"
            autocomplete="on"
            placeholder="Enter your email address"
            required
        />
        <button type="submit">Join Waitlist</button>
    </form>
</div>

<div id="toast" class="toast hidden" role="alert">
    <svg style="width:15px;" class="w-5 h-5 text-blue-600 dark:text-blue-500 rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 17 8 2L9 1 1 19l8-2Zm0 0V9"/>
    </svg>
    <div class="toast-message">Email registered successfully.</div>
</div>

<section class="features-section">
    <div class="features-container">
        <div class="feature-item">
            <img src="./images/road.png" alt="Discover Roads" class="feature-image" />
            <h3 class="feature-title">Discover New Roads</h3>
            <p>Discover scenic areas and add new roads to your collection!</p>
        </div>
        <div class="feature-item">
            <img src="./images/trophy.png" alt="Challenge Friends" class="feature-image" />
            <h3 class="feature-title">Challenge Friends</h3>
            <p>Compete with friends to explore and discover the most roads in your area.</p>
        </div>
        <div class="feature-item">
            <img src="./images/map.png" alt="Map Skins" class="feature-image" />
            <h3 class="feature-title">Unlock Map Skins</h3>
            <p>Customize your map with unique skins earned by completing challenges.</p>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="road">
        <div class="road-line"></div>
        <div class="road-line"></div>
        <div class="road-line"></div>
    </div>
    <div class="footer-vehicles">
        <img src="images/car.png" alt="Car driving" class="car-img" />
        <img src="images/bus.png" alt="Bus driving" class="bus-img" />
        <img src="images/truck.png" alt="Truck driving" class="truck-img" />
    </div>
    <div class="footer-content">
        <div class="footer-logo">RoadMap</div>
        <p class="footer-description">Coming soon to iOS and Android. Powered by TomTom.</p>
        <div class="social-icons">
            <a href="https://github.com/RoadMapBeta"><img src="images/github.png" alt="GitHub" class="img-logo" /></a>
            <a href="https://x.com/roadmapbeta"><img src="images/x-social.png" alt="X" class="x-social" /></a>
            <a href="https://www.facebook.com/profile.php?id=61566742735877"><img src="images/facebook.webp" alt="Facebook" class="img-logo" /></a>
            <a href="https://discord.gg/EHfCqHw9"><img src="images/discord.png" alt="Discord" class="img-logo" /></a>
            <a href="mailto:roadmapbeta@gmail.com"><img src="images/gmail.png" alt="Gmail" class="img-logo" /></a>
        </div>
        <div class="privacy-policy">
    <a href="privacy.html" style="color: lightgray;text-decoration: underline;font-size: smaller;position: relative;top: 10px;">Privacy Policy</a>
</div>
    </div>
</footer>

<script>
   document.getElementById("waitlist-form").addEventListener("submit", async function (e) {
    e.preventDefault();
    const email = document.getElementById("email").value;

    if (!isValidEmail(email)) {
        showToast("Please enter a valid email address.", true);
        return;
    }

    const registeredEmails = JSON.parse(localStorage.getItem("registeredEmails")) || [];

    if (registeredEmails.includes(email)) {
        showToast("You can only sign up once with that email.", true);
        return;
    }

    emailjs.send("service_bpqsfws", "template_t2d98c2", {
        to_email: email
    }).then(() => {
        registeredEmails.push(email);
        localStorage.setItem("registeredEmails", JSON.stringify(registeredEmails));
        showToast("Email registered!");
        document.getElementById("email").value = "";
    }).catch((error) => {
        console.error('Failed to send email:', error);
        showToast("Failed to send email.", true);
    });
});

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function showToast(message, isError = false) {
    const toast = document.getElementById("toast");
    const toastMessage = document.querySelector(".toast-message");
    toastMessage.textContent = message;
    toast.classList.remove("hidden");
    toast.classList.toggle("error", isError);
    setTimeout(() => {
        toast.classList.add("hidden");
    }, 3000);
}
</script>
</body>
</html>