├── Tabs
    ├── Maia
    └── predict.py
├── styles.css
├── server.py
├── main.py
├── Train.py
├── forgot.js
├── script.js
├── login.css
├── dataset.csv
└── login.html


/Tabs/Maia:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 |     background-color: #f0f0f0; /* specify your desired background color code here */
3 | }


--------------------------------------------------------------------------------
/server.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask
 2 | import subprocess
 3 | 
 4 | app = Flask(__name__)
 5 | 
 6 | @app.route('/')
 7 | def run_streamlit_app():
 8 |     subprocess.run(['streamlit', 'run', 'main.py'])
 9 |     return 'Streamlit app is running!'
10 | 
11 | if __name__ == '__main__':
12 |     app.run(debug=True)
13 | 


--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from Train import load_data
 3 | from Tabs import predict
 4 | 
 5 | 
 6 | st.set_page_config(
 7 |     page_title = 'Heart Disease Prediction',
 8 |     page_icon = 'heart',
 9 |     layout = 'wide',
10 |     initial_sidebar_state = 'auto'
11 | )
12 | 
13 | Tabs = {
14 |     "Prediction": predict,
15 | }
16 | 
17 | df, X, y = load_data()
18 | 
19 | Tabs['Prediction'].app(df, X, y)
20 | 


--------------------------------------------------------------------------------
/Train.py:
--------------------------------------------------------------------------------
 1 | from functools import cache
 2 | import numpy as np
 3 | import pandas as pd
 4 | from sklearn.tree import DecisionTreeClassifier
 5 | import streamlit as st
 6 | 
 7 | @st.cache_data(persist=True)
 8 | def load_data():
 9 |     df = pd.read_csv('dataset.csv')
10 |     X = df[["age","sex","cp","trestbps","chol","fbs","restecg","thalach","exang","oldpeak","slope","ca","thal"]]
11 |     y = df['target']
12 |     return df, X, y
13 | 
14 | 
15 | @st.cache_data(persist=True)
16 | def train_model(X, y):
17 |     model = DecisionTreeClassifier(
18 |             ccp_alpha=0.0, class_weight=None, criterion='entropy',
19 |             max_depth=4, max_features=None, max_leaf_nodes=None,
20 |             min_impurity_decrease=0.0, min_samples_leaf=1, 
21 |             min_samples_split=2, min_weight_fraction_leaf=0.0,
22 |             random_state=42, splitter='best'
23 |         )
24 |     model.fit(X, y)
25 |     score = model.score(X, y)
26 |     return model, score
27 | 
28 | 
29 | 
30 | def predict(X, y, features):
31 |     model, score = train_model(X, y)
32 |     prediction = model.predict(np.array(features).reshape(1, -1))
33 |     return prediction, score


--------------------------------------------------------------------------------
/forgot.js:
--------------------------------------------------------------------------------
 1 | // Function to toggle the reset password form
 2 | function toggleResetPasswordForm() {
 3 |     const resetPasswordForm = document.getElementById('reset-password-form');
 4 |     const forgotPasswordLink = document.getElementById('forgot-password-link');
 5 | 
 6 |     if (resetPasswordForm.hidden) {
 7 |         // Show the reset password form
 8 |         resetPasswordForm.hidden = false;
 9 |         forgotPasswordLink.textContent = 'Cancel'; // Change link text
10 |     } else {
11 |         // Hide the reset password form
12 |         resetPasswordForm.hidden = true;
13 |         forgotPasswordLink.textContent = 'Forgot password?'; // Restore original text
14 |     }
15 | }
16 | 
17 | // Event listener for the "Forgot password?" link
18 | document.getElementById('forgot-password-link').addEventListener('click', toggleResetPasswordForm);
19 | 
20 | // Function to handle password reset
21 | function handlePasswordReset() {
22 |     const email = document.getElementById('reset-email').value;
23 | 
24 |     // Send a password reset email to the user
25 |     firebase.auth().sendPasswordResetEmail(email)
26 |         .then(() => {
27 |             // Password reset email sent successfully
28 |             alert('Password reset email sent. Check your inbox.');
29 |             // Hide the reset password form after a successful request
30 |             document.getElementById('reset-password-form').hidden = true;
31 |             document.getElementById('forgot-password-link').textContent = 'Forgot password?'; // Restore link text
32 |         })
33 |         .catch((error) => {
34 |             // Handle errors
35 |             console.error(error.message);
36 |             alert('Password reset failed. Please check the email address.');
37 |         });
38 | }
39 | 
40 | // Event listener for the reset button
41 | document.getElementById('reset-button').addEventListener('click', handlePasswordReset);
42 | 


--------------------------------------------------------------------------------
/Tabs/predict.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from Train import predict
 3 | 
 4 | 
 5 | @st.cache_data(persist=True)
 6 | def load_data():
 7 |     pass
 8 | 
 9 | @st.cache_data(persist=True)
