illyum/FormMaker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Work on stylizing it better

Browse Source
This commit is contained in:
illyum 2024-09-06 00:44:15 -06:00
parent 5cebf50093
commit 2964af1227
4 changed files with 172 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
index.html
View File

@ -5,62 +5,94 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Classmates</title> <title>Find Classmates</title>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<style> <script>
.class-shared { /*to prevent Firefox FOUC, this must be here*/
font-weight: bold; let FF_FOUC_FIX;
color: black; </script>
}
.class-other {
color: gray;
}
.class-not-shared {
color: gray;
text-decoration: line-through;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container" id="main-container">
<div class="content"> <div class="form-section" id="form-section">
<div class="form-section"> <h1>Enter Your Information</h1>
<h1>Enter Your Information</h1> <form action="/submit" method="post">
<button id="dark-mode-toggle">Toggle Dark Mode</button> <label for="name">Name:</label>
<form action="/submit" method="post"> <input type="text" id="name" name="name" required>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label> <label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br> <input type="email" id="email" name="email">
<label for="phone">Phone:</label> <label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br><br> <input type="text" id="phone" name="phone">
<label for="dorm">Dorm:</label> <label for="dorm">Dorm:</label>
<input type="text" id="dorm" name="dorm"><br><br> <input type="text" id="dorm" name="dorm">
<label>Classes:</label> <label>Classes:</label>
<div class="tags-input-container" id="classes-container"> <div class="tags-input-container" id="classes-container">
<input type="text" id="classes-input" placeholder="Enter classes" /> <input type="text" id="classes-input" placeholder="Enter classes">
</div><br><br> </div>
<input type="submit" value="Submit"> <input type="submit" value="Submit">
</form> </form>
</div>
<!-- Hidden matches section until classes are entered -->
<div class="matches-section" id="matches-section">
<h2>People with Similar Classes</h2>
<div id="class-filter-container">
<p>Filter by classes:</p>
</div> </div>
<div id="matches-container">
<div class="matches-section"> <p>No one has a similar class yet!</p>
<h2>People with Similar Classes</h2>
<div id="class-filter-container">
<p>Filter by classes:</p>
</div>
<div id="matches-container">
<p>No one has a similar class yet!</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<script src="/static/util.js"></script> <script src="/static/util.js"></script>
<script>
const classInput = document.getElementById('classes-input');
const formSection = document.getElementById('form-section');
const matchesSection = document.getElementById('matches-section');
const mainContainer = document.getElementById('main-container');
const tagsInputContainer = document.getElementById('classes-container');
// Add event listener to handle Enter key for adding chips
classInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && classInput.value.trim() !== "") {
event.preventDefault();
addClassChip(classInput.value.trim());
classInput.value = ''; // Clear input after adding
}
});
// Function to add a chip (tag)
function addClassChip(className) {
const tag = document.createElement('div');
tag.classList.add('tag');
tag.innerHTML = className + '<span class="close">x</span>';
// Append the new tag to the tags container
tagsInputContainer.insertBefore(tag, classInput);
// Check if any chips exist, and show the matches section
updateMatchesVisibility();
// Remove tag on close click
tag.querySelector('.close').addEventListener('click', function() {
tag.remove();
updateMatchesVisibility(); // Check visibility when a chip is removed
});
}
function updateMatchesVisibility() {
const chipCount = tagsInputContainer.getElementsByClassName('tag').length;
console.log('Chip count:', chipCount); // Debugging message
if (chipCount > 0) {
mainContainer.classList.add('show-matches');
} else {
mainContainer.classList.remove('show-matches');
}
}
</script>
</body> </body>
</html> </html>

BIN
static/default_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 B

228
static/style.css
View File

