Skip to content

Commit e694a26

Browse files
notsnipednotsniped
committed
Add brand-new NKA website
This uses NKA's new web design language, just as the new YAToDB website does.
1 parent b6f0ded commit e694a26

File tree

5 files changed

+339
-0
lines changed

5 files changed

+339
-0
lines changed

‎index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>YAToDB</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
<link rel="shortcut icon" href="resources/nka_white.png">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
</head>
9+
<noscript>This app requires JavaScript to function. Please enable it in your browser settings.</noscript>
10+
<body>
11+
<div id="top-nav-bar">
12+
<label id="title">NKA</label>
13+
<label class="nav-item" id="github-rd" onclick="rd('git')">Our Projects</label>
14+
<label class="nav-item" id="isobot-rd" onclick="rd('isobot')">isobot</label>
15+
<label class="nav-item" id="yatodb-rd" onclick="rd('yatodb')">YAToDB</label>
16+
<label class="nav-item" id="iso6-9-rd" onclick="rd('iso6.9')">iso6.9</label>
17+
<label class="nav-item" id="skyblockpy-rd" onclick="rd('skyblockpy')">SkyblockPy</label>
18+
<label class="nav-item" id="codebot-rd" onclick="rd('codebot')">CodeBot</label>
19+
<label class="nav-item" id="discord-rd" onclick="rd('server')">Discord Server</label>
20+
</div>
21+
<br><br><br>
22+
<center>
23+
<div id="page-content-container">
24+
<div class="item-card" id="heading-card">
25+
<img src="resources/nka_white.png">
26+
<br>
27+
<label id="title">NKA</label>
28+
<br>
29+
<label class="jap" id="jap-title">Python開発組織</label>
30+
<div class="separator"></div>
31+
<p id="subtitle">We are a development team, we code in Python. We make Discord bots, and occasionally other Python/web related projects.</p>
32+
<button id="invite-button" onclick="rd('git')">Check out our projects!</button>
33+
</div>
34+
<br>
35+
<div class="item-card" id="why-to-use-card">
36+
<label id="title">About us<br><div class="separator"></div></label>
37+
<br>
38+
<label class="subtitle">What do we do?</label>
39+
<p>
40+
We create various types of Discord bots, including moderating bots, economical bots, and more. Feel free to submit your ideas via head members' Discord!
41+
</p>
42+
<br>
43+
<label class="subtitle">> Our most popular bots</label>
44+
<p>
45+
<ul>
46+
<li><a href="https://github.com/PyBotDevs/isobot">isobot</a></li>
47+
<li><a href="https://github.com/PyBotDevs/iso6.9">iso6.9</a></li>
48+
<li><a href="https://github.com/PyBotDevs/yatodb">YAToDB</a></li>
49+
</ul>
50+
</p>
51+
<br>
52+
<label class="subtitle">> Our rules</label>
53+
<p>
54+
<ul>
55+
<li><b>Reduce, Reuse, and Rewrite</b> - notsniped</li>
56+
<li><b>Recreate, Recycle, and Refine</b> - archisa69</li>
57+
<li><b>Rebuild, Refresh, and Reinforce</b> - thatOneArchUser</li>
58+
</ul>
59+
</p>
60+
<br>
61+
<label class="subtitle">> Head members</label>
62+
<p>
63+
<ul>
64+
<li>notsniped <label class="user-badge" id="snipe">SNIPE</label> <label class="user-badge dev-badge">DEV</label> <label class="user-badge" id="isobotdev">isobot dev</label> <label class="user-badge contributor-badge">Contributor</label> <label class="user-badge" id="dumbass">dumbass who goes to school</label></li>
65+
<li>archisa69 <label class="user-badge" id="archisha">Archisha</label> <label class="user-badge dev-badge">DEV</label> <label class="user-badge" id="iso69dev">iso6.9 dev</label> <label class="user-badge contributor-badge">Contributor</label> <label class="user-badge" id="chess">♟️ chess</label></li>
66+
<li>hairyballtheorem <label class="user-badge" id="iusearchbtw">i use arch btw</label> <label class="user-badge dev-badge">DEV</label> <label class="user-badge" id="archbotdev">archbot dev</label> <label class="user-badge contributor-badge">Contributor</label> <label class="user-badge" id="mafsguy">mafs guy</label></li>
67+
</ul>
68+
</p>
69+
<br><br>
70+
<label id="title">About our repositories<br><div class="separator"></div></label>
71+
<br>
72+
<label class="subtitle">> Having problems?</label>
73+
<p>
74+
Feel free to ask via creating an issue in repositories or ask directly in Discord!
75+
</p>
76+
<br>
77+
<label class="subtitle">> Experienced bugs and glitches?</label>
78+
<p>
79+
Report them on certain repositories by creating issues!
80+
</p>
81+
<br>
82+
</div>
83+
<br>
84+
<div class="item-card" id="invite-card-end">
85+
<label id="title">Invite isobot to your server!</label>
86+
<br>
87+
<button id="invite-button" onclick="rd('isobot-invite')">Add To Your Discord Server!</button>
88+
</div>
89+
</div>
90+
</center>
91+
<div id="footer">YAToDB &copy; NKA 2022-present | This page is open-source, licensed with GPL-3.0, and hosted on GitHub. | i use arch btw</div>
92+
</body>
93+
<script src="main.js"></script>
94+
</html>

