diff --git a/docs/Build_Guide/first2.md b/docs/Build_Guide/base.md similarity index 64% rename from docs/Build_Guide/first2.md rename to docs/Build_Guide/base.md index 077d766..7b8f72a 100644 --- a/docs/Build_Guide/first2.md +++ b/docs/Build_Guide/base.md @@ -13,12 +13,11 @@ We'll start with assembling the base structure and making the required modificat @@ -29,7 +28,7 @@ We'll start with assembling the base structure and making the required modificat * **1.4 Mark location of additional holes to drill**: The new combination of the top tray walls requires at least 4 additional holes, if you make use of the existing holes. If not, you need to drill all 8 holes yourself. Mark the locations for the holes. If you're using existing holes, measure the distances of the new holes to the existing ones using a side piece of the tray. * **1.5 Drill the additional holes**: Only drill on the inside of metal frame (no need to drill all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly) to be able to use the provided plastic pieces. * **1.6 Install the top tray**: Only install the sides, and not the central surface since we’ll insert the washbasin there. For existing holes, use the scres Ikea provided. - * **1.7 Install the middle and bottom trays**: Given the customisation on the top tray, we used the pieces originally for the top tray on the bottom tray. + * **1.7 Install the middle and bottom trays**: Given the customisation on the top tray, we used the remaining pieces on the bottom tray. ⠀**Result**: The trolley is customized and ready for washbasin installation.

@@ -70,11 +69,28 @@ Now we'll convert the plastic tray into a washbasin.

- Fit the electronic components like switches, scroll wheel, and PCB into the shell. Secure everything with screws or clips, then test the mouse. + + In the middle of the tray, we'll make a pivoting hole which will hold the washbasin. With that, the tray can be rotated to each side to enable the 2 mode design: + * Tilted to **Left**: Clean water circulation for play (water recycles) + * Tilted to **Right**: Dirty water disposal or for washing with soap (drains to waste bucket) + +Here are the actions in this step: + * **3.1 Mark drill points**: Locate the horizontal center of the top tray's front and back edges. + * **3.2 Drill front hole**: Drill through the front section at the marked center point as high as possible. This would maximize tilt range. + * **3.3 Measure and match**: Measure the height of the front hole from the bottom of the metal piece. + * **3.4 Drill back hole**: Using the same height measurement from the bottom of the metal piece at the back, drill the back hole to ensure the washbasin remains level when connected to the holes. + * **3.5 Install**: Screw the washbasin to the top tray through both holes to enable left-right rotation. + + **Key point**: Higher hole placement = Greater tilt range for the wash person. + + **Result**: Sink structure and washbasin are ready. Now it's time to install the pump, filter, switchbox and the faucet.

diff --git a/docs/Build_Guide/bom.md b/docs/Build_Guide/bom.md index 0a98dee..d42cf6c 100644 --- a/docs/Build_Guide/bom.md +++ b/docs/Build_Guide/bom.md @@ -1,5 +1,5 @@ --- -title: List of materials (BOM) +title: Bill of materials (BOM) description: Add description sidebar_position: 1 --- @@ -17,6 +17,7 @@ sidebar_position: 1 - [DC pump (5V)](https://www.amazon.es/dp/B0B24G8WP7) - 1m of hose in adequate size for the pump you purchase, can be found in local hardware or aquiarium stores +- Cloth mesh to filter out solid particles - We used a surgical cap for this: Cheap and does the job to perfection. **For the Switch Box** diff --git a/docs/Build_Guide/del.md b/docs/Build_Guide/del.md deleted file mode 100644 index 68aaa21..0000000 --- a/docs/Build_Guide/del.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Delete later -description: ... -sidebar_position: 2 ---- - -Here's a step by step guide to build the base structure of the sink yourself. - -## Step 1 - Assemble and Customise the Base - -**1** **Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There will be some changes you need to make in order to customise the piece into a sink. - -**2** **Modify top tray (Turn it into a washbasin)**: - * Position top tray at your child's height. See if you can use some of the existing holes that are in place for the top tray. We were able to make use of the existing holes as my son was sufficiently high. - * Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping the front piece lower will allow easier access to the faucet. - * This new combination of the top tray requires at least 4 additional holes. If you’re doing all the holes yourself, you’ll need to drill 8 holes. - * Mark the locations for the holes, measuring the distances of the new holes to the existing ones. - * Drill the additional holes. Only drill on the inside of metal frame only (holes don’t need to go all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly) - * Install the tray sides. Only install the sides of the tray, and not the central piece since we’ll insert the washbasin there. For the holes you drilled, you can use the included plastic caps—no need to use extra screws. For existing holes, Ikea provided some screws to use. -- Install the other trays as in original instructions with the remaining pieces. - -⠀**Result**: A customized cart ready for washbasin installation. - -## Step 2 - -- **Prepare the Washbasin** -- **Converting Plastic Tray to Washbasin** - -Now we'll convert the plastic tray into a washbasin. - - -⠀**Steps**: -**1** **Drill drainage holes**: Create 7 holes on each side of the tray at the deepest edge points to ensure complete water drainage. -**2** **Check fit**: The modified tray should now resemble a washbasin and sit properly on the top cart frame. -**3** **Drill pivot holes**: Locate the center of the plastic tray and drill holes slightly offset from center (to avoid the plastic bumper). Ensure holes align on both sides (offset the bumper to the same side on both sides) and match your screw diameter. -**4** **Secure nuts**: - * Screw nuts onto bolts in the washbasin holes - * Apply hot glue around each nut to lock in position - * Once glue dries, remove screws—nuts stay permanently fixed - -⠀**Result**: Washbasin ready for pivot installation with secure, glued-in-place nuts. - - - -import ImageCarousel from '@site/src/components/ImageCarousel'; - - - - -:::info[materials] -Here's a list of materials needed to construct this sink: -::: diff --git a/docusaurus.config.js b/docusaurus.config.js index 9237c19..0412a76 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -44,7 +44,6 @@ const config = { docs: { sidebarPath: require.resolve('./sidebars.js'), // ✅ Must point to your sidebars.js routeBasePath: 'docs', // or '/' if you moved docs to root - toc: false, }, blog: { showReadingTime: true, diff --git a/src/pages/index.js b/src/pages/index.js index 8f1d0c1..8bdc30c 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,43 +1,187 @@ -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import React, { useEffect } from 'react'; +import Head from '@docusaurus/Head'; import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; - -import Heading from '@theme/Heading'; -import styles from './index.module.css'; - -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); // test - return ( -
-
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Build your own! ⏱️ - -
-
-
- ); -} +import './toddlerSinkHome.css'; export default function Home() { - const {siteConfig} = useDocusaurusContext(); + useEffect(() => { + // Scroll animations + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, observerOptions); + + const cards = document.querySelectorAll('.feature-card, .cta-card'); + cards.forEach(card => { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(card); + }); + + // Feature navigation + const navItems = document.querySelectorAll('.feature-nav-item'); + const demoContents = document.querySelectorAll('.demo-content'); + + navItems.forEach(item => { + item.addEventListener('click', () => { + navItems.forEach(nav => nav.classList.remove('active')); + item.classList.add('active'); + demoContents.forEach(demo => demo.classList.remove('active')); + const feature = item.getAttribute('data-feature'); + const targetDemo = document.getElementById(`demo-${feature}`); + if (targetDemo) { + targetDemo.classList.add('active'); + } + }); + }); + + // Video placeholder + const playButton = document.querySelector('.play-button'); + if (playButton) { + playButton.addEventListener('click', () => { + alert('Video player would open here!'); + }); + } + }, []); + return ( - - -
- -
+ + + Smart Toddler Sink - Independence & Water Conservation + + +
+ {/* Hero Section */} +
+
+
+
+

The ultimate child sink

+

Piqpoc is a water-saving sink for toddlers that support their playtime and independence. Build it with ease, and place it anywhere since no plumbing is required.

+

Enable your children to use water independently as soon as they start walking and save water while having fun.

+ +
+
+

Piqpoq Intro

+ +
+
+
+
+ + {/* How It Works */} +
+
+

Unique Features of Piqpoc

+
+
+
+

🚿 Perfect Height and Pressure

+

The sink is designed with a lower and adjustable height for toddlers, eliminating the need for stools or assistance. Your child can independently and safely reach the faucet and washbasin. The pressure of the faucet is also adequate for their little hands, eliminating waste in each wash.

+
+
+

🔄 Play Mode

+

A simple water filtering and circulation mechanism enables endless play with minimal waste. As long as the sink is tilted to play-mode, the same water gets circulated forever.

+
+
+

💧 Cleaning mode

+

Switch between play-mode and cleaning-mode with an easy action. Simply tilt the washbasin to the right to switch to hand washing. The sink directs the water to the disposal container in this mode.

+
+
+

🌍 Take It Anywhere

+

No plumbing required - use it anywhere in your home or outdoors. The sink is powered through a USB port which means you can run it with a mobile phone charger or a 5V battery. Perfect for terraces, gardens, playrooms, or any space where your child wants to play.

+
+
+ +
+
+

Perfect for Little Ones

+ +
+
+

Simple Water Recycling

+ +
+
+

Wash Comfortably

+ +
+
+

A sink with wheels

+ +
+
+
+
+
+ + {/* Features */} +
+
+

Why Kids & Parents Love It

+
+ {[ + ['🚿', 'Independent kids, accessible cleaning', 'Designed so that little ones can indepently wash themselves. Stop kids from struggling with adult sinks and faucets. Turns on/off with a child friendly button.'], + ['🛟', 'Safer washes', 'No more climbing on stools or raising your child with one hand, while washing them with the other.'], + ['💧', 'Reduced waste of water', 'Kids can play with water for hours while reusing the same clean water. No waste, endless fun. Cleaning mode also uses less water thanks to reduced pressure.'], + ['🌍', 'Completely Portable', 'Place it wherever you want. No plumbing needed! Use it anywhere - garden, terrace, balcony, or move it room to room.'], + ['🐠', 'Playful and Guiding', 'Bring your family up to speed on water conservation awareness and adapt sustainable practices together from a young age.'], + ['🛠️', 'Designed for everyone', 'Built from simple, affordable materials that should be available in most places on earth, so that any family can have one. DIY or buy it, regardless of the path, you\'ll save a lot of water.'], + ].map(([icon, title, desc], idx) => ( +
+ {icon} +

{title}

+

{desc}

+
+ ))} +
+
+
+ + {/* CTA Section */} +
+
+

Choose Your Path

+
+
+

🔨 Build One

+

Get the complete DIY instructions and build your own Piqpoc Toddler Sink

+ Go to Documentation +
+
+

📦 Buy a Kit

+

Skip the hard parts! Get the pump, switch, and faucet delivered, and just do basic assembly

+ Order Kit +
+
+

🚚 Buy Complete

+

If desired, we can build one for you. Get the finished product delivered to your door. Currently available only in Spain.

+ Buy Complete +
+
+
+
+ + {/* Footer */} +
+
+

© 2025 Piqpoc Toddler Sink. Helping families have more fun.

+
+
+
); } diff --git a/src/pages/index_oldVersion.js b/src/pages/index_oldVersion.js new file mode 100644 index 0000000..8f1d0c1 --- /dev/null +++ b/src/pages/index_oldVersion.js @@ -0,0 +1,43 @@ +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import HomepageFeatures from '@site/src/components/HomepageFeatures'; + +import Heading from '@theme/Heading'; +import styles from './index.module.css'; + +function HomepageHeader() { + const {siteConfig} = useDocusaurusContext(); // test + return ( +
+
+ + {siteConfig.title} + +

{siteConfig.tagline}

+
+ + Build your own! ⏱️ + +
+
+
+ ); +} + +export default function Home() { + const {siteConfig} = useDocusaurusContext(); + return ( + + +
+ +
+ + ); +} diff --git a/src/pages/toddlerSinkHome.css b/src/pages/toddlerSinkHome.css new file mode 100644 index 0000000..129dd9d --- /dev/null +++ b/src/pages/toddlerSinkHome.css @@ -0,0 +1,494 @@ +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.custom-landing-page body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header */ +.custom-landing-page header { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + padding: 1rem 0; + position: sticky; + top: 0; + z-index: 100; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); +} + +.header-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.8rem; + font-weight: bold; + color: #667eea; +} + +/* Hero */ +.hero { + position: relative; + color: white; + padding: 80px 0; + background: url('/img/step3/step5.jpg') center/cover; + min-height: 80vh; + display: flex; + align-items: right; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(0, 151, 157, 0.8) 0%, rgba(0, 109, 117, 0.8) 100%); + z-index: 1; +} + +.hero-layout { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + width: 100%; +} + +.hero-content h1 { + font-size: 3rem; + margin-bottom: 1rem; + font-weight: 300; +} + +.hero-content h2 { + font-size: 1.4rem; + margin-bottom: 2rem; + font-weight: 400; + opacity: 0.9; +} + +.hero-description { + font-size: 1.1rem; + margin-bottom: 3rem; + opacity: 0.9; + line-height: 1.7; +} + +/* Video Placeholder */ +.video-placeholder { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2rem; + text-align: center; + border: 2px solid rgba(255, 255, 255, 0.2); + min-height: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 320px; + width: 560px; +} + +.video-placeholder h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + opacity: 0.9; +} + +.video-placeholder p { + opacity: 0.7; + margin-bottom: 2rem; +} + +.play-button { + width: 80px; + height: 80px; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + cursor: pointer; + transition: all 0.3s ease; +} + +.play-button:hover { + background: rgba(255, 255, 255, 0.3); + transform: scale(1.1); +} + +/* Buttons */ +.cta-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; + margin-top: 2rem; +} + +.btn { + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; + position: relative; + overflow: hidden; +} + +.btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; +} + +.btn:hover::before { + left: 100%; +} + +.btn-primary { + background: linear-gradient(45deg, #ff6b6b, #ff8e8e); + color: white; + box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); +} + +.btn-secondary { + background: linear-gradient(45deg, #4ecdc4, #6bcfcf); + color: white; + box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4); +} + +.btn-tertiary { + background: linear-gradient(45deg, #feca57, #ff9ff3); + color: white; + box-shadow: 0 5px 15px rgba(254, 202, 87, 0.4); +} + +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); +} + +/* How it works */ +.how-it-works { + background: white; + padding: 80px 0; +} + +.how-it-works h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 4rem; + color: #333; +} + +.how-it-works-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.features-nav { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.feature-nav-item { + background: #f8f9fa; + border: 2px solid transparent; + border-radius: 15px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.feature-nav-item.active { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-color: #667eea; +} + +.feature-nav-item:hover { + transform: translateX(10px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.feature-demo { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + border-radius: 20px; + padding: 3rem; + text-align: center; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + position: relative; + overflow: hidden; + min-height: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.demo-content { + display: none; +} + +.demo-content.active { + display: block; + animation: fadeIn 0.5s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.demo-visual { + width: 200px; + height: 200px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 20px; + margin-bottom: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; + color: white; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +.demo-content h3 { + font-size: 1.8rem; + margin-bottom: 1rem; + color: #333; +} + +.demo-content p { + color: #666; + line-height: 1.7; + max-width: 300px; + margin: 0 auto; +} + +/* Features Grid */ +.features { + background: white; + padding: 80px 0; +} + +.features h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + color: #333; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.feature-card { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + padding: 2rem; + border-radius: 20px; + text-align: center; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; +} + +.feature-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #667eea, #764ba2); +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; + display: block; +} + +.feature-card h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #333; +} + +.feature-card p { + color: #666; + line-height: 1.7; +} + +/* CTA */ +.cta-section { + background: #2c3e50; + color: white; + padding: 80px 0; + text-align: center; +} + +.cta-section h2 { + font-size: 2.5rem; + margin-bottom: 3rem; +} + +.cta-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.cta-card { + background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); + padding: 2.5rem; + border-radius: 20px; + text-align: center; + transition: transform 0.3s ease; + position: relative; + overflow: hidden; +} + +.cta-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); + transform: rotate(45deg); + transition: transform 0.5s ease; +} + +.cta-card:hover::before { + transform: rotate(45deg) translate(20px, 20px); +} + +.cta-card:hover { + transform: scale(1.05); +} + +.cta-card h3 { + font-size: 1.8rem; + margin-bottom: 1rem; + position: relative; + z-index: 1; +} + +.cta-card p { + margin-bottom: 2rem; + opacity: 0.9; + position: relative; + z-index: 1; +} + +.cta-card .btn { + position: relative; + z-index: 1; +} + +/* Footer */ +footer { + background: #1a1a1a; + color: white; + padding: 2rem 0; + text-align: center; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero-layout { + grid-template-columns: 1fr; + gap: 2rem; + } + + .hero-content h1 { + font-size: 2.5rem; + } + + .hero-content h2 { + font-size: 1.1rem; + } + + .how-it-works-content { + grid-template-columns: 1fr; + gap: 3rem; + } + + .cta-buttons { + flex-direction: column; + align-items: flex-start; + } + + .btn { + width: 100%; + max-width: 300px; + } + + .materials { + flex-direction: column; + } +} diff --git a/static/img/drop.gif b/static/img/drop.gif new file mode 100644 index 0000000..915223c Binary files /dev/null and b/static/img/drop.gif differ diff --git a/static/img/move.gif b/static/img/move.gif new file mode 100644 index 0000000..e2ab833 Binary files /dev/null and b/static/img/move.gif differ diff --git a/static/img/sink_height.jpg b/static/img/sink_height.jpg new file mode 100644 index 0000000..1428605 Binary files /dev/null and b/static/img/sink_height.jpg differ diff --git a/static/img/step3/IMG_8231.HEIC b/static/img/step3/IMG_8231.HEIC deleted file mode 100644 index 5c290e6..0000000 Binary files a/static/img/step3/IMG_8231.HEIC and /dev/null differ diff --git a/static/img/step3/IMG_8234.HEIC b/static/img/step3/IMG_8234.HEIC deleted file mode 100644 index f75774b..0000000 Binary files a/static/img/step3/IMG_8234.HEIC and /dev/null differ diff --git a/static/img/step3/IMG_8237.HEIC b/static/img/step3/IMG_8237.HEIC deleted file mode 100644 index 107d781..0000000 Binary files a/static/img/step3/IMG_8237.HEIC and /dev/null differ diff --git a/static/img/step3/step1.jpg b/static/img/step3/step1.jpg new file mode 100644 index 0000000..a9a06ee Binary files /dev/null and b/static/img/step3/step1.jpg differ diff --git a/static/img/step3/step2.jpg b/static/img/step3/step2.jpg new file mode 100644 index 0000000..274132f Binary files /dev/null and b/static/img/step3/step2.jpg differ diff --git a/static/img/step3/step3.jpg b/static/img/step3/step3.jpg new file mode 100644 index 0000000..f0447c8 Binary files /dev/null and b/static/img/step3/step3.jpg differ diff --git a/static/img/step3/step4.jpg b/static/img/step3/step4.jpg new file mode 100644 index 0000000..20ca285 Binary files /dev/null and b/static/img/step3/step4.jpg differ diff --git a/static/img/step3/step5.jpg b/static/img/step3/step5.jpg new file mode 100644 index 0000000..a8de748 Binary files /dev/null and b/static/img/step3/step5.jpg differ diff --git a/static/img/step3/step5_sec.jpg b/static/img/step3/step5_sec.jpg new file mode 100644 index 0000000..01ed52d Binary files /dev/null and b/static/img/step3/step5_sec.jpg differ diff --git a/static/img/wash.gif b/static/img/wash.gif new file mode 100644 index 0000000..07d1d37 Binary files /dev/null and b/static/img/wash.gif differ diff --git a/static/img/waterplay.gif b/static/img/waterplay.gif new file mode 100644 index 0000000..e49a902 Binary files /dev/null and b/static/img/waterplay.gif differ