@ -1,196 +1,121 @@
/* General Styles */
body { body {
font-family: Arial, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f9; background-color: #f9f9fc;
color: #333; color: #333;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
} }
/* Main container for both form and matches */
.container { .container {
width: 80%; display: flex;
margin: 0 auto; justify-content: center;
align-items: center;
width: 90%; /* Increased width for a more uniform layout */
max-width: 1000px;
transition: all 0.6s ease-in-out;
}
/* Form and Matches Sections */
.form-section, .matches-section {
width: 100%;
padding: 20px; padding: 20px;
background-color: white; background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 15px;
margin-top: 50px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px; transition: all 0.6s ease-in-out;
box-sizing: border-box; /* Ensure padding is included in the width */
} }
h1 { /* Ensure both form and matches have the same width */
text-align: center; .form-section {
color: #333; /* Default color for light mode */ max-width: 400px;
} }
form { /* Hidden matches section by default */
margin: 20px 0; .matches-section {
opacity: 0;
height: 0;
visibility: hidden;
transition: all 0.6s ease-in-out; /* Smooth transition for visibility */
} }
form label { /* Show matches when class chip is added */
display: block; .show-matches .matches-section {
margin-bottom: 10px; opacity: 1;
font-weight: bold; height: auto;
color: #555; visibility: visible;
margin-left: 20px;
transition: all 0.6s ease-in-out;
} }
form input[type="text"], form input[type="email"], form textarea { /* Smooth fade-in animation for the matches section */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Form Section Animation */
.show-matches .form-section {
transform: translateX(-50%);
transition: all 0.6s ease-in-out;
}
/* Input fields */
form input[type="text"], form input[type="email"], form input[type="submit"] {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 15px;
border: 1px solid #ccc; border-radius: 8px;
border-radius: 5px; border: 1px solid #ddd;
font-size: 16px; font-size: 16px;
background-color: white; box-sizing: border-box;
color: #333;
} }
/* Submit button */
form input[type="submit"] { form input[type="submit"] {
background-color: #28a745; background-color: #007bff;
color: white; color: white;
padding: 10px 20px;
border: none; border: none;
border-radius: 5px;
cursor: pointer; cursor: pointer;
font-size: 16px; transition: background-color 0.3s;
} }
form input[type="submit"]:hover { form input[type="submit"]:hover {
background-color: #218838; background-color: #0056b3;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #333;
}
td {
background-color: white;
color: #333;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/*
* DARK MODE
*/
body.dark-mode {
background-color: #1a1a1a;
color: #f4f4f9;
}
.container.dark-mode {
background-color: #333;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
h1.dark-mode {
color: #f4f4f9; /* Ensure that the heading is white and visible */
}
form label.dark-mode {
color: #f4f4f9;
}
form input[type="text"].dark-mode, form input[type="email"].dark-mode, form textarea.dark-mode {
background-color: #555;
color: #f4f4f9;
border: 1px solid #888;
}
form input[type="submit"].dark-mode {
background-color: #28a745;
color: white;
}
table.dark-mode {
background-color: #444;
}
th.dark-mode {
background-color: #555;
color: #f4f4f9;
}
td.dark-mode {
background-color: #666;
color: #f4f4f9;
}
a.dark-mode {
color: #66b3ff;
}
a.dark-mode:hover {
color: #3399ff;
text-decoration: underline;
}
.content {
display: flex;
flex-wrap: wrap;
}
.form-section, .matches-section {
flex: 1;
padding: 20px;
}
@media (min-width: 768px) {
.form-section {
width: 50%;
}
.matches-section {
width: 50%;
}
}
@media (max-width: 767px) {
.form-section, .matches-section {
width: 100%;
}
} }
/* Tags (Class Chips) Styling */
.tags-input-container { .tags-input-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 8px; padding: 8px;
width: 100%; border-radius: 8px;
min-height: 40px; min-height: 40px;
cursor: text; cursor: text;
} }
.tags-input-container:focus-within { .tags-input-container:focus-within {
border-color: #0073e6; border-color: #007bff;
} }
.tag { .tag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: #e0e0e0; background-color: #e0e0e0;
border-radius: 3px; border-radius: 20px;
padding: 4px 8px; padding: 4px 8px;
margin: 4px; margin: 4px;
font-size: 14px; font-size: 14px;
@ -208,10 +133,19 @@ a.dark-mode:hover {
color: red; color: red;
} }
/* Fix for text overflow in input fields */
.tags-input-container input { .tags-input-container input {
border: none; border: none;
outline: none; outline: none;
flex-grow: 1; flex-grow: 1;
font-size: 14px; font-size: 14px;
padding: 4px; padding: 4px;
} min-width: 50px;
}
/* Matches section styling (not a card for the 'No similar classes' text) */
#matches-container p {
margin: 0;
color: #666;
text-align: center;
}

32
static/util.js
View File

