123 lines
5.3 KiB
PHP
123 lines
5.3 KiB
PHP
@extends('dashboard.app')
|
||
|
||
@section('title', 'Preferences')
|
||
@section('page_title', 'Preferences')
|
||
@section('page_subtitle', 'Personalize your Dewemoji experience.')
|
||
|
||
@section('dashboard_content')
|
||
<div class="grid gap-6 lg:grid-cols-3">
|
||
<div class="lg:col-span-2 rounded-3xl glass-card p-6">
|
||
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Personal settings</div>
|
||
<div class="mt-2 text-xl font-semibold text-white">Preferences</div>
|
||
<p class="mt-2 text-sm text-gray-400">Saved locally for now. We will sync these to your account later.</p>
|
||
|
||
<form id="preferences-form" class="mt-6 grid gap-4 md:grid-cols-2">
|
||
<div>
|
||
<label class="text-xs uppercase tracking-[0.2em] text-gray-400">Theme</label>
|
||
<select id="pref-theme" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
|
||
<option value="system">System</option>
|
||
<option value="light">Light</option>
|
||
<option value="dark">Dark</option>
|
||
</select>
|
||
<div class="mt-1 text-xs text-gray-400">Matches the global theme toggle.</div>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs uppercase tracking-[0.2em] text-gray-400">Locale</label>
|
||
<select id="pref-locale" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
|
||
<option value="en-US">English (US)</option>
|
||
<option value="id-ID">Bahasa Indonesia</option>
|
||
</select>
|
||
<div class="mt-1 text-xs text-gray-400">Controls language defaults.</div>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs uppercase tracking-[0.2em] text-gray-400">Tone lock</label>
|
||
<select id="pref-tone" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
|
||
<option value="off">Off</option>
|
||
<option value="on">Always on</option>
|
||
</select>
|
||
<div class="mt-1 text-xs text-gray-400">Prefer a skin tone when available.</div>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs uppercase tracking-[0.2em] text-gray-400">Insert mode</label>
|
||
<select id="pref-insert" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
|
||
<option value="copy">Copy</option>
|
||
<option value="insert">Insert</option>
|
||
</select>
|
||
<div class="mt-1 text-xs text-gray-400">Default action for emoji pickers.</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div id="pref-status" class="mt-4 text-sm text-gray-400"></div>
|
||
</div>
|
||
|
||
<div class="rounded-3xl glass-card p-6 space-y-4">
|
||
<div>
|
||
<div class="text-xs uppercase tracking-[0.25em] text-gray-400">Preferences</div>
|
||
<div class="mt-2 text-xl font-semibold text-white">What’s next</div>
|
||
</div>
|
||
<div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-sm text-gray-300">
|
||
Sync preferences across devices and extensions once account settings are wired.
|
||
</div>
|
||
<div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-sm text-gray-300">
|
||
Add tone presets and quick language switching.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
(() => {
|
||
const storageKey = 'dewemoji_prefs';
|
||
const prefTheme = document.getElementById('pref-theme');
|
||
const prefLocale = document.getElementById('pref-locale');
|
||
const prefTone = document.getElementById('pref-tone');
|
||
const prefInsert = document.getElementById('pref-insert');
|
||
const status = document.getElementById('pref-status');
|
||
|
||
const readPrefs = () => {
|
||
try {
|
||
return JSON.parse(localStorage.getItem(storageKey) || '{}');
|
||
} catch {
|
||
return {};
|
||
}
|
||
};
|
||
|
||
const writePrefs = (prefs) => {
|
||
localStorage.setItem(storageKey, JSON.stringify(prefs));
|
||
if (status) {
|
||
status.textContent = 'Saved just now.';
|
||
setTimeout(() => { status.textContent = ''; }, 1600);
|
||
}
|
||
};
|
||
|
||
const applyThemePref = (value) => {
|
||
if (value === 'light') localStorage.setItem('dewemoji_theme', 'light');
|
||
if (value === 'dark') localStorage.setItem('dewemoji_theme', 'dark');
|
||
if (value === 'system') localStorage.removeItem('dewemoji_theme');
|
||
window.location.reload();
|
||
};
|
||
|
||
const prefs = readPrefs();
|
||
if (prefTheme) prefTheme.value = prefs.theme || 'system';
|
||
if (prefLocale) prefLocale.value = prefs.locale || 'en-US';
|
||
if (prefTone) prefTone.value = prefs.tone || 'off';
|
||
if (prefInsert) prefInsert.value = prefs.insert || 'copy';
|
||
|
||
[prefTheme, prefLocale, prefTone, prefInsert].forEach((el) => {
|
||
if (!el) return;
|
||
el.addEventListener('change', () => {
|
||
const next = {
|
||
theme: prefTheme?.value || 'system',
|
||
locale: prefLocale?.value || 'en-US',
|
||
tone: prefTone?.value || 'off',
|
||
insert: prefInsert?.value || 'copy',
|
||
};
|
||
writePrefs(next);
|
||
if (el === prefTheme) applyThemePref(next.theme);
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
@endpush
|