Merge pull request #3 from jxmot/20220417-updates

Background options

README.md

@@ -5,11 +5,26 @@ This repository contains a "generic" HTTP error page. It's written in PHP/HTML a
 ## Features
 
 * A single file for all 40X HTTP errors
-* Background image(s) are random and selected from a "pool" of error images when an error page is accessed
+* Two options for the page background -  
+  * A background image, randomly selected from a "pool" of images.
+  * A moving gradient of four random colors.
 * All files (*except* `.htaccess`) are kept in a single folder
 * Easy to copy to a website and use. You will only need to edit the `.htaccess` file
 * An option to redirect automatically to a different page
 
+Optional Page Backgrounds: 
+
+<div align="center">
+    <figure>
+<!-- NOTE: When Github renders the images it will REMOVE the "margin", and ADD "max-width:100%" -->
+        <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"/>
+        <img src="./mdimg/sshot-bggrad.jpg" style="width:25%;border: 2px solid black;margin-right: 1rem;"; alt="Error Page with a moving gradient background"/>
+        <br>
+        <figcaption><strong>Random Image and Random Color Gradient Background</strong></figcaption>
+    </figure>
+</div>
+<br>
+
 # Installation
 
 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 -
 
 ```php
 // uncomment for testing
-//define('_DEBUG', true);
+define('_DEBUG', false);
 ```
 
-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.
+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.
 
 ### Folder Junctions
 
@@ -123,6 +138,18 @@ To see the error page working open your browser and go to -
 
 You should see a "400" error page.
 
+## Changing Backgrounds
+
+Near the top of the `httperror.php` file:
+
+```
+// can't have both!!
+define('_IMG_POOL', false);
+define('_GRADIENT', true);
+```
+
+Set `_IMG_POOL` or `_GRADIENT` to `true` to select that background type.
+
 # Development Notes
 
 * Development Environment:

errpages/httperror.css

@@ -18,6 +18,29 @@ body{
     color:yellow !important;
 }
 
+.site-bg-image {
+    z-index: -1;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size:cover;
+}
+
+/*
+    Moving Gradient Background
+*/
+@keyframes bg-gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
 /*
     Box styling
 */
@@ -26,7 +49,6 @@ body{
     margin-left: 10%;
     margin-bottom:10%;
 
-    /* border: 3px solid yellow; */
     background-color: rgba(79, 79, 79, 0.79);
 	-webkit-backdrop-filter: blur(3px);
 	backdrop-filter: blur(3px);
@@ -106,7 +128,6 @@ body{
         margin-bottom:10%;
     }
     .httperror-heading {
-
         font-size:32px;
     }
 }

errpages/httperror.php

@@ -1,6 +1,10 @@
 <?php
-// uncomment for testing
-//define('_DEBUG', true);
+// set to true for testing
+define('_DEBUG', false);
+
+// can't have both!!
+define('_IMG_POOL', false);
+define('_GRADIENT', true);
 
 // (is part of the name for the image pool file)
 define('PAGE_ID', 'httperror');
@@ -113,15 +117,17 @@ function isLive() {
 }
 
 if(isLive() === true) {
-    define('_BASE_PATH', '');
+    define('_BASE_PATH', '.');
 } else {
     // edit as needed, this will be used if the 
     // page is being served locally.
     define('_BASE_PATH', '/tests/httperror');
 }
 
-$imagepool = './' . PAGE_ID . '_imagepool.php';
-require_once $imagepool;
+if(defined('_IMG_POOL') && _IMG_POOL === true) {
+    $imagepool = './' . PAGE_ID . '_imagepool.php';
+    require_once $imagepool;
+}
 
 // this will help defeat forced caching, like some android
 // browsers. they even ignore the anti-caching meta tags.
