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

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

@ -1,61 +1,69 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html data-theme="dark">
<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" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </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 <div
id="settings" 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 <div class="container flex justify-center pb-4">
src="file:///android_asset/images/cog.png" <div class="mt-4 theme-dropdown">
alt="cog" <select
class="w-8 h-8 t-2 l-2" id="theme-select"
/> class="p-1 mr-2 rounded-md bg-bgPrimary text-text"
<div class="mt-4 theme-dropdown"> >
<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="light">Light</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="mt-4 currency-dropdown"> <div class="mt-4 currency-dropdown">
<select <select
id="currency-select" id="currency-select"
class="p-1 rounded-md bg-bgPrimary text-text" 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>
<option value="cny">Chinese Yuan</option> <option value="cny">Chinese Yuan</option>
<option value="eur">Euros</option> <option value="eur">Euros</option>
<option value="inr">Indian Rupee</option> <option value="inr">Indian Rupee</option>
<option value="jpy">Yen</option> <option value="jpy">Yen</option>
<option value="ngn">Nigerian Naira</option> <option value="ngn">Nigerian Naira</option>
<option value="pkr">Pakistani Rupee</option> <option value="pkr">Pakistani Rupee</option>
<option value="pln">Polish Zloty</option> <option value="pln">Polish Zloty</option>
<option value="php">Philippine Peso</option> <option value="php">Philippine Peso</option>
<option value="rub">Russian Ruble</option> <option value="rub">Russian Ruble</option>
<option value="thb">Thai Baht</option> <option value="thb">Thai Baht</option>
<option value="try">Turkish Lira</option> <option value="try">Turkish Lira</option>
<option value="uah">Ukrainian Hryvnia</option> <option value="uah">Ukrainian Hryvnia</option>
<option value="vnd">Dong</option> <option value="vnd">Dong</option>
</select> </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> </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 <img
src="file:///android_asset/images/logo.png" src="file:///android_asset/images/logo.png"
alt="btc" alt="btc"
class="w-16 mx-auto" class="w-16 mx-auto"
onerror="this.src='images/logo.png'"
/> />
<div id="bitcoin-price" class="mt-4 text-2xl font-semibold"> <div id="bitcoin-price" class="mt-4 text-2xl font-semibold">
@ -63,29 +71,20 @@
</div> </div>
</div> </div>
<div class="container mt-8"> <div
<div class="flex justify-center"> id="dollars-to-sats"
<div class="w-64"> class="container mt-4 text-lg p-4 font-semibold border-2 rounded-md border-bgInverted bg-bgSecondary"
<div ></div>
id="dollars-to-sats"
class="text-lg font-semibold border-4 rounded-md border-bgInverted bg-bgSecondary"
></div>
</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"> <div class="satstodollars">
<h2 class="mb-4 text-xl font-semibold">Sats to Fiat Calculator</h2> <h2 class="mb-2 pt-2 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
>
<input <input
type="number" type="number"
id="sats-input" 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" placeholder="Enter amount in satoshis"
/> />
<output <output
@ -96,35 +95,34 @@
</div> </div>
<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"> <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="flex justify-around">
<div class="app-image"> <a href="https://www.swanbitcoin.com/oceanslim"
<a href="https://www.swanbitcoin.com/oceanslim" ><img
><img src="file:///android_asset/images/swan.png"
src="file:///android_asset/images/swan.png" alt="App 1"
alt="App 1" class="w-16 p-1 mx-auto rounded-3xl"
class="w-32 p-1 mx-auto rounded-3xl" onerror="this.src='images/swan.png'"
/></a> /></a>
</div>
<div class="app-image"> <a href="https://river.com/signup?r=5WLPVSJQ"
<a href="https://river.com/signup?r=5WLPVSJQ" ><img
><img src="file:///android_asset/images/river.png"
src="file:///android_asset/images/river.png" alt="App 2"
alt="App 2" class="w-16 p-1 mx-auto rounded-3xl"
class="w-32 p-1 mx-auto rounded-3xl" onerror="this.src='images/river.png'"
/></a> /></a>
</div>
<div class="app-image"> <a href="https://cash.app/app/HRPBCNS"
<a href="https://cash.app/app/HRPBCNS" ><img
><img src="file:///android_asset/images/cashapp.png"
src="file:///android_asset/images/cashapp.png" alt="App 3"
alt="App 3" class="w-16 p-1 mx-auto rounded-3xl"
class="w-32 p-1 mx-auto rounded-3xl" onerror="this.src='images/cashapp.png'"
/></a> /></a>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -15,6 +15,16 @@ function updateBitcoinPrice(selectedCurrency) {
}) })
.catch(error => console.error(error)); .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) { //function refreshBitcoinPrice(selectedCurrency) {
// updateBitcoinPrice(selectedCurrency); // updateBitcoinPrice(selectedCurrency);
// setInterval(() => updateBitcoinPrice(selectedCurrency), 300000); // setInterval(() => updateBitcoinPrice(selectedCurrency), 300000);

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

@ -6,14 +6,6 @@
@layer base { @layer base {
:root { :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-bgPrimary: rgb(16, 16, 16);
--color-bgSecondary: rgb(40, 40, 40); --color-bgSecondary: rgb(40, 40, 40);
--color-bgInverted: rgb(225, 225, 225); --color-bgInverted: rgb(225, 225, 225);
@ -21,6 +13,14 @@
--color-textMuted: rgb(200, 200, 200); --color-textMuted: rgb(200, 200, 200);
--color-textInverted: rgb(16, 16, 16); --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"] { :root[data-theme="midnight"] {
--color-bgPrimary: rgb(25, 24, 48); --color-bgPrimary: rgb(25, 24, 48);
--color-bgSecondary: rgb(31, 31, 65); --color-bgSecondary: rgb(31, 31, 65);
@ -29,6 +29,22 @@
--color-textMuted: rgb(102, 241, 255); --color-textMuted: rgb(102, 241, 255);
--color-textInverted: rgb(236, 208, 0); --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 { .loader {