django-handyhelpers 0.3.20__py3-none-any.whl → 0.3.36__py3-none-any.whl

handyhelpers/static/node_modules/fun-effects/README.md

@@ -0,0 +1,10 @@
+# fun-effects
+css effects library 
+
+
+
+### installation instructions
+
+```shell
+npm install https://github.com/davidslusser/fun-effects
+```

handyhelpers/static/node_modules/fun-effects/dist/css/background_icons.min.css

@@ -0,0 +1 @@
+.icons-container{position:fixed;top:0;left:0;width:100%;height:100%;background-size:cover;z-index:-1;overflow:clip;padding:3rem}.icon{position:absolute;color:rgba(255,255,255,.1);opacity:.1;font-size:2rem;margin:3rem}@keyframes glow{0%{opacity:.4;transform:scale(.75)}50%{opacity:.4;text-shadow:none;transform:scale(1.25)}100%{opacity:.4;transform:scale(.75);text-shadow:0 0 10px var(--light,#fff)}}

handyhelpers/static/node_modules/fun-effects/dist/css/blur_group.min.css

@@ -0,0 +1 @@
+.blur-group-container{pointer-events:none}.blur-group-container>*{pointer-events:auto;transition:.4s}.blur-group-container:focus-within>*,.blur-group-container:hover>*{opacity:.3;filter:blur(2px)}.blur-group-container:focus-within>:focus,.blur-group-container:hover>:hover{opacity:1;outline:0;filter:blur(0px);transform:scale(1.1)}

handyhelpers/static/node_modules/fun-effects/dist/css/fades.min.css

@@ -0,0 +1 @@
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn var(--fade-duration,1s) ease-in-out;-webkit-animation:fadeIn var(--fade-duration,1s) ease-in-out;-moz-animation:fadeIn var(--fade-duration,1s) ease-in-out;-o-animation:fadeIn var(--fade-duration,1s) ease-in-out;-ms-animation:fadeIn var(--fade-duration,1s) ease-in-out;opacity:1}@keyframes fadeInBlur{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}.fade-in-blur{animation:fadeInBlur var(--fade-duration,1s) ease-in-out;-webkit-animation:fadeInBlur var(--fade-duration,1s) ease-in-out;-moz-animation:fadeInBlur var(--fade-duration,1s) ease-in-out;-o-animation:fadeInBlur var(--fade-duration,1s) ease-in-out;-ms-animation:fadeInBlur var(--fade-duration,1s) ease-in-out;opacity:1;filter:blur(0)}.fade-in-from-bottom{animation:fade-in-from-bottom linear;-moz-animation:fade-in-from-bottom linear;animation-range:entry 0% entry 125%;animation-timeline:view()}.fade-in-from-left{animation:fade-in-from-left linear;animation-range:entry 0% entry 150%;animation-timeline:view()}.fade-in-from-right{animation:fade-in-from-right linear;animation-range:entry 0% entry 150%;animation-timeline:view()}@keyframes fade-in-from-bottom{0%{opacity:0;transform:translateY(100px)}100%{opacity:1;transform:translateX(0)}}@keyframes fade-in-from-left{0%{opacity:0;transform:translateX(-100px)}100%{opacity:1;transform:translateX(0)}}@keyframes fade-in-from-right{0%{opacity:0;transform:translateX(100px)}100%{opacity:1;transform:translateX(0)}}

handyhelpers/static/node_modules/fun-effects/dist/css/marquee.min.css

@@ -0,0 +1 @@
+.marquee-wrapper{margin:2rem;padding:2rem;width:95%;max-width:95%;margin-inline:auto;min-height:calc(var(--marquee-item-height,100px) + 4rem);position:relative;overflow-x:hidden;mask-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0));display:flex}@keyframes scrollLeft{to{left:calc(var(--marquee-item-width,200px) * -1)}}@keyframes scrollRight{to{right:calc(var(--marquee-item-width,200px) * -1)}}.itemLeft,.itemRight{position:absolute;animation-timing-function:linear;animation-duration:var(--marquee-duration, 60s);animation-iteration-count:infinite}.itemLeft{animation-name:scrollLeft}.itemRight{animation-name:scrollRight}

