diff --git a/docs/Build_Guide/first2.md b/docs/Build_Guide/first2.md index 505b876..cdc75f8 100644 --- a/docs/Build_Guide/first2.md +++ b/docs/Build_Guide/first2.md @@ -11,24 +11,25 @@ import StepWithCarousel from '@site/src/components/StepWithCarousel';

- **Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There are some changes you need to make in order to customise it into a sink that are explained in this page. + * **1.1 Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There are some changes you need to make in order to customise it into a sink that are explained in this page. + * **1.2 Adjust height**: Position top tray at your child's height. The washbasin should be below their elbow height. In this heaight, see if you can use the existing holes of the top tray. We were able to make use of the existing holes as my son was sufficiently high. + * **1.3 Modify top tray combination**: Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping a lower front piece will allow easier access to the faucet. + * **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. - **2** **Modify top tray (Turn it into a washbasin)**: - * Position top tray at your child's height. The washbasin should be below their elbow height. In this heaight, see if you can use the existing holes of 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 a lower front piece will allow easier access to the faucet. - * This new combination of the top tray 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. - * 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. - * 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. - - Install the other trays as in original instructions with the remaining pieces. - - ⠀**Result**: A customized cart ready for washbasin installation. + ⠀**Result**: The trolley is customized and ready for washbasin installation.

