From 61b18abc2a5ff6cc807f52fc4a635b31215106ad Mon Sep 17 00:00:00 2001
From: Sarthak5598 <sarthak5598sharma@gmail.com>
Date: Sat, 9 Mar 2024 08:51:41 +0530
Subject: [PATCH] Use QR Library instead of using API and Make a Nav button to
 display all the QRs!! #1971

---
 website/templates/_leaderboard_widget.html | 107 ++++++++++++++++-----
 website/templates/profile.html             |  89 ++++++++++++-----
 2 files changed, 147 insertions(+), 49 deletions(-)

diff --git a/website/templates/_leaderboard_widget.html b/website/templates/_leaderboard_widget.html
index b7da14486..a51598486 100644
--- a/website/templates/_leaderboard_widget.html
+++ b/website/templates/_leaderboard_widget.html
@@ -31,20 +31,61 @@
     }
 
     .crypto-name {
-        text-align: center;
-        font-size: 20px;
-        color: white;
-        font-weight: bold;
-        background-color: #ff4444;
-        border-radius: 10px;
-        display: inline-block;
-        margin-left: auto ;
-    }
+    text-align: center;
+    width: 100%;
+    font-size: 20px;
+    color: white;
+    background-color: #ff4444;
+    display: inline-block;
+    margin: 0 auto; /* Center the element horizontally */
+}
 
     .slideshow {
         margin-top: 50px;
     }
 
+    .navigation {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+    }
+
+    .nav-btn {
+        width: 70px;
+        height: 40px;
+        border: 1px solid #0e0d0d;
+        margin: 6px;
+        cursor: pointer;
+        transition: 0.4s;
+    }
+    .nav-btn.active {
+    background: red; /* Change to whatever red color you prefer */
+    color: white; /* Change text color to contrast with the red background */
+    }
+    .nav-btn:hover {
+        background: #fff;
+    }
+
+    input[name="r"] {
+        position: absolute;
+        visibility: hidden;
+    }
+
+    #btc:checked ~ .s1 {
+        margin-left: -20%;
+    }
+
+    #eth:checked ~ .s1 {
+        margin-left: -40%;
+    }
+
+    #bch:checked ~ .s1 {
+        margin-left: -60%;
+    }
+
 </style>
 <div class="row-start-1 bug-container leaderboard-widget flex flex-col p-5 pt-3 bg-[white] m-1 w-[100%] row-span-2 rounded-[2.5rem]  border-[#e8e8e8] border-2 font-['Inter'] h-[630px]">
     <div class="font-['Barlow_Semi_Condensed'] font-semibold text-[black] text-[25px] text-center mb-2">LEADERBOARD</div>
@@ -102,13 +143,17 @@
                     TIP:<i class="fab fa-btc"></i>
                 </button>
                 <dialog id="dialog-{{ leader.id }}" class="dialog">
-                    <div class="arrow-container">
-                        <button id="prev-{{ leader.id }}" class="arrow-btn">&lt;</button>
-                        <p id="crypto-name-{{ leader.id }}" class="crypto-name">Bitcoin</p>
-                        <button id="next-{{ leader.id }}" class="arrow-btn">&gt;</button>
+                    <input type="radio" name="r" id="bch-{{ leader.id }}" checked class="active">
+                    <input type="radio" name="r" id="eth-{{ leader.id }}">
+                    <input type="radio" name="r" id="btc-{{ leader.id }}">
+                    <div class="navigation">
+                        <button class="nav-btn" id="bch-btn-{{ leader.id }}">BCH</button>
+                        <button class="nav-btn" id="eth-btn-{{ leader.id }}">Ethereum</button>
+                        <button class="nav-btn" id="btc-btn-{{ leader.id }}">Bitcoin</button>
                     </div>
                     <div id="slideshow-{{ leader.id }}" class="slideshow">
                         <img id="qr-image-{{ leader.id }}" alt="QR Code" height="300" width="400">
+                        <p id="crypto-name-{{ leader.id }}" class="crypto-name"></p>
                         <p id="crypto-address-{{ leader.id }}" class="crypto-address"></p>
                     </div>
                     <button id="close-{{ leader.id }}" class="btn btn-danger w-full">Close</button>
@@ -127,25 +172,28 @@
 </div>
 {% comment %} positions the leaderboard rightmost {% endcomment %}
 <script>
