24 changed files with 158 additions and 222 deletions
--- a/.gitignore
+++ b/.gitignore
@ -13,4 +13,3 @@
 .externalNativeBuild
 .cxx
 local.properties
-output.css
--- a/app/debug/app-debug.aab
+++ b/app/debug/app-debug.aab
--- a/app/release/app-release.aab
+++ b/app/release/app-release.aab
--- a/app/src/main/assets/app.html
+++ b/app/src/main/assets/app.html
@ -0,0 +1,84 @@
+<!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>
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@ -1,89 +0,0 @@
-<!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>
--- a/app/src/main/assets/js/main.js
+++ b/app/src/main/assets/js/main.js
@ -1,39 +0,0 @@
-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
-
-});
--- a/app/src/main/assets/scripts/calcSatsToFiat.js
+++ b/app/src/main/assets/scripts/calcSatsToFiat.js
@ -1,5 +1,5 @@
 // satsToDollarsCalc.js
-export function updateSatsToDollarsConversion() {
+function updateSatsToDollarsConversion() {
    const satsInputElement = document.getElementById('sats-input');
    const dollarsOutputElement = document.getElementById('dollars-output');

@ -24,3 +24,9 @@ export function updateSatsToDollarsConversion() {
        dollarsOutputElement.textContent = '';
    }
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+    const satsInputElement = document.getElementById('sats-input');
+
+    satsInputElement.addEventListener('input', updateSatsToDollarsConversion);
+});
--- a/app/src/main/assets/scripts/selectCurrency.js
+++ b/app/src/main/assets/scripts/selectCurrency.js
@ -0,0 +1,12 @@
+// 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);
+    });
+});
--- a/app/src/main/assets/scripts/selectTheme.js
+++ b/app/src/main/assets/scripts/selectTheme.js
@ -0,0 +1,20 @@
+// 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
--- a/app/src/main/assets/scripts/viewBitcoinPrice.js
+++ b/app/src/main/assets/scripts/viewBitcoinPrice.js
@ -1,5 +1,5 @@
 // bitcoinPriceTracker.js
-export function updateBitcoinPrice(selectedCurrency) {
+function updateBitcoinPrice(selectedCurrency) {
    fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`)
        .then(response => response.json())
        .then(data => {
@ -11,7 +11,13 @@ export function updateBitcoinPrice(selectedCurrency) {
        .catch(error => console.error(error));
 }

-export function refreshBitcoinPrice(selectedCurrency) {
+function refreshBitcoinPrice(selectedCurrency) {
    updateBitcoinPrice(selectedCurrency);
    setInterval(() => updateBitcoinPrice(selectedCurrency), 300000);
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+    const currencySelect = document.getElementById('currency-select');
+    const selectedCurrency = currencySelect.value;
+    refreshBitcoinPrice(selectedCurrency);
+});
--- a/app/src/main/assets/scripts/viewFiatToSats.js
+++ b/app/src/main/assets/scripts/viewFiatToSats.js
@ -1,5 +1,5 @@
 // fiatToSatsConverter.js
-export function updateFiatToSatsConversion(selectedCurrency) {
+function updateFiatToSatsConversion(selectedCurrency) {
    fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`)
        .then(response => response.json())
        .then(data => {
@ -12,3 +12,14 @@ export function updateFiatToSatsConversion(selectedCurrency) {
        })
        .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);
+    });
+});
--- a/app/src/main/assets/style/input.css
+++ b/app/src/main/assets/style/input.css
@ -1,56 +0,0 @@
-@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);
-  }
-}
--- a/app/src/main/assets/style/readme.md
+++ b/app/src/main/assets/style/readme.md
@ -1,9 +0,0 @@
-# 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
-```
--- a/app/src/main/assets/style/tailwind.config.js
+++ b/app/src/main/assets/style/tailwind.config.js
@ -1,17 +0,0 @@
-/** @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: [],
-};
--- a/app/src/main/assets/style.old/styles/bitcoinPrice.css
+++ b/app/src/main/assets/style.old/styles/bitcoinPrice.css
--- a/app/src/main/assets/style.old/styles/exchange.css
+++ b/app/src/main/assets/style.old/styles/exchange.css
--- a/app/src/main/assets/style.old/styles/fiatToSats.css
+++ b/app/src/main/assets/style.old/styles/fiatToSats.css
--- a/app/src/main/assets/style.old/styles/satsToFiat.css
+++ b/app/src/main/assets/style.old/styles/satsToFiat.css
--- a/app/src/main/assets/style.old/styles/settings.css
+++ b/app/src/main/assets/style.old/styles/settings.css
--- a/app/src/main/assets/style.old/themes/Dark.css
+++ b/app/src/main/assets/style.old/themes/Dark.css
--- a/app/src/main/assets/style.old/themes/Lava.css
+++ b/app/src/main/assets/style.old/themes/Lava.css
--- a/app/src/main/assets/style.old/themes/Midnight.css
+++ b/app/src/main/assets/style.old/themes/Midnight.css
--- a/app/src/main/assets/style.old/themes/Solar.css
+++ b/app/src/main/assets/style.old/themes/Solar.css
--- a/app/src/main/java/com/example/satworth/MainActivity.kt
+++ b/app/src/main/java/com/example/satworth/MainActivity.kt
@ -28,7 +28,7 @@ class MainActivity : AppCompatActivity() {
        webView.clearCache(true)

        // Initialize with the default theme
-        currentThemeCSSCode = loadThemeCSS("style/output.css")
+        currentThemeCSSCode = loadThemeCSS("themes/Dark.css")
        loadWebViewWithTheme(currentThemeCSSCode)
    }

@ -38,7 +38,7 @@ class MainActivity : AppCompatActivity() {

        // Load the HTML content
        val htmlContent = try {
-            assetManager.open("index.html").bufferedReader().use { it.readText() }
+            assetManager.open("app.html").bufferedReader().use { it.readText() }
        } catch (e: IOException) {
            e.printStackTrace()
            "<html><body><h1>Error loading HTML</h1></body></html>"
@ -46,7 +46,11 @@ class MainActivity : AppCompatActivity() {

        // Load all styles from the 'styles' directory
        val styleFiles = listOf(
-            "style/output.css",
+            "styles/settings.css",
+            "styles/bitcoinPrice.css",
+            "styles/exchange.css",
+            "styles/fiatToSats.css",
+            "styles/satsToFiat.css"
        )

        val styleContents = styleFiles.map { fileName ->
@ -60,7 +64,11 @@ class MainActivity : AppCompatActivity() {

        // Load the JavaScript code
        val scriptFiles = listOf(
-            "js/main.js",
+            "scripts/selectTheme.js",
+            "scripts/viewBitcoinPrice.js",
+            "scripts/viewFiatToSats.js",
+            "scripts/selectCurrency.js",
+            "scripts/calcSatsToFiat.js"
        )

        val scriptContents = scriptFiles.map { fileName ->