Skip to content

Commit 62a3485

Browse files
jxmotjxmot
authored
Merge pull request #3 from jxmot/20220417-updates
Background options
2 parents 6e53bbd + 9e4721a commit 62a3485

File tree

5 files changed

+119
-27
lines changed

5 files changed

+119
-27
lines changed

‎README.md

+30-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,26 @@ This repository contains a "generic" HTTP error page. It's written in PHP/HTML a
55
## Features
66

77
* A single file for all 40X HTTP errors
8-
* Background image(s) are random and selected from a "pool" of error images when an error page is accessed
8+
* Two options for the page background -
9+
* A background image, randomly selected from a "pool" of images.
10+
* A moving gradient of four random colors.
911
* All files (*except* `.htaccess`) are kept in a single folder
1012
* Easy to copy to a website and use. You will only need to edit the `.htaccess` file
1113
* An option to redirect automatically to a different page
1214

15+
Optional Page Backgrounds:
16+
17+
<div align="center">
18+
<figure>
19+
<!-- NOTE: When Github renders the images it will REMOVE the "margin", and ADD "max-width:100%" -->
20+
<img src="./mdimg/sshot-bgimg.jpg" style="width:25%;border: 2px solid black;margin-right: 1rem;"; alt="Screen Shot of Error Page with an image background"/>
21+
<img src="./mdimg/sshot-bggrad.jpg" style="width:25%;border: 2px solid black;margin-right: 1rem;"; alt="Error Page with a moving gradient background"/>
22+
<br>
23+
<figcaption><strong>Random Image and Random Color Gradient Background</strong></figcaption>
24+
</figure>
25+
</div>
26+
<br>
27+
1328
# Installation
1429

1530
Two installation locations are possible. The first is a "local" location on an PC or NAS hosted HTTP server, and the second is on a "live" server.
@@ -30,10 +45,10 @@ At the top of `httperror.php` you find this -
3045

3146
```php
3247
// uncomment for testing
33-
//define('_DEBUG', true);
48+
define('_DEBUG', false);
3449
```
3550

36-
Uncomment the `//define('_DEBUG', true);` line and "debug" will be active. You can then load the page from the server and a `404` error will be simulated.
51+
Change `false` to `true` and "debug" will be active. You can then load the page from the server and a `404` error will be simulated.
3752

3853
### Folder Junctions
3954

@@ -123,6 +138,18 @@ To see the error page working open your browser and go to -
123138

124139
You should see a "400" error page.
125140

141+
## Changing Backgrounds
142+
143+
Near the top of the `httperror.php` file:
144+
145+
```
146+
// can't have both!!
147+
define('_IMG_POOL', false);
148+
define('_GRADIENT', true);
149+
```
150+
151+
Set `_IMG_POOL` or `_GRADIENT` to `true` to select that background type.
152+
126153
# Development Notes
127154

128155
* Development Environment:

‎errpages/httperror.css

+23-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,29 @@ body{
1818
color:yellow !important;
1919
}
2020

21+
.site-bg-image {
22+
z-index: -1;
23+
-webkit-background-size: cover;
24+
-moz-background-size: cover;
25+
-o-background-size: cover;
26+
background-size:cover;
27+
}
28+
29+
/*
30+
Moving Gradient Background
31+
*/
32+
@keyframes bg-gradient {
33+
0% {
34+
background-position: 0% 50%;
35+
}
36+
50% {
37+
background-position: 100% 50%;
38+
}
39+
100% {
40+
background-position: 0% 50%;
41+
}
42+
}
43+
2144
/*
2245
Box styling
2346
*/
@@ -26,7 +49,6 @@ body{
2649
margin-left: 10%;
2750
margin-bottom:10%;
2851

29-
/* border: 3px solid yellow; */
3052
background-color: rgba(79, 79, 79, 0.79);
3153
-webkit-backdrop-filter: blur(3px);
3254
backdrop-filter: blur(3px);
@@ -106,7 +128,6 @@ body{
106128
margin-bottom:10%;
107129
}
108130
.httperror-heading {
109-
110131
font-size:32px;
111132
}
112133
}

‎errpages/httperror.php

+66-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<?php
2-
// uncomment for testing
3-
//define('_DEBUG', true);
2+
// set to true for testing
3+
define('_DEBUG', false);
4+
5+
// can't have both!!
6+
define('_IMG_POOL', false);
7+
define('_GRADIENT', true);
48

59
// (is part of the name for the image pool file)
610
define('PAGE_ID', 'httperror');
@@ -113,15 +117,17 @@ function isLive() {
113117
}
114118

115119
if(isLive() === true) {
116-
define('_BASE_PATH', '');
120+
define('_BASE_PATH', '.');
117121
} else {
118122
// edit as needed, this will be used if the
119123
// page is being served locally.
120124
define('_BASE_PATH', '/tests/httperror');
121125
}
122126

123-
$imagepool = './' . PAGE_ID . '_imagepool.php';
124-
require_once $imagepool;
127+
if(defined('_IMG_POOL') && _IMG_POOL === true) {
128+
$imagepool = './' . PAGE_ID . '_imagepool.php';
129+
require_once $imagepool;
130+
}
125131

