-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (189 loc) · 11.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="es" style="font-size: 90%;">
<head>
<!-- Configuración -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PanaSaldo - Consulta Rápida de Saldo Panapass | Gestión Fácil</title>
<!-- Descripción -->
<meta name="description" content="Consulta tu saldo Panapass de forma rápida y segura con PanaSaldo. Accede a tu historial de saldo, gráficos de evolución y noticias de tráfico en Panamá. Herramienta moderna y confiable.">
<!-- Palabras Clave Relevantes -->
<meta name="keywords" content="panapass, saldo panapass, consultar saldo panapass, panasaldo, autopistas panamá, TAG Panamá, transporte Panamá, consulta de saldo panapass, panapass saldo, ena panapass, panapass panama, panapass consulta, consulta de panapass, ver saldo de tarjeta panapass">
<!-- Autor y Robots -->
<meta name="author" content="fl2on">
<meta name="robots" content="index, follow">
<!-- Open Graph (Facebook, WhatsApp) -->
<meta property="og:title" content="PanaSaldo - Consulta Rápida de Saldo Panapass | Gestión Fácil">
<meta property="og:description" content="Consulta tu saldo Panapass al instante y gestiona tus transacciones de manera eficiente. Accede a gráficos de saldo, noticias de tráfico y más.">
<meta property="og:image" content="https://github.com/fl2on/PanaSaldo/blob/main/favicon.png?raw=true">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://fl2on.github.io/PanaSaldo/">
<meta property="og:type" content="website">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="PanaSaldo - Consulta Rápida de Saldo Panapass | Gestión Fácil">
<meta name="twitter:description" content="Consulta tu saldo Panapass al instante y gestiona tus transacciones de manera eficiente. Accede a gráficos de saldo, noticias de tráfico y más.">
<meta name="twitter:image" content="https://github.com/fl2on/PanaSaldo/blob/main/favicon.png?raw=true">
<!-- Canonical URL -->
<link rel="canonical" href="https://fl2on.github.io/PanaSaldo/">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<!-- Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<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=Roboto:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mx-auto px-6 py-8 flex flex-col min-h-screen">
<header class="mb-6 flex justify-between items-center">
<div class="flex flex-col items-start justify-center space-y-1">
<h1 class="text-2xl font-bold text-white tracking-tight"> PanaSaldo <span class="text-sm text-secondary-400 align-top ml-1 pro-tag">PRO</span>
</h1>
<p class="section-description" style="margin-bottom: 0.5rem;">Consulta tu saldo Panapass de forma moderna.</p>
</div>
<button id="themeSwitcher" class="theme-switcher" aria-label="Alternar tema de color">
<span id="themeIconContainer">
<svg id="themeIcon" class="theme-icon sun dark-theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5" />
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" />
</svg>
</span>
</button>
</header>
<div class="content-wrapper">
<main class="main-content">
<section class="w-full mb-6">
<div class="card">
<div class="mb-4">
<h3 class="section-title">Consulta de Saldo Panapass</h3>
<p class="section-description">
Ingresa tu número de Panapass y consulta tu saldo al instante.
</p>
</div>
<form id="saldoForm" class="space-y-3">
<div class="space-y-2">
<label for="panapassInput" class="block text-sm font-semibold text-gray-300"> Número de Panapass
</label>
<div class="relative autocomplete">
<input
id="panapassInput"
type="text"
placeholder="Ej: 1234567890" class="input-panapass"
required
maxlength="10"
/>
<div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
<svg class="icon-input" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</div>
</div>
</div>
<button
type="submit"
class="btn-primary w-full"
>
<svg class="icon-input" style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
Consultar Saldo
</button>
</form>
</div>
</section>
<section id="resultSection" class="w-full mb-6 hidden animate-fade-in">
<div id="resultCard" class="result-card">
<div class="result-icon">
<svg fill="none" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"></circle>
<path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<h2 id="saldo" class="mb-2">Saldo</h2>
<p id="lastDate" class="text-sm text-gray-500">Última Consulta: Loading...</p>
</div>
<div class="additional-info-card">
<h3 class="additional-info-title">Información Adicional</h3>
<div class="space-y-2">
<div class="info-item">
<span class="info-label">Saldo Disponible</span>
<span id="availableBalance" class="info-value"></span>
</div>
<div class="info-item">
<span class="info-label">Última Fecha de Consulta</span>
<span id="lastConsultDate" class="info-value"></span>
</div>
<div class="info-item">
<a href="https://ena.com.pa/" target="_blank" class="info-label" style="color: var(--color-primary); text-decoration: none;">Ir al sitio oficial de Panapass</a>
<svg class="icon-input" style="stroke: var(--color-primary); width: 1rem; height: 1rem; stroke-width: 2;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m-8-3h7.5a2.25 2.25 0 012.25 2.25v7.5m-2.25-9L5.25 18.75" />
</svg>
</div>
</div>
</div>
</section>
<section id="chartSection" class="w-full mb-6 hidden animate-fade-in">
<div class="card">
<h3 class="section-title">Historial de Saldo (Gráfico)</h3>
<p class="section-description">
Visualización gráfica de la evolución de tu saldo en el tiempo.
</p>
<div class="chart-container" style="position: relative; height:240px;">
<canvas id="saldoChart"></canvas>
</div>
</div>
</section>
<section id="historySection" class="w-full mb-6 animate-fade-in">
<div class="card">
<h3 class="section-title">Historial de Saldo (Reciente)</h3>
<p class="section-description">
Registros de tus últimas consultas de saldo.
</p>
<ul id="recentTransactions" class="history-list">
</ul>
<button id="showMoreTransactions" class="show-more-btn" style="display: none;">Ver Historial Completo</button>
</div>
</section>
<section id="savedPanapassSection" class="w-full animate-fade-in">
<div class="card">
<h3 class="section-title">Panapass Guardados</h3>
<p class="section-description">
Accede rápidamente a tus números de Panapass guardados.
</p>
<ul id="savedPanapassList" class="saved-panapass-list">
</ul>
</div>
</section>
</main>
<aside class="sidebar">
<section class="w-full mb-6 twitter-tweet-card">
<div class="card">
<h3 class="section-title">Últimas Noticias de Traficocpanama</h3>
<div id="twitterFeed">
</div>
</div>
</section>
<section id="sidebarNewsSection" class="w-full sidebar-news-section animate-fade-in">
<div class="card">
<div id="traficoPanamaNewsContent">
Cargando noticias...
</div>
</div>
</section>
</aside>
</div>
<footer class="mt-12 text-center text-gray-500 text-sm">
<p>© <span id="copyrightYear"></span> PanaSaldo. Todos los derechos reservados.</p>
<p>Este sitio es una demostración y no está afiliado a ENACorredores de Panamá. La consulta de saldo se realiza utilizando una API.</p>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>