mirror of
https://github.com/CoolnsX/my-website.git
synced 2025-12-20 07:15:19 +05:30
150 lines
6.1 KiB
HTML
150 lines
6.1 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">
|
|
{% 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 defer>
|
|
// Mobile menu toggle
|
|
function toggleMobileMenu() {
|
|
const menu = document.getElementById("mobile-menu");
|
|
menu.classList.toggle("hidden");
|
|
}
|
|
|
|
document.addEventListener("click", function (event) {
|
|
const menu = document.getElementById("mobile-menu");
|
|
const button = event.target.closest("button[aria-label='Toggle menu']");
|
|
|
|
// If menu is open, and click is outside menu and button — close it
|
|
if (
|
|
!menu.classList.contains("hidden") &&
|
|
!menu.contains(event.target) &&
|
|
!button
|
|
) {
|
|
menu.classList.add("hidden");
|
|
}
|
|
});
|
|
|
|
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);
|
|
}
|
|
</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 blur-md"></div>
|
|
|
|
<div class="fixed inset-0 bg-black/70 -z-5"></div>
|
|
|
|
<!-- Top Navigation -->
|
|
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur py-4">
|
|
<div
|
|
class="container mx-auto px-4 flex justify-between items-center"
|
|
>
|
|
<!-- Logo Island -->
|
|
<div
|
|
class="px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md"
|
|
>
|
|
<a href="/" class="text-xl font-bold text-white">Coolans</a>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
class="sm:hidden px-3 py-3 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
|
|
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 Island -->
|
|
<ul
|
|
id="mobile-menu"
|
|
class="hidden sm:flex sm:static absolute right-4 top-full mt-2 sm:mt-0 px-6 py-3 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 text-gray-300 sm:items-center"
|
|
>
|
|
<li>
|
|
<a
|
|
href="/"
|
|
class="hover:text-blue-400 block py-2 sm:py-0"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/blog"
|
|
class="hover:text-blue-400 block py-2 sm:py-0"
|
|
>Blogs</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content Section -->
|
|
<main class="flex-grow section py-10 relative z-10 rounded-2xl">
|
|
<div
|
|
class="container mx-auto 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-10 relative z-10">
|
|
<div class="container mx-auto px-4">
|
|
<div
|
|
class="px-6 py-4 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>
|