Hugging Face's logo

Spaces:
tools4ds
/
ai_tutor
Sleeping

App Files Community
Farid Karimli commited on
Commit
73aee40
·
1 Parent(s): 46d67ef

Logo link fix

Browse files
Files changed (4) hide show
  1. apps/ai_tutor/templates/cooldown.html +187 -171
  2. apps/ai_tutor/templates/dashboard.html +131 -121
  3. apps/ai_tutor/templates/login.html +132 -113
  4. apps/ai_tutor/templates/unauthorized.html +1 -1
apps/ai_tutor/templates/cooldown.html CHANGED
@@ -1,181 +1,197 @@
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>Cooldown Period | Terrier Tutor</title>
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
9
-
10
- body, html {
11
- margin: 0;
12
- padding: 0;
13
- font-family: 'Inter', sans-serif;
14
- background-color: #f7f7f7;
15
- background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
16
- background-repeat: repeat;
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- height: 100vh;
21
- color: #333;
22
- }
23
-
24
- .container {
25
- background: rgba(255, 255, 255, 0.9);
26
- border: 1px solid #ddd;
27
- border-radius: 8px;
28
- width: 100%;
29
- max-width: 400px;
30
- padding: 50px;
31
- box-sizing: border-box;
32
- text-align: center;
33
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
34
- backdrop-filter: blur(10px);
35
- -webkit-backdrop-filter: blur(10px);
36
- }
37
-
38
- .avatar {
39
- width: 90px;
40
- height: 90px;
41
- border-radius: 50%;
42
- margin-bottom: 25px;
43
- border: 2px solid #ddd;
44
- }
45
-
46
- .container h1 {
47
- margin-bottom: 15px;
48
- font-size: 24px;
49
- font-weight: 600;
50
- color: #1a1a1a;
51
- }
52
-
53
- .container p {
54
- font-size: 16px;
55
- color: #4a4a4a;
56
- margin-bottom: 30px;
57
- line-height: 1.5;
58
- }
59
-
60
- .cooldown-message {
61
- font-size: 16px;
62
- color: #333;
63
- margin-bottom: 30px;
64
- }
65
-
66
- .tokens-left {
67
- font-size: 14px;
68
- color: #333;
69
- margin-bottom: 30px;
70
- font-weight: 600;
71
- }
72
-
73
- .button {
74
- padding: 12px 0;
75
- margin: 12px 0;
76
- font-size: 14px;
77
- border-radius: 6px;
78
- cursor: pointer;
79
- width: 100%;
80
- border: 1px solid #4285F4;
81
- background-color: #fff;
82
- color: #4285F4;
83
- transition: background-color 0.3s ease, border-color 0.3s ease;
84
- display: none;
85
- }
86
-
87
- .button.start-tutor {
88
- display: none;
89
- }
90
-
91
- .button:hover {
92
- background-color: #e0e0e0;
93
- border-color: #357ae8;
94
- }
95
-
96
- .sign-out-button {
97
- border: 1px solid #FF4C4C;
98
- background-color: #fff;
99
- color: #FF4C4C;
100
- display: block;
101
- }
102
-
103
- .sign-out-button:hover {
104
- background-color: #ffe6e6;
105
- border-color: #e04343;
106
- color: #e04343;
107
- }
108
-
109
- #countdown {
110
- font-size: 14px;
111
- color: #555;
112
- margin-bottom: 20px;
113
- }
114
-
115
- .footer {
116
- font-size: 12px;
117
- color: #777;
118
- margin-top: 20px;
119
- }
 
120
  </style>
121
- </head>
122
- <body>
123
  <div class="container">
124
- <img src="/public/assets/images/avatars/ai-tutor.png" alt="AI Tutor Avatar" class="avatar">
125
- <h1>Hello, {{ username }}</h1>
126
- <p>It seems like you need to wait a bit before starting a new session.</p>
127
- <p class="cooldown-message">Time remaining until the cooldown period ends:</p>
128
- <p id="countdown"></p>
129
- <p class="tokens-left">Tokens Left: <span id="tokensLeft">{{ tokens_left }}</span></p>
130
- <button id="startTutorBtn" class="button start-tutor" onclick="startTutor()">Start AI Tutor</button>
131
- <form action="/logout" method="get">
132
- <button type="submit" class="button sign-out-button">Sign Out</button>
133
- </form>
134
- <div class="footer">Reload the page to update token stats</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
  <script>
