1
Fork 0

Merge pull request 'Update Error Page Design' (#66) from Korbs/poketube:main into main

Reviewed-on: https://codeberg.org/ashley/poke/pulls/66
This commit is contained in:
Ashley //// 2024-02-25 06:37:04 +00:00
commit e18f227999
4 changed files with 106 additions and 78 deletions

View file

@ -1,78 +1,4 @@
<!--
This Source Code Form is subject to the terms of the GNU General Public License:
Copyright (C) 2021-2022 POKETUBE (https://codeberg.org/Ashley/poketube)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
-->
<!DOCTYPE html><html>
<head>
<title>1984!!1 - PokeTube</title>
<link href=/css/app-cdn.min.css rel=stylesheet>
<link href=/css/app.main.css rel=stylesheet>
<link href="/css/watch.main.css?v=56" rel=stylesheet>
<link href="/css/watch-util.css" rel=stylesheet>
<link href="https://fonts.poketube.fun/css/fonts.css" rel=stylesheet>
<link href="/css/watch-navbar.css?v=56" rel=stylesheet>
<link href=https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css rel=stylesheet>
<base target="_top">
<link href=https://poketube.fun/css/yt-ukraine.svg rel=icon>
<style>
body{
background:#111;
margin: auto;
transform: translateY(13em)
}
p,a,h1{
text-align:center;
color:#fff;
}
nav,error-page,div{
justify-content: center;
background: #111
}
</style>
</head>
<body>
<div id="error-page">
<div id="error-page-content" align="center">
<h1 style="color:#fff;font-family:'PokeTube Flex',sans-serif;font-weight:900;white-space:yes;font-style: italic;font-size: 45px;" align="center">
404!!1
</h1>
<h3>
Very <a href="https://poketube.fun/watch?v=Yw8mcm3k1AQ" style="color:#fff">1984</a> Innit? I dont think that this webpage exist :p u can search for something else~
</h3>
</div>
<nav>
<div class="middle">
<form action=/search><input class=search-bar placeholder="Search owo " autocomplete="on" id=fname name=query style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
<button class="btn btn-success" type=submit><i class="fa-light fa-search"></i></button>
</form>
</div></nav>
</div>
<img src="https://t.poketube.fun/t/rep.gif?from=param" style="width: 0;visibility: hidden;" id="404_page">
</body>
</html>
<%- include('error.ejs', {
error: "404",
description: "Very 1984 Innit? I dont think this webpage exist :p u can search for something else~ "
}) %>

4
html/502.ejs Normal file
View file

@ -0,0 +1,4 @@
<%- include('error.ejs', {
error: "502",
description: "An error has occurred. Try again or come back later."
}) %>

94
html/error.ejs Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PokeTube</title>
<meta content="#111111" name="theme-color">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<meta name="darkreader-lock">
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<link rel="manifest" href="/manifest.json">
</head>
<body>
<p id="abstract"><%=error%></p>
<div class="error">
<h2><%=error%></h2>
<p><%=description%></p>
</div>
<div class="error-footer">
<a href="https://poketube.fun/game-hub">Games</a>
<a href="https://codeberg.org/ashley/poke/">Source Code</a>
<a href="https://status.poketube.fun/">Status</a>
</div>
</body>
</html>
<style>
body {
margin: auto;
background: #111111;
color: white;
font-family: arial;
max-width: 600px;
}
body::before {
background: linear-gradient(0deg, rgba(115, 32, 67, 1.0), rgba(17, 17, 17, 1.0));
background-repeat: no-repeat;
content: "";
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
transition: 1s height;
}
h2 {
font-size: 42px;
}
p#abstract {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 500px;
margin: 0px;
font-weight: bold;
opacity: 0.005;
pointer-events: none;
transition: 1s transform;
}
@media only screen and (max-width: 790px) {
p#abstract {transform: translate(-50%, -50%) rotate(90deg) !important}
}
.error {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
cursor: default;
max-width: 600px;
width: 100%;
}
.error-footer {
position: fixed;
bottom: 24px;
width: 100%;
max-width: 600px;
text-align: center;
}
.error-footer a {
color: #AC8FA5;
text-decoration: none;
margin: 0px 12px;
}
.error-footer a:hover {
color: #d69cc8;
}
</style>

View file

@ -48,6 +48,10 @@ module.exports = function (app, config, renderTemplate) {
}
});
app.get("/502", function (req, res) {
renderTemplate(res, req, "502.ejs");
});
app.get("/143", function (req, res) {
var number_easteregg = getRandomArbitrary(0, 143);