feat:custom 404 page

This commit is contained in:
coolnsx
2025-05-16 12:03:46 +05:30
parent 20955c2fc7
commit 34df846b74
4 changed files with 41 additions and 37 deletions

BIN
static/assets/404.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 456 KiB

15
templates/404.html Normal file
View File

@@ -0,0 +1,15 @@
{% extends "base.html" %}
{% block title %} Not Found {% endblock title %}
{% block content %}
<div class="flex flex-col items-center justify-center text-center min-h-[60vh] space-y-10">
<h1 class="text-5xl md:text-7xl font-extrabold text-white drop-shadow-lg">
404 Not Found
</h1>
<img src="{{ get_url(path='assets/404.webp') | safe }}?v={{ get_hash(path='assets/404.webp') }}" class="w-80 md:w-[36rem] rounded-2xl" alt="404 Image" />
<a href="/" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow transition">
Go Back Home
</a>
</div>
{% endblock content %}

View File

@@ -6,7 +6,7 @@
<title>{% block title %}{% endblock title %} - Coolans</title> <title>{% block title %}{% endblock title %} - Coolans</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="{{ get_url(path='main.css') | safe }}" href="{{ get_url(path='main.css') | safe }}?v={{ get_hash(path='main.css') }}"
/> />
<script> <script>
// Mobile menu toggle // Mobile menu toggle
@@ -27,7 +27,7 @@
<div class="fixed inset-0 bg-black/70 -z-5"></div> <div class="fixed inset-0 bg-black/70 -z-5"></div>
<!-- Top Navigation --> <!-- Top Navigation -->
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur-none py-4"> <nav class="sticky top-0 z-50 bg-transparent backdrop-blur py-4">
<div <div
class="container mx-auto px-4 flex justify-between items-center" class="container mx-auto px-4 flex justify-between items-center"
> >
@@ -100,8 +100,7 @@
<div <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" 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"
> >
&copy; {{ now() | date(format="%Y") }} Coolans. All rights &copy; {{ now() | date(format="%Y") }} Coolans. Exhausted Presevance. No Rights Reserved.
reserved.
</div> </div>
</div> </div>
</footer> </footer>

View File

@@ -1,5 +1,8 @@
{% extends "base.html" %} {% block title %}Welcome{% endblock title %} {% block {% extends "base.html" %}
content %}
{% block title %}Welcome{% endblock title %}
{% block content %}
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight"> <h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
Hi, I'm Tanveer — a Full Stack Developer & Self-Taught SysAdmin. Hi, I'm Tanveer — a Full Stack Developer & Self-Taught SysAdmin.
</h1> </h1>
@@ -86,7 +89,6 @@ content %}
</div> </div>
<script> <script>
function decodeAndFillLinks() {
const links = document.querySelectorAll(".obfuscated-link"); const links = document.querySelectorAll(".obfuscated-link");
links.forEach((link) => { links.forEach((link) => {
const encoded = link.getAttribute("data-encoded"); const encoded = link.getAttribute("data-encoded");
@@ -101,26 +103,14 @@ content %}
link.textContent = decoded; link.textContent = decoded;
return; return;
} }
if (decoded.startsWith('http')) {
// URL - set href to full URL,
// but visible text to last segment after last '/'
link.href = decoded; link.href = decoded;
// Remove trailing slash if any
const trimmed = decoded.endsWith('/') ? decoded.slice(0, -1) : decoded; const trimmed = decoded.endsWith('/') ? decoded.slice(0, -1) : decoded;
// Extract last segment after '/'
const parts = trimmed.split('/'); const parts = trimmed.split('/');
const lastSegment = parts[parts.length - 1] || decoded; const lastSegment = parts[parts.length - 1] || decoded;
link.textContent = lastSegment; link.textContent = lastSegment;
} else {
// Default fallback — just text
link.textContent = decoded;
}
}); });
}
document.addEventListener("DOMContentLoaded", decodeAndFillLinks);
</script> </script>
{% endblock content %} {% endblock content %}