Skip to content

Commit 85861b7

Browse files
mcgdjmcgdj
authored
Update combined.html
UI updates
1 parent cc6b364 commit 85861b7

File tree

1 file changed

+145
-75
lines changed

1 file changed

+145
-75
lines changed

‎combined.html

Lines changed: 145 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -6,89 +6,148 @@
66
<title>Coding Hut</title>
77
<script src="https://cdn.jsdelivr.net/npm/bcryptjs/dist/bcrypt.min.js"></script>
88
<style>
9-
:root {
10-
--bg-color: #ffffff;
11-
--text-color: #333;
12-
--nav-bg: #333;
13-
--nav-text: #ffffff;
14-
--nav-hover: #555;
15-
--input-bg: #f9f9f9;
16-
--input-border: #ccc;
17-
--button-bg: #28a745;
18-
--button-hover: #218838;
19-
--notification-btn-bg: #007bff;
20-
--notification-btn-hover: #0056b3;
21-
--border-radius: 8px;
22-
--transition-speed: 0.3s;
23-
}
9+
:root {
10+
--bg-color: #ffffff;
11+
--text-color: #333;
12+
--nav-bg: #333;
13+
--nav-text: #ffffff;
14+
--nav-hover: #555;
15+
--input-bg: #f9f9f9;
16+
--input-border: #ccc;
17+
--button-bg: #28a745;
18+
--button-hover: #218838;
19+
--notification-btn-bg: #007bff;
20+
--notification-btn-hover: #0056b3;
21+
--border-radius: 12px;
22+
--transition-speed: 0.3s;
23+
}
2424

25-
.dark-mode {
26-
--bg-color: #121212;
27-
--text-color: #ffffff;
28-
--nav-bg: #1f1f1f;
29-
--nav-text: #ffffff;
30-
--nav-hover: #444;
31-
--input-bg: #222;
32-
--input-border: #555;
33-
--button-bg: #1c7430;
34-
--button-hover: #145a24;
35-
--notification-btn-bg: #0056b3;
36-
--notification-btn-hover: #003d7a;
37-
}
25+
.dark-mode {
26+
--bg-color: #1e1e1e; /* Darker background for better contrast */
27+
--text-color: #e0e0e0; /* Light gray text for readability */
28+
--nav-bg: #2a2a2a; /* Slightly lighter than the background */
29+
--nav-text: #ffffff; /* White text for navigation */
30+
--nav-hover: #3a3a3a; /* Darker hover state for navigation */
31+
--input-bg: #2c2c2c; /* Dark input background */
32+
--input-border: #444; /* Darker border for inputs */
33+
--button-bg: #4caf50; /* Green button background */
34+
--button-hover: #388e3c; /* Darker green on hover */
35+
--notification-btn-bg: #2196F3; /* Bright blue for notifications */
36+
--notification-btn-hover: #1976D2; /* Darker blue on hover */
37+
}
3838

39-
body {
40-
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
41-
margin: 0;
42-
padding: 0;
43-
text-align: center;
44-
background-color: var(--bg-color);
45-
color: var(--text-color);
46-
transition: background-color var(--transition-speed), color var(--transition-speed);
47-
}
39+
body {
40+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
41+
margin: 0;
42+
padding: 0;
43+
text-align: center;
44+
background-color: var(--bg-color);
45+
color: var(--text-color);
46+
transition: background-color var(--transition-speed), color var(--transition-speed);
47+
}
4848

49-
.nav-bar {
50-
background-color: var(--nav-bg);
51-
padding: 16px;
52-
display: flex;
53-
justify-content: center;
54-
gap: 16px;
55-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
56-
}
49+
.nav-bar {
50+
background-color: var(--nav-bg);
51+
padding: 16px;
52+
display: flex;
53+
justify-content: center;
54+
gap: 16px;
55+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
56+
border-radius: var(--border-radius);
57+
}
5758

58-
.nav-bar button {
59-
background: none;
60-
color: var(--nav-text);
61-
border: none;
62-
padding: 12px 20px;
63-
cursor: pointer;
64-
font-size: 16px;
65-
border-radius: var(--border-radius);
66-
transition: background-color var(--transition-speed);
67-
}
59+
.nav-bar button {
60+
background: none;
61+
color: var(--nav-text);
62+
border: none;
63+
padding: 12px 20px;
64+
cursor: pointer;
65+
font-size: 16px;
66+
border-radius: var(--border-radius);
67+
transition: background-color var(--transition-speed), transform var(--transition-speed);
68+
}
6869

69-
.nav-bar button:hover {
70-
background-color: var(--nav-hover);
71-
}
70+
.nav-bar button:hover {
71+
background-color: var(--nav-hover);
72+
transform: scale(1.05);
73+
}
7274

73-
.auth-status {
74-
padding: 10px;
75-
background: #f4f4f4;
76-
text-align: center;
77-
font-size: 18px;
78-
}
75+
.auth-status {
76+
padding: 10px;
77+
background: var(--input-bg);
78+
border-radius: var(--border-radius);
79+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
80+
margin: 20px auto;
81+
max-width: 400px;
82+
transition: background-color var(--transition-speed);
83+
}
7984

80-
.section {
81-
display: none;
82-
opacity: 0;
83-
transform: translateY(20px);
84-
transition: opacity var(--transition-speed), transform var(--transition-speed);
85-
}
85+
.section {
86+
display: none;
87+
opacity: 0;
88+
transform: translateX(100%); /* Start off-screen to the right */
89+
transition: opacity var(--transition-speed), transform var(--transition-speed);
90+
}
91+
92+
.section.active {
93+
display: block;
94+
opacity: 1;
95+
transform: translateX(0); /* Slide into view */
96+
}
97+
98+
.settings {
99+
margin: 20px;
100+
padding: 20px;
101+
background: var(--input-bg);
102+
border-radius: var(--border-radius);
103+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
104+
}
105+
106+
.toggle-switch {
107+
position: relative;
108+
display: inline-block;
109+
width: 60px;
110+
height: 34px;
111+
}
112+
113+
.toggle-switch input {
114+
opacity: 0;
115+
width: 0;
116+
height: 0;
117+
}
118+
119+
.slider {
120+
position: absolute;
121+
cursor: pointer;
122+
top: 0;
123+
left: 0;
124+
right: 0;
125+
bottom: 0;
126+
background-color: #ccc;
127+
border-radius: var(--border-radius);
128+
transition: background-color var(--transition-speed);
129+
}
130+
131+
.slider:before {
132+
position: absolute;
133+
content: "";
134+
height: 26px;
135+
width: 26px;
136+
left: 4px;
137+
bottom: 4px;
138+
background-color: white;
139+
border-radius: var(--border-radius);
140+
transition: transform var(--transition-speed);
141+
}
142+
143+
input:checked + .slider {
144+
background-color: #2196F3;
145+
}
146+
147+
input:checked + .slider:before {
148+
transform: translateX(26px);
149+
}
86150

87-
.section.active {
88-
display: block;
89-
opacity: 1;
90-
transform: translateY(0);
91-
}
92151

93152
</style>
94153
</head>
@@ -165,6 +224,17 @@ <h2>My Account</h2>
165224
document.getElementById('darkModeToggle').checked = true;
166225
}
167226
};
227+
function showSection(sectionId) {
228+
const sections = document.querySelectorAll('.section');
229+
sections.forEach(section => {
230+
if (section.id === sectionId) {
231+
section.classList.add('active');
232+
} else {
233+
section.classList.remove('active');
234+
}
235+
});
236+
}
237+
168238
</script>
169239
</body>
170240
</html>

0 commit comments

Comments
 (0)