Skip to content

Commit e3ca02f

Browse files
itubetwitubetw
authored
Design Upgrade (#5)
* Design Upgrade * fixed chillerdragons requests * added google fonts
1 parent c10650a commit e3ca02f

File tree

6 files changed

+229
-53
lines changed

6 files changed

+229
-53
lines changed

‎fonts/Roboto-Bold.ttf

163 KB
Binary file not shown.

‎fonts/Roboto-Light.ttf

163 KB
Binary file not shown.

‎fonts/Roboto-Regular.ttf

164 KB
Binary file not shown.

‎img/chillerbot-logo.png

17.6 KB
Loading

‎index.html

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,73 @@
77
<meta content="Custom ddnet based teeworlds client chillerbot-ux with warlist" name="description">
88
<title>chillerbot-ux ddnet client</title>
99
<link rel="stylesheet" href="style.css">
10+
<style>
11+
@font-face {
12+
font-family: 'Roboto';
13+
src: url('fonts/Roboto-Light.woff2') format('woff2'),
14+
url('fonts/Roboto-Light.woff') format('woff');
15+
font-weight: 300;
16+
font-style: normal;
17+
}
18+
@font-face {
19+
font-family: 'Roboto';
20+
src: url('fonts/Roboto-Regular.woff2') format('woff2'),
21+
url('fonts/Roboto-Regular.woff') format('woff');
22+
font-weight: 400;
23+
font-style: normal;
24+
}
25+
@font-face {
26+
font-family: 'Roboto';
27+
src: url('fonts/Roboto-Bold.woff2') format('woff2'),
28+
url('fonts/Roboto-Bold.woff') format('woff');
29+
font-weight: 700;
30+
font-style: normal;
31+
}
32+
</style>
1033
</head>
1134
<body>
1235
<div class="all">
36+
<header>
37+
<img src="img/chillerbot-logo.png" alt="ChillerBot Logo" class="logo">
38+
</header>
1339
<div class="wrapper">
1440
<div class="content">
1541
<div class="padded-content">
16-
<h1>chillerbot-ux</h1>
42+
<h1 class="glitch" data-text="chillerbot-ux">chillerbot-ux</h1>
1743
<p>
18-
A ddnet based client with additional features: <br>
19-
- chat based war list to color names red and green <code>!war (name)</code> <code>!peace (name)</code> <code>!team (name)</code> <code>!delteam (name)</code><br>
20-
- password manager (requires manually editing a text file) <br>
21-
- auto reply to common pings in chat <code>bind h reply_to_last_ping</code> <br>
22-
- change username before touching the finish line <code>cl_finish_rename</code> <br>
23-
For more info and releases visit <a href="https://github.com/chillerbot/chillerbot-ux">github</a>.
44+
A ddnet based client with additional features:
2445
</p>
25-
<img src="https://raw.githubusercontent.com/ChillerDragon/cdn/master/chillerbot_warlist_basic.gif" alt="warlist">
46+
<ul>
47+
<li>Chat based war list to color names red and green <code>!war (name)</code> <code>!peace (name)</code> <code>!team (name)</code> <code>!delteam (name)</code></li>
48+
<li>Password manager (requires manually editing a text file)</li>
49+
<li>Auto reply to common pings in chat <code>bind h reply_to_last_ping</code></li>
50+
<li>Change username before touching the finish line <code>cl_finish_rename</code></li>
51+
</ul>
52+
<p>For more info and releases visit <a href="https://github.com/chillerbot/chillerbot-ux" class="btn">GitHub</a></p>
53+
<img src="https://raw.githubusercontent.com/ChillerDragon/cdn/master/chillerbot_warlist_basic.gif" alt="warlist" class="feature-img">
2654
<h3>Download v008</h3>
27-
<a href="https://github.com/chillerbot/chillerbot-ux/releases/download/v0.0.8/chillerbot-ux-windows-latest.zip">
28-
Windows
29-
</a><br>
30-
<a href="https://github.com/chillerbot/chillerbot-ux/releases/download/v0.0.8/chillerbot-ux-macOS-latest.zip">
31-
macOS
32-
</a><br>
33-
<a href="https://github.com/chillerbot/chillerbot-ux/releases/download/v0.0.8/chillerbot-ux-ubuntu-latest.zip">
34-
Linux
35-
</a><br>
55+
<div class="download-buttons">
56+
<a href="https://github.com/chillerbot/chillerbot-ux/releases/download/v0.0.8/chillerbot-ux-windows-latest.zip" class="btn">Windows</a>
57+
<a href="https://github.com/chillerbot/chillerbot-ux/releases/download/v0.0.8/chillerbot-ux-macOS-latest.zip" class="btn">macOS</a>
58+
<a href="https://github.com/chillerbot/chillerbot-ux/releases/download/v0.0.8/chillerbot-ux-ubuntu-latest.zip" class="btn">Linux</a>
59+
</div>
3660
<h3>Get the source</h3>
37-
<a href="https://github.com/chillerbot/chillerbot-ux">
38-
<img src="img/github.svg" alt="github" style="height: 64px">
61+
<a href="https://github.com/chillerbot/chillerbot-ux" class="github-link">
62+
<img src="img/github.svg" alt="github" class="github-icon">
3963
</a>
40-
<br>
41-
<a href="https://discord.gg/gruApUbhEF" target="_blank">
42-
chillerbot support discord by Itube / 'SYLEX
43-
</a>
44-
</div> <!-- padded content -->
45-
<div class="grass"></div>
46-
</div> <!-- content -->
47-
</div> <!-- wrapper-->
64+
<div class="discord-link">
65+
<a href="https://discord.gg/gruApUbhEF" target="_blank" class="btn">
66+
Join Chillerbot Support Discord
67+
</a>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
4872
<div class="footer">
4973
<div class="small_tree"></div>
5074
<div class="bush"></div>
5175
<div class="grass"></div>
5276
</div>
5377
</div> <!-- all -->
5478
</body>
55-
</html>
79+
</html>

‎style.css

Lines changed: 177 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,203 @@
1-
html, body {
2-
background-color: rgb(122, 194, 126);
3-
background-image: url("img/sun.png");
4-
background-repeat: no-repeat;
1+
@keyframes glitch {
2+
0% {
3+
clip-path: inset(71% 0 10% 0);
4+
transform: translate(-5px, 5px);
5+
}
6+
5% {
7+
clip-path: inset(29% 0 71% 0);
8+
transform: translate(5px, -5px);
9+
}
10+
10% {
11+
clip-path: inset(83% 0 1% 0);
12+
transform: translate(-5px, 5px);
13+
}
14+
15% {
15+
clip-path: inset(100% 0 1% 0);
16+
transform: translate(5px, -5px);
17+
}
18+
20% {
19+
clip-path: inset(58% 0 43% 0);
20+
transform: translate(-5px, 5px);
21+
}
22+
25% {
23+
clip-path: inset(46% 0 34% 0);
24+
transform: translate(5px, -5px);
25+
}
26+
100% {
27+
clip-path: inset(100% 0 0% 0);
28+
transform: translate(0);
29+
}
30+
}
31+
32+
body {
33+
background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
534
margin: 0;
635
padding: 0;
36+
font-family: 'Roboto', sans-serif;
37+
color: #ffffff;
38+
min-height: 100vh;
39+
}
40+
41+
.all {
42+
min-height: 100vh;
43+
display: flex;
44+
flex-direction: column;
45+
justify-content: space-between;
46+
}
47+
48+
header {
49+
text-align: center;
50+
padding: 2rem 0;
51+
}
52+
53+
.logo {
54+
max-width: 200px;
55+
height: auto;
56+
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
757
}
858

959
.wrapper {
1060
display: flex;
1161
justify-content: center;
1262
align-items: center;
63+
padding: 2rem;
1364
}
1465

1566
.content {
16-
border: 2px solid rgba(0, 0, 0, 0.2);
17-
border-radius: 5px;
18-
margin-top: 20px;
19-
background-color: rgba(0, 0, 0, 0.05);
67+
background-color: rgba(255, 255, 255, 0.1);
68+
backdrop-filter: blur(10px);
69+
border-radius: 15px;
70+
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
71+
border: 1px solid rgba(255, 255, 255, 0.18);
72+
padding: 2rem;
73+
max-width: 800px;
74+
width: 100%;
2075
}
2176

22-
.padded-content {
23-
padding: 20px;
77+
h1 {
78+
font-size: 3rem;
79+
text-align: center;
80+
margin-bottom: 2rem;
81+
position: relative;
2482
}
2583

26-
.grass {
27-
background-image: url("img/grass.png");
84+
.glitch {
85+
position: relative;
86+
}
87+
88+
.glitch::before,
89+
.glitch::after {
90+
content: attr(data-text);
91+
position: absolute;
92+
top: 0;
93+
left: 0;
2894
width: 100%;
29-
height: 24px;
95+
height: 100%;
3096
}
3197

32-
.bush {
33-
background-image: url("img/bush.png");
34-
height: 80px;
98+
.glitch::before {
99+
left: 2px;
100+
text-shadow: -2px 0 #ff00c1;
101+
clip: rect(44px, 450px, 56px, 0);
102+
animation: glitch 5s infinite linear alternate-reverse;
103+
}
104+
105+
.glitch::after {
106+
left: -2px;
107+
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
108+
animation: glitch 1s infinite linear alternate-reverse;
109+
}
110+
111+
p, ul {
112+
font-size: 1.1rem;
113+
line-height: 1.6;
114+
}
115+
116+
ul {
117+
padding-left: 1.5rem;
118+
}
119+
120+
code {
121+
background-color: rgba(255, 255, 255, 0.1);
122+
padding: 0.2rem 0.4rem;
123+
border-radius: 4px;
124+
font-family: monospace;
125+
}
126+
127+
.feature-img {
128+
max-width: 100%;
129+
border-radius: 10px;
130+
margin: 1rem 0;
131+
}
132+
133+
.btn {
134+
display: inline-block;
135+
background-color: #4CAF50;
136+
color: white;
137+
padding: 0.5rem 1rem;
138+
text-decoration: none;
139+
border-radius: 5px;
140+
transition: background-color 0.3s ease;
141+
}
142+
143+
.btn:hover {
144+
background-color: #45a049;
145+
}
146+
147+
.download-buttons {
148+
display: flex;
149+
justify-content: space-around;
150+
margin: 1rem 0;
151+
}
152+
153+
.github-link {
154+
display: flex;
155+
justify-content: center;
156+
margin: 1rem 0;
157+
}
158+
159+
.github-icon {
160+
height: 64px;
161+
transition: transform 0.3s ease;
162+
}
163+
164+
.github-icon:hover {
165+
transform: scale(1.1);
166+
}
167+
168+
.discord-link {
169+
text-align: center;
170+
margin-top: 1rem;
171+
}
172+
173+
.footer {
174+
position: relative;
175+
height: 200px;
176+
z-index: 2;
177+
}
178+
179+
.small_tree, .bush, .grass {
180+
position: absolute;
181+
bottom: 0;
182+
left: 0;
35183
width: 100%;
36-
margin-bottom: -24px;
184+
background-repeat: repeat-x;
37185
}
38186

39187
.small_tree {
40-
background-image: url("img/small_tree.png");
41188
height: 180px;
42-
width: 100%;
43-
margin-bottom: -80px;
189+
background-image: url("img/small_tree.png");
190+
z-index: 3;
44191
}
45192

46-
.all {
47-
height: 100vh;
48-
display: flex;
49-
flex-direction: column;
50-
justify-content: space-between;
193+
.bush {
194+
height: 80px;
195+
background-image: url("img/bush.png");
196+
z-index: 2;
197+
}
198+
199+
.grass {
200+
height: 24px;
201+
background-image: url("img/grass.png");
202+
z-index: 1;
51203
}

0 commit comments

Comments
 (0)