OceanSlim/SatWorth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Themes Implemented!

Browse Source
This commit is contained in:
Chris kerr 2024-03-28 22:15:20 -04:00
parent ad1997ae32
commit 396eeb944b
3 changed files with 113 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/src/main/assets/index.html
View File

@ -1,24 +1,24 @@
<!DOCTYPE html>
<html>
<html data-theme="dark">
<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="ml-2 mr-2 text-center bg-bgPrimary text-text">
<body class="ml-2 mr-2 text-center font-mono bg-bgPrimary text-text">
<div
id="settings"
class="container p-2 mt-2 border-4 rounded-md border-bgInverted bg-bgSecondary"
class="container flex mt-2 border-2 rounded-md border-bgInverted bg-bgSecondary"
>
<img
src="file:///android_asset/images/cog.png"
alt="cog"
class="w-8 h-8 t-2 l-2"
/>
<div class="container flex justify-center pb-4">
<div class="mt-4 theme-dropdown">
<select id="theme-select" class="p-1 rounded-md bg-bgPrimary text-text">
<select
id="theme-select"
class="p-1 mr-2 rounded-md bg-bgPrimary text-text"
>
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="lava">Lava</option>
<option value="midnight">Midnight</option>
<option value="solar">Solar</option>
@ -47,15 +47,23 @@
<option value="vnd">Dong</option>
</select>
</div>
<img
src="file:///android_asset/images/cog.png"
alt="cog"
class="w-4 h-4 m-2 position-fixed t-2 r-2"
onerror="this.src='images/cog.png'"
/>
</div>
</div>
<div
class="container p-2 mt-4 border-4 rounded-md border-bgInverted bg-bgSecondary"
class="container p-2 mt-4 border-2 rounded-md border-bgInverted bg-bgSecondary"
>
<img
src="file:///android_asset/images/logo.png"
alt="btc"
class="w-16 mx-auto"
onerror="this.src='images/logo.png'"
/>
<div id="bitcoin-price" class="mt-4 text-2xl font-semibold">
@ -63,29 +71,20 @@
</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 border-4 rounded-md border-bgInverted bg-bgSecondary"
class="container mt-4 text-lg p-4 font-semibold border-2 rounded-md border-bgInverted bg-bgSecondary"
></div>
</div>
</div>
</div>
<div
class="container mt-8 border-4 rounded-md border-bgInverted bg-bgSecondary"
class="container mt-4 border-2 rounded-md border-bgInverted bg-bgSecondary"
>
<div class="satstodollars">
<h2 class="mb-4 text-xl font-semibold">Sats to Fiat Calculator</h2>
<label for="sats-input" class="block mb-2"
>Enter the amount of Bitcoin in satoshis:</label
>
<h2 class="mb-2 pt-2 text-xl font-semibold">Sats to Fiat Calculator</h2>
<input
type="number"
id="sats-input"
class="w-3/4 p-2 mb-4 border-2 rounded-md border-bgPrimary"
class="w-3/4 p-2 mb-4 border-2 rounded-md border-bgPrimary text-textInverted"
placeholder="Enter amount in satoshis"
/>
<output
@ -96,38 +95,37 @@
</div>
<div
class="container p-4 mt-8 border-4 rounded-md border-bgInverted bg-bgSecondary"
class="container w-1/4 top-0 float-right mr-4 p-4 mt-8 border-2 rounded-md border-bgInverted bg-bgSecondary"
>
<div id="exchange">
<h2 class="mb-4 text-2xl font-semibold">Buy Bitcoin Here 👇</h2>
<h2 class="mb-4 text-xs font-semibold">Buy Bitcoin Here 👇</h2>
<div class="flex justify-around">
<div class="app-image">
<a href="https://www.swanbitcoin.com/oceanslim"
><img
src="file:///android_asset/images/swan.png"
alt="App 1"
class="w-32 p-1 mx-auto rounded-3xl"
class="w-16 p-1 mx-auto rounded-3xl"
onerror="this.src='images/swan.png'"
/></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"
class="w-32 p-1 mx-auto rounded-3xl"
class="w-16 p-1 mx-auto rounded-3xl"
onerror="this.src='images/river.png'"
/></a>
</div>
<div class="app-image">
<a href="https://cash.app/app/HRPBCNS"
><img
src="file:///android_asset/images/cashapp.png"
alt="App 3"
class="w-32 p-1 mx-auto rounded-3xl"
class="w-16 p-1 mx-auto rounded-3xl"
onerror="this.src='images/cashapp.png'"
/></a>
</div>
</div>
</div>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>

10
app/src/main/assets/js/main.js
View File

@ -15,6 +15,16 @@ function updateBitcoinPrice(selectedCurrency) {
})
.catch(error => console.error(error));
}
function handleThemeChange() {
var selectedTheme = document.getElementById("theme-select").value;
document.documentElement.setAttribute("data-theme", selectedTheme);
}
// Event listener for theme select change
document.getElementById("theme-select").addEventListener("change", handleThemeChange);
//function refreshBitcoinPrice(selectedCurrency) {
// updateBitcoinPrice(selectedCurrency);
// setInterval(() => updateBitcoinPrice(selectedCurrency), 300000);

32
app/src/main/assets/style/input.css
View File

@ -6,14 +6,6 @@
@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);
@ -21,6 +13,14 @@
--color-textMuted: rgb(200, 200, 200);
--color-textInverted: rgb(16, 16, 16);
}
:root[data-theme="light"] {
--color-bgPrimary: rgb(200, 200, 200);
--color-bgSecondary: rgb(230, 230, 230);
--color-bgInverted: rgb(80, 80, 80);
--color-text: rgb(0, 0, 0);
--color-textMuted: rgb(100, 100, 100);
--color-textInverted: rgb(255, 255, 255);
}
:root[data-theme="midnight"] {
--color-bgPrimary: rgb(25, 24, 48);
--color-bgSecondary: rgb(31, 31, 65);
@ -29,6 +29,22 @@
--color-textMuted: rgb(102, 241, 255);
--color-textInverted: rgb(236, 208, 0);
}
:root[data-theme="lava"] {
--color-bgPrimary: rgb(57, 0, 0);
--color-bgSecondary: rgb(97, 0, 0);
--color-bgInverted: rgb(0, 0, 0);
--color-text: rgb(241, 39, 39);
--color-textMuted: rgb(102, 241, 255);
--color-textInverted: rgb(236, 208, 0);
}
:root[data-theme="solar"] {
--color-bgPrimary: rgb(0, 43, 54);
--color-bgSecondary: rgb(7, 54, 56);
--color-bgInverted: rgb(115, 174, 99);
--color-text: rgb(55, 148, 255);
--color-textMuted: rgb(102, 241, 255);
--color-textInverted: rgb(236, 208, 0);
}
}
.loader {