Skip to content

Commit

Permalink
Use QR Library instead of using API and Make a Nav button to display …
Browse files Browse the repository at this point in the history 
…all the QRs!! OWASP-BLT#1971
  • Loading branch information
@Sarthak5598
Sarthak5598 committed Mar 9, 2024
1 parent 1bb2746 commit 61b18ab
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 49 deletions.
107 changes: 84 additions & 23 deletions website/templates/_leaderboard_widget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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}`;
}
};

Expand All @@ -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() {
Expand Down
89 changes: 63 additions & 26 deletions website/templates/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
});
});

Expand Down

0 comments on commit 61b18ab

Please sign in to comment.