diff --git a/assets/css/popups.css b/assets/css/popups.css index a78aa91..d14e0cf 100644 --- a/assets/css/popups.css +++ b/assets/css/popups.css @@ -59,7 +59,7 @@ .popupMainInsideWrapperBoxBottom { display: flex; flex-direction: column; - grid-gap: 10px; + grid-gap: 15px; padding: 15px; border-top: solid 1px rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); @@ -108,3 +108,108 @@ max-width: 65px; } +.popupMainInsideWrapperBoxMidRelays { + display: flex; + flex-direction: row; + grid-gap: 15px; + flex-wrap: wrap; +} + +.popupMainInsideWrapperBoxMidRelaysRelay { + background: #ffffff; + padding: 4px; + border-radius: 4px; + border: solid 1px rgba(0,0,0,0.1); + display: flex; + flex-direction: row; + grid-gap: 5px; + overflow: hidden; + flex-grow: 1; + position: relative; + justify-content: space-between; +} + +.popupMainInsideWrapperBoxTopLoadingBar { + transition: ease 0.4s; + width: 50%; + height: 24px; + background: #8bca8c; + border-radius: 2px; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; +} + +.popupMainInsideWrapperBoxMidRelaysRelayTextWrapper { + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + grid-gap: 10px; + color: #434343; + padding: 0 5px; + flex-grow: 1; +} + +.popupMainInsideWrapperBoxMidRelaysRelayText { + font-size: 12px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; +} + +.popupMainInsideWrapperBoxMidRelaysRelayIcon { +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelaySuccess { + background: #9fe6a0; +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelaySuccess > :nth-child(1) { + color: #434343; +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelayFail { + background: #ff7f68; +} + +.popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelayFail > :nth-child(1) { + color: white; +} + +.popupMainInsideWrapperBoxTopLoading { +} + +.popupMainInsideWrapperBoxTopLoadingTex { + position: absolute; + font-size: 12px; + line-height: 1; + width: 100%; + text-align: center; + color: rgba(0,0,0,0.5); +} + +.popupMainInsideWrapperBoxTopLoadingBarDot { + width: 12px; + height: 12px; + background: rgba(255,255,255,0.25); + border-radius: 100px; +} + +.popupMainInsideWrapperBoxMidRelaysRelayPaid { + width: 100%; + max-width: 20px; + /*background: #72ab73;*/ + border-radius: 3px; + color: rgba(67,67,67,0.35); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 5px; + font-size: 12px; + outline: solid 1px rgba(0,0,0,0.1); +} + diff --git a/assets/css/styles.css b/assets/css/styles.css index 2854769..d32ba00 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -547,3 +547,16 @@ h1, h2, h3, h4, h5, h6 { padding: 0 0 0 5px; } +.spinMain { + animation: spin 3s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + diff --git a/assets/js/loadingBarAnimation.js b/assets/js/loadingBarAnimation.js new file mode 100644 index 0000000..b9f8898 --- /dev/null +++ b/assets/js/loadingBarAnimation.js @@ -0,0 +1,23 @@ +const dot = document.querySelector('.popupMainInsideWrapperBoxTopLoadingBarDot'); + const container = document.querySelector('.popupMainInsideWrapperBoxTopLoadingBar'); + + function animateDot() { + const containerWidth = container.offsetWidth; + const dotWidth = dot.offsetWidth; + + dot.style.transition = 'transform 3s linear'; + dot.style.transform = `translateX(${containerWidth + dotWidth}px)`; + + // Reset the animation + dot.addEventListener('transitionend', () => { + dot.style.transition = 'none'; // Disable transition during reset + dot.style.transform = `translateX(-${dotWidth}px)`; // Move dot back to start + // Force reflow to restart the animation + dot.offsetHeight; // Trigger reflow + dot.style.transition = 'transform 3s linear'; // Re-enable transition + dot.style.transform = `translateX(${containerWidth + dotWidth}px)`; + }, { once: true }); + } + + animateDot(); + setInterval(animateDot, 3000); // Repeat the animation every 5 seconds \ No newline at end of file diff --git a/dashboard-complete.html b/dashboard-complete.html index e5ff36b..3259352 100644 --- a/dashboard-complete.html +++ b/dashboard-complete.html @@ -489,6 +489,7 @@ + diff --git a/dashboard-draft.html b/dashboard-draft.html index e732e4a..e05edd0 100644 --- a/dashboard-draft.html +++ b/dashboard-draft.html @@ -508,9 +508,6 @@ -
Drag click any of the above elements to add them to your file.
Publishing to relays...
+wss://relay.sigit.io
+Relay connection timed out
+wss://relay.sigit.io
+success message
+wss://relay.sigit.io
+Publishing
+wss://relay.sigit.io
+Publishing
+