|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>AI Expense Manager | Smart Personal Finance</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<script> |
|
tailwind.config = { |
|
theme: { |
|
extend: { |
|
colors: { |
|
primary: { |
|
light: 'rgba(59, 130, 246, 0.5)', |
|
DEFAULT: 'rgba(59, 130, 246, 0.7)', |
|
dark: 'rgba(59, 130, 246, 0.9)' |
|
}, |
|
success: { |
|
light: 'rgba(34, 197, 94, 0.5)', |
|
DEFAULT: 'rgba(34, 197, 94, 0.7)', |
|
dark: 'rgba(34, 197, 94, 0.9)' |
|
}, |
|
warning: { |
|
light: 'rgba(234, 179, 8, 0.5)', |
|
DEFAULT: 'rgba(234, 179, 8, 0.7)', |
|
dark: 'rgba(234, 179, 8, 0.9)' |
|
}, |
|
danger: { |
|
light: 'rgba(239, 68, 68, 0.5)', |
|
DEFAULT: 'rgba(239, 68, 68, 0.7)', |
|
dark: 'rgba(239, 68, 68, 0.9)' |
|
}, |
|
dark: { |
|
light: 'rgba(15, 23, 42, 0.5)', |
|
DEFAULT: 'rgba(15, 23, 42, 0.7)', |
|
dark: 'rgba(15, 23, 42, 0.9)' |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: #f8fafc; |
|
color: #0f172a; |
|
} |
|
|
|
.dashboard-bg { |
|
background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.9) 100%); |
|
} |
|
|
|
.card { |
|
background: white; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
border-radius: 12px; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.card:hover { |
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
transform: translateY(-2px); |
|
} |
|
|
|
.sidebar { |
|
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); |
|
} |
|
|
|
.nav-item.active { |
|
background-color: rgba(59, 130, 246, 0.2); |
|
border-left: 3px solid rgba(59, 130, 246, 0.9); |
|
} |
|
|
|
.nav-item.active .nav-icon { |
|
color: rgba(59, 130, 246, 0.9); |
|
} |
|
|
|
.progress-bar { |
|
height: 8px; |
|
border-radius: 4px; |
|
} |
|
|
|
.income { |
|
background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.2) 100%); |
|
border-left: 4px solid rgba(34, 197, 94, 0.9); |
|
} |
|
|
|
.expense { |
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.2) 100%); |
|
border-left: 4px solid rgba(239, 68, 68, 0.9); |
|
} |
|
|
|
.savings { |
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.2) 100%); |
|
border-left: 4px solid rgba(59, 130, 246, 0.9); |
|
} |
|
|
|
.blink { |
|
animation: blink 1.5s infinite; |
|
} |
|
|
|
@keyframes blink { |
|
0% { opacity: 0.7; } |
|
50% { opacity: 1; } |
|
100% { opacity: 0.7; } |
|
} |
|
|
|
.pulse { |
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0%, 100% { |
|
transform: scale(1); |
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); |
|
} |
|
50% { |
|
transform: scale(1.05); |
|
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); |
|
} |
|
} |
|
|
|
.transaction-item:hover { |
|
background-color: #f1f5f9; |
|
} |
|
|
|
.ai-suggestion { |
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%); |
|
border-left: 4px solid rgba(59, 130, 246, 0.5); |
|
} |
|
</style> |
|
</head> |
|
<body class="text-slate-800"> |
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
<div class="sidebar w-64 flex-shrink-0 text-white hidden md:block"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-8"> |
|
<div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3"> |
|
<i class="fas fa-wallet text-white"></i> |
|
</div> |
|
<div> |
|
<h1 class="text-xl font-bold">AI Expense</h1> |
|
<p class="text-xs text-slate-300">Personal Finance Manager</p> |
|
</div> |
|
</div> |
|
|
|
<nav class="mt-8"> |
|
<div class="text-xs uppercase text-slate-400 mb-4 px-4">Dashboard</div> |
|
<a href="#" class="nav-item active flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-home mr-3 text-slate-300"></i> |
|
<span>Overview</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-chart-pie mr-3 text-slate-300"></i> |
|
<span>Analytics</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-exchange-alt mr-3 text-slate-300"></i> |
|
<span>Transactions</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-piggy-bank mr-3 text-slate-300"></i> |
|
<span>Budgets</span> |
|
</a> |
|
|
|
<div class="text-xs uppercase text-slate-400 mb-4 mt-8 px-4">Tools</div> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-robot mr-3 text-slate-300"></i> |
|
<span>AI Assistant</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-bell mr-3 text-slate-300"></i> |
|
<span>Reminders</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-file-invoice-dollar mr-3 text-slate-300"></i> |
|
<span>Reports</span> |
|
</a> |
|
|
|
<div class="text-xs uppercase text-slate-400 mb-4 mt-8 px-4">Settings</div> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-cog mr-3 text-slate-300"></i> |
|
<span>Account</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg"> |
|
<i class="nav-icon fas fa-shield-alt mr-3 text-slate-300"></i> |
|
<span>Security</span> |
|
</a> |
|
</nav> |
|
</div> |
|
|
|
<div class="absolute bottom-0 w-full p-6"> |
|
<div class="card p-4 bg-slate-800"> |
|
<div class="flex items-center"> |
|
<div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mr-3"> |
|
<i class="fas fa-lightbulb text-white text-xl"></i> |
|
</div> |
|
<div> |
|
<div class="text-sm font-medium">AI Tip of the Day</div> |
|
<div class="text-xs text-slate-300 mt-1">Try categorizing your food expenses to identify spending patterns.</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden dashboard-bg"> |
|
|
|
<header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> |
|
<div class="flex items-center md:hidden"> |
|
<button class="mr-4 text-slate-500"> |
|
<i class="fas fa-bars"></i> |
|
</button> |
|
<div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2"> |
|
<i class="fas fa-wallet text-white"></i> |
|
</div> |
|
<span class="font-bold">AI Expense</span> |
|
</div> |
|
|
|
<div class="relative flex-1 max-w-md mx-4"> |
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
<i class="fas fa-search text-slate-400"></i> |
|
</div> |
|
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-transparent" placeholder="Search transactions, budgets..."> |
|
</div> |
|
|
|
<div class="flex items-center space-x-4"> |
|
<button class="text-slate-500 hover:text-slate-700"> |
|
<i class="fas fa-bell"></i> |
|
</button> |
|
<button class="text-slate-500 hover:text-slate-700"> |
|
<i class="fas fa-question-circle"></i> |
|
</button> |
|
<div class="flex items-center"> |
|
<div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2"> |
|
<i class="fas fa-user text-white"></i> |
|
</div> |
|
<span class="hidden md:inline text-sm font-medium">John Doe</span> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
<div class="mb-6 flex items-center justify-between"> |
|
<h2 class="text-2xl font-bold">Expense Dashboard</h2> |
|
<button class="bg-primary-dark hover:bg-primary-darker text-white font-medium py-2 px-4 rounded-lg flex items-center pulse"> |
|
<i class="fas fa-plus-circle mr-2"></i> |
|
Add Transaction |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
<div class="card p-6 income"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<div> |
|
<div class="text-sm text-slate-500">Total Income</div> |
|
<div class="text-2xl font-bold text-success-dark">$5,240.00</div> |
|
</div> |
|
<div class="w-12 h-12 rounded-full bg-success-light flex items-center justify-center"> |
|
<i class="fas fa-arrow-down text-success-dark"></i> |
|
</div> |
|
</div> |
|
<div class="text-sm text-success-dark flex items-center"> |
|
<span>+12.5% from last month</span> |
|
<i class="fas fa-caret-up ml-1"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="card p-6 expense"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<div> |
|
<div class="text-sm text-slate-500">Total Expenses</div> |
|
<div class="text-2xl font-bold text-danger-dark">$3,845.20</div> |
|
</div> |
|
<div class="w-12 h-12 rounded-full bg-danger-light flex items-center justify-center"> |
|
<i class="fas fa-arrow-up text-danger-dark"></i> |
|
</div> |
|
</div> |
|
<div class="text-sm text-danger-dark flex items-center"> |
|
<span>+8.3% from last month</span> |
|
<i class="fas fa-caret-up ml-1"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="card p-6 savings"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<div> |
|
<div class="text-sm text-slate-500">Monthly Savings</div> |
|
<div class="text-2xl font-bold text-primary-dark">$1,394.80</div> |
|
</div> |
|
<div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center"> |
|
<i class="fas fa-piggy-bank text-primary-dark"></i> |
|
</div> |
|
</div> |
|
<div class="text-sm text-primary-dark flex items-center"> |
|
<span>26.6% savings rate</span> |
|
<i class="fas fa-check-circle ml-1"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
<div class="card p-6 lg:col-span-2"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<h3 class="font-bold">Monthly Spending</h3> |
|
<div class="flex space-x-2"> |
|
<button class="bg-primary-light text-white px-3 py-1 rounded-lg text-xs font-medium">Month</button> |
|
<button class="bg-slate-100 text-slate-600 px-3 py-1 rounded-lg text-xs font-medium">Week</button> |
|
<button class="bg-slate-100 text-slate-600 px-3 py-1 rounded-lg text-xs font-medium">Year</button> |
|
</div> |
|
</div> |
|
<div class="h-64"> |
|
<canvas id="spendingChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card p-6"> |
|
<h3 class="font-bold mb-4">Budget Progress</h3> |
|
<div class="space-y-4"> |
|
<div> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-sm">Food & Dining</span> |
|
<span class="text-xs font-medium">$420 / $600</span> |
|
</div> |
|
<div class="progress-bar bg-slate-200 w-full"> |
|
<div class="progress-bar bg-warning-dark h-full rounded-full" style="width: 70%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-sm">Transportation</span> |
|
<span class="text-xs font-medium">$180 / $250</span> |
|
</div> |
|
<div class="progress-bar bg-slate-200 w-full"> |
|
<div class="progress-bar bg-primary-dark h-full rounded-full" style="width: 72%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-sm">Entertainment</span> |
|
<span class="text-xs font-medium">$95 / $150</span> |
|
</div> |
|
<div class="progress-bar bg-slate-200 w-full"> |
|
<div class="progress-bar bg-success-dark h-full rounded-full" style="width: 63%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-sm">Shopping</span> |
|
<span class="text-xs font-medium">$320 / $400</span> |
|
</div> |
|
<div class="progress-bar bg-slate-200 w-full"> |
|
<div class="progress-bar bg-danger-dark h-full rounded-full" style="width: 80%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-sm">Utilities</span> |
|
<span class="text-xs font-medium">$210 / $300</span> |
|
</div> |
|
<div class="progress-bar bg-slate-200 w-full"> |
|
<div class="progress-bar bg-info-dark h-full rounded-full" style="width: 70%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="card p-6 lg:col-span-2"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<h3 class="font-bold">Recent Transactions</h3> |
|
<button class="text-primary-dark text-sm font-medium">View All</button> |
|
</div> |
|
|
|
<div class="overflow-x-auto"> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="text-left text-sm text-slate-500 border-b border-slate-200"> |
|
<th class="pb-3">Description</th> |
|
<th class="pb-3">Category</th> |
|
<th class="pb-3 text-right">Amount</th> |
|
<th class="pb-3">Date</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr class="transaction-item border-b border-slate-100"> |
|
<td class="py-3"> |
|
<div class="flex items-center"> |
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3"> |
|
<i class="fas fa-shopping-bag text-red-500"></i> |
|
</div> |
|
<span>Grocery Store</span> |
|
</div> |
|
</td> |
|
<td class="py-3 text-sm text-slate-500">Food</td> |
|
<td class="py-3 text-right font-medium text-danger-dark">-$86.45</td> |
|
<td class="py-3 text-sm text-slate-500">Today</td> |
|
</tr> |
|
|
|
<tr class="transaction-item border-b border-slate-100"> |
|
<td class="py-3"> |
|
<div class="flex items-center"> |
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
<i class="fas fa-subway text-blue-500"></i> |
|
</div> |
|
<span>Public Transport</span> |
|
</div> |
|
</td> |
|
<td class="py-3 text-sm text-slate-500">Transport</td> |
|
<td class="py-3 text-right font-medium text-danger-dark">-$2.75</td> |
|
<td class="py-3 text-sm text-slate-500">Today</td> |
|
</tr> |
|
|
|
<tr class="transaction-item border-b border-slate-100"> |
|
<td class="py-3"> |
|
<div class="flex items-center"> |
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
|
<i class="fas fa-money-bill-wave text-green-500"></i> |
|
</div> |
|
<span>Salary Deposit</span> |
|
</div> |
|
</td> |
|
<td class="py-3 text-sm text-slate-500">Income</td> |
|
<td class="py-3 text-right font-medium text-success-dark">+$2,500.00</td> |
|
<td class="py-3 text-sm text-slate-500">Yesterday</td> |
|
</tr> |
|
|
|
<tr class="transaction-item border-b border-slate-100"> |
|
<td class="py-3"> |
|
<div class="flex items-center"> |
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
<i class="fas fa-film text-purple-500"></i> |
|
</div> |
|
<span>Movie Tickets</span> |
|
</div> |
|
</td> |
|
<td class="py-3 text-sm text-slate-500">Entertainment</td> |
|
<td class="py-3 text-right font-medium text-danger-dark">-$32.00</td> |
|
<td class="py-3 text-sm text-slate-500">May 15</td> |
|
</tr> |
|
|
|
<tr class="transaction-item"> |
|
<td class="py-3"> |
|
<div class="flex items-center"> |
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> |
|
<i class="fas fa-utensils text-yellow-500"></i> |
|
</div> |
|
<span>Dinner Out</span> |
|
</div> |
|
</td> |
|
<td class="py-3 text-sm text-slate-500">Dining</td> |
|
<td class="py-3 text-right font-medium text-danger-dark">-$45.30</td> |
|
<td class="py-3 text-sm text-slate-500">May 14</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
<div class="card p-6 ai-suggestion"> |
|
<div class="flex items-start mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3 flex-shrink-0"> |
|
<i class="fas fa-robot text-white"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold mb-1">AI Spending Insight</h4> |
|
<p class="text-sm text-slate-600">Your dining expenses are 23% higher than last month. Consider reducing restaurant visits to stay within budget.</p> |
|
</div> |
|
</div> |
|
<div class="flex justify-end"> |
|
<button class="text-xs text-primary-dark font-medium">View Details →</button> |
|
</div> |
|
</div> |
|
|
|
<div class="card p-6 ai-suggestion"> |
|
<div class="flex items-start mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3 flex-shrink-0"> |
|
<i class="fas fa-lightbulb text-white"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold mb-1">Savings Opportunity</h4> |
|
<p class="text-sm text-slate-600">Based on your spending patterns, you could save $120/month by switching to a cheaper phone plan.</p> |
|
</div> |
|
</div> |
|
<div class="flex justify-end"> |
|
<button class="text-xs text-primary-dark font-medium">Learn More →</button> |
|
</div> |
|
</div> |
|
|
|
<div class="card p-6 bg-slate-800 text-white"> |
|
<div class="flex items-start mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3 flex-shrink-0"> |
|
<i class="fas fa-chart-line text-white"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold mb-1">Financial Health</h4> |
|
<p class="text-sm text-slate-300">Your financial health score is 78/100, better than 65% of users in your age group.</p> |
|
</div> |
|
</div> |
|
<div class="mt-4"> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-xs text-slate-300">Spending Control</span> |
|
<span class="text-xs font-medium">72/100</span> |
|
</div> |
|
<div class="progress-bar bg-slate-700 w-full"> |
|
<div class="progress-bar bg-primary-dark h-full rounded-full" style="width: 72%"></div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between mb-2 mt-3"> |
|
<span class="text-xs text-slate-300">Savings Rate</span> |
|
<span class="text-xs font-medium">85/100</span> |
|
</div> |
|
<div class="progress-bar bg-slate-700 w-full"> |
|
<div class="progress-bar bg-success-dark h-full rounded-full" style="width: 85%"></div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between mb-2 mt-3"> |
|
<span class="text-xs text-slate-300">Investment</span> |
|
<span class="text-xs font-medium">45/100</span> |
|
</div> |
|
<div class="progress-bar bg-slate-700 w-full"> |
|
<div class="progress-bar bg-warning-dark h-full rounded-full" style="width: 45%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<script> |
|
|
|
const spendingCtx = document.getElementById('spendingChart').getContext('2d'); |
|
new Chart(spendingCtx, { |
|
type: 'bar', |
|
data: { |
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
|
datasets: [ |
|
{ |
|
label: 'Income', |
|
data: [4500, 4800, 5000, 5100, 5240, 0], |
|
backgroundColor: 'rgba(34, 197, 94, 0.7)', |
|
borderRadius: 4 |
|
}, |
|
{ |
|
label: 'Expenses', |
|
data: [3200, 3500, 3700, 3550, 3845, 0], |
|
backgroundColor: 'rgba(239, 68, 68, 0.7)', |
|
borderRadius: 4 |
|
} |
|
] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
legend: { |
|
position: 'top', |
|
}, |
|
tooltip: { |
|
callbacks: { |
|
label: function(context) { |
|
return context.dataset.label + ': $' + context.raw.toFixed(2); |
|
} |
|
} |
|
} |
|
}, |
|
scales: { |
|
x: { |
|
grid: { |
|
display: false |
|
} |
|
}, |
|
y: { |
|
grid: { |
|
color: 'rgba(0, 0, 0, 0.05)' |
|
}, |
|
ticks: { |
|
callback: function(value) { |
|
return '$' + value; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
setInterval(() => { |
|
document.querySelectorAll('.ai-suggestion').forEach((el, index) => { |
|
setTimeout(() => { |
|
el.classList.add('animate-pulse'); |
|
setTimeout(() => { |
|
el.classList.remove('animate-pulse'); |
|
}, 1000); |
|
}, index * 300); |
|
}); |
|
}, 10000); |
|
|
|
|
|
document.querySelector('.fa-bars').addEventListener('click', function() { |
|
document.querySelector('.sidebar').classList.toggle('hidden'); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Suharaaa/reg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
