Skip to content

Commit 3acf13b

Browse files
notsnipednotsniped
authored
Merge pull request #2 from PyBotDevs/web-update
Add a brand new website for YAToDB
2 parents c59b0da + a35485d commit 3acf13b

3 files changed

Lines changed: 252 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>YAToDB</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<noscript>This app requires JavaScript to function. Please enable it in your browser settings.</noscript>
8+
<body>
9+
<div id="top-nav-bar">
10+
<label id="title">YAToDB</label>
11+
<label class="nav-item" id="invite-rd" onclick="rd('invite')">Add to Server</label>
12+
<label class="nav-item" id="github-rd" onclick="rd('git')">Repository</label>
13+
<label class="nav-item" id="commands-list-rd" onclick="rd('commands')">Commands</label>
14+
<label class="nav-item" id="changelog-rd" onclick="rd('changelog')">Changelog</label>
15+
<label class="nav-item" id="discord-rd" onclick="rd('server')">Discord Server</label>
16+
</div>
17+
<br><br><br>
18+
<center>
19+
<div id="page-content-container">
20+
<div class="item-card" id="heading-card">
21+
<label id="title">Yet Another Truth or Dare Bot</label>
22+
<br>
23+
<label class="jap" id="jap-title">さらにもう一つの真実か挑戦かボット</label>
24+
<div class="separator"></div>
25+
<p id="subtitle">YAToDB is a simple, fast and efficient Truth or Dare Discord bot.<br>You can play ToD and other upcoming game modes with your friends in pretty much any Discord server you want.</p>
26+
<button id="invite-button" onclick="rd('invite')">Add To Your Discord Server!</button>
27+
</div>
28+
<br>
29+
<div class="item-card" id="why-to-use-card">
30+
<label id="title">Why YAToDB?<br><div class="separator"></div></label>
31+
<br>
32+
<label class="subtitle">> Simple</label>
33+
<p>
34+
YAToDB is developed only with Truth and Dare in mind, and nothing else.
35+
There are no extra commands, and all commands are built to be simple, easy-to-use and uncomplex.
36+
</p>
37+
<br>
38+
<label class="subtitle">> Fast</label>
39+
<p>
40+
YAToDB is developed with the PyCord library, which provides fast access to the <label class="discord-highlight">Discord API</label> and provides the bot with the latest and greatest Discord features.
41+
</p>
42+
<br>
43+
<label class="subtitle">> Efficient</label>
44+
<p>
45+
YAToDB is made in <label class="python3-highlight">Python 3</label>, which means that YAToDB's back-end is reliable, stable and optimized for performance.
46+
</p>
47+
<br>
48+
<label class="subtitle">> Open Source</label>
49+
<p>
50+
YAToDB is worked on as an open-source project, using the GPL-3.0 license and its code available on <label class="github-highlight">GitHub</label>. This provides code security, reliability, and also allows you to develop and recommend new features for the bot.
51+
</p>
52+
<br>
53+
<label class="subtitle">> Free</label>
54+
<p>
55+
YAToDB is completely <label class="green-highlight">free</label>. The bot is completely free to use and we do not have any subscriptions. <b>As of now, <u>we also do not accept donations.</u></b>
56+
</p>
57+
</div>
58+
<br>
59+
<div class="item-card" id="invite-card-end">
60+
<label id="title">Like What You See?</label>
61+
<br>
62+
<button id="invite-button" onclick="rd('invite')">Add To Your Discord Server!</button>
63+
</div>
64+
</div>
65+
</center>
66+
<div id="footer">YAToDB &copy; notsniped 2023-present | This page is open-source, licensed with GPL-3.0, and hosted on GitHub.</div>
67+
</body>
68+
<script src="main.js"></script>
69+
</html>

‎main.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function rd(target) {
2+
// Redirects the user to a subpage, or another page.
3+
if (target == "invite") {window.location = "https://discord.com/api/oauth2/authorize?client_id=1103327777467420723&permissions=274877908992&scope=bot%20applications.commands";}
4+
else if (target == "git") {window.location = "https://github.com/PyBotDevs/YAToDB";}
5+
else if (target == "commands") {window.location = "";}
6+
else if (target == "changelog") {window.location = "https://github.com/PyBotDevs/YAToDB/releases/latest";}
7+
else if (target == "server") {window.location = "https://discord.gg/b5pz8T6Yjr";}
8+
else {console.error("Page target does not exist.");}
9+
}

