Compare commits

..

4 Commits

Author SHA1 Message Date
72118e1113 V2 Refactor 2024-03-27 14:44:23 -04:00
48aaa67687 V2 Refactor 2024-03-26 23:09:53 -04:00
1f1ac760ca refresh 2024-03-26 19:39:50 -04:00
23c4fb4747 added tailwind styling 2024-03-26 19:33:40 -04:00
24 changed files with 222 additions and 158 deletions

1
.gitignore vendored
View File

@ -13,3 +13,4 @@
.externalNativeBuild .externalNativeBuild
.cxx .cxx
local.properties local.properties
output.css

BIN
app/debug/app-debug.aab Normal file

Binary file not shown.

BIN
app/release/app-release.aab Normal file

Binary file not shown.

View File

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="themes/Dark.css">
</head>
<body>
<div class="container">
<div class="settings"><img src='file:///android_asset/images/cog.png' alt='cog' />
<div class="theme-dropdown">
<label for="theme-select"> </label>
<select id="theme-select">
<option value="Dark.css">Dark</option>
<option value="Lava.css">Lava</option>
<option value="Midnight.css">Midnight</option>
<option value="Solar.css">Solar</option>
</select>
</div>
<div class="currency-dropdown">
<label for="currency-select"> </label>
<select id="currency-select">
<option value="usd">U.S. Dollar</option>
<option value="ars">Argentine Peso</option>
<option value="brl">Brazilian Real</option>
<option value="cny">Chinese Yuan</option>
<option value="eur">Euros</option>
<option value="inr">Indian Rupee</option>
<option value="jpy">Yen</option>
<option value="ngn">Nigerian Naira</option>
<option value="pkr">Pakistani Rupee</option>
<option value="pln">Polish Zloty</option>
<option value="php">Philippine Peso</option>
<option value="rub">Russian Ruble</option>
<option value="thb">Thai Baht</option>
<option value="try">Turkish Lira</option>
<option value="uah">Ukrainian Hryvnia</option>
<option value="vnd">Dong</option>
</select>
</div>
</div>
</div>
<div class="container">
<div class="price-display">
<div class="bitcoin-logo">
<img src='file:///android_asset/images/logo.png' alt='BTC' />
</div>
<div id="bitcoin-price"></div>
</div>
</div>
<div class="container">
<div id="dollars-to-sats"></div>
</div>
<div class="container">
<div class="satstodollars">
<h2>Sats to fiat Calc</h2>
<label for="sats-input">Enter the amount of Bitcoin in satoshis:</label>
<br>
<input type="number" id="sats-input">
<br>
<output id="dollars-output"></output>
</div>
</div>
<div id="exchange">
<h2>Buy Bitcoin Here 👇</h2>
<div class="app-image">
<a href="https://www.swanbitcoin.com/oceanslim"><img src="file:///android_asset/images/swan.png" alt="App 1"></a>
</div>
<div class="app-image">
<a href="https://river.com/signup?r=5WLPVSJQ"><img src="file:///android_asset/images/river.png" alt="App 2"></a>
</div>
<div class="app-image">
<a href="https://cash.app/app/HRPBCNS"><img src="file:///android_asset/images/cashapp.png" alt="App 3"></a>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style/output.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="bg-secondary grid-cols-1 text-center text-text">
<div class="container">
<div class="settings">
<img src="file:///android_asset/images/cog.png" alt="cog" />
<div class="theme-dropdown">
<label for="theme-select"> </label>
<select id="theme-select">
<option value="dark">Dark</option>
<option value="lava">Lava</option>
<option value="midnight">Midnight</option>
<option value="solar">Solar</option>
</select>
</div>
<div class="currency-dropdown">
<label for="currency-select"> </label>
<select id="currency-select">
<option value="usd">U.S. Dollar</option>
<option value="ars">Argentine Peso</option>
<option value="brl">Brazilian Real</option>
<option value="cny">Chinese Yuan</option>
<option value="eur">Euros</option>
<option value="inr">Indian Rupee</option>
<option value="jpy">Yen</option>
<option value="ngn">Nigerian Naira</option>
<option value="pkr">Pakistani Rupee</option>
<option value="pln">Polish Zloty</option>
<option value="php">Philippine Peso</option>
<option value="rub">Russian Ruble</option>
<option value="thb">Thai Baht</option>
<option value="try">Turkish Lira</option>
<option value="uah">Ukrainian Hryvnia</option>
<option value="vnd">Dong</option>
</select>
</div>
</div>
</div>
<div class="container">
<div class="price-display">
<div class="bitcoin-logo">
<img src="file:///android_asset/images/logo.png" alt="BTC" />
</div>
<div id="bitcoin-price"></div>
</div>
</div>
<div class="container">
<div id="dollars-to-sats"></div>
</div>
<div class="container">
<div class="satstodollars">
<h2>Sats to fiat Calc</h2>
<label for="sats-input">Enter the amount of Bitcoin in satoshis:</label>
<br />
<input type="number" id="sats-input" />
<br />
<output id="dollars-output"></output>
</div>
</div>
<div id="exchange">
<h2>Buy Bitcoin Here 👇</h2>
<div class="app-image">
<a href="https://www.swanbitcoin.com/oceanslim"
><img src="file:///android_asset/images/swan.png" alt="App 1"
/></a>
</div>
<div class="app-image">
<a href="https://river.com/signup?r=5WLPVSJQ"
><img src="file:///android_asset/images/river.png" alt="App 2"
/></a>
</div>
<div class="app-image">
<a href="https://cash.app/app/HRPBCNS"
><img src="file:///android_asset/images/cashapp.png" alt="App 3"
/></a>
</div>
</div>
<script type="module" src="/js/main.js"></script>
</body>
</html>

