Skip to content

Commit 662f230

Browse files
mcgdjmcgdj
authored
Update combined.html
Added account functionality
1 parent f9a0911 commit 662f230

File tree

1 file changed

+19
-139
lines changed

1 file changed

+19
-139
lines changed

‎combined.html‎

Lines changed: 19 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -36,20 +36,6 @@
3636
--notification-btn-hover: #003d7a;
3737
}
3838

39-
.custom-theme {
40-
--bg-color: #f0f8ff;
41-
--text-color: #2c3e50;
42-
--nav-bg: #3498db;
43-
--nav-text: #ffffff;
44-
--nav-hover: #2980b9;
45-
--input-bg: #ecf0f1;
46-
--input-border: #bdc3c7;
47-
--button-bg: #e74c3c;
48-
--button-hover: #c0392b;
49-
--notification-btn-bg: #9b59b6;
50-
--notification-btn-hover: #8e44ad;
51-
}
52-
5339
body {
5440
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
5541
margin: 0;
@@ -84,99 +70,13 @@
8470
background-color: var(--nav-hover);
8571
}
8672

87-
.section {
88-
display: none;
89-
padding: 24px;
90-
max-width: 600px;
91-
margin: 20px auto;
92-
text-align: left;
93-
background: var(--input-bg);
94-
border-radius: var(--border-radius);
95-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
96-
opacity: 0;
97-
transform: translateX(50px);
98-
transition: transform var(--transition-speed), opacity var(--transition-speed);
99-
}
100-
101-
#home {
102-
display: block;
103-
opacity: 1;
104-
transform: translateX(0);
105-
}
106-
107-
.settings {
108-
margin-top: 20px;
109-
}
110-
111-
.settings label {
112-
display: flex;
113-
align-items: center;
114-
gap: 10px;
115-
font-size: 16px;
116-
margin-bottom: 10px;
117-
}
118-
119-
.toggle-switch {
120-
position: relative;
121-
width: 50px;
122-
height: 25px;
123-
}
124-
125-
.toggle-switch input {
126-
opacity: 0;
127-
width: 0;
128-
height: 0;
129-
}
130-
131-
.slider {
132-
position: absolute;
133-
cursor: pointer;
134-
top: 0;
135-
left: 0;
136-
right: 0;
137-
bottom: 0;
138-
background-color: #ccc;
139-
transition: background-color var(--transition-speed);
140-
border-radius: 25px;
141-
}
142-
143-
.slider:before {
144-
position: absolute;
145-
content: "";
146-
height: 18px;
147-
width: 18px;
148-
left: 4px;
149-
bottom: 4px;
150-
background-color: white;
151-
transition: transform var(--transition-speed);
152-
border-radius: 50%;
153-
}
154-
155-
input:checked + .slider {
156-
background-color: #28a745;
157-
}
158-
159-
input:checked + .slider:before {
160-
transform: translateX(24px);
161-
}
162-
163-
.notification {
164-
position: fixed;
165-
bottom: 20px;
166-
right: 20px;
167-
background: var(--button-bg);
168-
color: white;
169-
padding: 12px 20px;
170-
border-radius: var(--border-radius);
171-
display: none;
172-
transition: opacity var(--transition-speed), transform var(--transition-speed);
173-
transform: translateY(30px);
73+
.auth-status {
74+
padding: 10px;
75+
background: #f4f4f4;
76+
text-align: center;
77+
font-size: 18px;
17478
}
17579

176-
.notification.show {
177-
display: block;
178-
transform: translateY(0);
179-
}
18080
</style>
18181
</head>
18282
<body>
@@ -185,8 +85,11 @@
18585
<button onclick="showSection('ordering')">Ordering</button>
18686
<button onclick="showSection('rules')">Rules</button>
18787
<button onclick="showSection('settings')">Settings</button>
88+
<button><a href="https://scratch-coding-hut.github.io/account" id="account-link" style="color: inherit; text-decoration: none;">My Account</a></button>
18889
</div>
18990

91+
<div class="auth-status" id="authStatus">Checking login status...</div>
92+
19093
<div id="home" class="section">
19194
<h1>Welcome to Coding Hut</h1>
19295
<p>The best coding shop of Scratch</p>
@@ -210,56 +113,33 @@ <h2>Settings</h2>
210113
<span class="slider"></span>
211114
</div>
212115
</label>
213-
<label>
214-
<span>Enable Notifications</span>
215-
<div class="toggle-switch">
216-
<input type="checkbox" id="notificationToggle" onchange="toggleNotifications()">
217-
<span class="slider"></span>
218-
</div>
219-
</label>
220-
<label>
221-
<span>Custom Theme</span>
222-
<input type="color" id="customColorPicker" onchange="changeCustomTheme()" />
223-
</label>
224116
</div>
225117
</div>
226118

227-
<div id="notification" class="notification">Notifications turned on successfully!</div>
228-
229119
<script>
230120
function showSection(sectionId) {
231121
document.querySelectorAll('.section').forEach(section => {
232122
section.style.display = 'none';
233-
section.style.opacity = '0';
234-
section.style.transform = 'translateX(50px)';
235123
});
236-
const section = document.getElementById(sectionId);
237-
section.style.display = 'block';
238-
setTimeout(() => {
239-
section.style.opacity = '1';
240-
section.style.transform = 'translateX(0)';
241-
}, 10);
124+
document.getElementById(sectionId).style.display = 'block';
242125
}
243126

244127
function toggleDarkMode() {
245128
document.body.classList.toggle('dark-mode');
246129
}
247130

248-
function toggleNotifications() {
249-
const notification = document.getElementById('notification');
250-
const isEnabled = document.getElementById('notificationToggle').checked;
251-
if (isEnabled) {
252-
notification.classList.add('show');
253-
setTimeout(() => {
254-
notification.classList.remove('show');
255-
}, 2000);
131+
function updateAuthStatus() {
132+
const storedUser = localStorage.getItem("loggedInUser");
133+
const authStatus = document.getElementById("authStatus");
134+
if (storedUser) {
135+
authStatus.innerText = `Logged in as: ${storedUser}`;
136+
document.getElementById("account-link").innerText = `My Account (${storedUser})`;
137+
} else {
138+
authStatus.innerText = "Not logged in";
256139
}
257140
}
258-
259-
function changeCustomTheme() {
260-
const color = document.getElementById('customColorPicker').value;
261-
document.documentElement.style.setProperty('--bg-color', color);
262-
}
141+
142+
window.onload = updateAuthStatus;
263143
</script>
264144
</body>
265145
</html>

0 commit comments

Comments
 (0)