update
This commit is contained in:
@@ -1216,3 +1216,188 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Rose Theme Schema */
|
||||||
|
body.theme-rose {
|
||||||
|
background-color: #FCF8F8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header & Navbar */
|
||||||
|
body.theme-rose #navbar {
|
||||||
|
background: rgba(245, 175, 175, 0.95) !important; /* #F5AFAF */
|
||||||
|
border-bottom: 1px solid rgba(249, 223, 223, 0.3) !important; /* #F9DFDF */
|
||||||
|
box-shadow: 0 12px 30px rgba(245, 175, 175, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose #navbar .item:hover,
|
||||||
|
body.theme-rose #navbar .item.active {
|
||||||
|
background: rgba(255, 255, 255, 0.25) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
body.theme-rose .home-hero {
|
||||||
|
background: linear-gradient(to bottom, #F9DFDF 0%, #F5AFAF 40%, #F9DFDF 70%, #FCF8F8 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .home-hero::before {
|
||||||
|
background: linear-gradient(to bottom, transparent 0%, rgba(249, 223, 223, 0.15) 30%, rgba(245, 175, 175, 0.25) 60%, rgba(245, 175, 175, 0.35) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .home-hero::after {
|
||||||
|
background: linear-gradient(to bottom, transparent 0%, rgba(249, 223, 223, 0.2) 40%, rgba(245, 175, 175, 0.3) 70%, rgba(245, 175, 175, 0.4) 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Whale Recoloring */
|
||||||
|
body.theme-rose .whale-left,
|
||||||
|
body.theme-rose .whale-middle {
|
||||||
|
background: #F9DFDF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .whale-tail,
|
||||||
|
body.theme-rose .whale-fin1,
|
||||||
|
body.theme-rose .whale-fin2 {
|
||||||
|
background: #F5AFAF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feature Icons */
|
||||||
|
body.theme-rose .feature-icon {
|
||||||
|
background: rgba(249, 223, 223, 0.4) !important;
|
||||||
|
color: #F5AFAF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
body.theme-rose .hero-btn-primary {
|
||||||
|
background: linear-gradient(135deg, #F5AFAF, #F9DFDF) !important;
|
||||||
|
box-shadow: 0 8px 20px rgba(245, 175, 175, 0.35) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .hero-btn-primary:hover {
|
||||||
|
background: linear-gradient(135deg, #e09090, #ebb0b0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .hero-btn-secondary {
|
||||||
|
background: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
border-color: #F9DFDF !important;
|
||||||
|
color: #cc7070 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .hero-btn-secondary:hover {
|
||||||
|
border-color: #F5AFAF !important;
|
||||||
|
color: #b05050 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .home-footer-cta {
|
||||||
|
background: linear-gradient(135deg, #F5AFAF, #F9DFDF) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
body.theme-rose .custom-footer h3,
|
||||||
|
body.theme-rose .custom-footer a:hover {
|
||||||
|
color: #F5AFAF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.theme-rose .custom-footer .social-links a {
|
||||||
|
background: rgba(245, 175, 175, 0.15) !important;
|
||||||
|
color: #F5AFAF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle Button */
|
||||||
|
#theme-toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 2000;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-toggle-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
transform: translateY(-50%) scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// 1. Check saved preference
|
||||||
|
const STORAGE_KEY = 'theme_preference_rose';
|
||||||
|
const isRose = localStorage.getItem(STORAGE_KEY) === 'true';
|
||||||
|
|
||||||
|
if (isRose) {
|
||||||
|
document.body.classList.add('theme-rose');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Inject Toggle Button
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
// Try to find a container for right-aligned items to integrate nicely
|
||||||
|
const rightMenu = navbar ? navbar.querySelector('.right.menu, .navbar-right, .navbar-mobile-right') : null;
|
||||||
|
|
||||||
|
if (navbar) {
|
||||||
|
// Create button
|
||||||
|
const btn = document.createElement('div');
|
||||||
|
btn.id = 'theme-toggle-btn';
|
||||||
|
btn.innerHTML = '<i class="fa-solid fa-palette"></i>';
|
||||||
|
btn.title = "Toggle Color Schema";
|
||||||
|
|
||||||
|
if (rightMenu) {
|
||||||
|
// Integrate as a menu item
|
||||||
|
btn.classList.add('item');
|
||||||
|
btn.style.cursor = 'pointer';
|
||||||
|
btn.style.marginRight = '8px';
|
||||||
|
btn.style.display = 'inline-flex';
|
||||||
|
btn.style.alignItems = 'center';
|
||||||
|
btn.style.justifyContent = 'center';
|
||||||
|
btn.style.color = 'inherit';
|
||||||
|
|
||||||
|
// Override the absolute positioning from CSS ID selector
|
||||||
|
btn.style.position = 'static';
|
||||||
|
btn.style.transform = 'none';
|
||||||
|
btn.style.width = 'auto'; // allow natural width
|
||||||
|
btn.style.height = 'auto';
|
||||||
|
btn.style.background = 'transparent';
|
||||||
|
btn.style.border = 'none';
|
||||||
|
btn.style.padding = '0.5rem';
|
||||||
|
|
||||||
|
// Insert at beginning of right menu
|
||||||
|
rightMenu.insertBefore(btn, rightMenu.firstChild);
|
||||||
|
} else {
|
||||||
|
// Fallback to absolute positioning (default CSS)
|
||||||
|
const computedStyle = window.getComputedStyle(navbar);
|
||||||
|
if (computedStyle.position === 'static') {
|
||||||
|
navbar.style.position = 'relative';
|
||||||
|
}
|
||||||
|
navbar.appendChild(btn);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add click event
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
document.body.classList.toggle('theme-rose');
|
||||||
|
const newState = document.body.classList.contains('theme-rose');
|
||||||
|
localStorage.setItem(STORAGE_KEY, newState);
|
||||||
|
|
||||||
|
// Simple rotation animation
|
||||||
|
const icon = btn.querySelector('i');
|
||||||
|
if (icon) {
|
||||||
|
icon.style.transition = 'transform 0.4s';
|
||||||
|
icon.style.transform = 'rotate(180deg)';
|
||||||
|
setTimeout(() => {
|
||||||
|
icon.style.transform = 'rotate(0deg)';
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user