diff --git a/src/components/ImageCarousel.js b/src/components/ImageCarousel.js index 2e51a86..3b9b4dd 100644 --- a/src/components/ImageCarousel.js +++ b/src/components/ImageCarousel.js @@ -1,44 +1,77 @@ // src/components/ImageCarousel.js -import React from 'react'; import clsx from 'clsx'; +import React, { useState, useEffect, useCallback } from 'react'; import styles from './ImageCarousel.module.css'; export default function ImageCarousel({ images }) { - const [current, setCurrent] = React.useState(0); + const [currentIndex, setCurrentIndex] = useState(0); + const [isOpen, setIsOpen] = useState(false); - if (!images || images.length === 0) return null; + const currentImage = images[currentIndex]; + + const closeLightbox = () => setIsOpen(false); + + const handleKeyDown = useCallback((e) => { + if (!isOpen) return; + + switch (e.key) { + case 'Escape': + closeLightbox(); + break; + case 'ArrowRight': + setCurrentIndex((prev) => (prev + 1) % images.length); + break; + case 'ArrowLeft': + setCurrentIndex((prev) => (prev - 1 + images.length) % images.length); + break; + } + }, [isOpen, images.length]); + + useEffect(() => { + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); + }, [handleKeyDown]); return ( -
-
- {images.map((img, idx) => ( -
- {img.alt - {img.caption &&
{img.caption}
} -
- ))} + <> +
+ {currentImage.caption} setIsOpen(true)} + /> +
+ {images.map((img, i) => ( + {img.caption} setCurrentIndex(i)} + /> + ))} +
-
- {images.map((img, idx) => ( + {isOpen && ( +
+ - ))} -
-
+ {currentImage.caption} + +
+ )} + ); } diff --git a/src/components/ImageCarousel.module.css b/src/components/ImageCarousel.module.css index f827ac9..ea5c6f1 100644 --- a/src/components/ImageCarousel.module.css +++ b/src/components/ImageCarousel.module.css @@ -1,66 +1,97 @@ .carousel { - max-width: 600px; - margin: 2rem auto; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; } -.viewport { - position: relative; - min-height: 300px; -} - -.slide { - display: none; -} - -.slide.active { - display: block; -} - -.slide img { - width: 100%; - height: auto; - border-radius: 0.5rem; -} - -.caption { - margin-top: 0.5rem; - font-size: 0.9rem; - color: #666; +.mainImage { + max-width: 100%; + max-height: 300px; + cursor: zoom-in; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .thumbnails { - margin-top: 1rem; display: flex; - justify-content: center; - flex-wrap: wrap; gap: 0.5rem; -} - -.thumbnailWrapper { - border: none; - background: none; - padding: 0; - cursor: pointer; - outline: none; - border-radius: 0.375rem; - transition: box-shadow 0.2s ease; + margin-top: 1rem; + flex-wrap: wrap; + justify-content: center; } .thumbnail { width: 60px; - height: 40px; + height: 60px; object-fit: cover; - border-radius: 0.375rem; - opacity: 0.8; - transition: opacity 0.2s ease; + opacity: 0.6; + border-radius: 4px; + cursor: pointer; + transition: 0.2s; + border: 2px solid transparent; } -.thumbnailWrapper:hover .thumbnail, -.thumbnailWrapper.activeThumbnail .thumbnail { +.thumbnail:hover, +.thumbnail.active { opacity: 1; + border-color: #0078e7; } -.activeThumbnail { - box-shadow: 0 0 0 2px #333; +/* Lightbox overlay */ +.lightbox { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.85); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + cursor: default; + overflow: hidden; +} + +.lightboxImage { + max-width: 90vw; + max-height: 90vh; + border-radius: 8px; + z-index: 1; +} + +/* Close (×) button */ +.closeButton { + position: absolute; + top: 20px; + right: 30px; + font-size: 2.5rem; + color: white; + background: none; + border: none; + cursor: pointer; + z-index: 2; +} + +/* Left/right arrows */ +.navButton { + position: absolute; + top: 50%; + font-size: 3rem; + color: white; + background: none; + border: none; + cursor: pointer; + padding: 0 1rem; + z-index: 2; + transform: translateY(-50%); + user-select: none; +} + +.left { + left: 20px; +} + +.right { + right: 20px; } diff --git a/static/img/step1/1_box.webp b/static/img/step1/1_box.webp new file mode 100644 index 0000000..fb0c5e8 Binary files /dev/null and b/static/img/step1/1_box.webp differ diff --git a/static/img/step1/2_mark.webp b/static/img/step1/2_mark.webp new file mode 100644 index 0000000..3a455bf Binary files /dev/null and b/static/img/step1/2_mark.webp differ diff --git a/static/img/step1/2_toptray.webp b/static/img/step1/2_toptray.webp new file mode 100644 index 0000000..af44c99 Binary files /dev/null and b/static/img/step1/2_toptray.webp differ diff --git a/static/img/step1/3_drilling.webp b/static/img/step1/3_drilling.webp new file mode 100644 index 0000000..3ac237f Binary files /dev/null and b/static/img/step1/3_drilling.webp differ diff --git a/static/img/step1/3_plastic_piece.webp b/static/img/step1/3_plastic_piece.webp new file mode 100644 index 0000000..ece7d35 Binary files /dev/null and b/static/img/step1/3_plastic_piece.webp differ diff --git a/static/img/step1/4_top_done.webp b/static/img/step1/4_top_done.webp new file mode 100644 index 0000000..35271e8 Binary files /dev/null and b/static/img/step1/4_top_done.webp differ diff --git a/static/img/step1/4_top_tray.jpg b/static/img/step1/4_top_tray.jpg new file mode 100644 index 0000000..7269779 Binary files /dev/null and b/static/img/step1/4_top_tray.jpg differ diff --git a/static/img/step1/5_bottom_done.jpg b/static/img/step1/5_bottom_done.jpg new file mode 100644 index 0000000..e5d1ad6 Binary files /dev/null and b/static/img/step1/5_bottom_done.jpg differ diff --git a/static/img/step1/6_trays.webp b/static/img/step1/6_trays.webp new file mode 100644 index 0000000..96ef0f4 Binary files /dev/null and b/static/img/step1/6_trays.webp differ diff --git a/static/img/step1/marking.webp b/static/img/step1/marking.webp new file mode 100644 index 0000000..8f00cbf Binary files /dev/null and b/static/img/step1/marking.webp differ diff --git a/static/img/step1/screw.webp b/static/img/step1/screw.webp new file mode 100644 index 0000000..c3e6c5e Binary files /dev/null and b/static/img/step1/screw.webp differ diff --git a/static/img/step2/IMG_8247 2.HEIC b/static/img/step2/IMG_8247 2.HEIC new file mode 100644 index 0000000..dd90b76 Binary files /dev/null and b/static/img/step2/IMG_8247 2.HEIC differ diff --git a/static/img/step2/IMG_8249.HEIC b/static/img/step2/IMG_8249.HEIC new file mode 100644 index 0000000..f2c06bb Binary files /dev/null and b/static/img/step2/IMG_8249.HEIC differ diff --git a/static/img/step2/IMG_8255 2.HEIC b/static/img/step2/IMG_8255 2.HEIC new file mode 100644 index 0000000..fb0001c Binary files /dev/null and b/static/img/step2/IMG_8255 2.HEIC differ diff --git a/static/img/step3/IMG_8231.HEIC b/static/img/step3/IMG_8231.HEIC new file mode 100644 index 0000000..5c290e6 Binary files /dev/null and b/static/img/step3/IMG_8231.HEIC differ diff --git a/static/img/step3/IMG_8234.HEIC b/static/img/step3/IMG_8234.HEIC new file mode 100644 index 0000000..f75774b Binary files /dev/null and b/static/img/step3/IMG_8234.HEIC differ diff --git a/static/img/step3/IMG_8237.HEIC b/static/img/step3/IMG_8237.HEIC new file mode 100644 index 0000000..107d781 Binary files /dev/null and b/static/img/step3/IMG_8237.HEIC differ