<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TAKpay Black - Ultimate Digital Wealth Experience</title>
<style>
/* CSS Variables for Luxury Theme */
:root {
--primary-black: #0a0a0a;
--luxury-gold: #d4af37;
--electric-blue: #00d4ff;
--platinum: #e5e4e2;
--emerald: #50c878;
--ruby: #e0115f;
--dark-charcoal: #1a1a1a;
}
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--primary-black);
color: var(--platinum);
line-height: 1.6;
overflow-x: hidden;
}
.App {
min-height: 100vh;
position: relative;
}
/* Luxury Header */
.luxury-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1rem 2rem;
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-link {
color: var(--platinum);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-link:hover {
color: var(--luxury-gold);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--luxury-gold);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.user-info {
display: flex;
align-items: center;
gap: 1rem;
}
.user-name {
font-weight: 500;
}
.btn-logout {
background: rgba(212, 175, 55, 0.1);
border: 1px solid var(--luxury-gold);
color: var(--luxury-gold);
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-logout:hover {
background: var(--luxury-gold);
color: var(--primary-black);
}
/* Main Content */
.main-content {
padding-top: 80px;
min-height: calc(100vh - 200px);
}
/* Landing Page */
.landing-hero {
padding: 4rem 2rem;
text-align: center;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
}
.hero-title {
font-size: 4rem;
margin-bottom: 1rem;
font-weight: 700;
}
.gradient-text {
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 1.5rem;
margin-bottom: 3rem;
opacity: 0.8;
}
.hero-actions, .welcome-back {
margin-bottom: 4rem;
}
.btn-primary, .btn-secondary {
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin: 0 0.5rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
border: none;
color: var(--primary-black);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}
.btn-secondary {
background: transparent;
border: 2px solid var(--luxury-gold);
color: var(--luxury-gold);
}
.btn-secondary:hover {
background: rgba(212, 175, 55, 0.1);
transform: translateY(-3px);
}
.btn-hero {
padding: 1.2rem 2.5rem;
font-size: 1.1rem;
}
.hero-features {
margin-top: 4rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
border-color: var(--luxury-gold);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.feature-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: var(--luxury-gold);
}
/* Luxury Footer */
.luxury-footer {
background: var(--dark-charcoal);
padding: 3rem 2rem 1rem;
margin-top: 4rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3, .footer-section h4 {
color: var(--luxury-gold);
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.7;
}
/* Loading Screen */
.loading-screen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-black);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.luxury-loader {
text-align: center;
}
.diamond-shape {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
margin: 0 auto 1rem;
transform: rotate(45deg);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: rotate(45deg) scale(1); }
50% { transform: rotate(45deg) scale(1.1); }
100% { transform: rotate(45deg) scale(1); }
}
/* Registration Styles */
.registration-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.registration-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 24px;
padding: 3rem;
max-width: 800px;
width: 100%;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.card-header {
text-align: center;
margin-bottom: 2rem;
}
.card-header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.progress-steps {
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
position: relative;
}
.progress-steps::before {
content: '';
position: absolute;
top: 25px;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.step-number {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.step.active .step-number {
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
color: var(--primary-black);
border-color: var(--luxury-gold);
}
.luxury-form {
margin-bottom: 2rem;
}
.form-step h2 {
margin-bottom: 2rem;
color: var(--luxury-gold);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--platinum);
}
.luxury-input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1rem;
color: var(--platinum);
font-size: 1rem;
transition: all 0.3s ease;
}
.luxury-input:focus {
outline: none;
border-color: var(--luxury-gold);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
.form-actions {
display: flex;
justify-content: space-between;
margin-top: 2rem;
}
/* Wealth Dashboard Styles */
.wealth-dashboard {
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.stat-card.primary {
border-color: rgba(212, 175, 55, 0.3);
}
.stat-card.secondary {
border-color: rgba(0, 212, 255, 0.3);
}
.stat-card.accent {
border-color: rgba(80, 200, 120, 0.3);
}
.stat-card h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
opacity: 0.8;
}
.stat-card h2 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--luxury-gold), var(--electric-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
.dashboard-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.chart-card {
grid-column: 1;
grid-row: 1;
}
.allocation-card {
grid-column: 2;
grid-row: 1;
}
.activity-card {
grid-column: 1;
grid-row: 2;
}
.actions-card {
grid-column: 2;
grid-row: 2;
}
.allocation-chart {
width: 200px;
height: 200px;
margin: 0 auto 2rem;
background: conic-gradient(
var(--luxury-gold) 0% 30%,
var(--electric-blue) 30% 60%,
var(--emerald) 60% 90%,
var(--ruby) 90% 100%
);
border-radius: 50%;
}
.allocation-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.allocation-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
}
.activity-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.activity-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
.activity-icon {
font-size: 1.5rem;
}
.activity-details {
flex: 1;
display: flex;
flex-direction: column;
}
.activity-description {
font-weight: 500;
}
.activity-date {
font-size: 0.875rem;
opacity: 0.7;
}
.activity-amount.positive {
color: var(--emerald);
font-weight: 600;
}
.activity-amount.negative {
color: var(--ruby);
font-weight: 600;
}
.action-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: var(--platinum);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}
.action-btn:hover {
background: rgba(212, 175, 55, 0.1);
border-color: var(--luxury-gold);
transform: translateY(-2px);
}
.btn-icon {
font-size: 1.5rem;
}
/* Card Benefits */
.card-benefits {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.card-benefits h3 {
text-align: center;
margin-bottom: 1.5rem;
color: var(--luxury-gold);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.benefit-icon {
font-size: 1.5rem;
}
/* Page Transitions */
.page {
display: none;
}
.page.active {
display: block;
}
/* Responsive Design */
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.chart-card,
.allocation-card,
.activity-card,
.actions-card {
grid-column: 1;
}
}
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.registration-card {
padding: 2rem 1rem;
}
.wealth-dashboard {
padding: 1rem;
}
.hero-title {
font-size: 2.5rem;
}
.nav-links {
display: none;
}
.luxury-header {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="App luxury-theme">
<!-- Loading Screen -->
<div id="loadingScreen" class="loading-screen">
<div class="luxury-loader">
<div class="diamond-shape"></div>
<p>Initializing TAKpay Experience</p>
</div>
</div>
<!-- Luxury Header -->
<header class="luxury-header">
<div class="logo">TAKpay Black</div>
<nav class="nav-links">
<a href="#" class="nav-link" data-page="home">Home</a>
<a href="#" class="nav-link" data-page="apply">Apply</a>
<a href="#" class="nav-link" data-page="login">Login</a>
<a href="#" class="nav-link" data-page="dashboard">Dashboard</a>
<a href="#" class="nav-link" data-page="card">Digital Card</a>
<a href="#" class="nav-link" data-page="invest">Investments</a>
<a href="#" class="nav-link" data-page="crypto">Crypto</a>
</nav>
<div id="userInfo" class="user-info" style="display: none;">
<span class="user-name" id="userName"></span>
<button class="btn-logout" id="logoutBtn">Logout</button>
</div>
</header>
<main class="main-content">
<!-- Landing Page -->
<div id="homePage" class="page active">
<section class="landing-hero">
<div class="hero-content">
<h1 class="hero-title">Welcome to <span class="gradient-text">TAKpay Black</span></h1>
<p class="hero-subtitle">The Ultimate Digital Wealth Experience</p>
<div id="guestActions" class="hero-actions">
<button class="btn-primary btn-hero" data-page="apply">Apply for Black Card</button>
<button class="btn-secondary btn-hero" data-page="login">Existing Client</button>
</div>
<div id="userWelcome" class="welcome-back" style="display: none;">
<h2 id="welcomeMessage">Welcome back!</h2>
<button class="btn-primary" data-page="dashboard">Enter Dashboard</button>
</div>
<div class="hero-features">
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">💎</div>
<h3>Elite Banking</h3>
<p>Multi-currency accounts with premium benefits</p>
</div>
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3>Wealth Management</h3>
<p>AI-powered investment strategies</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔐</div>
<h3>Quantum Security</h3>
<p>Military-grade encryption technology</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌍</div>
<h3>Global Access</h3>
<p>Borderless financial services</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Registration Page -->
<div id="applyPage" class="page">
<div class="registration-container">
<div class="registration-card">
<div class="card-header">
<h1>TAKpay Black Card Application</h1>
<p>Join the elite circle of global wealth management</p>
</div>
<div class="progress-steps">
<div class="step active">
<div class="step-number">1</div>
<span>Personal Info</span>
</div>
<div class="step">
<div class="step-number">2</div>
<span>Financial Details</span>
</div>
<div class="step">
<div class="step-number">3</div>
<span>Verification</span>
</div>
</div>
<div class="luxury-form">
<div class="form-step active">
<h2>Personal Information</h2>
<div class="form-grid">
<div class="input-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" class="luxury-input" placeholder="Enter your first name">
</div>
<div class="input-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" class="luxury-input" placeholder="Enter your last name">
</div>
<div class="input-group">
<label for="email">Email Address</label>
<input type="email" id="email" class="luxury-input" placeholder="Enter your email">
</div>
<div class="input-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" class="luxury-input" placeholder="Enter your phone number">
</div>
<div class="input-group" style="grid-column: 1 / -1;">
<label for="address">Residential Address</label>
<input type="text" id="address" class="luxury-input" placeholder="Enter your full address">
</div>
</div>
<div class="form-actions">
<button class="btn-secondary" data-page="home">Back</button>
<button class="btn-primary" id="nextStep">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div id="loginPage" class="page">
<div class="registration-container">
<div class="registration-card" style="max-width: 500px;">
<div class="card-header">
<h1>Welcome Back</h1>
<p>Access your TAKpay Black account</p>
</div>
<div class="luxury-form">
<div class="input-group">
<label for="loginEmail">Email Address</label>
<input type="email" id="loginEmail" class="luxury-input" placeholder="Enter your email">
</div>
<div class="input-group">
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" class="luxury-input" placeholder="Enter your password">
</div>
<div class="form-actions">
<button class="btn-secondary" data-page="home">Back</button>
<button class="btn-primary" id="loginBtn">Login</button>
</div>
</div>
</div>
</div>
</div>
<!-- Dashboard Page -->
<div id="dashboardPage" class="page">
<div class="wealth-dashboard">
<h1 style="margin-bottom: 2rem; text-align: center;">Wealth Dashboard</h1>
<div class="stats-grid">
<div class="stat-card primary">
<h3>Total Portfolio Value</h3>
<h2>$1,247,850</h2>
<p>+2.4% this month</p>
</div>
<div class="stat-card secondary">
<h3>Available Balance</h3>
<h2>$125,430</h2>
<p>Across 3 currencies</p>
</div>
<div class="stat-card accent">
<h3>Crypto Holdings</h3>
<h2>$84,560</h2>
<p>+5.2% today</p>
</div>
</div>
<div class="dashboard-grid">
<div class="dashboard-card chart-card">
<h3>Portfolio Performance</h3>
<div style="height: 300px; background: rgba(255,255,255,0.05); border-radius: 12px; margin-top: 1rem; display: flex; align-items: center; justify-content: center;">
<p>Performance Chart Visualization</p>
</div>
</div>
<div class="dashboard-card allocation-card">
<h3>Asset Allocation</h3>
<div class="allocation-chart"></div>
<div class="allocation-list">
<div class="allocation-item">
<span>Stocks</span>
<span>45%</span>
</div>
<div class="allocation-item">
<span>Bonds</span>
<span>25%</span>
</div>
<div class="allocation-item">
<span>Crypto</span>
<span>15%</span>
</div>
<div class="allocation-item">
<span>Real Estate</span>
<span>10%</span>
</div>
<div class="allocation-item">
<span>Cash</span>
<span>5%</span>
</div>
</div>
</div>
<div class="dashboard-card activity-card">
<h3>Recent Activity</h3>
<div class="activity-list">
<div class="activity-item">
<div class="activity-icon">💳</div>
<div class="activity-details">
<div class="activity-description">Payment to Luxury Resort</div>
<div class="activity-date">Today, 14:30</div>
</div>
<div class="activity-amount negative">-$2,450</div>
</div>
<div class="activity-item">
<div class="activity-icon">📈</div>
<div class="activity-details">
<div class="activity-description">Stock Dividend</div>
<div class="activity-date">Yesterday, 09:15</div>
</div>
<div class="activity-amount positive">+$1,250</div>
</div>
<div class="activity-item">
<div class="activity-icon">🔄</div>
<div class="activity-details">
<div class="activity-description">Currency Exchange</div>
<div class="activity-date">Oct 12, 2023</div>
</div>
<div class="activity-amount">€10,000 → $10,850</div>
</div>
</div>
</div>
<div class="dashboard-card actions-card">
<h3>Quick Actions</h3>
<div class="action-buttons">
<a href="#" class="action-btn" data-page="card">
<div class="btn-icon">💎</div>
<span>Digital Card</span>
</a>
<a href="#" class="action-btn" data-page="invest">
<div class="btn-icon">📈</div>
<span>Invest</span>
</a>
<a href="#" class="action-btn" data-page="crypto">
<div class="btn-icon">₿</div>
<span>Crypto</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">🌍</div>
<span>Transfer</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Digital Card Page -->
<div id="cardPage" class="page">
<div class="registration-container">
<div class="registration-card" style="max-width: 500px;">
<div class="card-header">
<h1>Your Digital Black Card</h1>
<p>The ultimate symbol of financial prestige</p>
</div>
<div style="background: linear-gradient(135deg, #1a1a1a, #0a0a0a); border-radius: 20px; padding: 2rem; margin-bottom: 2rem; border: 1px solid rgba(212, 175, 55, 0.3);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
<div class="logo">TAKpay Black</div>
<div style="font-size: 1.5rem;">💎</div>
</div>
<div style="margin-bottom: 2rem;">
<div style="font-size: 1.2rem; margin-bottom: 0.5rem;">PLATINUM MEMBER</div>
<div style="font-size: 1.8rem; letter-spacing: 2px;" id="cardNumber">•••• •••• •••• 4242</div>
</div>
<div style="display: flex; justify-content: space-between;">
<div>
<div style="font-size: 0.8rem; opacity: 0.7;">Card Holder</div>
<div id="cardHolder">JOHN DOE</div>
</div>
<div>
<div style="font-size: 0.8rem; opacity: 0.7;">Expires</div>
<div>12/25</div>
</div>
</div>
</div>
<div class="card-benefits">
<h3>Exclusive Benefits</h3>
<div class="benefits-grid">
<div class="benefit-item">
<div class="benefit-icon">✈️</div>
<div>
<div style="font-weight: 500;">Airport Lounge Access</div>
<div style="font-size: 0.9rem; opacity: 0.8;">1,200+ lounges worldwide</div>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🛡️</div>
<div>
<div style="font-weight: 500;">Travel Insurance</div>
<div style="font-size: 0.9rem; opacity: 0.8;">$1M coverage</div>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🎁</div>
<div>
<div style="font-weight: 500;">Concierge Service</div>
<div style="font-size: 0.9rem; opacity: 0.8;">24/7 personal assistant</div>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">💎</div>
<div>
<div style="font-weight: 500;">Elite Rewards</div>
<div style="font-size: 0.9rem; opacity: 0.8;">5% cashback on luxury</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button class="btn-secondary" data-page="dashboard">Back to Dashboard</button>
<button class="btn-primary">Manage Card Settings</button>
</div>
</div>
</div>
</div>
<!-- Investment Hub Page -->
<div id="investPage" class="page">
<div class="wealth-dashboard">
<h1 style="margin-bottom: 2rem; text-align: center;">Investment Hub</h1>
<div class="stats-grid">
<div class="stat-card primary">
<h3>Total Investments</h3>
<h2>$856,240</h2>
<p>+3.2% this month</p>
</div>
<div class="stat-card secondary">
<h3>Stocks Portfolio</h3>
<h2>$542,180</h2>
<p>+4.1% YTD</p>
</div>
<div class="stat-card accent">
<h3>Bonds & Funds</h3>
<h2>$314,060</h2>
<p>+1.8% YTD</p>
</div>
</div>
<div class="dashboard-grid">
<div class="dashboard-card chart-card">
<h3>Investment Performance</h3>
<div style="height: 300px; background: rgba(255,255,255,0.05); border-radius: 12px; margin-top: 1rem; display: flex; align-items: center; justify-content: center;">
<p>Investment Performance Chart</p>
</div>
</div>
<div class="dashboard-card allocation-card">
<h3>Top Holdings</h3>
<div class="allocation-list">
<div class="allocation-item">
<span>Apple Inc. (AAPL)</span>
<span>+2.4%</span>
</div>
<div class="allocation-item">
<span>Microsoft (MSFT)</span>
<span>+1.8%</span>
</div>
<div class="allocation-item">
<span>Amazon (AMZN)</span>
<span>+3.2%</span>
</div>
<div class="allocation-item">
<span>Vanguard S&P 500</span>
<span>+2.1%</span>
</div>
<div class="allocation-item">
<span>Tesla (TSLA)</span>
<span>-0.8%</span>
</div>
</div>
</div>
<div class="dashboard-card activity-card">
<h3>Investment Opportunities</h3>
<div class="activity-list">
<div class="activity-item">
<div class="activity-icon">🌱</div>
<div class="activity-details">
<div class="activity-description">Sustainable Energy Fund</div>
<div class="activity-date">High growth potential</div>
</div>
<button class="btn-primary" style="padding: 0.5rem 1rem;">Invest</button>
</div>
<div class="activity-item">
<div class="activity-icon">🤖</div>
<div class="activity-details">
<div class="activity-description">AI Technology ETF</div>
<div class="activity-date">Diversified exposure</div>
</div>
<button class="btn-primary" style="padding: 0.5rem 1rem;">Invest</button>
</div>
<div class="activity-item">
<div class="activity-icon">🏥</div>
<div class="activity-details">
<div class="activity-description">Biotech Innovation</div>
<div class="activity-date">Early stage</div>
</div>
<button class="btn-primary" style="padding: 0.5rem 1rem;">Invest</button>
</div>
</div>
</div>
<div class="dashboard-card actions-card">
<h3>Investment Tools</h3>
<div class="action-buttons">
<a href="#" class="action-btn">
<div class="btn-icon">📊</div>
<span>Market Analysis</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">🤖</div>
<span>AI Advisor</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">📈</div>
<span>Portfolio Review</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">💼</div>
<span>Wealth Manager</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Crypto Portal Page -->
<div id="cryptoPage" class="page">
<div class="wealth-dashboard">
<h1 style="margin-bottom: 2rem; text-align: center;">Crypto Portal</h1>
<div class="stats-grid">
<div class="stat-card primary">
<h3>Crypto Portfolio</h3>
<h2>$84,560</h2>
<p>+5.2% today</p>
</div>
<div class="stat-card secondary">
<h3>Bitcoin (BTC)</h3>
<h2>$42,180</h2>
<p>+3.7% today</p>
</div>
<div class="stat-card accent">
<h3>Ethereum (ETH)</h3>
<h2>$28,450</h2>
<p>+6.1% today</p>
</div>
</div>
<div class="dashboard-grid">
<div class="dashboard-card chart-card">
<h3>Crypto Performance</h3>
<div style="height: 300px; background: rgba(255,255,255,0.05); border-radius: 12px; margin-top: 1rem; display: flex; align-items: center; justify-content: center;">
<p>Crypto Market Chart</p>
</div>
</div>
<div class="dashboard-card allocation-card">
<h3>Your Holdings</h3>
<div class="allocation-list">
<div class="allocation-item">
<span>Bitcoin (BTC)</span>
<span>50%</span>
</div>
<div class="allocation-item">
<span>Ethereum (ETH)</span>
<span>30%</span>
</div>
<div class="allocation-item">
<span>Cardano (ADA)</span>
<span>10%</span>
</div>
<div class="allocation-item">
<span>Solana (SOL)</span>
<span>7%</span>
</div>
<div class="allocation-item">
<span>Other</span>
<span>3%</span>
</div>
</div>
</div>
<div class="dashboard-card activity-card">
<h3>Market Movers</h3>
<div class="activity-list">
<div class="activity-item">
<div class="activity-icon">₿</div>
<div class="activity-details">
<div class="activity-description">Bitcoin (BTC)</div>
<div class="activity-date">$42,180 • +3.7%</div>
</div>
<button class="btn-primary" style="padding: 0.5rem 1rem;">Trade</button>
</div>
<div class="activity-item">
<div class="activity-icon">Ξ</div>
<div class="activity-details">
<div class="activity-description">Ethereum (ETH)</div>
<div class="activity-date">$2,850 • +6.1%</div>
</div>
<button class="btn-primary" style="padding: 0.5rem 1rem;">Trade</button>
</div>
<div class="activity-item">
<div class="activity-icon">⎈</div>
<div class="activity-details">
<div class="activity-description">Cardano (ADA)</div>
<div class="activity-date">$0.52 • +2.3%</div>
</div>
<button class="btn-primary" style="padding: 0.5rem 1rem;">Trade</button>
</div>
</div>
</div>
<div class="dashboard-card actions-card">
<h3>Crypto Actions</h3>
<div class="action-buttons">
<a href="#" class="action-btn">
<div class="btn-icon">🔄</div>
<span>Buy/Sell</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">📤</div>
<span>Transfer</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">🏦</div>
<span>Staking</span>
</a>
<a href="#" class="action-btn">
<div class="btn-icon">🔒</div>
<span>Vault</span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Luxury Footer -->
<footer class="luxury-footer">
<div class="footer-content">
<div class="footer-section">
<h3>TAKpay Black</h3>
<p>Redefining luxury banking for the digital age</p>
</div>
<div class="footer-section">
<h4>Services</h4>
<ul>
<li>Private Banking</li>
<li>Wealth Management</li>
<li>Crypto Trading</li>
<li>Global Transfers</li>
</ul>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>24/7 Concierge: +1-888-TAKPAY</p>
<p>Email: elite@takpay.com</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 TAKpay Financial Group. All rights reserved.</p>
</div>
</footer>
</div>
<script>
// State management
const state = {
user: null,
isAuthenticated: false,
loading: true
};
// DOM elements
const loadingScreen = document.getElementById('loadingScreen');
const userInfo = document.getElementById('userInfo');
const userName = document.getElementById('userName');
const guestActions = document.getElementById('guestActions');
const userWelcome = document.getElementById('userWelcome');
const welcomeMessage = document.getElementById('welcomeMessage');
const logoutBtn = document.getElementById('logoutBtn');
const loginBtn = document.getElementById('loginBtn');
const nextStep = document.getElementById('nextStep');
const pages = document.querySelectorAll('.page');
const navLinks = document.querySelectorAll('.nav-link');
const pageButtons = document.querySelectorAll('[data-page]');
// Initialize the application
function initApp() {
// Check if user is already logged in
const token = localStorage.getItem('takpay_token');
const userData = localStorage.getItem('takpay_user');
if (token && userData) {
state.user = JSON.parse(userData);
state.isAuthenticated = true;
updateUI();
}
// Hide loading screen after a short delay
setTimeout(() => {
state.loading = false;
loadingScreen.style.display = 'none';
}, 1500);
// Set up event listeners
setupEventListeners();
}
// Set up event listeners
function setupEventListeners() {
// Navigation links
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const page = link.getAttribute('data-page');
showPage(page);
});
});
// Page buttons
pageButtons.forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
const page = button.getAttribute('data-page');
// Special handling for login button
if (button.id === 'loginBtn') {
handleLogin();
return;
}
// Special handling for next step in registration
if (button.id === 'nextStep') {
alert('Registration functionality would continue to the next step');
return;
}
showPage(page);
});
});
// Logout button
logoutBtn.addEventListener('click', handleLogout);
}
// Show specific page
function showPage(pageName) {
// Hide all pages
pages.forEach(page => {
page.classList.remove('active');
});
// Show the requested page
const targetPage = document.getElementById(`${pageName}Page`);
if (targetPage) {
targetPage.classList.add('active');
// Update navigation active state
navLinks.forEach(link => {
if (link.getAttribute('data-page') === pageName) {
link.style.color = 'var(--luxury-gold)';
} else {
link.style.color = 'var(--platinum)';
}
});
}
}
// Handle login
function handleLogin() {
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
if (!email || !password) {
alert('Please enter both email and password');
return;
}
// Simulate login success
const userData = {
firstName: 'John',
lastName: 'Doe',
email: email
};
state.user = userData;
state.isAuthenticated = true;
// Store in localStorage (simulating token storage)
localStorage.setItem('takpay_token', 'simulated_jwt_token');
localStorage.setItem('takpay_user', JSON.stringify(userData));
updateUI();
showPage('dashboard');
}
// Handle logout
function handleLogout() {
localStorage.removeItem('takpay_token');
localStorage.removeItem('takpay_user');
state.user = null;
state.isAuthenticated = false;
updateUI();
showPage('home');
}
// Update UI based on authentication state
function updateUI() {
if (state.isAuthenticated && state.user) {
userInfo.style.display = 'flex';
userName.textContent = `${state.user.firstName} ${state.user.lastName}`;
guestActions.style.display = 'none';
userWelcome.style.display = 'block';
welcomeMessage.textContent = `Welcome back, ${state.user.firstName}!`;
// Update card detailys
document.getElementById('cardHolder').textContent = `${state.user.firstName.toUpperCase()} ${state.user.lastName.toUpperCase()}`;
} else {
guestActions.style.display = 'block';
userWelcome.style.display = 'none';
}
}
// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', initApp);
</script>
</body>
userInfo.style.display = 'none';
</html>