dwindown/dewemoji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update pricing UX, billing flows, and API rules

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-12 00:52:40 +07:00
parent cf065fab1e
commit a905256353
202 changed files with 22348 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
app/resources/views/dashboard/user/preferences.blade.php Normal file
View File

@@ -0,0 +1,122 @@
@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