Compare commits

..

4 Commits

Author SHA1 Message Date
e5504fd8b6 basic styling added 2024-03-28 13:57:39 -04:00
ff8eaec590 removed old js scripts 2024-03-28 13:09:17 -04:00
33f3607c20 app js working fully" 2024-03-28 13:08:22 -04:00
3b142d20a4 basic price working 2024-03-28 12:44:15 -04:00
6 changed files with 204 additions and 182 deletions

View File

@ -1,90 +1,95 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style/output.css" />
<script src="js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="bg-primary 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"> <head>
<div class="price-display"> <!--<script src="https://cdn.tailwindcss.com"></script>-->
<div class="bitcoin-logo"> <link rel="stylesheet" href="style/output.css" />
<img src="file:///android_asset/images/logo.png" alt="BTC" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</div> </head>
<div id="bitcoin-price"></div>
</div>
</div>
<div class="container"> <body class="bg-bgPrimary text-text text-center">
<div id="dollars-to-sats"></div> <div class="container border-solid border-1 border-bgInverted p-4">
<div class="settings rounded-md bg-bgSecondary p-1">
<img src="file:///android_asset/images/cog.png" alt="cog" class="w-16 h-8 w-8 t-2 l-2" />
<div class="theme-dropdown mt-4">
<label for="theme-select"></label>
<select id="theme-select" class="p-1 rounded-md bg-bgPrimary text-text">
<option value="dark">Dark</option>
<option value="lava">Lava</option>
<option value="midnight">Midnight</option>
<option value="solar">Solar</option>
</select>
</div> </div>
<div class="currency-dropdown mt-4">
<div class="container"> <label for="currency-select"></label>
<div class="satstodollars"> <select id="currency-select" class="p-1 rounded-md bg-bgPrimary text-text">
<h2>Sats to fiat Calc</h2> <option value="usd">U.S. Dollar</option>
<label for="sats-input">Enter the amount of Bitcoin in satoshis:</label> <option value="ars">Argentine Peso</option>
<br /> <option value="brl">Brazilian Real</option>
<input type="number" id="sats-input" /> <option value="cny">Chinese Yuan</option>
<br /> <option value="eur">Euros</option>
<output id="dollars-output"></output> <option value="inr">Indian Rupee</option>
</div> <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>
<div id="exchange"> <div class="container mt-8">
<h2>Buy Bitcoin Here 👇</h2> <div class="price-display">
<div class="bitcoin-logo">
<img src="file:///android_asset/images/logo.png" alt="BTC" class="w-16 mx-auto" />
</div>
<div id="bitcoin-price" class="text-2xl font-semibold mt-4">Bitcoin Price: <span id="price-value">Loading...</span></div>
</div>
</div>
<div class="container mt-8">
<div class="flex justify-center">
<div class="w-64">
<div id="dollars-to-sats" class="text-lg font-semibold"></div>
</div>
</div>
</div>
<div class="container mt-8">
<div class="satstodollars">
<h2 class="text-xl font-semibold mb-4">Sats to Fiat Calculator</h2>
<label for="sats-input" class="block mb-2">Enter the amount of Bitcoin in satoshis:</label>
<input type="number" id="sats-input" class="w-3/4 p-2 border-2 border-bgSecondary rounded-md mb-4" placeholder="Enter amount in satoshis" />
<output id="dollars-output" class="block text-lg font-semibold">Converted Fiat: <span id="fiat-output">0</span></output>
</div>
</div>
<div class="container mt-8 p-4">
<div id="exchange">
<h2 class="text-2xl font-semibold mb-4">Buy Bitcoin Here 👇</h2>
<div class="flex justify-around">
<div class="app-image"> <div class="app-image">
<a href="https://www.swanbitcoin.com/oceanslim" <a href="https://www.swanbitcoin.com/oceanslim"><img src="file:///android_asset/images/swan.png"
><img src="file:///android_asset/images/swan.png" alt="App 1" alt="App 1" class="w-32 mx-auto rounded-3xl p-1" /></a>
/></a>
</div> </div>
<div class="app-image"> <div class="app-image">
<a href="https://river.com/signup?r=5WLPVSJQ" <a href="https://river.com/signup?r=5WLPVSJQ"><img src="file:///android_asset/images/river.png"
><img src="file:///android_asset/images/river.png" alt="App 2" alt="App 2" class="w-32 mx-auto rounded-3xl p-1" /></a>
/></a>
</div> </div>
<div class="app-image"> <div class="app-image">
<a href="https://cash.app/app/HRPBCNS" <a href="https://cash.app/app/HRPBCNS"><img src="file:///android_asset/images/cashapp.png"
><img src="file:///android_asset/images/cashapp.png" alt="App 3" alt="App 3" class="w-32 mx-auto rounded-3xl p-1" /></a>
/></a>
</div> </div>
</div> </div>
<script type="module" src="js/main.js"></script> </div>
</body> </div>
<!--<script type="module" src="js/main.js"></script>-->
</body>
</html> </html>

