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

View File

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