logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 12:20:37 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: logan:0041dfe87a32086cb0f1206036473d5481b11d05
Branches Tags
logan:main
...
compare: logan:c975969a13eb59f1dc4a027e958e7f8acb18bdc8
Branches Tags
logan:main

3 commits
0041dfe87a ... c975969a13

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
9 changed files with 162 additions and 18 deletions
Show stats Expand all files Collapse all files

3
static/canvas.html
View file

@ -14,10 +14,9 @@
<div class="wrapper"> <div class="wrapper">
<div class="navbarCont"> <div class="navbarCont">
<h1>ThePlaceHolders</h1> <h1>ThePlaceHolders</h1>
</div> </div>
<div class="canvasCont"> <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 id="toolbar" class="toolbar">
<div class="toolbarItems"> <div class="toolbarItems">
<label for="stroke">Strokes</label> <label for="stroke">Strokes</label>

60
static/canvas.js
View file

@ -1,23 +1,70 @@
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
const toolbar = document.getElementById("toolbar");
const strokePicker = document.getElementById("stroke");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const canvasOffsetX = canvas.offsetLeft; canvas.width = 500;
const canvasOffsetY = canvas.offsetTop;
canvas.width = 850;
canvas.height = 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 isPainting = false;
let lineWidth = 5; let lineWidth = 5;
let strokeColor = "#000000"; let strokeColor = "#000000";
let startX; let startX;
let startY; 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 => { toolbar.addEventListener("click", e => {
if (e.target.id === "clear"){ if (e.target.id === "clear"){
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid(10, '#A9A9A9');
} }
if (e.target.id === "lineWidth"){ if (e.target.id === "lineWidth"){
@ -54,3 +101,4 @@ canvas.addEventListener("mouseup", (e) => {
}); });
canvas.addEventListener("mousemove", draw); canvas.addEventListener("mousemove", draw);
*/

5
static/confirmation.css Normal file
View file

@ -0,0 +1,5 @@
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

23
static/confirmation.html Normal file
View file

@ -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>

0
static/forgotpassword.css Normal file
View file

15
static/forgotpassword.html Normal file
View file

@ -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>

51
static/login.css Normal file
View file

@ -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;
}

17
static/login.html
View file

@ -7,12 +7,12 @@
<title>UTSA Placeholders</title> <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"> <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> <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> </head>
<body> <body>
<br> <div id="h3bg" class="d-flex justify-content-center"><h3>Login</h3></div>
<div class="d-flex justify-content-center"><h3>Login</h3></div> <div id="formbg" class="d-flex p-2 justify-content-center align-items-center">
<div class="d-flex p-2 justify-content-center align-items-center"> <form id="lform" method = "post">
<form method = "post">
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label> <label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp"> <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> <label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" name="password" class="form-control" id="password"> <input type="password" name="password" class="form-control" id="password">
</div> </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"> <div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="showPass()"> <input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="showPass()">
<label class="form-check-label" for="exampleCheck1">Show Password</label> <label class="form-check-label" for="exampleCheck1">Show Password</label>
</div> </div>
<input type="submit" class="btn btn-primary" value="Submit"> <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> </form>
</div> </div>
<script src="register.js"></script> <script src="register.js"></script>

4
static/register.html
View file

@ -12,7 +12,7 @@
<body> <body>
<div id="h3bg" class="d-flex justify-content-center"><h3 id="r">Registration</h3></div> <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"> <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"> <div class="mb-3">
<label for="email" class="form-label">Email address</label> <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> <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> </small>
<br><br> <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> </form>
</div> </div>
<script src="register.js"></script> <script src="register.js"></script>