update login

keycloak/themes/drill-luxe/login/login.ftl

@@ -39,11 +39,40 @@
       </div>
 
       <div class="drill-login__industrial-panel" aria-hidden="true">
-        <div class="drill-login__rig">
+        <div class="drill-login__signal-flow">
-          <span class="drill-login__rig-mast"></span>
+          <svg viewBox="0 0 520 240" role="img" focusable="false">
-          <span class="drill-login__rig-leg drill-login__rig-leg--left"></span>
+            <defs>
-          <span class="drill-login__rig-leg drill-login__rig-leg--right"></span>
+              <linearGradient id="signalLine" x1="0" x2="1" y1="0" y2="0">
-          <span class="drill-login__rig-floor"></span>
+                <stop offset="0%" stop-color="#d7a15f" stop-opacity="0.22" />
+                <stop offset="52%" stop-color="#34d399" stop-opacity="0.86" />
+                <stop offset="100%" stop-color="#d7a15f" stop-opacity="0.22" />
+              </linearGradient>
+            </defs>
+            <path class="drill-login__signal-path drill-login__signal-path--base" d="M42 168 H122 L162 112 H246 L286 72 H402" />
+            <path class="drill-login__signal-path drill-login__signal-path--base" d="M42 74 H118 L164 126 H252 L306 166 H474" />
+            <path class="drill-login__signal-path drill-login__signal-path--base" d="M86 205 H190 L236 158 H342 L398 112 H478" />
+            <path class="drill-login__signal-path drill-login__signal-path--pulse drill-login__signal-path--one" d="M42 168 H122 L162 112 H246 L286 72 H402" />
+            <path class="drill-login__signal-path drill-login__signal-path--pulse drill-login__signal-path--two" d="M42 74 H118 L164 126 H252 L306 166 H474" />
+            <path class="drill-login__signal-path drill-login__signal-path--pulse drill-login__signal-path--three" d="M86 205 H190 L236 158 H342 L398 112 H478" />
+            <g class="drill-login__signal-nodes">
+              <circle cx="42" cy="168" r="7" />
+              <circle cx="162" cy="112" r="7" />
+              <circle cx="286" cy="72" r="7" />
+              <circle cx="402" cy="72" r="7" />
+              <circle cx="42" cy="74" r="7" />
+              <circle cx="164" cy="126" r="7" />
+              <circle cx="306" cy="166" r="7" />
+              <circle cx="474" cy="166" r="7" />
+              <circle cx="86" cy="205" r="7" />
+              <circle cx="236" cy="158" r="7" />
+              <circle cx="398" cy="112" r="7" />
+              <circle cx="478" cy="112" r="7" />
+            </g>
+          </svg>
+          <div class="drill-login__signal-flow-label">
+            <strong>Signal integrity</strong>
+            <span>field data bus / protected telemetry channel</span>
+          </div>
         </div>
         <div class="drill-login__signal-list">
           <div>

keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css

@@ -223,7 +223,7 @@ body.drill-login::before {
   align-items: stretch;
 }
 
-.drill-login__rig,
+.drill-login__signal-flow,
 .drill-login__signal-list {
   position: relative;
   overflow: hidden;
@@ -235,55 +235,98 @@ body.drill-login::before {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
-.drill-login__rig {
+.drill-login__signal-flow {
   min-height: 224px;
+  display: grid;
+  align-items: stretch;
 }
 
-.drill-login__rig::before {
+.drill-login__signal-flow::before {
   content: "";
   position: absolute;
-  inset: auto 24px 28px;
+  inset: 0;
-  height: 1px;
+  pointer-events: none;
-  background: linear-gradient(90deg, transparent, rgba(215, 161, 95, 0.7), transparent);
+  background:
+    radial-gradient(circle at 18% 24%, rgba(52, 211, 153, 0.12), transparent 28%),
+    linear-gradient(90deg, rgba(215, 161, 95, 0.08), transparent 38%, rgba(52, 211, 153, 0.08));
 }
 
-.drill-login__rig-mast,
+.drill-login__signal-flow svg {
-.drill-login__rig-leg,
+  position: relative;
-.drill-login__rig-floor {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 224px;
+  padding: 16px;
+}
+
+.drill-login__signal-path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.drill-login__signal-path--base {
+  stroke: rgba(148, 163, 184, 0.24);
+  stroke-width: 2;
+}
+
+.drill-login__signal-path--pulse {
+  stroke: url("#signalLine");
+  stroke-width: 3;
+  stroke-dasharray: 42 280;
+  animation: drillSignalFlow 3.2s linear infinite;
+  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.42));
+}
+
+.drill-login__signal-path--two {
+  animation-delay: -1s;
+}
+
+.drill-login__signal-path--three {
+  animation-delay: -2s;
+}
+
+.drill-login__signal-nodes circle {
+  fill: #0b1220;
+  stroke: rgba(215, 161, 95, 0.68);
+  stroke-width: 2;
+  filter: drop-shadow(0 0 8px rgba(215, 161, 95, 0.22));
+  animation: drillSignalNodePulse 2.8s ease-in-out infinite;
+}
+
+.drill-login__signal-nodes circle:nth-child(3n) {
+  stroke: rgba(52, 211, 153, 0.78);
+  animation-delay: -1.4s;
+}
+
+.drill-login__signal-flow-label {
   position: absolute;
-  left: 50%;
+  left: 14px;
-  display: block;
+  right: 14px;
-  background: rgba(215, 161, 95, 0.84);
+  bottom: 12px;
-  box-shadow: 0 0 18px rgba(215, 161, 95, 0.16);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(148, 163, 184, 0.12);
 }
 
-.drill-login__rig-mast {
+.drill-login__signal-flow-label strong {
-  bottom: 48px;
+  color: #f8fafc;
-  width: 4px;
+  font-size: 0.86rem;
-  height: 132px;
-  transform: translateX(-50%);
 }
 
-.drill-login__rig-leg {
+.drill-login__signal-flow-label span {
-  bottom: 48px;
+  min-width: 0;
-  width: 3px;
+  overflow: hidden;
-  height: 134px;
+  color: var(--drill-muted);
-  transform-origin: bottom;
+  font-size: 0.74rem;
-}
+  text-align: right;
-
+  text-overflow: ellipsis;
-.drill-login__rig-leg--left {
+  white-space: nowrap;
-  transform: translateX(-50%) rotate(18deg);
-}
-
-.drill-login__rig-leg--right {
-  transform: translateX(-50%) rotate(-18deg);
-}
-
-.drill-login__rig-floor {
-  bottom: 42px;
-  width: 120px;
-  height: 5px;
-  transform: translateX(-50%);
 }
 
 .drill-login__signal-list {
@@ -534,6 +577,27 @@ body.drill-login::before {
   font-size: 0.78rem;
 }
 
+@keyframes drillSignalFlow {
+  from {
+    stroke-dashoffset: 320;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes drillSignalNodePulse {
+  0%,
+  100% {
+    opacity: 0.72;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
 @media (max-width: 1120px) {
   .drill-login__shell {
     grid-template-columns: 1fr;
@@ -599,7 +663,8 @@ body.drill-login::before {
     min-height: 180px;
   }
 
-  .drill-login__rig {
+  .drill-login__signal-flow,
+  .drill-login__signal-flow svg {
     min-height: 180px;
   }