Add useBabyTransitions hook and utility functions for date validation…

… and transitions
ntemposd · Jan 5, 2025 · d3caefa · d3caefa
1 parent 6deb3e9
commit d3caefa
Show file tree

Hide file tree

Showing 11 changed files with 433 additions and 288 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,11 @@
 # Babyweeks
 
-Babyweeks is a React app designed to help users track their baby's development milestones by calculating the number of weeks since a given birthdate and providing relevant insights. The idea started back in 2022 using PyScript and transitioned to React in early 2025. The app is hosted on GitHub Pages.
+Babyweeks is a React app designed to help users track their baby's development milestones by calculating the number of weeks since a given birthdate. It started back in 2021 using PyScript and transitioned to React in early 2025. The app is hosted on GitHub Pages.
 
-## Features
+## What a user can do
 
 - Input a birthdate to calculate the weeks since birth.
-- View developmental milestones content for specific week ranges.
-- Navigate through transitions using a simple and intuitive interface.
+- View developmental milestones content for a baby's first year.
 
 ---
 

diff --git a/logo192.png → public/logo192.png b/logo192.png → public/logo192.png
diff --git a/logo512.png → public/logo512.png b/logo512.png → public/logo512.png
diff --git a/manifest.json → public/manifest.json b/manifest.json → public/manifest.json
diff --git a/src/App.css b/src/App.css
@@ -1,124 +1,131 @@
 .App {
-    align-items: center;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
+    flex-direction: column; /* Stack header, main, and footer vertically */
+    min-height: 100vh; /* Full viewport height */
 }
+
 .App-logo {
+    width: 160px;
     height: 160px;
-    pointer-events: none;
     transition: transform var(--transition-speed) ease;
-    width: 160px;
+    pointer-events: none;
 }
+
 .App-header {
-    align-items: center;
-    background-repeat: repeat;
-    background-size: 50px 50px; /* Adjust the size of the repeated tiles */
-    box-shadow: 0 4px 12px var(--shadow-light);
-    color: var(--text-light);
     display: flex;
     flex-direction: column;
+    align-items: center;
     width: 100%;
-
-    /* Apply the gradient first, then the baby texture */
-    background-image:
-      url('./assets/baby_texture.png'), /* Texture image */
-      linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), rgba(255, 0, 255, 0.5)); /* Gradient */
+    background-image: 
+        url('./assets/baby_texture.png'), /* Texture image */
+        linear-gradient(to bottom right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.9)); /* Light gradient */
+    background-repeat: repeat;
+    background-size: 50px 50px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    color: var(--text-light);
 }
 
-
 .container {
+    width: 100%;
     max-width: 1200px;
     padding: 0 1rem;
     text-align: center;
-    width: 100%;
-}
-.App-link {
-    color: var(--primary-color);
-    font-weight: 500;
-    text-decoration: none;
-    transition: color var(--transition-speed) ease;
-}
-.App-link:hover {
-    color: #8a80ff;
-}
-@keyframes App-logo-spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(1turn);
-    }
 }
+
 .calculator {
-    align-items: center;
-    /* background-color: var(--light-bg-color); */
-    border-radius: var(--border-radius);
-    /* box-shadow: 0 4px 8px var(--shadow-light); */
     display: flex;
     flex-direction: column;
-    gap: rem;
+    align-items: center;
+    gap: 1rem;
     max-width: 500px;
     padding: 1rem;
-    transition: background-color var(--transition-speed);
     width: 100%;
 }
+
 input[type="date"] {
+    width: 100%;
+    max-width: 300px;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    color: var(--text-color);
     background-color: var(--light-bg-color);
-    border: 10px solid #ddd;
+    border: 2px solid #ddd;
     border-radius: var(--border-radius);
-    box-shadow: 0 2px 5px var(--shadow-light);
-    color: var(--text-color);
-    font-size: 1rem;
-    max-width: 300px;
-    padding: 0.75rem 3rem 0.75rem 1rem;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: all var(--transition-speed) ease;
-    width: 100%;
 }
