Merge branch 'main' of https://github.com/adanrsantos/ThePlaceHolders

added confirmation and forgot password pages
still testing out the canvas
2024-12-16 05:50:39 -06:00 · 2024-10-16 18:52:04 -05:00 · 2024-10-16 18:51:34 -05:00 · 2024-10-16 18:41:26 -05:00
9 changed files with 162 additions and 18 deletions
--- a/static/canvas.html
+++ b/static/canvas.html
@ -14,10 +14,9 @@
    <div class="wrapper">
      <div class="navbarCont">
        <h1>ThePlaceHolders</h1>
-        
      </div>
      <div class="canvasCont">
-        <canvas id="canvas" width="850" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
+        <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
        <div id="toolbar" class="toolbar">
          <div class="toolbarItems">
            <label for="stroke">Strokes</label>
--- a/static/canvas.js
+++ b/static/canvas.js
@ -1,23 +1,70 @@
 const canvas = document.getElementById("canvas");
-const toolbar = document.getElementById("toolbar");
-const strokePicker = document.getElementById("stroke");
 const ctx = canvas.getContext("2d");

-const canvasOffsetX = canvas.offsetLeft;
-const canvasOffsetY = canvas.offsetTop;
-
-canvas.width = 850;
+canvas.width = 500;
 canvas.height = 500;
+const dataSize = 1000;

