nicotine/index.html at main · soberrhino/nicotine · GitHub

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nicotine</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        html, body { height: 100%; margin: 0; font-family: 'Inter', sans-serif; }
        .info-text { font-variant-numeric: tabular-nums; }
    </style>
    <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=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900 flex items-center justify-center h-full">

    <div class="text-center p-8 flex flex-col items-center w-full max-w-xs">

        <!-- Zone d'information -->
        <div id="infoDisplay" class="text-center mb-8 p-4 rounded-lg w-full transition-colors duration-500 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
            <!-- Ligne 0: Nombre de prises -->
            <div>
                <p class="font-semibold text-sm text-gray-600 dark:text-gray-400"><span class="text-2xl align-middle mr-1">🔢</span> Nombre de prises</p>
                <p id="dailyCountText" class="info-text font-bold text-2xl mt-1">--</p>
            </div>
            <div class="border-t border-gray-300 dark:border-gray-600 my-3"></div>
            <!-- Ligne 1: Dernière prise -->
            <div>
                <p class="font-semibold text-sm text-gray-600 dark:text-gray-400">
                    <span id="statusEmoji" class="text-2xl align-middle mr-1">⚪</span>Dernière prise
                </p>
                <p id="lastClickText" class="info-text font-bold text-2xl mt-1">--:--</p>
            </div>
            <div class="border-t border-gray-300 dark:border-gray-600 my-3"></div>
            <!-- Ligne 2: Moyenne -->
            <div>
                <p class="font-semibold text-sm text-gray-600 dark:text-gray-400"><span class="text-2xl align-middle mr-1">⏱️</span> Moyenne du jour</p>
                <p id="averageText" class="info-text font-bold text-2xl mt-1">-- min</p>
            </div>
            <div class="border-t border-gray-300 dark:border-gray-600 my-3"></div>
            <!-- Ligne 3: Prochaine prise -->
            <div>
                <p class="font-semibold text-sm text-gray-600 dark:text-gray-400"><span class="text-2xl align-middle mr-1">🎯</span> Prochaine prise (est.)</p>
                <p id="nextDoseText" class="info-text font-bold text-2xl mt-1">--:--</p>
            </div>
        </div>

        <!-- Bouton d'action -->
        <button id="logButton" class="w-48 h-48 bg-blue-600 text-white rounded-full shadow-lg transform transition-all duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 flex items-center justify-center">
            <span id="buttonText" class="text-2xl font-semibold">Nicotine</span>
        </button>
    </div>

    <script>
        // --- CONFIGURATION ---
        const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzAQ8mn3ReJDgt-Kq0tPDbTEXWwHWD_NN5vxfzI48h7HTUSrZOgSl3RHNrZMrCMH44/exec';

        // --- ÉLÉMENTS DU DOM ---
        const logButton = document.getElementById('logButton');
        const buttonText = document.getElementById('buttonText');
        const infoDisplay = document.getElementById('infoDisplay');
        const dailyCountText = document.getElementById('dailyCountText');
        const statusEmoji = document.getElementById('statusEmoji');
        const lastClickText = document.getElementById('lastClickText');
        const averageText = document.getElementById('averageText');
        const nextDoseText = document.getElementById('nextDoseText');

        let updateInterval;

        // --- FONCTIONS D'AFFICHAGE ---
        function updateDisplayStatus() {
            const dailyCount = localStorage.getItem('dailyCount');
            const lastClick = localStorage.getItem('lastClickTimestamp');
            const avgDuration = localStorage.getItem('averageDuration');

            if (!lastClick || !avgDuration || !dailyCount) return;

            const lastClickDate = new Date(lastClick);
            const avgDurationSeconds = parseInt(avgDuration);

            // Mise à jour des textes
            dailyCountText.textContent = dailyCount;
            lastClickText.textContent = lastClickDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
            averageText.textContent = `${Math.round(avgDurationSeconds / 60)} min`;

            const nextDoseDate = new Date(lastClickDate.getTime() + avgDurationSeconds * 1000);
            nextDoseText.textContent = nextDoseDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });

            // Mise à jour des couleurs et de l'emoji
            const elapsedSeconds = (Date.now() - lastClickDate.getTime()) / 1000;
            if (elapsedSeconds > avgDurationSeconds) {
                infoDisplay.classList.remove('text-red-600', 'dark:text-red-400');
                infoDisplay.classList.add('text-green-600', 'dark:text-green-400');
                statusEmoji.textContent = '✅';
            } else {
                infoDisplay.classList.remove('text-green-600', 'dark:text-green-400');
                infoDisplay.classList.add('text-red-600', 'dark:text-red-400');
                statusEmoji.textContent = '⏳';
            }
        }

        // --- LOGIQUE DE COMMUNICATION ---
        function fetchData(isClick) {
            let url = APPS_SCRIPT_URL;
            if (!isClick) {
                url += '?action=getData';
            }

            if (isClick) {
                buttonText.textContent = '...';
                logButton.disabled = true;
            }

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success' && data.lastClickTimestamp) {
                        localStorage.setItem('dailyCount', data.dailyCount.toString());
                        localStorage.setItem('lastClickTimestamp', data.lastClickTimestamp);
                        localStorage.setItem('averageDuration', data.averageDuration.toString());

                        updateDisplayStatus(); // Rafraîchit l'affichage avec les nouvelles données
                        clearInterval(updateInterval);
                        updateInterval = setInterval(updateDisplayStatus, 1000);

                    } else if (!data.lastClickTimestamp) {
                        dailyCountText.textContent = data.dailyCount !== undefined ? data.dailyCount.toString() : '0';
                        lastClickText.textContent = "Aucune aujourd'hui";
                        averageText.textContent = "-- min";
                        nextDoseText.textContent = "--:--";
                    }
                })
                .catch(error => console.error('Erreur:', error))
                .finally(() => {
                    if (isClick) {
                        setTimeout(() => {
                            logButton.disabled = false;
                            buttonText.textContent = 'Nicotine';
                        }, 500);
                    }
                });
        }

        // --- INITIALISATION ---
        window.addEventListener('load', () => {
            // 1. Affiche immédiatement les données locales
            updateDisplayStatus();
            clearInterval(updateInterval);
            updateInterval = setInterval(updateDisplayStatus, 1000);

            // 2. Va chercher les données fraîches en arrière-plan
            fetchData(false);
        });

        // --- GESTION DU CLIC ---
        logButton.addEventListener('click', () => {
            fetchData(true);
        });
    </script>
</body>
</html>