Merge pull request #61 from fullstackatbrown/charles_styling

Charles styling

necysc_app/static/necysc_app/images/headshots/make_square.py

@@ -0,0 +1,25 @@
+from PIL import Image
+import os
+
+def crop_to_square(image_path):
+    with Image.open(image_path) as img:
+        width, height = img.size
+        min_dimension = min(width, height)
+        left = (width - min_dimension) / 2
+        top = (height - min_dimension) / 2
+        right = (width + min_dimension) / 2
+        bottom = (height + min_dimension) / 2
+
+        img_cropped = img.crop((left, top, right, bottom))
+        img_cropped.save(image_path)
+
+def crop_all_images_in_directory(directory):
+    for filename in os.listdir(directory):
+        if filename.lower().endswith('.jpg'):
+            image_path = os.path.join(directory, filename)
+            crop_to_square(image_path)
+            print(f'Cropped {filename}')
+
+if __name__ == "__main__":
+    current_directory = os.getcwd()
+    crop_all_images_in_directory(current_directory)

necysc_app/static/necysc_app/style.css

@@ -43,7 +43,29 @@
   color: #ffffff;
 }
 
+.btn-yellow {
+  background-color: #f9c784;
+  color: #4e598c;
+  transition: all 0.3s ease;
+  padding: 10px 20px;
+  border-radius: 20px;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+  border: none;
+}
+
+.btn-yellow:hover {
+  background-color: #4e598c;
+  color: #ffffff;
+}
+
 .accordion-item .accordion-button:not(.collapsed) {
   background-color: #4e598c; /* Darker purple when open */
   color: #ffffff; /* White text for contrast */
 }
+
+.bg-purple {
+  background-color: #4e598c;
+}

necysc_app/templates/necysc_app/website/about.html

@@ -42,97 +42,10 @@ <h1 class="textleft"><i class="icon-right-circled"></i>About Us</h1>
 
 <section class="ms-md-5 me-md-5 mb-5 mt-5">
 	<div class="container mb-5">
-		<div id="meettheteam" class="overlay">
+		<div class="overlay">
 		<h1 class="textleft"><i class="icon-right-circled"></i>Meet the Team</h1>
-			<div class="row g-4 pt-2">
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/chris_chiu.jpg'%}"></div>
-							<h5 class="fw-bold">Christopher Chiu</h5>
-							<div class="text-muted">
-								Director
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/paul_eska.jpg'%}"></div>
-							<h5 class="fw-bold">Paul Eska</h5>
-							<div class="text-muted">
-								Assistant Director
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/mikayla.jpg'%}"></div>
-							<h5 class="fw-bold">Mikayla Tow</h5>
-							<div class="text-muted">
-								Head Counselor
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/charles.jpg'%}"></div>
-							<h5 class="fw-bold">Charles Tang</h5>
-							<div class="text-muted">
-								Head Counselor
-							</div>
-						</div>
-					</div>
-				</div>
-				{% comment %} <div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
-							<h5 class="fw-bold">Lola Yao</h5>
-							<div class="text-muted">
-								Treasurer
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
-							<h5 class="fw-bold">Ivan Yim</h5>
-							<div class="text-muted">
-								Treasurer
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
-							<h5 class="fw-bold">Eugene Chiu</h5>
-							<div class="text-muted">
-								Education
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-3">
-					<div class="card text-center border-0 bg-light">
-						<div class="card-body px-4 py-4">
-							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
-							<h5 class="fw-bold">Wendy Chan</h5>
-							<div class="text-muted">
-								Administration
-							</div>
-						</div>
-					</div>
-				</div> {% endcomment %}
+			<div class="row g-4 pt-2" id="meettheteam">
+				<!-- staff cards will be dynamically added here -->
 			</div>
 		</div>
 		<div class="mt-4">
@@ -269,4 +182,48 @@ <h1 class="textleft" id="sponsors" >Featured Partner: The BOBA Project</h1>
 	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
 	}
 </style>
+
+<script>
+	const staff = [
+		["Christopher Chiu", "Directory", "chris_chiu.jpg"],
+		["Paul Eska", "Assistant Director", "paul_eska.jpg"],
+		["Mikayla Tow", "Head Counselor", "mikayla.jpg"],
+		["Charles Tang", "Head Counselor", "charles.jpg"],
+		["David Fox", "Public Relations", "david_fox.jpg"],
+		["Helen Ng", "Public Relations", "helen_ng.jpg"],
+		["Mike Breen", "Registration", "mike_breen.jpg"],
+		["Lola Yao", "Treasurer", "lola_yao.jpg"],
+		["Lina Harp", "Education", "lina_harp.jpg"],
+		["Deb Morris", "Education", "deb_morris.jpg"],
+		["Eugene Chiu", "Education", "eugene_chiu.jpg"],
+		["Deb Breen", "General Admin", "deb_breen.jpg"],
+		["Wendy Chan", "General Admin", "wendy_chan.jpg"],
+		["Danielle Watson", "Medical", "danielle_watson.jpg"],
+		["Alyssa Chan", "Medical", "alyssa_chan.jpg"],
+		["Barbara O'Toole", "Registration", "barbara_otoole.jpg"]
+		["Wei Tang", "Registration", "wei_tang.jpg"]
+
+	]
+
+	const staffContainer = document.getElementById("meettheteam");
+
+	for (let i = 0; i < staff.length; i++) {
+		const staffMember = staff[i];
+		const staffCard = document.createElement("div");
+		staffCard.className = "col-xl-3 col-md-6";
+		staffCard.innerHTML = `
+			<div class="card text-center border-0 bg-light">
+				<div class="card-body px-4 py-4">
+					<div class="mb-4 mx-2 mx-md-5"><img onerror="this.onerror=null; this.remove();" class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/' %}${staffMember[2]}"></div>
+					<h5 class="fw-bold">${staffMember[0]}</h5>
+					<div class="text-muted">
+						${staffMember[1]}
+					</div>
+				</div>
+			</div>
+		`;
+		staffContainer.appendChild(staffCard);
+	}
+
+</script>
 {% endblock %}

