From 937d8d9547932d65a2d9055b63eb4df7ce211ffa Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 17 Mar 2026 16:10:47 +0000 Subject: [PATCH 1/3] Add src/app/settings/page.tsx --- src/app/settings/page.tsx | 444 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 444 insertions(+) create mode 100644 src/app/settings/page.tsx diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx new file mode 100644 index 0000000..f270537 --- /dev/null +++ b/src/app/settings/page.tsx @@ -0,0 +1,444 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import ContactCenter from '@/components/sections/contact/ContactCenter'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { Palette, Volume2, Zap, RotateCw, Save } from 'lucide-react'; +import { useState, useEffect } from 'react'; + +interface AppearanceSettings { + colorTheme: string; + fontFamily: string; + layoutWidth: 'compact' | 'medium' | 'wide'; + darkMode: boolean; +} + +interface KokoSettings { + movementSpeed: 'slow' | 'normal' | 'fast'; + personality: 'cheerful' | 'calm' | 'professional'; + interactionStyle: 'minimal' | 'balanced' | 'interactive'; + soundEnabled: boolean; + voiceEnabled: boolean; +} + +interface VaultSettings { + encryptionEnabled: boolean; + autoBackup: boolean; + backupFrequency: 'daily' | 'weekly' | 'monthly'; + compressionEnabled: boolean; +} + +const DEFAULT_APPEARANCE: AppearanceSettings = { + colorTheme: 'grayPurpleAccent', + fontFamily: 'inter', + layoutWidth: 'compact', + darkMode: false, +}; + +const DEFAULT_KOKO: KokoSettings = { + movementSpeed: 'normal', + personality: 'cheerful', + interactionStyle: 'balanced', + soundEnabled: true, + voiceEnabled: true, +}; + +const DEFAULT_VAULT: VaultSettings = { + encryptionEnabled: true, + autoBackup: true, + backupFrequency: 'weekly', + compressionEnabled: true, +}; + +export default function SettingsPage() { + const [appearanceSettings, setAppearanceSettings] = useState(DEFAULT_APPEARANCE); + const [kokoSettings, setKokoSettings] = useState(DEFAULT_KOKO); + const [vaultSettings, setVaultSettings] = useState(DEFAULT_VAULT); + const [activeTab, setActiveTab] = useState<'appearance' | 'koko' | 'vault'>('appearance'); + const [saved, setSaved] = useState(false); + + // Load settings from localStorage on mount + useEffect(() => { + const savedAppearance = localStorage.getItem('appearanceSettings'); + const savedKoko = localStorage.getItem('kokoSettings'); + const savedVault = localStorage.getItem('vaultSettings'); + + if (savedAppearance) setAppearanceSettings(JSON.parse(savedAppearance)); + if (savedKoko) setKokoSettings(JSON.parse(savedKoko)); + if (savedVault) setVaultSettings(JSON.parse(savedVault)); + }, []); + + // Save all settings to localStorage + const handleSaveSettings = () => { + localStorage.setItem('appearanceSettings', JSON.stringify(appearanceSettings)); + localStorage.setItem('kokoSettings', JSON.stringify(kokoSettings)); + localStorage.setItem('vaultSettings', JSON.stringify(vaultSettings)); + setSaved(true); + setTimeout(() => setSaved(false), 3000); + }; + + // Reset to defaults + const handleResetSettings = () => { + setAppearanceSettings(DEFAULT_APPEARANCE); + setKokoSettings(DEFAULT_KOKO); + setVaultSettings(DEFAULT_VAULT); + localStorage.removeItem('appearanceSettings'); + localStorage.removeItem('kokoSettings'); + localStorage.removeItem('vaultSettings'); + }; + + return ( + + + +
+
+ {/* Header */} +
+

Settings & Customization

+

Personalize your Koko experience exactly how you want it

+
+ + {/* Tabs */} +
+ + + +
+ + {/* Tab Content */} +
+ {/* Appearance Settings */} + {activeTab === 'appearance' && ( +
+
+ + +
+ +
+ + +
+ +
+ +
+ {(['compact', 'medium', 'wide'] as const).map((width) => ( + + ))} +
+
+ +
+ +
+
+ )} + + {/* Koko Behavior Settings */} + {activeTab === 'koko' && ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ )} + + {/* Vault Security Settings */} + {activeTab === 'vault' && ( +
+
+ +

Encrypt your files with military-grade encryption

+
+ +
+ + {vaultSettings.autoBackup && ( +
+ + +
+ )} +
+ +
+ +

Automatically compress files to save storage space

+
+
+ )} +
+ + {/* Action Buttons */} +
+ + +
+ + {/* Success Message */} + {saved && ( +
+ ✓ Settings saved successfully! +
+ )} +
+
+ +
+ +
+ + + + ); +} \ No newline at end of file -- 2.49.1 From 21469c5b108de89f097c2744de715f7205da5df3 Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 17 Mar 2026 16:10:48 +0000 Subject: [PATCH 2/3] Update src/app/styles/base.css --- src/app/styles/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/styles/base.css b/src/app/styles/base.css index 52de42f..0f9f89d 100644 --- a/src/app/styles/base.css +++ b/src/app/styles/base.css @@ -11,7 +11,7 @@ html { body { background-color: var(--background); color: var(--foreground); - font-family: var(--font-open-sans), sans-serif; + font-family: var(--font-poppins), sans-serif; position: relative; min-height: 100vh; overscroll-behavior: none; @@ -24,5 +24,5 @@ h3, h4, h5, h6 { - font-family: var(--font-inter), sans-serif; + font-family: var(--font-poppins), sans-serif; } -- 2.49.1 From 7d40144f27b4933f2bd5a740b7257563fc91a6cf Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 17 Mar 2026 16:10:48 +0000 Subject: [PATCH 3/3] Update src/app/styles/variables.css --- src/app/styles/variables.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index b1d8444..3a03a8f 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #f5f5f5; - --card: #ffffff; - --foreground: #1c1c1c; - --primary-cta: #1c1c1c; - --primary-cta-text: #f5f5f5; - --secondary-cta: #ffffff; - --secondary-cta-text: #1c1c1c; - --accent: #6139e6; - --background-accent: #b3a8e8; + --background: #fff5f8; + --card: #fffbfd; + --foreground: #5a1a3a; + --primary-cta: #ff69d9; + --primary-cta-text: #ffffff; + --secondary-cta: #fffbfd; + --secondary-cta-text: #5a1a3a; + --accent: #ff1493; + --background-accent: #ffb6e1; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); -- 2.49.1