-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (154 loc) · 7.6 KB
/
index.html
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
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seraphis Bot</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MN52JRNK');</script>
<!-- End Google Tag Manager -->
<script src="script.js"></script>
<style>
/* Custom styling to make the footer sticky */
body, html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
</style>
</head>
<body class="bg-gray-900 text-gray-900">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MN52JRNK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Navbar -->
<header class="bg-gray-800 text-white shadow-lg fixed w-full z-50">
<div class="container mx-auto flex justify-between items-center py-4 px-6">
<div class="text-2xl font-bold">
<a href="/" class="text-white text-2xl font-bold flex items-center hover:text-purple-400 transition">
<img src="sera.png" alt="Seraphis Logo" class="w-10 h-10 mr-2">
Seraphis
</a>
</div>
<nav class="space-x-6">
<a href="/commands" class="hover:text-purple-400 transition">Commands</a>
<a href="/team" class="hover:text-purple-400 transition">Team</a>
<a href="/store" class="hover:text-purple-400 transition">Store</a>
<a href="/changelog" class="hover:text-purple-400 transition">Changelog</a>
<a href="/rules" class="hover:text-purple-400 transition">Rules</a>
</nav>
<div class="space-x-4">
<a href="./invite/bot" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-full transition">Invite Seraphis</a>
<a href="#" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-full transition">Support</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="h-screen bg-gradient-to-b from-grey-900 to-grey-900 text-white text-center flex flex-col justify-center items-center pt-24">
<h1 class="text-6xl font-bold animate-pulse">Seraphis Bot</h1>
<p class="text-2xl mt-4">Manage your server with ease using buttons, modals, and slash-commands.</p>
<div class="mt-8">
<a href="/commands" class="px-6 py-3 bg-primary hover:bg-indigo-700 text-white rounded-full transition">View Commands</a>
<a id="invite-btn" href="#" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-full transition">Invite Seraphis</a>
<!-- Script To Show Da Thanks For Inviting THing -->
<script>
// Redirect to Discord with the redirect URI
document.getElementById('invite-btn').addEventListener('click', function() {
const clientId = "1285047986170236999";
const permissions = "1117161270422";
const scope = "bot+applications.commands";
const redirectUri = encodeURIComponent("https://seraphis.xyz/thanks?invited=true");
// Construct the invite URL
const inviteUrl = `https://discord.com/oauth2/authorize?client_id=${clientId}&permissions=${permissions}&scope=${scope}&redirect_uri=${redirectUri}`;
// Redirect to the Discord invite URL
window.location.href = inviteUrl;
});
// Function to check if the user is redirected with ?invited=true parameter
function checkIfInvited() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('invited') === 'true') {
// Redirect to the thanks.html page
window.location.href = "/thanks?invited=true";
}
}
// Run the function when the page loads
window.onload = checkIfInvited;
</script>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-gray-900">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Why Seraphis?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-100 p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold mb-4">(Semi)-Customizable [TESTING, PAID]</h3>
<p class="text-gray-900">Improve your experience with custom modals & more interactions</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold mb-4">Custom Settings</h3>
<p class="text-gray-900">Interactive settings that allow more control over your server's settings and user management.</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold mb-4">Fast & Reliable</h3>
<p class="text-gray-900">Seraphis is built for performance, ensuring fast responses and seamless server integration.</p>
<p class="text-grey-500 gap-4">This bot is still in active development, if you receive any bugs or errors, please run the command <code>/help support</code> or <code>/info bot</code>.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">**CONSTRUCTION**</h2>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<footer class="bg-gray-900 text-white py-10">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- About Section -->
<div>
<h3 class="font-semibold text-lg mb-4 text-purple-400">About Seraphis</h3>
<p class="text-sm">
Seraphis Bot makes server management effortless with buttons, modals, and slash commands. Enjoy seamless moderation and utility features that save time.
</p>
</div>
<!-- Quick Links -->
<div>
<h3 class="font-semibold text-lg mb-4 text-purple-400">Quick Links</h3>
<ul class="space-y-2">
<li><a href="/commands" class="hover:text-indigo-400 transition">Commands</a></li>
<li><a href="/team" class="hover:text-indigo-400 transition">Team</a></li>
<li><a href="/store" class="hover:text-indigo-400 transition">Store</a></li>
<li><a href="/changelog" class="hover:text-indigo-400 transition">Changelog</a></li>
<li><a href="/rules" class="hover:text-indigo-400 transition">Rules</a></li>
</ul>
</div>
<!-- Social Media -->
<div>
<h3 class="font-semibold text-lg mb-4 text-purple-400">Follow Us</h3>
<div class="space-x-4 flex">
<a href="#" class="hover:text-purple-400 transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-purple-400 transition"><i class="fab fa-discord"></i></a>
<a href="#" class="hover:text-purple-400 transition"><i class="fab fa-github"></i></a>
</div>
</div>
<!-- Newsletter Signup -->
<div class="text-center mt-8">
<p>© 2024 Seraphis Bot. All rights reserved.</p>
</div>
</footer>
</body>
</html>