Hugging Face's logo

Spaces:
MGZON
/
server
Running

App Files Community
ibrahimlasfar commited on
Commit
fbf7bdc
·
1 Parent(s): 66e9737

Redesign privacy and terms pages with modern UI

Browse files
Files changed (2) hide show
  1. views/privacy.ejs +122 -31
  2. views/terms.ejs +114 -28
views/privacy.ejs CHANGED
@@ -1,5 +1,6 @@
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, maximum-scale=1.0, user-scalable=yes">
@@ -8,33 +9,102 @@
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
  <link rel="icon" type="image/png" href="/images/logo.png">
10
  <style>
11
- * { margin: 0; padding: 0; box-sizing: border-box; }
 
 
 
 
 
12
  @keyframes fadeInUp {
13
- from { opacity: 0; transform: translateY(30px); }
14
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
15
  }
 
16
  @keyframes float {
17
- 0%, 100% { transform: translateY(0px); }
18
- 50% { transform: translateY(-10px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
- .animate-fadeInUp { animation: fadeInUp 0.6s ease-out; }
21
- .animate-float { animation: float 3s ease-in-out infinite; }
22
- .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
23
- .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
24
- .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
25
- .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
26
- .logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
27
-
 
 
 
 
 
 
 
 
 
28
  @media (max-width: 640px) {
29
- .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
30
- .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
31
- .text-5xl { font-size: 2rem; }
32
- .text-3xl { font-size: 1.5rem; }
33
- .text-xl { font-size: 1rem; }
34
- .h-16 { height: auto; padding: 0.5rem 0; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
  </style>
37
  </head>
 
38
  <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
39
 
40
  <!-- Navigation -->
@@ -83,12 +153,20 @@
83
  </div>
84
  <h2 class="text-2xl font-bold text-gray-800">1. Information We Collect</h2>
85
  </div>
86
- <p class="text-gray-600 leading-relaxed">We collect information you provide directly to us, such as when you create an account, update your profile, or use our API services. This may include:</p>
 
 
87
  <ul class="mt-3 space-y-2">
88
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Name and email address</li>
89
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Profile information (avatar, bio, skills)</li>
90
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Project data you submit</li>
91
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> OAuth credentials from Google, Facebook, GitHub, or MGZon</li>
 
 
 
 
 
 
92
  </ul>
93
  </div>
94
 
@@ -102,10 +180,18 @@
102
  </div>
103
  <p class="text-gray-600 leading-relaxed">We use the information we collect to:</p>
104
  <ul class="mt-3 space-y-2">
105
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Provide, maintain, and improve our API services</li>
106
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Authenticate your identity and manage your account</li>
107
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Respond to your comments and questions</li>
108
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Send you technical notices and support messages</li>
 
 
 
 
 
 
 
 
109
  </ul>
110
  </div>
111
 
@@ -117,7 +203,9 @@
117
  </div>
118
  <h2 class="text-2xl font-bold text-gray-800">3. Data Security</h2>
119
  </div>
120
- <p class="text-gray-600 leading-relaxed">We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. Your data is encrypted and stored securely.</p>
 
 
121
  </div>
122
 
123
  <!-- Section 4 -->
@@ -128,9 +216,11 @@
128
  </div>
129
  <h2 class="text-2xl font-bold text-gray-800">4. Contact Us</h2>
130
  </div>
131
- <p class="text-gray-600 leading-relaxed">If you have any questions about this Privacy Policy, please contact us at:</p>
 
132
  <div class="mt-4 p-4 bg-gray-50 rounded-xl">
133
- <a href="mailto:marklasfar@gmail.com" class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
 
134
  <i class="fas fa-envelope"></i>
135
  marklasfar@gmail.com
136
  </a>
@@ -158,4 +248,5 @@
158
  </div>
159
  </footer>
160
  </body>
 
161
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
 
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10
  <link rel="icon" type="image/png" href="/images/logo.png">
11
  <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
  @keyframes fadeInUp {
19
+ from {
20
+ opacity: 0;
21
+ transform: translateY(30px);
22
+ }
23
+
24
+ to {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
  }
29
+
30
  @keyframes float {
31
+
32
+ 0%,
33
+ 100% {
34
+ transform: translateY(0px);
35
+ }
36
+
37
+ 50% {
38
+ transform: translateY(-10px);
39
+ }
40
+ }
41
+
42
+ .animate-fadeInUp {
43
+ animation: fadeInUp 0.6s ease-out;
44
+ }
45
+
46
+ .animate-float {
47
+ animation: float 3s ease-in-out infinite;
48
+ }
49
+
50
+ .gradient-bg {
51
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
52
+ }
53
+
54
+ .gradient-text {
55
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ background-clip: text;
59
  }
60
+
61
+ .card-hover {
62
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
63
+ }
64
+
65
+ .card-hover:hover {
66
+ transform: translateY(-5px);
67
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
68
+ }
69
+
70
+ .logo-img {
71
+ width: 40px;
72
+ height: 40px;
73
+ object-fit: contain;
74
+ border-radius: 10px;
75
+ }
76
+
77
  @media (max-width: 640px) {
78
+ .py-20 {
79
+ padding-top: 3rem;
80
+ padding-bottom: 3rem;
81
+ }
82
+
83
+ .py-16 {
84
+ padding-top: 2rem;
85
+ padding-bottom: 2rem;
86
+ }
87
+
88
+ .text-5xl {
89
+ font-size: 2rem;
90
+ }
91
+
92
+ .text-3xl {
93
+ font-size: 1.5rem;
94
+ }
95
+
96
+ .text-xl {
97
+ font-size: 1rem;
98
+ }
99
+
100
+ .h-16 {
101
+ height: auto;
102
+ padding: 0.5rem 0;
103
+ }
104
  }
105
  </style>
106
  </head>
107
+
108
  <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
109
 
110
  <!-- Navigation -->
 
153
  </div>
154
  <h2 class="text-2xl font-bold text-gray-800">1. Information We Collect</h2>
155
  </div>
156
+ <p class="text-gray-600 leading-relaxed">We collect information you provide directly to us, such
157
+ as when you create an account, update your profile, or use our API services. This may
158
+ include:</p>
159
  <ul class="mt-3 space-y-2">
160
+ <li class="flex items-center gap-2 text-gray-600"><i
161
+ class="fas fa-check-circle text-green-500 text-sm"></i> Name and email address</li>
162
+ <li class="flex items-center gap-2 text-gray-600"><i
163
+ class="fas fa-check-circle text-green-500 text-sm"></i> Profile information (avatar,
164
+ bio, skills)</li>
165
+ <li class="flex items-center gap-2 text-gray-600"><i
166
+ class="fas fa-check-circle text-green-500 text-sm"></i> Project data you submit</li>
167
+ <li class="flex items-center gap-2 text-gray-600"><i
168
+ class="fas fa-check-circle text-green-500 text-sm"></i> OAuth credentials from
169
+ Google, Facebook, GitHub, or MGZon</li>
170
  </ul>
171
  </div>
172
 
 
180
  </div>
181
  <p class="text-gray-600 leading-relaxed">We use the information we collect to:</p>
182
  <ul class="mt-3 space-y-2">
183
+ <li class="flex items-center gap-2 text-gray-600"><i
184
+ class="fas fa-check-circle text-green-500 text-sm"></i> Provide, maintain, and
185
+ improve our API services</li>
186
+ <li class="flex items-center gap-2 text-gray-600"><i
187
+ class="fas fa-check-circle text-green-500 text-sm"></i> Authenticate your identity
188
+ and manage your account</li>
189
+ <li class="flex items-center gap-2 text-gray-600"><i
190
+ class="fas fa-check-circle text-green-500 text-sm"></i> Respond to your comments and
191
+ questions</li>
192
+ <li class="flex items-center gap-2 text-gray-600"><i
193
+ class="fas fa-check-circle text-green-500 text-sm"></i> Send you technical notices
194
+ and support messages</li>
195
  </ul>
196
  </div>
197
 
 
203
  </div>
204
  <h2 class="text-2xl font-bold text-gray-800">3. Data Security</h2>
205
  </div>
206
+ <p class="text-gray-600 leading-relaxed">We implement appropriate technical and organizational
207
+ measures to protect your personal information against unauthorized access, alteration,
208
+ disclosure, or destruction. Your data is encrypted and stored securely.</p>
209
  </div>
210
 
211
  <!-- Section 4 -->
 
216
  </div>
217
  <h2 class="text-2xl font-bold text-gray-800">4. Contact Us</h2>
218
  </div>
219
+ <p class="text-gray-600 leading-relaxed">If you have any questions about this Privacy Policy,
220
+ please contact us at:</p>
221
  <div class="mt-4 p-4 bg-gray-50 rounded-xl">
222
+ <a href="mailto:marklasfar@gmail.com"
223
+ class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
224
  <i class="fas fa-envelope"></i>
225
  marklasfar@gmail.com
226
  </a>
 
248
  </div>
249
  </footer>
250
  </body>
251
+
252
  </html>
views/terms.ejs CHANGED
@@ -1,5 +1,6 @@
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, maximum-scale=1.0, user-scalable=yes">
@@ -8,33 +9,102 @@
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
  <link rel="icon" type="image/png" href="/images/logo.png">
10
  <style>
11
- * { margin: 0; padding: 0; box-sizing: border-box; }
 
 
 
 
 
12
  @keyframes fadeInUp {
13
- from { opacity: 0; transform: translateY(30px); }
14
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
15
  }
 
16
  @keyframes float {
17
- 0%, 100% { transform: translateY(0px); }
18
- 50% { transform: translateY(-10px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
- .animate-fadeInUp { animation: fadeInUp 0.6s ease-out; }
21
- .animate-float { animation: float 3s ease-in-out infinite; }
22
- .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
23
- .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
24
- .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
25
- .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
26
- .logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
27
-
 
 
 
 
 
 
 
 
 
28
  @media (max-width: 640px) {
29
- .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
30
- .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
31
- .text-5xl { font-size: 2rem; }
32
- .text-3xl { font-size: 1.5rem; }
33
- .text-xl { font-size: 1rem; }
34
- .h-16 { height: auto; padding: 0.5rem 0; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
  </style>
37
  </head>
 
38
  <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
39
 
40
  <!-- Navigation -->
@@ -83,7 +153,9 @@
83
  </div>
84
  <h2 class="text-2xl font-bold text-gray-800">1. Acceptance of Terms</h2>
85
  </div>
86
- <p class="text-gray-600 leading-relaxed">By accessing or using the Portfolio API, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.</p>
 
 
87
  </div>
88
 
89
  <!-- Section 2 -->
@@ -94,11 +166,18 @@
94
  </div>
95
  <h2 class="text-2xl font-bold text-gray-800">2. API Usage</h2>
96
  </div>
97
- <p class="text-gray-600 leading-relaxed">You agree to use the API only for lawful purposes and in accordance with these terms. You are responsible for:</p>
 
98
  <ul class="mt-3 space-y-2">
99
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Maintaining the security of your account credentials</li>
100
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> All activities that occur under your account</li>
101
- <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Complying with all applicable laws and regulations</li>
 
 
 
 
 
 
102
  </ul>
103
  </div>
104
 
@@ -110,7 +189,9 @@
110
  </div>
111
  <h2 class="text-2xl font-bold text-gray-800">3. Rate Limits</h2>
112
  </div>
113
- <p class="text-gray-600 leading-relaxed">The API is subject to rate limits to ensure fair usage. Excessive usage may result in temporary suspension of access. We reserve the right to modify rate limits at any time.</p>
 
 
114
  </div>
115
 
116
  <!-- Section 4 -->
@@ -121,7 +202,9 @@
121
  </div>
122
  <h2 class="text-2xl font-bold text-gray-800">4. Changes to Terms</h2>
123
  </div>
124
- <p class="text-gray-600 leading-relaxed">We reserve the right to modify these terms at any time. We will notify users of any material changes via email or through the API documentation. Your continued use of the service constitutes acceptance of the modified terms.</p>
 
 
125
  </div>
126
 
127
  <!-- Section 5 -->
@@ -132,9 +215,11 @@
132
  </div>
133
  <h2 class="text-2xl font-bold text-gray-800">5. Contact</h2>
134
  </div>
135
- <p class="text-gray-600 leading-relaxed">Questions about the Terms of Service should be sent to:</p>
 
136
  <div class="mt-4 p-4 bg-gray-50 rounded-xl">
137
- <a href="mailto:marklasfar@gmail.com" class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
 
138
  <i class="fas fa-envelope"></i>
139
  marklasfar@gmail.com
140
  </a>
@@ -162,4 +247,5 @@
162
  </div>
163
  </footer>
164
  </body>
 
165
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
 
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10
  <link rel="icon" type="image/png" href="/images/logo.png">
11
  <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
  @keyframes fadeInUp {
19
+ from {
20
+ opacity: 0;
21
+ transform: translateY(30px);
22
+ }
23
+
24
+ to {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
  }
29
+
30
  @keyframes float {
31
+
32
+ 0%,
33
+ 100% {
34
+ transform: translateY(0px);
35
+ }
36
+
37
+ 50% {
38
+ transform: translateY(-10px);
39
+ }
40
+ }
41
+
42
+ .animate-fadeInUp {
43
+ animation: fadeInUp 0.6s ease-out;
44
+ }
45
+
46
+ .animate-float {
47
+ animation: float 3s ease-in-out infinite;
48
+ }
49
+
50
+ .gradient-bg {
51
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
52
+ }
53
+
54
+ .gradient-text {
55
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ background-clip: text;
59
  }
60
+
61
+ .card-hover {
62
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
63
+ }
64
+
65
+ .card-hover:hover {
66
+ transform: translateY(-5px);
67
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
68
+ }
69
+
70
+ .logo-img {
71
+ width: 40px;
72
+ height: 40px;
73
+ object-fit: contain;
74
+ border-radius: 10px;
75
+ }
76
+
77
  @media (max-width: 640px) {
78
+ .py-20 {
79
+ padding-top: 3rem;
80
+ padding-bottom: 3rem;
81
+ }
82
+
83
+ .py-16 {
84
+ padding-top: 2rem;
85
+ padding-bottom: 2rem;
86
+ }
87
+
88
+ .text-5xl {
89
+ font-size: 2rem;
90
+ }
91
+
92
+ .text-3xl {
93
+ font-size: 1.5rem;
94
+ }
95
+
96
+ .text-xl {
97
+ font-size: 1rem;
98
+ }
99
+
100
+ .h-16 {
101
+ height: auto;
102
+ padding: 0.5rem 0;
103
+ }
104
  }
105
  </style>
106
  </head>
107
+
108
  <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
109
 
110
  <!-- Navigation -->
 
153
  </div>
154
  <h2 class="text-2xl font-bold text-gray-800">1. Acceptance of Terms</h2>
155
  </div>
156
+ <p class="text-gray-600 leading-relaxed">By accessing or using the Portfolio API, you agree to
157
+ be bound by these Terms of Service. If you disagree with any part of the terms, you may not
158
+ access the service.</p>
159
  </div>
160
 
161
  <!-- Section 2 -->
 
166
  </div>
167
  <h2 class="text-2xl font-bold text-gray-800">2. API Usage</h2>
168
  </div>
169
+ <p class="text-gray-600 leading-relaxed">You agree to use the API only for lawful purposes and
170
+ in accordance with these terms. You are responsible for:</p>
171
  <ul class="mt-3 space-y-2">
172
+ <li class="flex items-center gap-2 text-gray-600"><i
173
+ class="fas fa-check-circle text-green-500 text-sm"></i> Maintaining the security of
174
+ your account credentials</li>
175
+ <li class="flex items-center gap-2 text-gray-600"><i
176
+ class="fas fa-check-circle text-green-500 text-sm"></i> All activities that occur
177
+ under your account</li>
178
+ <li class="flex items-center gap-2 text-gray-600"><i
179
+ class="fas fa-check-circle text-green-500 text-sm"></i> Complying with all
180
+ applicable laws and regulations</li>
181
  </ul>
182
  </div>
183
 
 
189
  </div>
190
  <h2 class="text-2xl font-bold text-gray-800">3. Rate Limits</h2>
191
  </div>
192
+ <p class="text-gray-600 leading-relaxed">The API is subject to rate limits to ensure fair usage.
193
+ Excessive usage may result in temporary suspension of access. We reserve the right to modify
194
+ rate limits at any time.</p>
195
  </div>
196
 
197
  <!-- Section 4 -->
 
202
  </div>
203
  <h2 class="text-2xl font-bold text-gray-800">4. Changes to Terms</h2>
204
  </div>
205
+ <p class="text-gray-600 leading-relaxed">We reserve the right to modify these terms at any time.
206
+ We will notify users of any material changes via email or through the API documentation.
207
+ Your continued use of the service constitutes acceptance of the modified terms.</p>
208
  </div>
209
 
210
  <!-- Section 5 -->
 
215
  </div>
216
  <h2 class="text-2xl font-bold text-gray-800">5. Contact</h2>
217
  </div>
218
+ <p class="text-gray-600 leading-relaxed">Questions about the Terms of Service should be sent to:
219
+ </p>
220
  <div class="mt-4 p-4 bg-gray-50 rounded-xl">
221
+ <a href="mailto:marklasfar@gmail.com"
222
+ class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
223
  <i class="fas fa-envelope"></i>
224
  marklasfar@gmail.com
225
  </a>
 
247
  </div>
248
  </footer>
249
  </body>
250
+
251
  </html>