Merge pull request #37 from software-students-spring2024/render-html

Render HTML
software-students-spring2024 · Feb 25, 2024 · c11bbf8 · c11bbf8
2 parents 0ce37e7 + 6d64d2c
commit c11bbf8
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 206 deletions.
diff --git a/app.py b/app.py
@@ -24,7 +24,21 @@
 
 @app.route("/")
 def home():
-    return render_template('mainScreen.html')
+    # TODO: redirect to login 
+    # TODO: redirect to sign up
+    return render_template('start.html')
+
+@app.route("/login", methods=["GET", "POST"])
+def login():
+    # would get form fields
+    # would check if correct username and password
+    return render_template('login.html')
+
+@app.route("/signup", methods=["GET", "POST"])
+def signup():
+    #would add user to db
+    #would redirect to template for login
+    return render_template('signup.html')
 
 @app.route("/<username>/decks")
 def allDecks(username):

diff --git a/static/css/style.css b/static/css/style.css
@@ -1,31 +1,76 @@
 body {
-    font-family: sans-serif;
-    background: #5e4d47;
-    padding: 48px;
-  }
-
-  h1 {
-    color: #e1948d;
-    text-align: center;
-    font-size: 115px;
-  }
-
-  h3 {
-    color: #e1948d;
-    text-align: center;
-    font-size: 55px;
-  }
-
-  .card {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: auto;
-    width: 90%;
-    aspect-ratio: 8 / 5;
-    border-radius: 7rem;
-    background: #fafafa;
-    padding: 10px;
-  }
-
+  font-family: sans-serif;
+  background: #5e4d47;
+  padding: 48px;
+}
+
+h1 {
+  color: #e1948d;
+  text-align: center;
+  font-size: 115px;
+}
+
+h3 {
+  color: #e1948d;
+  text-align: center;
+  font-size: 55px;
+}
+
+.card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  width: 90%;
+  aspect-ratio: 8 / 5;
+  border-radius: 7rem;
+  background: #fafafa;
+  padding: 10px;
+  margin-bottom: 10%; 
+}
+
+.vertical-align {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  width: 90%;
+  aspect-ratio: 9 / 5;
+
+}
+
+.button {
+  width: 100%;
+  height: 25%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: #E1948D;
+  border: 1px solid #E1948D;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  font-weight: bold;
+  color: #FAFAFA;
+  font-size: 50px;
+}
+
+.user-input {
+  width: 100%;
+  height: 20%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: #fafafa;
+  border: 1px solid #fafafa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #FAFAFA;
+  font-size: 40px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/templates/mainScreen.html → templates/base.html b/templates/mainScreen.html → templates/base.html
@@ -4,7 +4,7 @@
     <title>DIVE DEEPER Mobile Web App</title>
     <link
       rel="stylesheet"
-      href="{{ url_for('static', filename='css/style.css') }}"
+      href="/static/css/style.css"
     />
   </head>
   <body>
@@ -13,19 +13,16 @@
         <div class="logo">
             <div class="title">
               <h1>DIVE DEEPER</h1>
-              <nav>
-                <a href="{{ url_for('home')}}">Home</a>
-              </nav>
             </div>
           </div>        
       </header>
     </div>
 
-    <div class="container">
-        <div class="card">
-            <h3>build deeper connections with people.<h3>
-            </div>
-      </div>
+	<main>{% block container %} {% endblock %}</main>
+
+    <div class="image">
+      <img src="/static/images/otter.gif" alt="otter.gif">
+    </div>
 
   </body>
-</html>
+</html>
diff --git a/templates/login.html b/templates/login.html
@@ -1,84 +1,13 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Login</title>
-        <link rel="stylesheet" href="/static/css/style.css">
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                background-color: #5E4D47;
-                display: flex;
-                /*justify-content: center;
-                align-items: center;*/
-                flex-direction: column;
-                height: 80vh;
-            }
+{% extends 'base.html' %}
 
-            header {
-                color: #E1948D;
-                padding: 20px 20px;
-                text-align: center;
-                font-size: 25px;
-            }
+{% block container %}
 
-            .login-container {
-                background-color: #FAFAFA;
-                padding: 35px;
-                border-radius: 50px;
-                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-                max-width: 300px;
-                width: 90%;
-                text-align: center;
-                margin: auto;
-            }
+<div class="card">
+    <form class="vertical-align" action={{action}} method="post">
+        <input class="user-input" type="username" name="username" placeholder="Username" required>
+        <input class="user-input" type="password" name="password" placeholder="Password" required>
+        <input class="button" type="submit" value="Login">
+    </form>
+</div>
 
-            .login-container input[type="username"],
-            .login-container input[type="password"] {
-                width: 100%;
-                padding: 15px;
-                margin: 10px 0;
-                border: 1px solid #FAFAFA;
-                border-radius: 4px;
-                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-                box-sizing: border-box;
-            }
-
-            .login-container input[type="username"]::placeholder,
-            .login-container input[type="password"]::placeholder {
-                color: #B05E57;
-            }
-
-            .login-container input[type="submit"] {
-                width: 100%;
-                padding: 20px;
-                margin: 10px 0;
-                background-color: #E1948D;
-                border: 1px solid #E1948D;
-                border-radius: 4px;
-                color: #FAFAFA;
-                cursor: pointer;
-                box-sizing: border-box;
-                font-weight: bold;
-            }
-
-            .login-container input[type="submit"]:hover {
-                background-color: #B05E57;
-                border: 1px solid #B05E57;
-            }
-
-        </style>
-    </head>
-    <body>
-        <header> <h1>DIVE DEEPER</h1> </header>
-        <div class="login-container">
-            <form action={{action}} method="post">
-                <input type="username" name="username" placeholder="Username" required>
-                <input type="password" name="password" placeholder="Password" required>
-                <input type="submit" value="Login">
-            </form>
-        </div>
-    </body>
-</html>
+{% endblock %}
diff --git a/templates/signin.html b/templates/signin.html
diff --git a/templates/signup.html b/templates/signup.html
@@ -0,0 +1,14 @@
+{% extends 'base.html' %}
+
+{% block container %}
+
+<div class="card">
+    <form class="vertical-align" action="{{action}}" method="post">
+        <input class="user-input" type="username" name="username" placeholder="Username" required>
+        <input class="user-input" type="password" name="password" placeholder="Password" required>
+        <input class="user-input" type="confirm-password" name="confirm-password" placeholder="Confirm Password" required>
+        <input class="button" type="submit" value="Sign Up">
+    </form>
+</div>
+
+{% endblock %}
diff --git a/templates/start.html b/templates/start.html
@@ -0,0 +1,17 @@
+{% extends 'base.html' %}
+
+{% block container %}
+
+  <div class="card">
+    <h3>build deeper connections with people.</h3>
+  </div>
+
+  <div class="card">
+    <div class="vertical-align">
+      <button class="button" type="submit">Login</button>
+      <button class="button" type="submit">Sign Up</button>
+      <button class="button" type="submit">Play As Guest</button>  
+    </div>
+  </div>
+
+{% endblock %}