styling
This commit is contained in:
parent
e5504fd8b6
commit
ad1997ae32
@ -1,18 +1,22 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
<html>
|
||||||
|
|
||||||
<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-bgPrimary text-text text-center">
|
<body class="ml-2 mr-2 text-center bg-bgPrimary text-text">
|
||||||
<div class="container border-solid border-1 border-bgInverted p-4">
|
<div
|
||||||
<div class="settings rounded-md bg-bgSecondary p-1">
|
id="settings"
|
||||||
<img src="file:///android_asset/images/cog.png" alt="cog" class="w-16 h-8 w-8 t-2 l-2" />
|
class="container p-2 mt-2 border-4 rounded-md border-bgInverted bg-bgSecondary"
|
||||||
<div class="theme-dropdown mt-4">
|
>
|
||||||
<label for="theme-select"></label>
|
<img
|
||||||
|
src="file:///android_asset/images/cog.png"
|
||||||
|
alt="cog"
|
||||||
|
class="w-8 h-8 t-2 l-2"
|
||||||
|
/>
|
||||||
|
<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 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>
|
||||||
@ -20,9 +24,11 @@
|
|||||||
<option value="solar">Solar</option>
|
<option value="solar">Solar</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="currency-dropdown mt-4">
|
<div class="mt-4 currency-dropdown">
|
||||||
<label for="currency-select"></label>
|
<select
|
||||||
<select id="currency-select" class="p-1 rounded-md bg-bgPrimary text-text">
|
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>
|
||||||
@ -42,54 +48,86 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container mt-8">
|
<div
|
||||||
<div class="price-display">
|
class="container p-2 mt-4 border-4 rounded-md border-bgInverted bg-bgSecondary"
|
||||||
<div class="bitcoin-logo">
|
>
|
||||||
<img src="file:///android_asset/images/logo.png" alt="BTC" class="w-16 mx-auto" />
|
<img
|
||||||
</div>
|
src="file:///android_asset/images/logo.png"
|
||||||
<div id="bitcoin-price" class="text-2xl font-semibold mt-4">Bitcoin Price: <span id="price-value">Loading...</span></div>
|
alt="btc"
|
||||||
|
class="w-16 mx-auto"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div id="bitcoin-price" class="mt-4 text-2xl font-semibold">
|
||||||
|
Bitcoin Price: <span id="price-value">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container mt-8">
|
<div class="container mt-8">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<div class="w-64">
|
<div class="w-64">
|
||||||
<div id="dollars-to-sats" class="text-lg font-semibold"></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>
|
</div>
|
||||||
|
|
||||||
<div class="container mt-8">
|
<div
|
||||||
|
class="container mt-8 border-4 rounded-md border-bgInverted bg-bgSecondary"
|
||||||
|
>
|
||||||
<div class="satstodollars">
|
<div class="satstodollars">
|
||||||
<h2 class="text-xl font-semibold mb-4">Sats to Fiat Calculator</h2>
|
<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>
|
<label for="sats-input" class="block mb-2"
|
||||||
<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" />
|
>Enter the amount of Bitcoin in satoshis:</label
|
||||||
<output id="dollars-output" class="block text-lg font-semibold">Converted Fiat: <span id="fiat-output">0</span></output>
|
>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="sats-input"
|
||||||
|
class="w-3/4 p-2 mb-4 border-2 rounded-md border-bgPrimary"
|
||||||
|
placeholder="Enter amount in satoshis"
|
||||||
|
/>
|
||||||
|
<output
|
||||||
|
id="dollars-output"
|
||||||
|
class="block text-lg font-semibold"
|
||||||
|
></output>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container mt-8 p-4">
|
<div
|
||||||
|
class="container p-4 mt-8 border-4 rounded-md border-bgInverted bg-bgSecondary"
|
||||||
|
>
|
||||||
<div id="exchange">
|
<div id="exchange">
|
||||||
<h2 class="text-2xl font-semibold mb-4">Buy Bitcoin Here 👇</h2>
|
<h2 class="mb-4 text-2xl font-semibold">Buy Bitcoin Here 👇</h2>
|
||||||
<div class="flex justify-around">
|
<div class="flex justify-around">
|
||||||
<div class="app-image">
|
<div class="app-image">
|
||||||
<a href="https://www.swanbitcoin.com/oceanslim"><img src="file:///android_asset/images/swan.png"
|
<a href="https://www.swanbitcoin.com/oceanslim"
|
||||||
alt="App 1" class="w-32 mx-auto rounded-3xl p-1" /></a>
|
><img
|
||||||
|
src="file:///android_asset/images/swan.png"
|
||||||
|
alt="App 1"
|
||||||
|
class="w-32 p-1 mx-auto rounded-3xl"
|
||||||
|
/></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-image">
|
<div class="app-image">
|
||||||
<a href="https://river.com/signup?r=5WLPVSJQ"><img src="file:///android_asset/images/river.png"
|
<a href="https://river.com/signup?r=5WLPVSJQ"
|
||||||
alt="App 2" class="w-32 mx-auto rounded-3xl p-1" /></a>
|
><img
|
||||||
|
src="file:///android_asset/images/river.png"
|
||||||
|
alt="App 2"
|
||||||
|
class="w-32 p-1 mx-auto rounded-3xl"
|
||||||
|
/></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-image">
|
<div class="app-image">
|
||||||
<a href="https://cash.app/app/HRPBCNS"><img src="file:///android_asset/images/cashapp.png"
|
<a href="https://cash.app/app/HRPBCNS"
|
||||||
alt="App 3" class="w-32 mx-auto rounded-3xl p-1" /></a>
|
><img
|
||||||
|
src="file:///android_asset/images/cashapp.png"
|
||||||
|
alt="App 3"
|
||||||
|
class="w-32 p-1 mx-auto rounded-3xl"
|
||||||
|
/></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--<script type="module" src="js/main.js"></script>-->
|
<script type="module" src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user