Hugging Face's logo

Spaces:
metavalent
/
DigitalDaysOff
Running

App Files Community
metavalent commited on
Commit
ffd423b
·
verified ·
1 Parent(s): cf00b15

v.0

Browse files
Files changed (1) hide show
  1. index.html +185 -16
index.html CHANGED
@@ -1,16 +1,185 @@
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>Digital Days Off</h1>
12
- <p>An app to encourage and motivate people to take "Digital Days Off." Incentivizes for entire days off with no internet use. Rewards with enthusiastic encouragment for days of minimal use due to work, school, or other demands.</p>
13
- <!-- You can modify this app directly by editing <i>index.html</i> in the Files and versions tab. -->
14
- </div>
15
- </body>
16
- </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>Digital Days Off</title>
7
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
13
+ }
14
+
15
+ body {
16
+ background: linear-gradient(135deg, #83a4d4, #b6fbff);
17
+ min-height: 100vh;
18
+ padding: 20px;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ }
23
+
24
+ .container {
25
+ max-width: 600px;
26
+ width: 100%;
27
+ text-align: center;
28
+ }
29
+
30
+ h1 {
31
+ color: #2d3436;
32
+ margin: 30px 0;
33
+ font-size: 2.5rem;
34
+ }
35
+
36
+ .motivation-text {
37
+ background: rgba(255, 255, 255, 0.9);
38
+ padding: 25px;
39
+ border-radius: 15px;
40
+ margin-bottom: 30px;
41
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
42
+ }
43
+
44
+ p {
45
+ font-size: 1.1rem;
46
+ line-height: 1.6;
47
+ margin-bottom: 15px;
48
+ color: #2d3436;
49
+ }
50
+
51
+ .tracker-container {
52
+ display: grid;
53
+ grid-template-columns: 1fr 1fr;
54
+ gap: 20px;
55
+ margin: 30px 0;
56
+ }
57
+
58
+ .tracker-box {
59
+ background: white;
60
+ padding: 25px;
61
+ border-radius: 15px;
62
+ box-shadow: 0 4px 6px rgba(0, 0, 255, 0.1);
63
+ }
64
+
65
+ .count {
66
+ font-size: 3rem;
67
+ font-weight: bold;
68
+ color: #0984e3;
69
+ margin: 10px 0;
70
+ }
71
+
72
+ button {
73
+ background: #00b894;
74
+ color: white;
75
+ border: none;
76
+ padding: 15px 30px;
77
+ border-radius: 25px;
78
+ font-size: 1.1rem;
79
+ margin: 10px;
80
+ cursor: pointer;
81
+ transition: transform 0.2s;
82
+ }
83
+
84
+ button:hover {
85
+ transform: scale(1.05);
86
+ }
87
+
88
+ #message {
89
+ margin-top: 20px;
90
+ font-weight: bold;
91
+ color: #d63031;
92
+ min-height: 24px;
93
+ }
94
+
95
+ .quote {
96
+ margin-top: 30px;
97
+ font-style: italic;
98
+ color: #636e72;
99
+ }
100
+ </style>
101
+ </head>
102
+ <body>
103
+ <div class="container">
104
+ <h1>🌱 Digital Days Off</h1>
105
+
106
+ <div class="motivation-text">
107
+ <p>Research PROVES the power of small, simple habits and how tiny changes can lead to significant improvements over time.</p>
108
+ <p>Do what you can, as you can, and watch the results speak for themselves.</p>
109
+ <p>You will feel AMAZING.</p>
110
+ <p>You got this!</p>
111
+ </div>
112
+
113
+ <div class="tracker-container">
114
+ <div class="tracker-box">
115
+ <h2>Full Days Off</h2>
116
+ <div class="count" id="fullDays">0</div>
117
+ <button onclick="logDay(true)">I DID IT! 🎉</button>
118
+ </div>
119
+ <div class="tracker-box">
120
+ <h2>Minimal Use Days</h2>
121
+ <div class="count" id="minDays">0</div>
122
+ <button onclick="logDay(false)">I MANAGED IT! ✨</button>
123
+ </div>
124
+ </div>
125
+
126
+ <div id="message"></div>
127
+
128
+ <div class="quote" id="dailyQuote"></div>
129
+ </div>
130
+
131
+ <script>
132
+ let fullDays = localStorage.getItem('fullDays') || 0;
133
+ let minDays = localStorage.getItem('minDays') || 0;
134
+ const messages = {
135
+ full: [
136
+ "INCREDIBLE! You're crushing it! 🌟",
137
+ "WHO'S AMAZING? YOU ARE! 💪",
138
+ "DAY MASTER! Keep it up! 🚀",
139
+ "SUPERHERO STATUS ACHIEVED! 🦸"
140
+ ],
141
+ min: [
142
+ "PROUD OF YOU! Every bit counts! 🌱",
143
+ "GREAT BALANCE! You're learning! ⚖️",
144
+ "NICE WORK! Progress over perfection! 🌈",
145
+ "WAY TO ADULT RESPONSIBLY! 👏"
146
+ ]
147
+ };
148
+ const quotes = [
149
+ "Small steps lead to big changes",
150
+ "Consistency is the key to mastery",
151
+ "Your future self will thank you",
152
+ "Progress, not perfection"
153
+ ];
154
+
155
+ function updateDisplay() {
156
+ document.getElementById('fullDays').textContent = fullDays;
157
+ document.getElementById('minDays').textContent = minDays;
158
+ }
159
+
160
+ function showMessage(type) {
161
+ const msgArray = messages[type];
162
+ const randomMsg = msgArray[Math.floor(Math.random() * msgArray.length)];
163
+ const messageEl = document.getElementById('message');
164
+ messageEl.textContent = randomMsg;
165
+ setTimeout(() => messageEl.textContent = '', 3000);
166
+ }
167
+
168
+ function logDay(isFullDay) {
169
+ if(isFullDay) {
170
+ fullDays++;
171
+ localStorage.setItem('fullDays', fullDays);
172
+ } else {
173
+ minDays++;
174
+ localStorage.setItem('minDays', minDays);
175
+ }
176
+ updateDisplay();
177
+ showMessage(isFullDay ? 'full' : 'min');
178
+ }
179
+
180
+ // Initial setup
181
+ updateDisplay();
182
+ document.getElementById('dailyQuote').textContent = quotes[Math.floor(Math.random() * quotes.length)];
183
+ </script>
184
+ </body>
185
+ </html>