‎style.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/* Imports */
2+
@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Josefin+Sans&family=Poppins&family=Roboto+Mono:wght@300&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
4+
5+
/* General */
6+
body {
7+
margin: 0px;
8+
padding: 0px;
9+
background-color: black;
10+
color: white;
11+
font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12+
}
13+
button {
14+
padding: 10px;
15+
border-radius: 100px;
16+
color: black;
17+
background-color: white;
18+
font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19+
font-size: 17px;
20+
border: none;
21+
box-shadow: 3px 3px 10px 1px rgb(31, 31, 31);
22+
}
23+
button:hover {
24+
color: rgb(27, 27, 199);
25+
cursor: pointer;
26+
box-shadow: 0px 0px 10px 1px rgb(27, 27, 199);
27+
}
28+
button:active {
29+
color: rgb(27, 27, 199);
30+
background-color: rgb(221, 221, 221);
31+
box-shadow: 0px 0px 10px 1px rgb(27, 27, 199);
32+
}
33+
34+
/* Top Nav Bar */
35+
#top-nav-bar {
36+
position: fixed;
37+
background-color: rgba(19, 19, 19, 0.8);
38+
backdrop-filter: blur(30px);
39+
width: 100%;
40+
padding: 20px;
41+
font-size: 17px;
42+
}
43+
#top-nav-bar label {
44+
margin: 16px;
45+
}
46+
.nav-item {
47+
padding: 10px;
48+
border-radius: 100px;
49+
color: black;
50+
background-color: white;
51+
box-shadow: 0px 0px 10px 3px rgb(31, 31, 31);
52+
}
53+
.nav-item:hover {
54+
color: rgb(27, 27, 199);
55+
cursor: pointer;
56+
box-shadow: 0px 0px 10px 1px rgb(27, 27, 199);
57+
}
58+
#top-nav-bar #title {
59+
font-weight: normal;
60+
font-size: 24px;
61+
margin-left: 0px;
62+
font-family: 'Josefin Sans', sans-serif;
63+
}
64+
#top-nav-bar #title:hover {
65+
cursor: pointer;
66+
}
67+
#top-nav-bar #invite-rd {
68+
color: white;
69+
background: linear-gradient(to bottom right, rgb(27, 27, 199) 0%, black 100%);
70+
font-weight: bold;
71+
}
72+
/* Extra Eyecandy */
73+
.separator {
74+
border-radius: 100px;
75+
width: 100px;
76+
background-color: white;
77+
height: 10px;
78+
margin-top: 10px;
79+
margin-bottom: 10px;
80+
box-shadow: 3px 3px 10px 1px rgb(31, 31, 31);
81+
}
82+
.python3-highlight {
83+
background: linear-gradient(to bottom right, #306998 0%, #FFD43B 100%);
84+
width: fit-content;
85+
color: black;
86+
}
87+
.discord-highlight {
88+
background-color: #5865F2;
89+
width: fit-content;
90+
color: white;
91+
}
92+
.github-highlight {
93+
background-color: #000000;
94+
width: fit-content;
95+
color: white;
96+
}
97+
.green-highlight {
98+
background-color: green;
99+
width: fit-content;
100+
color: white;
101+
}
102+
103+
/* Main Page Content */
104+
.jap {
105+
font-family: 'Noto Serif JP', serif;
106+
}
107+
#page-content-container {
108+
margin-left: 5%;
109+
margin-right: 5%;
110+
}
111+
.item-card {
112+
background-color: rgb(26, 26, 26);
113+
border-radius: 20px;
114+
padding: 30px;
115+
box-shadow: 0px 0px 10px 15px rgb(10, 10, 10); /* rgb(100, 100, 233) rgb(27, 27, 199)*/
116+
margin-top: 25px;
117+
margin-bottom: 25px;
118+
}
119+
#heading-card {
120+
background: linear-gradient(to bottom right, rgb(27, 27, 199) 0%, rgb(8, 8, 8) 100%);
121+
}
122+
#heading-card #title {
123+
font-size: 50px;
124+
font-style: italic;
125+
font-weight: bold;
126+
font-family: 'Josefin Sans', sans-serif;
127+
}
128+
#heading-card #jap-title {
129+
font-size: 26px;
130+
font-style: italic;
131+
font-weight: bold;
132+
font-family: 'Josefin Sans', sans-serif;
133+
}
134+
#heading-card #subtitle {
135+
font-size: 21px;
136+
}
137+
#heading-card #invite-button {
138+
width: 100%;
139+
margin-top: 20px;
140+
}
141+
#why-to-use-card {
142+
text-align: left;
143+
}
144+
#why-to-use-card #title {
145+
font-size: 40px;
146+
font-weight: 800;
147+
background: linear-gradient(to bottom right, rgb(27, 27, 199) 0%, rgb(8, 8, 8) 100%);
148+
}
149+
#why-to-use-card .subtitle {
150+
font-size: 32px;
151+
font-weight: bold;
152+
}
153+
#invite-card-end #title {
154+
font-size: 35px;
155+
font-style: italic;
156+
font-weight: bold;
157+
font-family: 'Josefin Sans', sans-serif;
158+
}
159+
#invite-card-end #invite-button {
160+
width: 100%;
161+
margin-top: 20px;
162+
}
163+
164+
165+
/* Footer */
166+
#footer {
167+
margin-top: 75px;
168+
background-color: rgb(19, 19, 19);
169+
font-size: 12px;
170+
font-family: 'Roboto Mono', monospace;
171+
text-align: center;
172+
padding: 10px;
173+
box-shadow: 0px 0px 10px 8px rgb(10, 10, 10);
174+
}

0 commit comments

Comments
 (0)