Skip to content

Instantly share code, notes, and snippets.

@Fma965
Last active March 25, 2024 07:43
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Fma965/f0787be5b57756105a203ab0cf46861b to your computer and use it in GitHub Desktop.
Save Fma965/f0787be5b57756105a203ab0cf46861b to your computer and use it in GitHub Desktop.
HAProxy Custom Error Page (remove top 4 lines for non haproxy use)
HTTP/1.0 503 Service Unavailable
Cache-Control: no-cache
Connection: close
Content-Type: text/html
<html lang="en">
<head>
<title>Under maintenance</title>
<style>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,200);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
/* This construction page is created by Rafael De Jongh.
** This code is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Content Table:
--------------
- Reset
- Body
- MediaQueries
- Links
- Scrollbar
- Selection
Reset
------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/*Custom Font Icons
//Can be removed
------------------*/
@font-face{
font-family:'cg';
src:url('fonts/cg.eot?51goeb');
src:url('fonts/cg.eot?51goeb#iefix') format('embedded-opentype'),
url('fonts/cg.ttf?51goeb') format('truetype'),
url('fonts/cg.woff?51goeb') format('woff'),
url('fonts/cg.svg?51goeb#cg') format('svg');
font-weight:normal;
font-style:normal;
}
[class^="icon-"], [class*=" icon-"]{
font:normal normal normal 14.5px/1 cg;
speak:none;
line-height:1;
text-transform:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.icon-artstation:before{content:"\e900"}
.icon-gamebanana:before{content:"\e901"}
/*Body
------------------*/
html{
height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box;
-webkit-background-clip:padding-box;
background-clip:padding-box;
}
body{
font-family:"Raleway", sans-serif;
text-shadow:0 1px 1px rgba(0,0,0,.4);
line-height:1.6;
color:#fff;
background-color:#1b1a1f;
/*PHP Dynamic Background
background-image:url("../images/bg.php");
*/
background-image:url("../images/bg.jpg");
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
background-position:center center;
height:100%;
position:relative;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
/*Content
------------------*/
main::before{
content:"";
width:1124px;
height:1160px;
position:absolute;
left:-5px;
top:-5px;
z-index:-1;
background:-moz-linear-gradient(-45deg, rgba(115,115,115,.1) 0%, rgba(115,115,115,.09) 9%, rgba(115,115,115,0) 11%, rgba(115,115,115,0) 16%, rgba(115,115,115,.1) 21%, rgba(115,115,115,.09) 37%, rgba(115,115,115,0) 41%, rgba(115,115,115,0) 47%, rgba(115,115,115,.09) 48%, rgba(115,115,115,.1) 49%, rgba(115,115,115,.1) 54%, rgba(115,115,115,.08) 55%, rgba(115,115,115,0) 57%, rgba(115,115,115,0) 60%, rgba(115,115,115,.1) 64%, rgba(115,115,115,.09) 76%, rgba(115,115,115,0) 80%, rgba(115,115,115,.01) 81%, rgba(115,115,115,.1) 84%, rgba(115,115,115,.1) 100%);
background:-webkit-linear-gradient(-45deg, rgba(115,115,115,.1) 0%,rgba(115,115,115,.09) 9%,rgba(115,115,115,0) 11%,rgba(115,115,115,0) 16%,rgba(115,115,115,.1) 21%,rgba(115,115,115,.09) 37%,rgba(115,115,115,0) 41%,rgba(115,115,115,0) 47%,rgba(115,115,115,.09) 48%,rgba(115,115,115,.1) 49%,rgba(115,115,115,.1) 54%,rgba(115,115,115,.08) 55%,rgba(115,115,115,0) 57%,rgba(115,115,115,0) 60%,rgba(115,115,115,.1) 64%,rgba(115,115,115,.09) 76%,rgba(115,115,115,0) 80%,rgba(115,115,115,.01) 81%,rgba(115,115,115,.1) 84%,rgba(115,115,115,.1) 100%);
background:linear-gradient(135deg, rgba(115,115,115,.1) 0%,rgba(115,115,115,.09) 9%,rgba(115,115,115,0) 11%,rgba(115,115,115,0) 16%,rgba(115,115,115,.1) 21%,rgba(115,115,115,.09) 37%,rgba(115,115,115,0) 41%,rgba(115,115,115,0) 47%,rgba(115,115,115,.09) 48%,rgba(115,115,115,.1) 49%,rgba(115,115,115,.1) 54%,rgba(115,115,115,.08) 55%,rgba(115,115,115,0) 57%,rgba(115,115,115,0) 60%,rgba(115,115,115,.1) 64%,rgba(115,115,115,.09) 76%,rgba(115,115,115,0) 80%,rgba(115,115,115,.01) 81%,rgba(115,115,115,.1) 84%,rgba(115,115,115,.1) 100%);
overflow:hidden;
}
main::after{
content:"";
width:1142px;
height:1160px;
position:absolute;
z-index:-2;
left:-5px;
top:-5px;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
background-position:center center;
/*PHP Dynamic Background
background-image:url("../images/bg.php");
background-image:-moz-linear-gradient(90deg, rgba(100,100,100,.2), rgba(100,100,100,.2)), url("../images/bg.php");
background-image:-webkit-linear-gradient(90deg, rgba(100,100,100,.2), rgba(100,100,100,.2)), url("../images/bg.php");
background-image:linear-gradient(0deg, rgba(100,100,100,.2), rgba(100,100,100,.2)), url("../images/bg.php");
*/
background-image:url("../images/bg.jpg");
background-image:-moz-linear-gradient(90deg, rgba(100,100,100,.2), rgba(100,100,100,.2)), url("../images/bg.jpg");
background-image:-webkit-linear-gradient(90deg, rgba(100,100,100,.2), rgba(100,100,100,.2)), url("../images/bg.jpg");
background-image:linear-gradient(0deg, rgba(100,100,100,.2), rgba(100,100,100,.2)), url("../images/bg.jpg");
-webkit-filter:blur(5px);
-moz-filter:blur(5px);
-o-filter:blur(5px);
-ms-filter:blur(5px);
filter:blur(5px);
overflow:hidden;
}
main{
width:1124px;
height:1160px;
left:calc(50% - 562px);
top:5%;
position:absolute;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-moz-box-shadow:0 10px 30px rgba(0,0,0,.6);
-webkit-box-shadow:0 10px 30px rgba(0,0,0,.6);
box-shadow:0 10px 30px rgba(0,0,0,.6);
border:1px solid rgba(255, 255, 255,.1);
padding:20px;
text-align:center;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:box-shadow .3s ease-in-out;
-moz-transition:box-shadow .3s ease-in-out;
-o-transition:box-shadow .3s ease-in-out;
transition:box-shadow .3s ease-in-out;
overflow:hidden;
}
main:hover{
cursor:move;
-moz-box-shadow:0 10px 32px rgba(0,0,0,.7);
-webkit-box-shadow:0 10px 32px rgba(0,0,0,.7);
box-shadow:0 10px 32px rgba(0,0,0,.7);
}
main:active{
cursor:move;
-moz-box-shadow:0 10px 50px rgba(0,0,0,.9);
-webkit-box-shadow:0 10px 50px rgba(0,0,0,.9);
box-shadow:0 10px 50px rgba(0,0,0,.9);
}
main h1:before{
content:"\2013";
margin-right:5px;
}
main h1:after{
content:"\2013";
margin-left:5px;
}
main h1{
font-size:2.7em;
text-transform:uppercase;
text-align:center;
width:calc(100% + 10px);
margin-top:20px;
font-weight:200;
}
main h2{
margin-top:.5em;
margin-bottom: .5em;
font-weight:400;
font-size:1.1em;
text-align:center;
}
/*Icons
------------------*/
i{margin:2em 0.4em}
i:before{
font-size:2em;
display:block;
border:1px solid #fff;
padding:1rem;
border-radius:100%;
min-width:32px;
min-height:32px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
}
a i:before{
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
a:hover i:before{background-color:rgba(255,255,255,.15)}
/*FadeInOnLoad
------------------*/
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@-moz-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
main{
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-delay:.4s;
-moz-animation-delay:.4s;
animation-delay:.4s;
}
/*MediaQueries
------------------*/
@media screen and (max-width:630px){
main::before,main::after{
width:102%;
height:102%;
width:calc(100% + 10px);
height:calc(100% + 10px);
}
main{
width:80%;
height:auto;
margin:auto;
display:inline-block;
left:10%;
}
main h1:before,main h1:after{display:none}
}
@media screen and (max-width:500px){
main h1{font-size:8vw}
}
@media screen and (max-width:450px){
main{top:15%}
}
@media screen and (max-width:410px){
main{top:10%}
}
@media screen and (max-width:320px){
main{top:8%}
i{margin:.6em .5em}
}
/*Links
------------------*/
a{
color:#fff;
text-decoration:none;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
a:visited, a:active, a:hover{color:#fff}
/*Cursor
------------------
*{cursor:url("../images/cursors/default.png"),default}
main *,main:hover,main:active{cursor:url("../images/cursors/move.png"),move}
main a *:hover{cursor:url("../images/cursors/pointer.png"),pointer}
*/
/*Scrollbar
------------------*/
::-webkit-scrollbar{width:12px;height:12px;background-color:#121212}
::-webkit-scrollbar-corner{background-color:#0e0e0e}
::-webkit-scrollbar-track{background-color:#121212}
::-webkit-scrollbar-thumb{background:#900}
::-webkit-scrollbar:horizontal{height:12px}
/*Selection
------------------*/
::selection{color:#fff;background-color:#900}
::-moz-selection{color:#fff;background-color:#900}
</style>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function(){$("main").draggable({containment:"window"})});
</script>
</head>
<body>
<main>
<h1>XXX is currently not accessible</h1>
<h2>Please check the announcements below. If there is no planned maintenance please let the server admin know.</h2>
<p>You can still access plex via the app on various platforms or by clicking the play button below</p>
<a href="mailto:"><i class="fa fa-envelope"></i></a>
<a href="https://app.plex.tv/"><i id="plex" class="fa fa-play" title="Go to Plex"></i></a>
<div style="overflow:hidden;height:280px">
<embed style="height:calc(100% + 115px)" width='100%' src='DISCORD WIDGET' />
</div>
<br />
<div style="overflow:hidden;height:580px">
<embed style="height: calc(100% - 68px);overflow: hidden;" width='100%' src='https://uptime.statuscake.com/?TestID=XXXX' />
</div>
</main>
</body>
</html>
.Box:first-child {
display: none !important;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: none;
width:100%;
}
header, #content-header {
display:none;
}
.container {
width: 100%;
margin:0px !important;
padding:0px !important;
}
.col-md-3 {
display:none;
}
* {
overflow: hidden;
}
.table-striped > tbody > tr {
background-color: #36393e !important;
color:white;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #424448 !important;
color:white;
}
.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
border-top: 1px solid black;
}
.table-full thead {
background: #424448;
color: white;
}
.AlignCentre {
text-align: center;
}
.Title h1 {
padding: 20px;
margin: 0;
color: rgb(255, 255, 255);
font-family: Whitney, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 19px;
font-weight: 700;
height: 23px;
line-height: 35px;
white-space: nowrap;
background-color: #424448 !important;
padding: 5px;
height:auto;
}
.Title {
background-color: #424448 !important;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.table-full thead tr > th {
border-bottom: 1px solid rgba(0,0,0,0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment