rottenwheel/moner.ooo
1
0
Fork 0
mirror of https://github.com/rottenwheel/moner.ooo.git synced 2024-11-16 14:57:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: rottenwheel:aeba50b9c46fcd92ae05791756c596b9bc6e68c4
Branches Tags
rottenwheel:main
...
compare: rottenwheel:2ecf7c68357825289ef8595ee23d38448de01c5e
Branches Tags
rottenwheel:main

5 commits
aeba50b9c4 ... 2ecf7c6835

Author SHA1 Message Date
rottenwheel
2ecf7c6835
Merge pull request #3 from kumitterer/main 
Server-side calculations for JavaScript-free environments
 2024-08-11 19:34:42 +00:00
Kumi
fdebb16a85
fix: remove inline script and improve noscript message 
Refactored inline exchangeRates script to main.js for better practice and maintainability. Enhanced the noscript warning message's readability by replacing paragraph tags with line breaks, ensuring clearer instructions for users without JavaScript.
 2024-08-10 16:49:33 +02:00
Kumi
227d56a2bd
feat: enhance accessibility and UI feedback 
Added a noscript alert message for users with JavaScript disabled, informing them about the limitations and manual controls available. Improved UI spacing with an additional margin in the conversion button section. Adjusted CSS padding for better visual alignment. Expanded Webpack safelist to include alert classes for proper styling.
 2024-08-10 16:43:57 +02:00
Kumi
77c41c08c2
fix(js): hide conversion buttons if JavaScript enabled 
Removed event listeners on conversion buttons and instead
hide them when JavaScript is enabled. This aims to improve
the user experience by preventing redundant UI interactions
that are handled dynamically.
 2024-08-10 16:34:42 +02:00
Kumi
e97805d379
feat: add bidirectional XMR to fiat conversion 
Introduced bidirectional conversion functionality for XMR to fiat calculations. Added form elements and event listeners to handle user inputs and conversion direction. Enhanced URL and metadata processing to be dynamic based on protocol. Updated UI with conversion buttons for a better user experience. Safelisted new CSS classes in webpack configuration.
 2024-08-10 16:23:52 +02:00
4 changed files with 93 additions and 29 deletions
Show stats Expand all files Collapse all files

86
index.php
View file

