Spaces:

Sebbe33
/

zenhabit

Running

App Files Files Community

Sebbe33 commited on Mar 30, 2025

Commit

75a3ef0

verified ·

1 Parent(s): f7a114e

Update index.html

Browse files

Files changed (1) hide show

index.html +540 -85

index.html CHANGED Viewed

@@ -1,9 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <!-- ... (keep existing head content) ... -->
     <style>
-        /* Add new button styles */
         .header-controls {
             display: flex;
             gap: 0.5rem;
@@ -25,7 +88,360 @@
             transform: rotate(15deg);
         }
-        /* ... (keep existing styles) ... */
     </style>
 </head>
 <body>
@@ -44,131 +460,170 @@
                 </button>
             </div>
         </header>
-        <!-- ... (keep rest of body content) ... -->
     </div>
-    <!-- Add hidden file input for import -->
     <input type="file" id="fileInput" hidden accept=".json">
     <script>
-        // Initialize empty habits array
         let habits = [];
-        // Load data from localStorage if available
         document.addEventListener('DOMContentLoaded', () => {
             const savedData = localStorage.getItem('habits');
             if (savedData) {
                 try {
                     habits = JSON.parse(savedData);
                 } catch (e) {
-                    console.error('Error loading saved data:', e);
                 }
             }
-            renderHabits();
-            renderCalendar();
-            updateStats();
-            // ... (keep existing theme initialization) ...
-        });
-        // Save data to localStorage
         function saveData() {
             localStorage.setItem('habits', JSON.stringify(habits));
         }
