Skip to content
This repository was archived by the owner on Sep 16, 2025. It is now read-only.

Client-Side Frontend Pages #61

Open
AngadXD wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Client-Side Frontend Pages #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions web-frontend/src/Accessibilty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessibility Settings</title>
<link rel="stylesheet" href="welcome.css">
</head>
<body>
<header>
<h1>Accessibility Settings</h1>
</header>

<main>
<section>
<h2>Font Size</h2>
<label for="font-size-toggle">
<input type="checkbox" id="font-size-toggle">
Increase Font Size
</label>
</section>

<section>
<h2>Color Blind Mode</h2>
<label for="color-blind-toggle">
<input type="checkbox" id="color-blind-toggle">
Enable Color Blind Mode
</label>
</section>

<section>
<h2>Voiceover</h2>
<label for="voiceover-toggle">
<input type="checkbox" id="voiceover-toggle">
Enable Voiceover
</label>
</section>
<button id="agreeButton">Agree</button>
</main>

<script src="Accessibilty.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions web-frontend/src/Accessibilty.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// script.js
const fontSizeToggle = document.getElementById("font-size-toggle");
const colorBlindToggle = document.getElementById("color-blind-toggle");
const voiceoverToggle = document.getElementById("voiceover-toggle");

// Handle font size toggle
fontSizeToggle.addEventListener("change", () => {
document.body.classList.toggle("large-font");
});

// Handle color blind mode toggle
colorBlindToggle.addEventListener("change", () => {
document.body.classList.toggle("color-blind-mode");
});

// Handle voiceover toggle
voiceoverToggle.addEventListener("change", () => {
if (voiceoverToggle.checked) {
// Enable voiceover functionality (you can add your implementation here)
alert("Voiceover enabled");
} else {
// Disable voiceover functionality
alert("Voiceover disabled");
}
});
71 changes: 71 additions & 0 deletions web-frontend/src/CreateAcount.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

header {
background-color: #9370DB;
color: #fff;
text-align: center;
padding: 20px;
}

header h1 {
margin: 0;
}

main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.registration-form {
text-align: center;
}

h2 {
font-size: 24px;
color: #333;
}

.form-group {
margin-bottom: 20px;
text-align: left;
}

label {
font-size: 18px;
color: #333;
display: block;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background-color: #9370DB;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #9370DB;
}
45 changes: 45 additions & 0 deletions web-frontend/src/CreateAcount.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account - NutriHelp</title>
<link rel="stylesheet" href="CreateAcount.css">
</head>
<body>
<header>
<h1>Create Account</h1>
</header>

<main>
<section class="registration-form">
<h2>Registration</h2>
<form id="registration-form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>

<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>

<div class="form-group">
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>

<button type="submit">Create Account</button>
</form>
</section>
</main>

<script src="CreateAcount.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions web-frontend/src/CreateAcount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// script.js
const registrationForm = document.getElementById("registration-form");

registrationForm.addEventListener("submit", function (e) {
e.preventDefault();
// Validate and process the registration data here
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirm-password").value;


});
54 changes: 54 additions & 0 deletions web-frontend/src/Disclaimer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
}

header {
background-color: #9370DB;
color: #fff;
text-align: center;
padding: 20px;
}

.main-heading {
font-size: 36px;
margin: 0;
}

main {
padding: 20px;
}

.get-started {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 24px;
color: #333;
}

p {
font-size: 16px;
color: #777;
}

button {
background-color: #9370DB;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #0056b3;
}
29 changes: 29 additions & 0 deletions web-frontend/src/Disclaimer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legal Disclaimer - NutriHelp</title>
<link rel="stylesheet" href="Disclaimer.css">

</head>
<body>
<header>
<h1 class="main-heading">NutriHelp</h1>
</header>

<main>
<section class="disclaimer">
<h2>Legal Disclaimer</h2>
<p>The information provided on this website is for general informational purposes only. It is not intended as medical advice and should not be used as a substitute for consulting with a qualified healthcare professional.</p>
<p>By using this website, you agree to the terms and conditions outlined in this disclaimer. NutriHelp is not responsible for any actions taken based on the information provided on this site.</p>
<button id="agreeButton">Agree</button>
</section>
<script src="Disclaimer.js"></script>
</main>

<footer>
<p>&copy; 2023 NutriHelp</p>
</footer>
</body>
</html>
5 changes: 5 additions & 0 deletions web-frontend/src/Disclaimer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// script.js
document.getElementById("agreeButton").addEventListener("click", function () {
alert("Let's agree with NutriHelp Legal Disclaimer!");

});
26 changes: 26 additions & 0 deletions web-frontend/src/Welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NutriHelp - Get Started</title>
<link rel="stylesheet" href="welcome.css">


</head>
<body>
<header>
<h1 class="main-heading">NutriHelp</h1>
</header>

<main>
<section class="get-started">
<h2>Get Started</h2>
<p>Welcome to NutriHelp! Start your journey to better nutrition and health today.</p>
<button id="startButton">Start Now</button>
</section>
</main>

<script src="welcome.js"></script>
</body>
</html>
54 changes: 54 additions & 0 deletions web-frontend/src/welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
}

header {
background-color: #9370DB;
color: #fff;
text-align: center;
padding: 20px;
}

.main-heading {
font-size: 36px;
margin: 0;
}

main {
padding: 20px;
}

.get-started {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 24px;
color: #333;
}

p {
font-size: 16px;
color: #777;
}

button {
background-color: #9370DB;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #0056b3;
}
5 changes: 5 additions & 0 deletions web-frontend/src/welcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// script.js
document.getElementById("startButton").addEventListener("click", function () {
alert("Let's get started with NutriHelp!");
// You can add more functionality here.
});