Skip to content

Commit 58febb8

Browse files
author
=
committed
Création d'un lien de payement pour Stripe
1 parent 8b90cd5 commit 58febb8

3 files changed

Lines changed: 114 additions & 40 deletions

File tree

‎index.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Compteur de révisions</title>
6+
<title>Compteur de révisions Premium</title>
77
<link rel="stylesheet" href="styles.css">
88
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
99
</head>
@@ -22,7 +22,16 @@ <h2>Révisions par matière</h2>
2222

2323
<h2>Total général : <span id="total">0</span> heures</h2>
2424

25-
<canvas id="chart" width="400" height="200"></canvas>
25+
<!-- Fonctionnalité premium -->
26+
<div id="premium">
27+
<h2>Fonctionnalité Premium</h2>
28+
<p>Générer un PDF des révisions et voir le graphique avancé.</p>
29+
<a href="https://buy.stripe.com/test_fZu28j9rJchN2DX7eNc7u00" target="_blank">
30+
<button>Débloquer Premium</button>
31+
</a>
32+
</div>
33+
34+
<canvas id="chart" width="400" height="200" style="display:none;"></canvas>
2635
</div>
2736

2837
<script src="script.js"></script>

‎script.js‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1+
// Récupère les données stockées ou initialise
2+
let data = JSON.parse(localStorage.getItem('data')) || {};
3+
let premiumUnlocked = JSON.parse(localStorage.getItem('premiumUnlocked')) || false;
4+
5+
// Récupération des éléments
16
const ajouterBtn = document.getElementById('ajouter');
27
const liste = document.getElementById('liste');
38
const totalSpan = document.getElementById('total');
9+
const premiumSection = document.getElementById('premium');
10+
const chartCanvas = document.getElementById('chart');
411

5-
let data = JSON.parse(localStorage.getItem('revisions')) || {};
12+
// Vérifie si l'URL contient ?premium=1
13+
if (window.location.search.includes("premium=1")) {
14+
premiumUnlocked = true;
15+
localStorage.setItem('premiumUnlocked', true); // Sauvegarde l'état
16+
}
617

718
function updateList() {
819
liste.innerHTML = '';
@@ -14,58 +25,45 @@ function updateList() {
1425
totalHeures += data[matiere];
1526
});
1627
totalSpan.textContent = totalHeures;
17-
updateChart();
18-
}
1928

