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