handyhelpers/static/node_modules/fun-effects/dist/css/scroller.min.css

@@ -0,0 +1 @@
+:root{--primary:rgb(0, 0, 255)}.scroller-container{display:flex;justify-content:center;align-items:center;margin-left:2.5rem;margin-right:2.5rem}.scroller{margin-left:1rem;margin-right:1rem}.scroller__inner{padding-block:1rem;display:flex;flex-wrap:wrap;gap:1rem}.scroller[data-animated=true]{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,var(--light,rgb(255,255,255)) 20%,var(--light,rgb(255,255,255)) 80%,transparent);mask:linear-gradient(90deg,transparent,var(--light,rgb(255,255,255)) 20%,var(--light,rgb(255,255,255)) 80%,transparent)}.scroller[data-animated=true] .scroller__inner{width:max-content;flex-wrap:nowrap;animation:scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite}.scroller-nav{text-align:left;font-size:rem}.scroller-nav li{margin-right:1rem;display:inline}.scroller-nav a{text-decoration:none;transition:opacity .3s ease;color:var(--light,#fff);opacity:.5}.scroller-nav li a:hover{opacity:1}.scroller[data-animated=true] .scroller__inner[paused]{animation-play-state:paused}.scroller[data-direction=right]{--_animation-direction:reverse}.scroller[data-direction=left]{--_animation-direction:forwards}.scroller[data-speed=fast]{--_animation-duration:20s}.scroller[data-speed=slow]{--_animation-duration:60s}@keyframes scroll{to{transform:translate(calc(-50% - .5rem))}}a{text-decoration:none!important}.card{width:250px;height:125px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:rgba(255,255,255,.1);border-radius:.5rem;box-shadow:0 .25rem 1rem -.25rem var(--light,#fff);text-align:center;color:var(--light,#fff);margin:.75rem;font-weight:700}.card-title{font-size:18px;margin-bottom:1rem;color:var(--light,#fff)}.card-subtitle{font-size:14px;color:var(--light,rgba(255,255,255,.5));margin-top:8px;font-weight:400}.card-secondary{font-size:10px;color:var(--light,rgba(255,255,255,.55));margin-top:8px;font-weight:400}

handyhelpers/static/node_modules/fun-effects/dist/index.js

@@ -0,0 +1,15 @@
+// Importing CSS files
+import './dist/css/background_icons.min.css';
+import './dist/css/blur_group.min.css';
+import './dist/css/fades.min.css';
+import './dist/css/marquee.min.css';
+import './dist/css/scroller.min.css';
+
+// Import all scripts into a single object
+import allScripts from './src/js'; 
+
+// Log a message
+console.log('Fun effects loaded!');
+
+// Re-export the combined scripts object (optional)
+export default allScripts;

handyhelpers/static/node_modules/fun-effects/dist/js/background_icons.min.js

@@ -0,0 +1 @@
+function getRandomPosition(existingPositions,iconSize){var screenWidth=window.innerWidth;var screenHeight=window.innerHeight;var randomX,randomY;var overlap;do{randomX=Math.floor(Math.random()*(screenWidth-iconSize));randomY=Math.floor(Math.random()*(screenHeight-iconSize));overlap=existingPositions.some(pos=>{return randomX<pos.x+iconSize&&randomX+iconSize>pos.x&&randomY<pos.y+iconSize&&randomY+iconSize>pos.y})}while(overlap);return{x:randomX,y:randomY}}function createRandomIcons(numIcons){var iconsContainer=document.createElement("div");iconsContainer.classList.add("icons-container");var iconClasses=['<i class="fa-brands fa-python"></i>','<i class="fa-brands fa-golang"></i>','<i class="fa-brands fa-rust"></i>','<i class="fa-brands fa-microsoft"></i>','<i class="fa-solid fa-microchip"></i>','<i class="fa-brands fa-docker"></i>','<i class="fa-brands fa-github"></i>','<i class="fa-brands fa-git"></i>','<i class="fa-solid fa-code-branch"></i>','<i class="fa-solid fa-database"></i>','<i class="fa-solid fa-server"></i>','<i class="fa-brands fa-discord"></i>','<i class="fa-solid fa-code"></i>','<i class="fa-solid fa-network-wired"></i>','<i class="fa-brands fa-linkedin"></i>','<i class="fa-brands fa-aws"></i>','<i class="fa-brands fa-google"></i>','<i class="fa-brands fa-google-play"></i>','<i class="fa-brands fa-app-store-ios"></i>','<i class="fa-brands fa-html5"></i>','<i class="fa-brands fa-css3-alt"></i>','<i class="fa-brands fa-js"></i>','<i class="fa-brands fa-codepen"></i>','<i class="fa-solid fa-terminal"></i>','<i class="fa-brands fa-stack-overflow"></i>','<i class="fa-solid fa-layer-group"></i>','<i class="fa-solid fa-dharmachakra"></i>','<i class="fa-brands fa-python"></i>','<i class="fa-brands fa-golang"></i>','<i class="fa-brands fa-rust"></i>'];var usedIcons=[];var existingPositions=[];var iconSize=32+100;if(numIcons>iconClasses.length){numIcons=iconClasses.length}for(var i=0;i<numIcons;i++){var randomIconClass;do{randomIconClass=iconClasses[Math.floor(Math.random()*iconClasses.length)]}while(usedIcons.includes(randomIconClass));usedIcons.push(randomIconClass);var icon=document.createElement("div");icon.classList.add("icon");icon.innerHTML=randomIconClass;var randomPosition=getRandomPosition(existingPositions,iconSize);console.log(randomPosition);existingPositions.push(randomPosition);icon.style.top=randomPosition.y+"px";icon.style.left=randomPosition.x+"px";icon.style.animation="glow "+(Math.random()*20+10)+"s infinite alternate";iconsContainer.appendChild(icon)}document.body.appendChild(iconsContainer)}function isMobile(){return window.innerWidth<=768}document.addEventListener("DOMContentLoaded",()=>{if(!isMobile()){createRandomIcons(20)}});

handyhelpers/static/node_modules/fun-effects/dist/js/marquee.min.js

@@ -0,0 +1 @@
+function addAnimationDelay(){const wrappers=document.querySelectorAll(".marquee-wrapper");wrappers.forEach(wrapper=>{const elements=Array.from(wrapper.children);const totalElements=elements.length;const computedStyles=window.getComputedStyle(wrapper);const marqueeDuration=computedStyles.getPropertyValue("--marquee-duration");elements.forEach((element,index)=>{const n=index+1;const animationDelay=`calc(${marqueeDuration} / ${totalElements} * (${totalElements} - ${n}) * -1)`;element.style.animationDelay=animationDelay})})}function setRightProperty(){const wrappers=document.querySelectorAll(".marquee-wrapper");wrappers.forEach(wrapper=>{const itemRightElements=wrapper.querySelectorAll(".itemRight");const totalRightItems=itemRightElements.length;const computedStyles=window.getComputedStyle(wrapper);const marqueeItemWidth=computedStyles.getPropertyValue("--marquee-item-width");itemRightElements.forEach((element,index)=>{element.style.right=`max(calc(${marqueeItemWidth} * ${totalRightItems}), calc(100% + ${marqueeItemWidth}))`})})}function setLeftProperty(){const wrappers=document.querySelectorAll(".marquee-wrapper");wrappers.forEach(wrapper=>{const itemLeftElements=wrapper.querySelectorAll(".itemLeft");const totalLeftItems=itemLeftElements.length;const computedStyles=window.getComputedStyle(wrapper);const marqueeItemWidth=computedStyles.getPropertyValue("--marquee-item-width");itemLeftElements.forEach((element,index)=>{element.style.left=`max(calc(${marqueeItemWidth} * ${totalLeftItems}), calc(100% + ${marqueeItemWidth}))`})})}function addMarqueeMouseListener(){const marqueeWrappers=document.querySelectorAll(".marquee-wrapper");marqueeWrappers.forEach(wrapper=>{wrapper.addEventListener("mouseenter",()=>{wrapper.childNodes.forEach(child=>{if(child.nodeType===Node.ELEMENT_NODE){child.style.animationPlayState="paused"}})});wrapper.addEventListener("mouseleave",()=>{wrapper.childNodes.forEach(child=>{if(child.nodeType===Node.ELEMENT_NODE){child.style.animationPlayState="running"}})})})}document.addEventListener("DOMContentLoaded",()=>{addAnimationDelay();setRightProperty();setLeftProperty();addMarqueeMouseListener()});

handyhelpers/static/node_modules/fun-effects/dist/js/scroller.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){const scrollers=document.querySelectorAll(".scroller");if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches){addAnimation()}function addAnimation(){scrollers.forEach(scroller=>{scroller.setAttribute("data-animated",true);const scrollerInner=scroller.querySelector(".scroller__inner");const scrollerContent=Array.from(scrollerInner.children);scrollerContent.forEach(item=>{const duplicatedItem=item.cloneNode(true);duplicatedItem.setAttribute("aria-hidden",true);scrollerInner.appendChild(duplicatedItem)});scrollerInner.addEventListener("mouseenter",()=>{scrollerInner.setAttribute("paused","")});scrollerInner.addEventListener("mouseleave",()=>{scrollerInner.removeAttribute("paused")})})}});

