engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix theme flash and add logout to profile page

Browse source 
- Add inline script to set theme before page render (browse, profile)
- Prevents white flash when loading pages in dark mode
- Add logout button with confirmation to profile page
- Username already clickable in browse page header (links to profile)
This commit is contained in:
Russell Ballestrini 2025-11-30 10:00:48 -05:00
parent 277cd7306a
commit 4d93819571
2 changed files with 38 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

13
templates/browse.html
View file

@ -1,10 +1,17 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browse Rooms - OpenCompletion</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script>
// Set theme immediately to prevent flash
(function() {
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
})();
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
body {
@ -276,10 +283,6 @@
</div>
<script>
// Theme persistence
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
function switchTab(tab, element) {
// Update tab buttons
document.querySelectorAll('.room-tab').forEach(btn => {

30
templates/profile.html
View file

@ -5,6 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Settings - OpenCompletion</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script>
// Set theme immediately to prevent flash
(function() {
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
})();
</script>
<style>
:root {
--bg-primary: #ffffff;
@ -262,6 +269,7 @@
<div class="header-actions">
<a href="/" class="btn">🏠 Home</a>
<a href="/browse" class="btn btn-secondary">📋 Browse Rooms</a>
<button class="btn btn-secondary" onclick="logout()">🚪 Log Out</button>
</div>
</div>
@ -432,6 +440,28 @@
submitBtn.textContent = 'Update Username';
}
});
// Logout function
async function logout() {
if (!confirm('Are you sure you want to log out?')) {
return;
}
try {
const response = await fetch('/auth/logout', {
method: 'POST',
headers: {'Content-Type': 'application/json'}
});
if (response.ok) {
window.location.href = '/';
} else {
alert('Failed to log out. Please try again.');
}
} catch (error) {
alert('Network error. Please try again.');
}
}
</script>
</body>
</html>