Hugging Face's logo

Spaces:
Sebbe33
/
zenhabit
Running

App Files Community
zenhabit / indexx.html
Sebbe33's picture
Sebbe33
Rename index.html to indexx.html
68a74b6 verified
raw
history blame contribute delete
24.5 kB
 <!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;
}
.theme-toggle {
background: none;
border: none;
color: var(--text-light);
font-size: 1.2rem;
cursor: pointer;
transition: transform 0.3s;
}
.theme-toggle:hover {
transform: rotate(30deg);
color: var(--primary);
}
.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;
}
}
/* Animation for habit completion */
@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>
<div class="container">
<header>
<h1><i class="fas fa-leaf"></i> ZenHabit</h1>
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</header>
<div class="stats">
<div class="stat-card">
<h3>Current Streak</h3>
<p id="currentStreak">5</p>
</div>
<div class="stat-card">
<h3>Habits Tracked</h3>
<p id="habitsTracked">8</p>
</div>
<div class="stat-card">
<h3>Completion Rate</h3>
<p id="completionRate">72%</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">June 2023</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>
<script>
// Sample data
let habits = [
{ id: 1, name: "Morning Meditation", streak: 7, frequency: "daily", progress: 85, checked: false },
{ id: 2, name: "Drink 2L water", streak: 14, frequency: "daily", progress: 60, checked: true },
{ id: 3, name: "Read 30 minutes", streak: 21, frequency: "daily", progress: 90, checked: false },
{ id: 4, name: "Workout", streak: 5, frequency: "weekly", progress: 75, checked: false },
{ id: 5, name: "Journaling", streak: 10, frequency: "daily", progress: 50, checked: true }
];
// 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');
// Current date
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonthIndex = currentDate.getMonth();
// Initialize
document.addEventListener('DOMContentLoaded', () => {
renderHabits();
renderCalendar();
updateStats();
// Check for saved theme preference
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
});
// Theme toggle
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
} else {
localStorage.setItem('theme', 'light');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
});
// Modal controls
addHabitBtn.addEventListener('click', () => {
addHabitModal.classList.add('active');
});
closeModal.addEventListener('click', () => {
addHabitModal.classList.remove('active');
});
cancelHabit.addEventListener('click', () => {
addHabitModal.classList.remove('active');
});
// Add new habit
habitForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('habitName').value;
const frequency = document.getElementById('habitFrequency').value;
const newHabit = {
id: habits.length + 1,
name: name,
streak: 0,
frequency: frequency,
progress: 0,
checked: false
};
habits.push(newHabit);
renderHabits();
updateStats();
renderCalendar();
// Reset form and close modal
habitForm.reset();
addHabitModal.classList.remove('active');
});
// Render habits list
function renderHabits() {
habitList.innerHTML = '';
habits.forEach(habit => {
const habitItem = document.createElement('div');
habitItem.className = 'habit-item';
habitItem.innerHTML = `
<div class="habit-check ${habit.checked ? 'checked' : ''}" data-id="${habit.id}">
${habit.checked ? '<i class="fas fa-check"></i>' : ''}
</div>
<div class="habit-info">
<div class="habit-name">${habit.name}</div>
<div class="habit-streak">
<i class="fas fa-fire"></i> ${habit.streak} day streak
</div>
</div>
<div class="habit-progress">
<div class="progress-bar" style="width: ${habit.progress}%"></div>
</div>
`;
habitList.appendChild(habitItem);
});
// Add event listeners to checkboxes
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;
if (habit.checked) {
habit.streak += 1;
habit.progress = Math.min(habit.progress + 20, 100);
} else {
habit.streak = Math.max(habit.streak - 1, 0);
habit.progress = Math.max(habit.progress - 20, 0);
}
renderHabits();
updateStats();
});
});
}
// Update stats
function updateStats() {
const totalHabits = habits.length;
const completedHabits = habits.filter(h => h.checked).length;
const completionPercentage = Math.round((completedHabits / totalHabits) * 100);
// Find the longest streak
const longestStreak = habits.reduce((max, habit) => Math.max(max, habit.streak), 0);
currentStreak.textContent = longestStreak;
habitsTracked.textContent = totalHabits;
completionRate.textContent = `${completionPercentage}%`;
}
// Calendar functions
function renderCalendar() {
// Clear previous calendar
calendarGrid.innerHTML = '';
// Set month and year display
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
currentMonth.textContent = `${monthNames[currentMonthIndex]} ${currentYear}`;
// Get first day of month and total days in month
const firstDay = new Date(currentYear, currentMonthIndex, 1).getDay();
const daysInMonth = new Date(currentYear, currentMonthIndex + 1, 0).getDate();
// Add day headers
const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
dayNames.forEach(day => {
const dayHeader = document.createElement('div');
dayHeader.className = 'calendar-day-header';
dayHeader.textContent = day;
calendarGrid.appendChild(dayHeader);
});
// Add empty cells for days before the first day of the month
for (let i = 0; i < firstDay; i++) {
const emptyDay = document.createElement('div');
emptyDay.className = 'calendar-day';
calendarGrid.appendChild(emptyDay);
}
// Add days of the month
for (let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
// Check if this is today
const today = new Date();
if (i === today.getDate() && currentMonthIndex === today.getMonth() && currentYear === today.getFullYear()) {
dayElement.classList.add('today');
}
// Add day number
const dayNumber = document.createElement('div');
dayNumber.className = 'day-number';
dayNumber.textContent = i;
dayElement.appendChild(dayNumber);
// Add habit dots (sample - in a real app, this would come from your data)
const habitsCompleted = Math.floor(Math.random() * 3); // Random for demo
if (habitsCompleted > 0) {
const dayHabits = document.createElement('div');
dayHabits.className = 'day-habits';
for (let j = 0; j < habitsCompleted; j++) {
const habitDot = document.createElement('div');
habitDot.className = 'day-habit-dot';
dayHabits.appendChild(habitDot);
}
dayElement.appendChild(dayHabits);
}
calendarGrid.appendChild(dayElement);
}
}
// Month navigation
prevMonthBtn.addEventListener('click', () => {
currentMonthIndex--;
if (currentMonthIndex < 0) {
currentMonthIndex = 11;
currentYear--;
}
renderCalendar();
});
nextMonthBtn.addEventListener('click', () => {
currentMonthIndex++;
if (currentMonthIndex > 11) {
currentMonthIndex = 0;
currentYear++;
}
renderCalendar();
});
// Close modal when clicking outside
window.addEventListener('click', (e) => {
if (e.target === addHabitModal) {
addHabitModal.classList.remove('active');
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>