Init: MVP de Gestión de Pagos (Stitch UI + SQLite/PHP)
This commit is contained in:
Ricardo Monla
@@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"background": "#f8faf9",
|
||||
"primary-container": "#006a6a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed": "#002020",
|
||||
"on-background": "#191c1c",
|
||||
"secondary-fixed": "#d0e8d9",
|
||||
"surface-container-high": "#e6e9e8",
|
||||
"primary-fixed-dim": "#84d4d3",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary-container": "#cde6d6",
|
||||
"surface-container-highest": "#e1e3e2",
|
||||
"inverse-surface": "#2e3131",
|
||||
"surface-container-low": "#f2f4f3",
|
||||
"on-tertiary-fixed": "#001e2b",
|
||||
"tertiary-fixed": "#c2e8fd",
|
||||
"on-primary-fixed-variant": "#004f4f",
|
||||
"on-secondary-container": "#51685b",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#a7cce1",
|
||||
"inverse-primary": "#84d4d3",
|
||||
"tertiary": "#264b5c",
|
||||
"on-surface": "#191c1c",
|
||||
"on-tertiary-container": "#b9def3",
|
||||
"on-surface-variant": "#3e4948",
|
||||
"surface-dim": "#d8dada",
|
||||
"outline-variant": "#bec9c8",
|
||||
"inverse-on-surface": "#eff1f0",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#264b5c",
|
||||
"on-tertiary": "#ffffff",
|
||||
"tertiary-container": "#3f6375",
|
||||
"on-secondary-fixed-variant": "#364b40",
|
||||
"secondary-fixed-dim": "#b4ccbd",
|
||||
"surface-variant": "#e1e3e2",
|
||||
"outline": "#6e7979",
|
||||
"surface-container": "#eceeed",
|
||||
"surface-bright": "#f8faf9",
|
||||
"error": "#ba1a1a",
|
||||
"surface-tint": "#006a6a",
|
||||
"secondary": "#4d6357",
|
||||
"surface": "#f8faf9",
|
||||
"on-secondary-fixed": "#0a1f16",
|
||||
"error-container": "#ffdad6",
|
||||
"primary": "#005050",
|
||||
"on-primary-container": "#97e7e6",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#a0f0f0"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["Manrope"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Manrope', sans-serif; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen pb-32">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-[#f8faf9] dark:bg-slate-950 docked full-width top-0 sticky z-40">
|
||||
<div class="flex justify-between items-center w-full px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-[#006a6a] dark:text-teal-400">account_balance_wallet</span>
|
||||
<h1 class="font-['Manrope'] headline-sm tracking-tight text-xl font-bold text-[#006a6a] dark:text-teal-500">Quiet Wealth</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 hover:bg-[#f2f4f3] dark:hover:bg-slate-800 transition-colors rounded-full" onclick="window.location.href='add.html'">
|
||||
<span class="material-symbols-outlined text-[#3e4948] dark:text-slate-400">add_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-6 space-y-8 mt-4">
|
||||
<!-- Screen Title -->
|
||||
<div class="flex items-end justify-between">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-on-surface">Resumen</h2>
|
||||
<p class="text-on-surface-variant label-sm tracking-widest uppercase pb-1">Octubre 2023</p>
|
||||
</div>
|
||||
<!-- Hero Balance Card: The Prosperity Spark -->
|
||||
<div class="relative overflow-hidden rounded-[2rem] p-8 bg-gradient-to-br from-primary to-primary-container text-on-primary shadow-2xl shadow-primary/20">
|
||||
<!-- Subtle Animated Sparkle Background -->
|
||||
<div class="absolute -right-10 -top-10 w-40 h-40 bg-tertiary-fixed opacity-10 blur-3xl rounded-full"></div>
|
||||
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-primary-fixed opacity-10 blur-3xl rounded-full"></div>
|
||||
<div class="relative z-10">
|
||||
<p class="text-on-primary/70 font-label tracking-widest uppercase text-xs mb-2">Balance Total</p>
|
||||
<h3 id="ui-balance" class="text-5xl font-extrabold tracking-tighter mb-6">$0.00</h3>
|
||||
<div class="flex items-center gap-2 bg-on-primary/10 w-fit px-4 py-2 rounded-full backdrop-blur-md">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">trending_up</span>
|
||||
<span class="text-sm font-medium">+12.4% este mes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spending Insights: Donut Chart Section -->
|
||||
<section class="space-y-4">
|
||||
<h4 class="headline-sm text-on-surface-variant font-semibold px-1">Distribución de Gastos</h4>
|
||||
<div class="bg-surface-container-low rounded-[2rem] p-8 flex flex-col items-center">
|
||||
<!-- Visual Donut (CSS Representation) -->
|
||||
<div id="ui-donut-chart" class="relative w-48 h-48 mb-8">
|
||||
<svg class="w-full h-full transform -rotate-90" viewbox="0 0 36 36">
|
||||
<!-- Comida (45%) -->
|
||||
<circle class="stroke-primary" cx="18" cy="18" fill="none" r="16" stroke-dasharray="45, 100" stroke-linecap="round" stroke-width="4"></circle>
|
||||
<!-- Vivienda (30%) -->
|
||||
<circle class="stroke-secondary" cx="18" cy="18" fill="none" r="16" stroke-dasharray="30, 100" stroke-dashoffset="-45" stroke-linecap="round" stroke-width="4"></circle>
|
||||
<!-- Transporte (15%) -->
|
||||
<circle class="stroke-tertiary" cx="18" cy="18" fill="none" r="16" stroke-dasharray="15, 100" stroke-dashoffset="-75" stroke-linecap="round" stroke-width="4"></circle>
|
||||
</svg>
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span class="text-2xl font-bold">$2,840</span>
|
||||
<span class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">Gastado</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Legend -->
|
||||
<div id="ui-donut-legend" class="w-full grid grid-cols-1 gap-3">
|
||||
<div class="flex items-center justify-between p-3 bg-surface-container-lowest rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
||||
<span class="text-sm font-semibold">Comida</span>
|
||||
</div>
|
||||
<span class="text-sm text-on-surface-variant">45%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-surface-container-lowest rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-secondary"></div>
|
||||
<span class="text-sm font-semibold">Vivienda</span>
|
||||
</div>
|
||||
<span class="text-sm text-on-surface-variant">30%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-surface-container-lowest rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-tertiary"></div>
|
||||
<span class="text-sm font-semibold">Transporte</span>
|
||||
</div>
|
||||
<span class="text-sm text-on-surface-variant">15%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Recent Movements -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<h4 class="headline-sm text-on-surface-variant font-semibold">Movimientos Recientes</h4>
|
||||
<button class="text-primary text-sm font-bold">Ver todo</button>
|
||||
</div>
|
||||
<div id="ui-movimientos" class="space-y-6">
|
||||
<!-- Transaction 1 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary">restaurant</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Restaurante La Paz</p>
|
||||
<p class="text-xs text-on-surface-variant">24 Oct 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-bold text-error">-$45.50</p>
|
||||
</div>
|
||||
<!-- Transaction 2 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary">shopping_bag</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Tienda Moderna</p>
|
||||
<p class="text-xs text-on-surface-variant">22 Oct 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-bold text-error">-$120.00</p>
|
||||
</div>
|
||||
<!-- Transaction 3 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary">payments</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">Depósito de Nómina</p>
|
||||
<p class="text-xs text-on-surface-variant">20 Oct 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-bold text-primary-container">+$2,100.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-8 pb-8 pt-4 bg-[#ffffff]/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-[0px_-12px_32px_rgba(0,80,80,0.06)] rounded-t-[2rem]">
|
||||
<button class="flex items-center justify-center bg-[#006a6a] text-white rounded-2xl p-3 shadow-lg shadow-[#006a6a]/20 active:scale-90 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">home</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center text-[#3e4948] dark:text-slate-400 p-3 hover:text-[#006a6a] dark:hover:text-teal-300 active:scale-90 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center text-[#3e4948] dark:text-slate-400 p-3 hover:text-[#006a6a] dark:hover:text-teal-300 active:scale-90 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined">credit_card</span>
|
||||
</button>
|
||||
<button class="flex items-center justify-center text-[#3e4948] dark:text-slate-400 p-3 hover:text-[#006a6a] dark:hover:text-teal-300 active:scale-90 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
</button>
|
||||
<script src="js/dashboard.js"></script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user