Merge pull request #78 from niels-nijens/maintenance-page

Added default maintenance page for MaintenanceTask
accompli · Dec 14, 2015 · 12787d8 · 12787d8
2 parents 1c7548d + 31310ae
commit 12787d8
Show file tree

Hide file tree

Showing 2 changed files with 185 additions and 0 deletions.
diff --git a/src/Resources/maintenance/index.html b/src/Resources/maintenance/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta name='viewport' content='width=device-width, initial-scale=1'/>
+        <meta name='theme-color' content='#4884be'>
+        <link rel='stylesheet' href='style.css'/>
+    </head>
+    <body>
+        <div class='centered-box'>
+            <div class='loader'>
+                <div class='loader-circle'></div>
+                <div class='loader-line-mask'>
+                    <div class='loader-line fade-in'></div>
+                </div>
+                <div class='loader-icon'>
+                    <!-- Octicon cloud upload icon (c) 2012-2015 GitHub -->
+                    <svg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'>
+                        <path d='M7 9H5l3-3 3 3H9v5H7V9z m5-4c0-0.44-0.91-3-4.5-3-2.42 0-4.5 1.92-4.5 4C1.02 6 0 7.52 0 9c0 1.53 1 3 3 3 0.44 0 2.66 0 3 0v-1.3H3C1.38 10.7 1.3 9.28 1.3 9c0-0.17 0.05-1.7 1.7-1.7h1.3v-1.3c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2h1.3c0.81 0 2.7 0.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2H10v1.3c0.38 0 1.98 0 2 0 2.08 0 4-1.16 4-3.5 0-2.44-1.92-3.5-4-3.5z'/>
+                    </svg>
+                </div>
+                <div class='loader-text'>
+                    <p>We're currently upgrading our systems...</p>
+                    <p>Will be back in a few minutes.</p>
+                </div>
+            </div>
+            <div class='powered-by'>
+                <p>Powered by</p>
+                <a href='https://github.com/accompli/accompli' target='_blank'>
+                    <svg viewBox='120 0 50 50' xmlns='http://www.w3.org/2000/svg'>
+                        Accompli
+                        <g>
+                            <path d='M87.7,35.3L86,30.7H75.2l-1.7,4.6h-4.7L78,11.7h5.2l9.2,23.5H87.7z M80.6,15.8l-4.2,11.2h8.5L80.6,15.8z'/>
+                            <path d='M98,23.5c0-7.3,5.4-12.2,12.3-12.2c4.7,0,7.7,2.4,9.4,5.3l-3.5,1.8c-1.1-2-3.4-3.4-5.9-3.4c-4.7,0-8.1,3.5-8.1,8.5c0,4.9,3.5,8.5,8.1,8.5c2.5,0,4.8-1.5,5.9-3.4l3.5,1.8c-1.8,2.8-4.7,5.3-9.5,5.3C103.4,35.7,98,30.7,98,23.5z'/>
+                            <path d='M127.3,23.5c0-7.3,5.4-12.2,12.3-12.2c4.7,0,7.7,2.4,9.4,5.3l-3.5,1.8c-1.1-2-3.4-3.4-5.9-3.4c-4.7,0-8.1,3.5-8.1,8.5c0,4.9,3.5,8.5,8.1,8.5c2.5,0,4.8-1.5,5.9-3.4l3.5,1.8c-1.8,2.8-4.7,5.3-9.5,5.3C132.7,35.7,127.3,30.7,127.3,23.5z'/>
+                            <path d='M156.7,23.5c0-7,5-12.2,12-12.2c7,0,12,5.2,12,12.2c0,7-5,12.2-12,12.2C161.6,35.7,156.7,30.5,156.7,23.5zM176.5,23.5c0-4.9-3.1-8.5-7.8-8.5c-4.8,0-7.8,3.6-7.8,8.5c0,4.8,3,8.5,7.8,8.5C173.4,32,176.5,28.3,176.5,23.5z'/>
+                            <path d='M210.3,35.3V17.1l-7.2,18.2h-1.8l-7.2-18.2v18.2H190V11.7h5.8l6.4,16.2l6.4-16.2h5.8v23.5H210.3z'/>
+                            <path d='M224.7,35.3V11.7h10.4c4.9,0,7.7,3.4,7.7,7.4c0,4-2.8,7.3-7.7,7.3h-6.2v8.8H224.7z M238.5,19.1c0-2.3-1.7-3.7-4-3.7h-5.7v7.4h5.7C236.8,22.8,238.5,21.3,238.5,19.1z'/>
+                            <path d='M251.2,35.3V11.7h4.1v19.9h10.4v3.6H251.2z'/>
+                            <path d='M274.6,35.3V11.7h4.1v23.5H274.6z'/>
+                        </g>
+                        <path d='M50.3,37.5L30.5,3.1c-0.6-1-1.6-1.6-2.8-1.6c-1.1,0-2.2,0.6-2.8,1.6L5.1,37.5c-0.6,1-0.6,2.2,0,3.2c0.6,1,1.6,1.6,2.8,1.6h16c0.4,0,0.7-0.3,0.7-0.7v-5.1c0-0.4-0.3-0.7-0.7-0.7h-9.6c-0.3,0-0.5-0.4-0.4-0.7l13.5-23.5c0.2-0.3,0.6-0.3,0.8,0l13.5,23.5c0.2,0.3,0,0.7-0.4,0.7h-9.6c-0.4,0-0.7,0.3-0.7,0.7v5.1c0,0.4,0.3,0.7,0.7,0.7h16c1.1,0,2.2-0.6,2.8-1.6C50.9,39.7,50.9,38.5,50.3,37.5z'/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/src/Resources/maintenance/style.css b/src/Resources/maintenance/style.css
@@ -0,0 +1,137 @@
+html,
+body {
+    margin: 0px;
+    height: 100%;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -webkit-user-select: none;
+    background-color: #4884be;
+
+    font-family: Arial;
+}
+
+p {
+    font-size: 14px;
+    color: #FFFFFF;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.centered-box {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    background: radial-gradient(farthest-side at 80% 10%, #3fb093, #4884be);
+    height: 100%;
+}
+
+.loader {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+}
+
+.loader-circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+    margin-left: -60px;
+    margin-top: -60px;
+}
+
+.loader-line-mask {
+    width: 60px;
+    height: 120px;
+    margin-left: -60px;
+    margin-top: -120px;
+    overflow: hidden;
+    -webkit-transform-origin: 60px 60px;
+    -moz-transform-origin: 60px 60px;
+    -o-transform-origin: 60px 60px;
+    -ms-transform-origin: 60px 60px;
+    transform-origin: 60px 60px;
+    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+    -webkit-animation: rotate 1s infinite linear;
+    -moz-animation: rotate 1s infinite linear;
+    -o-animation: rotate 1s infinite linear;
+    animation: rotate 1s infinite linear;
+}
+
+.loader-line-mask .loader-line {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.loader-icon {
+    position: absolute;
+    margin-top: -82px;
+    margin-left: -50px;
+    width: 100px;
+
+    text-align: center;
+}
+
+.loader-icon svg {
+    width: 60px;
+    height: 45px;
+    fill: rgba(255, 255, 255, 0.5);
+}
+
+.loader-text {
+    margin-top: 20px;
+    margin-left: -125px;
+    width: 260px;
+}
+
+.powered-by {
+    position: absolute;
+    bottom: 10px;
+    width: 100%;
+
+    text-align: center;
+}
+
+.powered-by p {
+    display: inline-block;
+}
+
+.powered-by svg {
+    width: 175px;
+    height: 30px;
+}
+
+.powered-by * {
+    vertical-align: middle;
+
+    font-size: 11px;
+    color: #a8b3c4;
+    fill: #a8b3c4;
+}
+
+.fade-in {
+    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: 0.5s;
+    -moz-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+}
+
+@-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
+@-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
+@-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
+@keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);};}
+
+@-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; } }