Init

core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly

@@ -38,6 +38,16 @@ THE SOFTWARE.
         <l:search-bar placeholder="${%Search settings}" id="settings-search-bar" />
       </l:app-bar>
 
+      <div class="booter">
+        <div class="logotings">
+          <div class="jenkinscircle mouse" value="5">
+
+          </div>
+          <img src="${imagesURL}/svgs/logo-jenkins.svg" class="mouse" value="7" />
+        </div>
+        <h1>Jenkins</h1>
+      </div>
+
       <script src="${resURL}/jsbundles/pages/manage-jenkins.js" type="text/javascript" />
 
       <section class="manage-messages">

war/src/main/js/pages/manage-jenkins/index.js

@@ -11,3 +11,30 @@ searchBarInput.suggestions = function () {
     }))
     .filter((item) => !item.url.endsWith("#"));
 };
+
+const booter = document.querySelector(".booter");
+const img = document.querySelector(".booter img");
+
+document.addEventListener("mousemove", parallax);
+function parallax(event) {
+  this.querySelectorAll(".mouse").forEach((shift) => {
+    const position = shift.getAttribute("value");
+
+    const half = window.innerWidth / 2;
+    const posFromHalf = (half - event.pageX) * -1;
+    const offsetX = posFromHalf / half;
+
+
+    const halfY = window.innerHeight / 2;
+    const posYFromHalf = (halfY - event.pageY) * -1;
+    const offsetY = posYFromHalf / halfY;
+
+    const x = position * offsetX;
+    const y = position * offsetY;
+
+    shift.style.setProperty('--shadow-offset-x', x + 'px');
+    shift.style.setProperty('--shadow-offset-y', y + 'px');
+    shift.style.translate = `${x}px ${y}px`;
+    shift.style.rotate = `${x}deg`;
+  });
+}

war/src/main/scss/styles.scss

@@ -51,3 +51,48 @@
 @use "./pages/plugin-manager";
 @use "./pages/setupWizardFirstUser";
 @use "./pages/setupWizardConfigureInstance";
+
+.booter {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  z-index: 1000;
+
+  h1 {
+    font-size: 1.25rem;
+    margin: 0;
+    position: absolute;
+    bottom: calc(var(--section-padding) * 2);
+    font-family: "Georgia", serif;
+    font-weight: 600;
+    color: var(--text-color-secondary);
+  }
+
+  .logotings {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    //border: 5px solid red;
+  }
+
+  .jenkinscircle {
+    width: 100%;
+    aspect-ratio: 1;
+    background: #d33833;
+    border: 3px solid #231f20;
+    box-shadow: inset 3px 3px 0 #ef3d3a;
+    border-radius: 100%;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  img {
+    width: auto;
+    height: 140px;
+    grid-column: 1;
+    grid-row: 1;
+  }
+}