Scribd
Upload
14 views8 pages

Messagesdfhdfghjdfglkhjfotzijnflktznmfůklghn

The document is an HTML template for a cryptocurrency exchange dashboard named 'Mesa Exchange'. It includes a sidebar for navigation, main content areas for displaying total balance, buy/sell options, and portfolio details, as well as a modal for depositing funds. The design utilizes Tailwind CSS for styling and Font Awesome for icons, providing an interactive user experience with JavaScript functionalities for deposit actions.

Uploaded by

nitrocords145
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views8 pages

Messagesdfhdfghjdfglkhjfotzijnflktznmfůklghn

The document is an HTML template for a cryptocurrency exchange dashboard named 'Mesa Exchange'. It includes a sidebar for navigation, main content areas for displaying total balance, buy/sell options, and portfolio details, as well as a modal for depositing funds. The design utilizes Tailwind CSS for styling and Font Awesome for icons, providing an interactive user experience with JavaScript functionalities for deposit actions.

Uploaded by

nitrocords145
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

<html lang="en">

<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
Mesa Exchange Dashboard
</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css" rel="stylesheet"/>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Inter:wght@400;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: #FFFFFF;
}
.sidebar {
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
backdrop-filter: blur(10px);
}
.card {
background-color: #2E2E3A;
}
.btn-primary {
background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
transition: background 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(90deg, #2563EB 0%, #1E40AF 100%);
}
.btn-deposit {
background: linear-gradient(90deg, #8B5CF6 0%, #D946EF 100%);
color: #FFFFFF;
transition: background 0.3s ease;
}
.btn-deposit:hover {
background: linear-gradient(90deg, #D946EF 0%, #8B5CF6 100%);
}
.text-gray-400 {
color: #9CA3AF;
}
.bg-gray-700 {
background-color: #111827;
}
.bg-gray-800 {
background-color: #1F2937;
}
.bg-gradient-to-r {
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
}
.modal {
display: none;
position: fixed;
z-index: 50;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #2E2E3A;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body class="flex">
<!-- Sidebar -->
<div class="sidebar w-40 h-screen p-4 flex flex-col justify-between">
<div>
<div class="flex items-center mb-8">
<div class="w-8 h-8 bg-blue-500 rounded-full mr-3">
</div>
<span class="text-xl font-bold">
Mesa Exchange
</span>
</div>
<nav class="mb-8">
<ul class="text-sm">
<li class="mb-4">
<a class="flex items-center text-white" href="#">
<i class="fas fa-home mr-2">
</i>
Dashboard
</a>
</li>
<li class="mb-4">
<a class="flex items-center text-gray-400" href="#">
<i class="fas fa-wallet mr-2">
</i>
Wallet
</a>
</li>
<li class="mb-4">
<a class="flex items-center text-gray-400" href="#">
<i class="fas fa-chart-bar mr-2">
</i>
Markets
</a>
</li>
<li class="mb-4">
<a class="flex items-center text-gray-400" href="#">
<i class="fas fa-exchange-alt mr-2">
</i>
Transactions
</a>
</li>
</ul>
</nav>
<div>
<h3 class="text-gray-500 mb-4 text-sm">
OTHERS
</h3>
<ul class="text-sm">
<li class="mb-4">
<a class="flex items-center text-gray-400" href="#">
<i class="fas fa-question-circle mr-2">
</i>
Help
</a>
</li>
<li class="mb-4">
<a class="flex items-center text-gray-400" href="#">
<i class="fas fa-cog mr-2">
</i>
Settings
</a>
</li>
</ul>
</div>
</div>
<div class="mt-8">
<a class="flex items-center text-red-500 text-sm" href="#">
<i class="fas fa-sign-out-alt mr-2">
</i>
Log Out
</a>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6">
<div class="flex justify-between items-center mb-8">
<div class="relative w-1/2">
<input class="w-full p-3 pl-10 rounded-lg bg-gray-800 text-gray-400"
placeholder="Search cryptocurrency, news, etc..." type="text"/>
<i class="fas fa-search absolute left-3 top-3 text-gray-400">
</i>
</div>
<div class="flex items-center">
<i class="fas fa-bell text-gray-400">
</i>
<div class="w-10 h-10 bg-gray-600 rounded-full ml-6">
</div>
<div class="ml-6 text-gray-400" id="robuxBalance">
$0.00
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<!-- Total Balance -->
<div class="card p-6 rounded-lg col-span-1 bg-gradient-to-r">
<h2 class="text-xl font-bold mb-4">
Total Balance
</h2>
<div class="flex items-center justify-between mb-4">
<div>
<p class="text-4xl font-bold" id="totalBalance">
$932,128.00
</p>
<p class="text-gray-400">
19,49673137 BTC
</p>
</div>
</div>
<button class="btn-deposit w-full py-2 rounded-lg" id="depositBtn">
DEPOSIT
</button>
</div>
<!-- Buy/Sell -->
<div class="card p-6 rounded-lg col-span-1 bg-gray-700">
<h2 class="text-xl font-bold mb-4">
Buy/Sell
</h2>
<div class="flex justify-between mb-4">
<button class="text-white">
Buy
</button>
<button class="text-gray-400">
Sell
</button>
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2">
Bitcoin Price
</label>
<div class="flex items-center bg-gray-800 p-3 rounded-lg">
<i class="fab fa-bitcoin text-yellow-500 mr-3">
</i>
<span>
Bitcoin BTC
</span>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2">
Amount
</label>
<div class="flex items-center bg-gray-800 p-3 rounded-lg">
<span>
$8,783.20
</span>
<span class="ml-auto">
USD
</span>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2">
Amount
</label>
<div class="flex items-center bg-gray-800 p-3 rounded-lg">
<span>
0.183712821
</span>
<span class="ml-auto">
BTC
</span>
</div>
</div>
<button class="btn-primary w-full py-3 rounded-lg text-lg font-semibold">
Buy BTC
</button>
</div>
<!-- My Portfolio -->
<div class="card p-6 rounded-lg col-span-1 bg-gray-700">
<h2 class="text-xl font-bold mb-4">
My Portfolio
</h2>
<ul>
<li class="flex items-center justify-between mb-4">
<div class="flex items-center">
<i class="fab fa-bitcoin text-yellow-500 mr-3">
</i>
<span>
Bitcoin BTC
</span>
</div>
<div>
<p class="text-white">
BTC 0.01284736
</p>
<p class="text-white">
$613,729
</p>
</div>
</li>
<li class="flex items-center justify-between mb-4">
<div class="flex items-center">
<i class="fab fa-ethereum text-blue-500 mr-3">
</i>
<span>
Ethereum ETH
</span>
</div>
<div>
<p class="text-gray-400">
ETH 0.01283721
</p>
<p class="text-white">
$43,152
</p>
</div>
</li>
<li class="flex items-center justify-between mb-4">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-500 mr-3">
</i>
<span>
Cardano ADA
</span>
</div>
<div>
<p class="text-gray-400">
ADA 9.02384729
</p>
<p class="text-white">
$281,124
</p>
</div>
</li>
<li class="flex items-center justify-between mb-4">
<div class="flex items-center">
<i class="fab fa-dogecoin text-yellow-500 mr-3">
</i>
<span>
Dogecoin DOGE
</span>
</div>
<div>
<p class="text-gray-400">
DOGE 120.03984962
</p>
<p class="text-white">
$29,921
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="depositModal">
<div class="modal-content">
<span class="close" id="closeModal">&times;</span>
<h2 class="text-xl font-bold mb-4">Deposit Funds</h2>
<form id="depositForm">
<div class="mb-4">
<label class="block text-gray-400 mb-2">Amount</label>
<input class="w-full p-3 rounded-lg bg-gray-800 text-gray-400" type="text"
id="depositAmount" placeholder="Enter amount"/>
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2">Payment Method</label>
<div class="flex space-x-4">
<button class="bg-gray-800 p-3 rounded-lg text-gray-400 flex-1"
type="button" id="visaBtn">
<i class="fab fa-cc-visa mr-2"></i> Visa
</button>
<button class="bg-gray-800 p-3 rounded-lg text-gray-400 flex-1"
type="button" id="mastercardBtn">
<i class="fab fa-cc-mastercard mr-2"></i> Mastercard
</button>
</div>
<div class="flex space-x-4 mt-4">
<button class="bg-gray-800 p-3 rounded-lg text-gray-400 flex-1"
type="button" id="cryptoBtn">
<i class="fab fa-bitcoin mr-2"></i> Crypto
</button>
<button class="bg-gray-800 p-3 rounded-lg text-gray-400 flex-1"
type="button" id="robuxBtn">
<i class="fab fa-roblox mr-2"></i> Robux
</button>
</div>
</div>
<button class="btn-primary w-full py-3 rounded-lg text-lg font-semibold"
type="submit">Deposit</button>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("depositModal");

// Get the button that opens the modal


var btn = document.getElementById("depositBtn");

// Get the <span> element that closes the modal


var span = document.getElementById("closeModal");

// When the user clicks the button, open the modal


btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal


span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it


window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

// Handle deposit form submission


document.getElementById("depositForm").onsubmit = function(event) {
event.preventDefault();
var amount =
parseFloat(document.getElementById("depositAmount").value);
if (isNaN(amount) || amount <= 0) {
alert("Please enter a valid amount.");
return;
}
// Simulate successful deposit
var totalBalanceElement = document.getElementById("totalBalance");
var currentBalance =
parseFloat(totalBalanceElement.innerText.replace(/[^0-9.-]+/g,""));
var newBalance = currentBalance + amount;
totalBalanceElement.innerText = "$" + newBalance.toFixed(2);
// Update Robux balance
var robuxBalanceElement = document.getElementById("robuxBalance");
var currentRobuxBalance =
parseFloat(robuxBalanceElement.innerText.replace(/[^0-9.-]+/g,""));
var newRobuxBalance = currentRobuxBalance + (amount * 100);
robuxBalanceElement.innerText = "$" + newRobuxBalance.toFixed(2);

modal.style.display = "none";
alert("Deposit successful!");
}

// Handle Visa button click


document.getElementById("visaBtn").onclick = function() {
alert("Redirecting to Visa payment gateway...");
// Simulate successful payment
document.getElementById("depositAmount").value = "10";
document.getElementById("depositForm").onsubmit(new Event('submit'));
}

// Handle Mastercard button click


document.getElementById("mastercardBtn").onclick = function() {
alert("Redirecting to Mastercard payment gateway...");
// Simulate successful payment
document.getElementById("depositAmount").value = "10";
document.getElementById("depositForm").onsubmit(new Event('submit'));
}

// Handle Crypto button click


document.getElementById("cryptoBtn").onclick = function() {
alert("Redirecting to Crypto payment gateway...");
// Simulate successful payment
document.getElementById("depositAmount").value = "10";
document.getElementById("depositForm").onsubmit(new Event('submit'));
}

// Handle Robux button click


document.getElementById("robuxBtn").onclick = function() {
alert("Redirecting to Robux payment gateway...");
// Simulate successful payment
document.getElementById("depositAmount").value = "10";
document.getElementById("depositForm").onsubmit(new Event('submit'));
}
</script>
</body>
</html>

You might also like