-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (159 loc) · 10.3 KB
/
index.html
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
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Streaker - A sleek and modern web app to track your daily progress towards your goals. Set goals, update progress, and visualize your journey with a beautiful graph.">
<meta name="keywords" content="streaker, progress tracker, goal tracker, daily progress, productivity, motivation">
<meta name="author" content="datwalkerv">
<meta property="og:title" content="Streaker - Track Your Daily Progress">
<meta property="og:description" content="A sleek and modern web app to track your daily progress towards your goals. Set goals, update progress, and visualize your journey with a beautiful graph.">
<meta property="og:image" content="https://raw.githubusercontent.com/datwalkerv/Streaker/refs/heads/main/streaker.webp">
<meta property="og:url" content="https://datwalkerv.github.io/Streaker/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Streaker - Track Your Daily Progress">
<meta name="twitter:description" content="A sleek and modern web app to track your daily progress towards your goals. Set goals, update progress, and visualize your journey with a beautiful graph.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/datwalkerv/Streaker/refs/heads/main/streaker.webp">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<title>Streaker</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-black text-white flex items-center justify-center min-h-screen overflow-hidden">
<!-- Background Image with Gradient -->
<div id="background" class="fixed inset-0 bg-cover bg-center z-0"></div>
<div class="fixed inset-0 bg-gradient-to-t from-black via-black/80 to-black/50 z-0"></div>
<!-- Main Content -->
<div class="relative z-10 bg-black/70 p-8 rounded-lg shadow-lg w-full max-w-md backdrop-blur-sm border border-neutral-800">
<h1 class="text-3xl font-bold text-white mb-4 animate-fade-in">Streak Checker</h1>
<p class="text-neutral-400 mb-6 animate-fade-in">Track your daily progress towards your goal!</p>
<!-- Progress Bar -->
<div id="progressBarContainer" class="mb-6 animate-fade-in hidden">
<div class="w-full bg-neutral-800 rounded-full h-2.5">
<div id="progressBar" class="bg-white h-2.5 rounded-full" style="width: 0%;"></div>
</div>
<div class="flex justify-between">
<p class="text-sm text-neutral-400 mt-2" id="progressText">0% completed</p>
<p class="text-sm text-neutral-400 mt-2" id="progressNow">0</p>
</div>
</div>
<!-- Icons for End Goal and Image -->
<div class="flex space-x-4 mb-6 animate-fade-in">
<!-- End Goal Icon -->
<button id="goalIcon" class="p-3 bg-neutral-900 rounded-lg hover:bg-neutral-800 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</button>
<!-- Image Icon -->
<button id="imageIcon" class="p-3 bg-neutral-900 rounded-lg hover:bg-neutral-800 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</button>
</div>
<!-- Input for Progress -->
<div class="mb-6 animate-fade-in">
<label for="progress" class="block text-sm font-medium text-neutral-400">Today's Progress:</label>
<input
type="number"
id="progress"
min="0"
placeholder="Enter your progress"
class="mt-1 block w-full px-3 py-2 bg-neutral-900 border border-neutral-800 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-neutral-700"
/>
</div>
<!-- Update Progress Button -->
<button
id="updateProgress"
class="w-full bg-white text-black py-2 px-4 rounded-md hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-700 animate-fade-in"
>
Update Progress
</button>
<!-- Chart Section -->
<div class="mt-8 animate-fade-in">
<canvas id="progressChart"></canvas>
</div>
</div>
<!-- Modals -->
<!-- End Goal Modal -->
<div id="goalModal" class="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm z-20 hidden">
<div class="bg-neutral-900 p-6 rounded-lg w-full max-w-md border border-neutral-800">
<h2 class="text-xl font-bold text-white mb-4">Set End Goal</h2>
<input
type="number"
id="endGoalInput"
min="0"
placeholder="Enter your end goal"
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-neutral-700"
/>
<button
id="submitGoal"
class="mt-4 w-full bg-white text-black py-2 px-4 rounded-md hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-700"
>
Submit
</button>
</div>
</div>
<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm z-20 hidden">
<div class="bg-neutral-900 p-6 rounded-lg w-full max-w-md border border-neutral-800">
<h2 class="text-xl font-bold text-white mb-4">Set Goal Image</h2>
<input
type="text"
id="imageLinkInput"
placeholder="Enter image URL"
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-neutral-700"
/>
<button
id="submitImage"
class="mt-4 w-full bg-white text-black py-2 px-4 rounded-md hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-neutral-700"
>
Submit
</button>
</div>
</div>
<!-- Footer -->
<div class="fixed bottom-0 left-0 right-0 p-4 flex justify-end items-center text-neutral-400 text-sm z-10 w-full">
<div class="hidden md:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black shadow-lg p-2 rounded-lg">
© <span id="currentYear"></span> All rights reserved, datwalkerv
</div>
<!-- Social Icons -->
<div class="flex space-x-4">
<a href="https://github.com/datwalkerv/" target="_blank" class="hover:text-white transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<a href="https://instagram.com/balagbalint" target="_blank" class="hover:text-white transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="mailto:bbalint139@gmail.com" class="hover:text-white transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12.713l-11.985-9.713h23.97l-11.985 9.713zm0 2.574l-12-9.725v15.438h24v-15.438l-12 9.725z"/>
</svg>
</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>