deploy: 56116ed

index.html

@@ -49,6 +49,11 @@
     href="styles/table.css"
   >
 
+  <link
+    rel="stylesheet"
+    href="styles/maximize.css"
+  >
+
   <link
     rel="stylesheet"
     href="styles/particles.css"
@@ -133,7 +138,7 @@ <h5 class="card-title">Recovered</h5>
       </div>
 
       <div class="row gap-4 mt-md-5 mt-4">
-        <div class="col">
+        <div class="col maximizeable">
           <div
             data-aos="fade-right"
             data-aos-delay="400"
@@ -174,7 +179,7 @@ <h5 class="card-title">Yearly Stats</h5>
           </div>
         </div>
 
-        <div class="col">
+        <div class="col maximizeable">
           <div
             data-aos="fade-left"
             data-aos-delay="600"
@@ -290,6 +295,8 @@ <h5 class="card-title">Countries and Provinces Ranked by Total Cases</h5>
   <script src="verbose/chart.js/chart.umd.js"></script>
   <script src="verbose/chart.js/index.umd.min.js"></script>
   <script src="verbose/countup.js/countUp.umd.js"></script>
+  <script src="verbose/gsap/Flip.min.js"></script>
+  <script src="verbose/gsap/gsap.min.js"></script>
   <script src="verbose/aos/aos.js"></script>
 
   <script
@@ -298,6 +305,7 @@ <h5 class="card-title">Countries and Provinces Ranked by Total Cases</h5>
   ></script>
 
   <script src="scripts/aos.js"></script>
+  <script src="scripts/gsap.js"></script>
   <script src="scripts/particles.js"></script>
 
   <script

scripts/chart.js

@@ -13,7 +13,7 @@ window.addEventListener('DOMContentLoaded', async () => {
   const yearRange = Math.abs(endYear - startYear + 1);
   const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
 
-  toggleButton('chart-line-btn', console.log);
+  toggleButton('chart-line-btn');
 
   sendLoadEvent(() => {
     populateSelect('chart-line-select', years, loadChart, data);

scripts/gsap.js

@@ -0,0 +1,3 @@
+window.addEventListener('DOMContentLoaded', () => {
+  gsap.registerPlugin(Flip);
+});

scripts/map.js

@@ -13,7 +13,7 @@ window.addEventListener('DOMContentLoaded', async () => {
   const yearRange = Math.abs(endYear - startYear + 1);
   const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
 
-  toggleButton('chart-map-btn', console.log);
+  toggleButton('chart-map-btn');
 
   sendLoadEvent(() => {
     populateSelect('chart-map-select', years, loadChart, data);

scripts/utils.js

@@ -56,6 +56,17 @@ export function toggleButton(buttonId, callback) {
       img.setAttribute('src', iconPath);
     }
 
-    callback(maximized);
+    const parent = btn.closest('.maximizeable');
+    const state = Flip.getState(parent);
+
+    if (parent) {
+      if (maximized) {
+        parent.classList.add('maximized');
+      } else {
+        parent.classList.remove('maximized');
+      }
+    }
+
+    Flip.from(state, { absolute: true, duration: 0.2, ease: "power1.inOut" });
   });
 }

styles/card.css

@@ -40,7 +40,7 @@
   transform: translateY(-50%);
 }
 
-.card .btn {
+.card.card-cust .btn {
   width: 35px;
   height: 36px;
 
@@ -57,7 +57,7 @@
   --bs-btn-active-border-color: transparent;
 }
 
-.card .btn img {
+.card.card-cust .btn img {
   width: 20px;
 
   opacity: 0.7;

styles/main.css

@@ -2,6 +2,10 @@ body {
   background-color: #f0f0ff;
 }
 
+/* .container {
+  position: relative;
+} */
+
 *::selection {
   background-color: #d3d6ff;
 }

styles/maximize.css

@@ -0,0 +1,29 @@
+.maximizeable.maximized {
+  z-index: 10;
+
+  top: 0;
+  left: 0;
+  position: fixed;
+
+  width: 100%;
+  height: 100%;
+
+  max-width: 100vw;
+  max-height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.maximizeable.maximized>.card {
+  z-index: 11;
+
+  width: 100%;
+  height: 100%;
+
+  max-width: 1000px;
+  max-height: 700px;
+
+  backdrop-filter: blur(15px);
+}