From 32673239f7d898bfa9fa44ab8c5766e6610393fa Mon Sep 17 00:00:00 2001
From: colin <colin@thinkr.fr>
Date: Mon, 7 Nov 2022 13:52:56 +0100
Subject: [PATCH] refactor: changed the text on screen for maintenance page

---
 inst/app/maintenance.html | 522 +++++++++++++++++++-------------------
 1 file changed, 258 insertions(+), 264 deletions(-)
diff --git a/inst/app/maintenance.html b/inst/app/maintenance.html
index 6566c4ca..ed996309 100644
--- a/inst/app/maintenance.html
+++ b/inst/app/maintenance.html
@@ -1,274 +1,268 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Coming soon...</title>
-  <style>
-    :root {
-      --primary: #f15522;
-    }
-
-    .root {
-      display: flex;
-      justify-content: center;
-    }
-
-    .canvas {
-      width: 95vmin;
-      height: 95vmin;
-      position: absolute;
-    }
-
-    .canvas div {
-      position: absolute;
-      box-sizing: border-box;
-    }
-
-    .desk {
-      width: 90%;
-      height: 0.35%;
-      top: 70%;
-      left: 10%;
-      background-color: #4e4e4e;
-    }
-
-    .computer-stand-bottom {
-      height: 1.5%;
-      width: 20%;
-      left: 60%;
-      top: 68.5%;
-      background-color: #848388;
-      border-top-right-radius: 3.5vmin;
-      border-top-left-radius: 3.5vmin;
-    }
-
-    .computer-stand {
-      left: 62.5%;
-      top: 60.5%;
-      height: 8%;
-      width: 15%;
-      background-color: #68676b;
-      clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
-    }
-
-    .computer-bottom {
-      box-shadow: 0 5px 11px rgba(0, 0, 0, 0.25);
-      top: 57%;
-      left: 51.5%;
-      width: 37%;
-      height: 4%;
-      border-bottom-right-radius: 3.5vmin;
-      border-bottom-left-radius: 3.5vmin;
-      background-color: #848388;
-    }
-
-    .computer-bottom::after {
-      content: "";
-      background-image: url(https://github.com/rstudio/shiny/raw/main/man/figures/logo.png);
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: center;
-      left: 30%;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
-
-    .computer-monitor {
-      top: 37%;
-      left: 51.5%;
-      height: 20%;
-      width: 37%;
-      background-color: #ffffff;
-      border: 1vmin solid #000000;
-      border-top-right-radius: 1.3vmin;
-      border-top-left-radius: 1.3vmin;
-    }
-
-    .screen {
-      background-image: url(https://raw.githubusercontent.com/ThinkR-open/golem/master/inst/rstudio/templates/project/golem.png);
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: center;
-      left: 54%;
-      top: 40%;
-      width: 15%;
-      height: 15%;
-    }
-
-    .screen::after {
-      content: '';
-      display: block;
-      position: absolute;
-      width: 100%;
-      top: 25%;
-      left: 100%;
-      font-family: monospace;
-      animation-name: example;
-      animation-duration: 8s;
-      animation-iteration-count: 1;
-      animation-fill-mode: forwards;
-      font-size: 1.7vmin;
-    }
-
-    @keyframes example {
-      0% {
-        content: "Hello!";
-      }
-
-      10% {
-        content: "Sorry";
-      }
-
-      20% {
-        content: "."
-      }
-
-      30% {
-        content: ".."
-      }
-
-      40% {
-        content: "..."
-      }
-
-      50%,
-      90% {
-        content: "This application is under maintenance"
-      }
-
-      100% {
-        content: "We're coming back very soon!"
-      }
-    }
-
-    .golem {
-      width: 100%;
-      height: 100%;
-    }
-
-    .golem .head {
-      top: 46%;
-      left: 24%;
-      width: 20%;
-      height: 24%;
-      background: var(--primary);
-      border-radius: 80% 80% 40% 40% / 80%;
-      border: 0.35vmin solid #222;
-    }
-
-    .golem .ear {
-      width: 2.4%;
-      height: 5.5%;
-      background: var(--primary);
-      border-radius: 70% 70% 40% 90% / 50% 50% 100% 90%;
-      border: 0.35vmin solid;
-      border-right-color: var(--primary);
-      top: 52%;
-      transform: rotate(-2deg);
-      left: 27%;
-      box-shadow: -0.25vmin -0.25vmin;
-    }
-
-    .golem .ear::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 80%;
-      height: 80%;
-      border-radius: 50%;
-      top: 20%;
-      left: 8%;
-      border: 0.25vmin solid transparent;
-      border-top: 0.4vmin solid;
-      transform: rotate(15deg);
-    }
-
-    .golem .eyebrow {
-      width: 6%;
-      height: 3%;
-      border-radius: 50%;
-      border: 0.5vmin solid transparent;
-      border-left: 0.35vmin solid transparent;
-      border-top: 0.45vmin solid;
-      top: 52%;
-    }
-
-    .golem .eyebrow.left {
-      left: 32%;
-    }
-
-    .golem .eyebrow.right {
-      left: 37.5%;
-    }
-
-    .golem .eye {
-      width: 3.7%;
-      height: 2.5%;
-      top: 53%;
-      background: #fff;
-      border-radius: 0% 0% 90% 70% / 70%;
-      border: 0.45vmin solid #222;
-    }
-
-    .golem .eye.left {
-      left: 33.4%;
-      transform: rotate(5deg);
-    }
-
-    .golem .eye.right {
-      left: 38.4%;
-      transform: rotate(-5deg);
-    }
-
-    .golem .arm {
-      top: 65%;
-      width: 19%;
-      height: 5%;
-      left: 34%;
-      background: var(--primary);
-      border-radius: 30% 0 / 53%;
-      border: 0.3vmin solid;
-      box-shadow: 5px 5px 11px rgb(0 0 0 / 28%);
-    }
-
-    .golem .hand {
-      width: 7%;
-      height: 7%;
-      top: 63%;
-      left: 52%;
-      background: var(--primary);
-      border-radius: 50%;
-      border: 0.4vmin solid;
-      border-left: 0.1vmin solid var(--primary);
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Under Maintenance</title>
+    <style>
+         :root {
+            --primary: #f15522;
+        }
+        
+        .root {
+            display: flex;
+            justify-content: center;
+        }
+        
+        .canvas {
+            width: 95vmin;
+            height: 95vmin;
+            position: absolute;
+        }
+        
+        .canvas div {
+            position: absolute;
+            box-sizing: border-box;
+        }
+        
+        .desk {
+            width: 90%;
+            height: 0.35%;
+            top: 70%;
+            left: 10%;
+            background-color: #4e4e4e;
+        }
+        
+        .computer-stand-bottom {
+            height: 1.5%;
+            width: 20%;
+            left: 60%;
+            top: 68.5%;
+            background-color: #848388;
+            border-top-right-radius: 3.5vmin;
+            border-top-left-radius: 3.5vmin;
+        }
+        
+        .computer-stand {
+            left: 62.5%;
+            top: 60.5%;
+            height: 8%;
+            width: 15%;
+            background-color: #68676b;
+            clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
+        }
+        
+        .computer-bottom {
+            box-shadow: 0 5px 11px rgba(0, 0, 0, 0.25);
+            top: 57%;
+            left: 51.5%;
+            width: 37%;
+            height: 4%;
+            border-bottom-right-radius: 3.5vmin;
+            border-bottom-left-radius: 3.5vmin;
+            background-color: #848388;
+        }
+        
+        .computer-bottom::after {
+            content: "";
+            background-image: url(https://github.com/rstudio/shiny/raw/main/man/figures/logo.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: center;
+            left: 30%;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+        
+        .computer-monitor {
+            top: 37%;
+            left: 51.5%;
+            height: 20%;
+            width: 37%;
+            background-color: #ffffff;
+            border: 1vmin solid #000000;
+            border-top-right-radius: 1.3vmin;
+            border-top-left-radius: 1.3vmin;
+        }
+        
+        .screen {
+            background-image: url(https://raw.githubusercontent.com/ThinkR-open/golem/master/inst/rstudio/templates/project/golem.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: center;
+            left: 54%;
+            top: 40%;
+            width: 15%;
+            height: 15%;
+        }
+        
+        .screen::after {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            top: 25%;
+            left: 100%;
+            font-family: monospace;
+            animation-name: example;
+            animation-duration: 8s;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+            font-size: 1.7vmin;
+        }
+        
+        @keyframes example {
+            0% {
+                content: "Under Maintenance";
+            }
+            10% {
+                content: "Under Maintenance";
+            }
+            20% {
+                content: "."
+            }
+            30% {
+                content: ".."
+            }
+            40% {
+                content: "..."
+            }
+            50%,
+            90% {
+                content: "Please come back soon..."
+            }
+            100% {
+                content: "This application is under maintenance"
+            }
+        }
+        
+        .golem {
+            width: 100%;
+            height: 100%;
+        }
+        
+        .golem .head {
+            top: 46%;
+            left: 24%;
+            width: 20%;
+            height: 24%;
+            background: var(--primary);
+            border-radius: 80% 80% 40% 40% / 80%;
+            border: 0.35vmin solid #222;
+        }
+        
+        .golem .ear {
+            width: 2.4%;
+            height: 5.5%;
+            background: var(--primary);
+            border-radius: 70% 70% 40% 90% / 50% 50% 100% 90%;
+            border: 0.35vmin solid;
+            border-right-color: var(--primary);
+            top: 52%;
+            transform: rotate(-2deg);
+            left: 27%;
+            box-shadow: -0.25vmin -0.25vmin;
+        }
+        
+        .golem .ear::before {
+            content: "";
+            display: block;
+            position: absolute;
+            width: 80%;
+            height: 80%;
+            border-radius: 50%;
+            top: 20%;
+            left: 8%;
+            border: 0.25vmin solid transparent;
+            border-top: 0.4vmin solid;
+            transform: rotate(15deg);
+        }
+        
+        .golem .eyebrow {
+            width: 6%;
+            height: 3%;
+            border-radius: 50%;
+            border: 0.5vmin solid transparent;
+            border-left: 0.35vmin solid transparent;
+            border-top: 0.45vmin solid;
+            top: 52%;
+        }
+        
+        .golem .eyebrow.left {
+            left: 32%;
+        }
+        
+        .golem .eyebrow.right {
+            left: 37.5%;
+        }
+        
+        .golem .eye {
+            width: 3.7%;
+            height: 2.5%;
+            top: 53%;
+            background: #fff;
+            border-radius: 0% 0% 90% 70% / 70%;
+            border: 0.45vmin solid #222;
+        }
+        
+        .golem .eye.left {
+            left: 33.4%;
+            transform: rotate(5deg);
+        }
+        
+        .golem .eye.right {
+            left: 38.4%;
+            transform: rotate(-5deg);
+        }
+        
+        .golem .arm {
+            top: 65%;
+            width: 19%;
+            height: 5%;
+            left: 34%;
+            background: var(--primary);
+            border-radius: 30% 0 / 53%;
+            border: 0.3vmin solid;
+            box-shadow: 5px 5px 11px rgb(0 0 0 / 28%);
+        }
+        
+        .golem .hand {
+            width: 7%;
+            height: 7%;
+            top: 63%;
+            left: 52%;
+            background: var(--primary);
+            border-radius: 50%;
+            border: 0.4vmin solid;
+            border-left: 0.1vmin solid var(--primary);
+        }
+    </style>
 </head>
 
 <body>
-  <div class=" root">
-    <div class="canvas">
-      <div class="desk"></div>
-      <div class="computer-stand-bottom"></div>
-      <div class="computer-stand"></div>
-      <div class="computer-monitor"></div>
-      <div class="computer-bottom"></div>
-      <div class="screen"></div>
-      <div class="computer"></div>
-      <div class="golem">
-        <div class="head"></div>
-        <div class="ear"></div>
-        <div class="eyebrow left"></div>
-        <div class="eyebrow right"></div>
-        <div class="eye left"></div>
-        <div class="eye right"></div>
-        <div class="arm"></div>
-        <div class="hand"></div>
-      </div>
+    <div class=" root">
+        <div class="canvas">
+            <div class="desk"></div>
+            <div class="computer-stand-bottom"></div>
+            <div class="computer-stand"></div>
+            <div class="computer-monitor"></div>
+            <div class="computer-bottom"></div>
+            <div class="screen"></div>
+            <div class="computer"></div>
+            <div class="golem">
+                <div class="head"></div>
+                <div class="ear"></div>
+                <div class="eyebrow left"></div>
+                <div class="eyebrow right"></div>
+                <div class="eye left"></div>
+                <div class="eye right"></div>
+                <div class="arm"></div>
+                <div class="hand"></div>
+            </div>
+        </div>
     </div>
-  </div>
 </body>
 
 </html>
\ No newline at end of file