137
- function startCountdown(endTime) {
138
- const countdownElement = document.getElementById('countdown');
139
- const startTutorBtn = document.getElementById('startTutorBtn');
140
- const endTimeDate = new Date(endTime);
141
-
142
- function updateCountdown() {
143
- const now = new Date();
144
- const timeLeft = endTimeDate.getTime() - now.getTime();
145
-
146
- if (timeLeft <= 0) {
147
- countdownElement.textContent = "Cooldown period has ended.";
148
- startTutorBtn.style.display = "block";
149
- } else {
150
- const hours = Math.floor(timeLeft / 1000 / 60 / 60);
151
- const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
152
- const seconds = Math.floor((timeLeft / 1000) % 60);
153
- countdownElement.textContent = `${hours}h ${minutes}m ${seconds}s`;
154
- }
155
- }
156
-
157
- updateCountdown();
158
- setInterval(updateCountdown, 1000);
159
- }
160
-
161
- function startTutor() {
162
- window.location.href = "/start-tutor";
163
- }
164
-
165
- function updateTokensLeft() {
166
- fetch('/get-tokens-left')
167
- .then(response => response.json())
168
- .then(data => {
169
- document.getElementById('tokensLeft').textContent = data.tokens_left;
170
- })
171
- .catch(error => console.error('Error fetching tokens:', error));
172
- }
173
-
174
- // Start the countdown
175
- startCountdown("{{ cooldown_end_time }}");
176
-
177
- // Update tokens left when the page loads
178
- updateTokensLeft();
 
179
  </script>
180
- </body>
181
  </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>Cooldown Period | Terrier Tutor</title>
7
  <style>
8
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
9
+
10
+ body,
11
+ html {
12
+ margin: 0;
13
+ padding: 0;
14
+ font-family: "Inter", sans-serif;
15
+ background-color: #f7f7f7;
16
+ background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
17
+ background-repeat: repeat;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ height: 100vh;
22
+ color: #333;
23
+ }
24
+
25
+ .container {
26
+ background: rgba(255, 255, 255, 0.9);
27
+ border: 1px solid #ddd;
28
+ border-radius: 8px;
29
+ width: 100%;
30
+ max-width: 400px;
31
+ padding: 50px;
32
+ box-sizing: border-box;
33
+ text-align: center;
34
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
35
+ backdrop-filter: blur(10px);
36
+ -webkit-backdrop-filter: blur(10px);
37
+ }
38
+
39
+ .avatar {
40
+ width: 90px;
41
+ height: 90px;
42
+ border-radius: 50%;
43
+ margin-bottom: 25px;
44
+ border: 2px solid #ddd;
45
+ }
46
+
47
+ .container h1 {
48
+ margin-bottom: 15px;
49
+ font-size: 24px;
50
+ font-weight: 600;
51
+ color: #1a1a1a;
52
+ }
53
+
54
+ .container p {
55
+ font-size: 16px;
56
+ color: #4a4a4a;
57
+ margin-bottom: 30px;
58
+ line-height: 1.5;
59
+ }
60
+
61
+ .cooldown-message {
62
+ font-size: 16px;
63
+ color: #333;
64
+ margin-bottom: 30px;
65
+ }
66
+
67
+ .tokens-left {
68
+ font-size: 14px;
69
+ color: #333;
70
+ margin-bottom: 30px;
71
+ font-weight: 600;
72
+ }
73
+
74
+ .button {
75
+ padding: 12px 0;
76
+ margin: 12px 0;
77
+ font-size: 14px;
78
+ border-radius: 6px;
79
+ cursor: pointer;
80
+ width: 100%;
81
+ border: 1px solid #4285f4;
82
+ background-color: #fff;
83
+ color: #4285f4;
84
+ transition: background-color 0.3s ease, border-color 0.3s ease;
85
+ display: none;
86
+ }
87
+
88
+ .button.start-tutor {
89
+ display: none;
90
+ }
91
+
92
+ .button:hover {
93
+ background-color: #e0e0e0;
94
+ border-color: #357ae8;
95
+ }
96
+
97
+ .sign-out-button {
98
+ border: 1px solid #ff4c4c;
99
+ background-color: #fff;
100
+ color: #ff4c4c;
101
+ display: block;
102
+ }
103
+
104
+ .sign-out-button:hover {
105
+ background-color: #ffe6e6;
106
+ border-color: #e04343;
107
+ color: #e04343;
108
+ }
109
+
110
+ #countdown {
111
+ font-size: 14px;
112
+ color: #555;
113
+ margin-bottom: 20px;
114
+ }
115
+
116
+ .footer {
117
+ font-size: 12px;
118
+ color: #777;
119
+ margin-top: 20px;
120
+ }
121
  </style>