126132
// this will help defeat forced caching, like some android
127133
// browsers. they even ignore the anti-caching meta tags.
@@ -135,29 +141,66 @@ function isLive() {
135141
<meta name="robots" content="noindex,nofollow">
136142
<meta name="author" content="Jim Motyl - github.com/jxmot"/>
137143
<link href="/favicon.ico" rel="icon" type="image/ico" />
144+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
145+
<meta http-equiv="Pragma" content="no-cache">
146+
<meta http-equiv="Expires" content="0">
138147
<?php
139-
// this will auto-redirect if redirect_to contains a URL
140-
if(($redirect_to !== '') && (!defined('_DEBUG') || _DEBUG === false)) {
141-
echo '<meta http-equiv="Refresh" content="' . $redirect_delay . '; url=' . $redirect_to . '">';
142-
}
148+
// this will auto-redirect if redirect_to contains a URL
149+
if(($redirect_to !== '') && (!defined('_DEBUG') || _DEBUG === false)) {
150+
echo ' <meta http-equiv="Refresh" content="' . $redirect_delay . '; url=' . $redirect_to . '">';
151+
}
152+
153+
function randColor() {
154+
return '#' . str_pad(dechex(rand(0, 16777215)+rand(0, 255)), 6, '0', STR_PAD_LEFT);
155+
}
156+
157+
$rcolors = '';
158+
if(defined('_GRADIENT') && _GRADIENT === true) {
159+
$rcolors = randColor() . ',' . randColor() . ',' . randColor() . ',' . randColor();
160+
}
161+
162+
$animenab = '';
163+
164+
if(defined('_GRADIENT') && _GRADIENT === true) {
165+
$animenab = " animation: bg-gradient 10s ease infinite;\n";
166+
} else {
167+
$animenab = " /* _GRADIENT is off */\n";
168+
}
143169
?>
144170
<title>OOPS! : <?php echo $error_code;?></title>
145171

146172
<link rel="stylesheet" href="<?php echo _BASE_PATH;?>/errpages/reseter.css<?php echo $randquery; ?>"/>
147173
<link rel="stylesheet" href="<?php echo _BASE_PATH;?>/errpages/httperror.css<?php echo $randquery; ?>"/>
148-
<!-- this styling must be here to utilize PHP for the random background image -->
174+
<!-- this styling must be here to utilize PHP for the random background image and
175+
for the moving background gradient with random colors -->
149176
<style type="text/css">
150177
.site-bg-image {
151-
background:url(<?php echo $selectedBg; ?>) no-repeat center center fixed;
152-
z-index: -1;
153-
-webkit-background-size: cover;
154-
-moz-background-size: cover;
155-
-o-background-size: cover;
156-
background-size:cover;
178+
background:url(<?php echo (!isset($selectedBg) ? '' : $selectedBg); ?>) no-repeat center center fixed;
179+
}
180+
181+
.site-bg-gradient {
182+
background: linear-gradient(-45deg, <?php echo $rcolors; ?>);
183+
/* makes it visible */
184+
background-size: 400% 400%;
185+
<?php
186+
if(defined('_GRADIENT') && _GRADIENT === true) {
187+
echo " animation: bg-gradient 10s ease infinite;\n";
188+
} else {
189+
echo " /* _GRADIENT is off */\n";
190+
}
191+
?>
157192
}
158193
</style>
159194
</head>
160-
<body class="site-bg-image">
195+
<?php
196+
if(defined('_IMG_POOL') && _IMG_POOL === true) {
197+
echo '<body class="site-bg-image">' . "\n";
198+
}
199+
200+
if(defined('_GRADIENT') && _GRADIENT === true) {
201+
echo '<body class="site-bg-gradient">' . "\n";
202+
}
203+
?>
161204
<div class="httperror-banner httperror-banner-border httperror-banner-shadow">
162205
<div class="httperror-content">
163206
<h1 id="errcode" class="over-dark-bg httperror-heading">Error Code: <?php print ($error_code); ?></h1>
@@ -167,11 +210,12 @@ function isLive() {
167210
<a href="<?php print ($server_url); ?>"><?php print ($server_url); ?></a>
168211
</p>
169212
<?php
170-
// this will auto-redirect if $redirect_to contains a URL
171-
if($redirect_to != '') {
172-
echo ' ';
173-
echo '<p class="over-dark-bg">Redirecting in ' . $redirect_delay . ' seconds to ' . $redirect_to . '</p>';
174-
}
213+
// this will auto-redirect if $redirect_to contains a URL
214+
if($redirect_to != '') {
215+
echo ' ';
216+
$dbg = (defined('_DEBUG') && _DEBUG === true ? '<strong>DEBUG</strong>' : '');
217+
echo '<p class="over-dark-bg">' . $dbg . ' Redirecting in ' . $redirect_delay . ' seconds to ' . $redirect_to . '</p>';
218+
}
175219
?>
176220
</div>
177221
</div>

‎mdimg/sshot-bggrad.jpg

40.9 KB
Loading

‎mdimg/sshot-bgimg.jpg

76.6 KB
Loading

0 commit comments

Comments
 (0)