@ -1,8 +1,9 @@
console.log("entered script"); console.log("entered script");
document.addEventListener('DOMContentLoaded', function () {
const questionTypeElement = document.getElementById('question_type');
console.log("dom content loaded!"); window.addEventListener('load', function () {
console.log("All resources finished loading!");
const questionTypeElement = document.getElementById('question_type');
if (questionTypeElement) { if (questionTypeElement) {
questionTypeElement.addEventListener('change', function () { questionTypeElement.addEventListener('change', function () {
@ -37,7 +38,7 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
}); });
document.addEventListener('DOMContentLoaded', function () { window.addEventListener('load', function () {
const tagsInput = document.getElementById('classes-input'); const tagsInput = document.getElementById('classes-input');
const matchesContainer = document.getElementById('matches-container'); const matchesContainer = document.getElementById('matches-container');
let classes = []; // Stores the classes entered by the user let classes = []; // Stores the classes entered by the user
@ -67,7 +68,7 @@ document.addEventListener('DOMContentLoaded', function () {
matchesContainer.innerHTML = '<p>No one has a similar class yet!</p>'; matchesContainer.innerHTML = '<p>No one has a similar class yet!</p>';
return; return;
} }
fetch("/fetch-matches", { fetch("/fetch-matches", {
method: "POST", method: "POST",
headers: { headers: {
@ -87,10 +88,10 @@ document.addEventListener('DOMContentLoaded', function () {
matchesContainer.innerHTML = '<p>No one has that class yet!</p>'; matchesContainer.innerHTML = '<p>No one has that class yet!</p>';
return; return;
} }
fetchedPeople = data; // Store the fetched people fetchedPeople = data; // Store the fetched people
matchesContainer.innerHTML = ''; // Clear the matches container matchesContainer.innerHTML = ''; // Clear the matches container
renderPeople(fetchedPeople, classes); // Render matches renderPeople(fetchedPeople, classes); // Render matches
}) })
.catch(error => { .catch(error => {
@ -98,15 +99,14 @@ document.addEventListener('DOMContentLoaded', function () {
matchesContainer.innerHTML = '<p>No one has that class yet!</p>'; // Fallback message in case of any error matchesContainer.innerHTML = '<p>No one has that class yet!</p>'; // Fallback message in case of any error
}); });
} }
function renderPeople(people, filterClasses = []) { function renderPeople(people, filterClasses = []) {
matchesContainer.innerHTML = ''; // Clear current people list matchesContainer.innerHTML = ''; // Clear current people list
people.forEach(person => { people.forEach(person => {
const personDiv = document.createElement('div'); const personDiv = document.createElement('div');
personDiv.classList.add('person'); personDiv.classList.add('person');
// Render all classes: shared ones in bold, others in gray // Render all classes: shared ones in bold, others in gray
let classesHtml = person.classes.map(classname => { let classesHtml = person.classes.map(classname => {
// Check if the classname is in the currently selected filters // Check if the classname is in the currently selected filters
@ -118,13 +118,12 @@ document.addEventListener('DOMContentLoaded', function () {
return `<span class="class-other">${classname}</span>`; return `<span class="class-other">${classname}</span>`;
} }
}).join(', '); }).join(', ');
// Display the person's name, email, and full class list // Display the person's name, email, and full class list
personDiv.innerHTML = `<strong>${person.name}</strong><br>Classes: ${classesHtml}<br>Email: ${person.email || 'N/A'}`; personDiv.innerHTML = `<strong>${person.name}</strong><br>Classes: ${classesHtml}<br>Email: ${person.email || 'N/A'}`;
matchesContainer.appendChild(personDiv); matchesContainer.appendChild(personDiv);
}); });
} }
function renderClassFilters() { function renderClassFilters() {
const filterContainer = document.getElementById('class-filter-container'); const filterContainer = document.getElementById('class-filter-container');
@ -149,19 +148,18 @@ document.addEventListener('DOMContentLoaded', function () {
// Get the list of currently checked classes from the checkboxes // Get the list of currently checked classes from the checkboxes
const selectedClasses = Array.from(document.querySelectorAll('#class-filter-container input:checked')) const selectedClasses = Array.from(document.querySelectorAll('#class-filter-container input:checked'))
.map(input => input.value); .map(input => input.value);
// If no checkboxes are selected, use all classes (to keep shared ones bold) // If no checkboxes are selected, use all classes (to keep shared ones bold)
const filterClasses = selectedClasses.length === 0 ? classes : selectedClasses; const filterClasses = selectedClasses.length === 0 ? classes : selectedClasses;
// Filter people by selected classes, or show all people if no classes are checked // Filter people by selected classes, or show all people if no classes are checked
const filteredPeople = fetchedPeople.filter(person => const filteredPeople = fetchedPeople.filter(person =>
selectedClasses.length === 0 || selectedClasses.some(cls => person.classes.includes(cls)) selectedClasses.length === 0 || selectedClasses.some(cls => person.classes.includes(cls))
); );
// Render the people with the selected filters and apply the shared class highlighting logic // Render the people with the selected filters and apply the shared class highlighting logic
renderPeople(filteredPeople, filterClasses); renderPeople(filteredPeople, filterClasses);
} }
tagsInput.addEventListener('keydown', function (event) { tagsInput.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === ',') { if (event.key === 'Enter' || event.key === ',') {