Skip to content

Commit

Permalink
Add custom error 404 page
Browse files Browse the repository at this point in the history 
Added a 404 page template along with its CSS styling
Added the server-side class-based error 404 handling
Closes #73
  • Loading branch information
@elskhn @divyam3897
elskhn authored and divyam3897 committed Oct 12, 2017
1 parent d31056a commit d3aa314
Show file tree
Hide file tree
Showing 5 changed files with 306 additions and 2 deletions.
6 changes: 5 additions & 1 deletion home/urls.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
from django.conf.urls import url
from django.conf.urls import url, handler404
from . import views

app_name='home'
urlpatterns = [
url(r'^$', views.Home.as_view(), name = 'home'),
url(r'^resources/', views.Resources.as_view(), name = 'resources')
]

handler404 = 'Template404.as_view()'

2 changes: 2 additions & 0 deletions home/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
from django.views.generic import TemplateView

class Template404(TemplateView):
template_name = "404.html"

class Home(TemplateView):
template_name = 'home/home.html'
Expand Down
2 changes: 1 addition & 1 deletion pclubWebsite/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
SECRET_KEY = '$4p#tsin((&rnm!%696^2xutz_-n5k)o&mnwg3z*^f7&--99h&'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
DEBUG = False

ALLOWED_HOSTS = ['*']

Expand Down
268 changes: 268 additions & 0 deletions staticFiles/404.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
main,
main>div {
align-items: center
}
body,
main,
main>div {
align-content: center
}
.crack,
main>div,
main>div span,
main>div svg {
position: relative
}
a.main-link {
display: block;
cursor: pointer;
animation: pulseColor 1s linear 3.1s forwards;
font-weight: 500;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
text-decoration: none;
color: #fff!important
}
main,
main>div {
display: flex
}
b:hover {
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
color: #3187e2
}
a:active b {
color: #aaa
}
svg {
width: 50px;
height: auto
}
.crack {
z-index: 4;
margin-left: -50px
}
.crack polyline {
fill: none;
stroke: #3187e2;
stroke-width: 10px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1649.099;
stroke-dashoffset: 1649.099;
animation: drawStroke 1.5s ease-out .5s forwards
}
main {
justify-content: center;
margin: 0 auto;
margin-bottom: 24%!important
}
main>div {
overflow: hidden
}
main>div svg {
z-index: 1
}
main>div svg polygon {
fill: #3a3a3a
}
main>div span {
display: block;
z-index: 0;
padding: 0 12px;
line-height: 1.4
}
main>div:first-child {
text-align: right;
z-index: 1
}
main>div:first-child span:first-child {
opacity: 0;
transform: translateX(100%);
animation: translateLeft 1s linear 1.25s forwards
}
main>div:first-child span:last-child {
opacity: 0;
transform: translateX(100%);
animation: translateLeft 1s linear 1.45s forwards
}
main>div:first-child svg polygon {
animation: removeFill 10ms ease-out 1.6s forwards
}
main>div:last-child {
z-index: 0;
margin-left: -50px;
text-align: left
}
main>div:last-child span:first-child {
opacity: 0;
transform: translateX(-100%);
animation: translateRight 1s linear 1.65s forwards
}
main>div:last-child span:last-child {
opacity: 0;
transform: translateX(-100%);
animation: translateRight 1s linear 1.85s forwards
}
@keyframes drawStroke {
0% {
stroke-dashoffset: 1649.099
}
100% {
stroke-dashoffset: 0
}
}
@keyframes removeFill {
0% {
fill: #3a3a3a
}
100% {
fill: rgba(58, 58, 58, 0)
}
}
@keyframes pulseColor {
0%, 100%, 50% {
color: #fff
}
25%,
75% {
color: #3187e2
}
}
@keyframes translateLeft {
0% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1);
opacity: 1
}
7.61% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1)
}
11.41% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1)
}
15.12% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1)
}
18.92% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1)
}
22.72% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1)
}
30.23% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1)
}
50.25% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1)
}
70.27% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .519, 0, 0, 1)
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1
}
}
@keyframes translateRight {
0% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1);
opacity: 1
}
7.61% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1)
}
11.41% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1)
}
15.12% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1)
}
18.92% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1)
}
22.72% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1)
}
30.23% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1)
}
50.25% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1)
}
70.27% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.519, 0, 0, 1)
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 1
}
}
::selection {
background-color: #adadad;
color: #fff
}
::-moz-selection {
background-color: #adadad;
color: #fff
}
::-o-selection {
background-color: #adadad;
color: #fff
}
::-ms-selection {
background-color: #adadad;
color: #fff
}
::-webkit-selection {
background-color: #adadad;
color: #fff
}
*,
:after,
:before {
box-sizing: border-box
}
* {
-webkit-tap-highlight-color: transparent;
transform-style: preserve-3d
}
body,
html {
height: 100%
}
body {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
background: #3a3a3a;
color: #fff;
font-family: Arial, sans-serif;
font-size: 24px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
margin: 0;
text-align: center
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .34)
}
.fa {
-webkit-animation: none!important;
-moz-animation: none!important;
-o-animation: none!important;
-ms-animation: none!important;
animation: none!important;
color: #3187e2
}
30 changes: 30 additions & 0 deletions templates/404.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Error 404 | Programming Club {% endblock %}
{% block content %}
<head>
<link rel='stylesheet' href="{% static '404.css' %}">
<style type="text/css">
.navbar{
display: none !important;
}
</style>
</head>
<main>
<div>
<div> <span>Error&nbsp;404</span> <span>page&nbsp;not&nbsp;found</span> </div>
<svg viewBox="0 0 200 600">
<polygon points="118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 200 591.044514 200 8"></polygon>
</svg>
</div>
<svg class="crack" viewBox="0 0 200 600">
<polyline points="118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514"></polyline>
</svg>
<div>
<svg viewBox="0 0 200 600">
<polygon points="118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 0 591.044514 0 8"></polygon>
</svg>
<div> <span>Would you like to&nbsp;visit our&#160;</span> <span> <a class = "main-link" href="https://pclubuiet.herokuapp.com/home/"> <b>home page?</b> </a> </span> </div>
</div>
</main>
{% endblock %}

0 comments on commit d3aa314

Please sign in to comment.