@@ -135,29 +141,66 @@ function isLive() {
     <meta name="robots" content="noindex,nofollow">	
     <meta name="author" content="Jim Motyl - github.com/jxmot"/>
     <link href="/favicon.ico" rel="icon" type="image/ico" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
 <?php
-    // this will auto-redirect if redirect_to contains a URL
-	if(($redirect_to !== '') && (!defined('_DEBUG') || _DEBUG === false)) {
-        echo '<meta http-equiv="Refresh" content="' . $redirect_delay . '; url=' . $redirect_to . '">';
-	}
+// this will auto-redirect if redirect_to contains a URL
+if(($redirect_to !== '') && (!defined('_DEBUG') || _DEBUG === false)) {
+    echo '    <meta http-equiv="Refresh" content="' . $redirect_delay . '; url=' . $redirect_to . '">';
+}
+
+function randColor() {
+    return '#' . str_pad(dechex(rand(0, 16777215)+rand(0, 255)), 6, '0', STR_PAD_LEFT);
+}
+
+$rcolors = '';
+if(defined('_GRADIENT') && _GRADIENT === true) {
+    $rcolors = randColor() . ',' . randColor() . ',' . randColor() . ',' . randColor();
+}
+
+$animenab = '';
+
+if(defined('_GRADIENT') && _GRADIENT === true) {
+    $animenab = "            animation: bg-gradient 10s ease infinite;\n";
+} else {
+    $animenab = "            /* _GRADIENT is off */\n";
+}
 ?>
 	<title>OOPS! : <?php echo $error_code;?></title>
 
     <link rel="stylesheet" href="<?php echo _BASE_PATH;?>/errpages/reseter.css<?php echo $randquery; ?>"/>
     <link rel="stylesheet" href="<?php echo _BASE_PATH;?>/errpages/httperror.css<?php echo $randquery; ?>"/>
-    <!-- this styling must be here to utilize PHP for the random background image -->
+    <!-- this styling must be here to utilize PHP for the random background image and 
+         for the moving background gradient with random colors -->
     <style type="text/css">
         .site-bg-image {
-            background:url(<?php echo $selectedBg; ?>) no-repeat center center fixed;
-            z-index: -1;
-            -webkit-background-size: cover;
-            -moz-background-size: cover;
-            -o-background-size: cover;
-            background-size:cover;
+            background:url(<?php echo (!isset($selectedBg) ? '' : $selectedBg); ?>) no-repeat center center fixed;
+        }
+
+        .site-bg-gradient {
+            background: linear-gradient(-45deg, <?php echo $rcolors; ?>);
+            /* makes it visible */
+            background-size: 400% 400%;
+<?php
+if(defined('_GRADIENT') && _GRADIENT === true) {
+    echo "            animation: bg-gradient 10s ease infinite;\n";
+} else {
+    echo "            /* _GRADIENT is off */\n";
+}
+?>
         }
     </style>
 </head>
-<body class="site-bg-image">
+<?php
+if(defined('_IMG_POOL') && _IMG_POOL === true) {
+    echo '<body class="site-bg-image">' . "\n";
+}
+
+if(defined('_GRADIENT') && _GRADIENT === true) {
+    echo '<body class="site-bg-gradient">' . "\n";
+}
+?>
     <div class="httperror-banner httperror-banner-border httperror-banner-shadow">
         <div class="httperror-content">
             <h1 id="errcode" class="over-dark-bg httperror-heading">Error Code: <?php print ($error_code); ?></h1>
@@ -167,11 +210,12 @@ function isLive() {
                 <a href="<?php print ($server_url); ?>"><?php print ($server_url); ?></a>
             </p>
 <?php
-    // this will auto-redirect if $redirect_to contains a URL
-	if($redirect_to != '') {
-        echo '            ';
-        echo '<p class="over-dark-bg">Redirecting in ' . $redirect_delay . ' seconds to ' . $redirect_to . '</p>';
-	}
+// this will auto-redirect if $redirect_to contains a URL
+if($redirect_to != '') {
+    echo '            ';
+    $dbg = (defined('_DEBUG') && _DEBUG === true ? '<strong>DEBUG</strong>' : '');
+    echo '<p class="over-dark-bg">' . $dbg . ' Redirecting in ' . $redirect_delay . ' seconds to ' . $redirect_to . '</p>';
+}
 ?>
         </div>
     </div>