122
+ </head>
123
+ <body>
124
  <div class="container">
125
+ <img
126
+ src="/public/assets/images/avatars/logo.png"
127
+ alt="AI Tutor Avatar"
128
+ class="avatar"
129
+ />
130
+ <h1>Hello, {{ username }}</h1>
131
+ <p>It seems like you need to wait a bit before starting a new session.</p>
132
+ <p class="cooldown-message">
133
+ Time remaining until the cooldown period ends:
134
+ </p>
135
+ <p id="countdown"></p>
136
+ <p class="tokens-left">
137
+ Tokens Left: <span id="tokensLeft">{{ tokens_left }}</span>
138
+ </p>
139
+ <button
140
+ id="startTutorBtn"
141
+ class="button start-tutor"
142
+ onclick="startTutor()"
143
+ >
144
+ Start AI Tutor
145
+ </button>
146
+ <form action="/logout" method="get">
147
+ <button type="submit" class="button sign-out-button">Sign Out</button>
148
+ </form>
149
+ <div class="footer">Reload the page to update token stats</div>
150
  </div>
151
  <script>
152
+ function startCountdown(endTime) {
153
+ const countdownElement = document.getElementById("countdown");
154
+ const startTutorBtn = document.getElementById("startTutorBtn");
155
+ const endTimeDate = new Date(endTime);
156
+
157
+ function updateCountdown() {
158
+ const now = new Date();
159
+ const timeLeft = endTimeDate.getTime() - now.getTime();
160
+
161
+ if (timeLeft <= 0) {
162
+ countdownElement.textContent = "Cooldown period has ended.";
163
+ startTutorBtn.style.display = "block";
164
+ } else {
165
+ const hours = Math.floor(timeLeft / 1000 / 60 / 60);
166
+ const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
167
+ const seconds = Math.floor((timeLeft / 1000) % 60);
168
+ countdownElement.textContent = `${hours}h ${minutes}m ${seconds}s`;
169
+ }
170
+ }
171
+
172
+ updateCountdown();
173
+ setInterval(updateCountdown, 1000);
174
+ }
175
+
176
+ function startTutor() {
177
+ window.location.href = "/start-tutor";
178
+ }
179
+
180
+ function updateTokensLeft() {
181
+ fetch("/get-tokens-left")
182
+ .then((response) => response.json())
183
+ .then((data) => {
184
+ document.getElementById("tokensLeft").textContent =
185
+ data.tokens_left;
186
+ })
187
+ .catch((error) => console.error("Error fetching tokens:", error));
188
+ }
189
+
190
+ // Start the countdown
191
+ startCountdown("{{ cooldown_end_time }}");
192
+
193
+ // Update tokens left when the page loads
194
+ updateTokensLeft();
195
  </script>
196
+ </body>
197
  </html>
apps/ai_tutor/templates/dashboard.html CHANGED
@@ -1,145 +1,155 @@
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>Dashboard | Terrier Tutor</title>
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
9
 
10
- body, html {
11
- margin: 0;
12
- padding: 0;
13
- font-family: 'Inter', sans-serif;
14
- background-color: #f7f7f7; /* Light gray background */
15
- background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* Subtle geometric pattern */
16
- background-repeat: repeat;
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- height: 100vh;
21
- color: #333;
22
- }
 
23
 
