finished offerings

3 files changed, 335 insertions, 120 deletions

diff --git a/src/html/index.html b/src/html/index.html
index 96ab6c5..2920e48 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -113,154 +113,163 @@
       </div>
     </section>
 
-    <!-- offerings flash cards -->
+    <!-- offerings -->
     <section class="section" id="offerings">
       <div class="container">
         <div class="columns">
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front darkgreen">
-                  <div class="content">
-                    <p>Subject Tutoring</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <p>Tutoring for specific courses or disciplines.</p>
-                </div>
+            <div
+              id="offering-1"
+              class="box offering darkgreen"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p>
+                  <em>Subject Tutoring</em>
+                </p>
+                <p>Tutoring for specific courses or disciplines.</p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
 
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front darkerteal">
-                  <div class="content">
-                    <p>Time Management</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <p>
-                    Personalized plans for managing academics, extracurriculars,
-                    and other commitments.
-                  </p>
-                </div>
+            <div
+              id="offering-2"
+              class="box offering darkerteal"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p>
+                  <em>Time Management</em>
+                </p>
+                <p>
+                  Personalized plans for managing academics, extracurriculars,
+                  and other commitments.
+                </p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
 
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front darkgreen">
-                  <div class="content">
-                    <p>Study Skills</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <div class="content">
-                    <p>Learn how to make the most of your study time.</p>
-                  </div>
-                </div>
+            <div
+              id="offering-3"
+              class="box offering darkgreen"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p>
+                  <em>Study Skills</em>
+                </p>
+                <p>Learn how to make the most of your study time.</p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
 
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front darkerteal">
-                  <div class="content">
-                    <p>Academic Coaching</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <div class="content">
-                    <p>
-                      Time management and study skills blended with continuing
-                      accountability.
-                    </p>
-                  </div>
-                </div>
+            <div
+              id="offering-4"
+              class="box offering darkerteal"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p>
+                  <em>Academic Coaching </em>
+                </p>
+                <p>
+                  Time management and study skills blended with continuing
+                  accountability.
+                </p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
         </div>
       </div>
+
       <div class="container">
         <div class="columns">
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front green">
-                  <div class="content">
-                    <p>College Prep</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <p>
-                    ACT &amp; SAT preparation and assistance with college
-                    application essays.
-                  </p>
-                </div>
+            <div
+              id="offering-5"
+              class="box offering green"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p><em>College Prep</em></p>
+                <p>
+                  ACT &amp; SAT preparation and assistance with college
+                  application essays.
+                </p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
 
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front darkteal">
-                  <div class="content">
-                    <p>College-Level Writing</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <p>
-                    Get a head start on meeting professors' expectations.
-                  </p>
-                </div>
+            <div
+              id="offering-6"
+              class="box offering darkteal"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p><em>College-Level Writing</em></p>
+                <p>
+                  Get a head start on meeting professors' expectations.
+                </p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
 
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front green">
-                  <div class="content">
-                    <p>Group Webinars</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <div class="content">
-                    <p>
-                      Participate in general workshops and pre-planned courses
-                      from the comfort of home.
-                    </p>
-                  </div>
-                </div>
+            <div
+              id="offering-7"
+              class="box offering green"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p><em>Group Webinars</em></p>
+                <p>
+                  Participate in general workshops and pre-planned courses from
+                  the comfort of home.
+                </p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
 
           <div class="column is-one-fourth">
-            <div class="flash-card">
-              <div class="flash-card-inner">
-                <div class="flash-card-front darkteal">
-                  <div class="content">
-                    <p>Parent Consultations</p>
-                  </div>
-                </div>
-                <div class="flash-card-back darkgray">
-                  <div class="content">
-                    <p>
-                      For parents seeking advice for facilitating their child's
-                      learning.
-                    </p>
-                  </div>
-                </div>
+            <div
+              id="offering-8"
+              class="box offering darkteal"
+              onclick="showOffering(this)"
+            >
+              <div class="content has-text-centered">
+                <p><em>Parent Consultations</em></p>
+                <p>
+                  For parents seeking advice for facilitating their child's
+                  learning.
+                </p>
+                <p>
+                  <em><u>Learn more...</u></em>
+                </p>
               </div>
             </div>
           </div>
@@ -446,7 +455,7 @@
 
     <!-- footer, copyright, problems -->
     <footer class="footer">
-      <div class="content has-text-centedarkteal">
+      <div class="content has-text-centered">
         <p>
           &copy; 2020 Carpenter Tutoring, LLC. All rights reserved.
         </p>
@@ -459,6 +468,190 @@
       </div>
     </footer>
 
