Update README.md

Reviewed-on: ralphi3/math-website#1

README.md

@@ -1,3 +1,55 @@
-Math website mainly focusing on bivariate data at the moment as of 16/06/2026
+Math website
 
-Planned to do more than just bivariate data
+to access list of all users in the database go to
+http://127.0.0.1:5000/users
+
+Live website with the latest commit as of 28/07/2026 12:11pm
+https://math.ralphie.xyz(NOT RUNNING ATM)
+
+working on email system for reseting password but isnt working at the moment and can break the website if uncommented and ran
+
+only works on device local not local network or with a public ip and port forwarding working to fix this
+
+at the moment there is no demo kinda build to test it out but that will be added in the future with the official website demo will just be a less features way to check the website out
+
+
+Made
+
+singup system, 
+signin system, 
+hiding bivariate page if not signed in, 
+database to store accounts
+
+------------------------------------------------------------------------------
+
+Not Made
+
+information, 
+quizzes, 
+formulas, 
+good looking pages
+reseting password
+guides
+
+
+Guide to running 
+```
+git clone https://git.ralphie.xyz/Jordan/math-website.git
+cd math-website
+python3 ./app.py
+```
+Then go to http://localhost:5000
+
+
+If you want to run this on a vps or server at home this is how to do it (only being used on a ubuntu server so might not work on other distros like debian)
+```
+git clone https://git.ralphie.xyz/Jordan/math-website.git
+cd math-website
+sudo apt install python3.14-venv
+python3 -m venv venv
+source venv/bin/activate
+pip install flask flask_mail flask_sqlalchemy werkzeug gunicorn
+gunicorn --workers 3 --bind 0.0.0.0:8000 app:app
+```
+
+Then access it at you_vps_or_server_ip:8000

app.py

@@ -1,12 +1,29 @@
-from flask import Flask, render_template, redirect, request, url_for
+from functools import wraps
+
+from flask import Flask, render_template, redirect, request, url_for, session, flash
+from flask_mail import Mail
 from flask_sqlalchemy import SQLAlchemy
 from werkzeug.security import generate_password_hash, check_password_hash
+from sqlalchemy.exc import IntegrityError
 
 app = Flask(__name__)
 
+# email_option = str(0)
+# email = str(0)
+# password = str(0)
+
+# with app.app_context():
+#     print("--- Server Initialization ---")
+#     response = input("Set the email and password type 'skip' to skip this: ")
+#     if response.lower() != "skip":
+#         email = input("Enter your email")
+#         password = input("Enter your emails password")
+#     print(f"Server started. Current role is: {email}\n")
+
+
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///accounts.db'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-app.secret_key = 'super_secret_session_encryption_key' 
+app.secret_key = 'this key is so secret noone will ever get it 👌' 
 db = SQLAlchemy(app)
 
 class User(db.Model):
@@ -19,71 +36,154 @@ with app.app_context():
     db.create_all()
 
 
+def login_required(view_func):
+    @wraps(view_func)
+    def wrapped(*args, **kwargs):
+        if 'user_id' not in session:
+            flash('sign in to view that page.')
+            return redirect(url_for('signin'))
+        return view_func(*args, **kwargs)
+    return wrapped
+
+
+from sqlalchemy.exc import IntegrityError
+
 @app.route('/submit-form', methods=['POST'])
 def handle_submission():
-    form_username = request.form.get('username')
+    form_username = (request.form.get('username') or '').strip()
-    form_email = request.form.get('email')
+    form_email = (request.form.get('email') or '').strip().lower()
-    form_password = request.form.get('password')
+    form_password = request.form.get('password') or ''
-    
+
+    if not form_username or not form_email or not form_password:
+        return render_template('signup.html', error="All fields must be entered to complete registration"), 400
+
+    if len(form_password) < 8:
+        return render_template('signup.html', error="Password must be at least 8 characters"), 400
+
     if User.query.filter_by(username=form_username).first():
-        return "<h3>Username taken!</h3>", 400
+        return render_template('signup.html', user_taken="Username has already been taken"), 400
     if User.query.filter_by(email=form_email).first():
-        return "<h3>Email already registered!</h3>", 400
+        return render_template('signup.html', email_taken="Email has already been used before"), 400
-    
+
     hashed_password = generate_password_hash(form_password)
-    
     new_user = User(username=form_username, email=form_email, password_hash=hashed_password)
-    db.session.add(new_user)
+
-    db.session.commit()
+    try:
-    
+        db.session.add(new_user)
-    return redirect(url_for('success'))
+        db.session.commit()
+    except IntegrityError:
+        db.session.rollback()
+        return render_template('signup.html', error="Username or email has already taken"), 400
+
+    return render_template('signup.html', success_message="Account successfully created")
 
