diff --git a/index.html b/index.html index d6b49ee..77ab538 100644 --- a/index.html +++ b/index.html @@ -5,62 +5,94 @@ Find Classmates - + -
-
-
-

Enter Your Information

- -
- -

+
+
+

Enter Your Information

+ + + - -

+ + - -

+ + - -

+ + - -
- -


+ +
+ +
- - + + +
+ + +
+

People with Similar Classes

+
+

Filter by classes:

- -
-

People with Similar Classes

-
-

Filter by classes:

-
-
-

No one has a similar class yet!

-
+
+

No one has a similar class yet!

+ - - diff --git a/static/default_icon.png b/static/default_icon.png new file mode 100644 index 0000000..42bfebf Binary files /dev/null and b/static/default_icon.png differ diff --git a/static/style.css b/static/style.css index ef71848..b57840e 100644 --- a/static/style.css +++ b/static/style.css @@ -1,196 +1,121 @@ +/* General Styles */ body { - font-family: Arial, sans-serif; - background-color: #f4f4f9; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9f9fc; color: #333; margin: 0; padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } +/* Main container for both form and matches */ .container { - width: 80%; - margin: 0 auto; + display: flex; + 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; background-color: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - margin-top: 50px; - border-radius: 10px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: all 0.6s ease-in-out; + box-sizing: border-box; /* Ensure padding is included in the width */ } -h1 { - text-align: center; - color: #333; /* Default color for light mode */ +/* Ensure both form and matches have the same width */ +.form-section { + max-width: 400px; } -form { - margin: 20px 0; +/* Hidden matches section by default */ +.matches-section { + opacity: 0; + height: 0; + visibility: hidden; + transition: all 0.6s ease-in-out; /* Smooth transition for visibility */ } -form label { - display: block; - margin-bottom: 10px; - font-weight: bold; - color: #555; +/* Show matches when class chip is added */ +.show-matches .matches-section { + opacity: 1; + height: auto; + 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%; padding: 10px; - margin-bottom: 20px; - border: 1px solid #ccc; - border-radius: 5px; + margin-bottom: 15px; + border-radius: 8px; + border: 1px solid #ddd; font-size: 16px; - background-color: white; - color: #333; + box-sizing: border-box; } +/* Submit button */ form input[type="submit"] { - background-color: #28a745; + background-color: #007bff; color: white; - padding: 10px 20px; border: none; - border-radius: 5px; cursor: pointer; - font-size: 16px; + transition: background-color 0.3s; } form input[type="submit"]:hover { - background-color: #218838; -} - -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%; - } + background-color: #0056b3; } +/* Tags (Class Chips) Styling */ .tags-input-container { display: flex; flex-wrap: wrap; border: 1px solid #ccc; padding: 8px; - width: 100%; + border-radius: 8px; min-height: 40px; cursor: text; } .tags-input-container:focus-within { - border-color: #0073e6; + border-color: #007bff; } .tag { display: inline-flex; align-items: center; background-color: #e0e0e0; - border-radius: 3px; + border-radius: 20px; padding: 4px 8px; margin: 4px; font-size: 14px; @@ -208,10 +133,19 @@ a.dark-mode:hover { color: red; } +/* Fix for text overflow in input fields */ .tags-input-container input { border: none; outline: none; flex-grow: 1; font-size: 14px; padding: 4px; -} \ No newline at end of file + 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; +} diff --git a/static/util.js b/static/util.js index 723d335..5c7310b 100644 --- a/static/util.js +++ b/static/util.js @@ -1,8 +1,9 @@ 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) { 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 matchesContainer = document.getElementById('matches-container'); let classes = []; // Stores the classes entered by the user @@ -67,7 +68,7 @@ document.addEventListener('DOMContentLoaded', function () { matchesContainer.innerHTML = '

No one has a similar class yet!

'; return; } - + fetch("/fetch-matches", { method: "POST", headers: { @@ -87,10 +88,10 @@ document.addEventListener('DOMContentLoaded', function () { matchesContainer.innerHTML = '

No one has that class yet!

'; return; } - + fetchedPeople = data; // Store the fetched people matchesContainer.innerHTML = ''; // Clear the matches container - + renderPeople(fetchedPeople, classes); // Render matches }) .catch(error => { @@ -98,15 +99,14 @@ document.addEventListener('DOMContentLoaded', function () { matchesContainer.innerHTML = '

No one has that class yet!

'; // Fallback message in case of any error }); } - - + function renderPeople(people, filterClasses = []) { matchesContainer.innerHTML = ''; // Clear current people list - + people.forEach(person => { const personDiv = document.createElement('div'); personDiv.classList.add('person'); - + // Render all classes: shared ones in bold, others in gray let classesHtml = person.classes.map(classname => { // Check if the classname is in the currently selected filters @@ -118,13 +118,12 @@ document.addEventListener('DOMContentLoaded', function () { return `${classname}`; } }).join(', '); - + // Display the person's name, email, and full class list personDiv.innerHTML = `${person.name}
Classes: ${classesHtml}
Email: ${person.email || 'N/A'}`; matchesContainer.appendChild(personDiv); }); } - function renderClassFilters() { 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 const selectedClasses = Array.from(document.querySelectorAll('#class-filter-container input:checked')) .map(input => input.value); - + // If no checkboxes are selected, use all classes (to keep shared ones bold) const filterClasses = selectedClasses.length === 0 ? classes : selectedClasses; - + // Filter people by selected classes, or show all people if no classes are checked const filteredPeople = fetchedPeople.filter(person => selectedClasses.length === 0 || selectedClasses.some(cls => person.classes.includes(cls)) ); - + // Render the people with the selected filters and apply the shared class highlighting logic renderPeople(filteredPeople, filterClasses); } - tagsInput.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ',') {