Files
nixpanel-website/views/layout/head.php
T
NixReaper 7b66c6c7ff feat: add logo SVG, favicon, wire logo into header and footer
- public/assets/logo.svg: SVG recreation of the NixPanel N-mark
  (server-rack bars + diagonal stroke + panel indicator blocks)
- head.php: favicon links for SVG, PNG 32px, PNG 192px, Apple touch,
  theme-color meta tag
- header.php: logo image next to wordmark, PNG fallback via onerror
- footer.php: logo image in footer brand
2026-04-25 05:57:56 -05:00

63 lines
3.5 KiB
PHP

<!DOCTYPE html>
<html lang="en" class="bg-gray-950">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($pageTitle ?? 'NixPanel — Modern Web Hosting Control Panel') ?></title>
<meta name="description" content="<?= e($pageDesc ?? 'NixPanel is a modern, open-source cPanel alternative. Manage your Linux server with NixServer and NixClient.') ?>">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/logo-192.png">
<link rel="apple-touch-icon" href="/assets/logo-192.png">
<meta name="theme-color" content="#0f172a">
<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;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a5f',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
}
</script>
<style type="text/tailwindcss">
@layer base {
body { @apply bg-gray-950 text-gray-100 font-sans antialiased; }
.btn-primary { @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg bg-brand-600 hover:bg-brand-700 text-white font-semibold text-sm transition-colors; }
.btn-secondary { @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg bg-transparent hover:bg-gray-800 text-gray-300 border border-gray-700 font-semibold text-sm transition-colors; }
.btn-outline { @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg bg-transparent hover:bg-brand-900/30 text-brand-400 border border-brand-500/50 font-semibold text-sm transition-colors; }
.input { @apply w-full bg-gray-900 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-brand-500 transition-colors; }
.card { @apply bg-gray-900/50 border border-gray-800 rounded-xl p-6; }
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<?php if ($flash): ?>
<div id="flash" class="fixed top-4 right-4 z-50 max-w-sm w-full">
<div class="flex items-start gap-3 px-4 py-3 rounded-lg border shadow-lg
<?= $flash['type'] === 'success' ? 'bg-emerald-900/60 border-emerald-500/30 text-emerald-300' : 'bg-red-900/60 border-red-500/30 text-red-300' ?>">
<span class="text-sm flex-1"><?= e($flash['message']) ?></span>
<button onclick="document.getElementById('flash').remove()" class="opacity-60 hover:opacity-100 text-lg leading-none">&times;</button>
</div>
</div>
<script>setTimeout(() => { const f = document.getElementById('flash'); if (f) f.remove(); }, 5000);</script>
<?php endif ?>