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

86
index.html
View File

@ -5,49 +5,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Classmates</title>
<link rel="stylesheet" href="/static/style.css">
<style>
.class-shared {
font-weight: bold;
color: black;
}
.class-other {
color: gray;
}
.class-not-shared {
color: gray;
text-decoration: line-through;
}
</style>
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="form-section">
<div class="container" id="main-container">
<div class="form-section" id="form-section">
<h1>Enter Your Information</h1>
<button id="dark-mode-toggle">Toggle Dark Mode</button>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<input type="text" id="name" name="name" required>
<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>
<input type="text" id="phone" name="phone"><br><br>
<input type="text" id="phone" name="phone">
<label for="dorm">Dorm:</label>
<input type="text" id="dorm" name="dorm"><br><br>
<input type="text" id="dorm" name="dorm">
<label>Classes:</label>
<div class="tags-input-container" id="classes-container">
<input type="text" id="classes-input" placeholder="Enter classes" />
</div><br><br>
<input type="text" id="classes-input" placeholder="Enter classes">
</div>
<input type="submit" value="Submit">
</form>
</div>
<div class="matches-section">
<!-- 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>
@ -57,10 +47,52 @@
</div>
</div>
</div>
</div>
<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>
</html>

BIN
static/default_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 B

226
static/style.css
View File

@ -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;
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;
}

12
static/util.js
View File

@ -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
@ -99,7 +100,6 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
function renderPeople(people, filterClasses = []) {
matchesContainer.innerHTML = ''; // Clear current people list
@ -125,7 +125,6 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
function renderClassFilters() {
const filterContainer = document.getElementById('class-filter-container');
filterContainer.innerHTML = ''; // Clear existing filters
@ -162,7 +161,6 @@ document.addEventListener('DOMContentLoaded', function () {
renderPeople(filteredPeople, filterClasses);
}
tagsInput.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === ',') {
event.preventDefault();