‎main.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
function rd(target) {
2+
// Redirects the user to a subpage, or another page.
3+
if (target == "git") {window.location = "https://github.com/orgs/PyBotDevs/repositories";}
4+
else if (target == "isobot") {window.location = "https://github.com/PyBotDevs/isobot";}
5+
else if (target == "yatodb") {window.location = "https://PyBotDevs.github.io/yatodb";}
6+
else if (target == "iso6.9") {window.location = "https://github.com/PyBotDevs/iso6.9";}
7+
else if (target == "skyblockpy") {window.location = "https://github.com/PyBotDevs/skyblockpy";}
8+
else if (target == "codebot") {window.location = "https://github.com/PyBotDevs/codebot";}
9+
else if (target == "server") {window.location = "https://discord.gg/b5pz8T6Yjr";}
10+
else {console.error("Page target does not exist.");}
11+
}

‎resources/nka_white.png‎

54.4 KB
Loading

‎resources/nka_white_invis.png‎

53.5 KB
Loading

‎style.css‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
/* Imports */
2+
@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
5+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
6+
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
7+
8+
/* General */
9+
body {
10+
margin: 0px;
11+
padding: 0px;
12+
background-color: black;
13+
color: white;
14+
font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
button {
17+
padding: 10px;
18+
border-radius: 100px;
19+
color: black;
20+
background-color: white;
21+
font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22+
font-size: 17px;
23+
border: none;
24+
box-shadow: 3px 3px 10px 1px rgb(31, 31, 31);
25+
}
26+
button:hover {
27+
color: #AA00FF;
28+
cursor: pointer;
29+
box-shadow: 0px 0px 10px 1px white;
30+
}
31+
button:active {
32+
color: #AA00FF;
33+
background-color: rgb(221, 221, 221);
34+
box-shadow: 0px 0px 10px 1px white;
35+
}
36+
37+
/* Top Nav Bar */
38+
#top-nav-bar {
39+
position: fixed;
40+
background-color: rgba(19, 19, 19, 0.8);
41+
backdrop-filter: blur(30px);
42+
width: 100%;
43+
padding: 20px;
44+
font-size: 17px;
45+
z-index: 10;
46+
overflow-x: auto;
47+
overflow-y: hidden;
48+
white-space: nowrap;
49+
}
50+
#top-nav-bar label {
51+
margin: 16px;
52+
}
53+
.nav-item {
54+
padding: 10px;
55+
border-radius: 100px;
56+
color: black;
57+
background-color: white;
58+
box-shadow: 0px 0px 10px 3px rgb(31, 31, 31);
59+
}
60+
.nav-item:hover {
61+
color: #AA00FF;
62+
cursor: pointer;
63+
box-shadow: 0px 0px 10px 1px #AA00FF;
64+
}
65+
#top-nav-bar #title {
66+
font-weight: normal;
67+
font-size: 24px;
68+
margin-left: 0px;
69+
font-family: 'Josefin Sans', sans-serif;
70+
}
71+
#top-nav-bar #title:hover {
72+
cursor: pointer;
73+
}
74+
#top-nav-bar #invite-rd {
75+
color: white;
76+
background: linear-gradient(to bottom right, #AA00FF 0%, black 100%);
77+
font-weight: bold;
78+
}
79+
80+
/* Extra Eyecandy */
81+
.separator {
82+
border-radius: 100px;
83+
width: 100px;
84+
background-color: white;
85+
height: 10px;
86+
margin-top: 10px;
87+
margin-bottom: 10px;
88+
box-shadow: 3px 3px 10px 1px rgb(31, 31, 31);
89+
}
90+
.python3-highlight {
91+
background: linear-gradient(to bottom right, #306998 0%, #FFD43B 100%);
92+
width: fit-content;
93+
color: black;
94+
}
95+
.discord-highlight {
96+
background-color: #5865F2;
97+
width: fit-content;
98+
color: white;
99+
}
100+
.github-highlight {
101+
background-color: #000000;
102+
width: fit-content;
103+
color: white;
104+
}
105+
.green-highlight {
106+
background-color: green;
107+
width: fit-content;
108+
color: white;
109+
}
110+
.user-badge {
111+
color: black;
112+
background: white;
113+
border-radius: 4px;
114+
font-size: 14px;
115+
padding: 1px;
116+
margin: 1px;
117+
}
118+
.dev-badge {
119+
color: white;
120+
background: #EB64A7;
121+
}
122+
.contributor-badge {
123+
color: white;
124+
background: #E87435;
125+
}
126+
#snipe {
127+
color: white;
128+
background: #7F2ACF;
129+
}
130+
#archisha {
131+
color: white;
132+
background: #04B45C;
133+
}
134+
#iusearchbtw {
135+
background: #04E9E9;
136+
}
137+
#isobotdev {
138+
color: white;
139+
background: #AA00FF;
140+
}
141+
#iso69dev {
142+
color: white;
143+
background: #10C068;
144+
}
145+
#archbotdev {
146+
color: white;
147+
background: #1081C1;
148+
}
149+
#dumbass {
150+
color: white;
151+
background: #CAA216;
152+
}
153+
#mafsguy {
154+
color: white;
155+
background: #090985;
156+
}
157+
158+
/* Main Page Content */
159+
.jap {
160+
font-family: 'Noto Serif JP', serif;
161+
}
162+
#page-content-container {
163+
margin-left: 5%;
164+
margin-right: 5%;
165+
}
166+
.item-card {
167+
background-color: rgb(26, 26, 26);
168+
border-radius: 20px;
169+
padding: 30px;
170+
box-shadow: 0px 0px 10px 15px rgb(10, 10, 10); /* rgb(100, 100, 233) rgb(27, 27, 199)*/
171+
margin-top: 25px;
172+
margin-bottom: 25px;
173+
}
174+
#heading-card {
175+
background: linear-gradient(to right, #AA00FF 0%, #55FF00 50%, #00FFFF 100%);
176+
}
177+
#heading-card img {
178+
width: 250px;
179+
margin-bottom: 20px;
180+
}
181+
#heading-card #title {
182+
font-size: 50px;
183+
font-style: italic;
184+
font-weight: bold;
185+
font-family: 'Josefin Sans', sans-serif;
186+
}
187+
#heading-card #jap-title {
188+
font-size: 26px;
189+
font-style: italic;
190+
font-weight: bold;
191+
font-family: 'Josefin Sans', sans-serif;
192+
}
193+
#heading-card #subtitle {
194+
font-size: 21px;
195+
}
196+
#heading-card #invite-button {
197+
width: 100%;
198+
margin-top: 20px;
199+
}
200+
#why-to-use-card {
201+
text-align: left;
202+
}
203+
#why-to-use-card #title {
204+
font-size: 40px;
205+
font-weight: 800;
206+
background: #AA00FF;
207+
}
208+
#why-to-use-card .subtitle {
209+
font-size: 32px;
210+
font-weight: bold;
211+
}
212+
#invite-card-end #title {
213+
font-size: 35px;
214+
font-style: italic;
215+
font-weight: bold;
216+
font-family: 'Josefin Sans', sans-serif;
217+
}
218+
#invite-card-end #invite-button {
219+
width: 100%;
220+
margin-top: 20px;
221+
}
222+
223+
224+
225+
/* Footer */
226+
#footer {
227+
margin-top: 75px;
228+
background-color: rgb(19, 19, 19);
229+
font-size: 12px;
230+
font-family: 'Roboto Mono', monospace;
231+
text-align: center;
232+
padding: 10px;
233+
box-shadow: 0px 0px 10px 8px rgb(10, 10, 10);
234+
}

0 commit comments

Comments
 (0)