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,27 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<script src="https://cdn.tailwindcss.com"></script> <!--<script src="https://cdn.tailwindcss.com"></script>-->
<link rel="stylesheet" href="style/output.css" /> <link rel="stylesheet" href="style/output.css" />
<script src="js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body class="bg-primary grid-cols-1 text-center text-text">
<div class="container"> <body class="bg-bgPrimary text-text text-center">
<div class="settings"> <div class="container border-solid border-1 border-bgInverted p-4">
<img src="file:///android_asset/images/cog.png" alt="cog" /> <div class="settings rounded-md bg-bgSecondary p-1">
<div class="theme-dropdown"> <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> <label for="theme-select"></label>
<select id="theme-select"> <select id="theme-select" class="p-1 rounded-md bg-bgPrimary text-text">
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="lava">Lava</option> <option value="lava">Lava</option>
<option value="midnight">Midnight</option> <option value="midnight">Midnight</option>
<option value="solar">Solar</option> <option value="solar">Solar</option>
</select> </select>
</div> </div>
<div class="currency-dropdown"> <div class="currency-dropdown mt-4">
<label for="currency-select"></label> <label for="currency-select"></label>
<select id="currency-select"> <select id="currency-select" class="p-1 rounded-md bg-bgPrimary text-text">
<option value="usd">U.S. Dollar</option> <option value="usd">U.S. Dollar</option>
<option value="ars">Argentine Peso</option> <option value="ars">Argentine Peso</option>
<option value="brl">Brazilian Real</option> <option value="brl">Brazilian Real</option>
@ -43,48 +44,52 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container mt-8">
<div class="price-display"> <div class="price-display">
<div class="bitcoin-logo"> <div class="bitcoin-logo">
<img src="file:///android_asset/images/logo.png" alt="BTC" /> <img src="file:///android_asset/images/logo.png" alt="BTC" class="w-16 mx-auto" />
</div> </div>
<div id="bitcoin-price"></div> <div id="bitcoin-price" class="text-2xl font-semibold mt-4">Bitcoin Price: <span id="price-value">Loading...</span></div>
</div> </div>
</div> </div>
<div class="container"> <div class="container mt-8">
<div id="dollars-to-sats"></div> <div class="flex justify-center">
<div class="w-64">
<div id="dollars-to-sats" class="text-lg font-semibold"></div>
</div>
</div>
</div> </div>
<div class="container"> <div class="container mt-8">
<div class="satstodollars"> <div class="satstodollars">
<h2>Sats to fiat Calc</h2> <h2 class="text-xl font-semibold mb-4">Sats to Fiat Calculator</h2>
<label for="sats-input">Enter the amount of Bitcoin in satoshis:</label> <label for="sats-input" class="block mb-2">Enter the amount of Bitcoin in satoshis:</label>
<br /> <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" />
<input type="number" id="sats-input" /> <output id="dollars-output" class="block text-lg font-semibold">Converted Fiat: <span id="fiat-output">0</span></output>
<br />
<output id="dollars-output"></output>
</div> </div>
</div> </div>
<div class="container mt-8 p-4">
<div id="exchange"> <div id="exchange">
<h2>Buy Bitcoin Here 👇</h2> <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>
</div>
<!--<script type="module" src="js/main.js"></script>-->
</body> </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
useWideViewPort = true
domStorageEnabled = true
cacheMode = WebSettings.LOAD_NO_CACHE
}
webView.webViewClient = object : WebViewClient() { // Clear the WebView cache (optional)
override fun shouldOverrideUrlLoading( webView.clearCache(true)
view: WebView?,
request: WebResourceRequest?
): Boolean {
view?.loadUrl(request?.url.toString())
return true
}
}
webView.webChromeClient = object : WebChromeClient() {
// You can override other WebChromeClient methods if needed
}
}
private fun loadScripts(assetManager: AssetManager) {
try {
assetManager.loadUrl("file:///android_asset/js/main.js")
// 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) { } catch (e: IOException) {
e.printStackTrace() e.printStackTrace()
// Return placeholder for error cases // If loading HTML fails, set some default content
"/* Error loading scripts */" "<html><body><h1>Error loading HTML</h1></body></html>"
} }
val assetManager = assets
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 ->
private fun loadWebView() { try {
loadScripts() assetManager.open(fileName).bufferedReader().use { it.readText() }
webView.loadUrl("file:///android_asset/index.html") } catch (e: IOException) {
e.printStackTrace()
"/* Error loading script: $fileName */"
} }
} }
val cssFiles = listOf(
"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 ->
try {
assetManager.open(fileName).bufferedReader().use { it.readText() }
} catch (e: IOException) {
e.printStackTrace()
"/* Error loading $fileName */"
}
}
val javaScriptCode = scriptContents.joinToString("\n")
// Combine the HTML, CSS, and JavaScript code
val finalHtmlContent = """
<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)
}
}