-@app.route('/success')
-def success():
-    return "<h3>Data successfully saved to the database!</h3>"
 
 @app.route('/users')
 def view_users():
     all_users = User.query.all()
-    
 
     html_output = "<h2>Registered Accounts</h2><table border='1' cellpadding='10'>"
     html_output += "<tr><th>ID</th><th>Username</th><th>Email</th></tr>"
-    
+
     for user in all_users:
-        html_output += f"<tr><td>{user.id}</td><td>{user.username}</td><td>{user.email}</td><td>{user.password_hash}</td></tr>"
+        html_output += f"<tr><td>{user.id}</td><td>{user.username}</td><td>{user.email}</td></tr>"
-        
+
     html_output += "</table>"
-    
+
     if not all_users:
-        return "<h3>No accounts found in the database yet.</h3>"
+        return "<h3>emptyyyyy daaatabase</h3>"
-        
+
     return html_output
 
+# Mail system uncomment all of the stuff below this line to use but requires a google account to use will have to put email in username area and password in password area when starting the py file
+# app.config['MAIL_SERVER'] = 'smtp.google.com'
+# app.config['MAIL_PORT'] = 587
+# app.config['MAIL_USE_TLS'] = True
+# app.config['MAIL_USERNAME'] = email
+# app.config['MAIL_PASSWORD'] = password
+
+
 
 @app.route('/')
 def home():
     return render_template('index.html')
 
 @app.route('/bivariate')
+@login_required
 def bivariate():
     return render_template('bivariate.html')
 
+@app.route('/simultaneousequations')
+@login_required
+def simultaneousequations():
+    return render_template('simultaneousequations.html')
+
+@app.route('/calculus')
+@login_required
+def calculus():
+    return render_template('calculus.html')
+
+@app.route('/triganometry')
+@login_required
+def triganometry():
+    return render_template('triganometry.html')
+
+
 @app.route('/about')
 def about():
     return render_template('about.html')
 
-@app.route('/signin')
+@app.route('/signin', methods=['GET', 'POST'])
 def signin():
+    if request.method == 'POST':
+        form_username = request.form.get('username')
+        form_password = request.form.get('password')
+
+        user = User.query.filter_by(username=form_username).first()
+
+        if user is None or not check_password_hash(user.password_hash, form_password):
+            flash('Incorrect username or password.')
+            return render_template('signin.html'), 401
+
+        session['user_id'] = user.id
+        session['username'] = user.username
+        return redirect(url_for('home'))
+
     return render_template('signin.html')
 
+
+@app.route('/logout')
+def logout():
+    session.clear()
+    return redirect(url_for('home'))
+
 @app.route('/signup')
 def signup():
     return render_template('signup.html')
 
+@app.route('/pagemaker')
+def pagemaker():
+    return render_template('pagemaker.html')
+
 @app.route('/all_users')
+@login_required
 def all_users():
     return render_template('all_users.html')
 
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('404.html'), 404
+
+@app.route('/resetpassword')
+def resetpassword():
+    return render_template('resetpassword.html')
+
+@app.route('/resetpasscode')
+def resetpasscode():
+    return render_template('resetpasswordcode.html')
+
+@app.route('/newpassword')
+def newpassword():
+    return render_template('newpassword.html')
 if __name__ == '__main__':
     app.run(debug=True)

install(experimental).sh

@@ -0,0 +1,7 @@
+git clone https://git.ralphie.xyz/Jordan/math-website.git
+cd math-website
+sudo apt install python3.14-venv screen
+python3 -m venv venv
+echo "screen -S math-website source venv/bin/activate && pip install flask flask_mail flask_sqlalchemy werkzeug gunicorn && gunicorn --workers 3 --bind 0.0.0.0:8000 app:app"
+chmod +x launch.sh
+echo To launch the website run ./launch.sh when launched you can deatach from the screen with (ctrl + a + d) all at once

static/style.css

@@ -6,7 +6,7 @@ body {
   margin: 0;
   font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   color: #1a1a1a;
-  background-color: #fafafa;
+  background-color: #F5F5F5;
   line-height: 1.6;
 }
 
