Skip to content

Commit 4100136

Browse files
mcgdjmcgdj
authored
Create combined.html
Merged from other repro. This has a few other sections, but I will need to add the content from this repro and a few other pages. Tell me what you think on my Scratch profile.
1 parent 3e47e87 commit 4100136

File tree

1 file changed

+244
-0
lines changed

1 file changed

+244
-0
lines changed

‎combined.html‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Coding Hut</title>
7+
<script src="https://cdn.jsdelivr.net/npm/bcryptjs/dist/bcrypt.min.js"></script>
8+
<style>
9+
:root {
10+
--bg-color: #ffffff;
11+
--text-color: #000000;
12+
--nav-bg: #222;
13+
--nav-text: #ffffff;
14+
--nav-hover: #444;
15+
--input-bg: #f0f0f0;
16+
--input-border: #999;
17+
--button-bg: #28a745;
18+
--button-hover: #218838;
19+
--notification-btn-bg: #007bff;
20+
--notification-btn-hover: #0056b3;
21+
}
22+
23+
.dark-mode {
24+
--bg-color: #121212;
25+
--text-color: #ffffff;
26+
--nav-bg: #111;
27+
--nav-text: #ffffff;
28+
--nav-hover: #333;
29+
--input-bg: #222;
30+
--input-border: #555;
31+
--button-bg: #1c7430;
32+
--button-hover: #145a24;
33+
--notification-btn-bg: #0056b3;
34+
--notification-btn-hover: #003d7a;
35+
}
36+
37+
body {
38+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
39+
margin: 0;
40+
padding: 0;
41+
text-align: center;
42+
background-color: var(--bg-color);
43+
color: var(--text-color);
44+
transition: background-color 0.3s, color 0.3s;
45+
}
46+
47+
.nav-bar {
48+
background-color: var(--nav-bg);
49+
padding: 12px;
50+
display: flex;
51+
justify-content: center;
52+
gap: 12px;
53+
}
54+
55+
.nav-bar button {
56+
background: none;
57+
color: var(--nav-text);
58+
border: none;
59+
padding: 12px 24px;
60+
cursor: pointer;
61+
font-size: 18px;
62+
border-radius: 6px;
63+
transition: background-color 0.3s;
64+
}
65+
66+
.nav-bar button:hover {
67+
background-color: var(--nav-hover);
68+
}
69+
70+
.section {
71+
display: none;
72+
padding: 24px;
73+
max-width: 500px;
74+
margin: auto;
75+
text-align: left;
76+
background: var(--input-bg);
77+
border-radius: 8px;
78+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
79+
opacity: 0;
80+
transform: translateX(50px);
81+
transition: transform 0.5s, opacity 0.5s;
82+
}
83+
84+
#home {
85+
display: block;
86+
opacity: 1;
87+
transform: translateX(0);
88+
}
89+
90+
.settings {
91+
margin-top: 20px;
92+
}
93+
94+
.settings label {
95+
display: flex;
96+
align-items: center;
97+
gap: 10px;
98+
font-size: 16px;
99+
margin-bottom: 10px;
100+
}
101+
102+
.toggle-switch {
103+
position: relative;
104+
width: 50px;
105+
height: 25px;
106+
}
107+
108+
.toggle-switch input {
109+
opacity: 0;
110+
width: 0;
111+
height: 0;
112+
}
113+
114+
.slider {
115+
position: absolute;
116+
cursor: pointer;
117+
top: 0;
118+
left: 0;
119+
right: 0;
120+
bottom: 0;
121+
background-color: #ccc;
122+
transition: 0.4s;
123+
border-radius: 25px;
124+
}
125+
126+
.slider:before {
127+
position: absolute;
128+
content: "";
129+
height: 18px;
130+
width: 18px;
131+
left: 4px;
132+
bottom: 4px;
133+
background-color: white;
134+
transition: 0.4s;
135+
border-radius: 50%;
136+
}
137+
138+
input:checked + .slider {
139+
background-color: #28a745;
140+
}
141+
142+
input:checked + .slider:before {
143+
transform: translateX(24px);
144+
}
145+
146+
.notification {
147+
position: fixed;
148+
bottom: 20px;
149+
right: 20px;
150+
background: var(--button-bg);
151+
color: white;
152+
padding: 10px 20px;
153+
border-radius: 5px;
154+
display: none;
155+
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
156+
transform: translateY(30px);
157+
}
158+
159+
.notification.show {
160+
display: block;
161+
transform: translateY(0);
162+
}
163+
164+
.notification:hover {
165+
background-color: var(--button-hover);
166+
}
167+
168+
.notification-btn {
169+
background-color: var(--notification-btn-bg);
170+
color: white;
171+
padding: 10px 20px;
172+
border: none;
173+
border-radius: 6px;
174+
cursor: pointer;
175+
font-size: 16px;
176+
transition: background-color 0.3s, transform 0.2s;
177+
}
178+
179+
.notification-btn:hover {
180+
background-color: var(--notification-btn-hover);
181+
transform: scale(1.05);
182+
}
183+
</style>
184+
</head>
185+
<body>
186+
<div class="nav-bar">
187+
<button onclick="showSection('home')">Home</button>
188+
<button onclick="showSection('ordering')">Ordering</button>
189+
<button onclick="showSection('rules')">Rules</button>
190+
<button onclick="showSection('settings')">Settings</button>
191+
</div>
192+
193+
<div id="home" class="section"> <h1>Welcome to Coding Hut</h1><p>The best coding shop of Scratch</p> </div>
194+
<div id='ordering' class='section'><h1>Coding Hut Orders</h1></div>
195+
<div id='rules' class='section'><h1>Rules:</h1><ol>Be respectful to customers and emploees.</ol></div>
196+
<div id="settings" class="section" style="display:none;">
197+
<h2>Settings</h2>
198+
<div class="settings">
199+
<label>
200+
<span>Dark Mode</span>
201+
<div class="toggle-switch">
202+
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
203+
<span class="slider"></span>
204+
</div>
205+
</label>
206+
<label>
207+
<span>Enable Notifications</span>
208+
<button class="notification-btn" onclick="enableNotifications()">Turn On</button>
209+
</label>
210+
</div>
211+
</div>
212+
213+
<div id="notification" class="notification">Notifications turned on successfully!</div>
214+
215+
<script>
216+
function showSection(sectionId) {
217+
document.querySelectorAll('.section').forEach(section => {
218+
section.style.display = 'none';
219+
section.style.opacity = '0';
220+
section.style.transform = 'translateX(50px)';
221+
});
222+
const section = document.getElementById(sectionId);
223+
section.style.display = 'block';
224+
setTimeout(() => {
225+
section.style.opacity = '1';
226+
section.style.transform = 'translateX(0)';
227+
}, 10);
228+
}
229+
230+
function toggleDarkMode() {
231+
document.body.classList.toggle('dark-mode');
232+
document.getElementById('darkModeToggle').checked = document.body.classList.contains('dark-mode');
233+
}
234+
235+
function enableNotifications() {
236+
let notification = document.getElementById('notification');
237+
notification.classList.add('show');
238+
setTimeout(() => {
239+
notification.classList.remove('show');
240+
}, 2000);
241+
}
242+
</script>
243+
</body>
244+
</html>

0 commit comments

Comments
 (0)