@necrolab/dashboard 0.4.220 → 0.5.1

package/src/components/ui/ReconnectIndicator.vue

@@ -1,23 +1,98 @@
 <template>
-    <div class="my-auto relative flex justify-center flex-col items-center" style="height: 80vh">
-        <div class="spinner-container">
-            <div class="spinner"></div>
-            <img :src="logoIcon" alt="Beaker Logo" class="logo" />
+    <div class="reconnect-overlay">
+        <transition name="background-fill" appear>
+            <div class="background-layer"></div>
+        </transition>
+        <transition name="reconnect-content" appear>
+            <div class="reconnect-container">
+        <div class="loading-system">
+            <!-- Geometric loading rings -->
+            <div class="ring-system">
+                <div class="ring ring-outer"></div>
+                <div class="ring ring-middle"></div>
+                <div class="ring ring-inner"></div>
+                <!-- Central logo -->
+                <img :src="logoIcon" alt="Logo" class="logo" />
+            </div>
+            
+            <!-- Progress indicators -->
+            <div class="progress-dots">
+                <div class="dot" :class="{ active: dotIndex >= 0 }"></div>
+                <div class="dot" :class="{ active: dotIndex >= 1 }"></div>
+                <div class="dot" :class="{ active: dotIndex >= 2 }"></div>
+                <div class="dot" :class="{ active: dotIndex >= 3 }"></div>
+            </div>
         </div>
-        <span class="text-white text-3xl font-light mt-3">{{ props.message }}{{ dots }}</span>
+        
+        <div class="message-container">
+            <h2 class="message-text">{{ props.message }}</h2>
+            <div class="status-bar">
+                <div class="status-fill"></div>
+            </div>
+        </div>
+            </div>
+        </transition>
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import logoIcon from "@/assets/img/logo_icon_2.png";
+import { ref, onMounted, onUnmounted } from "vue";
+import logoIcon from "/android-chrome-192x192.png";
+
+const dotIndex = ref(0);
+const progressWidth = ref(0);
+let dotInterval;
+let progressInterval;
+
+// Animate progress dots
+const animateDots = () => {
+    dotIndex.value = (dotIndex.value + 1) % 5; // 0-4, with 4 being all off
+};
+
+// Animate progress bar
+onMounted(() => {
+    dotInterval = setInterval(animateDots, 600);
+});
 