+
 input[type="date"]:focus {
     background-color: #fff;
     border-color: var(--primary-color);
-    box-shadow: 0 4px 8px var(--shadow-dark);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
+
 input[type="date"]:hover {
     border-color: #bbb;
 }
+
 input[type="date"]::placeholder {
     color: #aaa;
 }
-.input-wrapper {
-    margin: auto;
-    max-width: 300px;
+
+.message-slider {
+    width: 100%;
+    max-width: 600px;
+    overflow: hidden;
     position: relative;
+    margin: 0 auto;
+    padding-bottom: 30px; /* Space for dots */
 }
-.input-wrapper .icon {
-    color: #bbb;
-    pointer-events: none;
+
+.slick-dots {
     position: absolute;
-    right: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
+    bottom: 10px;
+    left: 0;
+    right: 0;
+    display: flex !important;
+    justify-content: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.slick-dots li button:before {
+    font-size: 0.75rem;
+    color: var(--primary-color);
+    opacity: 0.5;
 }
-.navigation .btn {
-    margin: 0 5px;
+
+.slick-dots li.slick-active button:before {
+    opacity: 1;
 }
+
 .message {
-    border-radius: var(--border-radius);
-    box-shadow: 0 2px 6px var(--shadow-light);
-    color: var(--text-color);
-    font-size: 1.1em;
-    line-height: 1.5;
-    margin: 20px auto 0;
+    margin: 0 auto;
     max-width: 80%;
-    height: 400px; /* Set a fixed height */
-    overflow: hidden; /* Ensures that long text doesn't break the layout */
-    opacity: 0;
-    padding: 15px 20px;
+    padding: 15px 20px; /* Adjusted for original typography */
+    font-size: 1.1rem; /* Restored original typography */
+    line-height: 1.5; /* Restored original line-height */
+    color: var(--text-color);
+    background-color: #fff; /* Bright white background */
+    /* border: 1px solid rgba(0, 0, 0, 0.1); Subtle border */
+    border-radius: var(--border-radius); /* Smooth corners */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for modern look */
     text-align: center;
-    transition: opacity 0.5s ease-in-out;
+    min-height: 150px; /* Prevent collapse for short messages */
+    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add hover animation */
 }
 
 .message.show {
-    opacity: 1;
+    opacity: 1; /* Animations for Message Visibility */
 }
+
+footer {
+    width: 100%;
+    /* text-align: center; */
+    font-size: 0.9rem;
+    /* color: var(--text-color); */
+    /* background-color: var(--light-bg-color); */
+    padding: 1rem 0;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+}
diff --git a/...ts/purple_background_embossed_texture.png → src/assets/header_texture.png b/...ts/purple_background_embossed_texture.png → src/assets/header_texture.png
diff --git a/src/components/AboutPage.js b/src/components/AboutPage.js
@@ -1,50 +1,78 @@
-// src/pages/About.js
 import React from 'react';
-import '../App.css';
 import babyImage from '../assets/baby-girl.svg';
+import headerImage from '../assets/baby_texture.png';
 
-const AboutPage = () => {
-    return (
-      <div className="App text-center">
-        <header className="App-header">
-          <div className="container pt-4">
-            <img
-              src={babyImage}
-              className="App-logo"
-              alt="Illustration of a baby girl"
-              width="160"
-              height="160"
-              style={{ width: '20vmin', height: 'auto' }}
-            />
-            <h1 className="fw-bold">About Growth Leaps</h1>
-            <p className="fw-light mt-1">
-              <mark>Why</mark> <span className="material-icons">construction</span> built this app.
-            </p>
-          </div>
-          <svg height="1" width="100%" className="header-line">
-            <line x1="0" y1="0" x2="100%" y2="1" stroke="yellow" strokeWidth="4" />
-          </svg>
-        </header>
-
-      		<div className="fw-light px-5">
-      			<p>For the past couple of years, we’ve been experiencing parenthood. During our kids' first year, their pediatrician linked unexpected mood changes to transitions between growth cycle stages. While these weeks vary by child and are more empirical than scientific, the app helps my partner quickly calculate the current week of our kids' growth cycles, saving the need to count manually in her calendar.</p>
-      			<h2>Who can use the app</h2>
-      			<p>Anyone! The app is free, <a href="https://github.com/ntemposd/babyweeks"><u>open-source</u></a> and runs on your browser. Meaning it doesn't store any personal or sensitive data such as emails and your baby's birthdate so that you are targeted with ads later on. The app uses essential cookies to track information like location, browser and button clicks exploited by the creator to optimize the app's behavior and functionality. Don't want to share any information? <a href="https://support.google.com/analytics/answer/181881?hl=en"><u>Here</u></a> is how to opt-out.</p>
-      			<h2>Upcoming improvements</h2>
+function preloadImage(url) {
+  const img = new Image();
+  img.src = url;
+}
 
-      			<p>Babyweeks is currently in Beta version, might be slow and/or break. If any of those happen, keep calm and support me by clicking the green button on the lower right corner. I’m still working on it.</p>
-      			<ul className="list-group-numbered">
-      				<li>Translate into more languages</li>
-      				<li>Add year 1+ transitions content</li>
-      				<li>Optimize for small screens</li>
-      			</ul>
-
-      			<p>Have an idea? Send me an <a href="mailto:[email protected]"><span className="material-icons">mail_outline</span></a></p>
-      		</div>
+preloadImage(babyImage);
+preloadImage(headerImage);
 
+const AboutPage = () => {
+  return (
+    <div className="App text-center">
+      <header className="App-header">
+        <div className="container pt-4">
+          <img src={babyImage} className="App-logo" alt="Baby" />
+          <h1 className="fw-bold">Growth Leaps</h1>
+          <p className="fw-light mt-1"><span className="highlight">Why I built this app.</span>{' '}
+            <span
+              className="material-icons"
+              aria-label="Under construction"
+            >
+              construction
+            </span>{' '}
+
+          </p>
+        </div>
+        <svg height="1" width="100%" className="header-line">
+          <line x1="0" y1="0" x2="100%" y2="1" stroke="yellow" strokeWidth="4" />
+        </svg>
+      </header>
+      <main>
+
+          <p>
+            During a child’s first year, unexpected short-term mood changes, without other medical signs, may be linked to transitions between growth cycle stages. These periods, often referred to as Growth Leaps, vary from child to child and are rather based on observation than in scientific evidence. Understanding transitions can help parents navigate their child's infancy with greater patience.
+          </p>
+          <h2>How it works</h2>
+          <p>
+            The app helped my partner quickly calculate the current week of our kids' growth cycles,
+            saving the need to count manually in the calendar. The app is free,{' '}
+            <a
+              href="https://github.com/ntemposd/babyweeks"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="link"
+            >
+              open-source
+            </a>{' '}
+            and runs on your browser.
+          </p>
+
+          <h2>Upcoming improvements</h2>
+          <ul className="list-group mt-1">
+            <li className="list-group-item">Translate into more languages</li>
+            <li className="list-group-item">Add year 1+ transitions content</li>
+          </ul>
+          <p className="mt-4">
+            Have an idea? Send me an{' '}
+            <a
+              href="mailto:[email protected]"
+              className="link"
+            >
+              email
+            </a>
+            .
+          </p>
+      </main>
 
-      </div>
-    );
+      <footer>
+        <p>© 2025 · Crafted with ❤️ by ntemposd</p>
+      </footer>
+    </div>
+  );
 };
 
 export default AboutPage;