Hugging Face's logo

Spaces:
Sebbe33
/
zenhabit
Running

App Files Community
Sebbe33 commited on
Commit
f7a114e
·
verified ·
1 Parent(s): 68a74b6

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +174 -0
index.html ADDED
@@ -0,0 +1,174 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <!-- ... (keep existing head content) ... -->
5
+ <style>
6
+ /* Add new button styles */
7
+ .header-controls {
8
+ display: flex;
9
+ gap: 0.5rem;
10
+ align-items: center;
11
+ }
12
+
13
+ .icon-btn {
14
+ background: none;
15
+ border: none;
16
+ color: var(--text-light);
17
+ font-size: 1.2rem;
18
+ cursor: pointer;
19
+ transition: all 0.3s;
20
+ padding: 0.25rem;
21
+ }
22
+
23
+ .icon-btn:hover {
24
+ color: var(--primary);
25
+ transform: rotate(15deg);
26
+ }
27
+
28
+ /* ... (keep existing styles) ... */
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div class="container">
33
+ <header>
34
+ <h1><i class="fas fa-leaf"></i> ZenHabit</h1>
35
+ <div class="header-controls">
36
+ <button class="icon-btn" id="exportBtn" title="Export Data">
37
+ <i class="fas fa-file-export"></i>
38
+ </button>
39
+ <button class="icon-btn" id="importBtn" title="Import Data">
40
+ <i class="fas fa-file-import"></i>
41
+ </button>
42
+ <button class="icon-btn" id="themeToggle" title="Toggle Theme">
43
+ <i class="fas fa-moon"></i>
44
+ </button>
45
+ </div>
46
+ </header>
47
+ <!-- ... (keep rest of body content) ... -->
48
+ </div>
49
+
50
+ <!-- Add hidden file input for import -->
51
+ <input type="file" id="fileInput" hidden accept=".json">
52
+
53
+ <script>
54
+ // Initialize empty habits array
55
+ let habits = [];
56
+
57
+ // Load data from localStorage if available
58
+ document.addEventListener('DOMContentLoaded', () => {
59
+ const savedData = localStorage.getItem('habits');
60
+ if (savedData) {
61
+ try {
62
+ habits = JSON.parse(savedData);
63
+ } catch (e) {
64
+ console.error('Error loading saved data:', e);
65
+ }
66
+ }
67
+ renderHabits();
68
+ renderCalendar();
69
+ updateStats();
70
+
71
+ // ... (keep existing theme initialization) ...
72
+ });
73
+
74
+ // Save data to localStorage
75
+ function saveData() {
76
+ localStorage.setItem('habits', JSON.stringify(habits));
77
+ }
78
+
79
+ // Export functionality
80
+ document.getElementById('exportBtn').addEventListener('click', () => {
81
+ const dataStr = JSON.stringify(habits);
82
+ const blob = new Blob([dataStr], { type: 'application/json' });
83
+ const url = URL.createObjectURL(blob);
84
+ const a = document.createElement('a');
85
+ a.href = url;
86
+ a.download = `zenhabit_export_${new Date().toISOString().split('T')[0]}.json`;
87
+ document.body.appendChild(a);
88
+ a.click();
89
+ document.body.removeChild(a);
90
+ URL.revokeObjectURL(url);
91
+ });
92
+
93
+ // Import functionality
94
+ document.getElementById('importBtn').addEventListener('click', () => {
95
+ document.getElementById('fileInput').click();
96
+ });
97
+
98
+ document.getElementById('fileInput').addEventListener('change', function(e) {
99
+ const file = e.target.files[0];
100
+ if (!file) return;
101
+
102
+ const reader = new FileReader();
103
+ reader.onload = (event) => {
104
+ try {
105
+ const importedData = JSON.parse(event.target.result);
106
+ habits = importedData;
107
+ saveData();
108
+ renderHabits();
109
+ renderCalendar();
110
+ updateStats();
111
+ } catch (error) {
112
+ alert('Error importing file. Please check the file format.');
113
+ }
114
+ };
115
+ reader.readAsText(file);
116
+ });
117
+
118
+ // Update ID generation to handle imported data
119
+ function getNextId() {
120
+ return habits.length > 0 ? Math.max(...habits.map(h => h.id)) + 1 : 1;
121
+ }
122
+
123
+ // Modified add habit function
124
+ habitForm.addEventListener('submit', (e) => {
125
+ e.preventDefault();
126
+
127
+ const name = document.getElementById('habitName').value;
128
+ const frequency = document.getElementById('habitFrequency').value;
129
+
130
+ const newHabit = {
131
+ id: getNextId(),
132
+ name: name,
133
+ streak: 0,
134
+ frequency: frequency,
135
+ progress: 0,
136
+ checked: false
137
+ };
138
+
139
+ habits.push(newHabit);
140
+ saveData();
141
+ renderHabits();
142
+ updateStats();
143
+ renderCalendar();
144
+
145
+ habitForm.reset();
146
+ addHabitModal.classList.remove('active');
147
+ });
148
+
149
+ // Modified habit toggle to save data
150
+ function renderHabits() {
151
+ // ... (existing renderHabits code) ...
152
+
153
+ document.querySelectorAll('.habit-check').forEach(checkbox => {
154
+ checkbox.addEventListener('click', function() {
155
+ const habitId = parseInt(this.getAttribute('data-id'));
156
+ const habit = habits.find(h => h.id === habitId);
157
+
158
+ habit.checked = !habit.checked;
159
+ habit.streak = habit.checked ? habit.streak + 1 : Math.max(habit.streak - 1, 0);
160
+ habit.progress = Math.min(Math.max(
161
+ habit.progress + (habit.checked ? 20 : -20), 0
162
+ ), 100);
163
+
164
+ saveData();
165
+ renderHabits();
166
+ updateStats();
167
+ });
168
+ });
169
+ }
170
+
171
+ // ... (keep remaining existing JavaScript code) ...
172
+ </script>
173
+ </body>
174
+ </html>