View File

@ -1,5 +1,5 @@
// satsToDollarsCalc.js // satsToDollarsCalc.js
function updateSatsToDollarsConversion() { export function updateSatsToDollarsConversion() {
const satsInputElement = document.getElementById('sats-input'); const satsInputElement = document.getElementById('sats-input');
const dollarsOutputElement = document.getElementById('dollars-output'); const dollarsOutputElement = document.getElementById('dollars-output');
@ -23,10 +23,4 @@ function updateSatsToDollarsConversion() {
} else { } else {
dollarsOutputElement.textContent = ''; dollarsOutputElement.textContent = '';
} }
} }
document.addEventListener('DOMContentLoaded', () => {
const satsInputElement = document.getElementById('sats-input');
satsInputElement.addEventListener('input', updateSatsToDollarsConversion);
});

View File

@ -0,0 +1,39 @@
import "/style/output.css";
import { updateFiatToSatsConversion } from "./viewFiatToSats";
//import { updateBitcoinPrice, refreshBitcoinPrice } from "./viewBitcoinPrice";
import { updateSatsToDollarsConversion } from "./calcSatsToFiat";
function updateBitcoinPrice(selectedCurrency) {
fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`)
.then(response => response.json())
.then(data => {
const bitcoinPrice = data['bitcoin'][selectedCurrency];
const bitcoinPriceElement = document.getElementById('bitcoin-price');
const formattedPrice = `${selectedCurrency.toUpperCase()} ` + bitcoinPrice.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
bitcoinPriceElement.textContent = formattedPrice;
})
.catch(error => console.error(error));
}
updateBitcoinPrice('usd');
document.addEventListener('DOMContentLoaded', () => {
const satsInputElement = document.getElementById('sats-input');
const currencySelect = document.getElementById('currency-select');
// Initially fetch Bitcoin price in USD
updateBitcoinPrice('usd');
satsInputElement.addEventListener('input', updateSatsToDollarsConversion);
currencySelect.addEventListener('change', () => {
const selectedCurrency = currencySelect.value;
updateBitcoinPrice(selectedCurrency);
updateFiatToSatsConversion(selectedCurrency);
updateSatsToDollarsConversion(selectedCurrency);
});
refreshBitcoinPrice('usd'); // Refresh Bitcoin price in USD
});

View File

@ -1,5 +1,5 @@
// bitcoinPriceTracker.js // bitcoinPriceTracker.js
function updateBitcoinPrice(selectedCurrency) { export function updateBitcoinPrice(selectedCurrency) {
fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`) fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -11,13 +11,7 @@ function updateBitcoinPrice(selectedCurrency) {
.catch(error => console.error(error)); .catch(error => console.error(error));
} }
function refreshBitcoinPrice(selectedCurrency) { export function refreshBitcoinPrice(selectedCurrency) {
updateBitcoinPrice(selectedCurrency); updateBitcoinPrice(selectedCurrency);
setInterval(() => updateBitcoinPrice(selectedCurrency), 300000); setInterval(() => updateBitcoinPrice(selectedCurrency), 300000);
} }
document.addEventListener('DOMContentLoaded', () => {
const currencySelect = document.getElementById('currency-select');
const selectedCurrency = currencySelect.value;
refreshBitcoinPrice(selectedCurrency);
});

View File

