0.2
This commit is contained in:
parent
9a2fdeae1e
commit
ff8ccd1c75
@ -4,6 +4,29 @@ body {
|
|||||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] body {
|
||||||
|
background-color: #121212;
|
||||||
|
color: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .bg-white {
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .game-card {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
border-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .footer {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme="dark"] .navbar {
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,31 @@
|
|||||||
// Future JavaScript for interactivity
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
console.log('BetPredict Pro loaded');
|
console.log('BetPredict Pro loaded');
|
||||||
});
|
|
||||||
|
const themeToggler = document.getElementById('theme-toggler');
|
||||||
|
const htmlElement = document.documentElement;
|
||||||
|
const sunIcon = 'bi-sun-fill';
|
||||||
|
const moonIcon = 'bi-moon-fill';
|
||||||
|
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
|
htmlElement.setAttribute('data-bs-theme', savedTheme);
|
||||||
|
updateIcon(savedTheme);
|
||||||
|
|
||||||
|
themeToggler.addEventListener('click', () => {
|
||||||
|
const currentTheme = htmlElement.getAttribute('data-bs-theme');
|
||||||
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||||
|
htmlElement.setAttribute('data-bs-theme', newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
updateIcon(newTheme);
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateIcon(theme) {
|
||||||
|
const icon = themeToggler.querySelector('i');
|
||||||
|
if (theme === 'light') {
|
||||||
|
icon.classList.remove(moonIcon);
|
||||||
|
icon.classList.add(sunIcon);
|
||||||
|
} else {
|
||||||
|
icon.classList.remove(sunIcon);
|
||||||
|
icon.classList.add(moonIcon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -27,7 +27,7 @@ $games = [
|
|||||||
];
|
];
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-bs-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@ -53,7 +53,12 @@ $games = [
|
|||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav ms-auto">
|
<ul class="navbar-nav ms-auto align-items-center">
|
||||||
|
<li class="nav-item me-2">
|
||||||
|
<button class="btn btn-outline-secondary" id="theme-toggler" type="button">
|
||||||
|
<i class="bi bi-sun-fill"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="btn btn-primary" href="#">Login / Sign Up</a>
|
<a class="btn btn-primary" href="#">Login / Sign Up</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user