@ -4,6 +4,10 @@ header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$currentUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$parentUrl = dirname($currentUrl);
// Get currency data from JSON
$api_cg = json_decode(file_get_contents('coingecko.json'), true);
@ -52,9 +56,22 @@ $lang = strtolower($lang);
require_once "lang/{$lang}.php";
$xmr_in = isset($_GET["in"]) ? strtoupper(htmlspecialchars($_GET["in"])) : 'EUR';
$xmr_in_fiat = number_format($exchangeRates[$xmr_in], $xmr_in == 'BTC' || $xmr_in == 'LTC' || $xmr_in == 'ETH' || $xmr_in == 'XAG' || $xmr_in == 'XAU' ? 8 : 2);
$xmr_amount = isset($_GET["xmr"]) ? floatval($_GET["xmr"]) : 1;
$fiat_amount = isset($_GET["fiat"]) ? floatval($_GET["fiat"]) : '';
$conversion_direction = isset($_GET["direction"]) ? intval($_GET["direction"]) : 0;
$xmr_in_fiat = strtr($xmr_in_fiat, ",", " ");
if ($conversion_direction == 0) {
$fiat_value = $xmr_amount * $exchangeRates[$xmr_in];
$xmr_value = $xmr_amount;
} else {
$xmr_value = $fiat_amount / $exchangeRates[$xmr_in];
$fiat_value = $fiat_amount;
}
$fiat_value = number_format($fiat_value, ($xmr_in == 'BTC' || $xmr_in == 'LTC' || $xmr_in == 'ETH' || $xmr_in == 'XAG' || $xmr_in == 'XAU') ? 8 : 2);
$xmr_value = number_format($xmr_value, 12);
$fiat_value = strtr($fiat_value, ",", " ");
// Order preferred currencies to the top
foreach (array_reverse($preferred_currencies) as $currency) {
@ -81,7 +98,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
<meta property="og:title" content="<?php echo $page_title; ?>" />
<meta property="og:description" content="<?php echo $meta_description; ?>" />
<meta property="og:image" content="img/mstile-310x150.png" />
<meta property="og:image" content="<?php echo $parentUrl; ?>/img/mstile-310x150.png" />
<meta property="og:type" content="website" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57.png" />
@ -143,29 +160,46 @@ foreach (array_reverse($preferred_currencies) as $currency) {
</div>
<hr class="gold" />
<div class="input-group">
<button id="copyXMRBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="xmrInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="1">
<input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
</div>
<form method="get" action="">
<div class="input-group mb-3">
<button id="copyXMRBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="xmrInput" name="xmr" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="<?php echo $xmr_value; ?>">
<input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
</div>
<div class="equals-box">
<span class="equals-text cursor-default">=</span>
</div>
<div class="equals-box mb-3">
<button id="convertXMRToFiat" type="submit" name="direction" value="0" class="btn btn-arrow">
<span class="equals-text">&darr;</span>
</button>
<button type="button" class="btn btn-equals">
<span class="equals-text cursor-default">=</span>
</button>
<button id="convertFiatToXMR" type="submit" name="direction" value="1" class="btn btn-arrow">
<span class="equals-text">&uarr;</span>
</button>
</div>
<div class="fiatDiv input-group">
<button id="copyFiatBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="fiatInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $xmr_in_fiat; ?>">
<select class="input-group-text cursor-pointer" id="selectBox" aria-label="<?php echo $l_fiatSelect; ?>">
<?php
foreach ($currencies as $currency) {
$selected = $currency == $xmr_in ? 'selected' : '';
$currencyName = isset(${"l_" . strtolower($currency)}) ? ${"l_" . strtolower($currency)} : $currency;
echo "<option {$selected} value=\"{$currency}\">{$currencyName}</option>";
}
?>
</select>
</div>
<div class="fiatDiv input-group mb-3">
<button id="copyFiatBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="fiatInput" name="fiat" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $fiat_value; ?>">
<select class="input-group-text cursor-pointer" id="selectBox" name="in" aria-label="<?php echo $l_fiatSelect; ?>">
<?php
foreach ($currencies as $currency) {
$selected = $currency == $xmr_in ? 'selected' : '';
$currencyName = isset(${"l_" . strtolower($currency)}) ? ${"l_" . strtolower($currency)} : $currency;
echo "<option {$selected} value=\"{$currency}\">{$currencyName}</option>";
}
?>
</select>
</div>
</form>
<noscript>
<div class="alert alert-warning" role="alert">
Looks like you have JavaScript disabled. You can still use this tool, but you won't be able to use the &#128203; buttons to automatically copy the results to your clipboard.<br />
Use the &darr; button to convert XMR to fiat, or the &uarr; button to convert fiat to XMR.
</div>
</noscript>
<hr class="gold" />
<small class="cursor-default text-white text-info" lang="<?php echo $lang_meta; ?>">
@ -195,11 +229,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
</div>
</div>
<script>
var exchangeRates = <?php echo json_encode($exchangeRates); ?>;
</script>
<script src="js/main.js"></script>
</body>
</html>

26
src/css/custom.css
View file

@ -51,6 +51,32 @@ input.form-control {
color: #e9ecef;
font-weight: 800;
font-size: 42px;
padding-bottom: 1;
}
.btn-arrow {
border: 1px solid white;
border-radius: 10px;
font-size: 38px !important;
color: white;
padding: 0;
cursor: pointer;
}
.btn-arrow:hover {
border: 1px solid black;
color: black;
}
.btn-equals {
font-size: 38px !important;
color: white;
padding: 0;
cursor: default;
}
.btn-equals:hover {
color: black;
}
.equals-text {

8
src/js/main.js
View file

@ -14,12 +14,16 @@ console.log(tooltipList);
let lastModifiedField = 'xmr';
var exchangeRates = {};
document.addEventListener('DOMContentLoaded', function () {
const copyXMRBtn = document.getElementById('copyXMRBtn');
const copyFiatBtn = document.getElementById('copyFiatBtn');
const xmrInput = document.getElementById('xmrInput');
const fiatInput = document.getElementById('fiatInput');
const selectBox = document.getElementById('selectBox');
const convertXMRToFiatBtn = document.getElementById('convertXMRToFiat');
const convertFiatToXMRBtn = document.getElementById('convertFiatToXMR');
// Add event listeners for the copy buttons
copyXMRBtn.addEventListener('click', copyToClipBoardXMR);
@ -62,6 +66,10 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
// Hide the conversion buttons if JavaScript is enabled
convertXMRToFiatBtn.style.display = 'none';
convertFiatToXMRBtn.style.display = 'none';
// Fetch updated exchange rates immediately, then every 5 seconds
fetchUpdatedExchangeRates();
setInterval(fetchUpdatedExchangeRates, 5000);

2
webpack.config.js
View file

@ -31,7 +31,7 @@ module.exports = {
paths: glob.sync([
path.join(__dirname, 'index.php')
]),
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow']
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow', 'alert', 'alert-warning']
})
]
};