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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user