Merge branch 'main' of https://github.com/jacobmveber-01839764/BudgetBuddy
jveebs
3 years ago
commit
cc36b80e72
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About Us</title>
|
||||
<link rel="stylesheet" href="css/about.css">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container overflow-auto">
|
||||
<!-- Page Header -->
|
||||
<header>
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="mt-4 col-12 text-center">
|
||||
<h1 class="fw-light">About Us</h1>
|
||||
<p class="lead">Budget Buddy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="mt-4 col-12 text-center">
|
||||
<img class="img-fluid col-8" src="images/umass_lowell.jpeg" alt="uml campus">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-5">We're four computer science students from UMass Lowell. Our names are Daniel Quinonez, Jacob Veber, Gabe Herrera, and Chris Olaf.</p>
|
||||
|
||||
<p class="mt-4">
|
||||
Using Budget Buddy, we are hoping to help young people take control of their finances. We know that it can be extremely
|
||||
difficult to balance bills and other expenses at the same time as being a full-time student, so we want to make it as
|
||||
easy as possible for students to quickly understand what their budget looks like. In addition, we want to help young people
|
||||
make plans to pay off any loans they have needed to take out if, for example, they are a college student. This way, we hope that the
|
||||
daunting task of managing debt while being a young adult with little or unstable income can be made easier.
|
||||
</p>
|
||||
|
||||
<p class="mt-4 mb-3">
|
||||
By helping the young demographic manage their way through debt, we are aiming to help them gain financial independence as soon as
|
||||
possible, so that they can live their lives post-graduation with the most opportunities. Also, and possibly most
|
||||
importantly, we hope that by using Budget Buddy, students gain an idea of how to effectively balance their budget.
|
||||
This way, they will be able to manage their money in a more effective way after they graduate and move into the professional
|
||||
world. We want young people to have an idea of how budgeting can work for them when they begin to make more money in their
|
||||
careers and begin to take on more debt in order to do things like buy a house.
|
||||
</p>
|
||||
|
||||
<div class="row mb-5">
|
||||
<img src="images/money1.png" class="col-3" alt="budgeting">
|
||||
<img src="images/river_hawk.png" class="col-5" alt="uml logo">
|
||||
<img src="images/budgethero1.png" class="col-4" alt="budget hero">
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/settings.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Contact Us</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container overflow-auto">
|
||||
<!-- Page Header -->
|
||||
<header>
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="mt-4 col-12 text-center">
|
||||
<h1 class="fw-light">Contact Us</h1>
|
||||
<p class="lead">Budget Buddy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="mt-4 col-12 text-center">
|
||||
<img class="img-fluid col-4" src="images/contact.jpeg" alt="contact">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h4 class="lead mt-5 mb-4">Reach out to us with any questions, concerns or feedback, and a member of our team will gladly assist you:</h4>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="emailAddress" class="form-label">Your Email address</label>
|
||||
<input type="email" class="form-control" id="emailAddress" placeholder="name@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write your message here..."></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-primary mb-5" id="feedback">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="js/settings.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 483 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 300 KiB |
|
After Width: | Height: | Size: 441 KiB |
@ -0,0 +1,73 @@
|
||||
// javascript for the updated username alert
|
||||
const nameAlertPlaceholder = document.getElementById('nameAlert')
|
||||
const nameAppendAlert = (message, type) => {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = [
|
||||
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
||||
` <div>${message}</div>`,
|
||||
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
nameAlertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
const nameAlertTrigger = document.getElementById('newNameButton')
|
||||
if (nameAlertTrigger) {
|
||||
nameAlertTrigger.addEventListener('click', () => {
|
||||
nameAppendAlert('Name updated successfully!', 'success')
|
||||
})
|
||||
}
|
||||
|
||||
// javascript for the updated password alert
|
||||
const passwordAlertPlaceholder = document.getElementById('passwordAlert')
|
||||
const passwordAppendAlert = (message, type) => {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = [
|
||||
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
||||
` <div>${message}</div>`,
|
||||
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
passwordAlertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
const passwordAlertTrigger = document.getElementById('newPasswordButton')
|
||||
if (passwordAlertTrigger) {
|
||||
passwordAlertTrigger.addEventListener('click', () => {
|
||||
passwordAppendAlert('Password updated successfully!', 'success')
|
||||
})
|
||||
}
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const forms = document.querySelectorAll('.needs-validation')
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.from(forms).forEach(form => {
|
||||
form.addEventListener('click', event => {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
form.classList.add('was-validated')
|
||||
}, false)
|
||||
})
|
||||
})()
|
||||
|
||||
// toggle between light mode and dark mode
|
||||
document.getElementById('darkModeCheckbox').addEventListener('click', ()=>{
|
||||
if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
|
||||
document.documentElement.setAttribute('data-bs-theme','light')
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute('data-bs-theme','dark')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Settings</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container overflow-auto">
|
||||
<h4 class="mt-3 mb-4">Profile Settings</h4>
|
||||
|
||||
<h5 class="mb-4">Profile Picture</h5>
|
||||
|
||||
<div class="justify-content-start container w-25 mb-4">
|
||||
<img src="images/spiderman.jpeg" class="img-fluid" alt="profile pic">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="profilePic">
|
||||
<label class="input-group-text" for="ProfilePicture">Upload</label>
|
||||
</div>
|
||||
|
||||
<h5 class="mb-4">Email and Name</h5>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row mb-3">
|
||||
<label for="StaticEmail" class="col-2 col-form-label">Email</label>
|
||||
<div class="col-4">
|
||||
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="daniel_quinonezrosario@student.uml.edu">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="CurrentName" class="col-2 col-form-label">Current Name</label>
|
||||
<div class="col-4">
|
||||
<input type="text" readonly class="form-control-plaintext" id="currentName" value="Daniel">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="Name" class="col-2 col-form-label">New Name</label>
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" id="newName" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a new name
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- div that holds name change alert -->
|
||||
<div id="nameAlert"></div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary mb-5" id="newNameButton">Change Name</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h5 class="mb-4">Password</h5>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row mb-3">
|
||||
<label for="CurrentPassword" class="col-2 col-form-label">Current Password</label>
|
||||
<div class="col-4">
|
||||
<input type="password" class="form-control" id="currentPassword" minlength="8" maxlength="20" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your current password
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="NewPassword" class="col-2 col-form-label">New Password</label>
|
||||
<div class="col-4">
|
||||
<input type="password" class="form-control" id="newPassword" minlength="8" maxlength="20" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a new password
|
||||
<br>
|
||||
Your new password must be between 8 to 20 characters long
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="passwordAlert"></div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary mb-5" id="newPasswordButton">Change Password</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Dark Mode toggle -->
|
||||
<h4 class="mb-4">Dark Mode</h4>
|
||||
|
||||
<div class="form-check form-switch mb-5">
|
||||
<input class="form-check-input" type="checkbox" id="darkModeCheckbox">
|
||||
<label class="form-check-label" for="darkModeCheckbox">Enable Dark Mode</label>
|
||||
</div>
|
||||
|
||||
<h4 class="mb-4">Account Settings</h4>
|
||||
|
||||
<div class="mb-5">
|
||||
<button type="button" class="btn btn-warning">Reset Account</button>
|
||||
<br>
|
||||
<div class="mt-2">CAUTION: This will reset your account. In doing so, all your budget data will be erased and you will be able to restart.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<button type="button" class="btn btn-danger">Delete Account</button>
|
||||
<br>
|
||||
<div class="mt-2">CAUTION: This will delete your account. All account and profile data will be completely erased.</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/settings.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue