Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-06-23 20:00:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

restructure UI

Browse Source
This commit is contained in:
cnohall 2024-09-11 13:00:25 +09:00
parent 1913889511
commit 9044f3239c
1 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
resources/views/portal/ninja2020/gateways/blockonomics/pay.blade.php
View File

@ -11,17 +11,20 @@
</div> --> </div> -->
<div class="initial-state"> <div class="initial-state">
<div class="invoice-number">Invoice #{{$invoice_number}}</div> <div class="invoice-number">Invoice #{{$invoice_number}}</div>
<div>To pay, send exactly this BTC amount</div> <div>To pay, send bitcoin to this address:</div>
<div class="full-width-input" onclick='copyToClipboard("{{$btc_amount}}", this)'> <span class="input-wrapper">
{{$btc_amount}} BTC <span style="color: gray;">≈ {{$amount}} {{$currency}}</span> <input class="full-width-input" id="btcAddress" value="{{$btc_address}}" readonly>
<img src="{{ 'data:image/svg+xml;base64,' . base64_encode('<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 1H3.5C2.4 1 1.5 1.9 1.5 3V17H3.5V3H15.5V1ZM18.5 5H7.5C6.4 5 5.5 5.9 5.5 7V21C5.5 22.1 6.4 23 7.5 23H18.5C19.6 23 20.5 22.1 20.5 21V7C20.5 5.9 19.6 5 18.5 5ZM18.5 21H7.5V7H18.5V21Z" fill="#000"/></svg>') }}" class="icon" alt="Copy Icon"> <img onclick='copyToClipboard("{{$btc_address}}", this)' src="{{ 'data:image/svg+xml;base64,' . base64_encode('<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M15.5 1H3.5C2.4 1 1.5 1.9 1.5 3V17H3.5V3H15.5V1ZM18.5 5H7.5C6.4 5 5.5 5.9 5.5 7V21C5.5 22.1 6.4 23 7.5 23H18.5C19.6 23 20.5 22.1 20.5 21V7C20.5 5.9 19.6 5 18.5 5ZM18.5 21H7.5V7H18.5V21Z" fill="#000"/></svg>') }}" class="icon" alt="Copy Icon">
</span>
<div>Amount of bitcoin (BTC) to send:</div>
<span class="input-wrapper">
<div class="full-width-input">
{{$btc_amount}}
</div> </div>
<div>To this bitcoin address</div> <img onclick='copyToClipboard("{{$btc_amount}}", this)' src="{{ 'data:image/svg+xml;base64,' . base64_encode('<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M15.5 1H3.5C2.4 1 1.5 1.9 1.5 3V17H3.5V3H15.5V1ZM18.5 5H7.5C6.4 5 5.5 5.9 5.5 7V21C5.5 22.1 6.4 23 7.5 23H18.5C19.6 23 20.5 22.1 20.5 21V7C20.5 5.9 19.6 5 18.5 5ZM18.5 21H7.5V7H18.5V21Z" fill="#000"/></svg>') }}" class="icon" alt="Copy Icon">
<div class="input-wrapper" onclick='copyToClipboard("{{$btc_address}}", this)'> <span class="icon-refresh"></span>
<input class="full-width-input" id="btcAddress" value="{{$btc_address}}" readonly > </span>
<img src="{{ 'data:image/svg+xml;base64,' . base64_encode('<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 1H3.5C2.4 1 1.5 1.9 1.5 3V17H3.5V3H15.5V1ZM18.5 5H7.5C6.4 5 5.5 5.9 5.5 7V21C5.5 22.1 6.4 23 7.5 23H18.5C19.6 23 20.5 22.1 20.5 21V7C20.5 5.9 19.6 5 18.5 5ZM18.5 21H7.5V7H18.5V21Z" fill="#000"/></svg>') }}" class="icon" alt="Copy Icon"> <span>1 BTC = {{$amount}} {{$currency}}, updates in <span id="countdown"></span></span>
</div>
<div id="countdown"></div><span class="blockonomics-icon-refresh"></span>
</div> </div>
</div> </div>
@ -39,25 +42,27 @@
<script> <script>
// Get the end time as a Unix timestamp (seconds) // Get the end time as a Unix timestamp (seconds)
var endTimeUnix = {{ $end_time }}; const endTimeUnix = {{ $end_time }};
console.log("End time (Unix timestamp):", endTimeUnix); // For debugging console.log("End time (Unix timestamp):", endTimeUnix); // For debugging
// Convert Unix timestamp to milliseconds for JavaScript Date // Convert Unix timestamp to milliseconds for JavaScript Date
var countDownDate = endTimeUnix * 1000; const countDownDate = endTimeUnix * 1000;
function updateCountdown() { function updateCountdown() {
var now = new Date().getTime(); const now = new Date().getTime();
var distance = countDownDate - now; const distance = countDownDate - now;
if (distance < 0) { if (distance < 0) {
document.getElementById("countdown").innerHTML = "EXPIRED"; document.getElementById("countdown").innerHTML = "EXPIRED";
return; return;
} }
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000); const seconds = Math.floor((distance % (1000 * 60)) / 1000);
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
document.getElementById("countdown").innerHTML = minutes + "m " + seconds + "s "; document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + " min";
} }
setInterval(updateCountdown, 1000); setInterval(updateCountdown, 1000);
</script> </script>
@ -130,7 +135,6 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.blockonomics-payment-wrapper { .blockonomics-payment-wrapper {
padding: 12px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@ -138,13 +142,19 @@
justify-content: center; justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; text-align: center;
padding: 12px; padding: 12px;
} }
.input-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.full-width-input { .full-width-input {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px;
padding: 10px 40px 10px 10px; padding: 10px;
text-align: center; text-align: center;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
@ -152,20 +162,13 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
.input-wrapper {
position: relative;
width: 100%;
}
.icon { .icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer; cursor: pointer;
} }
.icon-refresh::before { .icon-refresh::before {
content: '\e903'; content: '\27F3';
cursor: pointer; cursor: pointer;
margin-left: 5px;
} }
/* .progress-message { /* .progress-message {
display: none; display: none;