24
- .container {
25
- background: rgba(255, 255, 255, 0.9);
26
- border: 1px solid #ddd;
27
- border-radius: 8px;
28
- width: 100%;
29
- max-width: 400px;
30
- padding: 40px;
31
- box-sizing: border-box;
32
- text-align: center;
33
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
34
- backdrop-filter: blur(10px);
35
- -webkit-backdrop-filter: blur(10px);
36
- }
37
 
38
- .avatar {
39
- width: 90px;
40
- height: 90px;
41
- border-radius: 50%;
42
- margin-bottom: 20px;
43
- border: 2px solid #ddd;
44
- }
45
 
46
- .container h1 {
47
- margin-bottom: 20px;
48
- font-size: 26px;
49
- font-weight: 600;
50
- color: #1a1a1a;
51
- }
52
 
53
- .container p {
54
- font-size: 15px;
55
- color: #4a4a4a;
56
- margin-bottom: 25px;
57
- line-height: 1.5;
58
- }
59
 
60
- .tokens-left {
61
- font-size: 17px;
62
- color: #333;
63
- margin-bottom: 10px;
64
- font-weight: 600;
65
- }
66
 
67
- .all-time-tokens {
68
- font-size: 14px; /* Reduced font size */
69
- color: #555;
70
- margin-bottom: 30px;
71
- font-weight: 500;
72
- white-space: nowrap; /* Prevents breaking to a new line */
73
- }
74
 
75
- .button {
76
- padding: 12px 0;
77
- margin: 12px 0;
78
- font-size: 15px;
79
- border-radius: 6px;
80
- cursor: pointer;
81
- width: 100%;
82
- border: 1px solid #4285F4; /* Button border color */
83
- background-color: #fff; /* Button background color */
84
- color: #4285F4; /* Button text color */
85
- transition: background-color 0.3s ease, border-color 0.3s ease;
86
- }
87
 
88
- .button:hover {
89
- background-color: #e0e0e0;
90
- border-color: #357ae8; /* Darker blue for hover */
91
- }
92
 
93
- .start-button {
94
- border: 1px solid #4285F4;
95
- color: #4285F4;
96
- background-color: #fff;
97
- }
98
 
99
- .start-button:hover {
100
- background-color: #e0f0ff; /* Light blue on hover */
101
- border-color: #357ae8; /* Darker blue for hover */
102
- color: #357ae8; /* Blue text on hover */
103
- }
104
 
105
- .sign-out-button {
106
- border: 1px solid #FF4C4C;
107
- background-color: #fff;
108
- color: #FF4C4C;
109
- }
110
 
111
- .sign-out-button:hover {
112
- background-color: #ffe6e6; /* Light red on hover */
113
- border-color: #e04343; /* Darker red for hover */
114
- color: #e04343; /* Red text on hover */
115
- }
116
 
117
- .footer {
118
- font-size: 12px;
119
- color: #777;
120
- margin-top: 25px;
121
- }
122
  </style>
123
- </head>
124
- <body>
125
  <div class="container">
126
- <img src="/public/assets/images/avatars/ai-tutor.png" alt="AI Tutor Avatar" class="avatar">
127
- <h1>Welcome, {{ username }}</h1>
128
- <p>Ready to start your AI tutoring session?</p>
129
- <p class="tokens-left">Tokens Left: {{ tokens_left }}</p>
130
- <p class="all-time-tokens">All-Time Tokens Allocated: {{ all_time_tokens_allocated }} / {{ total_tokens_allocated }}</p>
131
- <form action="/start-tutor" method="post">
132
- <button type="submit" class="button start-button">Start AI Tutor</button>
133
- </form>
134
- <form action="/logout" method="get">
135
- <button type="submit" class="button sign-out-button">Sign Out</button>
136
- </form>
137
- <div class="footer">Reload the page to update token stats</div>
 
 
 
 
 
 
 
 
 
138
  </div>
139
  <script>
140
- let token = "{{ jwt_token }}";
141
- console.log("Token: ", token);
142
- localStorage.setItem('token', token);
143
  </script>
144
- </body>
145
  </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>Dashboard | Terrier Tutor</title>
7
  <style>
8
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
9
 