10 | def predict_stroke(X, y, features):
11 |     pass
12 | 
13 | def app(df, X, y):
14 |     data = load_data()
15 |     st.markdown(
16 |     """
17 |     <h1 style='color: red; text-align: left;'>CARDIOVASACULAR FORECASTING USING MACHINE LEARNING</h1>
18 |     """,
19 |     unsafe_allow_html=True
20 | )
21 |     st.markdown(
22 |         """
23 |             <p style="font-size:25px">
24 |                 This Application uses <b style="color:green">Decision Tree Classifier</b> for Cardiovascular Forecasting using Machine Learning.
25 |             </p>
26 |         """, unsafe_allow_html=True)
27 |     st.markdown(
28 |         """
29 |             <p style="font-size:25px">
30 |                 This Application was <b style="color:green">Developed by ,</b>
31 |                 \n<b style="font-size:20px; padding-left:9cm;"> S.HARIKISHORE</b> 
32 |                 \n<b style="font-size:20px; padding-left:9cm;"> V.CIBIRAJAN</b> 
33 |                 \n<b style="font-size:20px; padding-left:9cm;"> S.SAKTHIVEL</b> 
34 |             </p>
35 |         """, unsafe_allow_html=True)
36 |     st.markdown(
37 |         """
38 |             <p style="font-size:25px">
39 |                 This Project was <b style="color:green">Guided by ,</b>
40 |                 \n<b style="font-size:20px; padding-left:9cm;">Dr T.SARAVANAN</b> 
41 |             </p>
42 |         """, unsafe_allow_html=True)
43 |     st.markdown("""General Convention:
44 |     \n 0 -> Absent or False
45 |     \n 1 -> Present or True\n 
46 |     
47 |     \nSex:\n
48 |     0 -> Male
49 |     1 -> Female
50 |     
51 |     """)
52 |     
53 |     
54 |     # Take input of features from the user.
55 |     A = st.slider("Age", int(df["age"].min()), int(df["age"].max()))
56 |     B = st.slider("Sex", int(df["sex"].min()), int(df["sex"].max()))
57 |     C= st.slider("Cerebral palsy", int(df["cp"].min()), int(df["cp"].max()))
58 |     D = st.slider("Trestbps", int(df["trestbps"].min()), int(df["trestbps"].max()))
59 |     E = st.slider("Cholesterol", int(df["chol"].min()), int(df["chol"].max()))
60 |     F = st.slider("Fasting blood sugar", int(df["fbs"].min()), int(df["fbs"].max()))
61 |     G = st.slider("Restecg", int(df["restecg"].min()), int(df["restecg"].max()))
62 |     H = st.slider("Maximum Heart Rate", int(df["thalach"].min()), int(df["thalach"].max()))
63 |     I = st.slider("Exercise Induced Angina", int(df["exang"].min()), int(df["exang"].max()))
64 |     J = st.slider("Oldpeak", float(df["oldpeak"].min()), float(df["oldpeak"].max()))
65 |     K = st.slider("Slope", int(df["slope"].min()), int(df["slope"].max()))
66 |     L = st.slider("Cancer", int(df["ca"].min()), int(df["ca"].max()))
67 |     M = st.slider("Thalassemia", int(df["thal"].min()), int(df["thal"].max()))
68 |     
69 |     features = [A,B,C,D,E,F,G,H,I,J,K,L,M]
70 |     if st.button("Predict"):
71 |         prediction, score = predict(X, y, features)
72 |         score = score
73 |         st.info("Predicted Sucessfully...")
74 |         if (prediction == 1):
75 |             st.warning("The patient is likely to have heart disease!!")
76 |         else:
77 |             st.success("The patient is not likely to have heart disease!!")
78 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | const firebaseConfig = {
 2 |   apiKey: "AIzaSyDVqUF3CS7K4iJmoFT0oTKTcte8Ov8ihpM",
 3 |   authDomain: "integrated-web-application.firebaseapp.com",
 4 |   databaseURL: "https://integrated-web-application-default-rtdb.firebaseio.com",
 5 |   projectId: "integrated-web-application",
 6 |   storageBucket: "integrated-web-application.appspot.com",
 7 |   messagingSenderId: "814789377522",
 8 |   appId: "1:814789377522:web:1ad04bd7cf6b479243bf6b",
 9 |   measurementId: "G-SPPP00VWS2"
10 | };
11 |   firebase.initializeApp(firebaseConfig);
12 |   
13 |   const auth = firebase.auth();
14 |   
15 |   
16 |   // Function to handle user sign-up
17 |   function handleSignUp() {
18 |     const email = document.getElementById('signup-email').value;
19 |     const password = document.getElementById('signup-password').value;
20 |   
21 |     firebase.auth().createUserWithEmailAndPassword(email, password)
22 |       .then((userCredential) => {
23 |         // User signed up successfully
24 |         const user = userCredential.user;
25 |         console.log(`User signed up: ${user.email}`);
26 |   
27 |         // Define project details
28 |         const projectName = "Your Project Name";
29 |         const projectDescription = "Your Project Description";
30 |   
31 |         // Configure SMTP email settings and send welcome email
32 |         Email.send({
33 |           SecureToken: "C973D7AD-F097-4B95-91F4-40ABC5567812", // Replace with your SMTPJS API key or token
34 |           Host: "smtp.elasticemail.com", // Replace with your SMTP server hostname
35 |           Username: "harikishore651@gmail.com", // Your email address
36 |           Password: "CF02FB174E9737254670C18A2318A696CAE5", // Your email password or API key
37 |           Port: 2525, // Use the appropriate port for your SMTP server (587 for TLS, 465 for SSL)
38 |           To: email, // Recipient's email address
39 |           From: "harikishore651@gmail.com", // Your email address
40 |           Subject: "WELCOME!",
41 |           Body: "Welcome to Cardiovascular Forecasting Web Application"
42 |       }).then(
43 |           message => console.log(`Email sent successfully to ${email}:`, message)
44 |       ).catch(
45 |           error => console.error(`Email error for ${email}:`, error)
46 |       );
47 |   
48 |         // You can redirect to a dashboard or another page here
49 |       })
50 |       .catch((error) => {
51 |         // Handle sign-up errors
52 |         console.error(error.message);
53 |       });
54 |   }
55 |   
56 |   
57 |   // Function to handle user sign-in
58 |   function handleSignIn() {
59 |     const email = document.getElementById('signin-email').value;
60 |     const password = document.getElementById('signin-password').value;
61 |   
62 |     firebase.auth().signInWithEmailAndPassword(email, password)
63 |       .then((userCredential) => {
64 |         // User signed in successfully
65 |         const user = userCredential.user;
66 |         window.location.href = "http://localhost:8501";
67 |       })
68 |       .catch((error) => {
69 |         // Handle sign-in errors
70 |         console.error(error.message);
71 |       });
72 |   }
73 |   
74 |   // Event listeners for the sign-up and sign-in buttons
75 |   document.getElementById('signup-button').addEventListener('click', handleSignUp);
76 |   document.getElementById('signin-button').addEventListener('click', handleSignIn);