handyhelpers/static/node_modules/fun-effects/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "fun-effects",
+    "version": "0.0.2",
+    "description": "A collecction of css and javascript effects",
+    "main": "dist/index.min.js",
+    "scripts": {
+        "build": "npm run build-css && npm run build-js",
+        "build-css": "postcss src/css/scroller.css -o dist/css/scroller.min.css",
+        "build-js": "terser src/js/scroller.js -o dist/js/scroller.min.js",
+        "prebuild": "mkdir -p dist/css dist/js"
+    },
+    "devDependencies": {
+        "eslint": "^9.5.0",
+        "postcss-cli": "^11.0.0",
+        "terser": "^5.31.1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/davidslusser/fun-effects.git"
+    },
+    "keywords": [
+        "scroller",
+        "css",
+        "javascript"
+    ],
+    "author": "David Slusser",
+    "license": "GNU GENERAL PUBLIC LICENSE Version 3",
+    "files": [
+        "dist/",
+        "src/",
+        "README.md",
+        "LICENSE"
+    ],
+    "dependencies": {
+        "clean-css": "^5.3.3",
+        "minify": "^11.2.1",
+        "uglify-js": "^3.18.0"
+    }
+}

handyhelpers/static/node_modules/fun-effects/src/css/background_icons.css

@@ -0,0 +1,39 @@
+.icons-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    z-index: -1;
+    overflow: clip;
+    padding: 3rem;
+}
+
+.icon {
+    position: absolute;
+    color: rgba(255, 255, 255, 0.1);
+    opacity: .1;
+    font-size: 2rem;
+    margin: 3rem;
+}
+
+/* Animation for glowing effect */
+@keyframes glow {
+    0% {
+        opacity: 0.4;
+        transform: scale(.75);
+    }
+
+    50% {
+        opacity: 0.4;
+        text-shadow: none;
+        transform: scale(1.25);
+    }
+
+    100% {
+        opacity: 0.4;
+        transform: scale(.75);
+        text-shadow: 0 0 10px var(--light, rgb(255, 255, 255));
+    }
+}

