Skip to content

Commit 8fa8a17

Browse files
FuntyGithubFuntyGithub
committed
added Themes
1 parent 741682b commit 8fa8a17

File tree

6 files changed

+173
-24
lines changed

6 files changed

+173
-24
lines changed

‎assets/scripts/index.js

+49
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,57 @@ document.addEventListener('DOMContentLoaded', function() {
8888
}
8989
});
9090

91+
92+
// Theme menu
93+
let themeDivs = document.getElementsByClassName('themeDiv');
94+
for (let i = 0; i < themeDivs.length; i++) {
95+
let themeDiv = themeDivs[i];
96+
themeDiv.addEventListener('click', function() {
97+
let themeName = themeDiv.getAttribute('data-theme-name');
98+
document.body.classList.remove(document.body.classList[0]);
99+
document.body.classList.add(themeName);
100+
101+
this.classList.add('selected');
102+
let otherThemeDivs = document.getElementsByClassName('themeDiv');
103+
for (let i = 0; i < otherThemeDivs.length; i++) {
104+
let otherThemeDiv = otherThemeDivs[i];
105+
if (otherThemeDiv != this) {
106+
otherThemeDiv.classList.remove('selected');
107+
}
108+
}
109+
// closePopup('themeMenu');
110+
});
111+
}
112+
91113
});
92114

93115
function navBtn(element) {
94116
window.location.href = element.children[0].href
117+
}
118+
119+
120+
121+
function themeBtn() {
122+
document.getElementById('themeMenu').style.display = 'block';
123+
document.getElementById('header').classList.add('blur');
124+
document.getElementById('content').classList.add('blur');
125+
126+
let currentTheme = document.body.classList[0];
127+
let themeDivs = document.getElementsByClassName('themeDiv');
128+
for (let i = 0; i < themeDivs.length; i++) {
129+
let themeDiv = themeDivs[i];
130+
if (themeDiv.getAttribute('data-theme-name') == currentTheme) {
131+
themeDiv.classList.add('selected');
132+
} else {
133+
themeDiv.classList.remove('selected');
134+
}
135+
}
136+
137+
138+
}
139+
140+
function closePopup(id) {
141+
document.getElementById(id).style.display = 'none';
142+
document.getElementById('header').classList.remove('blur');
143+
document.getElementById('content').classList.remove('blur');
95144
}

‎assets/styles/index.css

+60-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,3 @@
1-
/* THEMES */
2-
.darkmode {
3-
/* ORIGINAL */
4-
--primary-color: #FF9C3F;
5-
--text-color: #ffb773;
6-
--higlight-color: #ffc38b;
7-
--shadow-color: #bb5a00;
8-
9-
--background-color: rgb(22, 22, 22);
10-
--container-color: rgb(28, 28, 28);
11-
--container-inner-color: rgb(50, 50, 50);
12-
--container-highlight-color: rgb(55, 55, 55);
13-
14-
}
15-
16-
.lightmode {
17-
}
18-
19-
201
/* GENERAL */
212

