1
0
mirror of https://github.com/oupala/apaxy.git synced 2025-08-17 22:31:34 +02:00

Merge pull request #114 from jordanbancino/patch-1

feat: Add styled error pages
This commit is contained in:
oupala
2018-03-01 00:31:57 +01:00
committed by GitHub
9 changed files with 204 additions and 1 deletions

View File

@@ -20,6 +20,7 @@ Apaxy may be basic, but it gives you a great deal of creative freedom when styli
* Make it pop with Javascript or jQuery.
* Add welcome messages, download instructions or copyright notices.
* Add custom mime type icons (requires editing the `.htaccess` file)
* Use custom error pages.
_Sadly, visual style is all you can work with. It's not possible to alter the generated table structure of the listing directory with Apaxy._

View File

@@ -88,7 +88,17 @@ DefaultIcon /{FOLDERNAME}/theme/icons/default.png
#
# THEME FILES
#
HeaderName /{FOLDERNAME}/theme/header.html
ReadmeName /{FOLDERNAME}/theme/footer.html
IndexStyleSheet "/{FOLDERNAME}/theme/style.css"
#
# ERROR PAGES
#
ErrorDocument 400 http://%{HTTP_HOST}/{FOLDERNAME}/theme/400.html
ErrorDocument 403 http://%{HTTP_HOST}/{FOLDERNAME}/theme/403.html
ErrorDocument 404 http://%{HTTP_HOST}/{FOLDERNAME}/theme/404.html
ErrorDocument 408 http://%{HTTP_HOST}/{FOLDERNAME}/theme/408.html
ErrorDocument 500 http://%{HTTP_HOST}/{FOLDERNAME}/theme/500.html
ErrorDocument 502 http://%{HTTP_HOST}/{FOLDERNAME}/theme/502.html

20
apaxy/theme/400.html Normal file
View File

@@ -0,0 +1,20 @@
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Error 403</title>
<link rel="shortcut icon" href="img/icon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body class="fadeDown">
<center>
<h1>Error.</h1>
<div class="errorCode">400
</div>
<p>Sorry, I don't understand what you want me to do.</p>
</center>
</body>
</html>

20
apaxy/theme/403.html Normal file
View File

@@ -0,0 +1,20 @@
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Error 403</title>
<link rel="shortcut icon" href="img/icon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body class="fadeDown">
<center>
<h1>Error.</h1>
<div class="errorCode">403
</div>
<p>You aren't allowed to be here.</p>
</center>
</body>
</html>

20
apaxy/theme/404.html Normal file
View File

@@ -0,0 +1,20 @@
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Error 404</title>
<link rel="shortcut icon" href="img/icon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body class="fadeDown">
<center>
<h1>Error.</h1>
<div class="errorCode">404
</div>
<p>I can't find what you are looking for...</p>
</center>
</body>
</html>

20
apaxy/theme/408.html Normal file
View File

@@ -0,0 +1,20 @@
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Error 403</title>
<link rel="shortcut icon" href="img/icon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body class="fadeDown">
<center>
<h1>Error.</h1>
<div class="errorCode">408
</div>
<p>I refuse to wait any longer.</p>
</center>
</body>
</html>

20
apaxy/theme/500.html Normal file
View File

@@ -0,0 +1,20 @@
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Error 500</title>
<link rel="shortcut icon" href="img/icon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body class="fadeDown">
<center>
<h1>Error.</h1>
<div class="errorCode">500
</div>
<p>I don't know what to do. This isn't your fault.</p>
</center>
</body>
</html>

20
apaxy/theme/502.html Normal file
View File

@@ -0,0 +1,20 @@
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Error 403</title>
<link rel="shortcut icon" href="img/icon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body class="fadeDown">
<center>
<h1>Error.</h1>
<div class="errorCode">502
</div>
<p>I received some invalid information from my master.</p>
</center>
</body>
</html>

View File

@@ -165,3 +165,75 @@ tr.parent a[href^="/"] {
.indexcollastmod { display: none; }
.wrapper { max-width: 100%; }
}
/*------------------------------------*\
Error pages
/*------------------------------------*/
/* Animation */
@-webkit-keyframes fadeDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeDown {
0% {
opacity: 0;
-ms-transform: translateY(-20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@-o-keyframes fadeDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeDown {
-webkit-animation:fadeDown 1s ease;
-moz-animation:fadeDown 1s ease;
-ms-animation:fadeDown 1s ease;
-o-animation:fadeDown 1s ease;
animation:fadeDown 1s ease;
}
/* Error code display */
.errorCode {
font-size: 80px;
}