anycoder-705efaf5 / index.html
Danson88's picture
Upload folder using huggingface_hub
d626c63 verified
Raw History Blame Contribute Delete
29.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ApexCrypto | Enterprise Wallet UI</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--bg-dark: #0b0c15;
--bg-panel: #151725;
--bg-glass: rgba(255, 255, 255, 0.03);
--primary: #6366f1;
--primary-glow: rgba(99, 102, 241, 0.4);
--accent: #10b981;
--text-main: #ffffff;
--text-muted: #94a3b8;
--border: rgba(255, 255, 255, 0.08);
--danger: #ef4444;
--success: #10b981;
--sidebar-width: 260px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
overflow-x: hidden;
display: flex;
height: 100vh;
}
/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* --- Sidebar --- */
.sidebar {
width: var(--sidebar-width);
background: var(--bg-panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 1.5rem;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
transition: transform 0.3s ease;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 3rem;
background: linear-gradient(to right, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo i {
color: var(--primary);
font-size: 1.8rem;
background: none;
-webkit-text-fill-color: var(--primary);
}
.nav-links {
list-style: none;
flex: 1;
}
.nav-item {
margin-bottom: 0.5rem;
}
.nav-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
color: var(--text-muted);
text-decoration: none;
border-radius: 12px;
transition: all 0.2s ease;
font-weight: 500;
}
.nav-link:hover {
background: var(--bg-glass);
color: var(--text-main);
}
.nav-link.active {
background: var(--primary);
color: white;
box-shadow: 0 4px 20px var(--primary-glow);
}
.nav-link i {
width: 20px;
text-align: center;
}
.sidebar-footer {
border-top: 1px solid var(--border);
padding-top: 1.5rem;
}
.user-profile {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s;
}
.user-profile:hover {
background: var(--bg-glass);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(45deg, var(--primary), #a855f7);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.user-info h4 {
font-size: 0.9rem;
}
.user-info p {
font-size: 0.75rem;
color: var(--text-muted);
}
/* --- Main Content --- */
.main-content {
margin-left: var(--sidebar-width);
flex: 1;
padding: 2rem;
overflow-y: auto;
position: relative;
}
/* --- Header --- */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
}
.header-left h1 {
font-size: 1.8rem;
font-weight: 600;
}
.header-left p {
color: var(--text-muted);
font-size: 0.9rem;
}
.header-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.search-bar {
background: var(--bg-panel);
border: 1px solid var(--border);
padding: 0.6rem 1rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 10px;
width: 300px;
}
.search-bar input {
background: transparent;
border: none;
color: white;
outline: none;
width: 100%;
}
.btn {
padding: 0.6rem 1.2rem;
border-radius: 50px;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
box-shadow: 0 0 15px var(--primary-glow);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text-main);
}
.btn-outline:hover {
background: var(--bg-glass);
}
/* --- Dashboard Grid --- */
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
.card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.card:hover {
border-color: rgba(255,255,255,0.15);
}
/* Portfolio Balance Card */
.portfolio-card {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(15, 23, 42, 0.8));
border: 1px solid rgba(99, 102, 241, 0.3);
position: relative;
overflow: hidden;
}
.portfolio-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 300px;
height: 300px;
background: radial-gradient(circle, var(--primary-glow), transparent 70%);
opacity: 0.5;
}
.balance-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
}
.balance-label {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.balance-amount {
font-size: 3.5rem;
font-weight: 700;
letter-spacing: -2px;
}
.balance-change {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
}
.change-positive {
color: var(--success);
background: rgba(16, 185, 129, 0.1);
}
.change-negative {
color: var(--danger);
background: rgba(239, 68, 68, 0.1);
}
/* Chart Container */
.chart-container {
height: 200px;
width: 100%;
}
/* Asset List */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.2rem;
font-weight: 600;
}
.asset-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.asset-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-radius: 12px;
background: var(--bg-glass);
border: 1px solid transparent;
transition: all 0.2s;
cursor: pointer;
}
.asset-item:hover {
border-color: var(--border);
background: rgba(255, 255, 255, 0.05);
}
.asset-left {
display: flex;
align-items: center;
gap: 1rem;
}
.asset-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
background: #1e293b;
}
.asset-name {
font-weight: 600;
display: block;
}
.asset-ticker {
font-size: 0.8rem;
color: var(--text-muted);
}
.asset-right {
text-align: right;
}
.asset-value {
font-weight: 600;
display: block;
}
.asset-price {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Action Buttons (Send/Receive) */
.action-buttons {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.action-btn {
flex: 1;
padding: 1rem;
border-radius: 16px;
border: 1px solid var(--border);
background: var(--bg-glass);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.2s;
color: var(--text-main);
}
.action-btn:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-2px);
}
.action-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--primary);
}
/* AnyCoder Link */
.anycoder-link {
color: var(--text-muted);
text-decoration: none;
font-size: 0.8rem;
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 20px;
transition: all 0.2s;
}
.anycoder-link:hover {
color: var(--primary);
border-color: var(--primary);
}
/* Mobile Menu Toggle */
.mobile-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Responsive */
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.search-bar {
width: 200px;
}
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
padding: 1.5rem;
}
.mobile-toggle {
display: block;
}
.header-right .search-bar {
display: none;
}
.balance-amount {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="logo">
<i class="fa-solid fa-cube"></i>
<span>ApexWallet</span>
</div>
<ul class="nav-links">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="fa-solid fa-wallet"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-arrow-right-arrow-left"></i>
<span>Swap</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-chart-pie"></i>
<span>Portfolio</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-gem"></i>
<span>NFTs</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-gear"></i>
<span>Settings</span>
</a>
</li>
</ul>
<div class="sidebar-footer">
<div class="user-profile">
<div class="user-avatar">JD</div>
<div class="user-info">
<h4>John Doe</h4>
<p>0x71...3A9F</p>
</div>
<i class="fa-solid fa-chevron-right" style="margin-left: auto; color: var(--text-muted); font-size: 0.8rem;"></i>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Header -->
<header class="header">
<div class="header-left">
<h1>Dashboard</h1>
<p>Welcome back, John</p>
</div>
<div class="header-right">
<div class="search-bar">
<i class="fa-solid fa-magnifying-glass" style="color: var(--text-muted)"></i>
<input type="text" placeholder="Search assets, NFTs...">
</div>
<!-- Anycoder Requirement -->
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
Built with anycoder
</a>
<button class="btn btn-outline">
<i class="fa-regular fa-bell"></i>
</button>
<div class="mobile-toggle" id="mobile-toggle">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</header>
<!-- Action Buttons -->
<div class="action-buttons">
<button class="action-btn">
<div class="action-icon" style="color: var(--success); background: rgba(16, 185, 129, 0.1);">
<i class="fa-solid fa-arrow-down"></i>
</div>
<span>Receive</span>
</button>
<button class="action-btn">
<div class="action-icon">
<i class="fa-solid fa-paper-plane"></i>
</div>
<span>Send</span>
</button>
<button class="action-btn">
<div class="action-icon" style="color: #ec4899; background: rgba(236, 72, 153, 0.1);">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<span>Buy</span>
</button>
<button class="action-btn">
<div class="action-icon" style="color: #f59e0b; background: rgba(245, 158, 11, 0.1);">
<i class="fa-solid fa-repeat"></i>
</div>
<span>Swap</span>
</button>
</div>
<!-- Dashboard Grid -->
<div class="dashboard-grid">
<!-- Left Column: Balance & Chart -->
<div class="left-col">
<div class="card portfolio-card">
<div class="balance-header">
<div>
<div class="balance-label">Total Balance</div>
<div class="balance-amount" id="total-balance">$42,593.00</div>
</div>
<div class="balance-change change-positive">
<i class="fa-solid fa-arrow-trend-up"></i>
<span>+2.4%</span>
</div>
</div>
<div class="chart-container">
<canvas id="portfolioChart"></canvas>
</div>
</div>
<div style="margin-top: 1.5rem;">
<div class="section-header">
<div class="section-title">Recent Activity</div>
<a href="#" style="color: var(--primary); text-decoration: none; font-size: 0.9rem;">View All</a>
</div>
<div class="card" style="padding: 0;">
<!-- Transaction List simulated -->
<div class="asset-item" style="border-radius: 0; border-left: none; border-right: none; border-top: none;">
<div class="asset-left">
<div class="asset-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
<i class="fa-solid fa-arrow-down"></i>
</div>
<div>
<span class="asset-name">Received Ethereum</span>
<span class="asset-ticker">From 0x3d...8a2</span>
</div>
</div>
<div class="asset-right">
<span class="asset-value" style="color: var(--success)">+ 0.5 ETH</span>
<span class="asset-price">Just now</span>
</div>
</div>
<div class="asset-item" style="border-radius: 0; border-left: none; border-right: none; border-bottom: none;">
<div class="asset-left">
<div class="asset-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
<i class="fa-solid fa-arrow-up-right"></i>
</div>
<div>
<span class="asset-name">Sent USDT</span>
<span class="asset-ticker">To 0x99...12b</span>
</div>
</div>
<div class="asset-right">
<span class="asset-value">- 1,200 USDT</span>
<span class="asset-price">2 hours ago</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Assets -->
<div class="right-col">
<div class="section-header">
<div class="section-title">Assets</div>
<button class="btn btn-outline" style="padding: 0.4rem 1rem; font-size: 0.8rem;">
<i class="fa-solid fa-plus"></i> Add Token
</button>
</div>
<div class="card asset-list">
<!-- ETH -->
<div class="asset-item">
<div class="asset-left">
<div class="asset-icon" style="color: #627eea;">
<i class="fa-brands fa-ethereum"></i>
</div>
<div>
<span class="asset-name">Ethereum</span>
<span class="asset-ticker">ETH</span>
</div>
</div>
<div class="asset-right">
<span class="asset-value">$32,150.00</span>
<span class="asset-price">10.5 ETH</span>
</div>
</div>
<!-- BTC -->
<div class="asset-item">
<div class="asset-left">
<div class="asset-icon" style="color: #f7931a;">
<i class="fa-brands fa-bitcoin"></i>
</div>
<div>
<span class="asset-name">Bitcoin</span>
<span class="asset-ticker">BTC</span>
</div>
</div>
<div class="asset-right">
<span class="asset-value">$5,240.00</span>
<span class="asset-price">0.15 BTC</span>
</div>
</div>
<!-- SOL -->
<div class="asset-item">
<div class="asset-left">
<div class="asset-icon" style="color: #14f195;">
<i class="fa-solid fa-bolt"></i>
</div>
<div>
<span class="asset-name">Solana</span>
<span class="asset-ticker">SOL</span>
</div>
</div>
<div class="asset-right">
<span class="asset-value">$2,103.00</span>
<span class="asset-price">45 SOL</span>
</div>
</div>
<!-- USDC -->
<div class="asset-item">
<div class="asset-left">
<div class="asset-icon" style="color: #2775ca;">
<i class="fa-solid fa-dollar-sign"></i>
</div>
<div>
<span class="asset-name">USD Coin</span>
<span class="asset-ticker">USDC</span>
</div>
</div>
<div class="asset-right">
<span class="asset-value">$3,100.00</span>
<span class="asset-price">3,100 USDC</span>
</div>
</div>
</div>
<!-- Wallet Connect Simulation -->
<div class="card" style="margin-top: 1.5rem; background: linear-gradient(to right bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.01));">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<h4 style="margin-bottom: 5px;">Gas Tracker</h4>
<p style="font-size: 0.8rem; color: var(--text-muted);">Network is healthy</p>
</div>
<div style="text-align: right;">
<div style="color: var(--success); font-weight: 600;">12 Gwei</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">~$0.45</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
// Sidebar Mobile Toggle
const sidebar = document.getElementById('sidebar');
const mobileToggle = document.getElementById('mobile-toggle');
mobileToggle.addEventListener('click', () => {
sidebar.classList.toggle('active');
});
// Chart.js Initialization
const ctx = document.getElementById('portfolioChart').getContext('2d');
// Create gradient for chart
let gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(99, 102, 241, 0.5)'); // Primary color
gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
const portfolioChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Portfolio Value',
data: [41000, 41500, 40800, 42000, 41900, 42300, 42593],
borderColor: '#6366f1',
backgroundColor: gradient,
borderWidth: 3,
pointBackgroundColor: '#0b0c15',
pointBorderColor: '#6366f1',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: '#151725',
titleColor: '#fff',
bodyColor: '#94a3b8',
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1,
padding: 10,
displayColors: false,
callbacks: {
label: function(context) {
return '$' + context.parsed.y.toLocaleString();
}
}
}
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(255, 255, 255, 0.03)',
borderDash: [5, 5]
},
ticks: {
color: '#64748b',
callback: function(value) {
return '$' + value / 1000 + 'k';
}
},
border: {
display: false
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#64748b'
},
border: {
display: false
}
}
}
}
});
// Animate Balance on Load
const balanceEl = document.getElementById('total-balance');
const targetBalance = 42593;
let currentBalance = 0;
const duration = 1500; // ms
const increment = targetBalance / (duration / 16); // 60fps
function animateBalance() {
if (currentBalance < targetBalance) {
currentBalance += increment;
if (currentBalance > targetBalance) currentBalance = targetBalance;
balanceEl.textContent = '$' + currentBalance.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
requestAnimationFrame(animateBalance);
}
}
// Start animation after a slight delay
setTimeout(animateBalance, 500);
</script>
</body>
</html>