Proyecto App Windows
This commit is contained in:
@@ -0,0 +1,147 @@
|
||||
---
|
||||
const navLinks = [
|
||||
{ label: 'Features', href: '/iptvnator/#features' },
|
||||
{ label: 'Screenshots', href: '/iptvnator/#screenshots' },
|
||||
{ label: 'Download', href: '/iptvnator/#download' },
|
||||
{ label: 'Blog', href: '/iptvnator/blog/' },
|
||||
];
|
||||
---
|
||||
|
||||
<header
|
||||
id="site-header"
|
||||
class="fixed top-0 z-50 w-full transition-all duration-500"
|
||||
>
|
||||
<div class="absolute inset-0 border-b border-surface-700/0 bg-surface-950/0 backdrop-blur-none transition-all duration-500" id="header-bg"></div>
|
||||
|
||||
<nav class="relative mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
|
||||
<!-- Logo -->
|
||||
<a href="/iptvnator/" class="flex items-center gap-3 group">
|
||||
<img
|
||||
src="/iptvnator/favicon.ico"
|
||||
alt="IPTVnator logo"
|
||||
class="h-7 w-7 transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
<span class="font-display text-xl font-semibold tracking-tight text-surface-50">
|
||||
IPTVnator
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop nav -->
|
||||
<div class="hidden items-center gap-8 md:flex">
|
||||
{
|
||||
navLinks.map((link) => (
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-[13px] font-medium uppercase tracking-[0.12em] text-surface-400 transition-colors duration-200 hover:text-accent-400"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Right side actions -->
|
||||
<div class="hidden items-center gap-4 md:flex">
|
||||
<a
|
||||
href="https://github.com/4gray/iptvnator"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-surface-500 transition-colors hover:text-surface-200"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/4gray/iptvnator/releases/latest"
|
||||
class="rounded-lg border border-accent-500/30 bg-accent-500/10 px-4 py-2 text-[13px] font-medium text-accent-400 transition-all duration-200 hover:border-accent-400/50 hover:bg-accent-500/20 hover:text-accent-300"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
id="mobile-menu-btn"
|
||||
class="inline-flex items-center justify-center rounded-lg p-2 text-surface-400 transition-colors hover:text-surface-100 md:hidden"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg id="menu-icon-open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg id="menu-icon-close" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="hidden border-t border-dashed border-surface-700/60 bg-surface-950/98 backdrop-blur-2xl md:hidden"
|
||||
>
|
||||
<div class="space-y-1 px-6 py-5">
|
||||
{
|
||||
navLinks.map((link) => (
|
||||
<a
|
||||
href={link.href}
|
||||
class="block rounded-lg px-3 py-2.5 text-[13px] font-medium uppercase tracking-[0.12em] text-surface-400 transition-colors hover:bg-surface-800/50 hover:text-accent-400"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<div class="flex items-center gap-3 pt-3">
|
||||
<a
|
||||
href="https://github.com/4gray/iptvnator"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 rounded-lg px-3 py-2.5 text-[13px] font-medium text-surface-400 transition-colors hover:text-surface-200"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/4gray/iptvnator/releases/latest"
|
||||
class="flex-1 rounded-lg border border-accent-500/30 bg-accent-500/10 px-3 py-2.5 text-center text-[13px] font-medium text-accent-400 transition-all hover:border-accent-400/50 hover:bg-accent-500/20"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
// Mobile menu toggle
|
||||
const btn = document.getElementById('mobile-menu-btn');
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
const iconOpen = document.getElementById('menu-icon-open');
|
||||
const iconClose = document.getElementById('menu-icon-close');
|
||||
|
||||
btn?.addEventListener('click', () => {
|
||||
const isHidden = menu?.classList.toggle('hidden');
|
||||
iconOpen?.classList.toggle('hidden', !isHidden);
|
||||
iconClose?.classList.toggle('hidden', isHidden);
|
||||
});
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.getElementById('site-header');
|
||||
const headerBg = document.getElementById('header-bg');
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scroll = window.scrollY;
|
||||
if (scroll > 50) {
|
||||
headerBg?.classList.remove('border-surface-700/0', 'bg-surface-950/0', 'backdrop-blur-none');
|
||||
headerBg?.classList.add('border-surface-700/40', 'bg-surface-950/85', 'backdrop-blur-xl');
|
||||
} else {
|
||||
headerBg?.classList.add('border-surface-700/0', 'bg-surface-950/0', 'backdrop-blur-none');
|
||||
headerBg?.classList.remove('border-surface-700/40', 'bg-surface-950/85', 'backdrop-blur-xl');
|
||||
}
|
||||
lastScroll = scroll;
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user