223
html {
@@ -28,13 +9,14 @@ html {
289
}
2910

3011
body {
31-
background-color: var(--background-color);
12+
background: var(--background-color);
3213
font-family: 'Be Vietnam Pro', sans-serif;
3314
text-align: center;
3415
color: var(--primary-color);
16+
/* background: linear-gradient(180deg, #F9FDF7, #228478, #0E343F, #071425, #0A1421, #2A1D27, #52272C, #8B2E2B, #DD8243) scroll; */
3517
}
3618

37-
.header {
19+
#header {
3820
background-color: var(--container-color);
3921
display: flex;
4022
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1);
@@ -46,6 +28,33 @@ body {
4628
overflow: hidden;
4729
}
4830

31+
.themeBtn {
32+
margin-left: auto;
33+
margin-top: auto;
34+
margin-bottom: auto;
35+
margin-right: 35px;
36+
padding: 10px;
37+
font-size: 35px;
38+
background-color: var(--container-inner-color);
39+
border-radius: 5px;
40+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1);
41+
}
42+
43+
.themeBtn:hover {
44+
transition: 0.5s;
45+
transform: scale(1.05);
46+
cursor: pointer;
47+
background-color: var(--container-highlight-color);
48+
49+
}
50+
51+
.themeBtn:active {
52+
transition: 0.5s;
53+
transform: scale(0.95);
54+
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 1);
55+
}
56+
57+
4958
.nav ul li {
5059
display: inline-block;
5160
background-color: var(--container-inner-color);
@@ -201,4 +210,34 @@ a:link, a:visited {
201210
@keyframes blink-caret {
202211
from, to { border-color: transparent }
203212
50% { border-color: var(--higlight-color) }
213+
}
214+
215+
216+
217+
.popup {
218+
position: fixed;
219+
top: 0;
220+
left: 0;
221+
width: 100%;
222+
height: 100%;
223+
display: none;
224+
justify-content: center;
225+
align-items: center;
226+
z-index: 1000;
227+
}
228+
229+
.blur {
230+
pointer-events: none;
231+
filter: blur(10px);
232+
}
233+
234+
.themeImg {
235+
width: 384px;
236+
height: 216px;
237+
border-radius: 5px;
238+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1);
239+
}
240+
241+
.selected {
242+
border: 5px solid var(--higlight-color);
204243
}

‎assets/styles/themes.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* THEMES */
2+
.theme-funty {
3+
--primary-color: #FF9C3F;
4+
--text-color: #ffb773;
5+
--higlight-color: #ffc38b;
6+
--shadow-color: #bb5a00;
7+
8+
--background-color: linear-gradient(180deg, #F9FDF7, #228478, #0E343F, #071425, #0A1421, #2A1D27, #52272C, #8B2E2B, #DD8243) scroll;
9+
--container-color: rgb(28, 28, 28, 0.6);
10+
--container-inner-color: rgb(50, 50, 50, 0.2);
11+
--container-highlight-color: rgb(55, 55, 55, 0.6);
12+
}
13+
14+
.theme-default {
15+
/* ORIGINAL */
16+
--primary-color: #FF9C3F;
17+
--text-color: #ffb773;
18+
--higlight-color: #ffc38b;
19+
--shadow-color: #bb5a00;
20+
21+
--background-color: rgb(22, 22, 22);
22+
--container-color: rgb(28, 28, 28);
23+
--container-inner-color: rgb(50, 50, 50);
24+
--container-highlight-color: rgb(55, 55, 55);
25+
26+
}
27+
28+
.lightmode {
29+
}

‎assets/themes/Default.png

240 KB
Loading

‎assets/themes/Funty.png

351 KB
Loading

‎index.html

+35-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Funty.org</title>
77
<script src="https://kit.fontawesome.com/e818a9840c.js" crossorigin="anonymous"></script>
88
<link rel="icon" href="./assets/logo.png">
9+
<link rel="stylesheet" href="./assets/styles/themes.css">
910
<link rel="stylesheet" href="./assets/styles/index.css">
1011
<script src="./assets/scripts/index.js"></script>
1112
<meta name="author" content="Funty" />
@@ -14,8 +15,8 @@
1415
<meta name="wot-verification" content="f29f0d03c5085b4d00aa" />
1516
</head>
1617

17-
<body class="darkmode">
18-
<div class="header">
18+
<body class="theme-default">
19+
<div id="header">
1920
<!-- <div class="logo">
2021
<img src="./assets/logo.png" alt="logo">
2122
</div> -->
@@ -30,9 +31,13 @@ <h1>Welcome to Funty.org</h1>
3031
</ul>
3132
</div>
3233

34+
<div class="themeBtn" onclick="themeBtn()">
35+
<i class="fas fa-palette"></i>
36+
</div>
37+
3338

3439
</div>
35-
<div class="content">
40+
<div id="content">
3641
<div id="home">
3742
<div class="container">
3843
<h1 class="subtitle">About Me</h1>
@@ -133,6 +138,33 @@ <h1 class="heading">and more...</h1>
133138

134139
</div>
135140

141+
<div id="themeMenu" class="popup">
142+
143+
<div class="container">
144+
<h1 class="subtitle">Themes</h1>
145+
146+
<div id="themeMenuGrid">
147+
<div class="themeDiv container" data-theme-name="theme-default">
148+
<img src="./assets/themes/Default.png" alt="default" class="themeImg">
149+
<h1 class="heading">Default</h1>
150+
</div>
151+
152+
<div class="themeDiv container" data-theme-name="theme-funty">
153+
<img src="./assets/themes/Funty.png" alt="Funty" class="themeImg">
154+
<h1 class="heading">Funty</h1>
155+
</div>
156+
157+
</div>
158+
159+
<div id="closePopup" class="themeBtn" onclick="closePopup('themeMenu')">
160+
<!-- <i class="fas fa-times"></i> -->
161+
<a class="text">CLOSE</a>
162+
</div>
163+
164+
</div>
165+
166+
</div>
167+
136168
</body>
137169

138170
</html>

0 commit comments

Comments
 (0)