familyHub/index.php
Louis Whittington 93ecc5910a Add color utility functions and theme palette integration
- Introduced utility functions for color manipulation: `fhHexToRgb`, `fhRgbToHex`, `fhMixHex`, `fhRelativeLuminance`, and `fhContrastText`.
- Implemented a comprehensive theme palette based on the user's favorite color, including primary, secondary, and semantic colors.
- Updated CSS variables in the stylesheet to reflect the new theme structure, enhancing consistency across the UI.
- Modified header to dynamically apply theme styles based on the generated palette, improving visual coherence.
2026-03-31 13:01:13 -05:00

177 lines
6.0 KiB
PHP

<?php
require_once 'config/config.php';
require_once 'includes/db.php';
require_once 'includes/utils.php';
require_once 'includes/persona.php';
require_once 'includes/family_settings.php';
startFamilyHubSession();
$people = migrateAllPeople(normalizePeopleList(readJsonFile('people.json')));
if (getActivePersonId() !== null && getActivePerson($people) === null) {
clearPersonaSession();
}
$activePerson = getActivePerson($people);
$familySettings = loadFamilySettings();
if (isset($TABS['currency'])) {
$TABS['currency']['title'] = currencyTabLabel($familySettings);
}
$hasHeadOfHousehold = familyHubHasHeadOfHousehold($people);
$showSettingsTab = !$hasHeadOfHousehold
|| (
$activePerson !== null
&& ($activePerson['role'] ?? '') === ROLE_HEAD
&& isHohVerified()
);
$navTabs = $TABS;
if (!$showSettingsTab) {
unset($navTabs['settings']);
}
$activeTab = isset($_GET['tab']) ? (string) $_GET['tab'] : 'chores';
if (!isset($TABS[$activeTab])) {
$activeTab = 'chores';
}
if (
isset($_GET['tab'])
&& (string) $_GET['tab'] === 'settings'
&& !$showSettingsTab
) {
header('Location: ?tab=chores', true, 303);
exit;
}
if (!isset($navTabs[$activeTab])) {
$firstNav = array_key_first($navTabs);
$activeTab = is_string($firstNav) ? $firstNav : 'chores';
}
$isCalendarTvView = $activeTab === 'calendar' && isset($_GET['view']) && (string) $_GET['view'] === 'tv';
$familyHubApiBase = familyHubWebApiBase();
if (!function_exists('fhHexToRgb')) {
function fhHexToRgb(string $hex): array
{
if (!preg_match('/^#([0-9A-Fa-f]{6})$/', $hex, $m)) {
return [74, 144, 226];
}
$raw = $m[1];
return [
hexdec(substr($raw, 0, 2)),
hexdec(substr($raw, 2, 2)),
hexdec(substr($raw, 4, 2)),
];
}
}
if (!function_exists('fhRgbToHex')) {
function fhRgbToHex(array $rgb): string
{
$r = max(0, min(255, (int) round((float) ($rgb[0] ?? 0))));
$g = max(0, min(255, (int) round((float) ($rgb[1] ?? 0))));
$b = max(0, min(255, (int) round((float) ($rgb[2] ?? 0))));
return sprintf('#%02x%02x%02x', $r, $g, $b);
}
}
if (!function_exists('fhMixHex')) {
function fhMixHex(string $leftHex, string $rightHex, float $rightWeight): string
{
$weight = max(0.0, min(1.0, $rightWeight));
$left = fhHexToRgb($leftHex);
$right = fhHexToRgb($rightHex);
$mixed = [
($left[0] * (1 - $weight)) + ($right[0] * $weight),
($left[1] * (1 - $weight)) + ($right[1] * $weight),
($left[2] * (1 - $weight)) + ($right[2] * $weight),
];
return fhRgbToHex($mixed);
}
}
if (!function_exists('fhRelativeLuminance')) {
function fhRelativeLuminance(string $hex): float
{
[$r, $g, $b] = fhHexToRgb($hex);
return (0.2126 * $r + 0.7152 * $g + 0.0722 * $b) / 255;
}
}
if (!function_exists('fhContrastText')) {
function fhContrastText(string $backgroundHex): string
{
return fhRelativeLuminance($backgroundHex) >= 0.6 ? '#111827' : '#ffffff';
}
}
$favoriteColor = '#4a90e2';
if (
$activePerson !== null
&& !empty($activePerson['favoriteColor'])
&& preg_match('/^#[0-9A-Fa-f]{6}$/', (string) $activePerson['favoriteColor'])
) {
$favoriteColor = (string) $activePerson['favoriteColor'];
}
$themePalette = [];
$themePalette['accent'] = $favoriteColor;
$themePalette['primary'] = $favoriteColor;
$themePalette['primary_hover'] = fhMixHex($favoriteColor, '#000000', 0.12);
$themePalette['primary_active'] = fhMixHex($favoriteColor, '#000000', 0.2);
$themePalette['primary_subtle'] = fhMixHex($favoriteColor, '#ffffff', 0.86);
$themePalette['primary_border'] = fhMixHex($favoriteColor, '#ffffff', 0.64);
$themePalette['primary_text'] = fhContrastText($themePalette['primary']);
$themePalette['primary_subtle_text'] = fhContrastText($themePalette['primary_subtle']);
$themePalette['secondary'] = fhMixHex($favoriteColor, '#ffffff', 0.76);
$themePalette['secondary_hover'] = fhMixHex($favoriteColor, '#ffffff', 0.66);
$themePalette['secondary_active'] = fhMixHex($favoriteColor, '#ffffff', 0.57);
$themePalette['secondary_border'] = fhMixHex($favoriteColor, '#ffffff', 0.5);
$themePalette['secondary_text'] = fhContrastText($themePalette['secondary']);
$themePalette['tertiary'] = fhMixHex($favoriteColor, '#ffffff', 0.9);
$themePalette['tertiary_hover'] = fhMixHex($favoriteColor, '#ffffff', 0.82);
$themePalette['tertiary_active'] = fhMixHex($favoriteColor, '#ffffff', 0.73);
$themePalette['tertiary_border'] = fhMixHex($favoriteColor, '#ffffff', 0.62);
$themePalette['tertiary_text'] = fhContrastText($themePalette['tertiary']);
$themePalette['focus_ring'] = fhMixHex($favoriteColor, '#ffffff', 0.35);
$themePalette['surface_tint'] = fhMixHex($favoriteColor, '#ffffff', 0.93);
$themePalette['header_gradient_end'] = fhMixHex($favoriteColor, '#0f172a', 0.58);
$semanticBase = [
'success' => '#198754',
'warning' => '#f59e0b',
'danger' => '#dc3545',
'info' => '#0ea5e9',
];
foreach ($semanticBase as $key => $baseHex) {
$main = fhMixHex($baseHex, $favoriteColor, 0.2);
$themePalette[$key] = $main;
$themePalette[$key . '_hover'] = fhMixHex($main, '#000000', 0.1);
$themePalette[$key . '_active'] = fhMixHex($main, '#000000', 0.18);
$themePalette[$key . '_subtle'] = fhMixHex($main, '#ffffff', 0.84);
$themePalette[$key . '_border'] = fhMixHex($main, '#ffffff', 0.62);
$themePalette[$key . '_text'] = fhContrastText($main);
$themePalette[$key . '_subtle_text'] = fhContrastText($themePalette[$key . '_subtle']);
}
$headerThemeClass = 'header-tone-dark';
if (fhRelativeLuminance($themePalette['primary']) >= 0.62) {
$headerThemeClass = 'header-tone-light';
}
include 'includes/header.php';
?>
<div class="<?= $isCalendarTvView ? 'container-fluid px-3 py-3' : 'container' ?>">
<div class="tab-content" id="dashboardContentArea">
<?php include 'tabs/' . $activeTab . '.php'; ?>
</div>
</div>
<?php include 'includes/footer.php'; ?>