mirror of
https://github.com/CoolnsX/my-website.git
synced 2025-12-20 07:15:19 +05:30
177 lines
8.0 KiB
HTML
177 lines
8.0 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="dark scroll-smooth">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{% block title %}{% endblock title %} - Coolans</title>
|
|
<link rel="icon" href="/assets/favicon.ico">
|
|
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
|
|
{% block rss %}
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path='rss.xml', trailing_slash=false) }}">
|
|
{% endblock %}
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ get_url(path='main.css') | safe }}?v={{ get_hash(path='main.css') }}"
|
|
/>
|
|
<script>
|
|
function toggleMobileMenu() {
|
|
const toggleButton = document.getElementById("toggle-menu-button");
|
|
const mobileMenu = document.getElementById("mobile-menu");
|
|
const svg = toggleButton.querySelector("svg");
|
|
mobileMenu.classList.toggle("hidden");
|
|
const isMenuOpen = !mobileMenu.classList.contains("hidden");
|
|
svg.querySelector("path").setAttribute(
|
|
"d",
|
|
isMenuOpen
|
|
? "M6 18L18 6M6 6l12 12" // X icon
|
|
: "M4 6h16M4 12h16M4 18h16" // Hamburger icon
|
|
);
|
|
}
|
|
|
|
// Hide menu on outside click
|
|
document.addEventListener("click", function(event) {
|
|
const toggleButton = document.getElementById("toggle-menu-button");
|
|
const mobileMenu = document.getElementById("mobile-menu");
|
|
const isClickInsideMenu = mobileMenu.contains(event.target);
|
|
const isClickInsideButton = toggleButton.contains(event.target);
|
|
|
|
if (!isClickInsideMenu && !isClickInsideButton) {
|
|
mobileMenu.classList.add("hidden");
|
|
const svg = toggleButton.querySelector("svg");
|
|
svg.querySelector("path").setAttribute(
|
|
"d","M4 6h16M4 12h16M4 18h16"
|
|
);
|
|
}
|
|
});
|
|
|
|
function openFullscreenImage(imgElement) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = `
|
|
fixed inset-0 bg-black bg-opacity-90 backdrop-blur-sm flex items-center justify-center z-50
|
|
transition-opacity duration-300 ease-in-out
|
|
`;
|
|
overlay.onclick = () => overlay.remove();
|
|
|
|
const fullscreenImage = document.createElement('img');
|
|
fullscreenImage.src = imgElement.src;
|
|
fullscreenImage.alt = imgElement.alt;
|
|
fullscreenImage.className = `
|
|
max-w-[90vw] max-h-[90vh] rounded-2xl shadow-2xl
|
|
transition-transform duration-500 ease-in-out scale-95 hover:scale-100
|
|
`;
|
|
|
|
overlay.appendChild(fullscreenImage);
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
let lastScroll = 0;
|
|
|
|
window.addEventListener("scroll", () => {
|
|
const nav = document.getElementById("top-header");
|
|
const currentScroll = window.pageYOffset;
|
|
|
|
if (currentScroll > lastScroll) {
|
|
nav.style.transform = "translateY(-100%)";
|
|
} else {
|
|
nav.style.transform = "translateY(0)";
|
|
}
|
|
|
|
lastScroll = currentScroll;
|
|
});
|
|
</script>
|
|
<link rel="preload" as="image" href="/assets/background.webp" type="image/webp"/>
|
|
<style>
|
|
.bg-image {
|
|
background-image: url('/assets/background.webp');
|
|
}
|
|
</style>
|
|
{% block head_extra %}{% endblock head_extra %}
|
|
</head>
|
|
|
|
<body class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300">
|
|
<!-- Blurred Background Image -->
|
|
<div class="fixed inset-0 -z-10 bg-image bg-cover bg-center"></div>
|
|
|
|
<!-- Top Navigation -->
|
|
<header id="top-header" class="sticky top-0 z-50 bg-transparent pt-2 transition-all duration-300 ease-in-out">
|
|
<div class="container mx-auto px-4 flex justify-center">
|
|
<!-- Entire Header Island -->
|
|
<div class="w-full max-w-screen-2xl flex justify-between items-center px-6 py-3">
|
|
|
|
<!-- Logo -->
|
|
<a href="/" class="text-xl font-bold text-white rounded-2xl px-6 py-2.5 bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md">
|
|
Coolans
|
|
</a>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button id="toggle-menu-button"
|
|
class="sm:hidden px-3 py-3 rounded-lg text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md"
|
|
aria-label="Toggle menu"
|
|
onclick="toggleMobileMenu()"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Nav Links -->
|
|
<ul
|
|
id="mobile-menu"
|
|
class="hidden sm:flex sm:static absolute right-10 top-full px-6 rounded-2xl bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 sm:space-x-6 flex-col sm:flex-row max-w-screen text-gray-300 sm:items-center"
|
|
>
|
|
<li>
|
|
<a href="/" class="hover:text-blue-400 block py-3">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/" class="hover:text-blue-400 block py-3">Blogs</a>
|
|
</li>
|
|
<li>
|
|
<a href="/anime/" class="hover:text-blue-400 block py-3">Anime</a>
|
|
</li>
|
|
<li>
|
|
<a href="/rss.xml" class="text-orange-400 py-3 flex">
|
|
RSS
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-1 fill-current" viewBox="0 0 24 24">
|
|
<path d="M4.26 17.63a1.63 1.63 0 1 0 0 3.26 1.63 1.63 0 0 0 0-3.26zM2 10.92v2.15a9 9 0 0 1 9 9h2.15a11.16 11.16 0 0 0-11.15-11.15zm0-5.3v2.15a14.32 14.32 0 0 1 14.31 14.3h2.15A16.47 16.47 0 0 0 2 5.62z"/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Section -->
|
|
<main class="flex-grow section py-10 relative z-10 rounded-2xl">
|
|
<div
|
|
class="container mx-auto lg:px-6 sm:px-4"
|
|
>
|
|
<div
|
|
class="p-8 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
|
|
>
|
|
{% block content %}{% endblock content %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="w-full py-4 relative z-10">
|
|
<div class="container mx-auto px-10">
|
|
<div
|
|
class="px-6 py-2 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm text-gray-400"
|
|
>
|
|
{{ now() | date(format="%Y") }} Coolans. Exhausted Presevance. No Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|