+let x;
+let y;
+let pixelSize = canvas.width / dataSize;
+const centerPixel = pixelSize / 2;
+
+function draw() {
+    ctx.fillRect(x, y, pixelSize, pixelSize);
+}
+
+canvas.addEventListener("mousedown", (e) => {
+    x = e.clientX - canvas.getBoundingClientRect().left - centerPixel;
+    y = e.clientY - canvas.getBoundingClientRect().top - centerPixel;
+    draw();
+})
+
+//const toolbar = document.getElementById("toolbar");
+//const strokePicker = document.getElementById("stroke");
+//const canvasOffsetX = canvas.offsetLeft;
+//const canvasOffsetY = canvas.offsetTop;
+//canvas.width = 150;
+//canvas.height = 150;
+
+/*
 let isPainting = false;
 let lineWidth = 5;
 let strokeColor = "#000000";
 let startX;
 let startY;

+function drawGrid(lineInterval, lineColor) {
+    // Set the color of the grid lines
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = 1;  // Set the gridline thickness
+    
+    // Draw vertical grid lines
+    for (let x = 0; x <= canvas.width; x += lineInterval) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);  // Start from top of the canvas
+        ctx.lineTo(x, canvas.height);  // Draw line down to the bottom
+        ctx.stroke();
+    }
+    
+    // Draw horizontal grid lines
+    for (let y = 0; y <= canvas.height; y += lineInterval) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);  // Start from the left of the canvas
+        ctx.lineTo(canvas.width, y);  // Draw line across to the right
+        ctx.stroke();
+    }
+    ctx.beginPath();
+}
+
+// Call the drawGrid function with 50px intervals and a light gray color
+drawGrid(10, '#A9A9A9');
+
 toolbar.addEventListener("click", e => {
    if (e.target.id === "clear"){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        drawGrid(10, '#A9A9A9');
    }

    if (e.target.id === "lineWidth"){
@ -53,4 +100,5 @@ canvas.addEventListener("mouseup", (e) => {
    ctx.beginPath();
 });

-canvas.addEventListener("mousemove", draw);
+canvas.addEventListener("mousemove", draw);
+*/
--- a/static/confirmation.css
+++ b/static/confirmation.css
@ -0,0 +1,5 @@
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
--- a/static/confirmation.html
+++ b/static/confirmation.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>UTSA Placeholders</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <link href="./confirmation.css" rel="stylesheet">
+  </head>
+  <body>
+    <form>
+        <div class="mb-3">
+            Check your email for a 6 digit code and enter it below.
+        </div>
+
+        <div>
+            <input for="">
+        </div>
+    </form>
+  </body>
+</html>
--- a/static/forgotpassword.css
+++ b/static/forgotpassword.css
--- a/static/forgotpassword.html
+++ b/static/forgotpassword.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>UTSA Placeholders</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <link href="./forgotpassword.css" rel="stylesheet">
+  </head>
+  <body>
+
+  </body>
+</html>
--- a/static/login.css
+++ b/static/login.css
@ -0,0 +1,51 @@
+:root {
+    --utsa-orange: #f15a22;
+    --utsa-blue: #0c2340;
+}
+
+html {
+    background-color: var(--utsa-orange);
+}
+
+#lform {
+    border-radius: 10px;
+    border: solid var(--utsa-orange) 2px;
+    margin: 100px;
+    padding: 30px;
+    background-color: white;
+}
+
+#formbg {
+    background-color: var(--utsa-orange);
+}
+
+#h3bg {
+    background-color: var(--utsa-blue);
+}
+
+h3 {
+    border-radius: 10px;
+    padding: 20px;
+    margin: 10px;
+    background-color: var(--utsa-blue);
+    color: var(--utsa-orange);
+    font-size: 40px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.form-label {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.form-control {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.form-text {
+    padding: 3px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.loginlinks {
+    font-size: 12px;
+}
--- a/static/login.html
+++ b/static/login.html
@ -7,12 +7,12 @@
    <title>UTSA Placeholders</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <link href="./login.css" rel="stylesheet">
  </head>
  <body>
-    <br>
-    <div class="d-flex justify-content-center"><h3>Login</h3></div>
-    <div class="d-flex p-2 justify-content-center align-items-center">
-    <form method = "post">
+    <div id="h3bg" class="d-flex justify-content-center"><h3>Login</h3></div>
+    <div id="formbg" class="d-flex p-2 justify-content-center align-items-center">
+    <form id="lform" method = "post">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp">
@ -22,14 +22,17 @@
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" name="password" class="form-control" id="password">
      </div>
+      <div class="loginlinks" class="fs-6">
+        <a href="./forgotpassword.html">Forgot Password?</a>
+      </div>
+      <div class="loginlinks" class="fs-6">
+        Don't have an account? Register <a href="./register.html">here</a>.
+      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="showPass()">
        <label class="form-check-label" for="exampleCheck1">Show Password</label>
      </div>
      <input type="submit" class="btn btn-primary" value="Submit">
-      <div class="fs-6">
-        Don't have an account? Register <a href="register.html">here</a>.
-      </div>
    </form>
    </div>
    <script src="register.js"></script>
--- a/static/register.html
+++ b/static/register.html
@ -12,7 +12,7 @@
  <body>
    <div id="h3bg" class="d-flex justify-content-center"><h3 id="r">Registration</h3></div>
    <div id="formbg" class="d-flex p-2 justify-content-center align-items-center">
-      <form id="rform" method="post">
+      <form id="rform" method="post" action="./confirmation.html">
        <div class="mb-3">
          <label for="email" class="form-label">Email address</label>
          <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" pattern="^[^\s@]+@my\.utsa\.edu$" oninput="emailCheck()" required>
@ -35,7 +35,7 @@
        </small>
        <br><br>

-        <input id="submit" type="submit" class="btn btn-primary" value="Submit">
+        <input id="submit" type="submit" class="btn btn-primary" value="Submit"></a>
      </form>
    </div>
    <script src="register.js"></script>
Author	SHA1	Message	Date
th3keyboard	c975969a13	Merge branch 'main' of https://github.com/adanrsantos/ThePlaceHolders	2024-10-16 18:52:04 -05:00
th3keyboard	e86cd2d8fe	added confirmation and forgot password pages	2024-10-16 18:51:34 -05:00
adanrsantos	b8585d990a	still testing out the canvas	2024-10-16 18:41:26 -05:00