-const dots = ref(".");
+// Add page fade-in effect when modal closes
+const addPageFadeIn = () => {
+    // Add global style for underlying page fade-in
+    const style = document.createElement('style');
+    style.textContent = `
+        .page-fade-in {
+            animation: pageReveal 0.6s ease-out forwards;
+        }
+        @keyframes pageReveal {
+            from {
+                opacity: 0.7;
+                transform: scale(0.98);
+                filter: blur(1px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+                filter: blur(0);
+            }
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // Apply the class to the body
+    document.body.classList.add('page-fade-in');
+    
+    // Remove the class and style after animation
+    setTimeout(() => {
+        document.body.classList.remove('page-fade-in');
+        if (document.head.contains(style)) {
+            document.head.removeChild(style);
+        }
+    }, 600);
+};
 
-setInterval(() => {
-    dots.value += ".";
-    if (dots.value.length > 3) dots.value = ".";
-}, 1000);
+onUnmounted(() => {
+    if (dotInterval) clearInterval(dotInterval);
+    addPageFadeIn();
+});
 
 const props = defineProps({
     message: {
@@ -27,64 +102,285 @@ const props = defineProps({
 });
 </script>
 
-<style scoped>
-.spinner-container {
+<style lang="scss" scoped>
+.reconnect-overlay {
+    position: fixed;
+    top: -100vh;
+    left: -100vw;
+    right: -100vw;
+    bottom: -100vh;
+    z-index: 9999;
+    --tw-ring-color: transparent !important;
+}
+
+.background-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(26, 27, 30, 0.98);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+.reconnect-container {
+    position: absolute;
+    top: 100vh;
+    left: 100vw;
+    right: 100vw;
+    bottom: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3rem;
+    --tw-ring-color: transparent !important;
+}
+
+.loading-system {
     position: relative;
-    width: 200px;
-    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-.logo {
+
+.ring-system {
+    position: relative;
+    width: 160px;
+    height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ring {
     position: absolute;
-    width: 180px;
-    height: 180px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: transparent !important;
+    --tw-ring-color: transparent !important;
+    border: 4px solid transparent;
+}
+
+.ring-outer {
+    width: 160px;
+    height: 160px;
+    border-top: 4px solid oklch(0.78 0.12 145);
+    border-right: 4px solid rgba(157, 211, 168, 0.3);
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid transparent;
+    animation: breathe-slow 3s ease-in-out infinite;
+    top: 0;
+    left: 0;
+}
+
+.ring-middle {
+    width: 120px;
+    height: 120px;
+    border-top: 4px solid oklch(0.72 0.15 145);
+    border-right: 4px solid rgba(136, 201, 153, 0.4);
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid transparent;
+    animation: breathe-medium 2.5s ease-in-out infinite reverse;
+    top: 20px;
+    left: 20px;
+}
+
+.ring-inner {
+    width: 80px;
+    height: 80px;
+    border-top: 4px solid oklch(0.68 0.15 145);
+    border-right: 4px solid rgba(123, 193, 135, 0.5);
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid transparent;
+    animation: breathe-fast 2s ease-in-out infinite;
+    top: 40px;
+    left: 40px;
+}
+
+.logo {
+    width: 72px;
+    height: 72px;
     border-radius: 50%;
     object-fit: cover;
-    object-position: center;
-    z-index: 2;
+    z-index: 10;
+    border: 2px solid rgba(136, 201, 153, 0.3);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
-.spinner {
+
+.progress-dots {
     position: absolute;
-    width: 185px;
-    height: 185px;
-    top: 50%;
+    bottom: -40px;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    border-top: 2px solid #ffffff;
-    animation: spin 1s linear infinite;
+    background: oklch(0.28 0 0);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &.active {
+        background: oklch(0.72 0.15 145);
+        transform: scale(1.2);
+    }
+}
+
+.message-container {
+    text-align: center;
+    max-width: 400px;
+}
+
+.message-text {
+    color: oklch(0.90 0 0);
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    letter-spacing: 0.025em;
+}
+
+.status-bar {
+    width: 300px;
+    height: 8px;
+    background: oklch(0.22 0 0);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+}
+
+.status-fill {
+    height: 100%;
+    background: linear-gradient(90deg, oklch(0.72 0.15 145) 0%, oklch(0.78 0.12 145) 50%, oklch(0.72 0.15 145) 100%);
+    border-radius: 4px;
+    width: 30%;
+    animation: infinite-slide 2s ease-in-out infinite;
+    position: relative;
+    overflow: hidden;
 }
-.glow {
+
+.status-fill::after {
+    content: '';
     position: absolute;
-    width: 220px;
-    height: 220px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
-    animation: pulse 2s ease-in-out infinite;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: shimmer 2s ease-in-out infinite;
+}
+
+// Smooth beautiful animations
+@keyframes breathe-slow {
+    0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
+    50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
+    100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
+}
+
+@keyframes breathe-medium {
+    0% { transform: rotate(0deg) scale(1); opacity: 0.9; }
+    50% { transform: rotate(-180deg) scale(0.95); opacity: 1; }
+    100% { transform: rotate(-360deg) scale(1); opacity: 0.9; }
+}
+
+@keyframes breathe-fast {
+    0% { transform: rotate(0deg) scale(1); opacity: 1; }
+    50% { transform: rotate(180deg) scale(1.08); opacity: 0.7; }
+    100% { transform: rotate(360deg) scale(1); opacity: 1; }
+}
+
+@keyframes infinite-slide {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(250%); }
+    100% { transform: translateX(-100%); }
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    50% { transform: translateX(100%); }
+    100% { transform: translateX(300%); }
+}
+
+// Staged beautiful transitions
+.background-fill-enter-active {
+    transition: all 0.15s ease-out;
 }
-@keyframes spin {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
+
+.background-fill-leave-active {
+    transition: all 0.3s ease-in;
+}
+
+.background-fill-enter-from {
+    opacity: 0;
+    transform: scale(0.8);
+}
+
+.background-fill-leave-to {
+    opacity: 0;
+    transform: scale(1.2);
+}
+
+.reconnect-content-enter-active {
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0.1s;
+}
+
+.reconnect-content-leave-active {
+    transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.reconnect-content-enter-from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+    filter: blur(4px);
+}
+
+.reconnect-content-leave-to {
+    opacity: 0;
+    transform: scale(1.1) translateY(-10px);
+    filter: blur(2px);
+}
+
+// Responsive design
+@media (max-width: 768px) {
+    .ring-system {
+        width: 120px;
+        height: 120px;
     }
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
+    
+    .ring-outer {
+        width: 120px;
+        height: 120px;
     }
-}
-@keyframes pulse {
-    0%,
-    100% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 0.5;
+    
+    .ring-middle {
+        width: 90px;
+        height: 90px;
+        top: 15px;
+        left: 15px;
+    }
+    
+    .ring-inner {
+        width: 60px;
+        height: 60px;
+        top: 30px;
+        left: 30px;
+    }
+    
+    .logo {
+        width: 54px;
+        height: 54px;
+    }
+    
+    .message-text {
+        font-size: 1.25rem;
     }
-    50% {
-        transform: translate(-50%, -50%) scale(1.05);
-        opacity: 0.7;
+    
+    .status-bar {
+        width: 250px;
     }
 }
 </style>

package/src/components/ui/Splash.vue

@@ -1,47 +1,17 @@
 <template>
     <div class="darkBG h-screen w-screen z-[1000] fixed flex items-center flex-col justify-center gap-y-3">
         <img src="@/assets/img/logo_trans.png" class="w-[300px] mx-auto" />
-        <svg class="spinner" viewBox="0 0 50 50">
-            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
-        </svg>
+        <SpinnerIcon />
     </div>
 </template>
+
+<script setup>
+import { SpinnerIcon } from "@/components/icons";
+</script>
 <style lang="scss" scoped>
 .darkBG {
     background-color: rgba(28, 28, 49, 100%);
 }
-.spinner {
-    @apply mx-auto;
-    animation: rotate 2s linear infinite;
-    z-index: 2;
-
-    width: 30px;
-    height: 30px;
-    & .path {
-        stroke: rgba(70, 198, 210, 100%);
-        stroke-linecap: round;
-        animation: dash 1.5s ease-in-out infinite;
-    }
-}
-@keyframes rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-    }
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-    }
-}
 </style>
 
 <style>