feat(diary): make congratulations animation on 5 commits

Hojagulyyev · Nov 29, 2023 · 780a4ea · 780a4ea
1 parent bccf1d7
commit 780a4ea
Show file tree

Hide file tree

Showing 5 changed files with 466 additions and 323 deletions.
diff --git a/static/css/my.main.css b/static/css/my.main.css
@@ -0,0 +1,61 @@
+body {
+	 font-family: 'Roboto';
+	 margin: 0;
+	 padding: 0;
+}
+ @keyframes confetti-slow {
+	 0% {
+		 transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
+	}
+	 100% {
+		 transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
+	}
+}
+ @keyframes confetti-medium {
+	 0% {
+		 transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
+	}
+	 100% {
+		 transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
+	}
+}
+ @keyframes confetti-fast {
+	 0% {
+		 transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
+	}
+	 100% {
+		 transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
+	}
+}
+ .container {
+	 width: 100vw;
+	 height: 100vh;
+	 background: #fff0;
+	 border: 0px solid #fff0;
+	 display: fixed;
+	 top: 0px;
+}
+ .confetti-container {
+	 perspective: 700px;
+	 position: absolute;
+	 overflow: hidden;
+	 top: 0;
+	 right: 0;
+	 bottom: 0;
+	 left: 0;
+}
+ .confetti {
+	 position: absolute;
+	 z-index: 1;
+	 top: -10px;
+	 border-radius: 0%;
+}
+ .confetti--animation-slow {
+	 animation: confetti-slow 2.25s linear 1 forwards;
+}
+ .confetti--animation-medium {
+	 animation: confetti-medium 1.75s linear 1 forwards;
+}
+ .confetti--animation-fast {
+	 animation: confetti-fast 1.25s linear 1 forwards;
+}
diff --git a/static/js/my.main.js b/static/js/my.main.js
@@ -0,0 +1,65 @@
+Element.prototype.remove = function() {
+    this.parentElement.removeChild(this);
+}
+NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
+    for(var i = this.length - 1; i >= 0; i--) {
+        if(this[i] && this[i].parentElement) {
+            this[i].parentElement.removeChild(this[i]);
+        }
+    }
+}
+
+// Happy
+
+const Confettiful = function(el) {
+  this.el = el;
+  this.containerEl = null;
+
+  this.confettiFrequency = 3;
+  this.confettiColors = ['#EF2964', '#00C09D', '#2D87B0', '#48485E','#EFFF1D'];
+  this.confettiAnimations = ['slow', 'medium', 'fast'];
+
+  this._setupElements();
+  this._renderConfetti();
+};
+
+Confettiful.prototype._setupElements = function() {
+  const containerEl = document.createElement('div');
+  const elPosition = this.el.style.position;
+
+  if (elPosition !== 'relative' || elPosition !== 'absolute') {
+    this.el.style.position = 'relative';
+  }
+
+  containerEl.classList.add('confetti-container');
+
+  this.el.appendChild(containerEl);
+
+  this.containerEl = containerEl;
+};
+
+Confettiful.prototype._renderConfetti = function() {
+  this.confettiInterval = setInterval(() => {
+    const confettiEl = document.createElement('div');
+    const confettiSize = (Math.floor(Math.random() * 3) + 7) + 'px';
+    const confettiBackground = this.confettiColors[Math.floor(Math.random() * this.confettiColors.length)];
+    const confettiLeft = (Math.floor(Math.random() * this.el.offsetWidth)) + 'px';
+    const confettiAnimation = this.confettiAnimations[Math.floor(Math.random() * this.confettiAnimations.length)];
+
+    confettiEl.classList.add('confetti', 'confetti--animation-' + confettiAnimation);
+    confettiEl.style.left = confettiLeft;
+    confettiEl.style.width = confettiSize;
+    confettiEl.style.height = confettiSize;
+    confettiEl.style.backgroundColor = confettiBackground;
+
+    confettiEl.removeTimeout = setTimeout(function() {
+      confettiEl.parentNode.removeChild(confettiEl);
+    }, 3000);
+
+    this.containerEl.appendChild(confettiEl);
+  }, 25);
+};
+
+window.confettiful = new Confettiful(document.querySelector('.js-container'));
+
+
diff --git a/templates/base/main.html b/templates/base/main.html
@@ -4,7 +4,10 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <!-- my styles -->
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- styles -->
+    <link rel="stylesheet" href="{% static 'css/my.main.css' %}">
     <!-- bootstrap 4.3.1 -->
     <link rel="stylesheet" href="{% static 'css/vendor/bootstrap.min.css' %}">
     <!-- styles -->
@@ -51,7 +54,10 @@
 {% block content %}
 {% endblock content %}
 <!-- /CONTENT GRID -->
+</div>
 
+<!-- my scripts -->
+<script src="{% static 'js/my.main.js' %}"></script>
 <!-- app -->
 <script src="{% static 'js/utils/app.js' %}"></script>
 <!-- page loader -->
@@ -90,6 +96,11 @@
     {% endblock onMounted %}
     showLoggedAccountXPProgressBarForNextLevel();
     showLoggedAccountXPHexagonProgressInAvatarBorder();
+
+    setTimeout(function(){
+        const el = document.querySelector(".confetti-container");
+        el.remove();
+    }, 5000);
 }
 
 function showLoggedAccountXPProgressBarForNextLevel() {