--------------------------------------------------------------------------------
/login.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --primary-color: #4EA685;
  3 |     --secondary-color: #57B894;
  4 |     --black: #000000;
  5 |     --white: #ffffff;
  6 |     --gray: #efefef;
  7 |     --gray-2: #757575;
  8 | 
  9 |     --facebook-color: #4267B2;
 10 |     --google-color: #DB4437;
 11 |     --twitter-color: #1DA1F2;
 12 |     --insta-color: #E1306C;
 13 | }
 14 | 
 15 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
 16 | 
 17 | * {
 18 |     font-family: 'Poppins', sans-serif;
 19 |     margin: 0;
 20 |     padding: 0;
 21 |     box-sizing: border-box;
 22 | }
 23 | 
 24 | html,
 25 | body {
 26 |     height: 100vh;
 27 |     overflow: hidden;
 28 | }
 29 | 
 30 | .container {
 31 |     position: relative;
 32 |     min-height: 100vh;
 33 |     overflow: hidden;
 34 | }
 35 | 
 36 | .row {
 37 |     display: flex;
 38 |     flex-wrap: wrap;
 39 |     height: 100vh;
 40 | }
 41 | 
 42 | .col {
 43 |     width: 50%;
 44 | }
 45 | 
 46 | .align-items-center {
 47 |     display: flex;
 48 |     align-items: center;
 49 |     justify-content: center;
 50 |     text-align: center;
 51 | }
 52 | 
 53 | .form-wrapper {
 54 |     width: 100%;
 55 |     max-width: 28rem;
 56 | }
 57 | 
 58 | .form {
 59 |     padding: 1rem;
 60 |     background-color: var(--white);
 61 |     border-radius: 1.5rem;
 62 |     width: 100%;
 63 |     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 64 |     transform: scale(0);
 65 |     transition: .5s ease-in-out;
 66 |     transition-delay: 1s;
 67 | }
 68 | 
 69 | .input-group {
 70 |     position: relative;
 71 |     width: 100%;
 72 |     margin: 1rem 0;
 73 | }
 74 | 
 75 | .input-group i {
 76 |     position: absolute;
 77 |     top: 50%;
 78 |     left: 1rem;
 79 |     transform: translateY(-50%);
 80 |     font-size: 1.4rem;
 81 |     color: var(--gray-2);
 82 | }
 83 | 
 84 | .input-group input {
 85 |     width: 100%;
 86 |     padding: 1rem 3rem;
 87 |     font-size: 1rem;
 88 |     background-color: var(--gray);
 89 |     border-radius: .5rem;
 90 |     border: 0.125rem solid var(--white);
 91 |     outline: none;
 92 | }
 93 | 
 94 | .input-group input:focus {
 95 |     border: 0.125rem solid var(--primary-color);
 96 | }
 97 | 
 98 | .form button {
 99 |     cursor: pointer;
100 |     width: 100%;
101 |     padding: .6rem 0;
102 |     border-radius: .5rem;
103 |     border: none;
104 |     background-color: var(--primary-color);
105 |     color: var(--white);
106 |     font-size: 1.2rem;
107 |     outline: none;
108 | }
109 | 
110 | .form p {
111 |     margin: 1rem 0;
112 |     font-size: .7rem;
113 | }
114 | 
115 | .flex-col {
116 |     flex-direction: column;
117 | }
118 | 
119 | .social-list {
120 |     margin: 2rem 0;
121 |     padding: 1rem;
122 |     border-radius: 1.5rem;
123 |     width: 100%;
124 |     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
125 |     transform: scale(0);
126 |     transition: .5s ease-in-out;
127 |     transition-delay: 1.2s;
128 | }
129 | 
130 | .social-list>div {
131 |     color: var(--white);
132 |     margin: 0 .5rem;
133 |     padding: .7rem;
134 |     cursor: pointer;
135 |     border-radius: .5rem;
136 |     cursor: pointer;
137 |     transform: scale(0);
138 |     transition: .5s ease-in-out;
139 | }
140 | 
141 | .social-list>div:nth-child(1) {
142 |     transition-delay: 1.4s;
143 | }
144 | 
145 | .social-list>div:nth-child(2) {
146 |     transition-delay: 1.6s;
147 | }
148 | 
149 | .social-list>div:nth-child(3) {
150 |     transition-delay: 1.8s;
151 | }
152 | 
153 | .social-list>div:nth-child(4) {
154 |     transition-delay: 2s;
155 | }
156 | 
157 | .social-list>div>i {
158 |     font-size: 1.5rem;
159 |     transition: .4s ease-in-out;
160 | }
161 | 
162 | .social-list>div:hover i {
163 |     transform: scale(1.5);
164 | }
165 | 
166 | .facebook-bg {
167 |     background-color: var(--facebook-color);
168 | }
169 | 
170 | .google-bg {
171 |     background-color: var(--google-color);
172 | }
173 | 
174 | .twitter-bg {
175 |     background-color: var(--twitter-color);
176 | }
177 | 
178 | .insta-bg {
179 |     background-color: var(--insta-color);
180 | }
181 | 
182 | .pointer {
183 |     cursor: pointer;
184 | }
185 | 
186 | .container.sign-in .form.sign-in,
187 | .container.sign-in .social-list.sign-in,
188 | .container.sign-in .social-list.sign-in>div,
189 | .container.sign-up .form.sign-up,
190 | .container.sign-up .social-list.sign-up,
191 | .container.sign-up .social-list.sign-up>div {
192 |     transform: scale(1);
193 | }
194 | 
195 | .content-row {
196 |     position: absolute;
197 |     top: 0;
198 |     left: 0;
199 |     pointer-events: none;
200 |     z-index: 6;
201 |     width: 100%;
202 | }
203 | 
204 | .text {
205 |     margin: 4rem;
206 |     color: var(--white);
207 | }
208 | 
209 | .text h2 {
210 |     font-size: 3.5rem;
211 |     font-weight: 800;
212 |     margin: 2rem 0;
213 |     transition: 1s ease-in-out;
214 | }
215 | 
216 | .text p {
217 |     font-weight: 600;
218 |     transition: 1s ease-in-out;
219 |     transition-delay: .2s;
220 | }
221 | 
222 | .img img {
223 |     width: 30vw;
224 |     transition: 1s ease-in-out;
225 |     transition-delay: .4s;
226 | }
227 | 
228 | .text.sign-in h2,
229 | .text.sign-in p,
230 | .img.sign-in img {
231 |     transform: translateX(-250%);
232 | }
233 | 
234 | .text.sign-up h2,
235 | .text.sign-up p,
236 | .img.sign-up img {
237 |     transform: translateX(250%);
238 | }
239 | 
240 | .container.sign-in .text.sign-in h2,
241 | .container.sign-in .text.sign-in p,
242 | .container.sign-in .img.sign-in img,
243 | .container.sign-up .text.sign-up h2,
244 | .container.sign-up .text.sign-up p,
245 | .container.sign-up .img.sign-up img {
246 |     transform: translateX(0);
247 | }
248 | 
249 | /* BACKGROUND */
250 | 
251 | .container::before {
252 |     content: "";
253 |     position: absolute;
254 |     top: 0;
255 |     right: 0;
256 |     height: 100vh;
257 |     width: 300vw;
258 |     transform: translate(35%, 0);
259 |     background-image: linear-gradient(-45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
260 |     transition: 1s ease-in-out;
261 |     z-index: 6;
262 |     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
263 |     border-bottom-right-radius: max(50vw, 50vh);
264 |     border-top-left-radius: max(50vw, 50vh);
265 | }
266 | 
267 | .container.sign-in::before {
268 |     transform: translate(0, 0);
269 |     right: 50%;
270 | }
271 | 
272 | .container.sign-up::before {
273 |     transform: translate(100%, 0);
274 |     right: 50%;
275 | }
276 | 
277 | /* RESPONSIVE */
278 | 
279 | @media only screen and (max-width: 425px) {
280 | 
281 |     .container::before,
282 |     .container.sign-in::before,
283 |     .container.sign-up::before {
284 |         height: 100vh;
285 |         border-bottom-right-radius: 0;
286 |         border-top-left-radius: 0;
287 |         z-index: 0;
288 |         transform: none;
289 |         right: 0;
290 |     }
291 | 
292 |     /* .container.sign-in .col.sign-up {
293 |         transform: translateY(100%);
294 |     } */
295 | 
296 |     .container.sign-in .col.sign-in,
297 |     .container.sign-up .col.sign-up {
298 |         transform: translateY(0);
299 |     }
300 | 
301 |     .content-row {
302 |         align-items: flex-start !important;
303 |     }
304 | 
305 |     .content-row .col {
306 |         transform: translateY(0);
307 |         background-color: unset;
308 |     }
309 | 
310 |     .col {
311 |         width: 100%;
312 |         position: absolute;
313 |         padding: 2rem;
314 |         background-color: var(--white);
315 |         border-top-left-radius: 2rem;
316 |         border-top-right-radius: 2rem;
317 |         transform: translateY(100%);
318 |         transition: 1s ease-in-out;
319 |     }
320 | 
321 |     .row {
322 |         align-items: flex-end;
323 |         justify-content: flex-end;
324 |     }
325 | 
326 |     .form,
327 |     .social-list {
328 |         box-shadow: none;
329 |         margin: 0;
330 |         padding: 0;
331 |     }
332 | 
333 |     .text {
334 |         margin: 0;
335 |     }
336 | 
337 |     .text p {
338 |         display: none;
339 |     }
340 | 
341 |     .text h2 {
342 |         margin: .5rem;
343 |         font-size: 2rem;
344 |     }
345 | }


--------------------------------------------------------------------------------
/dataset.csv:
--------------------------------------------------------------------------------
  1 | age,sex,cp,trestbps,chol,fbs,restecg,thalach,exang,oldpeak,slope,ca,thal,target
  2 | 63,1,3,145,233,1,0,150,0,2.3,0,0,1,1
  3 | 37,1,2,130,250,0,1,187,0,3.5,0,0,2,1
  4 | 41,0,1,130,204,0,0,172,0,1.4,2,0,2,1
  5 | 56,1,1,120,236,0,1,178,0,0.8,2,0,2,1
  6 | 57,0,0,120,354,0,1,163,1,0.6,2,0,2,1
  7 | 57,1,0,140,192,0,1,148,0,0.4,1,0,1,1
  8 | 56,0,1,140,294,0,0,153,0,1.3,1,0,2,1
  9 | 44,1,1,120,263,0,1,173,0,0,2,0,3,1
 10 | 52,1,2,172,199,1,1,162,0,0.5,2,0,3,1
 11 | 57,1,2,150,168,0,1,174,0,1.6,2,0,2,1
 12 | 54,1,0,140,239,0,1,160,0,1.2,2,0,2,1
 13 | 48,0,2,130,275,0,1,139,0,0.2,2,0,2,1
 14 | 49,1,1,130,266,0,1,171,0,0.6,2,0,2,1
 15 | 64,1,3,110,211,0,0,144,1,1.8,1,0,2,1
 16 | 58,0,3,150,283,1,0,162,0,1,2,0,2,1
 17 | 50,0,2,120,219,0,1,158,0,1.6,1,0,2,1
 18 | 58,0,2,120,340,0,1,172,0,0,2,0,2,1
 19 | 66,0,3,150,226,0,1,114,0,2.6,0,0,2,1
 20 | 43,1,0,150,247,0,1,171,0,1.5,2,0,2,1
 21 | 69,0,3,140,239,0,1,151,0,1.8,2,2,2,1
 22 | 59,1,0,135,234,0,1,161,0,0.5,1,0,3,1
 23 | 44,1,2,130,233,0,1,179,1,0.4,2,0,2,1
 24 | 42,1,0,140,226,0,1,178,0,0,2,0,2,1
 25 | 61,1,2,150,243,1,1,137,1,1,1,0,2,1
 26 | 40,1,3,140,199,0,1,178,1,1.4,2,0,3,1
 27 | 71,0,1,160,302,0,1,162,0,0.4,2,2,2,1
 28 | 59,1,2,150,212,1,1,157,0,1.6,2,0,2,1
 29 | 51,1,2,110,175,0,1,123,0,0.6,2,0,2,1
 30 | 65,0,2,140,417,1,0,157,0,0.8,2,1,2,1
 31 | 53,1,2,130,197,1,0,152,0,1.2,0,0,2,1
 32 | 41,0,1,105,198,0,1,168,0,0,2,1,2,1
 33 | 65,1,0,120,177,0,1,140,0,0.4,2,0,3,1
 34 | 44,1,1,130,219,0,0,188,0,0,2,0,2,1
 35 | 54,1,2,125,273,0,0,152,0,0.5,0,1,2,1
 36 | 51,1,3,125,213,0,0,125,1,1.4,2,1,2,1
 37 | 46,0,2,142,177,0,0,160,1,1.4,0,0,2,1
 38 | 54,0,2,135,304,1,1,170,0,0,2,0,2,1
 39 | 54,1,2,150,232,0,0,165,0,1.6,2,0,3,1
 40 | 65,0,2,155,269,0,1,148,0,0.8,2,0,2,1
 41 | 65,0,2,160,360,0,0,151,0,0.8,2,0,2,1
 42 | 51,0,2,140,308,0,0,142,0,1.5,2,1,2,1
 43 | 48,1,1,130,245,0,0,180,0,0.2,1,0,2,1
 44 | 45,1,0,104,208,0,0,148,1,3,1,0,2,1
 45 | 53,0,0,130,264,0,0,143,0,0.4,1,0,2,1
 46 | 39,1,2,140,321,0,0,182,0,0,2,0,2,1
 47 | 52,1,1,120,325,0,1,172,0,0.2,2,0,2,1
 48 | 44,1,2,140,235,0,0,180,0,0,2,0,2,1
 49 | 47,1,2,138,257,0,0,156,0,0,2,0,2,1
 50 | 53,0,2,128,216,0,0,115,0,0,2,0,0,1
 51 | 53,0,0,138,234,0,0,160,0,0,2,0,2,1
 52 | 51,0,2,130,256,0,0,149,0,0.5,2,0,2,1
 53 | 66,1,0,120,302,0,0,151,0,0.4,1,0,2,1
 54 | 62,1,2,130,231,0,1,146,0,1.8,1,3,3,1
 55 | 44,0,2,108,141,0,1,175,0,0.6,1,0,2,1
 56 | 63,0,2,135,252,0,0,172,0,0,2,0,2,1
 57 | 52,1,1,134,201,0,1,158,0,0.8,2,1,2,1
 58 | 48,1,0,122,222,0,0,186,0,0,2,0,2,1
 59 | 45,1,0,115,260,0,0,185,0,0,2,0,2,1
 60 | 34,1,3,118,182,0,0,174,0,0,2,0,2,1
 61 | 57,0,0,128,303,0,0,159,0,0,2,1,2,1
 62 | 71,0,2,110,265,1,0,130,0,0,2,1,2,1
 63 | 54,1,1,108,309,0,1,156,0,0,2,0,3,1
 64 | 52,1,3,118,186,0,0,190,0,0,1,0,1,1
 65 | 41,1,1,135,203,0,1,132,0,0,1,0,1,1
 66 | 58,1,2,140,211,1,0,165,0,0,2,0,2,1
 67 | 35,0,0,138,183,0,1,182,0,1.4,2,0,2,1
 68 | 51,1,2,100,222,0,1,143,1,1.2,1,0,2,1
 69 | 45,0,1,130,234,0,0,175,0,0.6,1,0,2,1
 70 | 44,1,1,120,220,0,1,170,0,0,2,0,2,1
 71 | 62,0,0,124,209,0,1,163,0,0,2,0,2,1
 72 | 54,1,2,120,258,0,0,147,0,0.4,1,0,3,1
 73 | 51,1,2,94,227,0,1,154,1,0,2,1,3,1
 74 | 29,1,1,130,204,0,0,202,0,0,2,0,2,1
 75 | 51,1,0,140,261,0,0,186,1,0,2,0,2,1
 76 | 43,0,2,122,213,0,1,165,0,0.2,1,0,2,1
 77 | 55,0,1,135,250,0,0,161,0,1.4,1,0,2,1
 78 | 51,1,2,125,245,1,0,166,0,2.4,1,0,2,1
 79 | 59,1,1,140,221,0,1,164,1,0,2,0,2,1
 80 | 52,1,1,128,205,1,1,184,0,0,2,0,2,1
 81 | 58,1,2,105,240,0,0,154,1,0.6,1,0,3,1
 82 | 41,1,2,112,250,0,1,179,0,0,2,0,2,1
 83 | 45,1,1,128,308,0,0,170,0,0,2,0,2,1
 84 | 60,0,2,102,318,0,1,160,0,0,2,1,2,1
 85 | 52,1,3,152,298,1,1,178,0,1.2,1,0,3,1
 86 | 42,0,0,102,265,0,0,122,0,0.6,1,0,2,1
 87 | 67,0,2,115,564,0,0,160,0,1.6,1,0,3,1
 88 | 68,1,2,118,277,0,1,151,0,1,2,1,3,1
 89 | 46,1,1,101,197,1,1,156,0,0,2,0,3,1
 90 | 54,0,2,110,214,0,1,158,0,1.6,1,0,2,1
 91 | 58,0,0,100,248,0,0,122,0,1,1,0,2,1
 92 | 48,1,2,124,255,1,1,175,0,0,2,2,2,1
 93 | 57,1,0,132,207,0,1,168,1,0,2,0,3,1
 94 | 52,1,2,138,223,0,1,169,0,0,2,4,2,1
 95 | 54,0,1,132,288,1,0,159,1,0,2,1,2,1
 96 | 45,0,1,112,160,0,1,138,0,0,1,0,2,1
 97 | 53,1,0,142,226,0,0,111,1,0,2,0,3,1
 98 | 62,0,0,140,394,0,0,157,0,1.2,1,0,2,1
 99 | 52,1,0,108,233,1,1,147,0,0.1,2,3,3,1
100 | 43,1,2,130,315,0,1,162,0,1.9,2,1,2,1
101 | 53,1,2,130,246,1,0,173,0,0,2,3,2,1
102 | 42,1,3,148,244,0,0,178,0,0.8,2,2,2,1
103 | 59,1,3,178,270,0,0,145,0,4.2,0,0,3,1
104 | 63,0,1,140,195,0,1,179,0,0,2,2,2,1
105 | 42,1,2,120,240,1,1,194,0,0.8,0,0,3,1
106 | 50,1,2,129,196,0,1,163,0,0,2,0,2,1
107 | 68,0,2,120,211,0,0,115,0,1.5,1,0,2,1
108 | 69,1,3,160,234,1,0,131,0,0.1,1,1,2,1
109 | 45,0,0,138,236,0,0,152,1,0.2,1,0,2,1
110 | 50,0,1,120,244,0,1,162,0,1.1,2,0,2,1
111 | 50,0,0,110,254,0,0,159,0,0,2,0,2,1
112 | 64,0,0,180,325,0,1,154,1,0,2,0,2,1
113 | 57,1,2,150,126,1,1,173,0,0.2,2,1,3,1
114 | 64,0,2,140,313,0,1,133,0,0.2,2,0,3,1
115 | 43,1,0,110,211,0,1,161,0,0,2,0,3,1
116 | 55,1,1,130,262,0,1,155,0,0,2,0,2,1
117 | 37,0,2,120,215,0,1,170,0,0,2,0,2,1
118 | 41,1,2,130,214,0,0,168,0,2,1,0,2,1
119 | 56,1,3,120,193,0,0,162,0,1.9,1,0,3,1
120 | 46,0,1,105,204,0,1,172,0,0,2,0,2,1
121 | 46,0,0,138,243,0,0,152,1,0,1,0,2,1
122 | 64,0,0,130,303,0,1,122,0,2,1,2,2,1
123 | 59,1,0,138,271,0,0,182,0,0,2,0,2,1
124 | 41,0,2,112,268,0,0,172,1,0,2,0,2,1
125 | 54,0,2,108,267,0,0,167,0,0,2,0,2,1
126 | 39,0,2,94,199,0,1,179,0,0,2,0,2,1
127 | 34,0,1,118,210,0,1,192,0,0.7,2,0,2,1
128 | 47,1,0,112,204,0,1,143,0,0.1,2,0,2,1
129 | 67,0,2,152,277,0,1,172,0,0,2,1,2,1
130 | 52,0,2,136,196,0,0,169,0,0.1,1,0,2,1
131 | 74,0,1,120,269,0,0,121,1,0.2,2,1,2,1
132 | 54,0,2,160,201,0,1,163,0,0,2,1,2,1
133 | 49,0,1,134,271,0,1,162,0,0,1,0,2,1
134 | 42,1,1,120,295,0,1,162,0,0,2,0,2,1
135 | 41,1,1,110,235,0,1,153,0,0,2,0,2,1
136 | 41,0,1,126,306,0,1,163,0,0,2,0,2,1
137 | 49,0,0,130,269,0,1,163,0,0,2,0,2,1
138 | 60,0,2,120,178,1,1,96,0,0,2,0,2,1
139 | 62,1,1,128,208,1,0,140,0,0,2,0,2,1
140 | 57,1,0,110,201,0,1,126,1,1.5,1,0,1,1
141 | 64,1,0,128,263,0,1,105,1,0.2,1,1,3,1
142 | 51,0,2,120,295,0,0,157,0,0.6,2,0,2,1
143 | 43,1,0,115,303,0,1,181,0,1.2,1,0,2,1
144 | 42,0,2,120,209,0,1,173,0,0,1,0,2,1
145 | 67,0,0,106,223,0,1,142,0,0.3,2,2,2,1
146 | 76,0,2,140,197,0,2,116,0,1.1,1,0,2,1
147 | 70,1,1,156,245,0,0,143,0,0,2,0,2,1
148 | 44,0,2,118,242,0,1,149,0,0.3,1,1,2,1
149 | 60,0,3,150,240,0,1,171,0,0.9,2,0,2,1
150 | 44,1,2,120,226,0,1,169,0,0,2,0,2,1
151 | 42,1,2,130,180,0,1,150,0,0,2,0,2,1
152 | 66,1,0,160,228,0,0,138,0,2.3,2,0,1,1
153 | 71,0,0,112,149,0,1,125,0,1.6,1,0,2,1
154 | 64,1,3,170,227,0,0,155,0,0.6,1,0,3,1
155 | 66,0,2,146,278,0,0,152,0,0,1,1,2,1
156 | 39,0,2,138,220,0,1,152,0,0,1,0,2,1
157 | 58,0,0,130,197,0,1,131,0,0.6,1,0,2,1
158 | 47,1,2,130,253,0,1,179,0,0,2,0,2,1
159 | 35,1,1,122,192,0,1,174,0,0,2,0,2,1
160 | 58,1,1,125,220,0,1,144,0,0.4,1,4,3,1
161 | 56,1,1,130,221,0,0,163,0,0,2,0,3,1
162 | 56,1,1,120,240,0,1,169,0,0,0,0,2,1
163 | 55,0,1,132,342,0,1,166,0,1.2,2,0,2,1
164 | 41,1,1,120,157,0,1,182,0,0,2,0,2,1
165 | 38,1,2,138,175,0,1,173,0,0,2,4,2,1
166 | 38,1,2,138,175,0,1,173,0,0,2,4,2,1
167 | 67,1,0,160,286,0,0,108,1,1.5,1,3,2,0
168 | 67,1,0,120,229,0,0,129,1,2.6,1,2,3,0
169 | 62,0,0,140,268,0,0,160,0,3.6,0,2,2,0
170 | 63,1,0,130,254,0,0,147,0,1.4,1,1,3,0
171 | 53,1,0,140,203,1,0,155,1,3.1,0,0,3,0
172 | 56,1,2,130,256,1,0,142,1,0.6,1,1,1,0
173 | 48,1,1,110,229,0,1,168,0,1,0,0,3,0
174 | 58,1,1,120,284,0,0,160,0,1.8,1,0,2,0
175 | 58,1,2,132,224,0,0,173,0,3.2,2,2,3,0
176 | 60,1,0,130,206,0,0,132,1,2.4,1,2,3,0
177 | 40,1,0,110,167,0,0,114,1,2,1,0,3,0
178 | 60,1,0,117,230,1,1,160,1,1.4,2,2,3,0
179 | 64,1,2,140,335,0,1,158,0,0,2,0,2,0
180 | 43,1,0,120,177,0,0,120,1,2.5,1,0,3,0
181 | 57,1,0,150,276,0,0,112,1,0.6,1,1,1,0
182 | 55,1,0,132,353,0,1,132,1,1.2,1,1,3,0
183 | 65,0,0,150,225,0,0,114,0,1,1,3,3,0
184 | 61,0,0,130,330,0,0,169,0,0,2,0,2,0
185 | 58,1,2,112,230,0,0,165,0,2.5,1,1,3,0
186 | 50,1,0,150,243,0,0,128,0,2.6,1,0,3,0
187 | 44,1,0,112,290,0,0,153,0,0,2,1,2,0
188 | 60,1,0,130,253,0,1,144,1,1.4,2,1,3,0
189 | 54,1,0,124,266,0,0,109,1,2.2,1,1,3,0
190 | 50,1,2,140,233,0,1,163,0,0.6,1,1,3,0
191 | 41,1,0,110,172,0,0,158,0,0,2,0,3,0
192 | 51,0,0,130,305,0,1,142,1,1.2,1,0,3,0
193 | 58,1,0,128,216,0,0,131,1,2.2,1,3,3,0
194 | 54,1,0,120,188,0,1,113,0,1.4,1,1,3,0
195 | 60,1,0,145,282,0,0,142,1,2.8,1,2,3,0
196 | 60,1,2,140,185,0,0,155,0,3,1,0,2,0
197 | 59,1,0,170,326,0,0,140,1,3.4,0,0,3,0
198 | 46,1,2,150,231,0,1,147,0,3.6,1,0,2,0
199 | 67,1,0,125,254,1,1,163,0,0.2,1,2,3,0
200 | 62,1,0,120,267,0,1,99,1,1.8,1,2,3,0
201 | 65,1,0,110,248,0,0,158,0,0.6,2,2,1,0
202 | 44,1,0,110,197,0,0,177,0,0,2,1,2,0
203 | 60,1,0,125,258,0,0,141,1,2.8,1,1,3,0
204 | 58,1,0,150,270,0,0,111,1,0.8,2,0,3,0
205 | 68,1,2,180,274,1,0,150,1,1.6,1,0,3,0
206 | 62,0,0,160,164,0,0,145,0,6.2,0,3,3,0
207 | 52,1,0,128,255,0,1,161,1,0,2,1,3,0
208 | 59,1,0,110,239,0,0,142,1,1.2,1,1,3,0
209 | 60,0,0,150,258,0,0,157,0,2.6,1,2,3,0
210 | 49,1,2,120,188,0,1,139,0,2,1,3,3,0
211 | 59,1,0,140,177,0,1,162,1,0,2,1,3,0
212 | 57,1,2,128,229,0,0,150,0,0.4,1,1,3,0
213 | 61,1,0,120,260,0,1,140,1,3.6,1,1,3,0
214 | 39,1,0,118,219,0,1,140,0,1.2,1,0,3,0
215 | 61,0,0,145,307,0,0,146,1,1,1,0,3,0
216 | 56,1,0,125,249,1,0,144,1,1.2,1,1,2,0
217 | 43,0,0,132,341,1,0,136,1,3,1,0,3,0
218 | 62,0,2,130,263,0,1,97,0,1.2,1,1,3,0
219 | 63,1,0,130,330,1,0,132,1,1.8,2,3,3,0
220 | 65,1,0,135,254,0,0,127,0,2.8,1,1,3,0
221 | 48,1,0,130,256,1,0,150,1,0,2,2,3,0
222 | 63,0,0,150,407,0,0,154,0,4,1,3,3,0
223 | 55,1,0,140,217,0,1,111,1,5.6,0,0,3,0
224 | 65,1,3,138,282,1,0,174,0,1.4,1,1,2,0
225 | 56,0,0,200,288,1,0,133,1,4,0,2,3,0
226 | 54,1,0,110,239,0,1,126,1,2.8,1,1,3,0
227 | 70,1,0,145,174,0,1,125,1,2.6,0,0,3,0
228 | 62,1,1,120,281,0,0,103,0,1.4,1,1,3,0
229 | 35,1,0,120,198,0,1,130,1,1.6,1,0,3,0
230 | 59,1,3,170,288,0,0,159,0,0.2,1,0,3,0
231 | 64,1,2,125,309,0,1,131,1,1.8,1,0,3,0
232 | 47,1,2,108,243,0,1,152,0,0,2,0,2,0
233 | 57,1,0,165,289,1,0,124,0,1,1,3,3,0
234 | 55,1,0,160,289,0,0,145,1,0.8,1,1,3,0
235 | 64,1,0,120,246,0,0,96,1,2.2,0,1,2,0
236 | 70,1,0,130,322,0,0,109,0,2.4,1,3,2,0
237 | 51,1,0,140,299,0,1,173,1,1.6,2,0,3,0
238 | 58,1,0,125,300,0,0,171,0,0,2,2,3,0
239 | 60,1,0,140,293,0,0,170,0,1.2,1,2,3,0
240 | 77,1,0,125,304,0,0,162,1,0,2,3,2,0
241 | 35,1,0,126,282,0,0,156,1,0,2,0,3,0
242 | 70,1,2,160,269,0,1,112,1,2.9,1,1,3,0
243 | 59,0,0,174,249,0,1,143,1,0,1,0,2,0
244 | 64,1,0,145,212,0,0,132,0,2,1,2,1,0
245 | 57,1,0,152,274,0,1,88,1,1.2,1,1,3,0
246 | 56,1,0,132,184,0,0,105,1,2.1,1,1,1,0
247 | 48,1,0,124,274,0,0,166,0,0.5,1,0,3,0
248 | 56,0,0,134,409,0,0,150,1,1.9,1,2,3,0
249 | 66,1,1,160,246,0,1,120,1,0,1,3,1,0
250 | 54,1,1,192,283,0,0,195,0,0,2,1,3,0
251 | 69,1,2,140,254,0,0,146,0,2,1,3,3,0
252 | 51,1,0,140,298,0,1,122,1,4.2,1,3,3,0
253 | 43,1,0,132,247,1,0,143,1,0.1,1,4,3,0
254 | 62,0,0,138,294,1,1,106,0,1.9,1,3,2,0
255 | 67,1,0,100,299,0,0,125,1,0.9,1,2,2,0
256 | 59,1,3,160,273,0,0,125,0,0,2,0,2,0
257 | 45,1,0,142,309,0,0,147,1,0,1,3,3,0
258 | 58,1,0,128,259,0,0,130,1,3,1,2,3,0
259 | 50,1,0,144,200,0,0,126,1,0.9,1,0,3,0
260 | 62,0,0,150,244,0,1,154,1,1.4,1,0,2,0
261 | 38,1,3,120,231,0,1,182,1,3.8,1,0,3,0
262 | 66,0,0,178,228,1,1,165,1,1,1,2,3,0
263 | 52,1,0,112,230,0,1,160,0,0,2,1,2,0
264 | 53,1,0,123,282,0,1,95,1,2,1,2,3,0
265 | 63,0,0,108,269,0,1,169,1,1.8,1,2,2,0
266 | 54,1,0,110,206,0,0,108,1,0,1,1,2,0
267 | 66,1,0,112,212,0,0,132,1,0.1,2,1,2,0
268 | 55,0,0,180,327,0,2,117,1,3.4,1,0,2,0
269 | 49,1,2,118,149,0,0,126,0,0.8,2,3,2,0
270 | 54,1,0,122,286,0,0,116,1,3.2,1,2,2,0
271 | 56,1,0,130,283,1,0,103,1,1.6,0,0,3,0
272 | 46,1,0,120,249,0,0,144,0,0.8,2,0,3,0
273 | 61,1,3,134,234,0,1,145,0,2.6,1,2,2,0
274 | 67,1,0,120,237,0,1,71,0,1,1,0,2,0
275 | 58,1,0,100,234,0,1,156,0,0.1,2,1,3,0
276 | 47,1,0,110,275,0,0,118,1,1,1,1,2,0
277 | 52,1,0,125,212,0,1,168,0,1,2,2,3,0
278 | 58,1,0,146,218,0,1,105,0,2,1,1,3,0
279 | 57,1,1,124,261,0,1,141,0,0.3,2,0,3,0
280 | 58,0,1,136,319,1,0,152,0,0,2,2,2,0
281 | 61,1,0,138,166,0,0,125,1,3.6,1,1,2,0
282 | 42,1,0,136,315,0,1,125,1,1.8,1,0,1,0
283 | 52,1,0,128,204,1,1,156,1,1,1,0,0,0
284 | 59,1,2,126,218,1,1,134,0,2.2,1,1,1,0
285 | 40,1,0,152,223,0,1,181,0,0,2,0,3,0
286 | 61,1,0,140,207,0,0,138,1,1.9,2,1,3,0
287 | 46,1,0,140,311,0,1,120,1,1.8,1,2,3,0
288 | 59,1,3,134,204,0,1,162,0,0.8,2,2,2,0
289 | 57,1,1,154,232,0,0,164,0,0,2,1,2,0
290 | 57,1,0,110,335,0,1,143,1,3,1,1,3,0
291 | 55,0,0,128,205,0,2,130,1,2,1,1,3,0
292 | 61,1,0,148,203,0,1,161,0,0,2,1,3,0
293 | 58,1,0,114,318,0,2,140,0,4.4,0,3,1,0
294 | 58,0,0,170,225,1,0,146,1,2.8,1,2,1,0
295 | 67,1,2,152,212,0,0,150,0,0.8,1,0,3,0
296 | 44,1,0,120,169,0,1,144,1,2.8,0,0,1,0
297 | 63,1,0,140,187,0,0,144,1,4,2,2,3,0
298 | 63,0,0,124,197,0,1,136,1,0,1,0,2,0
299 | 59,1,0,164,176,1,0,90,0,1,1,2,1,0
300 | 57,0,0,140,241,0,1,123,1,0.2,1,0,3,0
301 | 45,1,3,110,264,0,1,132,0,1.2,1,0,3,0
302 | 68,1,0,144,193,1,1,141,0,3.4,1,2,3,0
303 | 57,1,0,130,131,0,1,115,1,1.2,1,1,3,0
304 | 57,0,1,130,236,0,0,174,0,0,1,1,2,0
305 | 


--------------------------------------------------------------------------------
/login.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>LOGIN PAGE</title>
  8 |     <link rel="stylesheet" href="login.css">
  9 |     <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
 10 |     <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
 11 |     <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
 12 |     <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-storage-compat.js"></script>
 13 |     <script src="https://smtpjs.com/v3/smtp.js"></script>
 14 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.1.0/css/boxicons.min.css">
 15 | </head>
 16 | <body>
 17 |     <div id="container" class="container">
 18 |         <!-- FORM SECTION -->
 19 |         <div class="row">
 20 |        <!-- SIGN UP -->
 21 |     <div class="col align-items-center flex-col sign-up">
 22 |         <div class="form-wrapper align-items-center">
 23 |             <div class="form sign-up">
 24 |                 <!-- Add an input field for the user's name -->
 25 |                 <div class="input-group">
 26 |                     <i class='bx bxs-user'></i>
 27 |                     <input id="signup-name" type="text" placeholder="Full Name">
 28 |                 </div>
 29 |                 <div class="input-group">
 30 |                     <i class='bx bx-mail-send'></i>
 31 |                     <input id="signup-email" type="email" placeholder="Email">
 32 |                 </div>
 33 |                 <div class="input-group">
 34 |                     <i class='bx bxs-lock-alt'></i>
 35 |                     <input id="signup-password" type="password" placeholder="Password">
 36 |                 </div>
 37 |                 <div class="input-group">
 38 |                     <i class='bx bxs-lock-alt'></i>
 39 |                     <input id="signup-confirm-password" type="password" placeholder="Confirm password">
 40 |                 </div>
 41 |                 <button id="signup-button">
 42 |                     Sign up
 43 |                 </button>
 44 |                 <p>
 45 |                     <span>
 46 |                         Already have an account?
 47 |                     </span>
 48 |                     <b onclick="toggle()" class="pointer">
 49 |                         Sign in here
 50 |                     </b>
 51 |                 </p>
 52 |             </div>
 53 |         </div>
 54 |     </div>
 55 |     <!-- END SIGN UP -->
 56 | 
 57 |         <!-- SIGN IN -->
 58 |         <div class="col align-items-center flex-col sign-in hidden"> <!-- Add the "hidden" class -->
 59 |             <div class="form-wrapper align-items-center">
 60 |                 <div class="form sign-in">
 61 |                     <div class="input-group">
 62 |                         <i class='bx bxs-user'></i>
 63 |                         <input id="signin-email" type="email" placeholder="Email">
 64 |                     </div>
 65 |                     <div class="input-group">
 66 |                         <i class='bx bxs-lock-alt'></i>
 67 |                         <input id="signin-password" type="password" placeholder="Password">
 68 |                     </div>
 69 |                     <!-- Add a unique ID for the sign-in button -->
 70 |                     <button id="signin-button">
 71 |                         Sign in
 72 |                     </button>
 73 |                     <p>
 74 |                         <b id="forgot-password-link">
 75 |                             Forgot password?
 76 |                         </b>
 77 |                     </p>
 78 |                     <!-- Add a div for the reset password form fields -->
 79 |                     <div id="reset-password-form" hidden>
 80 |                         <div class="input-group">
 81 |                             <i class='bx bx-mail-send'></i>
 82 |                             <input id="reset-email" type="email" placeholder="Enter your email">
 83 |                         </div>
 84 |                         <button id="reset-button">
 85 |                             Reset Password
 86 |                         </button>
 87 |                     </div>
 88 |                     <p>
 89 |                         <span>
 90 |                             Don't have an account?
 91 |                         </span>
 92 |                         <b onclick="toggle()" class="pointer">
 93 |                             Sign up here
 94 |                         </b>
 95 |                     </p>
 96 |                 </div>
 97 |             </div>
 98 |             <div class="form-wrapper">
 99 |     
100 |             </div>
101 |         </div>
102 |         <!-- END SIGN IN -->
103 |         </div>
104 |         <!-- END FORM SECTION -->
105 |         <!-- CONTENT SECTION -->
106 |         <div class="row content-row">
107 |             <!-- SIGN IN CONTENT -->
108 |             <div class="col align-items-center flex-col">
109 |                 <div class="text sign-in">
110 |                     <h2>
111 |                         Welcome
112 |                     </h2>
113 |     
114 |                 </div>
115 |                 <div class="img sign-in">
116 |         
117 |                 </div>
118 |             </div>
119 |             <!-- END SIGN IN CONTENT -->
120 |             <!-- SIGN UP CONTENT -->
121 |             <div class="col align-items-center flex-col">
122 |                 <div class="img sign-up">
123 |                 
124 |                 </div>
125 |                 <div class="text sign-up">
126 |                     <h2>
127 |                         Join with us
128 |                     </h2>
129 |     
130 |                 </div>
131 |             </div>
132 |             <!-- END SIGN UP CONTENT -->
133 |         </div>
134 |         <!-- END CONTENT SECTION -->
135 |     </div><div id="container" class="container">
136 |         <!-- FORM SECTION -->
137 |         <div class="row">
138 |             <!-- SIGN UP -->
139 |             <div class="col align-items-center flex-col sign-up">
140 |                 <div class="form-wrapper align-items-center">
141 |                     <div class="form sign-up">
142 |                         <div class="input-group">
143 |                             <i class='bx bxs-user'></i>
144 |                             <input type="text" placeholder="Username">
145 |                         </div>
146 |                         <div class="input-group">
147 |                             <i class='bx bx-mail-send'></i>
148 |                             <input type="email" placeholder="Email">
149 |                         </div>
150 |                         <div class="input-group">
151 |                             <i class='bx bxs-lock-alt'></i>
152 |                             <input type="password" placeholder="Password">
153 |                         </div>
154 |                         <div class="input-group">
155 |                             <i class='bx bxs-lock-alt'></i>
156 |                             <input type="password" placeholder="Confirm password">
157 |                         </div>
158 |                         <button>
159 |                             Sign up
160 |                         </button>
161 |                         <p>
162 |                             <span>
163 |                                 Already have an account?
164 |                             </span>
165 |                             <b onclick="toggle()" class="pointer">
166 |                                 Sign in here
167 |                             </b>
168 |                         </p>
169 |                     </div>
170 |                 </div>
171 |             
172 |             </div>
173 |             <!-- END SIGN UP -->
174 |             <!-- SIGN IN -->
175 |             <div class="col align-items-center flex-col sign-in">
176 |                 <div class="form-wrapper align-items-center">
177 |                     <div class="form sign-in">
178 |                         <div class="input-group">
179 |                             <i class='bx bxs-user'></i>
180 |                             <input type="text" placeholder="Username">
181 |                         </div>
182 |                         <div class="input-group">
183 |                             <i class='bx bxs-lock-alt'></i>
184 |                             <input type="password" placeholder="Password">
185 |                         </div>
186 |                         <button>
187 |                             Sign in
188 |                         </button>
189 |                         <p>
190 |                             <b>
191 |                                 Forgot password?
192 |                             </b>
193 |                         </p>
194 |                         <p>
195 |                             <span>
196 |                                 Don't have an account?
197 |                             </span>
198 |                             <b onclick="toggle()" class="pointer">
199 |                                 Sign up here
200 |                             </b>
201 |                         </p>
202 |                     </div>
203 |                 </div>
204 |                 <div class="form-wrapper">
205 |         
206 |                 </div>
207 |             </div>
208 |             <!-- END SIGN IN -->
209 |         </div>
210 |         <!-- END FORM SECTION -->
211 |         <!-- CONTENT SECTION -->
212 |         <div class="row content-row">
213 |             <!-- SIGN IN CONTENT -->
214 |             <div class="col align-items-center flex-col">
215 |                 <div class="text sign-in">
216 |                     <h2>
217 |                         Welcome
218 |                     </h2>
219 |     
220 |                 </div>
221 |                 <div class="img sign-in">
222 |         
223 |                 </div>
224 |             </div>
225 |             <!-- END SIGN IN CONTENT -->
226 |             <!-- SIGN UP CONTENT -->
227 |             <div class="col align-items-center flex-col">
228 |                 <div class="img sign-up">
229 |                 
230 |                 </div>
231 |                 <div class="text sign-up">
232 |                     <h2>
233 |                         Join with us
234 |                     </h2>
235 |     
236 |                 </div>
237 |             </div>
238 |             <!-- END SIGN UP CONTENT -->
239 |         </div>
240 |         <!-- END CONTENT SECTION -->
241 |     </div><div id="container" class="container">
242 |         <!-- FORM SECTION -->
243 |         <div class="row">
244 |             <!-- SIGN UP -->
245 |             <div class="col align-items-center flex-col sign-up">
246 |                 <div class="form-wrapper align-items-center">
247 |                     <div class="form sign-up">
248 |                         <div class="input-group">
249 |                             <i class='bx bxs-user'></i>
250 |                             <input type="text" placeholder="Username">
251 |                         </div>
252 |                         <div class="input-group">
253 |                             <i class='bx bx-mail-send'></i>
254 |                             <input type="email" placeholder="Email">
255 |                         </div>
256 |                         <div class="input-group">
257 |                             <i class='bx bxs-lock-alt'></i>
258 |                             <input type="password" placeholder="Password">
259 |                         </div>
260 |                         <div class="input-group">
261 |                             <i class='bx bxs-lock-alt'></i>
262 |                             <input type="password" placeholder="Confirm password">
263 |                         </div>
264 |                         <button>
265 |                             Sign up
266 |                         </button>
267 |                         <p>
268 |                             <span>
269 |                                 Already have an account?
270 |                             </span>
271 |                             <b onclick="toggle()" class="pointer">
272 |                                 Sign in here
273 |                             </b>
274 |                         </p>
275 |                     </div>
276 |                 </div>
277 |             
278 |             </div>
279 |             <!-- END SIGN UP -->
280 |             <!-- SIGN IN -->
281 |             <div class="col align-items-center flex-col sign-in">
282 |                 <div class="form-wrapper align-items-center">
283 |                     <div class="form sign-in">
284 |                         <div class="input-group">
285 |                             <i class='bx bxs-user'></i>
286 |                             <input type="text" placeholder="Username">
287 |                         </div>
288 |                         <div class="input-group">
289 |                             <i class='bx bxs-lock-alt'></i>
290 |                             <input type="password" placeholder="Password">
291 |                         </div>
292 |                         <button>
293 |                             Sign in
294 |                         </button>
295 |                         <p>
296 |                             <b>
297 |                                 Forgot password?
298 |                             </b>
299 |                         </p>
300 |                         <p>
301 |                             <span>
302 |                                 Don't have an account?
303 |                             </span>
304 |                             <b onclick="toggle()" class="pointer">
305 |                                 Sign up here
306 |                             </b>
307 |                         </p>
308 |                     </div>
309 |                 </div>
310 |                 <div class="form-wrapper">
311 |         
312 |                 </div>
313 |             </div>
314 |             <!-- END SIGN IN -->
315 |         </div>
316 |         <!-- END FORM SECTION -->
317 |         <!-- CONTENT SECTION -->
318 |         <div class="row content-row">
319 |             <!-- SIGN IN CONTENT -->
320 |             <div class="col align-items-center flex-col">
321 |                 <div class="text sign-in">
322 |                     <h2>
323 |                         Welcome
324 |                     </h2>
325 |     
326 |                 </div>
327 |                 <div class="img sign-in">
328 |         
329 |                 </div>
330 |             </div>
331 |             <!-- END SIGN IN CONTENT -->
332 |             <!-- SIGN UP CONTENT -->
333 |             <div class="col align-items-center flex-col">
334 |                 <div class="img sign-up">
335 |                 
336 |                 </div>
337 |                 <div class="text sign-up">
338 |                     <h2>
339 |                         Join with us
340 |                     </h2>
341 |     
342 |                 </div>
343 |             </div>
344 |             <!-- END SIGN UP CONTENT -->
345 |         </div>
346 |         <!-- END CONTENT SECTION -->
347 |     </div>
348 | </body>
349 | <script>
350 |     let container = document.getElementById('container')
351 |     toggle = () => {
352 |         container.classList.toggle('sign-in')
353 |         container.classList.toggle('sign-up')
354 |     }
355 |     setTimeout(() => {
356 |         container.classList.add('sign-in')
357 |     }, 200)
358 | </script>
359 | <script src="script.js"></script>
360 | <script src="forgot.js"></script>
361 | </html>
362 | 
363 | 
364 | 
365 | 
366 | 
367 | 
368 | <!--streamlit run main.py --server.port 8501-->


--------------------------------------------------------------------------------