diff --git a/app/public/badge.js b/app/public/badge.js new file mode 100644 index 0000000000000000000000000000000000000000..11ed4ccecd747d27931393fce7ec8e911ed6d367 --- /dev/null +++ b/app/public/badge.js @@ -0,0 +1,45 @@ +var SWU__currentScript = document.currentScript || {}; +var SWU__DOMReady = function(callback) { + document.readyState === 'interactive' || document.readyState === 'complete' ? callback() : document.addEventListener('DOMContentLoaded', callback); +}; +SWU__DOMReady(function() { + const el = document.createElement('div'); + + // Options + const url = SWU__currentScript.getAttribute('url'); + const title = SWU__currentScript.getAttribute('title'); + const position = SWU__currentScript.getAttribute('position'); + + // Set custom title + el.title = title || 'We stand with Ukraine'; + + // Set custom URL + if (url) { + el.style.cursor = 'pointer' + el.target = '_blank' + el.addEventListener('click', function() { + window.open(url, '_blank') + }) + } + + // Set custom position (left, right) + if (position === 'right') { + el.style.right = '-80px' + el.style.bottom = '20px' + el.style.transform = 'rotate(135deg)' + el.style.background = 'linear-gradient(-360deg, #005BBB 50%, #FFD500 50%)' + } else { + el.style.left = '-80px' + el.style.bottom = '20px' + el.style.transform = 'rotate(45deg)' + el.style.background = 'linear-gradient(-180deg, #005BBB 50%, #FFD500 50%)' + } + + el.style.width = '300px' + el.style.height = '84px' + el.style.position = 'fixed'; + el.style.zIndex = '999'; + + el.setAttribute('id', 'we-stand-with-ukraine') + document.body.appendChild(el); +}); diff --git a/app/src/App.svelte b/app/src/App.svelte index 174e098d283cbe7f1604dc04c955e7ba9debe398..c665dd612da867da432af092402666daf8ce3a8d 100755 --- a/app/src/App.svelte +++ b/app/src/App.svelte @@ -333,7 +333,9 @@ function saveSettings() { {/key} </div> {:else if tab == 3} - <div>Coming soon...</div> + <div class="empty bg-dark pt-3 pb-6" out:fade="{{ duration: 200 }}"> + <p class="empty-title h4" in:slide="{{delay: 100}}">Coming soon...</p> + </div> {:else if tab == 4} <div class="empty bg-dark pt-3 pb-6" out:fade="{{ duration: 200 }}"> <div class="empty-icon" in:slide>