feat: refine branded ui and mobile navigation
This commit is contained in:
Dwindi Ramadhana
BIN
app/public/assets/logo/logo-mark-128.png
Normal file
BIN
app/public/assets/logo/logo-mark-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
app/public/assets/logo/logo-mark-512.png
Normal file
BIN
app/public/assets/logo/logo-mark-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
8
app/public/assets/logo/logo-mark.svg
Normal file
8
app/public/assets/logo/logo-mark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 68 KiB |
@@ -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>
|
||||
|
||||
|
||||
286
references/common-page.html
Normal file
286
references/common-page.html
Normal file
@@ -0,0 +1,286 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Privacy Policy - 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: {
|
||||
dew: {
|
||||
50: '#f7fee7',
|
||||
400: '#a3e635',
|
||||
500: '#84cc16',
|
||||
900: '#14532d',
|
||||
950: '#020617',
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
::-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-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.glass-header {
|
||||
background: rgba(5, 5, 5, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
z-index: 40;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #a3e635, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
/* Custom Typography for Prose */
|
||||
.prose-h2 { font-family: 'Space Grotesk', sans-serif; margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; color: white; font-weight: 700; }
|
||||
.prose-h3 { font-family: 'Space Grotesk', sans-serif; margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; color: #e5e7eb; font-weight: 600; }
|
||||
.prose-p { color: #9ca3af; line-height: 1.75; margin-bottom: 1.25rem; }
|
||||
.prose-ul { list-style-type: disc; padding-left: 1.5rem; color: #9ca3af; margin-bottom: 1.25rem; }
|
||||
.prose-li { margin-bottom: 0.5rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#050505] text-white min-h-screen selection:bg-dew-500 selection:text-black overflow-hidden">
|
||||
<!-- Ambient Background -->
|
||||
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[15%] w-[600px] h-[600px] bg-dew-900/10 rounded-full blur-[120px] animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-screen w-full">
|
||||
<!-- LEFT SIDEBAR: Same as Home -->
|
||||
<aside class="w-20 lg:w-64 h-full glass-panel flex 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-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20 shrink-0">
|
||||
<span class="text-2xl">💧</span>
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<a href="home.html" 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="layout-grid" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Discover</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">API Docs</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">Pricing</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<!-- Active State for Privacy -->
|
||||
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-white/5 transition-all">
|
||||
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Privacy</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">Terms</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN PANEL -->
|
||||
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
|
||||
|
||||
<!-- Header: Title & Meta -->
|
||||
<header class="glass-header px-8 py-6 shrink-0 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500 mb-2 font-mono uppercase tracking-widest">
|
||||
<span>Legal</span>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
<span class="text-dew-400">Privacy Policy</span>
|
||||
</div>
|
||||
<h1 class="font-display text-3xl md:text-4xl font-bold text-white">Privacy Policy</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-right hidden md:block">
|
||||
<div class="text-[10px] uppercase tracking-wider text-gray-500">Last Updated</div>
|
||||
<div class="text-sm font-medium text-gray-200">February 04, 2026</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/5 text-gray-400 transition-colors" title="Print / Download PDF">
|
||||
<i data-lucide="printer" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Scrollable Content Area -->
|
||||
<div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
|
||||
<div class="max-w-6xl mx-auto flex flex-col xl:flex-row gap-12">
|
||||
|
||||
<!-- Article Content -->
|
||||
<article class="flex-1 max-w-3xl">
|
||||
|
||||
<!-- Introduction Card -->
|
||||
<div class="glass-card p-6 md:p-8 rounded-2xl mb-10 relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<h3 class="font-display text-xl font-bold text-white mb-3">At a Glance</h3>
|
||||
<p class="text-gray-400 leading-relaxed text-sm">
|
||||
We value your privacy. We do not sell your personal data. We only collect essential metrics to improve the <span class="text-dew-400">Dewemoji API</span> performance and ensure security. This document outlines exactly what we track.
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-dew-500/10 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<!-- Prose Content -->
|
||||
<div class="prose-content">
|
||||
<section id="introduction">
|
||||
<h2 class="prose-h2 flex items-center gap-3">
|
||||
<span class="text-dew-400/50 font-mono text-lg">01.</span> Introduction
|
||||
</h2>
|
||||
<p class="prose-p">
|
||||
This Privacy Policy explains how Dewemoji ("we", "us", or "our") collects, uses, and discloses your information when you use our website and NativePHP application. By accessing or using the Service, you agree to the collection and use of information in accordance with this policy.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="collection">
|
||||
<h2 class="prose-h2 flex items-center gap-3">
|
||||
<span class="text-dew-400/50 font-mono text-lg">02.</span> Information We Collect
|
||||
</h2>
|
||||
<p class="prose-p">
|
||||
We collect several different types of information for various purposes to provide and improve our Service to you.
|
||||
</p>
|
||||
<h3 class="prose-h3">Usage Data</h3>
|
||||
<p class="prose-p">
|
||||
We may also collect information on how the Service is accessed and used ("Usage Data"). This Usage Data may include information such as:
|
||||
</p>
|
||||
<ul class="prose-ul">
|
||||
<li class="prose-li">Your computer's Internet Protocol address (e.g. IP address)</li>
|
||||
<li class="prose-li">Browser type, browser version</li>
|
||||
<li class="prose-li">The pages of our Service that you visit</li>
|
||||
<li class="prose-li">The time and date of your visit</li>
|
||||
<li class="prose-li">Unique device identifiers and other diagnostic data</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="cookies">
|
||||
<h2 class="prose-h2 flex items-center gap-3">
|
||||
<span class="text-dew-400/50 font-mono text-lg">03.</span> Tracking & Cookies
|
||||
</h2>
|
||||
<p class="prose-p">
|
||||
We use cookies and similar tracking technologies to track the activity on our Service and hold certain information.
|
||||
</p>
|
||||
<div class="p-4 rounded-xl border border-yellow-500/20 bg-yellow-500/5 flex gap-4 items-start">
|
||||
<i data-lucide="info" class="w-5 h-5 text-yellow-500 shrink-0 mt-0.5"></i>
|
||||
<p class="text-sm text-yellow-200/80 leading-relaxed m-0">
|
||||
Note for NativePHP Users: The desktop application stores local configuration files on your machine. These are not transmitted to our servers unless you sync your account.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<h2 class="prose-h2 flex items-center gap-3">
|
||||
<span class="text-dew-400/50 font-mono text-lg">04.</span> Contact Us
|
||||
</h2>
|
||||
<p class="prose-p">
|
||||
If you have any questions about this Privacy Policy, please contact us:
|
||||
</p>
|
||||
<a href="mailto:privacy@dewemoji.com" class="inline-flex items-center gap-2 text-dew-400 hover:text-white transition-colors border-b border-dew-400/30 pb-0.5">
|
||||
privacy@dewemoji.com <i data-lucide="arrow-up-right" class="w-3 h-3"></i>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-20 pt-10 border-t border-white/5 text-center text-xs text-gray-600">
|
||||
© 2026 Dewemoji Inc. All rights reserved.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Right Sticky Nav (Table of Contents) -->
|
||||
<aside class="hidden xl:block w-64 shrink-0">
|
||||
<div class="sticky top-6">
|
||||
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-6 px-4">On this page</h5>
|
||||
<nav class="flex flex-col relative">
|
||||
<!-- Active Indicator Line -->
|
||||
<div class="absolute left-0 top-0 bottom-0 w-px bg-white/5"></div>
|
||||
|
||||
<a href="#introduction" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-dew-400 border-l-2 border-dew-400 -ml-[1px] transition-all">
|
||||
Introduction
|
||||
</a>
|
||||
<a href="#collection" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-gray-500 hover:text-gray-300 border-l-2 border-transparent -ml-[1px] transition-all">
|
||||
Data Collection
|
||||
</a>
|
||||
<a href="#cookies" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-gray-500 hover:text-gray-300 border-l-2 border-transparent -ml-[1px] transition-all">
|
||||
Tracking & Cookies
|
||||
</a>
|
||||
<a href="#contact" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-gray-500 hover:text-gray-300 border-l-2 border-transparent -ml-[1px] transition-all">
|
||||
Contact
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Helper Card -->
|
||||
<div class="mt-10 p-5 rounded-2xl bg-[#151518] border border-white/5">
|
||||
<h6 class="text-white font-bold text-sm mb-2">Have questions?</h6>
|
||||
<p class="text-xs text-gray-500 mb-4">Our legal team is available Mon-Fri.</p>
|
||||
<button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-medium text-gray-300 transition-colors border border-white/5">
|
||||
Support Ticket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Simple TOC Active State Logic (Optional Enhancement)
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
document.querySelectorAll('.toc-link').forEach(link => {
|
||||
link.classList.remove('text-dew-400', 'border-dew-400');
|
||||
link.classList.add('text-gray-500', 'border-transparent');
|
||||
|
||||
if (link.getAttribute('href') === '#' + entry.target.id) {
|
||||
link.classList.add('text-dew-400', 'border-dew-400');
|
||||
link.classList.remove('text-gray-500', 'border-transparent');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
336
references/homepage-refined.html
Normal file
336
references/homepage-refined.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dewemoji - Discover</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: {
|
||||
dew: {
|
||||
50: '#f7fee7',
|
||||
400: '#a3e635',
|
||||
500: '#84cc16',
|
||||
900: '#14532d',
|
||||
950: '#020617',
|
||||
},
|
||||
},
|
||||
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>
|
||||
::-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-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
/* Sticky header with blur */
|
||||
.glass-header {
|
||||
background: rgba(5, 5, 5, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
z-index: 40;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.glass-card:hover {
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border-color: rgba(163, 230, 53, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px -10px rgba(132, 204, 22, 0.15);
|
||||
}
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #a3e635, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#050505] text-white min-h-screen selection:bg-dew-500 selection:text-black overflow-hidden">
|
||||
<!-- Ambient Background -->
|
||||
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[15%] w-[600px] h-[600px] bg-dew-900/10 rounded-full blur-[120px] animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-screen w-full">
|
||||
<!-- LEFT SIDEBAR: Navigation -->
|
||||
<aside class="w-20 lg:w-64 h-full glass-panel flex 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-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20 shrink-0">
|
||||
<span class="text-2xl">💧</span>
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-white/5 transition-all group">
|
||||
<i data-lucide="layout-grid" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Discover</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">API Docs</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">Pricing</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a href="#" 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="font-medium hidden lg:block">Privacy</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">Terms</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- CENTER PANEL: Search & Feed -->
|
||||
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
|
||||
|
||||
<!-- STICKY HEADER: Control Deck -->
|
||||
<!-- We put search at top so it's always accessible -->
|
||||
<header class="glass-header px-6 py-5 shrink-0">
|
||||
<div class="max-w-7xl mx-auto w-full flex flex-col md:flex-row gap-4 md:items-center justify-between">
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="relative group grow max-w-2xl">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-dew-500 to-cyan-500 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 3,600+ emojis..." 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>
|
||||
|
||||
<!-- Filters & Profile -->
|
||||
<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-dew-400 hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none">
|
||||
<option value="">All Categories</option>
|
||||
</select>
|
||||
<div class="w-px h-8 bg-white/10 mx-1"></div>
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-600 border border-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- SCROLLABLE AREA -->
|
||||
<div class="flex-1 overflow-y-auto p-6 scroll-smooth" id="scroll-container">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<!-- 1. HERO BENTO ROW (The "Styled Cards" are back!) -->
|
||||
<!-- This sits atop the grid. It looks great initially, but scrolls away when you dive deep. -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
|
||||
|
||||
<!-- Main Feature Card -->
|
||||
<div class="md:col-span-2 glass-card rounded-2xl p-6 relative overflow-hidden group min-h-[180px] flex flex-col justify-end">
|
||||
<div class="absolute top-0 right-0 p-5 opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 text-dew-400"></i>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<span class="inline-block px-2 py-0.5 rounded bg-dew-500/20 text-dew-400 text-[10px] font-bold mb-2 border border-dew-500/20">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">Don't remember the name? Search the vibe. Our API understands "celebration" → 🎉 🥳 🍾.</p>
|
||||
</div>
|
||||
<!-- Decor -->
|
||||
<div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-blue-500/20 to-dew-500/20 rounded-full blur-3xl group-hover:blur-2xl transition-all duration-700"></div>
|
||||
</div>
|
||||
|
||||
<!-- Trending Tags -->
|
||||
<div class="glass-card rounded-2xl p-5 flex flex-col relative group">
|
||||
<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-dew-400"></i>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 content-start">
|
||||
<button data-tag="happy" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#happy</button>
|
||||
<button data-tag="code" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#code</button>
|
||||
<button data-tag="ship" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#ship</button>
|
||||
<button data-tag="fire" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#fire</button>
|
||||
<button data-tag="wfh" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#wfh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick History / Stats -->
|
||||
<div class="glass-card rounded-2xl p-5 flex flex-col justify-between group">
|
||||
<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">3,664 items</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-sm">Recent</h4>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<button onclick="copyToClipboard('🚀')" class="w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg transition-colors">🚀</button>
|
||||
<button onclick="copyToClipboard('💀')" class="w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg transition-colors">💀</button>
|
||||
<button onclick="copyToClipboard('✨')" class="w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg transition-colors">✨</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 2. THE SPACIOUS GRID (Results) -->
|
||||
<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 class="text-xs text-gray-500" id="result-count">Showing 42</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-12 gap-3 pb-20">
|
||||
<!-- Items injected via JS -->
|
||||
</div>
|
||||
|
||||
<!-- Load More Trigger -->
|
||||
<div id="more-trigger" class="py-12 flex justify-center hidden">
|
||||
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-dew-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<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-dew-500 text-black px-4 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(132,204,22,0.4)] 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>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
// --- MOCK DATA ---
|
||||
const mockEmojis = [
|
||||
{ emoji: '😀', name: 'grinning face' }, { emoji: '😃', name: 'grinning face with big eyes' },
|
||||
{ emoji: '😄', name: 'grinning face with smiling eyes' }, { emoji: '😁', name: 'beaming face' },
|
||||
{ emoji: '😆', name: 'grinning squinting face' }, { emoji: '😅', name: 'grinning sweat' },
|
||||
{ emoji: '🤣', name: 'rofl' }, { emoji: '😂', name: 'joy' },
|
||||
{ emoji: '🙂', name: 'slightly smiling face' }, { emoji: '🙃', name: 'upside-down face' },
|
||||
{ emoji: '🫠', name: 'melting face' }, { emoji: '😉', name: 'winking face' },
|
||||
{ emoji: '😊', name: 'smiling face with smiling eyes' }, { emoji: '😇', name: 'smiling face with halo' },
|
||||
{ emoji: '🥰', name: 'smiling face with hearts' }, { emoji: '😍', name: 'heart eyes' },
|
||||
{ emoji: '🤩', name: 'star-struck' }, { emoji: '😘', name: 'face blowing a kiss' },
|
||||
{ emoji: '😗', name: 'kissing face' }, { emoji: '☺️', name: 'smiling face' },
|
||||
{ emoji: '😚', name: 'kissing face with closed eyes' }, { emoji: '😙', name: 'kissing face with smiling eyes' },
|
||||
{ emoji: '🥲', name: 'smiling face with tear' }, { emoji: '😋', name: 'face savoring food' },
|
||||
{ emoji: '😛', name: 'face with tongue' }, { emoji: '😜', name: 'winking face with tongue' },
|
||||
{ emoji: '🤪', name: 'zany face' }, { emoji: '😝', name: 'squinting face with tongue' },
|
||||
{ emoji: '🤑', name: 'money-mouth face' }, { emoji: '🤗', name: 'hugging face' },
|
||||
{ emoji: '🤭', name: 'face with hand over mouth' }, { emoji: '🫣', name: 'face peeking eye' },
|
||||
{ emoji: '🤫', name: 'shushing face' }, { emoji: '🤔', name: 'thinking face' },
|
||||
{ emoji: '🫡', name: 'saluting face' }, { emoji: '🤐', name: 'zipper-mouth face' },
|
||||
{ emoji: '🤨', name: 'face with raised eyebrow' }, { emoji: '😐', name: 'neutral face' },
|
||||
{ emoji: '😑', name: 'expressionless face' }, { emoji: '😶', name: 'face without mouth' },
|
||||
{ emoji: '🔥', name: 'fire' }, { emoji: '✨', name: 'sparkles' },
|
||||
{ emoji: '💀', name: 'skull' }, { emoji: '🚀', name: 'rocket' }
|
||||
];
|
||||
|
||||
// --- STATE & ELEMENTS ---
|
||||
const grid = document.getElementById('grid');
|
||||
const qEl = document.getElementById('q');
|
||||
const countEl = document.getElementById('result-count');
|
||||
const categories = ['Smileys', 'People', 'Animals', 'Food', 'Travel', 'Activities', 'Objects', 'Symbols'];
|
||||
|
||||
// --- LOGIC ---
|
||||
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);
|
||||
});
|
||||
}
|
||||
window.copyToClipboard = copyToClipboard; // Expose to global for HTML onclicks
|
||||
|
||||
function loadCategories() {
|
||||
const el = document.getElementById('category');
|
||||
categories.forEach(c => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = c;
|
||||
opt.textContent = c;
|
||||
el.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchEmojis(reset = false) {
|
||||
if (reset) grid.innerHTML = '';
|
||||
|
||||
// Generate mock copies to simulate "infinite" content
|
||||
const incoming = [...mockEmojis, ...mockEmojis];
|
||||
|
||||
incoming.forEach((item) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'aspect-square rounded-xl bg-[#151518] hover:bg-white/10 flex flex-col items-center justify-center gap-1 text-center transition-all hover:scale-105 border border-white/5 hover:border-white/20 cursor-pointer group relative';
|
||||
card.innerHTML = `
|
||||
<span class="text-3xl leading-none group-hover:scale-110 transition-transform duration-300 filter drop-shadow-lg">${item.emoji}</span>
|
||||
`;
|
||||
card.onclick = () => copyToClipboard(item.emoji);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
countEl.textContent = `Showing ${grid.children.length} items`;
|
||||
}
|
||||
|
||||
let timer = null;
|
||||
qEl.addEventListener('input', () => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => fetchEmojis(true), 300);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.quick-tag').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
qEl.value = btn.dataset.tag;
|
||||
fetchEmojis(true);
|
||||
});
|
||||
});
|
||||
|
||||
loadCategories();
|
||||
fetchEmojis(true);
|
||||
lucide.createIcons();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
333
references/homepage.html
Normal file
333
references/homepage.html
Normal file
@@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dewemoji - 2026 Revamp</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- 2026 Typography: Space Grotesk for headings, Inter for UI -->
|
||||
<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">
|
||||
|
||||
<!-- Lucide Icons (NativePHP friendly) -->
|
||||
<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: {
|
||||
dew: {
|
||||
50: '#f7fee7',
|
||||
400: '#a3e635',
|
||||
500: '#84cc16', // The "Dew" Green
|
||||
900: '#14532d',
|
||||
950: '#020617', // Deep background
|
||||
},
|
||||
glass: {
|
||||
100: 'rgba(255, 255, 255, 0.05)',
|
||||
200: 'rgba(255, 255, 255, 0.1)',
|
||||
border: 'rgba(255, 255, 255, 0.08)',
|
||||
}
|
||||
},
|
||||
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>
|
||||
/* Custom Scrollbar for Native App feel */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255,255,255,0.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border-color: rgba(163, 230, 53, 0.3); /* Dew color */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px -10px rgba(132, 204, 22, 0.15);
|
||||
}
|
||||
|
||||
.emoji-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Text Gradient */
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #a3e635, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#050505] text-white h-screen w-screen overflow-hidden selection:bg-dew-500 selection:text-black">
|
||||
|
||||
<!-- Ambient Background Glows -->
|
||||
<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-dew-900/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>
|
||||
|
||||
<!-- App Shell Layout -->
|
||||
<div class="flex h-full">
|
||||
|
||||
<!-- Sidebar Navigation (Glassmorphism) -->
|
||||
<aside class="w-20 lg:w-64 h-full glass-panel flex flex-col justify-between p-4 z-20 transition-all duration-300">
|
||||
<div>
|
||||
<!-- Logo Area -->
|
||||
<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-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20">
|
||||
<span class="text-2xl">💧</span>
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
|
||||
<!-- Nav Items -->
|
||||
<nav class="space-y-2">
|
||||
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-white/5 transition-all group">
|
||||
<i data-lucide="layout-grid" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Discover</span>
|
||||
</a>
|
||||
<a href="#" 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="clock" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
|
||||
<span class="font-medium hidden lg:block">History</span>
|
||||
</a>
|
||||
<a href="#" 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="heart" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
|
||||
<span class="font-medium hidden lg:block">Favorites</span>
|
||||
</a>
|
||||
<a href="#" 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="hash" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
|
||||
<span class="font-medium hidden lg:block">Keywords</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<div class="space-y-2">
|
||||
<button class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 w-full transition-all">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 h-full overflow-y-auto relative p-6 lg:p-10">
|
||||
|
||||
<!-- Header / Search Section -->
|
||||
<header class="max-w-5xl mx-auto mb-12">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex flex-col">
|
||||
<h2 class="font-display text-4xl lg:text-5xl font-bold mb-2">
|
||||
Find by <span class="text-gradient">Keyword</span>
|
||||
</h2>
|
||||
<p class="text-gray-400">Search 3,600+ emojis by meaning, vibe, or tag.</p>
|
||||
</div>
|
||||
|
||||
<!-- User Profile / Window Controls Placeholder -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 rounded-full hover:bg-white/10 transition-colors relative">
|
||||
<i data-lucide="bell" class="w-5 h-5 text-gray-300"></i>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-600 border border-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2026 "Agentic" Search Bar -->
|
||||
<div class="relative group z-10">
|
||||
<div class="absolute -inset-1 bg-gradient-to-r from-dew-500 to-cyan-500 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
|
||||
<div class="relative flex items-center bg-[#0F0F12] border border-white/10 rounded-2xl p-2 shadow-2xl">
|
||||
<div class="p-3 text-gray-400">
|
||||
<i data-lucide="search" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<input type="text"
|
||||
placeholder="Type a keyword (e.g., 'celebrate', 'sad', 'coffee')..."
|
||||
class="w-full bg-transparent text-lg text-white placeholder-gray-500 focus:outline-none px-2 font-medium h-12">
|
||||
<div class="hidden md:flex items-center gap-2 pr-3 text-xs text-gray-500 font-mono">
|
||||
<span class="border border-white/10 px-2 py-1 rounded bg-white/5">⌘ K</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Bento Grid Content -->
|
||||
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 auto-rows-[180px]">
|
||||
|
||||
<!-- Large Featured Card (Spans 2x2) -->
|
||||
<!-- Focus on Keyword Search Discovery -->
|
||||
<div class="md:col-span-2 md:row-span-2 glass-card rounded-3xl p-6 relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-6 opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<i data-lucide="sparkles" class="w-6 h-6 text-dew-400"></i>
|
||||
</div>
|
||||
<div class="relative z-10 h-full flex flex-col justify-end">
|
||||
<span class="inline-block px-3 py-1 rounded-full bg-dew-500/20 text-dew-400 text-xs font-bold mb-3 w-fit border border-dew-500/20">SMART SEARCH</span>
|
||||
<h3 class="font-display text-3xl font-bold mb-2">Semantic Keywords</h3>
|
||||
<p class="text-gray-400 text-sm mb-4 max-w-sm">Don't just search "dog". Search "loyal", "pet", or "puppy". Our engine understands the context of every emoji.</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-3 py-1 rounded-lg bg-white/10 text-xs border border-white/5">#joy</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-white/10 text-xs border border-white/5">#success</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-white/10 text-xs border border-white/5">#travel</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative Graphic -->
|
||||
<div class="absolute -top-10 -right-10 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-dew-500/20 rounded-full blur-3xl group-hover:blur-2xl transition-all duration-700"></div>
|
||||
<div class="absolute top-10 right-10 flex flex-col gap-2 opacity-50">
|
||||
<div class="bg-black/40 backdrop-blur px-3 py-2 rounded-lg border border-white/10 text-xs">🔍 "Deadline" → 📅 ⏳ 😫</div>
|
||||
<div class="bg-black/40 backdrop-blur px-3 py-2 rounded-lg border border-white/10 text-xs translate-x-4">🔍 "Launch" → 🚀 🎉 🍾</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trending Keywords Card -->
|
||||
<div class="glass-card rounded-3xl p-5 flex flex-col group relative overflow-hidden">
|
||||
<div class="flex justify-between items-center mb-4 relative z-10">
|
||||
<h4 class="font-bold text-gray-200">Trending Tags</h4>
|
||||
<i data-lucide="trending-up" class="w-4 h-4 text-dew-400"></i>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 relative z-10">
|
||||
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#coding</span>
|
||||
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#coffee</span>
|
||||
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#weekend</span>
|
||||
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#bug</span>
|
||||
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#sick</span>
|
||||
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#party</span>
|
||||
</div>
|
||||
<div class="absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
#
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Copy Grid -->
|
||||
<div class="md:col-span-1 md:row-span-2 glass-card rounded-3xl p-5 flex flex-col">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h4 class="font-bold text-gray-200">Recent Copies</h4>
|
||||
<i data-lucide="history" class="w-4 h-4 text-gray-400"></i>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3 flex-1">
|
||||
<!-- Loop these in Blade -->
|
||||
<button onclick="copyEmoji('💀')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">💀</button>
|
||||
<button onclick="copyEmoji('🔥')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">🔥</button>
|
||||
<button onclick="copyEmoji('✨')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">✨</button>
|
||||
<button onclick="copyEmoji('✔️')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">✔️</button>
|
||||
<button onclick="copyEmoji('🚀')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">🚀</button>
|
||||
<button onclick="copyEmoji('👀')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">👀</button>
|
||||
<button onclick="copyEmoji('😭')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">😭</button>
|
||||
<button onclick="copyEmoji('👍')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">👍</button>
|
||||
<button class="aspect-square rounded-xl bg-white/5 hover:bg-dew-500/20 flex items-center justify-center text-gray-400 hover:text-dew-400 transition-colors border border-dashed border-white/20">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Smileys & People -->
|
||||
<div class="glass-card rounded-3xl p-5 flex flex-col justify-between group cursor-pointer relative overflow-hidden">
|
||||
<div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center text-yellow-400 mb-4">
|
||||
<i data-lucide="smile" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg z-10">Smileys & People</h4>
|
||||
<p class="text-xs text-gray-500 z-10">Faces, hands, roles</p>
|
||||
</div>
|
||||
<div class="absolute right-2 bottom-2 opacity-10 group-hover:opacity-100 transition-opacity transform group-hover:-translate-x-2 group-hover:-translate-y-2">
|
||||
<span class="text-5xl">🫠</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Objects & Symbols -->
|
||||
<div class="glass-card rounded-3xl p-5 flex flex-col justify-between group cursor-pointer relative overflow-hidden">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
|
||||
<i data-lucide="shapes" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg">Objects & Symbols</h4>
|
||||
<p class="text-xs text-gray-500">Tech, tools, signs</p>
|
||||
</div>
|
||||
<div class="absolute right-2 bottom-2 opacity-10 group-hover:opacity-100 transition-opacity transform group-hover:-translate-x-2 group-hover:-translate-y-2">
|
||||
<span class="text-5xl">💡</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer/Stats -->
|
||||
<div class="md:col-span-3 lg:col-span-4 mt-8 pt-8 border-t border-white/5 flex justify-between items-center text-sm text-gray-500">
|
||||
<p>© 2026 Dewemoji for NativePHP.</p>
|
||||
<div class="flex gap-4">
|
||||
<span class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-green-500"></div> Database: 3,664 Emojis</span>
|
||||
<span>v3.0.1-beta</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast Notification (Hidden by default) -->
|
||||
<div id="toast" class="fixed bottom-10 right-10 translate-y-24 opacity-0 transition-all duration-300 z-50">
|
||||
<div class="bg-dew-500 text-black px-6 py-3 rounded-xl font-bold shadow-lg shadow-dew-500/20 flex items-center gap-3">
|
||||
<i data-lucide="check-circle-2" class="w-5 h-5"></i>
|
||||
<span id="toast-msg">Copied to clipboard!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize Icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Simple Toast & Copy Logic
|
||||
function copyEmoji(emoji) {
|
||||
navigator.clipboard.writeText(emoji).then(() => {
|
||||
const toast = document.getElementById('toast');
|
||||
const msg = document.getElementById('toast-msg');
|
||||
|
||||
msg.innerText = `Copied ${emoji}`;
|
||||
toast.classList.remove('translate-y-24', 'opacity-0');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('translate-y-24', 'opacity-0');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
293
references/pricing.html
Normal file
293
references/pricing.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pricing - 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: {
|
||||
dew: {
|
||||
50: '#f7fee7',
|
||||
400: '#a3e635',
|
||||
500: '#84cc16',
|
||||
900: '#14532d',
|
||||
950: '#020617',
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
::-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-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.glass-header {
|
||||
background: rgba(5, 5, 5, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
z-index: 40;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.glass-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.glass-card-highlight {
|
||||
background: linear-gradient(145deg, rgba(20, 83, 45, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
|
||||
border: 1px solid rgba(163, 230, 53, 0.3);
|
||||
box-shadow: 0 0 30px rgba(163, 230, 53, 0.1);
|
||||
}
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #a3e635, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#050505] text-white min-h-screen selection:bg-dew-500 selection:text-black overflow-hidden">
|
||||
<!-- Ambient Background -->
|
||||
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[15%] w-[600px] h-[600px] bg-dew-900/10 rounded-full blur-[120px] animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-screen w-full">
|
||||
<!-- LEFT SIDEBAR: Consistent Navigation -->
|
||||
<aside class="w-20 lg:w-64 h-full glass-panel flex 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-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20 shrink-0">
|
||||
<span class="text-2xl">💧</span>
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<a href="home.html" 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="layout-grid" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Discover</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">API Docs</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-white/5 transition-all group">
|
||||
<i data-lucide="badge-dollar-sign" class="w-5 h-5"></i>
|
||||
<span class="font-medium hidden lg:block">Pricing</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a href="common_page.html" 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="font-medium hidden lg:block">Privacy</span>
|
||||
</a>
|
||||
<a href="#" 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="font-medium hidden lg:block">Terms</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN PANEL -->
|
||||
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
|
||||
|
||||
<!-- Minimal Header -->
|
||||
<header class="glass-header px-8 py-6 shrink-0 flex justify-end gap-4">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-400">
|
||||
<span>Currency:</span>
|
||||
<select class="bg-transparent text-white focus:outline-none font-bold">
|
||||
<option>USD</option>
|
||||
<option>EUR</option>
|
||||
<option>IDR</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-px h-5 bg-white/10"></div>
|
||||
<button class="text-sm font-bold text-dew-400 hover:text-white transition-colors">Restore Purchases</button>
|
||||
</header>
|
||||
|
||||
<!-- Scrollable Content Area -->
|
||||
<div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
|
||||
<div class="max-w-5xl mx-auto flex flex-col items-center">
|
||||
|
||||
<!-- Pricing Hero -->
|
||||
<div class="text-center mb-16 max-w-2xl">
|
||||
<h1 class="font-display text-4xl md:text-5xl font-bold mb-4">
|
||||
Supercharge your <span class="text-gradient">Workflow</span>
|
||||
</h1>
|
||||
<p class="text-gray-400 text-lg">
|
||||
Get unlimited access to the Semantic Engine, API keys, and offline syncing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Switch -->
|
||||
<div class="flex items-center gap-4 mb-12 bg-white/5 p-1.5 rounded-full border border-white/5">
|
||||
<button class="px-6 py-2 rounded-full bg-white/10 text-white font-medium shadow-sm transition-all">Monthly</button>
|
||||
<button class="px-6 py-2 rounded-full text-gray-400 hover:text-white transition-all relative">
|
||||
Yearly
|
||||
<span class="absolute -top-3 -right-6 text-[10px] bg-dew-500 text-black px-1.5 py-0.5 rounded font-bold">-20%</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full mb-20">
|
||||
|
||||
<!-- Free Tier -->
|
||||
<div class="glass-card rounded-3xl p-8 flex flex-col">
|
||||
<div class="mb-4">
|
||||
<h3 class="font-display text-xl font-bold">Starter</h3>
|
||||
<p class="text-sm text-gray-500">For casual emoji users.</p>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<span class="text-4xl font-bold">$0</span>
|
||||
<span class="text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-1">
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
|
||||
Basic Search (Name only)
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
|
||||
Copy to Clipboard
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
|
||||
Standard Categories
|
||||
</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 font-bold transition-all">Current Plan</button>
|
||||
</div>
|
||||
|
||||
<!-- Pro Tier (Highlighted) -->
|
||||
<div class="glass-card-highlight rounded-3xl p-8 flex flex-col relative transform md:-translate-y-4">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-dew-500 text-black text-xs font-bold px-3 py-1 rounded-full shadow-lg shadow-dew-500/40">
|
||||
MOST POPULAR
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<h3 class="font-display text-xl font-bold text-dew-400">Developer</h3>
|
||||
<p class="text-sm text-gray-400">Power users & builders.</p>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<span class="text-4xl font-bold">$9</span>
|
||||
<span class="text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-1">
|
||||
<li class="flex items-start gap-3 text-sm text-white font-medium">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
|
||||
Semantic Search Engine
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-white font-medium">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
|
||||
API Access (10k req/mo)
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-white font-medium">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
|
||||
Offline Database Sync
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-white font-medium">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
|
||||
JSON / CSV Export
|
||||
</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 rounded-xl bg-dew-500 hover:bg-dew-400 text-black font-bold shadow-lg shadow-dew-500/20 transition-all">Upgrade Now</button>
|
||||
</div>
|
||||
|
||||
<!-- Team Tier -->
|
||||
<div class="glass-card rounded-3xl p-8 flex flex-col">
|
||||
<div class="mb-4">
|
||||
<h3 class="font-display text-xl font-bold">Team</h3>
|
||||
<p class="text-sm text-gray-500">For shared assets.</p>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<span class="text-4xl font-bold">$29</span>
|
||||
<span class="text-gray-500">/mo</span>
|
||||
</div>
|
||||
<ul class="space-y-4 mb-8 flex-1">
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
|
||||
Everything in Developer
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
|
||||
Shared "Favorites" Collections
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
|
||||
Unlimited API Access
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-sm text-gray-300">
|
||||
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
|
||||
Priority Support
|
||||
</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 font-bold transition-all">Contact Sales</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<div class="w-full max-w-3xl">
|
||||
<h4 class="font-display text-2xl font-bold mb-8 text-center">Frequently Asked Questions</h4>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Q1 -->
|
||||
<div class="glass-card p-6 rounded-2xl cursor-pointer hover:bg-white/5 transition-colors">
|
||||
<h5 class="font-bold mb-2 flex justify-between">
|
||||
Do I need an API key for the desktop app?
|
||||
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i>
|
||||
</h5>
|
||||
<p class="text-sm text-gray-400">No, the basic desktop app works out of the box. The API key is only needed if you want to integrate Dewemoji into your own applications or CI/CD pipelines.</p>
|
||||
</div>
|
||||
<!-- Q2 -->
|
||||
<div class="glass-card p-6 rounded-2xl cursor-pointer hover:bg-white/5 transition-colors">
|
||||
<h5 class="font-bold mb-2 flex justify-between">
|
||||
Does "Offline Sync" work on NativePHP?
|
||||
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i>
|
||||
</h5>
|
||||
<p class="text-sm text-gray-400">Yes! The Developer plan downloads the entire semantic database (SQLite format) to your local machine, so search works instantly even without internet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-20 py-10 border-t border-white/5 text-center text-xs text-gray-600 w-full">
|
||||
Prices are in USD. VAT may apply.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
277
references/single-page.html
Normal file
277
references/single-page.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Grinning Face - 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: {
|
||||
dew: {
|
||||
50: '#f7fee7', 400: '#a3e635', 500: '#84cc16', 900: '#14532d', 950: '#020617',
|
||||
},
|
||||
glass: {
|
||||
100: 'rgba(255, 255, 255, 0.05)',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
},
|
||||
keyframes: {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.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);
|
||||
}
|
||||
|
||||
.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.2s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #a3e635, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#050505] text-white h-screen w-screen overflow-hidden selection:bg-dew-500 selection:text-black">
|
||||
|
||||
<!-- Ambient Background -->
|
||||
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[800px] h-[800px] bg-dew-900/10 rounded-full blur-[150px]"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-full">
|
||||
<!-- Sidebar (Collapsed for Detail View context) -->
|
||||
<aside class="w-20 lg:w-64 h-full glass-panel flex 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-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20">
|
||||
<span class="text-2xl">💧</span>
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-2">
|
||||
<a href="home.html" 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="arrow-left" class="w-5 h-5 text-dew-400"></i>
|
||||
<span class="font-medium hidden lg:block text-dew-400">Back</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 h-full overflow-y-auto relative p-6 lg:p-10 flex flex-col">
|
||||
|
||||
<!-- Breadcrumbs / Top Nav -->
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500 mb-8 font-mono">
|
||||
<span class="hover:text-white cursor-pointer transition-colors">Home</span>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
<span class="hover:text-white cursor-pointer transition-colors">Smileys & Emotion</span>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
<span class="text-dew-400">Grinning Face</span>
|
||||
</div>
|
||||
|
||||
<!-- Two Column Inspector Layout -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 max-w-6xl mx-auto w-full">
|
||||
|
||||
<!-- Left Column: Visual Inspector (4 cols) -->
|
||||
<div class="lg:col-span-5 flex flex-col gap-6">
|
||||
<!-- Main Emoji Preview -->
|
||||
<div class="glass-card rounded-[32px] aspect-square flex items-center justify-center relative overflow-hidden group">
|
||||
<!-- Glow Effect behind emoji -->
|
||||
<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>
|
||||
|
||||
<!-- The Emoji -->
|
||||
<div class="text-[140px] md:text-[180px] leading-none select-none relative z-10 animate-float drop-shadow-2xl">
|
||||
😀
|
||||
</div>
|
||||
|
||||
<!-- Zoom/Action overlay -->
|
||||
<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 class="bg-black/50 backdrop-blur text-white p-3 rounded-full hover:bg-white hover:text-black transition-colors border border-white/10" title="Download PNG">
|
||||
<i data-lucide="download" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="bg-black/50 backdrop-blur text-white p-3 rounded-full hover:bg-dew-400 hover:text-black transition-colors border border-white/10" title="Copy Image">
|
||||
<i data-lucide="copy" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related / Skin Tones (If applicable) -->
|
||||
<div class="glass-card rounded-2xl p-5">
|
||||
<h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Related Variations</h3>
|
||||
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
|
||||
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😃</button>
|
||||
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😄</button>
|
||||
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😁</button>
|
||||
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😆</button>
|
||||
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😅</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Data Inspector (7 cols) -->
|
||||
<div class="lg:col-span-7 flex flex-col gap-6">
|
||||
|
||||
<!-- Header Info -->
|
||||
<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">Face-Smiling</span>
|
||||
<span class="bg-white/5 text-gray-400 border border-white/10 px-3 py-1 rounded-full text-xs font-bold uppercase">v1.0</span>
|
||||
</div>
|
||||
<h1 class="font-display text-5xl font-bold mb-4">Grinning Face</h1>
|
||||
<p class="text-gray-400 text-lg leading-relaxed">A yellow face with simple, open eyes and a broad, open smile, showing upper teeth and tongue on some platforms. Often conveys general pleasure and good cheer.</p>
|
||||
</div>
|
||||
|
||||
<!-- Primary Action -->
|
||||
<div class="flex gap-4">
|
||||
<button onclick="copyToClipboard('😀')" class="flex-1 bg-dew-500 hover:bg-dew-400 text-black font-bold h-14 rounded-xl flex items-center justify-center gap-3 text-lg transition-all shadow-[0_0_20px_rgba(132,204,22,0.3)] hover:shadow-[0_0_30px_rgba(132,204,22,0.5)]">
|
||||
<i data-lucide="copy" class="w-5 h-5"></i>
|
||||
Copy Emoji
|
||||
</button>
|
||||
<button class="w-14 h-14 rounded-xl glass-card flex items-center justify-center text-gray-400 hover:text-red-400 hover:border-red-500/30 transition-colors">
|
||||
<i data-lucide="heart" class="w-6 h-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippets Bento -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Shortcode -->
|
||||
<div onclick="copyToClipboard(':grinning:')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
|
||||
<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-dew-400 transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-dew-400 group-hover:text-dew-300 font-medium truncate">:grinning:</div>
|
||||
</div>
|
||||
|
||||
<!-- Unicode -->
|
||||
<div onclick="copyToClipboard('U+1F600')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
|
||||
<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-dew-400 transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-gray-300 group-hover:text-white font-medium">U+1F600</div>
|
||||
</div>
|
||||
|
||||
<!-- HTML Hex -->
|
||||
<div onclick="copyToClipboard('😀')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<span class="text-xs font-mono text-gray-500">HTML Entity (Hex)</span>
|
||||
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-dew-400 transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-gray-400 group-hover:text-white font-medium truncate">&#x1F600;</div>
|
||||
</div>
|
||||
|
||||
<!-- CSS Content -->
|
||||
<div onclick="copyToClipboard('\\1F600')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
|
||||
<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-dew-400 transition-colors"></i>
|
||||
</div>
|
||||
<div class="font-mono text-gray-400 group-hover:text-white font-medium"> \1F600</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keywords / Tags Section -->
|
||||
<div class="mt-2">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i data-lucide="hash" class="w-4 h-4 text-dew-400"></i>
|
||||
<h3 class="text-sm font-bold text-gray-200 uppercase tracking-wide">Semantic Tags</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!-- Tag Component -->
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">happy</a>
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">joy</a>
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">smile</a>
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">grin</a>
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">cheerful</a>
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">laugh</a>
|
||||
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">positive</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Small -->
|
||||
<footer class="mt-auto pt-10 text-center text-gray-600 text-xs">
|
||||
Dewemoji Native • Press 'C' to copy
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<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-dew-500 text-black px-6 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(132,204,22,0.4)] flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span id="toast-msg">Copied!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
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');
|
||||
|
||||
// Keyboard shortcut listener concept
|
||||
// In NativePHP you might use GlobalHotkeys, but here is JS fallback
|
||||
setTimeout(() => {
|
||||
toast.classList.add('translate-y-24', 'opacity-0');
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
// Add keyboard shortcut 'c'
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'c' && !e.metaKey && !e.ctrlKey && document.activeElement.tagName !== 'INPUT') {
|
||||
copyToClipboard('😀');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user