20-
ajouterBtn.addEventListener('click', () => {
21-
const matiereInput = document.getElementById('matiere');
22-
const heuresInput = document.getElementById('heures');
29+
// Sauvegarde les données dans localStorage
30+
localStorage.setItem('data', JSON.stringify(data));
2331

24-
const matiere = matiereInput.value.trim();
25-
const heures = parseFloat(heuresInput.value);
32+
// Si premium débloqué
33+
if (premiumUnlocked) {
34+
chartCanvas.style.display = 'block';
35+
premiumSection.style.display = 'none';
36+
updateChart();
37+
}
38+
}
2639

27-
if(matiere && heures > 0){
40+
// Ajouter une matière
41+
ajouterBtn.addEventListener('click', () => {
42+
const matiere = document.getElementById('matiere').value.trim();
43+
const heures = parseFloat(document.getElementById('heures').value);
44+
if (matiere && heures > 0){
2845
data[matiere] = (data[matiere] || 0) + heures;
29-
localStorage.setItem('revisions', JSON.stringify(data));
30-
matiereInput.value = '';
31-
heuresInput.value = '';
3246
updateList();
3347
} else {
3448
alert('Veuillez entrer une matière et un nombre d’heures valide.');
3549
}
3650
});
3751

38-
// === Chart.js ===
39-
const ctx = document.getElementById('chart').getContext('2d');
52+
// Graphique Chart.js pour premium
4053
let chart;
41-
4254
function updateChart() {
55+
const ctx = chartCanvas.getContext('2d');
4356
const labels = Object.keys(data);
4457
const values = Object.values(data);
4558

4659
if(chart) chart.destroy();
4760

4861
chart = new Chart(ctx, {
4962
type: 'bar',
50-
data: {
51-
labels: labels,
52-
datasets: [{
53-
label: 'Heures révisées',
54-
data: values,
55-
backgroundColor: '#007bff'
56-
}]
57-
},
58-
options: {
59-
responsive: true,
60-
plugins: {
61-
legend: { display: false }
62-
},
63-
scales: {
64-
y: { beginAtZero: true }
65-
}
66-
}
63+
data: { labels, datasets: [{ label: 'Heures révisées', data: values, backgroundColor: '#007bff' }] },
64+
options: { responsive:true, plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} }
6765
});
6866
}
6967

70-
// Initialisation
68+
// Initialisation au chargement
7169
updateList();

‎styles.css‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
/* Reset et style général */
12
body {
2-
font-family: Arial, sans-serif;
3+
font-family: 'Arial', sans-serif;
34
background: #f2f2f2;
5+
margin: 0;
6+
padding: 50px 20px;
47
display: flex;
58
justify-content: center;
6-
padding: 50px 20px;
79
}
810

911
.container {
@@ -15,11 +17,20 @@ body {
1517
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
1618
}
1719

18-
h1, h2 {
20+
h1 {
1921
text-align: center;
2022
color: #333;
23+
margin-bottom: 30px;
24+
}
25+
26+
h2 {
27+
text-align: center;
28+
color: #444;
29+
margin-top: 30px;
30+
margin-bottom: 15px;
2131
}
2232

33+
/* Inputs et bouton ajouter */
2334
.input-group {
2435
display: flex;
2536
gap: 10px;
@@ -31,22 +42,25 @@ input {
3142
padding: 10px;
3243
border: 1px solid #ccc;
3344
border-radius: 5px;
45+
font-size: 16px;
3446
}
3547

3648
button {
3749
padding: 10px 15px;
3850
border: none;
3951
background: #007bff;
4052
color: white;
53+
font-size: 16px;
4154
border-radius: 5px;
4255
cursor: pointer;
43-
transition: background 0.3s;
56+
transition: all 0.3s ease;
4457
}
4558

4659
button:hover {
4760
background: #0056b3;
4861
}
4962

63+
/* Liste des matières */
5064
ul {
5165
list-style: none;
5266
padding: 0;
@@ -56,6 +70,59 @@ ul {
5670
li {
5771
background: #e9ecef;
5872
margin: 5px 0;
59-
padding: 8px;
73+
padding: 10px;
6074
border-radius: 5px;
75+
font-size: 16px;
76+
}
77+
78+
/* Section premium */
79+
#premium {
80+
text-align: center;
81+
margin-top: 30px;
82+
padding: 20px;
83+
border: 2px dashed #007bff;
84+
border-radius: 10px;
85+
background: #f9faff;
86+
}
87+
88+
#premium p {
89+
margin-bottom: 15px;
90+
color: #333;
91+
font-size: 15px;
92+
}
93+
94+
/* Bouton premium */
95+
#premium button {
96+
background: linear-gradient(90deg, #ff7e5f, #feb47b);
97+
}
98+
99+
#premium button:hover {
100+
background: linear-gradient(90deg, #feb47b, #ff7e5f);
101+
transform: scale(1.05);
102+
}
103+
104+
/* Graphique Chart.js */
105+
canvas {
106+
margin-top: 30px;
107+
border-radius: 10px;
108+
background: #f8f9fa;
109+
padding: 10px;
110+
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
111+
}
112+
113+
/* Responsive */
114+
@media (max-width: 600px) {
115+
.container {
116+
padding: 30px 20px;
117+
}
118+
119+
input, button {
120+
font-size: 14px;
121+
padding: 8px;
122+
}
123+
124+
li {
125+
font-size: 14px;
126+
padding: 8px;
127+
}
61128
}

0 commit comments

Comments
 (0)