@ -1,5 +1,5 @@
// fiatToSatsConverter.js // fiatToSatsConverter.js
function updateFiatToSatsConversion(selectedCurrency) { export function updateFiatToSatsConversion(selectedCurrency) {
fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`) fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
@ -12,14 +12,3 @@ function updateFiatToSatsConversion(selectedCurrency) {
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
} }
document.addEventListener('DOMContentLoaded', () => {
const currencySelect = document.getElementById('currency-select');
const selectedCurrency = currencySelect.value;
updateFiatToSatsConversion(selectedCurrency);
currencySelect.addEventListener('change', () => {
const selectedCurrency = currencySelect.value;
updateFiatToSatsConversion(selectedCurrency);
});
});

View File

@ -1,12 +0,0 @@
// currencySelection.js
document.addEventListener('DOMContentLoaded', () => {
const currencySelect = document.getElementById('currency-select');
const satsInputElement = document.getElementById('sats-input');
currencySelect.addEventListener('change', () => {
const selectedCurrency = currencySelect.value;
updateBitcoinPrice(selectedCurrency);
updateFiatToSatsConversion(selectedCurrency);
updateSatsToDollarsConversion(selectedCurrency);
});
});

View File

@ -1,20 +0,0 @@
// Function to change the theme based on the selected option
function changeTheme() {
console.log("changeTheme() called"); // Add this line
var themeSelect = document.getElementById("theme-select");
var selectedTheme = themeSelect.value;
// Construct the theme CSS file path based on the selected theme
var themeCSSFile = "themes/" + selectedTheme + ".css";
// Set the theme CSS file as the stylesheet link's href
var styleSheet = document.querySelector('link[href^="themes/"]');
styleSheet.href = themeCSSFile;
}
// Add an event listener to the theme dropdown to change the theme on selection change
document.getElementById("theme-select").addEventListener("change", changeTheme);
// Initial theme setup when the page loads
console.log("Initial theme setup"); // Add this line
changeTheme(); // This line was missing in your previous code

View File

@ -0,0 +1,56 @@
@config "tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-bgPrimary: rgb(225, 225, 225);
--color-bgSecondary: rgb(255, 255, 255);
--color-bgInverted: rgb(16, 16, 16);
--color-text: rgb(0, 0, 0);
--color-textMuted: rgb(100, 100, 100);
--color-textInverted: rgb(255, 255, 255);
}
:root[data-theme="dark"] {
--color-bgPrimary: rgb(16, 16, 16);
--color-bgSecondary: rgb(40, 40, 40);
--color-bgInverted: rgb(225, 225, 225);
--color-text: rgb(255, 255, 255);
--color-textMuted: rgb(200, 200, 200);
--color-textInverted: rgb(16, 16, 16);
}
:root[data-theme="midnight"] {
--color-bgPrimary: rgb(25, 24, 48);
--color-bgSecondary: rgb(31, 31, 65);
--color-bgInverted: rgb(250, 208, 0);
--color-text: rgb(206, 197, 255);
--color-textMuted: rgb(102, 241, 255);
--color-textInverted: rgb(236, 208, 0);
}
}
.loader {
border-top-color: #3498db; /* Spinner color */
-webkit-animation: spinner 1.5s linear infinite; /* Safari */
animation: spinner 1.5s linear infinite;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
} /* Safari */
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@ -0,0 +1,9 @@
# Development
For Tailwind to Rebuild the Output CSS, a watcher must be run to compile the new styling as pages are edited.
To do this run:
```bash
tailwindcss -i style/input.css -o style/output.css --watch
```

View File

@ -0,0 +1,17 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.{html,js}"],
theme: {
extend: {
colors: {
bgPrimary: "var(--color-bgPrimary)",
bgSecondary:"var(--color-bgSecondary)",
bgInverted: "var(--color-bgInverted)",
text: "var(--color-text)",
textMuted: "var(--color-textMuted)",
textInverted: "var(--color-textInverted)",
}
},
},
plugins: [],
};

View File

@ -28,7 +28,7 @@ class MainActivity : AppCompatActivity() {
webView.clearCache(true) webView.clearCache(true)
// Initialize with the default theme // Initialize with the default theme
currentThemeCSSCode = loadThemeCSS("themes/Dark.css") currentThemeCSSCode = loadThemeCSS("style/output.css")
loadWebViewWithTheme(currentThemeCSSCode) loadWebViewWithTheme(currentThemeCSSCode)
} }
@ -38,7 +38,7 @@ class MainActivity : AppCompatActivity() {
// Load the HTML content // Load the HTML content
val htmlContent = try { val htmlContent = try {
assetManager.open("app.html").bufferedReader().use { it.readText() } assetManager.open("index.html").bufferedReader().use { it.readText() }
} catch (e: IOException) { } catch (e: IOException) {
e.printStackTrace() e.printStackTrace()
"<html><body><h1>Error loading HTML</h1></body></html>" "<html><body><h1>Error loading HTML</h1></body></html>"
@ -46,11 +46,7 @@ class MainActivity : AppCompatActivity() {
// Load all styles from the 'styles' directory // Load all styles from the 'styles' directory
val styleFiles = listOf( val styleFiles = listOf(
"styles/settings.css", "style/output.css",
"styles/bitcoinPrice.css",
"styles/exchange.css",
"styles/fiatToSats.css",
"styles/satsToFiat.css"
) )
val styleContents = styleFiles.map { fileName -> val styleContents = styleFiles.map { fileName ->
@ -64,11 +60,7 @@ class MainActivity : AppCompatActivity() {
// Load the JavaScript code // Load the JavaScript code
val scriptFiles = listOf( val scriptFiles = listOf(
"scripts/selectTheme.js", "js/main.js",
"scripts/viewBitcoinPrice.js",
"scripts/viewFiatToSats.js",
"scripts/selectCurrency.js",
"scripts/calcSatsToFiat.js"
) )
val scriptContents = scriptFiles.map { fileName -> val scriptContents = scriptFiles.map { fileName ->
@ -118,4 +110,4 @@ class MainActivity : AppCompatActivity() {
"/* Error loading $cssFile */" "/* Error loading $cssFile */"
} }
} }
} }