10
+ body,
11
+ html {
12
+ margin: 0;
13
+ padding: 0;
14
+ font-family: "Inter", sans-serif;
15
+ background-color: #f7f7f7; /* Light gray background */
16
+ background-image: url("https://www.transparenttextures.com/patterns/cubes.png"); /* Subtle geometric pattern */
17
+ background-repeat: repeat;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ height: 100vh;
22
+ color: #333;
23
+ }
24
 
25
+ .container {
26
+ background: rgba(255, 255, 255, 0.9);
27
+ border: 1px solid #ddd;
28
+ border-radius: 8px;
29
+ width: 100%;
30
+ max-width: 400px;
31
+ padding: 40px;
32
+ box-sizing: border-box;
33
+ text-align: center;
34
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
35
+ backdrop-filter: blur(10px);
36
+ -webkit-backdrop-filter: blur(10px);
37
+ }
38
 
39
+ .avatar {
40
+ width: 90px;
41
+ height: 90px;
42
+ border-radius: 50%;
43
+ margin-bottom: 20px;
44
+ border: 2px solid #ddd;
45
+ }
46
 
47
+ .container h1 {
48
+ margin-bottom: 20px;
49
+ font-size: 26px;
50
+ font-weight: 600;
51
+ color: #1a1a1a;
52
+ }
53
 
54
+ .container p {
55
+ font-size: 15px;
56
+ color: #4a4a4a;
57
+ margin-bottom: 25px;
58
+ line-height: 1.5;
59
+ }
60
 
61
+ .tokens-left {
62
+ font-size: 17px;
63
+ color: #333;
64
+ margin-bottom: 10px;
65
+ font-weight: 600;
66
+ }
67
 
68
+ .all-time-tokens {
69
+ font-size: 14px; /* Reduced font size */
70
+ color: #555;
71
+ margin-bottom: 30px;
72
+ font-weight: 500;
73
+ white-space: nowrap; /* Prevents breaking to a new line */
74
+ }
75
 
76
+ .button {
77
+ padding: 12px 0;
78
+ margin: 12px 0;
79
+ font-size: 15px;
80
+ border-radius: 6px;
81
+ cursor: pointer;
82
+ width: 100%;
83
+ border: 1px solid #4285f4; /* Button border color */
84
+ background-color: #fff; /* Button background color */
85
+ color: #4285f4; /* Button text color */
86
+ transition: background-color 0.3s ease, border-color 0.3s ease;
87
+ }
88
 
89
+ .button:hover {
90
+ background-color: #e0e0e0;
91
+ border-color: #357ae8; /* Darker blue for hover */
92
+ }
93
 
94
+ .start-button {
95
+ border: 1px solid #4285f4;
96
+ color: #4285f4;
97
+ background-color: #fff;
98
+ }
99
 
100
+ .start-button:hover {
101
+ background-color: #e0f0ff; /* Light blue on hover */
102
+ border-color: #357ae8; /* Darker blue for hover */
103
+ color: #357ae8; /* Blue text on hover */
104
+ }
105
 
106
+ .sign-out-button {
107
+ border: 1px solid #ff4c4c;
108
+ background-color: #fff;
109
+ color: #ff4c4c;
110
+ }
111
 
112
+ .sign-out-button:hover {
113
+ background-color: #ffe6e6; /* Light red on hover */
114
+ border-color: #e04343; /* Darker red for hover */
115
+ color: #e04343; /* Red text on hover */
116
+ }
117
 
118
+ .footer {
119
+ font-size: 12px;
120
+ color: #777;
121
+ margin-top: 25px;
122
+ }
123
  </style>
124
+ </head>
125
+ <body>
126
  <div class="container">
127
+ <img
128
+ src="/public/assets/images/avatars/logo.png"
129
+ alt="AI Tutor Avatar"
130
+ class="avatar"
131
+ />
132
+ <h1>Welcome, {{ username }}</h1>
133
+ <p>Ready to start your AI tutoring session?</p>
134
+ <p class="tokens-left">Tokens Left: {{ tokens_left }}</p>
135
+ <p class="all-time-tokens">
136
+ All-Time Tokens Allocated: {{ all_time_tokens_allocated }} / {{
137
+ total_tokens_allocated }}
138
+ </p>
139
+ <form action="/start-tutor" method="post">
140
+ <button type="submit" class="button start-button">
141
+ Start AI Tutor
142
+ </button>
143
+ </form>
144
+ <form action="/logout" method="get">
145
+ <button type="submit" class="button sign-out-button">Sign Out</button>
146
+ </form>
147
+ <div class="footer">Reload the page to update token stats</div>
148
  </div>