+    <!-- offering modals, hidden by default -->
+    <div id="offering-1-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering darkgreen">
+          <div class="content">
+            <ul>
+              <li>All levels of reading/Language Arts/English</li>
+              <li>All levels of Latin</li>
+              <li>Math through Algebra II/Geometry</li>
+              <li>
+                Introductory Biology, Physics, and Chemistry (not at the honors
+                or AP level)
+              </li>
+              <li>Writing skills</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-2-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering darkerteal">
+          <div class="content">
+            <p>
+              Learn how to balance all of the demands in your life. Time
+              Management sessions are tailored to your needs and can include
+              building an hour-by-hour schedule of your week, creating a
+              long-term plan for assignments and responsibilities, and
+              discussing time and stress management techniques.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-3-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering darkgreen">
+          <div class="content">
+            <p>
+              Study Skills sessions will allow students to develop a toolkit for
+              successful study habits. Learn about techniques to fight mental
+              fatigue and tools for mental recall. Study Skills sessions also
+              cover ways to address motivation, attention, and avoidance. Topics
+              will be tailored for your specific needs.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-4-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering darkerteal">
+          <div class="content">
+            <p>
+              Academic Coaching offers all the benefits of Study Skills and Time
+              Management appointments plus ongoing planning and accountability
+              support. As an Academic Coach, I keep track of your student's
+              upcoming assignments and assessments and help craft a schedule
+              week to week for them to accomplish their goals. Students come
+              away as more independent and confident planners and
+              self-advocates.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-5-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering green">
+          <div class="content">
+            <p>
+              Prepare for standardized college entrance exams with one-on-one
+              content instruction and practice testing. Additionally, learn how
+              to write an attention-grabbing personal essay for college
+              applications, and receive guidance on institution-specific
+              supplemental essays.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-6-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering darkteal">
+          <div class="content">
+            <p>
+              Learn how to shift high-school level writing to that which will be
+              expected in college. Topics covered include moving beyond the
+              five-paragraph essay, writing research papers, and choosing a
+              topic for essays with open prompts. In-session exercises will
+              allow students to implement these skills in real time with
+              immediate feedback.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-7-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering green">
+          <div class="content">
+            <p>
+              Join a small group of peers online to learn and grow together.
+              One-session webinars include overviews of time management
+              techniques and study skills and are best suited to high school and
+              college students. Pre-planned courses, including SAT Prep, ACT
+              Prep, and College Transition, meet once per week for five weeks at
+              a time. Pay $30 per session or save 10% and buy as a package for
+              $135! Webinars will be hosted through password-protected Zoom
+              meetings. Participants will receive the Zoom link and weekly
+              password through e-mail.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
+    <div id="offering-8-modal" class="modal fadeIn">
+      <div class="modal-background" onclick="hideOffering(this)"></div>
+      <div class="modal-content">
+        <div class="box offering darkteal">
+          <div class="content">
+            <p>
+              After I have worked with your student for a few sessions, you may
+              request a Parent Consultation during which I will discuss the
+              strengths and areas for improvement I have seen in your child and
+              the ways you may be able to help. All parents want to help their
+              children succeed, but sometimes the way we offer that assistance
+              is not the way children want to receive it. Learn how to meet your
+              child where they are and support them in ways which resonate with
+              their unique needs. These sessions are not tell-alls of what your
+              student and I discuss during our sessions, as I feel that trust is
+              central to successful tutoring relationships.
+            </p>
+          </div>
+        </div>
+      </div>
+      <button
+        class="modal-close is-large"
+        onclick="hideOffering(this)"
+      ></button>
+    </div>
+
     <script src="/js/index.js" type="text/javascript"></script>
     <script src="/js/iconify.min.js" type="text/javascript"></script>
     <script src="/js/smtp.js" type="text/javascript"></script>
diff --git a/src/js/index.js b/src/js/index.js
index 77cdf65..8f3a987 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,5 +1,15 @@
+const showOffering = function(element) {
+	const offeringModal = document.getElementById(element.id + "-modal");
+	offeringModal.classList.add("is-active");
+}
+
+const hideOffering = function(element) {
+	element.parentElement.classList.remove("is-active");
+}
+
 /*
  * Adds an event listener to all burgers to toggle navbar menu on click.
+ * TODO: would be better off as a single function and onclicks inlined in html
  */
 document.addEventListener('DOMContentLoaded', function () {
 	const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
@@ -55,9 +65,9 @@ document.forms.inquiry.onsubmit = function() {
 
 	Email.send({
 		SecureToken : "cec9bc04-de48-48fd-b1ad-a95cffb41468",
-		To : "atc@53hor.net",
+		To : "amy@carpentertutoring.com",
 		From : fromEmail,
-		Subject : "Inquiry: " + name,
+		Subject : "Tutoring Inquiry from " + name,
 		Body : body,
 	}).then(message => {
 		if (message == "OK") {
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 79ed71d..67f41a5 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -41,31 +41,29 @@ $body-font-size: 1.25rem;
 @import "../../node_modules/bulma/sass/layout/_all.sass";
 @import "../../node_modules/bulma/sass/grid/_all.sass";
 
-// Palette
+.offering {
+  color: white;
+}
+.offering .content u {
+  cursor: pointer;
+}
+.column .offering {
+  border: 1em solid $darkgray;
+}
 .darkteal {
   background-color: $darkteal;
-  border: 1em solid $darkgray;
-  color: white;
 }
 .green {
   background-color: $green;
-  border: 1em solid $darkgray;
-  color: white;
 }
 .darkerteal {
   background-color: $darkerteal;
-  border: 1em solid $darkgray;
-  color: white;
 }
 .darkgray {
   background-color: $darkgray;
-  border: 1em solid $darkgray;
-  color: white;
 }
 .darkgreen {
   background-color: $darkgreen;
-  border: 1em solid $darkgray;
-  color: white;
 }
 
 .blurb {
@@ -127,6 +125,20 @@ $body-font-size: 1.25rem;
   text-shadow: 0px 0px 4px #ffffff;
 }
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+  animation-duration: 0.3s;
+}
+
 body {
   background-image: url("/bg.png");
 }