Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom 404 page #190

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+156 −1
Open

Custom 404 page #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03c2f3f
Custom 404 page
NikhilKottoli Dec 21, 2024
b627283
Merge branch 'main' into 404
yukitya-1811 Dec 26, 2024
8353a3b
Moved CSS to another file
NikhilKottoli Dec 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion corpus/corpus/urls.py
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not be required. Just having the 404 file in the HTML should work.

Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,7 @@
path("newsletter/", include("newsletter.urls")),
]

handler404 = "pages.views.custom_404"

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
3 changes: 3 additions & 0 deletions corpus/pages/views.py
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,6 @@ def sig(request, sig_name):

def farewell(request):
return render(request, "pages/farewell.html")

def custom_404(request, exception):
return render(request, "404.html", status=404)
32 changes: 32 additions & 0 deletions corpus/templates/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{% extends 'base.html' %}

{% load static %}

{% block title %}404 - Page Not Found | IEEE-NITK{% endblock %}

{% block content %}

<head>
<link rel="stylesheet" href="{% static 'css/404.css' %}">
</head>

<div class="error404-body bg-base-200 w-screen flex items-center justify-center ">
<div class="error404-container flex flex-col items-center justify-center">
<img src="{% static 'img/ieee-nitk.png' %}" alt="IEEE NITK Logo" class="light-logo">
<img src="{% static 'img/ieee-nitk-white.png' %}" alt="IEEE NITK Logo" class="dark-logo">
<div>
<div class="error404-number-dark dark-logo">404</div>
<div class="error404-number-light light-logo">404</div>
<h1 class="text-4xl text-justify flex justify-center">Page Not Found</h1>
<p class="error404-message flex items-center text-2xl mt-4">Oops! The page you are looking for seems to have wandered off.</p>
<div class="flex flex-col items-center">
<a href="/" class="error404-back-link bg-[#0056b3] text-justify fond-bold dark-logo">Return to Homepage</a>
<a href="/" class="error404-back-link bg-white text-black fond-bold light-logo">Return to Homepage</a>
<button onclick="history.back()" class="error404-back-link bg-[#0056b3] text-justify dark-logo">Go Back</button>
<button onclick="history.back()" class="error404-back-link bg-white text-black light-logo">Go Back</button>
</div>
</div>
</div>
</div>

{% endblock %}
118 changes: 118 additions & 0 deletions corpus/templates/static/css/404.css
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Too much custom CSS. Please try to use as much daisyUI, or Tailwind classes.

Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@

@keyframes ieee404-wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
@keyframes ieee404-glitch {
2%, 64% { transform: translate(2px, 0) skew(0deg); }
4%, 60% { transform: translate(-2px, 0) skew(0deg); }
62% { transform: translate(0, 0) skew(5deg); }
}

.error404-body {
height: 100vh;
font-family: 'Arial', sans-serif;
margin: 0;
overflow: hidden;
perspective: 1000px;
{% comment %} background: oklch(0.5686 0.255 257.57); {% endcomment %}
}

.error404-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 3rem;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
opacity: 0.9;
max-width: 600px;
width: 90%;
position: relative;
overflow: hidden;
animation: ieee404-float 4s ease-in-out infinite;
transition: all 0.3s ease;
}

.error404-ieee-logo {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 120px;
opacity: 0.8;
animation: ieee404-wiggle 2s infinite;
}

.error404-number-dark{
font-size: 10rem;
font-weight: bold;
background: linear-gradient(45deg, white, #7EBAE7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
margin-top: 10px;
animation: ieee404-glitch 3s infinite;
}

.error404-number-light {
font-size: 10rem;
font-weight: bold;
background: linear-gradient(45deg, #2B2B2B, #0056b3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
margin-top: 10px;
animation: ieee404-glitch 3s infinite;
}

@keyframes ieee404-fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 0.9; transform: translateY(0); }
}

.error404-back-link {
display: inline-block;
margin-top: 2rem;
padding: 12px 24px;
border-radius: 30px;
transition: all 0.3s ease;
animation: ieee404-pulse 2s infinite;
}

@keyframes ieee404-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

@media (max-width: 768px) {
.error404-container {
padding: 2rem;
width: 95%;
margin: 0 10px;
}
.error404-number {
font-size: 6rem;
margin-top: 20px;
}
.error404-message {
font-size: 1.2rem;
}
.error404-back-link {
padding: 10px 20px;
}
}

@media (max-width: 480px) {
.error404-number {
font-size: 4rem;
}
.error404-message {
font-size: 1rem;
}
.error404-back-link {
padding: 8px 16px;
}
}
Loading