From dea2b7c1844aa3c3c8852601efc59c483bf38b36 Mon Sep 17 00:00:00 2001
From: Dongho Kim <dongho@ekstrah.com>
Date: Fri, 12 Dec 2025 17:47:20 +0100
Subject: [PATCH] update

---
 custom/templates/custom/header.tmpl | 185 ++++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)

diff --git a/custom/templates/custom/header.tmpl b/custom/templates/custom/header.tmpl
index cbcefb6..e1768ce 100644
--- a/custom/templates/custom/header.tmpl
+++ b/custom/templates/custom/header.tmpl
@@ -1216,3 +1216,188 @@
 			}
 		}
 	</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>