mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
VISUALS WORK
wip though
This commit is contained in:
etc404
@@ -0,0 +1,15 @@
|
||||
package com.example.demo.controller;
|
||||
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
||||
@Controller
|
||||
public class SiteController {
|
||||
@GetMapping("/")
|
||||
public String viewHomePage(Model model) {
|
||||
//model.addAttribute("allemplist", employeeServiceImpl.getAllEmployee());
|
||||
return "home";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
:root {
|
||||
--dusty-red: #D43F3F;
|
||||
--dusty-red-hover: #C73636;
|
||||
--dark-yellow: #FFD27F;
|
||||
--pale-yellow: #FFECB3;
|
||||
--peach: #F5A96E;
|
||||
--dark: #850000;
|
||||
}
|
||||
|
||||
/* login.css */
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: var(--pale-yellow);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.top-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--dusty-red);
|
||||
color: var(--dark-yellow);
|
||||
padding: 10px 20px;
|
||||
height: 60px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.top-header .swirl {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
font-family: 'EB Garamond', serif;}
|
||||
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 40px;}
|
||||
|
||||
/* Login Box */
|
||||
.login-box {
|
||||
background-color: var(--peach);
|
||||
padding: 45px;
|
||||
border-radius: 20px;
|
||||
width: 600px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.login-box h2 {
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
|
||||
.login-box rows {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.login-box label {
|
||||
font-size: 20px;
|
||||
width: 30%;
|
||||
margin: 0px;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.login-box input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
margin-top: 5px;
|
||||
margin-left: 25px;
|
||||
border-radius: 10px;
|
||||
border: 2.5px solid var(--dusty-red);
|
||||
background-color: var(--pale-yellow);
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-box input.invalid {
|
||||
border: 4px solid var(--dusty-red);
|
||||
}
|
||||
|
||||
.login-box button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 40%;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
background-color: var(--dusty-red);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s ease;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
background-color: var(--dusty-red-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
:root {
|
||||
--dusty-red: #D43F3F;
|
||||
--dusty-red-hover: #C73636;
|
||||
--dark-yellow: #FFD27F;
|
||||
--pale-yellow: #FFECB3;
|
||||
--peach: #F5A96E;
|
||||
--dark: #850000;
|
||||
}
|
||||
|
||||
/* login.css */
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: var(--pale-yellow);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.top-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--dusty-red);
|
||||
color: var(--dark-yellow);
|
||||
padding: 10px 20px;
|
||||
height: 60px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.top-header .swirl {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
font-family: 'EB Garamond', serif;}
|
||||
|
||||
|
||||
/* Left Sidebar */
|
||||
.sidebar-left {
|
||||
overflow: hidden;
|
||||
margin: 25px;
|
||||
position: fixed;
|
||||
border-radius: 20px;
|
||||
z-index: 10;
|
||||
|
||||
width: 200px;
|
||||
background-color: var(--peach);
|
||||
color: var(--dark);
|
||||
padding: 6px;
|
||||
font-size: 1.75em;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1.5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-left ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-left li {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.sidebar-left a {
|
||||
color: var(--dark);
|
||||
text-decoration: none;
|
||||
transition: 0.1s ease;
|
||||
}
|
||||
|
||||
.sidebar-left a:hover {
|
||||
color: var(--dusty-red);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-left .nav_icon {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
margin-top: 9px;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.2s ease;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar-left .nav_icon:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Create Icon */
|
||||
.create_icon {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 55px;
|
||||
z-index: 1000;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.create_icon:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.create_icon img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
|
||||
/* Right Sidebar */
|
||||
.sidebar-right {
|
||||
margin: 25px;
|
||||
height: 75%;
|
||||
position: fixed;
|
||||
border-radius: 20px;
|
||||
z-index: 1;
|
||||
|
||||
right: 0;
|
||||
|
||||
width: 200px;
|
||||
background-color: var(--peach);
|
||||
color: var(--dusty-red);
|
||||
padding: 5px;
|
||||
font-size: 1.6em;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1.5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-right ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-right li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar-right a {
|
||||
color: var(--dusty-red);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-left: 300px;
|
||||
margin-right: 250px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.recipe-card {
|
||||
display: flex;
|
||||
gap: 35px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
flex: 0.2 0.2 260px;
|
||||
max-width: 300px;
|
||||
background: var(--peach);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-left, .card-right {
|
||||
width: 50%;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
:root {
|
||||
--dusty-red: #D43F3F;
|
||||
--dusty-red-hover: #C73636;
|
||||
--dark-yellow: #FFD27F;
|
||||
--pale-yellow: #FFECB3;
|
||||
--peach: #F5A96E;
|
||||
--dark: #850000;
|
||||
}
|
||||
|
||||
/* login.css */
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: var(--pale-yellow);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.top-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--dusty-red);
|
||||
color: var(--dark-yellow);
|
||||
padding: 10px 20px;
|
||||
height: 60px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.top-header .swirl {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
font-family: 'EB Garamond', serif;}
|
||||
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 40px;}
|
||||
|
||||
/* Login Box */
|
||||
.login-box {
|
||||
background-color: var(--peach);
|
||||
padding: 45px;
|
||||
border-radius: 20px;
|
||||
width: 400px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.login-box h2 {
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
|
||||
.login-box label {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-box input {
|
||||
display: block;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
margin-top: 5px;
|
||||
border-radius: 10px;
|
||||
border: 2.5px solid var(--dusty-red);
|
||||
background-color: var(--pale-yellow);
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-box button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 40%;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
background-color: var(--dusty-red);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s ease;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
background-color: var(--dusty-red-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/*Sign Up*/
|
||||
.sign_up {
|
||||
color: var(--dusty-red);
|
||||
}
|
||||
|
||||
.sign_up a {
|
||||
display: inline-block;
|
||||
color: var(--dark);
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.sign_up a:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Create Thyme Crunch Account</title>
|
||||
<link rel="stylesheet" th:href="@{css/create-account.css}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="top-header">
|
||||
<img src="images/header_left.png" alt="Violin f-hole shape to the left of header." class="swirl">
|
||||
<h1 class="site-name">Thyme Crunch</h1>
|
||||
<img src="images/header_right.png" alt="Violin f-hole shape to the right of header." class="swirl">
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="login-box">
|
||||
<h2>Create Account</h2>
|
||||
|
||||
<form id="createUserForm">
|
||||
|
||||
<div class="rows">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" required>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" required>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" required>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<label for="confirmPassword">Confirm Password</label>
|
||||
<input type="password" id="confirmPassword" required>
|
||||
</div>
|
||||
<p id="passwordError"></p>
|
||||
|
||||
<button type="submit">Create</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
const passwordField = document.getElementById("password");
|
||||
const confirmPasswordField = document.getElementById("confirmPassword");
|
||||
|
||||
function checkPasswords() {
|
||||
|
||||
if (confirmPasswordField.value === "") {
|
||||
confirmPasswordField.classList.remove("invalid");
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordField.value !== confirmPasswordField.value) {
|
||||
confirmPasswordField.classList.add("invalid");
|
||||
} else {
|
||||
confirmPasswordField.classList.remove("invalid");
|
||||
}
|
||||
}
|
||||
|
||||
passwordField.addEventListener("input", checkPasswords);
|
||||
confirmPasswordField.addEventListener("input", checkPasswords);
|
||||
|
||||
document.getElementById("createUserForm").addEventListener("submit", function(e) {
|
||||
|
||||
const password = passwordField.value;
|
||||
const confirmPassword = confirmPasswordField.value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
e.preventDefault();
|
||||
confirmPasswordField.classList.add("invalid");
|
||||
return;
|
||||
}
|
||||
|
||||
const userData = {
|
||||
username: document.getElementById("username").value,
|
||||
email: document.getElementById("email").value,
|
||||
hashedpassword: password,
|
||||
role: "USER"
|
||||
};
|
||||
|
||||
fetch("http://localhost:8080/api/users", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Thyme Crunch Home</title>
|
||||
<link rel="stylesheet" th:href="@{css/home.css}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="top-header">
|
||||
<img src="images/header_left.png" alt="Violin f-hole shape to the left of header." class="swirl">
|
||||
<h1 class="site-name">Thyme Crunch</h1>
|
||||
<img src="images/header_right.png" alt="Violin f-hole shape to the right of header." class="swirl">
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<!--Navigation Bar -->
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Explore</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Saved</a></li>
|
||||
<li><a href="#"> <img src="images/logout_icon.png" alt="Log Out Icon" class="nav_icon"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
<a href="#" target="_blank" class="create_icon">
|
||||
<img src="images/create_icon.png" alt="Description of the icon">
|
||||
</a>
|
||||
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="recipe-card">
|
||||
|
||||
<div class="card" th:each="recipe : ${recipes}">
|
||||
<div class="card-text">
|
||||
<h2 th:text="${recipe.title}"></h2>
|
||||
<p th:text="${recipe.description}"></p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<img th:src="@{${recipe.imageUrl}}" alt="${recipe.imageAltText}">
|
||||
<p th:text="${recipe.cost}"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<div class="container">
|
||||
<!--New Bar -->
|
||||
<nav class="sidebar-right">
|
||||
<h1> NEW </h1>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Thyme Crunch Login</title>
|
||||
<link rel="stylesheet" th:href="@{css/login.css}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="top-header">
|
||||
<img src="images/header_left.png" alt="Violin f-hole shape to the left of header." class="swirl">
|
||||
<h1 class="site-name">Thyme Crunch</h1>
|
||||
<img src="images/header_right.png" alt="Violin f-hole shape to the right of header." class="swirl">
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="login-box">
|
||||
<h2>Log In</h2>
|
||||
<form action="/login" method="post">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="user" name="user" required>
|
||||
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
|
||||
<button type="submit">Enter</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="sign_up">
|
||||
<h3> OR <a href="create-account.html"><b>SIGN UP</b></a> FOR AN ACCOUNT </h3>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user