149
  <script>
150
+ let token = "{{ jwt_token }}";
151
+ console.log("Token: ", token);
152
+ localStorage.setItem("token", token);
153
  </script>
154
+ </body>
155
  </html>
apps/ai_tutor/templates/login.html CHANGED
@@ -1,132 +1,151 @@
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>Login | Terrier Tutor</title>
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
9
 
10
- body, html {
11
- margin: 0;
12
- padding: 0;
13
- font-family: 'Inter', sans-serif;
14
- background-color: #f7f7f7; /* Light gray background */
15
- background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* Subtle geometric pattern */
16
- background-repeat: repeat;
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- height: 100vh;
21
- color: #333;
22
- }
 
23
 
24
- .container {
25
- background: rgba(255, 255, 255, 0.9);
26
- border: 1px solid #ddd;
27
- border-radius: 8px;
28
- width: 100%;
29
- max-width: 400px;
30
- padding: 50px;
31
- box-sizing: border-box;
32
- text-align: center;
33
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
34
- backdrop-filter: blur(10px);
35
- -webkit-backdrop-filter: blur(10px);
36
- }
37
 
38
- .avatar {
39
- width: 90px;
40
- height: 90px;
41
- border-radius: 50%;
42
- margin-bottom: 25px;
43
- border: 2px solid #ddd;
44
- }
45
 
46
- .container h1 {
47
- margin-bottom: 15px;
48
- font-size: 24px;
49
- font-weight: 600;
50
- color: #1a1a1a;
51
- }
52
 
53
- .container p {
54
- font-size: 16px;
55
- color: #4a4a4a;
56
- margin-bottom: 30px;
57
- line-height: 1.5;
58
- }
59
 
60
- .button {
61
- padding: 12px 0;
62
- margin: 12px 0;
63
- font-size: 14px;
64
- border-radius: 6px;
65
- cursor: pointer;
66
- width: 100%;
67
- border: 1px solid #4285F4; /* Google button border color */
68
- background-color: #fff; /* Guest button color */
69
- color: #4285F4; /* Google button text color */
70
- transition: background-color 0.3s ease, border-color 0.3s ease;
71
- }
72
 
73
- .button:hover {
74
- background-color: #e0f0ff; /* Light blue on hover */
75
- border-color: #357ae8; /* Darker blue for hover */
76
- color: #357ae8; /* Blue text on hover */
77
- }
78
 
79
- .footer {
80
- margin-top: 40px;
81
- font-size: 15px;
82
- color: #666;
83
- text-align: center; /* Center the text in the footer */
84
- }
85
 
86
- .footer a {
87
- color: #333;
88
- text-decoration: none;
89
- font-weight: 500;
90
- display: inline-flex;
91
- align-items: center;
92
- justify-content: center; /* Center the content of the links */
93
- transition: color 0.3s ease;
94
- margin-bottom: 8px;
95
- width: 100%; /* Make the link block level */
96
- }
97
 
98
- .footer a:hover {
99
- color: #000;
100
- }
101
 
102
- .footer svg {
103
- margin-right: 8px;
104
- fill: currentColor;
105
- }
106
  </style>
107
- </head>
108
- <body>
109
  <div class="container">
