aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved slightly error pages, Added card's corner triangular button

Browse Source 
Update .gitignore, 403.php, and 7 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2022-09-21 21:52:49 +02:00
parent 97336cb8b5
commit 2555400b2d
9 changed files with 210 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -13,3 +13,6 @@ resources/FontAwesomePro/
tmp/
resources/Azias/css/*.css
resources/Azias/css/*.map
resources/Azias/sass/**.css
resources/Azias/sass/**.map

47
403.php
View File

@@ -2,6 +2,7 @@
set_include_path('./commons/');
include_once 'config.php';
include_once 'langs.php';
include_once 'modals.php';
?>
<!DOCTYPE html>
<html lang="<?php echo($user_language); ?>">
@@ -17,7 +18,18 @@ include_once 'langs.php';
<meta property="og:description" content="<?php print(localize('error.403.description')); ?>"/>
</head>
<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars dark-mode" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true">
<?php include 'body-root.php'; ?>
<?php
$debuggingText = "Referrer: " . (
array_key_exists('HTTP_REFERER', $_SERVER) ? htmlspecialchars($_SERVER['HTTP_REFERER']) : "<i>Not present in request !</i>"
) . "<br>";
$debuggingText .= "<br>TODO: Add more info once the cache if properly configured for 4xx errors !";
add_code_modal(
"http-error",
localize('modal.title.debugging'),
$debuggingText
);
include 'body-root.php';
?>
<div class="page-wrapper with-sidebar with-navbar-fixed-bottom">
<?php include 'sidebar.php'; ?>
<div class="content-wrapper">
@@ -28,12 +40,9 @@ include_once 'langs.php';
</h2>
<?php include 'header-lang.php'; ?>
</div>
<div class="row">
<div class="col-12 d-block">
<div class="content mb-0">
<div class="card p-0 m-0 card-bkgd">
<div class="content m-0">
<div class="px-card py-10 border-bottom px-20 bg-light-lm bg-very-dark-dm">
<div class="content mx-auto w-lg-p90">
<div class="card p-0 m-0">
<div class="px-card py-10 border-bottom px-20">
<div class="container-fluid">
<div class="row">
<div class="col-1 text-center"><i class="fad fa-exclamation-triangle"></i></div>
@@ -44,18 +53,28 @@ include_once 'langs.php';
</div>
</div>
</div>
<div class="content m-20">
<h2 class="content-title font-size-20 mb-10"></h2>
<p class="ml-lg-10 mt-lg-5 text-center"><?php print(localize("error.403.description")); ?></p>
<div class="p-20 bg-light-lm rounded-bottom bg-very-dark title-bkgd text-center">
<p class="font-size-18 m-0 font-weight-semi-bold">
<?php print(localize("error.403.description")); ?>
</p>
<hr class="my-15">
<p class="font-size-14 m-0"><!--no hr => mt-lg-10 mt-lg-5-->
<?php print(localize("error.403.explanation")); ?>
</p>
<!--<hr class="my-20">
<a href="/" class="js-set-previous-url">
<button class="btn btn-primary" type="button">Go back to previous page</button>
</a>-->
<a href="#<?php echo(get_modal_id("http-error")); ?>">
<div class="container-card-fold secondary">
<i class="fad fa-bug"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TODO: Add button to go back !-->
</div>
</div>
<?php include 'footer.php'; ?>
</div>
<script src="/resources/HalfMoon/1.1.1/js/halfmoon.min.js"></script>

49
404.php
View File

@@ -2,6 +2,7 @@
set_include_path('./commons/');
include_once 'config.php';
include_once 'langs.php';
include_once 'modals.php';
?>
<!DOCTYPE html>
<html lang="<?php echo($user_language); ?>">
@@ -17,7 +18,18 @@ include_once 'langs.php';
<meta property="og:description" content="<?php print(localize('error.404.description')); ?>"/>
</head>
<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars dark-mode" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true">
<?php include 'body-root.php'; ?>
<?php
$debuggingText = "Referrer: " . (
array_key_exists('HTTP_REFERER', $_SERVER) ? htmlspecialchars($_SERVER['HTTP_REFERER']) : "<i>Not present in request !</i>"
) . "<br>";
$debuggingText .= "<br>TODO: Add more info once the cache if properly configured for 4xx errors !";
add_code_modal(
"http-error",
localize('modal.title.debugging'),
$debuggingText
);
include 'body-root.php';
?>
<div class="page-wrapper with-sidebar with-navbar-fixed-bottom">
<?php include 'sidebar.php'; ?>
<div class="content-wrapper">
@@ -28,34 +40,41 @@ include_once 'langs.php';
</h2>
<?php include 'header-lang.php'; ?>
</div>
<div class="row">
<div class="col-12 d-block">
<div class="content mb-0">
<div class="card p-0 m-0 card-bkgd">
<div class="content m-0">
<div class="px-card py-10 border-bottom px-20 bg-light-lm bg-very-dark-dm">
<div class="content mx-auto w-lg-p90">
<div class="card p-0 mx-0">
<div class="px-card py-10 border-bottom px-20">
<div class="container-fluid">
<div class="row">
<div class="col-1 text-center"><i class="fad fa-exclamation-triangle"></i></div>
<div class="col-10 text-center">
<h2 class="card-title font-size-18 m-0"><?php print(localize("error.404.title")); ?></h2>
<h3 class="card-title font-size-18 m-0"><?php print(localize("error.404.title")); ?></h3>
</div>
<div class="col-1 text-center"><i class="fad fa-exclamation-triangle"></i></div>
</div>
</div>
</div>
<div class="content m-20">
<h2 class="content-title font-size-20 mb-10"></h2>
<p class="ml-lg-10 mt-lg-5 text-center"><?php print(localize("error.404.description")); ?></p>
<div class="p-20 bg-light-lm rounded-bottom bg-very-dark title-bkgd text-center">
<p class="font-size-18 m-0 font-weight-semi-bold">
<?php print(localize("error.404.description")); ?>
</p>
<hr class="my-15">
<p class="font-size-14 m-0"><!--no hr => mt-lg-10 mt-lg-5-->
<?php print(localize("error.404.explanation")); ?>
</p>
<!--<hr class="my-20">
<a href="/" class="js-set-previous-url">
<button class="btn btn-primary" type="button">Go back to previous page</button>
</a>-->
<a href="#<?php echo(get_modal_id("http-error")); ?>">
<div class="container-card-fold secondary">
<i class="fad fa-bug"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TODO: Add button to go back !-->
</div>
</div>
<?php include 'footer.php'; ?>
</div>
<script src="/resources/HalfMoon/1.1.1/js/halfmoon.min.js"></script>

15
commons/headers.php
View File

@@ -18,9 +18,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<link rel="stylesheet" href="/resources/HalfMoon/1.1.1/css/halfmoon-variables.min.css" />
<link rel="stylesheet" href="/resources/FontAwesomePro/5.15.3/css/all.min.css">
<link rel="stylesheet" href="/resources/Azias/css/nibblepoker.lu.min.css">
<link rel="preload" href="/resources/Quantum/Quantum.otf" as="font">
<link rel="preload" href="/resources/FontAwesomePro/5.15.3/webfonts/fa-duotone-900.woff2" as="font">
<link rel="preload" href="/resources/FontAwesomePro/5.15.3/webfonts/fa-brands-400.woff2" as="font">
<link rel="preload" href="/resources/FontAwesomePro/5.15.3/webfonts/fa-solid-900.woff2" as="font">
<link rel="preload" href="/resources/Azias/imgs/3px-tile-0.1.png" as="image">
<link rel="preload" href="/resources/Azias/imgs/3px-tile.png" as="image">
<?php
// Causes Chrome to bitch about the cross-origin header.
// <link rel="preload" href="/resources/Quantum/Quantum.otf" as="font">
// <link rel="preload" href="/resources/FontAwesomePro/5.15.3/webfonts/fa-duotone-900.woff2" as="font">
// <link rel="preload" href="/resources/FontAwesomePro/5.15.3/webfonts/fa-brands-400.woff2" as="font">
// <link rel="preload" href="/resources/FontAwesomePro/5.15.3/webfonts/fa-solid-900.woff2" as="font">
// <link rel="preload" href="/resources/Azias/imgs/3px-tile-0.1.png" as="image">
// <link rel="preload" href="/resources/Azias/imgs/3px-tile.png" as="image">
?>

38
commons/modals.php Normal file
View File

@@ -0,0 +1,38 @@
<?php
// Making sure the file is included and not accessed directly.
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
header('HTTP/1.1 403 Forbidden');
die();
}
function get_modal_id(string $id): string {
return "modal-".$id;
}
function add_code_modal(string $id, string $title, string $text) {
echo('<div class="modal" id="'.get_modal_id($id).'" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content p-0">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true"><i class="fad fa-times"></i></span>
</a>
<h5 class="modal-title my-10 text-center">'.$title.'</h5>
<hr class="my-15">
<div class="card p-0 m-0 bg-very-dark mx-15">
<p id="modal-text-'.$id.'" class="text-monospace mx-15">'.$text.'</p>
</div>
<div class="text-right text-center my-15">
<a href="#" class="btn mr-20" role="button">'.localize("generic.button.close").'</a>
<a href="#" class="btn btn-primary disabled" role="button">'.localize("generic.button.copy").'</a>
</div>
</div>
</div>
</div>');
}
?>

18
commons/strings.json
View File

@@ -101,8 +101,10 @@
"error.4xx.button.back": "Go back",
"error.403.title": "403 Error",
"error.403.description": "Access to the requested resource is forbidden !",
"error.403.explanation": "If this problem persists, you can contact us through avenues given on the <a href=\"/contact/\">Contact</a> page.",
"error.404.title": "404 Error",
"error.404.description": "The requested resource couldn't be found on the server !",
"error.404.explanation": "If this problem persists, you can contact us through avenues given on the <a href=\"/contact/\">Contact</a> page.",
"error.content.title.generic": "Content error",
"error.content.title.empty": "No content found",
@@ -184,7 +186,12 @@
"contact.tox.main": "Main account:",
"contact.tox.secondary": "Backup account:",
"contact.tox.button.open": "Open in Tox Client",
"contact.tox.button.copy": "Copy to clipboard"
"contact.tox.button.copy": "Copy to clipboard",
"generic.button.close": "Close",
"generic.button.copy": "Copy to clipboard",
"modal.title.debugging": "Debugging information"
},
"fr": {
"home.title.nav": "Accueil",
@@ -284,8 +291,10 @@
"error.4xx.button.back": "Retourner en arrière",
"error.403.title": "Erreur 403",
"error.403.description": "L'accès à la ressource demandée est interdit !",
"error.403.explanation": "Si ce problème persiste, vous pouvez nous contacter via une des avenues données sur la page <a href=\"/contact/\">Contact</a>.",
"error.404.title": "Erreur 404",
"error.404.description": "La ressource demandée est introuvable sur le serveur !",
"error.404.explanation": "Si ce problème persiste, vous pouvez nous contacter via une des avenues données sur la page <a href=\"/contact/\">Contact</a>.",
"error.content.title.generic": "Erreur de contenu",
"error.content.title.empty": "Aucun contenu trouvé",
@@ -358,7 +367,12 @@
"contact.tox.main": "Compte principal:",
"contact.tox.secondary": "Compte secondaire:",
"contact.tox.button.open": "Ouvrir dans un client Tox",
"contact.tox.button.copy": "Copier dans le presse-papier"
"contact.tox.button.copy": "Copier dans le presse-papier",
"generic.button.close": "Fermer",
"generic.button.copy": "Copier dans le presse-papier",
"modal.title.debugging": "Informations de débogage"
},
"lb": {
"home.title.nav": "Doheem",

10
resources/Azias/js/nibblepoker.lu.js
View File

@@ -4,13 +4,13 @@ document.getElementById('button-sidebar').addEventListener("click", () => {
// TODO: Fix the slide size in gliders
});
// Adding the last URL to every a element with the 'js-set-previous-url' class.
/*document.querySelectorAll("a.js-set-previous-url").forEach(element => {
// Adding the last URL to every "a" element with the 'js-set-previous-url' class.
document.querySelectorAll("a.js-set-previous-url").forEach(element => {
element.href = document.referrer;
element.addEventListener('click', function(e) {
window.history.go(-2);
//element.addEventListener('click', function(e) {
// window.history.go(-2);
//});
});
});*/
// TOX ID copiers. (Contact page)
if(document.getElementById('button-copy-tox-id-main') != null) {

56
resources/Azias/scss/halfmoon/element/card.scss Normal file
View File

@@ -0,0 +1,56 @@
/* Halfmoon > Elements > Cards */
.container-card-fold {
position: absolute;
bottom: 0;
right: 0;
width: 3rem;
height: 3rem;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
border-radius: var(--base-border-radius) !important;
//border-bottom-right-radius: var(--base-border-radius) !important;
overflow: hidden;
background-color: deeppink;
opacity: 0.4;
// https://codepen.io/setswon/pen/VJeXXq
// Using a value of ~0.35 feels sluggish.
transition: width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
user-select: none;
&.secondary {
color: var(--dm-button-secondary-text-color);
background-color: var(--dm-button-secondary-bg-color);
background-image: var(--dm-button-secondary-bg-image);
border-color: var(--dm-button-secondary-border-color);
}
&.danger {
color: var(--dm-button-secondary-text-color); // White icons looks like shit.
background-color: var(--dm-button-danger-bg-color);
background-image: var(--dm-button-danger-bg-image);
border-color: var(--dm-button-danger-border-color);
}
i {
position: absolute;
right: 0.2rem;
bottom: 0.2rem;
transition: right 0.25s ease, bottom 0.25s ease;
transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
}
&:hover {
width: 3.5rem;
height: 3.5rem;
opacity: 0.8;
i {
bottom: 0.325em;
right: 0.325rem;
}
}
}

1
resources/Azias/scss/nibblepoker.lu.scss
View File

@@ -18,6 +18,7 @@
@import 'halfmoon/page/contact';
/* Halfmoon > Elements */
@import 'halfmoon/element/card';
@import 'halfmoon/element/code';
@import 'halfmoon/element/containers';
@import 'halfmoon/element/glider';