necysc_app/templates/necysc_app/website/index.html

@@ -31,6 +31,11 @@
         width: 47% !important; /* Adjust the value as needed */
     }
 }
+
+.bg-purple {
+    background-color: #4E598C;
+}
+
 </style>
 
 <section>
@@ -48,14 +53,17 @@ <h1 class="ps-5 mb-3 pt-3" id="aboutus">About Us</h1>
     <a class="programslink" href="{% url 'necysc_app:programs' %}" style="color: #f9c784;">A range of programs - including Day, Overnight, and ExplorAsian</a> - are provided, with 
     the primary goal of nurturing cultural appreciation and fostering a strong community spirit.
 </p>
-<div class="ps-5 mb-4">
+<div class="ps-5">
     <a href="{% url 'necysc_app:register' %}" class="col-md-3 btn-purple rounded-pill fw-bold">
         Register today!
     </a>
 </div>
 
-<div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-<div class="row ms-md-5 me-md-5 justify-content-center align-items-center">
+{% comment %} <div class="ms-5 me-5 mb-5" style="height: 2px;"></div> {% endcomment %}
+<div class="bg-purple position-relative" style="line-height: 0;">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,96L48,122.7C96,149,192,203,288,202.7C384,203,480,149,576,144C672,139,768,181,864,186.7C960,192,1056,160,1152,144C1248,128,1344,128,1392,128L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
+    <h2 class="mb-5 text-white text-center">An authentic <span class="fw-bolder text-decoration-underline" style="text-underline-offset: 10px;">Chinese-American</span> cultural experience...</h2>
+    <div class="row ms-md-5 me-md-5 pt-0 justify-content-center align-items-center">
     <div class="ratio ratio-1x1 mb-5 col-3 mx-2 shadow" style="width: 23%">
         <img src="{% static 'necysc_app/images/waterballoons.png' %}" alt="Water Balloons Image" class="img-fluid" style="object-fit: cover;">
     </div>
@@ -69,27 +77,28 @@ <h1 class="ps-5 mb-3 pt-3" id="aboutus">About Us</h1>
         <img src="{% static 'necysc_app/images/filming.png' %}" alt="Filming Image" class="img-fluid" style="object-fit: cover;">
     </div>
 </div>
-<div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
+</div>
 
-<div class="shadow fansparallax mobileparallax mb-5"></div>
-<div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
+<div class="shadow fansparallax mobileparallax"></div>
+{% comment %} <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div> {% endcomment %}
 
-<div class="ps-5 pe-5 pb-4 mb-3 justify-content-center align-items-center">
-    <h2 class="text-center">
+<div class="bg-purple position-relative pt-5">
+<div class="ps-5 pe-5 justify-content-center align-items-center">
+    <h2 class="text-center text-white">
         Camp Activities
     </h2>
-    <p class="col-md-6 m-auto">Our campers actively participate in cultural activities like Chinese Yo-yo, Kung-fu, 
+    <p class="col-md-6 m-auto text-white">Our campers actively participate in cultural activities like Chinese Yo-yo, Kung-fu, 
         and Calligraphy throughout the day. These are complemented by counselor-led events such as 
         Carnival, Fun In The Sun, Talent Show, End-of-the-Week Dance, and the eagerly-awaited CIT Dress Up. 
         Campers create life-long memories and friendships that go beyond the ordinary camp setting. As the week concludes, 
         each group performs skills they learned during their time at NECYSC for friends and family members.
     </p>
 </div>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,96L48,122.7C96,149,192,203,288,202.7C384,203,480,149,576,144C672,139,768,181,864,186.7C960,192,1056,160,1152,144C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
+</div>
 
 
-<div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-<div class="row ms-md-5 me-md-5 justify-content-center align-items-center">
+<div class="row ms-md-5 me-md-5 mb-5 justify-content-center align-items-center">
     <div class="ratio ratio-1x1 mb-5 mx-2 shadow" style="width: 23%">
         <img src="{% static 'necysc_app/images/lunch.png' %}" alt="Lunch Image" class="img-fluid" style="object-fit: cover;">
     </div>
@@ -103,7 +112,6 @@ <h2 class="text-center">
         <img src="{% static 'necysc_app/images/instrument.png' %}" alt="Instrument Image" class="img-fluid" style="object-fit: cover;">
     </div>
 </div>
-<div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
 
 <div class="shadow volleyballparallax mobileparallax mb-5"></div>