View File

@ -1,26 +0,0 @@
// satsToDollarsCalc.js
export function updateSatsToDollarsConversion() {
const satsInputElement = document.getElementById('sats-input');
const dollarsOutputElement = document.getElementById('dollars-output');
const satsValue = parseFloat(satsInputElement.value);
if (!isNaN(satsValue)) {
const currencySelect = document.getElementById('currency-select');
const selectedCurrency = currencySelect.value;
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 satsConversionFactor = 100000000; // 1 bitcoin = 100 million sats
const dollarsValue = (satsValue / satsConversionFactor) * bitcoinPrice;
dollarsOutputElement.textContent = `${dollarsValue.toFixed(2)} ${selectedCurrency.toUpperCase()}`;
})
.catch(error => console.error(error));
} else {
dollarsOutputElement.textContent = '';
}
}

View File

@ -1,8 +1,8 @@
import "/style/output.css"; //import "/style/output.css";
import { updateFiatToSatsConversion } from "./viewFiatToSats"; //import { updateFiatToSatsConversion } from "./viewFiatToSats";
//import { updateBitcoinPrice, refreshBitcoinPrice } from "./viewBitcoinPrice"; //import { updateBitcoinPrice, refreshBitcoinPrice } from "./viewBitcoinPrice";
import { updateSatsToDollarsConversion } from "./calcSatsToFiat"; //import { updateSatsToDollarsConversion } from "./calcSatsToFiat";
function updateBitcoinPrice(selectedCurrency) { 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}`)
@ -15,15 +15,58 @@ function updateBitcoinPrice(selectedCurrency) {
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
} }
//function refreshBitcoinPrice(selectedCurrency) {
// updateBitcoinPrice(selectedCurrency);
// setInterval(() => updateBitcoinPrice(selectedCurrency), 300000);
//}
updateBitcoinPrice('usd'); function updateSatsToDollarsConversion() {
const satsInputElement = document.getElementById('sats-input');
const dollarsOutputElement = document.getElementById('dollars-output');
const satsValue = parseFloat(satsInputElement.value);
if (!isNaN(satsValue)) {
const currencySelect = document.getElementById('currency-select');
const selectedCurrency = currencySelect.value;
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 satsConversionFactor = 100000000; // 1 bitcoin = 100 million sats
const dollarsValue = (satsValue / satsConversionFactor) * bitcoinPrice;
dollarsOutputElement.textContent = `${dollarsValue.toFixed(2)} ${selectedCurrency.toUpperCase()}`;
})
.catch(error => console.error(error));
} else {
dollarsOutputElement.textContent = '';
}
}
function updateFiatToSatsConversion(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 satsConversionFactor = 100000000;
const currencyValue = 1;
const sats = (currencyValue / bitcoinPrice) * satsConversionFactor;
const currencyToSatsElement = document.getElementById('dollars-to-sats');
currencyToSatsElement.textContent = `1 ${selectedCurrency.toUpperCase()} = ${sats.toFixed(0)} sats`;
})
.catch(error => console.error(error));
}
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const satsInputElement = document.getElementById('sats-input'); const satsInputElement = document.getElementById('sats-input');
const currencySelect = document.getElementById('currency-select'); const currencySelect = document.getElementById('currency-select');
const selectedCurrency = currencySelect.value;
// Initially fetch Bitcoin price in USD // Initially fetch Bitcoin price in USD
updateBitcoinPrice('usd'); updateBitcoinPrice(selectedCurrency);
updateFiatToSatsConversion(selectedCurrency)
satsInputElement.addEventListener('input', updateSatsToDollarsConversion); satsInputElement.addEventListener('input', updateSatsToDollarsConversion);
@ -32,8 +75,8 @@ document.addEventListener('DOMContentLoaded', () => {
updateBitcoinPrice(selectedCurrency); updateBitcoinPrice(selectedCurrency);
updateFiatToSatsConversion(selectedCurrency); updateFiatToSatsConversion(selectedCurrency);
updateSatsToDollarsConversion(selectedCurrency); updateSatsToDollarsConversion(selectedCurrency);
updateFiatToSatsConversion(selectedCurrency)
}); });
refreshBitcoinPrice('usd'); // Refresh Bitcoin price in USD
}); });

View File

@ -1,17 +0,0 @@
// bitcoinPriceTracker.js
export 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));
}
export function refreshBitcoinPrice(selectedCurrency) {
updateBitcoinPrice(selectedCurrency);
setInterval(() => updateBitcoinPrice(selectedCurrency), 300000);
}

View File

@ -1,14 +0,0 @@
// fiatToSatsConverter.js
export function updateFiatToSatsConversion(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 satsConversionFactor = 100000000;
const currencyValue = 1;
const sats = (currencyValue / bitcoinPrice) * satsConversionFactor;
const currencyToSatsElement = document.getElementById('dollars-to-sats');
currencyToSatsElement.textContent = `1 ${selectedCurrency.toUpperCase()} = ${sats.toFixed(0)} sats`;
})
.catch(error => console.error(error));
}

View File

@ -1,69 +1,100 @@
package com.example.satworth package com.example.satworth
import android.annotation.SuppressLint import android.annotation.SuppressLint
import android.content.res.AssetManager
import androidx.appcompat.app.AppCompatActivity import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebResourceRequest
import android.webkit.WebSettings
import android.webkit.WebView import android.webkit.WebView
import android.webkit.WebViewClient import android.webkit.WebSettings
import java.io.IOException import java.io.IOException
class MainActivity : AppCompatActivity() { class MainActivity : AppCompatActivity() {
private lateinit var webView: WebView private lateinit var webView: WebView
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main) setContentView(R.layout.activity_main)
// Get the WebView reference from the layout
webView = findViewById(R.id.webView) webView = findViewById(R.id.webView)
setupWebView()
loadWebView()
}
@SuppressLint("SetJavaScriptEnabled") // Enable JavaScript support
private fun setupWebView() { val webSettings: WebSettings = webView.settings
webView.settings.apply { webSettings.javaScriptEnabled = true
javaScriptEnabled = true
loadWithOverviewMode = true // Clear the WebView cache (optional)
useWideViewPort = true webView.clearCache(true)
domStorageEnabled = true
cacheMode = WebSettings.LOAD_NO_CACHE // Load the HTML content from the "app.html" file
val htmlContent = try {
// Load the HTML content from the "app.html" file
assets.open("index.html").bufferedReader().use { it.readText() }
} catch (e: IOException) {
e.printStackTrace()
// If loading HTML fails, set some default content
"<html><body><h1>Error loading HTML</h1></body></html>"
} }
webView.webViewClient = object : WebViewClient() { val assetManager = assets
override fun shouldOverrideUrlLoading( val scriptFiles = listOf(
view: WebView?, "js/main.js",
request: WebResourceRequest? //"scripts/selectTheme.js",
): Boolean { //"scripts/viewBitcoinPrice.js",
view?.loadUrl(request?.url.toString()) //"scripts/viewFiatToSats.js",
return true //"scripts/selectCurrency.js",
//"scripts/calcSatsToFiat.js"
)
val scriptContents = scriptFiles.map { fileName ->
try {
assetManager.open(fileName).bufferedReader().use { it.readText() }
} catch (e: IOException) {
e.printStackTrace()
"/* Error loading script: $fileName */"
} }
} }
webView.webChromeClient = object : WebChromeClient() { val cssFiles = listOf(
// You can override other WebChromeClient methods if needed "style/output.css"
} //"themes/Dark.css",
} //"themes/Midnight.css",
//"themes/Lava.css",
//"themes/Solar.css",
//"styles/settings.css",
//"styles/bitcoinPrice.css",
//"styles/exchange.css",
//"styles/fiatToSats.css",
//"styles/satsToFiat.css"
) // List of your CSS files
val cssCode = cssFiles.joinToString("\n") { fileName ->
private fun loadScripts(assetManager: AssetManager) { try {
try { assetManager.open(fileName).bufferedReader().use { it.readText() }
assetManager.loadUrl("file:///android_asset/js/main.js") } catch (e: IOException) {
e.printStackTrace()
} catch (e: IOException) { "/* Error loading $fileName */"
e.printStackTrace() }
// Return placeholder for error cases
"/* Error loading scripts */"
} }
val javaScriptCode = scriptContents.joinToString("\n")
} // Combine the HTML, CSS, and JavaScript code
private fun loadWebView() { val finalHtmlContent = """
loadScripts() <html>
webView.loadUrl("file:///android_asset/index.html") <head>
<style type="text/css">$cssCode</style>
</head>
<body>
$htmlContent
<script> type="module" $javaScriptCode</script>
</body>
</html>
""".trimIndent()
// Define the base URL for resolving relative paths (e.g., image source)
val baseUrl = "file:///android_asset/"
webView.loadDataWithBaseURL(null, finalHtmlContent, "text/html", "UTF-8", null)
} }
} }