116 lines
5.1 KiB
PHP
116 lines
5.1 KiB
PHP
<!doctype html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
@php
|
|
$canonicalPath = $canonicalPath ?? request()->getPathInfo();
|
|
$canonicalPath = $canonicalPath === '' ? '/' : $canonicalPath;
|
|
if ($canonicalPath !== '/') {
|
|
$canonicalPath = '/'.trim($canonicalPath, '/');
|
|
}
|
|
$canonicalUrl = rtrim(config('app.url', request()->getSchemeAndHttpHost()), '/').$canonicalPath;
|
|
$metaDescription = trim($__env->yieldContent('meta_description')) ?: 'Search, copy, and explore emojis with Dewemoji. Free browser extension and API for developers.';
|
|
$metaTitle = trim($__env->yieldContent('title')) ?: 'Dewemoji';
|
|
@endphp
|
|
<title>@yield('title', 'Dewemoji')</title>
|
|
<meta name="description" content="{{ $metaDescription }}">
|
|
<link rel="canonical" href="{{ $canonicalUrl }}">
|
|
<meta property="og:title" content="{{ $metaTitle }}">
|
|
<meta property="og:description" content="{{ $metaDescription }}">
|
|
<meta property="og:url" content="{{ $canonicalUrl }}">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Dewemoji">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="{{ $metaTitle }}">
|
|
<meta name="twitter:description" content="{{ $metaDescription }}">
|
|
<meta name="theme-color" content="#2053ff">
|
|
<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>
|
|
::-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);
|
|
}
|
|
.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(53, 108, 240, 0.35);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 40px -10px rgba(32, 83, 255, 0.2);
|
|
}
|
|
.text-gradient {
|
|
background: linear-gradient(to right, #fcb735, #2053ff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.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')
|
|
@stack('jsonld')
|
|
</head>
|
|
<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>
|
|
|
|
@yield('content')
|
|
|
|
<script>lucide.createIcons();</script>
|
|
@stack('scripts')
|
|
</body>
|
|
</html>
|