@necrolab/dashboard 0.4.61 → 0.4.209

package/src/components/ui/ReconnectIndicator.vue

@@ -1,98 +1,23 @@
 <template>
-    <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 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>
-        
-        <div class="message-container">
-            <h2 class="message-text">{{ props.message }}</h2>
-            <div class="status-bar">
-                <div class="status-fill"></div>
-            </div>
-        </div>
-            </div>
-        </transition>
+        <span class="text-white text-3xl font-light mt-3">{{ props.message }}{{ dots }}</span>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
-import logoIcon from "@/assets/img/logo_icon.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);
-});
+import { ref } from "vue";
+import logoIcon from "@/assets/img/logo_icon_2.png";
 
-// 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);
-};
+const dots = ref(".");
 
-onUnmounted(() => {
-    if (dotInterval) clearInterval(dotInterval);
-    addPageFadeIn();
-});
+setInterval(() => {
+    dots.value += ".";
+    if (dots.value.length > 3) dots.value = ".";
+}, 1000);
 
 const props = defineProps({
     message: {
@@ -102,285 +27,64 @@ const props = defineProps({
 });
 </script>
 
-<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;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.ring-system {
+<style scoped>
+.spinner-container {
     position: relative;
-    width: 160px;
-    height: 160px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 200px;
+    height: 200px;
 }
-
-.ring {
-    position: absolute;
-    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 #9dd3a8;
-    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 #88c999;
-    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 #7bc187;
-    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;
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     border-radius: 50%;
     object-fit: cover;
-    z-index: 10;
-    border: 2px solid rgba(136, 201, 153, 0.3);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    object-position: center;
+    z-index: 2;
 }
-
-.progress-dots {
+.spinner {
     position: absolute;
-    bottom: -40px;
+    width: 185px;
+    height: 185px;
+    top: 50%;
     left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 8px;
-}
-
-.dot {
-    width: 8px;
-    height: 8px;
+    transform: translate(-50%, -50%);
     border-radius: 50%;
-    background: #44454b;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    
-    &.active {
-        background: #88c999;
-        transform: scale(1.2);
-    }
-}
-
-.message-container {
-    text-align: center;
-    max-width: 400px;
-}
-
-.message-text {
-    color: #e2e2e5;
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    letter-spacing: 0.025em;
-}
-
-.status-bar {
-    width: 300px;
-    height: 8px;
-    background: #35363c;
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
-}
-
-.status-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #88c999 0%, #9dd3a8 50%, #88c999 100%);
-    border-radius: 4px;
-    width: 30%;
-    animation: infinite-slide 2s ease-in-out infinite;
-    position: relative;
-    overflow: hidden;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-top: 2px solid #ffffff;
+    animation: spin 1s linear infinite;
 }
-
-.status-fill::after {
-    content: '';
+.glow {
     position: absolute;
-    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;
-}
-
-.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);
+    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;
 }
-
-// Responsive design
-@media (max-width: 768px) {
-    .ring-system {
-        width: 120px;
-        height: 120px;
+@keyframes spin {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
     }
-    
-    .ring-outer {
-        width: 120px;
-        height: 120px;
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
     }
-    
-    .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;
+}
+@keyframes pulse {
+    0%,
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.5;
     }
-    
-    .status-bar {
-        width: 250px;
+    50% {
+        transform: translate(-50%, -50%) scale(1.05);
+        opacity: 0.7;
     }
 }
 </style>

package/src/components/ui/Splash.vue

@@ -1,17 +1,47 @@
 <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" />
-        <SpinnerIcon />
+        <svg class="spinner" viewBox="0 0 50 50">
+            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+        </svg>
     </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>