110
- <img src="/public/assets/images/avatars/ai-tutor.png" alt="AI Tutor Avatar" class="avatar">
111
- <h1>Terrier Tutor</h1>
112
- <p>Welcome to the DS598 AI Tutor. Please sign in to continue.</p>
113
- <form action="/login/google" method="get">
114
- <button type="submit" class="button">Sign in with Google</button>
115
- </form>
116
- <div class="footer">
117
- <a href="{{ GITHUB_REPO }}" target="_blank">
118
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
119
- <path d="M12 .5C5.596.5.5 5.596.5 12c0 5.098 3.292 9.414 7.852 10.94.574.105.775-.249.775-.553 0-.272-.01-1.008-.015-1.98-3.194.694-3.87-1.544-3.87-1.544-.521-1.324-1.273-1.676-1.273-1.676-1.04-.714.079-.7.079-.7 1.148.08 1.75 1.181 1.75 1.181 1.022 1.752 2.683 1.246 3.34.954.104-.74.4-1.246.73-1.533-2.551-.292-5.234-1.276-5.234-5.675 0-1.253.447-2.277 1.181-3.079-.12-.293-.51-1.47.113-3.063 0 0 .96-.307 3.15 1.174.913-.255 1.892-.383 2.867-.388.975.005 1.954.133 2.868.388 2.188-1.481 3.147-1.174 3.147-1.174.624 1.593.233 2.77.114 3.063.735.802 1.18 1.826 1.18 3.079 0 4.407-2.688 5.38-5.248 5.668.413.354.782 1.049.782 2.113 0 1.526-.014 2.757-.014 3.132 0 .307.198.662.783.553C20.21 21.411 23.5 17.096 23.5 12c0-6.404-5.096-11.5-11.5-11.5z"/>
120
- </svg>
121
- View on GitHub
122
- </a>
123
- <a href="{{ DOCS_WEBSITE }}" target="_blank">
124
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
125
- <path d="M19 2H8c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V7l-5-5zm0 2l.001 4H14V4h5zm-1 14H9V4h4v6h6v8zM7 4H6v16c0 1.654 1.346 3 3 3h9v-2H9c-.551 0-1-.449-1-1V4z"/>
126
- </svg>
127
- View Docs
128
- </a>
129
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  </div>
131
- </body>
132
  </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>Login | Terrier Tutor</title>
7
  <style>
8
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
9
 
10
+ body,
11
+ html {
12
+ margin: 0;
13
+ padding: 0;
14
+ font-family: "Inter", sans-serif;
15
+ background-color: #f7f7f7; /* Light gray background */
16
+ background-image: url("https://www.transparenttextures.com/patterns/cubes.png"); /* Subtle geometric pattern */
17
+ background-repeat: repeat;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ height: 100vh;
22
+ color: #333;
23
+ }
24
 
25
+ .container {
26
+ background: rgba(255, 255, 255, 0.9);
27
+ border: 1px solid #ddd;
28
+ border-radius: 8px;
29
+ width: 100%;
30
+ max-width: 400px;
31
+ padding: 50px;
32
+ box-sizing: border-box;
33
+ text-align: center;
34
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
35
+ backdrop-filter: blur(10px);
36
+ -webkit-backdrop-filter: blur(10px);
37
+ }
38
 
39
+ .avatar {
40
+ width: 90px;
41
+ height: 90px;
42
+ border-radius: 50%;
43
+ margin-bottom: 25px;
44
+ border: 2px solid #ddd;
45
+ }
46
 
47
+ .container h1 {
48
+ margin-bottom: 15px;
49
+ font-size: 24px;
50
+ font-weight: 600;
51
+ color: #1a1a1a;
52
+ }
53
 
54
+ .container p {
55
+ font-size: 16px;
56
+ color: #4a4a4a;
57
+ margin-bottom: 30px;
58
+ line-height: 1.5;
59
+ }
60
 
61
+ .button {
62
+ padding: 12px 0;
63
+ margin: 12px 0;
64
+ font-size: 14px;
65
+ border-radius: 6px;
66
+ cursor: pointer;
67
+ width: 100%;
68
+ border: 1px solid #4285f4; /* Google button border color */
69
+ background-color: #fff; /* Guest button color */
70
+ color: #4285f4; /* Google button text color */
71
+ transition: background-color 0.3s ease, border-color 0.3s ease;
72
+ }
73
 
74
+ .button:hover {
75
+ background-color: #e0f0ff; /* Light blue on hover */
76
+ border-color: #357ae8; /* Darker blue for hover */
77
+ color: #357ae8; /* Blue text on hover */
78
+ }
79
 
