Hugging Face's logo

Spaces:
ymd78329
/
tracker
Running

App Files Community
ymd78329 commited on
Commit
3dbd3cb
·
verified ·
1 Parent(s): 89eb750

Create a mobile application called Track Addiction developed by Yeasin Editz, designed to help users quit pornography through motivation, progress tracking, Islamic guidance, and gamification. --- 🧩 Core Features: 1. Home Page Central element: A circle at the center of the screen with a 2D animated character inside it. A live timer is shown below or inside the circle displaying how long the user has stayed clean. Once the user taps “Start App”, the timer starts, and the character begins to run. The faster and longer the time, the faster the character runs, visually showing progress. Header bar: App name on the left. Three-line hamburger menu icon on the right. --- 📂 Side Menu Options (Hamburger Menu): 1. 📘 পর্ণ কি এবং কেন? Educational section explaining the dangers and psychological effects of pornography. 2. 📕 আসক্তি কি এবং কেনো? Understand the science and spiritual aspects of addiction. 3. 🛑 ফিরে আসার উপায়। Practical strategies for resisting relapse. 4. 🕌 পাপ থেকে বিরত থাকার উপায়। Islamic advice to avoid sinful behavior. 5. 📚 ইসলামিক বই Embedded or linked books from: 🔗 https://drive.google.com/drive/folders/1O3CxfhtwvZ95QpllPg-Abztj1HT2qUcZ 6. 🧠 ইসলামিক কুইজ Fun and informative Islamic quizzes to engage users. 7. 📈 History Shows a log of past streaks: start date, relapse date (if any), current streak, best streak. 8. 🏆 Ranking System Based on the number of days without relapse. Shows current badge and progress to the next level. --- 🏅 Ranking Tiers (Displayed with Emojis & Descriptions): Days Title Description ১–৩ দিন 🟢 Novice সদ্য শুরু করা সাহসীদের জন্য ৩–৮ দিন 🟠 Courageous সাহসিকতার চিহ্ন ৮–১৫ দিন 🟡 Alert সর্বদা সতর্ক ১৫–২৫ দিন 🔵 Purified অনেকটাই বিশুদ্ধ ২৫–৪৫ দিন 🟣 Self-Purified গুনাহমুক্তির পথে কঠোর চেষ্টা ৪৫–৯০ দিন 🟤 God-Fearing আল্লাহভীতি অন্তরে ধারণ ৯০–১৫০ দিন ⚪ The Truthful একনিষ্ঠভাবে চলার প্রতিশ্রুতি ১৫০–২২০ দিন 💠 On the Path of Guidance হিদায়াতের পথে অগ্রগতি ২২০–৩৬৫ দিন 🔷 Connected to the Creator গভীর আত্মিক সম্পর্ক ৩৬৫+ দিন 💖 Beloved of the Merciful আল্লাহর রহমতের প্রিয় --- 🛠️ Technical Suggestions: Platform: Android (Kotlin/Flutter), iOS (SwiftUI/Flutter) Local database: SQLite or Room (to save streaks and history) 2D animation: Use Rive or Lottie for smooth animated character Backend (optional): Firebase for user login and cloud history sync Push notifications: For motivation, Hadiths, reminders --- 🧑‍💻 Developer Info: App Name: Track Addiction Developed by: Yeasin Editz Language: Bengali (বাংলা) Audience: Young Muslims struggling with digital addiction Tone: Friendly, motivational, and Islamic --- 📌 Notes: Add a reset button in case the user relapses. Include motivational quotes or Ayat/Hadith after every rank-up. Add optional login system for saving progress online (Firebase/Google login). - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +316 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tracker
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tracker
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,316 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Track Addiction | Yeasin Editz</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tiro Bangla', serif;
14
+ background-color: #f5f7fa;
15
+ color: #333;
16
+ }
17
+
18
+ .character {
19
+ transition: transform 0.5s ease;
20
+ }
21
+
22
+ .running {
23
+ animation: run 0.5s steps(4) infinite;
24
+ }
25
+
26
+ @keyframes run {
27
+ 0% { transform: translateX(0); }
28
+ 100% { transform: translateX(-100%); }
29
+ }
30
+
31
+ .progress-ring__circle {
32
+ transition: stroke-dashoffset 0.35s;
33
+ transform: rotate(-90deg);
34
+ transform-origin: 50% 50%;
35
+ }
36
+
37
+ .sidebar {
38
+ transform: translateX(-100%);
39
+ transition: transform 0.3s ease-out;
40
+ }
41
+
42
+ .sidebar.open {
43
+ transform: translateX(0);
44
+ }
45
+
46
+ .overlay {
47
+ display: none;
48
+ opacity: 0;
49
+ transition: opacity 0.3s ease;
50
+ }
51
+
52
+ .overlay.open {
53
+ display: block;
54
+ opacity: 1;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="min-h-screen relative overflow-x-hidden">
59
+ <!-- Main App Container -->
60
+ <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden relative">
61
+ <!-- Header -->
62
+ <header class="bg-indigo-600 text-white p-4 flex justify-between items-center">
63
+ <h1 class="text-xl font-bold">Track Addiction</h1>
64
+ <button id="menuBtn" class="text-white focus:outline-none">
65
+ <i class="fas fa-bars text-xl"></i>
66
+ </button>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <main class="p-4">
71
+ <!-- Welcome Screen -->
72
+ <div id="welcomeScreen" class="text-center mt-8">
73
+ <h2 class="text-2xl font-bold text-indigo-700 mb-4">আপনার আসক্তি মুক্তির যাত্রা শুরু করুন</h2>
74
+ <p class="text-gray-600 mb-8">এই অ্যাপটি আপনাকে পর্নোগ্রাফি থেকে মুক্ত থাকতে সাহায্য করবে</p>
75
+
76
+ <div class="relative w-64 h-64 mx-auto mb-8">
77
+ <svg class="progress-ring w-full h-full" viewBox="0 0 100 100">
78
+ <circle class="progress-ring__circle" stroke="#e0e0e0" stroke-width="8" fill="transparent" r="40" cx="50" cy="50"/>
79
+ <circle class="progress-ring__circle" stroke="#4f46e5" stroke-width="8" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="251.2"/>
80
+ </svg>
81
+ <div class="absolute inset-0 flex items-center justify-center">
82
+ <div class="character w-16 h-16 bg-center bg-no-repeat" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"40\" r=\"20\" fill=\"%234f46e5\"/><circle cx=\"40\" cy=\"35\" r=\"3\" fill=\"white\"/><circle cx=\"60\" cy=\"35\" r=\"3\" fill=\"white\"/><path d=\"M40 50 Q50 60 60 50\" stroke=\"white\" stroke-width=\"2\" fill=\"none\"/><rect x=\"35\" y=\"60\" width=\"30\" height=\"20\" rx=\"5\" fill=\"%234f46e5\"/><rect x=\"30\" y=\"80\" width=\"10\" height=\"20\" rx=\"5\" fill=\"%234f46e5\"/><rect x=\"60\" y=\"80\" width=\"10\" height=\"20\" rx=\"5\" fill=\"%234f46e5\"/></svg>')"></div>
83
+ </div>
84
+ </div>
85
+
86
+ <div id="timer" class="text-3xl font-mono mb-8 hidden">00:00:00</div>
87
+
88
+ <button id="startBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
89
+ শুরু করুন
90
+ </button>
91
+ </div>
92
+
93
+ <!-- Stats Section (hidden initially) -->
94
+ <div id="statsSection" class="hidden">
95
+ <div class="bg-indigo-50 rounded-lg p-4 mb-6">
96
+ <h3 class="text-lg font-semibold text-indigo-800 mb-2">বর্তমান অবস্থা</h3>
97
+ <div class="flex justify-between items-center">
98
+ <div>
99
+ <p class="text-sm text-gray-600">বর্তমান স্ট্রিক</p>
100
+ <p class="text-2xl font-bold">0 দিন</p>
101
+ </div>
102
+ <div>
103
+ <p class="text-sm text-gray-600">সর্বোচ্চ স্ট্রিক</p>
104
+ <p class="text-2xl font-bold">0 দিন</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
110
+ <h3 class="text-lg font-semibold mb-3">আপনার র‍্যাঙ্ক</h3>
111
+ <div class="flex items-center mb-3">
112
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3">
113
+ <span class="text-2xl">🟢</span>
114
+ </div>
115
+ <div>
116
+ <h4 class="font-medium">Novice</h4>
117
+ <p class="text-sm text-gray-600">সদ্য শুরু করা সাহসীদের জন্য</p>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
122
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 10%"></div>
123
+ </div>
124
+ <p class="text-xs text-right mt-1 text-gray-500">পরবর্তী স্তরে: 2 দিন বাকি</p>
125
+ </div>
126
+
127
+ <div class="grid grid-cols-2 gap-4 mb-6">
128
+ <button class="bg-red-100 hover:bg-red-200 text-red-800 py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
129
+ <i class="fas fa-redo mr-2"></i> রিসেট
130
+ </button>
131
+ <button class="bg-green-100 hover:bg-green-200 text-green-800 py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
132
+ <i class="fas fa-history mr-2"></i> ইতিহাস
133
+ </button>
134
+ </div>
135
+
136
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
137
+ <h3 class="text-lg font-semibold mb-3">আজকের ইসলামিক উক্তি</h3>
138
+ <div class="bg-indigo-50 p-3 rounded-lg">
139
+ <p class="italic">"যে ব্যক্তি আমার জন্য একটি কামনা ত্যাগ করবে, আমি তাকে তার চেয়ে উত্তম বিনিময় দেব।"</p>
140
+ <p class="text-right text-sm mt-2 text-indigo-700">- হাদিস</p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </main>
145
+
146
+ <!-- Sidebar Menu -->
147
+ <div id="sidebar" class="sidebar fixed top-0 left-0 w-64 h-full bg-white shadow-lg z-50">
148
+ <div class="p-4 bg-indigo-600 text-white flex justify-between items-center">
149
+ <h2 class="text-xl font-bold">মেনু</h2>
150
+ <button id="closeMenuBtn" class="text-white focus:outline-none">
151
+ <i class="fas fa-times text-xl"></i>
152
+ </button>
153
+ </div>
154
+
155
+ <div class="overflow-y-auto h-full pb-20">
156
+ <ul class="py-2">
157
+ <li>
158
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
159
+ <i class="fas fa-book mr-3 text-indigo-600"></i>
160
+ <span>পর্ণ কি এবং কেন?</span>
161
+ </a>
162
+ </li>
163
+ <li>
164
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
165
+ <i class="fas fa-brain mr-3 text-indigo-600"></i>
166
+ <span>আসক্তি কি এবং কেনো?</span>
167
+ </a>
168
+ </li>
169
+ <li>
170
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
171
+ <i class="fas fa-hand-paper mr-3 text-indigo-600"></i>
172
+ <span>ফিরে আসার উপায়</span>
173
+ </a>
174
+ </li>
175
+ <li>
176
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
177
+ <i class="fas fa-mosque mr-3 text-indigo-600"></i>
178
+ <span>পাপ থেকে বিরত থাকার উপায়</span>
179
+ </a>
180
+ </li>
181
+ <li>
182
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
183
+ <i class="fas fa-quran mr-3 text-indigo-600"></i>
184
+ <span>ইসলামিক বই</span>
185
+ </a>
186
+ </li>
187
+ <li>
188
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
189
+ <i class="fas fa-question-circle mr-3 text-indigo-600"></i>
190
+ <span>ইসলামিক কুইজ</span>
191
+ </a>
192
+ </li>
193
+ <li>
194
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
195
+ <i class="fas fa-chart-line mr-3 text-indigo-600"></i>
196
+ <span>ইতিহাস</span>
197
+ </a>
198
+ </li>
199
+ <li>
200
+ <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-indigo-50">
201
+ <i class="fas fa-trophy mr-3 text-indigo-600"></i>
202
+ <span>র‍্যাঙ্কিং সিস্টেম</span>
203
+ </a>
204
+ </li>
205
+ </ul>
206
+
207
+ <div class="px-4 py-6 border-t border-gray-200">
208
+ <div class="text-center text-sm text-gray-500">
209
+ <p>Developed by</p>
210
+ <p class="font-bold text-indigo-600 mt-1">Yeasin Editz</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Overlay -->
217
+ <div id="overlay" class="overlay fixed inset-0 bg-black bg-opacity-50 z-40"></div>
218
+ </div>
219
+
220
+ <script>
221
+ // DOM Elements
222
+ const menuBtn = document.getElementById('menuBtn');
223
+ const closeMenuBtn = document.getElementById('closeMenuBtn');
224
+ const sidebar = document.getElementById('sidebar');
225
+ const overlay = document.getElementById('overlay');
226
+ const startBtn = document.getElementById('startBtn');
227
+ const timer = document.getElementById('timer');
228
+ const welcomeScreen = document.getElementById('welcomeScreen');
229
+ const statsSection = document.getElementById('statsSection');
230
+ const character = document.querySelector('.character');
231
+ const progressCircle = document.querySelector('.progress-ring__circle');
232
+
233
+ // State
234
+ let seconds = 0;
235
+ let timerInterval;
236
+ let isRunning = false;
237
+
238
+ // Menu Toggle
239
+ menuBtn.addEventListener('click', () => {
240
+ sidebar.classList.add('open');
241
+ overlay.classList.add('open');
242
+ });
243
+
244
+ closeMenuBtn.addEventListener('click', () => {
245
+ sidebar.classList.remove('open');
246
+ overlay.classList.remove('open');
247
+ });
248
+
249
+ overlay.addEventListener('click', () => {
250
+ sidebar.classList.remove('open');
251
+ overlay.classList.remove('open');
252
+ });
253
+
254
+ // Start Timer
255
+ startBtn.addEventListener('click', () => {
256
+ if (!isRunning) {
257
+ isRunning = true;
258
+ startBtn.textContent = 'চলছে...';
259
+ startBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
260
+ startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
261
+
262
+ timer.classList.remove('hidden');
263
+ welcomeScreen.classList.add('hidden');
264
+ statsSection.classList.remove('hidden');
265
+
266
+ character.classList.add('running');
267
+
268
+ // Start timer
269
+ timerInterval = setInterval(() => {
270
+ seconds++;
271
+ updateTimerDisplay();
272
+ updateCharacterSpeed();
273
+ updateProgressCircle();
274
+ }, 1000);
275
+ }
276
+ });
277
+
278
+ // Update Timer Display
279
+ function updateTimerDisplay() {
280
+ const hours = Math.floor(seconds / 3600);
281
+ const minutes = Math.floor((seconds % 3600) / 60);
282
+ const secs = seconds % 60;
283
+
284
+ timer.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
285
+ }
286
+
287
+ // Update Character Speed
288
+ function updateCharacterSpeed() {
289
+ const speed = Math.min(1 + (seconds / 3600), 3); // Cap at 3x speed
290
+ character.style.animationDuration = `${0.5 / speed}s`;
291
+ }
292
+
293
+ // Update Progress Circle
294
+ function updateProgressCircle() {
295
+ const circumference = 251.2;
296
+ const days = Math.floor(seconds / 86400);
297
+ const progress = days % 100 / 100; // Cycle every 100 days for demo
298
+ const offset = circumference - (progress * circumference);
299
+ progressCircle.style.strokeDashoffset = offset;
300
+ }
301
+
302
+ // Initialize
303
+ updateTimerDisplay();
304
+
305
+ // Demo: Simulate some progress after 3 seconds
306
+ setTimeout(() => {
307
+ if (!isRunning) {
308
+ seconds = 86400 * 2 + 3600 * 5; // 2 days 5 hours for demo
309
+ updateTimerDisplay();
310
+ updateCharacterSpeed();
311
+ updateProgressCircle();
312
+ }
313
+ }, 3000);
314
+ </script>
315
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ymd78329/tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
316
+ </html>