basic styling added

This commit is contained in:
0ceanSlim 2024-03-28 13:57:39 -04:00
parent ff8eaec590
commit e5504fd8b6

View File

@ -1,26 +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" />
<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" />
<label for="theme-select"> </label> <div class="theme-dropdown mt-4">
<select id="theme-select"> <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="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>
@ -40,50 +42,54 @@
</select> </select>
</div> </div>
</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 id="bitcoin-price"></div>
</div> </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 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>
</body> </div>
<!--<script type="module" src="js/main.js"></script>-->
</body>
</html> </html>