-        // Export functionality
-        document.getElementById('exportBtn').addEventListener('click', () => {
-            const dataStr = JSON.stringify(habits);
-            const blob = new Blob([dataStr], { type: 'application/json' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
-            a.download = `zenhabit_export_${new Date().toISOString().split('T')[0]}.json`;
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
-        });
-        // Import functionality
-        document.getElementById('importBtn').addEventListener('click', () => {
-            document.getElementById('fileInput').click();
-        });
-        document.getElementById('fileInput').addEventListener('change', function(e) {
             const file = e.target.files[0];
             if (!file) return;
             const reader = new FileReader();
             reader.onload = (event) => {
                 try {
-                    const importedData = JSON.parse(event.target.result);
-                    habits = importedData;
                     saveData();
                     renderHabits();
-                    renderCalendar();
                     updateStats();
                 } catch (error) {
-                    alert('Error importing file. Please check the file format.');
                 }
             };
             reader.readAsText(file);
-        });
-        // Update ID generation to handle imported data
         function getNextId() {
             return habits.length > 0 ? Math.max(...habits.map(h => h.id)) + 1 : 1;
         }
-        // Modified add habit function
-        habitForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const name = document.getElementById('habitName').value;
-            const frequency = document.getElementById('habitFrequency').value;
-            const newHabit = {
-                id: getNextId(),
-                name: name,
-                streak: 0,
-                frequency: frequency,
-                progress: 0,
-                checked: false
-            };
-            habits.push(newHabit);
-            saveData();
-            renderHabits();
-            updateStats();
-            renderCalendar();
-            habitForm.reset();
-            addHabitModal.classList.remove('active');
-        });
-        // Modified habit toggle to save data
-        function renderHabits() {
-            // ... (existing renderHabits code) ...
-            document.querySelectorAll('.habit-check').forEach(checkbox => {
-                checkbox.addEventListener('click', function() {
-                    const habitId = parseInt(this.getAttribute('data-id'));
-                    const habit = habits.find(h => h.id === habitId);
-                    habit.checked = !habit.checked;
-                    habit.streak = habit.checked ? habit.streak + 1 : Math.max(habit.streak - 1, 0);
-                    habit.progress = Math.min(Math.max(
-                        habit.progress + (habit.checked ? 20 : -20), 0
-                    ), 100);
-                    saveData();
-                    renderHabits();
-                    updateStats();
-                });
-            });
-        }
-        // ... (keep remaining existing JavaScript code) ...
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ZenHabit | Minimal Habit Tracker</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            --primary: #6366f1;
+            --primary-light: #818cf8;
+            --text: #1e293b;
+            --text-light: #64748b;
+            --bg: #f8fafc;
+            --card: #ffffff;
+            --border: #e2e8f0;
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
+        .dark-mode {
+            --primary: #818cf8;
+            --primary-light: #a5b4fc;
+            --text: #e2e8f0;
+            --text-light: #94a3b8;
+            --bg: #0f172a;
+            --card: #1e293b;
+            --border: #334155;
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+        h1 {
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
         .header-controls {
             display: flex;
             gap: 0.5rem;
             transform: rotate(15deg);
         }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        .stat-card {
+            background-color: var(--card);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            box-shadow: var(--shadow);
+            text-align: center;
+        }
+        .stat-card h3 {
+            font-size: 0.9rem;
+            color: var(--text-light);
+            margin-bottom: 0.5rem;
+        }
+        .stat-card p {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary);
+        }
+        .habits {
+            margin-bottom: 2rem;
+        }
+        .habits-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .habits-header h2 {
+            font-size: 1.3rem;
+        }
+        .add-habit {
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 0.3rem;
+            padding: 0.5rem 1rem;
+            font-size: 0.9rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: background-color 0.3s;
+        }
+        .add-habit:hover {
+            background-color: var(--primary-light);
+        }
+        .habit-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .habit-item {
+            background-color: var(--card);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            box-shadow: var(--shadow);
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .habit-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 0.3rem;
+            background-color: var(--primary);
+        }
+        .habit-check {
+            width: 1.5rem;
+            height: 1.5rem;
+            border: 2px solid var(--border);
+            border-radius: 0.3rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+        .habit-check.checked {
+            background-color: var(--primary);
+            border-color: var(--primary);
+            color: white;
+        }
+        .habit-info {
+            flex: 1;
+        }
+        .habit-name {
+            font-weight: 600;
+            margin-bottom: 0.2rem;
+        }
+        .habit-streak {
+            font-size: 0.8rem;
+            color: var(--text-light);
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+        .habit-streak i {
+            color: var(--warning);
+        }
+        .habit-progress {
+            width: 100px;
+            height: 0.3rem;
+            background-color: var(--border);
+            border-radius: 1rem;
+            overflow: hidden;
+        }
+        .progress-bar {
+            height: 100%;
+            background-color: var(--primary);
+            border-radius: 1rem;
+            transition: width 0.5s ease;
+        }
+        .calendar {
+            background-color: var(--card);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            box-shadow: var(--shadow);
+        }
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .calendar-nav {
+            display: flex;
+            gap: 1rem;
+        }
+        .calendar-nav button {
+            background: none;
+            border: none;
+            color: var(--text-light);
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        .calendar-nav button:hover {
+            color: var(--primary);
+        }
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 0.5rem;
+        }
+        .calendar-day-header {
+            text-align: center;
+            font-size: 0.8rem;
+            color: var(--text-light);
+            padding: 0.5rem 0;
+        }
+        .calendar-day {
+            aspect-ratio: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0.3rem;
+            cursor: pointer;
+            position: relative;
+        }
+        .calendar-day:hover {
+            background-color: var(--border);
+        }
+        .calendar-day.today {
+            background-color: var(--primary);
+            color: white;
+        }
+        .day-number {
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+        .day-habits {
+            position: absolute;
+            bottom: 0.2rem;
+            display: flex;
+            gap: 0.2rem;
+        }
+        .day-habit-dot {
+            width: 0.3rem;
+            height: 0.3rem;
+            border-radius: 50%;
+            background-color: var(--success);
+        }
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .modal.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal-content {
+            background-color: var(--card);
+            border-radius: 0.5rem;
+            padding: 1.5rem;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            transform: translateY(-20px);
+            transition: transform 0.3s;
+        }
+        .modal.active .modal-content {
+            transform: translateY(0);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .modal-header h3 {
+            font-size: 1.2rem;
+        }
+        .close-modal {
+            background: none;
+            border: none;
+            font-size: 1.2rem;
+            color: var(--text-light);
+            cursor: pointer;
+        }
+        .form-group {
+            margin-bottom: 1rem;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            color: var(--text-light);
+        }
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid var(--border);
+            border-radius: 0.3rem;
+            background-color: var(--bg);
+            color: var(--text);
+        }
+        .modal-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+        .btn {
+            padding: 0.5rem 1rem;
+            border-radius: 0.3rem;
+            cursor: pointer;
+            font-size: 0.9rem;
+            border: none;
+            transition: background-color 0.3s;
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: var(--primary-light);
+        }
+        .btn-secondary {
+            background-color: var(--border);
+            color: var(--text);
+        }
+        .btn-secondary:hover {
+            background-color: #d1d5db;
+        }
+        @media (max-width: 600px) {
+            .stats {
+                grid-template-columns: 1fr;
+            }
+            .container {
+                padding: 1rem;
+            }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .habit-check.checked {
+            animation: pulse 0.3s ease;
+        }
     </style>
 </head>
 <body>
                 </button>
             </div>
         </header>
+        <div class="stats">
+            <div class="stat-card">
+                <h3>Current Streak</h3>
+                <p id="currentStreak">0</p>
+            </div>
+            <div class="stat-card">
+                <h3>Habits Tracked</h3>
+                <p id="habitsTracked">0</p>
+            </div>
+            <div class="stat-card">
+                <h3>Completion Rate</h3>
+                <p id="completionRate">0%</p>
+            </div>
+        </div>
+        <div class="habits">
+            <div class="habits-header">
+                <h2>Today's Habits</h2>
+                <button class="add-habit" id="addHabitBtn">
+                    <i class="fas fa-plus"></i> Add Habit
+                </button>
+            </div>
+            <div class="habit-list" id="habitList">
+                <!-- Habit items will be added here by JavaScript -->
+            </div>
+        </div>
+        <div class="calendar">
+            <div class="calendar-header">
+                <h3 id="currentMonth"></h3>
+                <div class="calendar-nav">
+                    <button id="prevMonth"><i class="fas fa-chevron-left"></i></button>
+                    <button id="nextMonth"><i class="fas fa-chevron-right"></i></button>
+                </div>
+            </div>
+            <div class="calendar-grid" id="calendarGrid">
+                <!-- Calendar days will be added here by JavaScript -->
+            </div>
+        </div>
+    </div>
+    <!-- Add Habit Modal -->
+    <div class="modal" id="addHabitModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Add New Habit</h3>
+                <button class="close-modal" id="closeModal">&times;</button>
+            </div>
+            <form id="habitForm">
+                <div class="form-group">
+                    <label for="habitName">Habit Name</label>
+                    <input type="text" id="habitName" placeholder="e.g. Drink water" required>
+                </div>
+                <div class="form-group">
+                    <label for="habitFrequency">Frequency</label>
+                    <select id="habitFrequency" required>
+                        <option value="daily">Daily</option>
+                        <option value="weekly">Weekly</option>
+                        <option value="monthly">Monthly</option>
+                    </select>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary" id="cancelHabit">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Add Habit</button>
+                </div>
+            </form>
+        </div>
     </div>
     <input type="file" id="fileInput" hidden accept=".json">
     <script>
         let habits = [];
+        let currentDate = new Date();
+        let currentYear = currentDate.getFullYear();
+        let currentMonthIndex = currentDate.getMonth();
+        // DOM Elements
+        const themeToggle = document.getElementById('themeToggle');
+        const addHabitBtn = document.getElementById('addHabitBtn');
+        const addHabitModal = document.getElementById('addHabitModal');
+        const closeModal = document.getElementById('closeModal');
+        const cancelHabit = document.getElementById('cancelHabit');
+        const habitForm = document.getElementById('habitForm');
+        const habitList = document.getElementById('habitList');
+        const currentStreak = document.getElementById('currentStreak');
+        const habitsTracked = document.getElementById('habitsTracked');
+        const completionRate = document.getElementById('completionRate');
+        const currentMonth = document.getElementById('currentMonth');
+        const calendarGrid = document.getElementById('calendarGrid');
+        const prevMonthBtn = document.getElementById('prevMonth');
+        const nextMonthBtn = document.getElementById('nextMonth');
+        // Initialize
         document.addEventListener('DOMContentLoaded', () => {
+            loadData();
+            renderHabits();
+            renderCalendar();
+            updateStats();
+            if (localStorage.getItem('theme') === 'dark') {
+                document.body.classList.add('dark-mode');
+                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+            }
+        });
+        // Data handling
+        function loadData() {
             const savedData = localStorage.getItem('habits');
             if (savedData) {
                 try {
                     habits = JSON.parse(savedData);
                 } catch (e) {
+                    console.error('Error loading data:', e);
                 }
             }
+        }
         function saveData() {
             localStorage.setItem('habits', JSON.stringify(habits));
         }
+        // Import/Export
+        document.getElementById('exportBtn').addEventListener('click', exportData);
+        document.getElementById('importBtn').addEventListener('click', () => document.getElementById('fileInput').click());
+        document.getElementById('fileInput').addEventListener('change', importData);
+        function exportData() {
+            const data = JSON.stringify(habits, null, 2);
+            const blob = new Blob([data], { type: 'application/json' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
+            a.download = `zenhabit-${new Date().toISOString().split('T')[0]}.json`;
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
+        }
+        function importData(e) {
             const file = e.target.files[0];
             if (!file) return;
             const reader = new FileReader();
             reader.onload = (event) => {
                 try {
+                    const imported = JSON.parse(event.target.result);
+                    habits = imported;
                     saveData();
                     renderHabits();
                     updateStats();
+                    renderCalendar();
                 } catch (error) {
+                    alert('Invalid file format. Please import a valid JSON file.');
                 }
             };
             reader.readAsText(file);
+        }
+        // Habit management
         function getNextId() {
             return habits.length > 0 ? Math.max(...habits.map(h => h.id)) + 1 : 1;
         }
+        habitForm.addEventListener('submit', (e) =>