+
+
+
     const openModal = (btc, eth, bch, userId) => {
         const cryptoOptions = [
-        { name: 'Bitcoin', address: btc },
+        { name: 'Bitcoin Cash', address: bch },
         { name: 'Ethereum', address: eth },
-        { name: 'Bitcoin Cash', address: bch }
+        { name: 'Bitcoin', address: btc }
         ];
         let currentIndex = 0;
         const updateSlide = () => {
             let { name, address } = cryptoOptions[currentIndex];
             if (address == '' || address == 'None') {
                 address = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
+                document.getElementById('crypto-name-'+userId).textContent = `No address:Will go to BLT Donation`;
                 document.getElementById('qr-image-'+userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
-                document.getElementById('crypto-name-' + userId).textContent = "No address: Will go to BLT Donation";
                 document.getElementById('crypto-address-'+userId).textContent = `BCH: ${address}`;
             }
             else{
-            document.getElementById('crypto-name-' + userId).textContent = name;
-            document.getElementById('qr-image-' + userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
-            document.getElementById('crypto-address-' + userId).textContent = `${address}`;
+                document.getElementById('crypto-name-'+userId).textContent = name;
+                document.getElementById('qr-image-' + userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
+                document.getElementById('crypto-address-' + userId).textContent = `${address}`;
             }
         };
 
@@ -158,16 +206,29 @@
         document.getElementById('close-' + userId).addEventListener('click', function() {
             document.getElementById('dialog-' + userId).close();
         });
+        document.getElementById('bch-btn-' + userId).classList.add('active'); // Highlight BCH button by default
+        document.getElementById('bch-btn-' + userId).addEventListener('click', function() {
+            currentIndex = 0;
+            updateSlide();
+            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
+        });
 
-        document.getElementById('prev-' + userId).addEventListener('click', function() {
-            currentIndex = (currentIndex - 1 + cryptoOptions.length) % cryptoOptions.length;
+        document.getElementById('eth-btn-' + userId).addEventListener('click', function() {
+            currentIndex = 1;
             updateSlide();
+            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
         });
 
-        document.getElementById('next-' + userId).addEventListener('click', function() {
-            currentIndex = (currentIndex + 1) % cryptoOptions.length;
+        document.getElementById('btc-btn-' + userId).addEventListener('click', function() {
+            currentIndex = 2;
             updateSlide();
+            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
         });
+    
+        
     };
     
     document.addEventListener('DOMContentLoaded', function() {
diff --git a/website/templates/profile.html b/website/templates/profile.html
index 65a0ae378..7266f83f8 100644
--- a/website/templates/profile.html
+++ b/website/templates/profile.html
@@ -218,11 +218,12 @@
 
     #crypto-name{
         text-align: center;
-        font-size: 30px;
+        width: 100%;
+        font-size: 20px;
         color: white;
-        font-weight: bold;
         background-color: #ff4444;
-        border-radius: 10px;
+        display: inline-block;
+        margin: 0 auto;
     }
 
     #update-overlay {
@@ -249,30 +250,50 @@
         position: relative;
     }
 
-    .arrow-container {
+    #slideshow {
+        margin-top: 50px;
+    }
+
+    .navigation {
         position: absolute;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
-        align-items: center;
         justify-content: center;
-        width: 100%;
     }
 
-    .arrow-btn {
-        background: none;
-        border: none;
-        top: 0;
-        color: black;
-        font-size: 40px;
+    .nav-btn {
+        width: 70px;
+        height: 40px;
+        border: 1px solid #0e0d0d;
+        margin: 6px;
         cursor: pointer;
-        font-weight: bold;
-        margin: 0 0px;
+        transition: 0.4s;
+    }
+    .nav-btn.active {
+        background: red; 
+        color: white;
+    }
+    .nav-btn:hover {
+        background: #fff;
     }
 
-    #slideshow {
-        margin-top: 50px; /* Adjust as needed */
+    input[name="r"] {
+        position: absolute;
+        visibility: hidden;
+    }
+
+    #btc:checked ~ .s1 {
+        margin-left: -20%;
+    }
+
+    #eth:checked ~ .s1 {
+        margin-left: -40%;
+    }
+
+    #bch:checked ~ .s1 {
+        margin-left: -60%;
     }
 
     </style>
@@ -357,13 +378,17 @@ <h1 class="page-header text-capitalize">{{ user.username }}</h1>
                 <div class="status">
                     <button type="button" id="openModal" class="btn btn-danger text-black">Send a Tip</button>
                     <dialog id="dialog">
-                        <div class="arrow-container">
-                            <button id="prev" class="arrow-btn">&lt;</button>
-                            <p id="crypto-name" class="text-black">Bitcoin</p>
-                            <button id="next" class="arrow-btn">&gt;</button>
+                        <input type="radio" name="r" id="bch" checked class="active">
+                        <input type="radio" name="r" id="eth">
+                        <input type="radio" name="r" id="btc">
+                        <div class="navigation">
+                            <button class="nav-btn" id="bch-btn">BCH</button>
+                            <button class="nav-btn" id="eth-btn">Ethereum</button>
+                            <button class="nav-btn" id="btc-btn">Bitcoin</button>
                         </div>
                         <div id="slideshow">
                             <img id="qr-image" alt="QR Code" height="300" width="400">
+                            <p id="crypto-name" class="text-black"></p>
                             <p id="crypto-address"></p>
                         </div>
                         <button id="close" class="btn-danger w-full">Close</button>
@@ -576,9 +601,9 @@ <h1 class="page-header text-capitalize">{{ user.username }}</h1>
     <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function() {
         const cryptoOptions = [
-            { name: 'Bitcoin', address: '{{ user.userprofile.btc_address }}' },
+            { name: 'Bitcoin Cash', address: '{{ user.userprofile.bch_address }}' },
             { name: 'Ethereum', address: '{{ user.userprofile.eth_address }}' },
-            { name: 'Bitcoin Cash', address: '{{ user.userprofile.bch_address }}' }
+            { name: 'Bitcoin', address: '{{ user.userprofile.btc_address }}' },
         ];
 
         let currentIndex = 0;
@@ -607,14 +632,26 @@ <h1 class="page-header text-capitalize">{{ user.username }}</h1>
             document.getElementById('dialog').close();
         });
 
-        document.getElementById('prev').addEventListener('click', function() {
-            currentIndex = (currentIndex - 1 + cryptoOptions.length) % cryptoOptions.length;
+        document.getElementById('bch-btn').classList.add('active'); // Highlight BCH button by default
+        document.getElementById('bch-btn').addEventListener('click', function() {
+            currentIndex = 0;
+            updateSlide();
+            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
+        });
+
+        document.getElementById('eth-btn').addEventListener('click', function() {
+            currentIndex = 1;
             updateSlide();
+            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
         });
 
-        document.getElementById('next').addEventListener('click', function() {
-            currentIndex = (currentIndex + 1) % cryptoOptions.length;
+        document.getElementById('btc-btn').addEventListener('click', function() {
+            currentIndex = 2;
             updateSlide();
+            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
         });
     });