Skip to content

Improve text readability and fix text fade-out #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SparK-Cruz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve text readability and fix text fade-out #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 43 additions & 36 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
/* Initially hide the message text */
opacity: 0;
transition: opacity 0.5s ease-in-out; /* Add smooth transition */
text-shadow: 1.5px 0 2px #000, 0 -1.5px 2px #000, 0 1.5px 2px #000, -1.5px 0 2px #000; /* Readability shadow */
}
#message.show {
opacity: 1;
}
#alert-image {
display: none;
Expand All @@ -35,15 +39,18 @@
<p id="error"></p>

<script>
const address = new URLSearchParams(window.location.search).get('address');
const message = document.getElementById('message');
const audio = new Audio('bonus-points-190035.mp3'); // Use your audio file
const alertImage = document.getElementById('alert-image');
;(function(){
const address = new URLSearchParams(window.location.search).get('address');
const message = document.getElementById('message');
const audio = new Audio('bonus-points-190035.mp3'); // Use your audio file
const alertImage = document.getElementById('alert-image');

if (!address) {
document.getElementById('error').textContent = 'Please provide a Nano address in the URL like: https://<url>?address=<nano-address>';
console.error('No Nano address provided in the URL.');
return;
}

if (!address) {
document.getElementById('error').textContent = 'Please provide a Nano address in the URL like: https://<url>?address=<nano-address>';
console.error('No Nano address provided in the URL.');
} else {
console.log('Nano address we subscribe to is:' + address);
console.log('Connecting to WebSocket...');
const ws = new WebSocket('wss://node.somenano.com/websocket');
Expand All @@ -62,39 +69,39 @@

ws.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.topic === 'confirmation' && data.message) {
const amount = data.message.amount;
const formattedAmount = formatNano(amount); // Function to format Nano amount
showAlert(formattedAmount);
console.log('Transaction received for address:', address, 'Amount:', amount);
}
if (data.topic !== 'confirmation' || !data.message)
return;

const amount = data.message.amount;
const formattedAmount = formatNano(amount); // Function to format Nano amount
showAlert(formattedAmount);
console.log('Transaction received for address:', address, 'Amount:', amount);
};
}

function showAlert(formattedAmount) {
message.textContent = `Transaction received for ${formattedAmount} Nano!`;
message.style.opacity = 1; // Make message text visible
audio.play();
alertImage.style.display = 'block'; // Show image during alert
setTimeout(function() {
message.textContent = ''; // Clear message text
message.style.opacity = 0; // Hide message text again
alertImage.style.display = 'none'; // Hide image after 3 second
}, 3000);
}
function showAlert(formattedAmount) {
message.textContent = `Transaction received for ${formattedAmount} Nano!`;
message.classList.add("show"); // Make message text visible
audio.play();
alertImage.style.display = 'block'; // Show image during alert
setTimeout(function() {
message.classList.remove("show"); // Hide message text again
alertImage.style.display = 'none'; // Hide image after 3 second
}, 3000);
}

// Function to format Nano amount
function formatNano(rawAmount) {
const nanoInRaw = Math.pow(10, 30); // 1 Nano is equal to 10^30 raw
const nanoAmount = parseFloat(rawAmount) / nanoInRaw;
// Function to format Nano amount
function formatNano(rawAmount) {
const nanoInRaw = Math.pow(10, 30); // 1 Nano is equal to 10^30 raw
const nanoAmount = parseFloat(rawAmount) / nanoInRaw;

// Set a maximum number of decimal places (e.g., 10)
const maxDecimals = 10;
const formattedAmount = nanoAmount.toFixed(maxDecimals);
// Set a maximum number of decimal places (e.g., 10)
const maxDecimals = 10;
const formattedAmount = nanoAmount.toFixed(maxDecimals);

// Remove trailing zeros using regular expression
return formattedAmount.replace(/0+$/, '');
}
// Remove trailing zeros using regular expression
return formattedAmount.replace(/0+$/, '');
}
})();
</script>
</body>
</html>