Skip to content

Instantly share code, notes, and snippets.

@hayatbiralem
Last active November 18, 2020 06:47
Show Gist options
  • Save hayatbiralem/7cc4f817c6c515f5d416a386780bd36b to your computer and use it in GitHub Desktop.
Save hayatbiralem/7cc4f817c6c515f5d416a386780bd36b to your computer and use it in GitHub Desktop.
RunCloud default web app index.php to show a common maintenance page.
<?php
$app_name = $_SERVER['HTTP_HOST'];
$seo_title = $app_name;
$seo_description = 'This website is currently out of service!';
$body_message = $seo_description;
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Status: 503 Service Temporarily Unavailable');
header('Retry-After: 86400'); // 86400 seconds = 1 day
?><!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title><?= $seo_title ?></title>
<meta name="description" content="<?= $seo_description ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #222;
font-family: 'Open Sans', sans-serif;
}
#wrapper {
display: inline-block;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
#logo {
display: block;
margin: 0 auto 30px;
font-size: 4vw;
}
#typed-wrapper {
font-size: 20px;
color: #444;
text-align: center;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.typed-cursor {
display: inline-block;
margin-left: -8px;
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body translate="no" >
<div id="wrapper">
<h1 id="logo"><?= $app_name ?></h1>
<div id="typed-wrapper" class="cf">
<span id="typed">
<span class="sr-only"><?= $body_message ?></span>
</span>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js'>
</script>
<script >
// Custom
$(function() {
var $typed = $("#typed");
$typed.typed({
strings: [$typed.text()],
typeSpeed: 50,
startDelay: 1000
});
}
);
</script>
</body>
</html>
@hayatbiralem
Copy link
Author

If you want to unsuspend a web app, you need to follow these steps;

  1. Add real domains and remove irrelevant one.
  2. Add SSL if needed.

That's it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment