mirror of
https://github.com/coollabsio/coolify-examples.git
synced 2026-02-18 13:28:57 +00:00
132 lines
6.7 KiB
HTML
132 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Wartungsmodus</title>
|
|
|
|
<style>
|
|
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font:1em monospace,serif}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
|
|
|
|
body, html { min-height: 100%; background: #e9ebed; }
|
|
.maintenance-container {
|
|
position: relative;
|
|
background: #fff;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
margin: 50px auto;
|
|
width: 475px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
|
|
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
|
|
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
|
|
-ms-box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
|
|
}
|
|
.maintenance-headline {
|
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
font-weight: 300;
|
|
margin: 0 0 .8em;
|
|
}
|
|
.maintenance-text { font-size: 13px }
|
|
.maintenance-progress {
|
|
border-top: 1px solid #529e52;
|
|
height: 4px; width: 100%;
|
|
position: absolute;
|
|
bottom: 0; left: 0;
|
|
background-color: #5eb95e;
|
|
-webkit-background-size: 40px 40px;
|
|
-moz-background-size: 40px 40px;
|
|
-o-background-size: 40px 40px;
|
|
background-size: 40px 40px;
|
|
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
|
-moz-animation: progress-bar-stripes 2s linear infinite;
|
|
-ms-animation: progress-bar-stripes 2s linear infinite;
|
|
-o-animation: progress-bar-stripes 2s linear infinite;
|
|
animation: progress-bar-stripes 2s linear infinite;
|
|
background-color: #62C462;
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
|
|
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
|
|
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
|
|
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
|
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
|
|
}
|
|
|
|
hr {
|
|
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAHUlEQVR42q3IoREAAACCQHdy/91IFrLcfSGqc5wAdFYCZQo/LFUAAAAASUVORK5CYII=") repeat-x;
|
|
border: 0 none;
|
|
color: #CCC;
|
|
height: 4px;
|
|
padding: 0;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
|
|
@-webkit-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 0 0;
|
|
}
|
|
to {
|
|
background-position: 40px 0;
|
|
}
|
|
}
|
|
|
|
@keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="maintenance-container">
|
|
<h1 class="maintenance-headline">Unsere Website befindet sich gerade in der Wartung.</h1>
|
|
|
|
<p class="maintenance-text">
|
|
Wir stehen Ihnen bald wieder zur Verfügung. Entschuldigen Sie etwaige Unannehmlichkeiten.
|
|
</p>
|
|
|
|
<hr />
|
|
|
|
<h1 class="maintenance-headline">Our website is currently undergoing maintenance.</h1>
|
|
|
|
<p class="maintenance-text">
|
|
We'll be back very soon. Sorry for any inconvenience.
|
|
</p>
|
|
|
|
<div class="maintenance-progress"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|