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

191
app/resources/views/site/home.blade.php
View File

@@ -5,16 +5,17 @@
@push('head')
<style>
.glass-header {
background: rgba(5, 5, 5, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#grid {
--card-min: 104px;
--emoji-size: 2rem;
grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}
@media (max-width: 640px) {
#grid {
--card-min: 0px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
</style>
@endpush
@@ -48,6 +49,18 @@
</nav>
</div>
<div class="space-y-1">
@auth
<a href="{{ route('dashboard.overview') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
<span class="text-sm font-medium hidden lg:block">Dashboard</span>
</a>
@endauth
@guest
<a href="{{ route('login') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
<i data-lucide="log-in" class="w-5 h-5"></i>
<span class="text-sm font-medium hidden lg:block">Login</span>
</a>
@endguest
<a href="{{ route('privacy') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
<i data-lucide="shield-check" class="w-5 h-5"></i>
<span class="text-sm font-medium hidden lg:block">Privacy</span>
@@ -65,11 +78,11 @@
<div class="flex flex-col md:flex-row gap-4 md:items-center justify-between">
<div class="relative group grow max-w-3xl">
<div class="absolute -inset-0.5 bg-gradient-to-r from-brand-ocean to-brand-sun rounded-xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
<div class="relative flex items-center bg-[#151518] border border-white/10 rounded-xl shadow-2xl h-11">
<div class="relative flex items-center bg-[#151518] border border-white/10 rounded-xl shadow-2xl h-11 theme-surface">
<div class="pl-4 pr-3 text-gray-400">
<i data-lucide="search" class="w-5 h-5"></i>
</div>
<input id="q" type="text" placeholder="Search emojis by keyword, mood, meaning..." class="w-full bg-transparent text-white placeholder-gray-500 focus:outline-none font-medium h-full">
<input id="q" type="text" placeholder="Search emojis by keyword, mood, meaning..." class="w-full bg-transparent text-white placeholder-gray-500 focus:outline-none font-medium h-full text-sm sm:text-base">
<div class="hidden md:flex items-center pr-3">
<kbd class="hidden sm:inline-block px-2 py-0.5 text-[10px] font-mono text-gray-500 bg-white/5 border border-white/10 rounded-md">⌘K</kbd>
</div>
@@ -77,14 +90,18 @@
</div>
<div class="flex items-center gap-3 shrink-0">
<select id="category" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-brand-ocean hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none">
<select id="category" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-brand-ocean hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none theme-surface">
<option value="">All Categories</option>
</select>
<select id="subcategory" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-brand-ocean hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none" disabled>
<select id="subcategory" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-brand-ocean hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none theme-surface" disabled>
<option value="">All Subcategories</option>
</select>
<button id="theme-toggle" class="w-10 h-10 rounded-full theme-surface border border-white/10 shadow-lg flex items-center justify-center text-gray-300 hover:text-white transition-colors">
<span class="sr-only">Toggle theme</span>
<i data-lucide="moon" class="w-4 h-4" data-theme-icon="dark"></i>
<i data-lucide="sun" class="w-4 h-4 hidden" data-theme-icon="light"></i>
</button>
<div class="w-px h-8 bg-white/10 mx-1 hidden lg:block"></div>
<div class="hidden lg:flex w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-600 border border-white/10"></div>
</div>
</div>
@@ -159,41 +176,48 @@
</main>
</div>
<nav class="lg:hidden fixed bottom-0 inset-x-0 z-50 border-t border-white/10 bg-[#0b0b0f]/95 backdrop-blur px-2 py-2">
<div class="grid grid-cols-6 gap-1 text-[11px]">
<a href="{{ route('home') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-brand-sun bg-white/5">
<i data-lucide="layout-grid" class="w-4 h-4"></i><span>Discover</span>
</a>
<a href="{{ route('api-docs') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
<i data-lucide="book-open" class="w-4 h-4"></i><span>Docs</span>
</a>
<a href="{{ route('pricing') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
<i data-lucide="badge-dollar-sign" class="w-4 h-4"></i><span>Pricing</span>
</a>
<a href="{{ route('support') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
<i data-lucide="life-buoy" class="w-4 h-4"></i><span>Support</span>
</a>
<a href="{{ route('privacy') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
<i data-lucide="shield-check" class="w-4 h-4"></i><span>Privacy</span>
</a>
<a href="{{ route('terms') }}" class="flex flex-col items-center justify-center gap-1 rounded-lg py-2 text-gray-300 hover:bg-white/5">
<i data-lucide="file-text" class="w-4 h-4"></i><span>Terms</span>
</a>
</div>
</nav>
<div id="toast" class="fixed bottom-8 left-1/2 -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 z-50">
<div class="bg-brand-ocean text-white px-4 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(32,83,255,0.45)] flex items-center gap-2 text-sm">
<i data-lucide="check" class="w-4 h-4"></i>
<span id="toast-msg">Copied!</span>
</div>
</div>
<div id="keyword-edit-modal" class="hidden fixed inset-0 z-50 items-center justify-center">
<div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
<div class="relative z-10 w-full max-w-lg rounded-3xl glass-card p-6">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-white">Edit keyword</h3>
<button id="keyword-edit-close" class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-gray-200">
<i data-lucide="x" class="w-4 h-4"></i>
</button>
</div>
<form id="keyword-edit-form" class="mt-4 grid gap-4">
<input type="hidden" id="keyword-edit-id">
<input type="hidden" id="keyword-edit-slug">
<div>
<label class="text-xs uppercase tracking-[0.2em] text-gray-400">Keyword</label>
<input type="text" id="keyword-edit-text" class="mt-2 w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-sm text-gray-200 focus:outline-none focus:border-brand-ocean" required>
</div>
<div>
<label class="text-xs uppercase tracking-[0.2em] text-gray-400">Language</label>
<input type="text" id="keyword-edit-lang" class="mt-2 w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-sm text-gray-200 focus:outline-none focus:border-brand-ocean">
</div>
<div class="flex items-center justify-end gap-2">
<button type="button" id="keyword-edit-cancel" class="rounded-full border border-white/10 px-4 py-2 text-sm text-gray-200 hover:bg-white/5">Cancel</button>
<button type="submit" class="rounded-full bg-brand-ocean text-white font-semibold px-5 py-2 text-sm">Save</button>
</div>
</form>
</div>
</div>
@endsection
@push('scripts')
<script>
(() => {
const state = { page: 1, limit: 32, total: 0, items: [], categories: {} };
const userTier = @json($userTier ?? null);
const isPersonal = userTier === 'personal';
const initialQuery = @json($initialQuery ?? '');
const initialCategory = @json($initialCategory ?? '');
const initialSubcategory = @json($initialSubcategory ?? '');
@@ -216,6 +240,15 @@
const gridSmallerEl = document.getElementById('grid-smaller');
const gridBiggerEl = document.getElementById('grid-bigger');
const densityStorageKey = 'dewemoji_grid_density';
const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
const keywordEditModal = document.getElementById('keyword-edit-modal');
const keywordEditClose = document.getElementById('keyword-edit-close');
const keywordEditCancel = document.getElementById('keyword-edit-cancel');
const keywordEditForm = document.getElementById('keyword-edit-form');
const keywordEditId = document.getElementById('keyword-edit-id');
const keywordEditSlug = document.getElementById('keyword-edit-slug');
const keywordEditText = document.getElementById('keyword-edit-text');
const keywordEditLang = document.getElementById('keyword-edit-lang');
if (initialQuery) qEl.value = initialQuery;
@@ -423,7 +456,8 @@
if (catEl.value) params.set('category', catEl.value);
if (subEl.value) params.set('subcategory', subEl.value);
const res = await fetch('/v1/emojis?' + params.toString());
const endpoint = isPersonal ? '/dashboard/keywords/search' : '/v1/emojis';
const res = await fetch(endpoint + '?' + params.toString());
const data = await res.json();
if (!res.ok) {
const msg = data.message || data.error || `API error (${res.status})`;
@@ -449,18 +483,24 @@
}
items.forEach((item) => {
const isPrivate = item.source === 'private';
const card = document.createElement('div');
card.className = 'relative aspect-square rounded-lg bg-white/5 hover:bg-white/10 transition-transform hover:scale-[1.02] border border-transparent hover:border-white/20 overflow-hidden group';
card.className = 'emoji-card relative aspect-square rounded-lg bg-white/5 hover:bg-white/10 transition-transform hover:scale-[1.02] border border-transparent hover:border-white/20 overflow-hidden group';
card.innerHTML = `
<a href="/emoji/${encodeURIComponent(item.slug)}" class="absolute inset-0 flex items-center justify-center pb-10">
<span class="leading-none" style="font-size:var(--emoji-size)">${esc(item.emoji)}</span>
</a>
<div class="absolute bottom-0 left-0 right-0 border-t border-white/10 bg-black/20 px-2 py-1.5 flex items-end gap-1">
<div class="emoji-card-bar absolute bottom-0 left-0 right-0 border-t border-white/10 bg-black/20 px-2 py-1.5 flex items-start gap-1">
<span class="emoji-name-clamp text-[10px] text-gray-300 text-left flex-1">${esc(item.name)}</span>
${isPrivate ? `<span class="px-1.5 py-0.5 rounded bg-brand-ocean/20 text-[9px] text-brand-oceanSoft" title="${esc(item.matched_keyword || '')}">Your: ${esc(item.matched_keyword || '')}</span>` : ''}
${isPrivate ? `<button type="button" class="edit-btn shrink-0 rounded bg-white/10 px-1.5 text-[9px] text-gray-200 hover:bg-brand-ocean/30">Edit</button>` : ''}
${isPrivate ? `<button type="button" class="delete-btn shrink-0 rounded bg-white/10 px-1.5 text-[9px] text-gray-200 hover:bg-red-500/30">Del</button>` : ''}
<button type="button" class="copy-btn shrink-0 w-6 h-6 rounded bg-white/10 hover:bg-brand-ocean/30 text-[11px] text-gray-200 hover:text-white transition-colors" title="Copy emoji">⧉</button>
</div>
`;
const copyBtn = card.querySelector('.copy-btn');
const editBtn = card.querySelector('.edit-btn');
const deleteBtn = card.querySelector('.delete-btn');
if (copyBtn) {
copyBtn.addEventListener('click', (e) => {
e.preventDefault();
@@ -471,6 +511,36 @@
});
});
}
if (editBtn && isPrivate) {
editBtn.addEventListener('click', (e) => {
e.preventDefault();
openKeywordEdit(item);
});
}
if (deleteBtn && isPrivate) {
deleteBtn.addEventListener('click', async (e) => {
e.preventDefault();
if (!item.matched_keyword_id) return;
const ok = await window.dewemojiConfirm('Delete this keyword?', {
title: 'Delete keyword',
okText: 'Delete',
});
if (!ok) return;
const res = await fetch(`/dashboard/keywords/${item.matched_keyword_id}`, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.ok) {
showToast('Could not delete keyword');
return;
}
fetchEmojis(true);
});
}
card.addEventListener('contextmenu', (e) => {
e.preventDefault();
navigator.clipboard.writeText(item.emoji).then(() => {
@@ -514,6 +584,55 @@
});
});
function openKeywordEdit(item) {
if (!isPersonal || !item.matched_keyword_id) return;
keywordEditId.value = item.matched_keyword_id;
keywordEditSlug.value = item.slug;
keywordEditText.value = item.matched_keyword || '';
keywordEditLang.value = item.matched_lang || '';
keywordEditModal.classList.remove('hidden');
keywordEditModal.classList.add('flex');
keywordEditText.focus();
}
function closeKeywordEdit() {
keywordEditModal.classList.add('hidden');
keywordEditModal.classList.remove('flex');
}
keywordEditClose?.addEventListener('click', closeKeywordEdit);
keywordEditCancel?.addEventListener('click', closeKeywordEdit);
keywordEditModal?.addEventListener('click', (e) => {
if (e.target === keywordEditModal) closeKeywordEdit();
});
keywordEditForm?.addEventListener('submit', async (e) => {
e.preventDefault();
const id = keywordEditId.value;
const payload = {
emoji_slug: keywordEditSlug.value,
keyword: keywordEditText.value.trim(),
lang: keywordEditLang.value.trim() || 'und',
};
if (!id || !payload.keyword) return;
const res = await fetch(`/dashboard/keywords/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
},
body: JSON.stringify(payload),
});
const data = await res.json().catch(() => null);
if (!res.ok || !data?.ok) {
showToast('Could not update keyword');
return;
}
closeKeywordEdit();
fetchEmojis(true);
});
if (gridSizeEl && gridSmallerEl && gridBiggerEl) {
const initialDensity = localStorage.getItem(densityStorageKey) ?? '1';
applyGridDensity(Number(initialDensity));