feat: refine branded ui and mobile navigation
This commit is contained in:
Dwindi Ramadhana
@@ -2,52 +2,202 @@
|
||||
|
||||
@section('title', ($emoji['name'] ?? 'Emoji').' - Dewemoji')
|
||||
|
||||
@php
|
||||
$name = $emoji['name'] ?? '';
|
||||
$category = $emoji['category'] ?? '';
|
||||
$subcategory = $emoji['subcategory'] ?? '';
|
||||
$symbol = $emoji['emoji'] ?? '';
|
||||
$slug = $emoji['slug'] ?? '';
|
||||
$description = $emoji['description'] ?? '';
|
||||
$unified = $emoji['unified'] ?? '';
|
||||
$shortcode = $emoji['shortcodes'][0] ?? '';
|
||||
$htmlHex = '';
|
||||
$cssCode = '';
|
||||
if (!empty($emoji['codepoints'][0])) {
|
||||
$hex = strtoupper($emoji['codepoints'][0]);
|
||||
$htmlHex = '&#x'.$hex.';';
|
||||
$cssCode = '\\'.$hex;
|
||||
}
|
||||
$related = array_slice($emoji['related'] ?? [], 0, 8);
|
||||
$keywords = array_slice($emoji['keywords_en'] ?? [], 0, 16);
|
||||
@endphp
|
||||
|
||||
@section('content')
|
||||
<article class="card" style="padding: 20px;">
|
||||
<p style="margin-top:0;"><a href="{{ route('home') }}" style="color: var(--brand); text-decoration:none;">← Back to emoji list</a></p>
|
||||
<div class="flex h-screen">
|
||||
<aside class="hidden lg:flex w-20 lg:w-64 h-full glass-panel flex-col justify-between p-4 z-20">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 px-2 mb-10 mt-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-white to-gray-300 flex items-center justify-center shadow-lg shadow-white/20">
|
||||
<img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-lg tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-2">
|
||||
<a href="{{ route('home') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/5 transition-all group">
|
||||
<i data-lucide="arrow-left" class="w-5 h-5 text-brand-sun"></i>
|
||||
<span class="text-sm font-medium hidden lg:block text-brand-sun">Back</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div style="display:grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start;">
|
||||
<div style="font-size: 82px; line-height: 1;">{{ $emoji['emoji'] ?? '' }}</div>
|
||||
<div>
|
||||
<h1 style="margin:0 0 8px 0;">{{ $emoji['name'] ?? '' }}</h1>
|
||||
<p style="margin:0;color:var(--muted);">{{ $emoji['category'] ?? '' }} / {{ $emoji['subcategory'] ?? '' }}</p>
|
||||
<p style="margin:12px 0 0 0; color:var(--muted);">{{ $emoji['description'] ?? '' }}</p>
|
||||
<main class="flex-1 h-full overflow-y-auto relative p-4 sm:p-6 lg:p-10 pb-24 lg:pb-10 flex flex-col">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500 mb-8 font-mono">
|
||||
<a href="{{ route('home') }}" class="hover:text-white transition-colors">Home</a>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
<span class="hover:text-white">{{ $category }}</span>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
<span class="text-brand-sun">{{ $name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 max-w-6xl mx-auto w-full">
|
||||
<div class="lg:col-span-5 flex flex-col gap-6">
|
||||
<div class="glass-card rounded-[32px] aspect-square flex items-center justify-center relative overflow-hidden group">
|
||||
<div class="absolute w-64 h-64 bg-yellow-500/20 rounded-full blur-3xl group-hover:bg-yellow-500/30 transition-colors duration-500"></div>
|
||||
<div class="text-[140px] md:text-[180px] leading-none select-none relative z-10 animate-float drop-shadow-2xl">{{ $symbol }}</div>
|
||||
<div class="absolute bottom-6 flex gap-3 opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0">
|
||||
<button onclick="copyToClipboard('{{ $symbol }}')" class="bg-black/50 backdrop-blur text-white p-3 rounded-full hover:bg-brand-sun hover:text-black transition-colors border border-white/10" title="Copy">
|
||||
<i data-lucide="copy" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(count($related) > 0)
|
||||
<div class="glass-card rounded-2xl p-5">
|
||||
<h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Related</h3>
|
||||
<div class="flex gap-2 overflow-x-auto pb-2">
|
||||
@foreach($related as $item)
|
||||
<button onclick="copyToClipboard('{{ $item }}')" class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">{{ $item }}</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-7 flex flex-col gap-6">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 px-3 py-1 rounded-full text-xs font-bold uppercase">{{ $subcategory }}</span>
|
||||
</div>
|
||||
<h1 class="font-display text-5xl font-bold mb-4">{{ $name }}</h1>
|
||||
<p class="text-gray-400 text-lg leading-relaxed">{{ $description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<button onclick="copyToClipboard('{{ $symbol }}')" class="flex-1 bg-brand-ocean hover:bg-brand-oceanSoft text-white font-bold h-14 rounded-xl flex items-center justify-center gap-3 text-lg transition-all shadow-[0_0_20px_rgba(32,83,255,0.35)] hover:shadow-[0_0_30px_rgba(32,83,255,0.55)]">
|
||||
<i data-lucide="copy" class="w-5 h-5"></i>
|
||||
Copy Emoji
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@if($shortcode !== '')
|
||||
<button onclick="copyToClipboard('{{ $shortcode }}')" class="glass-card p-4 rounded-xl group text-left">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-xs font-mono text-gray-500">Shortcode</span>
|
||||
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-brand-sun group-hover:text-brand-sunSoft font-medium truncate">{{ $shortcode }}</div>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@if($unified !== '')
|
||||
<button onclick="copyToClipboard('{{ $unified }}')" class="glass-card p-4 rounded-xl group text-left">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-xs font-mono text-gray-500">Unicode</span>
|
||||
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-gray-300 group-hover:text-white font-medium">{{ $unified }}</div>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@if($htmlHex !== '')
|
||||
<button onclick="copyToClipboard('{{ $htmlHex }}')" class="glass-card p-4 rounded-xl group text-left">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-xs font-mono text-gray-500">HTML Entity</span>
|
||||
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-gray-400 group-hover:text-white font-medium truncate">{{ $htmlHex }}</div>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@if($cssCode !== '')
|
||||
<button onclick="copyToClipboard('{{ $cssCode }}')" class="glass-card p-4 rounded-xl group text-left">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-xs font-mono text-gray-500">CSS Content</span>
|
||||
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-gray-400 group-hover:text-white font-medium">{{ $cssCode }}</div>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if(count($keywords) > 0)
|
||||
<div class="mt-2">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i data-lucide="hash" class="w-4 h-4 text-brand-sun"></i>
|
||||
<h3 class="text-sm font-bold text-gray-200 uppercase tracking-wide">Semantic Tags</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($keywords as $tag)
|
||||
<a href="{{ route('home') }}?q={{ urlencode($tag) }}" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-brand-ocean/10 border border-white/5 hover:border-brand-ocean/30 text-sm text-gray-300 hover:text-brand-oceanSoft transition-all">{{ $tag }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border:none;border-top:1px solid var(--border);margin:18px 0;">
|
||||
<footer class="mt-auto pt-10 text-center text-gray-600 text-xs">Dewemoji Native • Press 'C' to copy</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
|
||||
<code>Slug: {{ $emoji['slug'] ?? '' }}</code>
|
||||
@if(!empty($emoji['unified']))
|
||||
<code>Unified: {{ $emoji['unified'] }}</code>
|
||||
@endif
|
||||
<button id="copy-btn" style="border:1px solid var(--border);background:white;border-radius:10px;padding:8px 12px;cursor:pointer;">
|
||||
Copy Emoji
|
||||
</button>
|
||||
</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-5 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('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>
|
||||
|
||||
@if(!empty($emoji['keywords_en']) && is_array($emoji['keywords_en']))
|
||||
<h3 style="margin-top: 20px;">Keywords (EN)</h3>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||||
@foreach($emoji['keywords_en'] as $kw)
|
||||
<code>{{ $kw }}</code>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</article>
|
||||
<div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 z-50 pointer-events-none">
|
||||
<div class="bg-brand-ocean text-white px-6 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(32,83,255,0.45)] flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span id="toast-msg">Copied!</span>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.getElementById('copy-btn')?.addEventListener('click', async () => {
|
||||
const emoji = @json($emoji['emoji'] ?? '');
|
||||
await navigator.clipboard.writeText(emoji);
|
||||
const btn = document.getElementById('copy-btn');
|
||||
const old = btn.textContent;
|
||||
btn.textContent = 'Copied!';
|
||||
setTimeout(() => btn.textContent = old, 1200);
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const toast = document.getElementById('toast');
|
||||
const msg = document.getElementById('toast-msg');
|
||||
msg.innerText = `Copied ${text}`;
|
||||
toast.classList.remove('translate-y-24', 'opacity-0');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('translate-y-24', 'opacity-0');
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'c' && !e.metaKey && !e.ctrlKey && document.activeElement.tagName !== 'INPUT') {
|
||||
copyToClipboard(@json($symbol));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
@@ -1,65 +1,213 @@
|
||||
@extends('site.layout')
|
||||
|
||||
@section('title', 'Dewemoji - Emoji Browser')
|
||||
@section('title', 'Dewemoji - Discover')
|
||||
|
||||
@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);
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<section class="card" style="padding: 18px;">
|
||||
<h1 style="margin: 0 0 6px 0;">Emoji Browser</h1>
|
||||
<p style="margin: 0; color: var(--muted);">Rebuilt website powered by <code>/v1</code> APIs.</p>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-top: 16px;" id="filters">
|
||||
<input id="q" type="text" placeholder="Search (e.g. love, senyum)" style="padding: 10px; border: 1px solid var(--border); border-radius: 10px;">
|
||||
<select id="category" style="padding: 10px; border: 1px solid var(--border); border-radius: 10px;">
|
||||
<option value="">All categories</option>
|
||||
</select>
|
||||
<select id="subcategory" style="padding: 10px; border: 1px solid var(--border); border-radius: 10px;" disabled>
|
||||
<option value="">All subcategories</option>
|
||||
</select>
|
||||
<div class="flex h-screen w-full">
|
||||
<aside class="hidden lg:flex w-20 lg:w-64 h-full glass-panel flex-col justify-between p-4 z-50 shrink-0">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 px-2 mb-8 mt-2">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-white to-gray-300 flex items-center justify-center shadow-lg shadow-white/20 shrink-0">
|
||||
<img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-lg tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<a href="{{ route('home') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-brand-sun border border-white/5 transition-all group">
|
||||
<i data-lucide="layout-grid" class="w-5 h-5"></i>
|
||||
<span class="text-sm font-medium hidden lg:block">Discover</span>
|
||||
</a>
|
||||
<a href="{{ route('api-docs') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
|
||||
<i data-lucide="book-open" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
|
||||
<span class="text-sm font-medium hidden lg:block">API Docs</span>
|
||||
</a>
|
||||
<a href="{{ route('pricing') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
|
||||
<i data-lucide="badge-dollar-sign" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
|
||||
<span class="text-sm font-medium hidden lg:block">Pricing</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card" style="margin-top: 14px; padding: 14px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||||
<strong>Results</strong>
|
||||
<span id="count" style="color: var(--muted); font-size: 13px;">0 / 0</span>
|
||||
<div class="space-y-1">
|
||||
<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>
|
||||
</a>
|
||||
<a href="{{ route('terms') }}" 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="file-text" class="w-5 h-5"></i>
|
||||
<span class="text-sm font-medium hidden lg:block">Terms</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 10px;"></div>
|
||||
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
|
||||
<header class="glass-header px-6 py-5 shrink-0 sticky top-0 z-40">
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<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="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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 14px;">
|
||||
<button id="more" style="display:none; border: 1px solid var(--border); background: white; border-radius: 10px; padding: 10px 14px; cursor: pointer;">
|
||||
Load more
|
||||
</button>
|
||||
<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">
|
||||
<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>
|
||||
<option value="">All Subcategories</option>
|
||||
</select>
|
||||
<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>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button data-tag="happy" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#happy</button>
|
||||
<button data-tag="love" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#love</button>
|
||||
<button data-tag="party" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#party</button>
|
||||
<button data-tag="thumbs" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#thumbs</button>
|
||||
<button data-tag="animal" class="quick-tag px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors">#animal</button>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400" id="result-count">Showing 0</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-4 sm:p-6 pb-24 lg:pb-6">
|
||||
<div class="w-full">
|
||||
<div id="hero-cards" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6 transition-all duration-300">
|
||||
<section id="hero-main" class="md:col-span-2 glass-card rounded-2xl p-6 relative overflow-hidden min-h-[180px] flex flex-col justify-end transition-all duration-300">
|
||||
<div class="absolute top-0 right-0 p-5 opacity-50">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-brand-sun"></i>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<span class="inline-block px-2 py-0.5 rounded bg-brand-sun/20 text-brand-sun text-[10px] font-bold mb-2 border border-brand-sun/30">NEW ENGINE</span>
|
||||
<h3 class="font-display text-2xl font-bold mb-1">Semantic Discovery</h3>
|
||||
<p class="text-gray-400 text-xs max-w-sm">Search the meaning, not just emoji names. EN + ID keywords supported.</p>
|
||||
</div>
|
||||
<div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-brand-ocean/25 to-brand-sun/20 rounded-full blur-3xl"></div>
|
||||
</section>
|
||||
|
||||
<section id="hero-optional-1" class="glass-card rounded-2xl p-5 flex flex-col relative">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h4 class="font-bold text-gray-200 text-sm">Trending Now</h4>
|
||||
<i data-lucide="trending-up" class="w-4 h-4 text-brand-sun"></i>
|
||||
</div>
|
||||
<div id="trending-list" class="flex flex-wrap gap-2"></div>
|
||||
</section>
|
||||
|
||||
<section id="hero-optional-2" class="glass-card rounded-2xl p-5 flex flex-col justify-between">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
|
||||
<i data-lucide="history" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<span id="dataset-count" class="text-[10px] text-gray-500 font-mono">0 items</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-sm">Recent</h4>
|
||||
<div id="recent-list" class="flex gap-2 mt-2"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 mb-4 px-1">
|
||||
<h4 class="font-bold text-gray-200">All Emojis</h4>
|
||||
<div class="h-px bg-white/10 flex-1"></div>
|
||||
<span id="count" class="text-xs text-gray-500">0 / 0</span>
|
||||
</div>
|
||||
|
||||
<div id="grid" class="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-14 2xl:grid-cols-16 gap-2 pb-8"></div>
|
||||
|
||||
<div class="py-8 flex justify-center">
|
||||
<button id="more" class="hidden px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-sm text-gray-200 transition-colors">Load more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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-5 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('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>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
(() => {
|
||||
const state = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0,
|
||||
items: [],
|
||||
categories: {},
|
||||
};
|
||||
|
||||
const state = { page: 1, limit: 32, total: 0, items: [], categories: {} };
|
||||
const qEl = document.getElementById('q');
|
||||
const catEl = document.getElementById('category');
|
||||
const subEl = document.getElementById('subcategory');
|
||||
const grid = document.getElementById('grid');
|
||||
const count = document.getElementById('count');
|
||||
const more = document.getElementById('more');
|
||||
const resultCount = document.getElementById('result-count');
|
||||
const datasetCount = document.getElementById('dataset-count');
|
||||
const trendingList = document.getElementById('trending-list');
|
||||
const recentList = document.getElementById('recent-list');
|
||||
const heroCards = document.getElementById('hero-cards');
|
||||
const heroMain = document.getElementById('hero-main');
|
||||
const heroOptional1 = document.getElementById('hero-optional-1');
|
||||
const heroOptional2 = document.getElementById('hero-optional-2');
|
||||
|
||||
const initParams = new URLSearchParams(window.location.search);
|
||||
if (initParams.get('q')) qEl.value = initParams.get('q');
|
||||
|
||||
function esc(s) {
|
||||
return String(s || '').replace(/[&<>"']/g, (c) => ({
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
}[c]));
|
||||
return String(s || '').replace(/[&<>"']/g, (c) => ({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c]));
|
||||
}
|
||||
|
||||
function hasActiveFilters() {
|
||||
return qEl.value.trim() !== '' || catEl.value !== '' || subEl.value !== '';
|
||||
}
|
||||
|
||||
function updateHeroMode() {
|
||||
const compact = hasActiveFilters();
|
||||
heroCards.classList.toggle('mb-6', !compact);
|
||||
heroCards.classList.toggle('mb-3', compact);
|
||||
heroMain.classList.toggle('min-h-[180px]', !compact);
|
||||
heroMain.classList.toggle('min-h-[120px]', compact);
|
||||
}
|
||||
|
||||
async function loadCategories() {
|
||||
@@ -75,8 +223,7 @@
|
||||
}
|
||||
|
||||
function renderSubcategories() {
|
||||
const category = catEl.value;
|
||||
const subs = state.categories[category] || [];
|
||||
const subs = state.categories[catEl.value] || [];
|
||||
subEl.innerHTML = '<option value="">All subcategories</option>';
|
||||
subs.forEach((s) => {
|
||||
const opt = document.createElement('option');
|
||||
@@ -87,6 +234,88 @@
|
||||
subEl.disabled = subs.length === 0;
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
const msg = document.getElementById('toast-msg');
|
||||
msg.textContent = message;
|
||||
toast.classList.remove('translate-y-24', 'opacity-0');
|
||||
setTimeout(() => toast.classList.add('translate-y-24', 'opacity-0'), 1400);
|
||||
}
|
||||
|
||||
function loadRecent() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem('dewemoji_recent') || '[]');
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveRecent(items) {
|
||||
localStorage.setItem('dewemoji_recent', JSON.stringify(items.slice(0, 8)));
|
||||
}
|
||||
|
||||
function addRecent(emoji) {
|
||||
const curr = loadRecent().filter((e) => e !== emoji);
|
||||
curr.unshift(emoji);
|
||||
saveRecent(curr);
|
||||
renderRecent();
|
||||
}
|
||||
|
||||
function renderRecent() {
|
||||
const recent = loadRecent();
|
||||
recentList.innerHTML = '';
|
||||
const fallback = ['🚀', '💀', '✨'];
|
||||
const source = recent.length ? recent : fallback;
|
||||
source.forEach((emoji) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg';
|
||||
btn.textContent = emoji;
|
||||
btn.addEventListener('click', () => window.copyEmoji(emoji));
|
||||
recentList.appendChild(btn);
|
||||
});
|
||||
}
|
||||
|
||||
function renderTrendingFromItems(items) {
|
||||
const score = new Map();
|
||||
items.forEach((item) => {
|
||||
const tags = []
|
||||
.concat(item.keywords_en || [])
|
||||
.concat(item.intent_tags || []);
|
||||
tags.forEach((tag) => {
|
||||
const t = String(tag || '').trim().toLowerCase();
|
||||
if (!t || t.length < 3) return;
|
||||
score.set(t, (score.get(t) || 0) + 1);
|
||||
});
|
||||
});
|
||||
|
||||
const top = Array.from(score.entries())
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 6)
|
||||
.map(([tag]) => tag);
|
||||
|
||||
const fallback = ['happy', 'love', 'party', 'thumbs', 'animal', 'food'];
|
||||
const tags = top.length ? top : fallback;
|
||||
|
||||
trendingList.innerHTML = '';
|
||||
tags.forEach((tag) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'px-2 py-1 bg-white/5 hover:bg-brand-ocean/20 hover:text-brand-oceanSoft border border-white/5 rounded text-[11px] transition-colors';
|
||||
btn.textContent = '#' + tag;
|
||||
btn.addEventListener('click', () => {
|
||||
qEl.value = tag;
|
||||
fetchEmojis(true);
|
||||
});
|
||||
trendingList.appendChild(btn);
|
||||
});
|
||||
}
|
||||
|
||||
window.copyEmoji = function (emoji) {
|
||||
navigator.clipboard.writeText(emoji).then(() => {
|
||||
showToast('Copied ' + emoji);
|
||||
addRecent(emoji);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchEmojis(reset = false) {
|
||||
if (reset) {
|
||||
state.page = 1;
|
||||
@@ -94,11 +323,9 @@
|
||||
grid.innerHTML = '';
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
page: String(state.page),
|
||||
limit: String(state.limit),
|
||||
});
|
||||
updateHeroMode();
|
||||
|
||||
const params = new URLSearchParams({ page: String(state.page), limit: String(state.limit) });
|
||||
if (qEl.value.trim()) params.set('q', qEl.value.trim());
|
||||
if (catEl.value) params.set('category', catEl.value);
|
||||
if (subEl.value) params.set('subcategory', subEl.value);
|
||||
@@ -107,38 +334,42 @@
|
||||
const data = await res.json();
|
||||
state.total = data.total || 0;
|
||||
|
||||
(data.items || []).forEach((item) => state.items.push(item));
|
||||
renderGrid(data.items || [], reset);
|
||||
updateCount();
|
||||
updateMoreButton();
|
||||
const incoming = data.items || [];
|
||||
incoming.forEach((item) => state.items.push(item));
|
||||
renderGrid(incoming, reset);
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function renderGrid(items, reset) {
|
||||
if (reset && items.length === 0) {
|
||||
grid.innerHTML = '<p style="color:var(--muted);grid-column:1/-1;">No emojis found.</p>';
|
||||
if (reset && state.items.length === 0) {
|
||||
grid.innerHTML = '<p class="text-xs text-gray-500 col-span-full">No emojis found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach((item) => {
|
||||
const card = document.createElement('a');
|
||||
card.href = '/emoji/' + encodeURIComponent(item.slug);
|
||||
card.className = 'card';
|
||||
card.style.cssText = 'padding:10px;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;';
|
||||
card.className = 'aspect-square rounded-lg bg-white/5 hover:bg-white/10 flex flex-col items-center justify-center gap-1 text-center transition-transform hover:scale-105 border border-transparent hover:border-white/20';
|
||||
card.innerHTML = `
|
||||
<div style="font-size:30px;">${esc(item.emoji)}</div>
|
||||
<div style="font-size:12px;text-align:center;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">${esc(item.name)}</div>
|
||||
<span class="text-2xl leading-none">${esc(item.emoji)}</span>
|
||||
<span class="emoji-name-clamp text-[10px] text-gray-400 px-1 w-full">${esc(item.name)}</span>
|
||||
`;
|
||||
card.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(item.emoji).then(() => {
|
||||
showToast('Copied ' + item.emoji);
|
||||
addRecent(item.emoji);
|
||||
});
|
||||
});
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function updateCount() {
|
||||
function updateStats() {
|
||||
count.textContent = `${state.items.length} / ${state.total}`;
|
||||
}
|
||||
|
||||
function updateMoreButton() {
|
||||
const canLoad = state.items.length < state.total;
|
||||
more.style.display = canLoad ? 'inline-block' : 'none';
|
||||
resultCount.textContent = `Showing ${state.items.length}`;
|
||||
datasetCount.textContent = `${state.total} matches`;
|
||||
more.classList.toggle('hidden', state.items.length >= state.total);
|
||||
}
|
||||
|
||||
let timer = null;
|
||||
@@ -159,11 +390,21 @@
|
||||
await fetchEmojis(false);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.quick-tag').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
qEl.value = btn.dataset.tag || '';
|
||||
fetchEmojis(true);
|
||||
});
|
||||
});
|
||||
|
||||
(async () => {
|
||||
await loadCategories();
|
||||
await fetchEmojis(true);
|
||||
renderTrendingFromItems(state.items);
|
||||
renderRecent();
|
||||
updateHeroMode();
|
||||
lucide.createIcons();
|
||||
})();
|
||||
})();
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
@@ -1,92 +1,93 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>@yield('title', 'Dewemoji')</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
display: ['Space Grotesk', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
sun: '#fcb735',
|
||||
sunSoft: '#ffda9c',
|
||||
ocean: '#2053ff',
|
||||
oceanSoft: '#356cf0',
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f7fafc;
|
||||
--surface: #ffffff;
|
||||
--fg: #0f172a;
|
||||
--muted: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--brand: #2563eb;
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
|
||||
.glass-panel {
|
||||
background: rgba(20, 20, 23, 0.6);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--fg);
|
||||
background: radial-gradient(circle at 10% 0%, #dbeafe, #f8fafc 32%, #f8fafc 100%);
|
||||
.glass-card {
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px; }
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
border-bottom: 1px solid var(--border);
|
||||
.glass-card:hover {
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border-color: rgba(53, 108, 240, 0.35);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px -10px rgba(32, 83, 255, 0.2);
|
||||
}
|
||||
.topbar .row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #fcb735, #2053ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
|
||||
.nav { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
|
||||
.nav a:hover { color: var(--brand); }
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
.footer {
|
||||
margin-top: 36px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
code {
|
||||
background: #eef2ff;
|
||||
color: #1e3a8a;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.wrap { padding: 14px; }
|
||||
.topbar .row { flex-direction: column; align-items: flex-start; }
|
||||
.emoji-name-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.1;
|
||||
max-height: 2.2em;
|
||||
}
|
||||
</style>
|
||||
@stack('head')
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="wrap row">
|
||||
<a class="brand" href="{{ route('home') }}">Dewemoji</a>
|
||||
<nav class="nav">
|
||||
<a href="{{ route('home') }}">Emoji</a>
|
||||
<a href="{{ route('api-docs') }}">API Docs</a>
|
||||
<a href="{{ route('pricing') }}">Pricing</a>
|
||||
<a href="{{ route('privacy') }}">Privacy</a>
|
||||
<a href="{{ route('terms') }}">Terms</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<body class="bg-[#050505] text-white min-h-screen selection:bg-brand-ocean selection:text-white">
|
||||
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-brand-ocean/20 rounded-full blur-[120px] animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-blue-900/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
<main class="wrap">
|
||||
@yield('content')
|
||||
</main>
|
||||
@yield('content')
|
||||
|
||||
<footer class="footer wrap">
|
||||
<p>© {{ now()->year }} Dewemoji.</p>
|
||||
</footer>
|
||||
<script>lucide.createIcons();</script>
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user