Hello Dosto to aaj me ek template laya hu jo CSC DIGIPAY Lite ki tarah dikhta hai isme sirf HTML, Css, and Js Languages use ki gai hai is template ko aap apne kisi bhi site ke liye use kar sakte hai isme aap Tabs bhi use kar sakte hai jaise hi tabs par click karenge waise hi aake samne dusre tab ka content open ho jayega aisi hi aap alag alag tabs me alag alag content ko add kar sakte hai. or agar koi bhi problem aati hai to aap mujhse contact kar sakte hai. ya comment kar dena me aapko reply 24 hours ke andar jarur dunga.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard DIGIPAY LITE</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.sidebar {
width: 250px;
height: 100vh;
background-color: #007bff;
position: fixed;
top: 0;
left: 0;
color: white;
padding-top: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
.sidebar h1 {
text-align: center;
font-size: 24px;
margin-bottom: 30px;
}
.sidebar a {
display: block;
color: white;
padding: 15px;
text-decoration: none;
margin: 10px 0;
}
.sidebar a:hover {
background-color: #0056b3;
}
.main-content {
margin-left: 250px;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.header div {
display: flex;
align-items: center;
}
.header div span {
margin-right: 20px;
font-weight: bold;
}
.dashboard-cards {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30%;
text-align: center;
position: relative;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card i {
font-size: 40px;
position: absolute;
top: 20px;
right: 20px;
}
.card h2 {
margin-bottom: 10px;
}
.earnings-section {
display: flex;
justify-content: space-between;
}
.earnings-box {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 45%;
transition: box-shadow 0.3s ease;
}
.earnings-box:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.earnings-box h3 {
margin-bottom: 20px;
}
.earnings-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="sidebar">
<h1>DIGIPAY LITE</h1>
<a href="#" onclick="showSection('dashboard')"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
<a href="#" onclick="showSection('services')"><i class="fas fa-concierge-bell"></i> Services</a>
<a href="#" onclick="showSection('txn-report')"><i class="fas fa-file-alt"></i> Txn. Report</a>
<a href="#" onclick="showSection('wallet-top-up')"><i class="fas fa-wallet"></i> Wallet Top-Up</a>
<a href="#" onclick="showSection('wallet-cashout')"><i class="fas fa-cash-register"></i> Wallet Cashout</a>
<a href="#" onclick="showSection('wallet-transfer')"><i class="fas fa-exchange-alt"></i> Wallet Transfer</a>
<a href="#" onclick="showSection('talk-to-us')"><i class="fas fa-comments"></i> Talk to Us</a>
<a href="#" onclick="showSection('download-matm-driver')"><i class="fas fa-download"></i> Down. MATM Driver</a>
<a href="#" onclick="showSection('help-supports')"><i class="fas fa-life-ring"></i> Help And Supports</a>
</div>
<div class="main-content">
<div class="header">
<div>
<span>W1: ₹160.86</span>
<span>W2: ₹4796.31</span>
</div>
<div>
<span>000000000014</span>
</div>
</div>
<div id="dashboard" class="section">
<div class="dashboard-cards">
<div class="card">
<i class="fas fa-exchange-alt" style="color: #5bc0de;"></i>
<h2>DMT</h2>
<p>No.of Txn: 00</p>
<p>Volume: 00</p>
</div>
<div class="card">
<i class="fas fa-fingerprint" style="color: #f0ad4e;"></i>
<h2>AEPS</h2>
<p>No.of Txn: 00</p>
<p>Volume: 00</p>
</div>
<div class="card">
<i class="fas fa-mobile-alt" style="color: #5cb85c;"></i>
<h2>MATM</h2>
<p>No.of Txn: 00</p>
<p>Volume: 00</p>
</div>
</div>
<div class="earnings-section">
<div class="earnings-box">
<h3>Earning By Item Type</h3>
<div class="earnings-item">
<span>Refer and Earn Bonus</span>
<span>₹0.00</span>
</div>
<div class="earnings-item">
<span>UPI Payment</span>
<span>₹0.00</span>
</div>
<div class="earnings-item">
<span>MATM Payment</span>
<span>₹0.00</span>
</div>
<div class="earnings-item">
<span>DMT Earning Bonus</span>
<span>₹0.00</span>
</div>
</div>
<div class="earnings-box">
<h3>Earnings Report</h3>
<div class="earnings-item">
<span>Total Earning</span>
<span>₹0.00</span>
</div>
<div class="earnings-item">
<span>Item Earning</span>
<span>₹0.00</span>
</div>
<div class="earnings-item">
<span>Contributor Bonus</span>
<span>₹0.00</span>
</div>
</div>
</div>
</div>
<!-- Add other sections as needed -->
<div id="services" class="section" style="display:none;">
<h2>Services</h2>
<p>Details about services...</p>
</div>
<div id="txn-report" class="section" style="display:none;">
<h2>Transaction Report</h2>
<p>Details about transaction report...</p>
</div>
<div id="wallet-top-up" class="section" style="display:none;">
<h2>Wallet Top-Up</h2>
<p>Details about wallet top-up...</p>
</div>
<div id="wallet-cashout" class="section" style="display:none;">
<h2>Wallet Cashout</h2>
<p>Details about wallet cashout...</p>
</div>
<div id="wallet-transfer" class="section" style="display:none;">
<h2>Wallet Transfer</h2>
<p>Details about wallet transfer...</p>
</div>
<div id="talk-to-us" class="section" style="display:none;">
<h2>Talk to Us</h2>
<p>Details about contacting support...</p>
</div>
<div id="download-matm-driver" class="section" style="display:none;">
<h2>Download MATM Driver</h2>
<p>Details about downloading the driver...</p>
</div>
<div id="help-supports" class="section" style="display:none;">
<h2>Help and Supports</h2>
<p>Details about help and supports...</p>
</div>
</div>
<script>
function showSection(sectionId) {
const sections = document.querySelectorAll('.section');
sections.forEach(section => {
section.style.display = 'none';
});
document.getElementById(sectionId).style.display = 'block';
}
</script>
</body>
</html>
Thanks You!!
.png)
.png)
Contact Us!
0 Comments
type your comment...