80
+ .footer {
81
+ margin-top: 40px;
82
+ font-size: 15px;
83
+ color: #666;
84
+ text-align: center; /* Center the text in the footer */
85
+ }
86
 
87
+ .footer a {
88
+ color: #333;
89
+ text-decoration: none;
90
+ font-weight: 500;
91
+ display: inline-flex;
92
+ align-items: center;
93
+ justify-content: center; /* Center the content of the links */
94
+ transition: color 0.3s ease;
95
+ margin-bottom: 8px;
96
+ width: 100%; /* Make the link block level */
97
+ }
98
 
99
+ .footer a:hover {
100
+ color: #000;
101
+ }
102
 
103
+ .footer svg {
104
+ margin-right: 8px;
105
+ fill: currentColor;
106
+ }
107
  </style>
108
+ </head>
109
+ <body>
110
  <div class="container">
111
+ <img
112
+ src="/public/assets/images/avatars/logo.png"
113
+ alt="AI Tutor Avatar"
114
+ class="avatar"
115
+ />
116
+ <h1>Terrier Tutor</h1>
117
+ <p>Welcome to the DS598 AI Tutor. Please sign in to continue.</p>
118
+ <form action="/login/google" method="get">
119
+ <button type="submit" class="button">Sign in with Google</button>
120
+ </form>
121
+ <div class="footer">
122
+ <a href="{{ GITHUB_REPO }}" target="_blank">
123
+ <svg
124
+ xmlns="http://www.w3.org/2000/svg"
125
+ width="16"
126
+ height="16"
127
+ viewBox="0 0 24 24"
128
+ >
129
+ <path
130
+ d="M12 .5C5.596.5.5 5.596.5 12c0 5.098 3.292 9.414 7.852 10.94.574.105.775-.249.775-.553 0-.272-.01-1.008-.015-1.98-3.194.694-3.87-1.544-3.87-1.544-.521-1.324-1.273-1.676-1.273-1.676-1.04-.714.079-.7.079-.7 1.148.08 1.75 1.181 1.75 1.181 1.022 1.752 2.683 1.246 3.34.954.104-.74.4-1.246.73-1.533-2.551-.292-5.234-1.276-5.234-5.675 0-1.253.447-2.277 1.181-3.079-.12-.293-.51-1.47.113-3.063 0 0 .96-.307 3.15 1.174.913-.255 1.892-.383 2.867-.388.975.005 1.954.133 2.868.388 2.188-1.481 3.147-1.174 3.147-1.174.624 1.593.233 2.77.114 3.063.735.802 1.18 1.826 1.18 3.079 0 4.407-2.688 5.38-5.248 5.668.413.354.782 1.049.782 2.113 0 1.526-.014 2.757-.014 3.132 0 .307.198.662.783.553C20.21 21.411 23.5 17.096 23.5 12c0-6.404-5.096-11.5-11.5-11.5z"
131
+ />
132
+ </svg>
133
+ View on GitHub
134
+ </a>
135
+ <a href="{{ DOCS_WEBSITE }}" target="_blank">
136
+ <svg
137
+ xmlns="http://www.w3.org/2000/svg"
138
+ width="16"
139
+ height="16"
140
+ viewBox="0 0 24 24"
141
+ >
142
+ <path
143
+ d="M19 2H8c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V7l-5-5zm0 2l.001 4H14V4h5zm-1 14H9V4h4v6h6v8zM7 4H6v16c0 1.654 1.346 3 3 3h9v-2H9c-.551 0-1-.449-1-1V4z"
144
+ />
145
+ </svg>
146
+ View Docs
147
+ </a>
148
+ </div>
149
  </div>
150
+ </body>
151
  </html>
apps/ai_tutor/templates/unauthorized.html CHANGED
@@ -80,7 +80,7 @@
80
  <body>
81
  <div class="container">
82
  <img
83
- src="/public/assets/images/avatars/ai-tutor.png"
84
  alt="AI Tutor Avatar"
85
  class="avatar"
86
  />
 
80
  <body>
81
  <div class="container">
82
  <img
83
+ src="/public/assets/images/avatars/logo.png"
84
  alt="AI Tutor Avatar"
85
  class="avatar"
86
  />