handyhelpers/static/node_modules/fun-effects/src/css/blur_group.css

@@ -0,0 +1,22 @@
+.blur-group-container {
+    pointer-events: none;
+}
+
+.blur-group-container > * {
+    pointer-events: auto;
+    transition: .4s;
+}
+
+.blur-group-container:hover > *,
+.blur-group-container:focus-within > * {
+    opacity: 0.3;
+    filter: blur(2px);
+}
+
+.blur-group-container:hover > :hover,
+.blur-group-container:focus-within > :focus {
+    opacity: 1;
+    outline: none;
+    filter: blur(0px);
+    transform: scale(1.1); 
+}

handyhelpers/static/node_modules/fun-effects/src/css/fades.css

@@ -0,0 +1,94 @@
+
+/* Define the fade-in animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Apply the fade-in effect to the div */
+.fade-in {
+    animation: fadeIn var(--fade-duration, 1s) ease-in-out; /* Use CSS variable with a default value */
+    -webkit-animation: fadeIn var(--fade-duration, 1s) ease-in-out; /* Safari and Chrome */
+    -moz-animation: fadeIn var(--fade-duration, 1s) ease-in-out; /* Firefox */
+    -o-animation: fadeIn var(--fade-duration, 1s) ease-in-out; /* Opera */
+    -ms-animation: fadeIn var(--fade-duration, 1s) ease-in-out; /* Internet Explorer */
+    opacity: 1; /* Ensures the div is visible after the animation */
+}
+
+
+/* Define the fade-in blur animation */
+@keyframes fadeInBlur {
+    from {
+        opacity: 0;
+        filter: blur(10px); /* Start with a blur */
+    }
+    to {
+        opacity: 1;
+        filter: blur(0); /* End with no blur */
+    }
+}
+
+/* Apply the fade-in blur effect to the div */
+.fade-in-blur {
+    animation: fadeInBlur var(--fade-duration, 1s) ease-in-out; /* Use CSS variable with a default value */
+    -webkit-animation: fadeInBlur var(--fade-duration, 1s) ease-in-out; /* Safari and Chrome */
+    -moz-animation: fadeInBlur var(--fade-duration, 1s) ease-in-out; /* Firefox */
+    -o-animation: fadeInBlur var(--fade-duration, 1s) ease-in-out; /* Opera */
+    -ms-animation: fadeInBlur var(--fade-duration, 1s) ease-in-out; /* Internet Explorer */
+    opacity: 1; /* Ensures the div is visible after the animation */
+    filter: blur(0); /* Ensures the div is not blurred after the animation */
+}
+
+.fade-in-from-bottom {
+    animation: fade-in-from-bottom linear;
+    -moz-animation: fade-in-from-bottom linear;
+    animation-range: entry 0% entry 125%;
+    animation-timeline: view();
+}
+.fade-in-from-left {
+    animation: fade-in-from-left linear;
+    animation-range: entry 0% entry 150%;
+    animation-timeline: view();
+}
+.fade-in-from-right {
+    animation: fade-in-from-right linear;
+    animation-range: entry 0% entry 150%;
+    animation-timeline: view();
+}
+
+@keyframes fade-in-from-bottom {
+    0% { 
+        opacity: 0;
+        transform: translateY(100px);
+    }
+    100% { 
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fade-in-from-left {
+    0% { 
+        opacity: 0;
+        transform: translateX(-100px);
+    }
+    100% { 
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fade-in-from-right {
+    0% { 
+        opacity: 0;
+        transform: translateX(100px);
+    }
+    100% { 
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

handyhelpers/static/node_modules/fun-effects/src/css/marquee.css

@@ -0,0 +1,45 @@
+
+.marquee-wrapper {
+  margin: 2rem;
+  padding: 2rem;
+  width: 95%;
+  max-width: 95%;
+  margin-inline: auto;
+  min-height: calc(var(--marquee-item-height, 100px) + 4rem);
+  position: relative;
+  overflow-x: hidden;
+  mask-image: linear-gradient(to right,rgba(0, 0, 0, 0),rgba(0, 0, 0, 1) 20%,rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
+  display: flex;
+}
+
+
+
+@keyframes scrollLeft {
+  to {
+    left: calc(var(--marquee-item-width, 200px) * -1);
+  }
+}
+
+@keyframes scrollRight {
+  to {
+    right: calc(var(--marquee-item-width, 200px) * -1);
+  }
+}
+
+.itemLeft,
+.itemRight {
+  position: absolute;
+  animation-timing-function: linear;
+  animation-duration: var(--marquee-duration, 60s);
+  animation-iteration-count: infinite;
+}
+
+.itemLeft {
+  /* left: max(calc(200px * 10), calc(100% + 200px)); */
+  animation-name: scrollLeft;
+}
+
+.itemRight {
+  /* right: max(calc(200px * 8), calc(100% + 200px)); */
+  animation-name: scrollRight;
+}

handyhelpers/static/node_modules/fun-effects/src/css/scroller.css

@@ -0,0 +1,144 @@
+/* 
+Color variables
+
+:root {
+    --light: rgb(255, 255, 255);
+    --bg:
+    --primary: rgba(0,212,255,1)
+}
+*/
+:root {
+    --primary: rgb(0, 0, 255);
+}
+
+
+.scroller-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+}
+
+.scroller {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.scroller__inner {
+    padding-block: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.scroller[data-animated="true"] {
+    overflow: hidden;
+    -webkit-mask: linear-gradient(
+      90deg,
+      transparent,
+      var(--light, rgb(255, 255, 255)) 20%,
+      var(--light, rgb(255, 255, 255)) 80%,
+      transparent
+    );
+    mask: linear-gradient(90deg, transparent, var(--light, rgb(255, 255, 255)) 20%, var(--light, rgb(255, 255, 255)) 80%, transparent);
+}
+
+.scroller[data-animated="true"] .scroller__inner {
+    width: max-content;
+    flex-wrap: nowrap;
+    animation: scroll var(--_animation-duration, 40s)
+      var(--_animation-direction, forwards) linear infinite;
+}
+
+
+.scroller-nav {
+    text-align: left;
+    font-size: rem;
+    /* padding-left: 3rem;
+    padding-left: 3rem; */
+}
+.scroller-nav li {
+    margin-right: 1rem;
+    display: inline;
+}
+.scroller-nav a {
+    text-decoration: none;
+    transition: opacity 0.3s ease;
+    color: var(--light, rgb(255, 255, 255));
+    opacity: .5;
+}
+.scroller-nav li a:hover {
+    opacity: 1;
+}
+
+
+.scroller[data-animated="true"] .scroller__inner[paused] {
+    animation-play-state: paused;
+}
+
+.scroller[data-direction="right"] {
+    --_animation-direction: reverse;
+}
+
+.scroller[data-direction="left"] {
+    --_animation-direction: forwards;
+}
+
+.scroller[data-speed="fast"] {
+    --_animation-duration: 20s;
+}
+
+.scroller[data-speed="slow"] {
+    --_animation-duration: 60s;
+}
+
+
+@keyframes scroll {
+    to {
+      transform: translate(calc(-50% - 0.5rem));
+    }
+}
+
+a {
+    text-decoration: none !important;
+}
+
+.card {
+    width: 250px;
+    height: 125px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    box-shadow: 0rem 0.25rem 1rem -0.25rem var(--light, rgb(255, 255, 255));
+    text-align: center;
+    color: var(--light, rgb(255, 255, 255));
+    margin: .75rem;
+    font-weight: bold;
+}
+
+/* Main content styles */
+.card-title {
+    font-size: 18px;
+    margin-bottom: 1rem;
+    color: var(--light, rgb(255, 255, 255));
+}
+
+/* Subtitle styles */
+.card-subtitle {
+    font-size: 14px;
+    color: var(--light, rgba(255, 255, 255, 0.5));
+    margin-top: 8px;
+    font-weight: normal;
+}
+
+/* Subtitle styles */
+.card-secondary {
+    font-size: 10px;
+    color: var(--light, rgba(255, 255, 255, 0.55));
+    margin-top: 8px;
+    font-weight: normal;
+}

handyhelpers/static/node_modules/fun-effects/src/index.js

@@ -0,0 +1,15 @@
+// Importing CSS files
+import './src/css/background_icons.css';
+import './src/css/blur_group.css';
+import './src/css/fades.css';
+import './src/css/marquee.css';
+import './src/css/scroller.css';
+
+// Import all scripts into a single object
+import allScripts from './src/js'; 
+
+// Log a message
+console.log('Fun effects loaded!');
+
+// Re-export the combined scripts object (optional)
+export default allScripts;

handyhelpers/static/node_modules/fun-effects/src/js/background_icons.js

@@ -0,0 +1,101 @@
+// Function to generate random position
+function getRandomPosition(existingPositions, iconSize) {
+  var screenWidth = window.innerWidth;
+  var screenHeight = window.innerHeight;
+  var randomX, randomY;
+  var overlap;
+
+  do {
+    randomX = Math.floor(Math.random() * (screenWidth - iconSize));
+    randomY = Math.floor(Math.random() * (screenHeight - iconSize));
+    overlap = existingPositions.some((pos) => {
+      return (
+        randomX < pos.x + iconSize &&
+        randomX + iconSize > pos.x &&
+        randomY < pos.y + iconSize &&
+        randomY + iconSize > pos.y
+      );
+    });
+  } while (overlap);
+
+  return { x: randomX, y: randomY };
+}
+
+// Function to create random icons
+function createRandomIcons(numIcons) {
+  var iconsContainer = document.createElement("div");
+  iconsContainer.classList.add("icons-container");
+  var iconClasses = [
+    '<i class="fa-brands fa-python"></i>',
+    '<i class="fa-brands fa-golang"></i>',
+    '<i class="fa-brands fa-rust"></i>',
+    '<i class="fa-brands fa-microsoft"></i>',
+    '<i class="fa-solid fa-microchip"></i>',
+    '<i class="fa-brands fa-docker"></i>',
+    '<i class="fa-brands fa-github"></i>',
+    '<i class="fa-brands fa-git"></i>',
+    '<i class="fa-solid fa-code-branch"></i>',
+    '<i class="fa-solid fa-database"></i>',
+    '<i class="fa-solid fa-server"></i>',
+    '<i class="fa-brands fa-discord"></i>',
+    '<i class="fa-solid fa-code"></i>',
+    '<i class="fa-solid fa-network-wired"></i>',
+    '<i class="fa-brands fa-linkedin"></i>',
+    '<i class="fa-brands fa-aws"></i>',
+    '<i class="fa-brands fa-google"></i>',
+    '<i class="fa-brands fa-google-play"></i>',
+    '<i class="fa-brands fa-app-store-ios"></i>',
+    '<i class="fa-brands fa-html5"></i>',
+    '<i class="fa-brands fa-css3-alt"></i>',
+    '<i class="fa-brands fa-js"></i>',
+    '<i class="fa-brands fa-codepen"></i>',
+    '<i class="fa-solid fa-terminal"></i>',
+    '<i class="fa-brands fa-stack-overflow"></i>',
+    '<i class="fa-solid fa-layer-group"></i>',
+    '<i class="fa-solid fa-dharmachakra"></i>',
+    '<i class="fa-brands fa-python"></i>',
+    '<i class="fa-brands fa-golang"></i>',
+    '<i class="fa-brands fa-rust"></i>',
+  ];
+  var usedIcons = [];
+  var existingPositions = [];
+  var iconSize = 32 + 100; // Approximate size of the icon in pixels
+
+  if (numIcons > iconClasses.length) {
+    numIcons = iconClasses.length; // Ensure we don't try to use more icons than available
+  }
+
+  for (var i = 0; i < numIcons; i++) {
+    var randomIconClass;
+    do {
+      randomIconClass =
+        iconClasses[Math.floor(Math.random() * iconClasses.length)];
+    } while (usedIcons.includes(randomIconClass));
+    usedIcons.push(randomIconClass);
+
+    var icon = document.createElement("div");
+    icon.classList.add("icon");
+    icon.innerHTML = randomIconClass;
+    var randomPosition = getRandomPosition(existingPositions, iconSize);
+    console.log(randomPosition);
+    existingPositions.push(randomPosition);
+    icon.style.top = randomPosition.y + "px";
+    icon.style.left = randomPosition.x + "px";
+    icon.style.animation =
+      "glow " + (Math.random() * 20 + 10) + "s infinite alternate"; // Random duration for glow animation
+    iconsContainer.appendChild(icon);
+  }
+  document.body.appendChild(iconsContainer);
+}
+
+// Function to detect mobile devices
+function isMobile() {
+    return window.innerWidth <= 768;
+}
+
+// Create random icons
+document.addEventListener("DOMContentLoaded", () => {
+  if (!isMobile()) {
+    createRandomIcons(20);
+  }
+});

handyhelpers/static/node_modules/fun-effects/src/js/marquee.js

@@ -0,0 +1,81 @@
+function addAnimationDelay() {
+  const wrappers = document.querySelectorAll('.marquee-wrapper');
+  wrappers.forEach(wrapper => {
+    const elements = Array.from(wrapper.children);
+    const totalElements = elements.length;
+    const computedStyles = window.getComputedStyle(wrapper);
+    const marqueeDuration = computedStyles.getPropertyValue('--marquee-duration');
+
+    elements.forEach((element, index) => {
+      const n = index + 1;
+      const animationDelay = `calc(${marqueeDuration} / ${totalElements} * (${totalElements} - ${n}) * -1)`;
+      element.style.animationDelay = animationDelay;
+    });
+  });
+}
+
+
+function setRightProperty() {
+  const wrappers = document.querySelectorAll('.marquee-wrapper');
+
+  wrappers.forEach(wrapper => {
+    const itemRightElements = wrapper.querySelectorAll('.itemRight');
+    const totalRightItems = itemRightElements.length;
+    const computedStyles = window.getComputedStyle(wrapper);
+    const marqueeItemWidth = computedStyles.getPropertyValue('--marquee-item-width');
+
+    itemRightElements.forEach((element, index) => {
+      element.style.right = `max(calc(${marqueeItemWidth} * ${totalRightItems}), calc(100% + ${marqueeItemWidth}))`
+    });
+  });
+}
+
+
+function setLeftProperty() {
+  const wrappers = document.querySelectorAll('.marquee-wrapper');
+
+  wrappers.forEach(wrapper => {
+    const itemLeftElements = wrapper.querySelectorAll('.itemLeft');
+    const totalLeftItems = itemLeftElements.length;
+    const computedStyles = window.getComputedStyle(wrapper);
+    const marqueeItemWidth = computedStyles.getPropertyValue('--marquee-item-width');
+
+    itemLeftElements.forEach((element, index) => {
+      element.style.left = `max(calc(${marqueeItemWidth} * ${totalLeftItems}), calc(100% + ${marqueeItemWidth}))`
+    });
+  });
+}
+
+
+function addMarqueeMouseListener() {
+  const marqueeWrappers = document.querySelectorAll('.marquee-wrapper');
+
+  marqueeWrappers.forEach(wrapper => {
+    // Add event listener to the wrapper to handle mouseenter and mouseleave
+    wrapper.addEventListener('mouseenter', () => {
+      // Pause animation for all child elements
+      wrapper.childNodes.forEach(child => {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          child.style.animationPlayState = 'paused';
+        }
+      });
+    });
+
+    wrapper.addEventListener('mouseleave', () => {
+      // Resume animation for all child elements
+      wrapper.childNodes.forEach(child => {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          child.style.animationPlayState = 'running';
+        }
+      });
+    });
+  });
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  addAnimationDelay();
+  setRightProperty();
+  setLeftProperty();
+  addMarqueeMouseListener();
+});