V2 Refactor

refresh
2024-03-27 14:44:23 -04:00 · 2024-03-26 23:09:53 -04:00 · 2024-03-26 19:39:50 -04:00 · 2024-03-26 19:33:40 -04:00
24 changed files with 222 additions and 158 deletions
--- a/.gitignore
+++ b/.gitignore
@ -13,3 +13,4 @@
 .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
@ -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>
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@ -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>
--- a/app/src/main/assets/scripts/calcSatsToFiat.js
+++ b/app/src/main/assets/scripts/calcSatsToFiat.js
@ -1,5 +1,5 @@
 // satsToDollarsCalc.js
-function updateSatsToDollarsConversion() {
+export function updateSatsToDollarsConversion() {
    const satsInputElement = document.getElementById('sats-input');
    const dollarsOutputElement = document.getElementById('dollars-output');

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

-function refreshBitcoinPrice(selectedCurrency) {
+export 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
-function updateFiatToSatsConversion(selectedCurrency) {
+export function updateFiatToSatsConversion(selectedCurrency) {
    fetch(`https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=${selectedCurrency}`)
        .then(response => response.json())
        .then(data => {
@ -12,14 +12,3 @@ 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/scripts/selectCurrency.js
+++ b/app/src/main/assets/scripts/selectCurrency.js
@ -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);
-    });
-});
--- a/app/src/main/assets/scripts/selectTheme.js
+++ b/app/src/main/assets/scripts/selectTheme.js
@ -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
--- 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/assets/style/input.css
+++ b/app/src/main/assets/style/input.css
@ -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);
+  }
+}
--- a/app/src/main/assets/style/readme.md
+++ b/app/src/main/assets/style/readme.md
@ -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
+```
--- a/app/src/main/assets/style/tailwind.config.js
+++ b/app/src/main/assets/style/tailwind.config.js
@ -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: [],
+};
--- 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("themes/Dark.css")
+        currentThemeCSSCode = loadThemeCSS("style/output.css")
        loadWebViewWithTheme(currentThemeCSSCode)
    }

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

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

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

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

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

        val scriptContents = scriptFiles.map { fileName ->
Author	SHA1	Message	Date
Chris kerr	72118e1113	V2 Refactor	2024-03-27 14:44:23 -04:00
Chris kerr	48aaa67687	V2 Refactor	2024-03-26 23:09:53 -04:00
Chris kerr	1f1ac760ca	refresh	2024-03-26 19:39:50 -04:00
Chris kerr	23c4fb4747	added tailwind styling	2024-03-26 19:33:40 -04:00