@@ -27,7 +27,7 @@ a:hover {
   margin: 0;
   padding: 0;
   display: flex;
-  background-color: #333333;
+  background-color: #111111;
   position: fixed;
   top: 0;
   left: 0;
@@ -49,7 +49,7 @@ a:hover {
 }
 
 .navbar li a:hover {
-  background-color: #111111;
+  background-color: #222222;
 }
 
 main {
@@ -57,3 +57,58 @@ main {
   max-width: 800px;
   padding: 32px 24px;
 }
+
+image {
+  border-color: black;
+  border-width: 2px;
+  border-style: groove;
+}
+
+.flash-messages {
+  list-style-type: none;
+  margin: 0 0 16px 0;
+  padding: 0;
+}
+
+.flash-messages li {
+  background-color: #fee2e2;
+  color: #991b1b;
+  padding: 10px 14px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.signup{
+  border: 3px solid black;
+  padding: 40px;
+  border-radius: 4px;
+  margin-left: auto;
+}
+
+.sources {
+  background-color: rgba(187, 185, 185, 0.479);
+  color: white;
+  text-align: left;
+  height: 200px;
+  width: 1710px;
+  margin-top: auto;
+  margin-left: -20px;
+  margin-bottom: -27px;
+}
+
+.sourcescontent{
+    margin-left: 8px;
+    color:white;
+}
+
+.sourcestext{
+  color: rgb(97, 97, 97);
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 8px;
+}
+
+.mainpart {
+  display: flex;
+  flex-direction: column;
+  min-height: 80vh;
+}

templates/404.html

@@ -0,0 +1,6 @@
+{% extends 'base.html' %}
+{% block content %}
+<h1>oops</h1>
+<p>The page you are looking for does not exist.</p>
+<p>Return to home page by click the home button on the top left of this page</p>
+{% endblock %}

templates/about.html

@@ -1,14 +1,6 @@
 {% extends 'base.html' %}
-
 {% block content %}
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
     <h1>About this website</h1>
-</body>
 
+    <p>This website is about different subjects in Maths and resources for them.</p>
 {% endblock %}

templates/all_users.html

@@ -2,4 +2,5 @@
 
 {% block content %}
 <iframe src="http://127.0.0.1:5000/users" width="100%" height="500px"></iframe>
+<h3>password is encrypted which is why it show up as scrypt: and someother stuff</h3>
 {% endblock %}

templates/base.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html>
+<html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,11 +8,17 @@
 <body>
     <ul class="navbar">
         <li><a href="{{ url_for('home') }}">Home</a></li>
-        <li><a href="{{ url_for('bivariate') }}">Bivariate Data</a></li>
         <li><a href="{{ url_for('about') }}">About</a></li>
-        <li><a href="{{ url_for('all_users') }}">all_users</a></li>
+        {% if session.user_id %}
+        <li><a href="{{ url_for('bivariate') }}">Bivariate Data</a></li>
+        <li><a href="{{ url_for('simultaneousequations') }}">Simultaneous Equations</a></li>
+        <li><a href="{{ url_for('triganometry') }}">Triganometry</a></li>
+        <li style="margin-left: auto; color: white; margin-top: 14px; margin-left: 550px;">Hi, {{ session.username }}</li>
+        <li style="margin-left: 20px;"><a href="{{ url_for('logout') }}">Sign Out</a></li>
+        {% else %}
         <li style="margin-left: auto;"><a href="{{ url_for('signup') }}">Sign Up</a></li>
         <li style="margin-left:0px"><a href="{{ url_for('signin') }}">Sign In</a></li>
+        {% endif %}
     </ul>
     <main>
         {% block content %}{% endblock %}

templates/bivariate.html

@@ -1,24 +1,11 @@
 {% extends 'base.html' %}
-
 {% block content %}
-
+<div class="mainpart">
-<div>
+<h1>Information on bivariate data Analysis</h1>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bivariate Data Analysis</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <h1>Information on bivariate data Analysis</h1>
 
     <div class="information">
         <h2>information</h2>
 
-        <p>
-            information on bivariate data can go here
-        </p>
-
     </div>
 
     <div class="formulas">
@@ -28,11 +15,17 @@
 
     <div class="quizzes">
         <h2>quizzes</h2>
-
     </div>
-</body>
-</html>
 
 </div>
-
+    <footer class="sources">
+        <div class="sourcescontent">
+        <h2>Sources</h2>
+        <p class="sourcestext">links to sources would go here</p>
+        <p class="sourcestext">source one will embed link into text</p>
+        <p class="sourcestext">source two will embed link into text</p>
+        <p class="sourcestext">source three will embed link into text</p>
+        <p class="sourcestext">source four will embed link into text</p>
+        </div>
+    </footer>
 {% endblock %}

templates/calculus.html

@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="mainpart">
+<h1>Information on calculus</h1>
+
+    <div class="information">
+        <h2>information</h2>
+
+    </div>
+
+    <div class="formulas">
+        <h2>formulas</h2>
+
+    </div>
+
+    <div class="quizzes">
+        <h2>quizzes</h2>
+    </div>
+
+</div>
+    <footer class="sources">
+        <div class="sourcescontent">
+        <h2>Sources</h2>
+        <p class="sourcestext">links to sources would go here</p>
+        <p class="sourcestext">source one will embed link into text</p>
+        <p class="sourcestext">source two will embed link into text</p>
+        <p class="sourcestext">source three will embed link into text</p>
+        <p class="sourcestext">source four will embed link into text</p>
+        <div>
+    </footer>
+{% endblock %}

templates/index.html

@@ -3,9 +3,17 @@
 
 <div>
 
-    <h1>homepage for math website wow</h1>
+    <h1>Math website</h1>
 
-    <iframe src="http://127.0.0.1:5000/users" width="100%" height="500px"></iframe>
+    <h2>If you want to access the math topics on this website you must be signed into a account</h2>
+
+    <h2>
+        The math topics that will be on this website
+        <li>Bivariate Data</li>
+        <li>Simultaneous Equations</li>
+        <li>Calculus</li>
+        <li>Triganometry</li>
+    </h2>
 
 </div>
 

templates/newpassword.html

@@ -0,0 +1,27 @@
+{% extends 'base.html' %}
+{% block content %}
+
+<style>
+    body{
+        margin-left: 500px;
+        margin-top: 80px;
+        margin-right: 500px;
+        border: 3px solid black;
+        padding: 10px;
+        border-radius: 4px;
+    }
+
+    .button{
+        margin-left: 250px;
+    }
+
+    .emailbox{
+        margin-left: 170px;
+    }
+</style>
+<h2>Enter your new password<h2>
+<p style="color: gray; text-decoration: underline;">This page is just a placeholder at the moment not functional</p>
+<p class="pass">Enter new password:      <input required><br><br></p>
+<p class="pass">Enter new password again      <input required><br><br></p>
+<a class="button" href="/" style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; border-color: gray; border-radius: 4px; border-width: 4px; border-style: solid; display: inline-block; text-decoration: none; padding: 8px 16px; color: black;">Change</a>
+{% endblock %}

templates/pagemaker.html

@@ -0,0 +1,4 @@
+{% extends 'base.html' %}
+{% block content %}
+    <h1>Where all the things required for making a page</h1>
+{% endblock %}

templates/resetpassword.html

@@ -0,0 +1,30 @@
+{% extends 'base.html' %}
+{% block content %}
+
+<style>
+    body{
+        margin-left: 500px;
+        margin-top: 80px;
+        margin-right: 500px;
+        border: 3px solid black;
+        padding: 10px;
+        border-radius: 4px;
+    }
+
+    .button{
+        margin-left: 250px;
+    }
+
+    .emailbox{
+        margin-left: 170px;
+    }
+
+    p{
+        font-size: 4px;
+    }
+</style>
+<h2>Forgotten you password just enter your email below and you'll be sent a link to reset your password</h2>
+<p style="color: gray; text-decoration: underline;">This page is just a placeholder at the moment not functional</p>
+<p class="emailbox">Enter email here:      <input type="email" id="email" name="email" required><br><br></p>
+<a class="button" href="/resetpasscode" style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; border-color: gray; border-radius: 4px; border-width: 4px; border-style: solid; display: inline-block; text-decoration: none; padding: 8px 16px; color: black;">Send reset email</a>
+{% endblock %}

templates/resetpasswordcode.html

@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% block content %}
+
+<style>
+    body{
+        margin-left: 500px;
+        margin-top: 80px;
+        margin-right: 500px;
+        border: 3px solid black;
+        padding: 10px;
+        border-radius: 4px;
+    }
+
+    .button{
+        margin-left: 250px;
+        font-size: 14px;
+    }
+
+    .emailbox{
+        margin-left: 170px;
+    }
+
+    p{
+    font-size: 18px;
+    }
+</style>
+<h2>Forgotten you password just enter the code that was sent to you via email<h2>
+<p style="color: gray; text-decoration: underline;">This page is just a placeholder at the moment not functional</p>
+<p class="emailcode">Enter code recieved in email:      <input required><br><br></p>
+<a class="button" href="/newpassword" style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; border-color: gray; border-radius: 4px; border-width: 4px; border-style: solid; display: inline-block; text-decoration: none; padding: 8px 16px; color: black;">Change</a>
+{% endblock %}

templates/signin.html

@@ -1,13 +1,27 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<head>
+<h1 style="text-decoration: underline;"> Sign in to your account</h1>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <h1>Sign in page with sql database</h1>
-</body>
 
+{% with messages = get_flashed_messages() %}
+  {% if messages %}
+    <ul class="flash-messages">
+      {% for message in messages %}
+        <li>{{ message }}</li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endwith %}
+
+<form action="{{ url_for('signin') }}" method="POST" class="signup">
+    <label for="username">Username:</label>
+    <input type="text" id="username" name="username" required><br><br>
+
+    <label for="password">Password:</label>
+    <input type="password" id="password" name="password" required><br><br>
+
+    <button type="submit" style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; border-color: gray; border-radius: 4px; border-width: 4px; margin-bottom: 20px;">Sign In</button>
+    <p>Don't have an account? <a style="text-decoration: none;" href="{{ url_for('signup') }}">Create one</a></p>
+    <p>Forgot password? <a style="text-decoration: none;" href="{{ url_for('resetpassword') }}">Reset Password</a></p>
+</form>
 {% endblock %}

templates/signup.html

@@ -1,14 +1,7 @@
 {% extends 'base.html' %}
-
 {% block content %}
-<head>
+    <h1 style="text-decoration: underline;">Sign up to make a account</h1>
-    <meta charset="UTF-8">
+    <form action="/submit-form" method="POST" class="signup">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <h1>Sign up page with sql database</h1>
-    <form action="/submit-form" method="POST">
     <label for="username">Username:</label>
     <input type="text" id="username" name="username" required><br><br>
 
@@ -18,8 +11,32 @@
     <label for="password">Password:</label>
     <input type="password" id="password" name="password" required><br><br>
 
-    <button type="submit">Submit to Database</button>
+    <button type="submit" class="submitbutton" style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; border-color: gray; border-radius: 4px; border-width: 4px;">Create account</button>
-</form>
+
-</body>
+    {% if success_message %}
+        <p style="color: green; margin-top: 15px; font-weight: bold;">
+            {{ success_message }}
+        </p>
+    {% endif %}
+
+    {% if user_taken %}
+        <p style="color: rgb(128, 0, 0); margin-top: 15px; font-weight: bold;">
+            {{ user_taken }}
+        </p>
+    {% endif %}
+
+    {% if email_taken %}
+        <p style="color: rgb(128, 0, 0); margin-top: 15px; font-weight: bold;">
+            {{ email_taken }}
+        </p>
+    {% endif %}
+
+    {% if error %}
+        <p style="color: rgb(128, 0, 0); margin-top: 15px; font-weight: bold;">
+            {{ error }}
+        </p>
+    {% endif %}
+
+    </form>
 
 {% endblock %}

templates/simultaneousequations.html

@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="mainpart">
+<h1>Information on simultaneous equations</h1>
+
+    <div class="information">
+        <h2>information</h2>
+
+    </div>
+
+    <div class="formulas">
+        <h2>formulas</h2>
+
+    </div>
+
+    <div class="quizzes">
+        <h2>quizzes</h2>
+    </div>
+
+</div>
+    <footer class="sources">
+        <div class="sourcescontent">
+        <h2>Sources</h2>
+        <p class="sourcestext">links to sources would go here</p>
+        <p class="sourcestext">source one will embed link into text</p>
+        <p class="sourcestext">source two will embed link into text</p>
+        <p class="sourcestext">source three will embed link into text</p>
+        <p class="sourcestext">source four will embed link into text</p>
+        <div>
+    </footer>
+{% endblock %}

templates/test.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>testpage</title>
-</head>
-<body>
-    <h1>testpage</h1>
-    <h2>testpage</h2>
-    <h3>testpage</h3>
-</body>
-</html>

templates/triganometry.html

@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="mainpart">
+<h1>Information on triganometry</h1>
+
+    <div class="information">
+        <h2>information</h2>
+
+    </div>
+
+    <div class="formulas">
+        <h2>formulas</h2>
+
+    </div>
+
+    <div class="quizzes">
+        <h2>quizzes</h2>
+    </div>
+
+</div>
+    <footer class="sources">
+        <div class="sourcescontent">
+        <h2>Sources</h2>
+        <p class="sourcestext">links to sources would go here</p>
+        <p class="sourcestext">source one will embed link into text</p>
+        <p class="sourcestext">source two will embed link into text</p>
+        <p class="sourcestext">source three will embed link into text</p>
+        <p class="sourcestext">source four will embed link into text</p>
+        <div>
+    </footer>
+{% endblock %}