new

amgno · Jun 14, 2024 · ae69981 · ae69981
commit ae69981
Show file tree

Hide file tree

Showing 12 changed files with 261 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/imgs/IMG_0560.jpg b/imgs/IMG_0560.jpg
diff --git a/imgs/IMG_0573.jpg b/imgs/IMG_0573.jpg
diff --git a/imgs/IMG_0620.jpg b/imgs/IMG_0620.jpg
diff --git a/imgs/IMG_0627.jpg b/imgs/IMG_0627.jpg
diff --git a/imgs/IMG_0644.jpg b/imgs/IMG_0644.jpg
diff --git a/imgs/IMG_0653.jpg b/imgs/IMG_0653.jpg
diff --git a/imgs/IMG_0670.jpg b/imgs/IMG_0670.jpg
diff --git a/imgs/IMG_0677.jpg b/imgs/IMG_0677.jpg
diff --git a/imgs/IMG_0685.jpg b/imgs/IMG_0685.jpg
diff --git a/imgs/IMG_0780.jpg b/imgs/IMG_0780.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photos</title>
+</head>
+
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: #2f2f2f;
+        position: relative;
+        overflow: hidden;
+        transition: background-color 0.5s;
+    }
+
+    #nav {
+        position: absolute;
+        top: 0px;
+        width: 100%;
+        height: 10vw;
+        padding-top: 4vh;
+        padding-left: 4vh;
+        font-size: 12px;
+        color: white;
+        font-family: monospace;
+        display: grid;
+        grid-template-columns: 0.5fr 0.5fr 0.5fr 1fr 1fr;
+    }
+
+    #main-gallery {
+        width: auto;
+        height: 100vh;
+        width: 100vw;
+        padding-left: 4vh;
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        padding-top: 10vh;
+        overflow: scroll;
+        scroll-behavior: smooth;
+    }
+
+    .galleryelement {
+        min-width: 20vw;
+        height: 80vh;
+        background-color: gray;
+        flex-grow: 0;
+        flex-shrink: 0;
+        position: relative;
+    }
+
+    .galleryelement>xy2 {
+        position: absolute;
+        bottom: -4vh;
+        font-family: monospace;
+        font-size: 12px;
+        color: white;
+        display: grid;
+        grid-template-columns: 0.4fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        width: 100%;
+    }
+
+    .galleryelement>img {
+        height: 100%;
+    }
+</style>
+
+<body>
+    <div id="nav">
+        <xy>Photos</xy>
+        <xy id="filter">Date</xy>
+        <xy>AM</xy>
+    </div>
+
+    <div id="main-gallery">
+    </div>
+
+
+</body>
+
+<script>
+    const images = [
+        {
+            url: './imgs/IMG_0560.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '10 05 2024',
+            where: 'Fondazione Rovati, Milano'
+        },
+        {
+            url: './imgs/IMG_0573.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '10 05 2024',
+            where: 'Fondazione Rovati, Milano'
+        },
+        {
+            url: './imgs/IMG_0620.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '16 05 2024',
+            where: 'Milano'
+        },
+        {
+            url: './imgs/IMG_0627.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '16 05 2024',
+            where: 'Home, Milano'
+        },
+        {
+            url: './imgs/IMG_0644.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '21 05 2024',
+            where: 'Home, Milano'
+        },
+        {
+            url: './imgs/IMG_0653.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '23 05 2024',
+            where: 'Carlo Erba, Milano'
+        },
+        {
+            url: './imgs/IMG_0670.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '25 05 2024',
+            where: 'Ponte Vecchio, Florence'
+        },
+        {
+            url: './imgs/IMG_0677.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '25 05 2024',
+            where: 'Duomo, Florence'
+        },
+        {
+            url: './imgs/IMG_0685.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '26 05 2024',
+            where: 'Bar, Florence'
+        },
+        {
+            url: './imgs/IMG_0780.jpg',
+            shotWith: 'iPhone 15 Pro',
+            date: '06 06 2024',
+            where: 'Home, Milan'
+        },
+    ];
+
+    const galleryContainer = document.getElementById('main-gallery');
+
+    images.forEach(image => {
+        const galleryElement = document.createElement('div');
+        galleryElement.classList.add('galleryelement');
+
+        const xy2 = document.createElement('xy2');
+        xy2.innerHTML = `<div>${image.shotWith}</div> <div>${image.date}</div><div></div>   <div>${image.where}</div>`;
+        galleryElement.appendChild(xy2);
+
+        const img = document.createElement('img');
+        img.src = image.url;
+        img.alt = '';
+        img.classList.add('hoverImage');
+        galleryElement.appendChild(img);
+
+        galleryContainer.appendChild(galleryElement);
+    });
+
+
+
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const images = document.querySelectorAll('.hoverImage');
+
+        images.forEach(img => {
+            img.addEventListener('mouseenter', function () {
+                const color = getImageColor(img);
+                document.body.style.backgroundColor = color;
+            });
+
+            img.addEventListener('mouseleave', function () {
+                document.body.style.backgroundColor = '';
+            });
+        });
+
+        function getImageColor(image) {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = image.width;
+            canvas.height = image.height;
+            ctx.drawImage(image, 0, 0, image.width, image.height);
+
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
+
+            let r = 0, g = 0, b = 0;
+
+            for (let i = 0; i < data.length; i += 4) {
+                r += data[i];
+                g += data[i + 1];
+                b += data[i + 2];
+            }
+
+            r = Math.floor(r / (data.length / 4));
+            g = Math.floor(g / (data.length / 4));
+            b = Math.floor(b / (data.length / 4));
+
+            return `rgb(${r}, ${g}, ${b})`;
+        }
+    });
+
+
+
+    function sortImagesByDate(images) {
+        return images.sort((a, b) => new Date(b.date.split(' ').reverse().join('-')) - new Date(a.date.split(' ').reverse().join('-')));
+    }
+
+    function updateGallery(images) {
+        galleryContainer.innerHTML = '';
+        images.forEach(image => {
+            const galleryElement = document.createElement('div');
+            galleryElement.classList.add('galleryelement');
+
+            const xy2 = document.createElement('xy2');
+            xy2.innerHTML = `<div>${image.shotWith}</div> <div>${image.date}</div><div></div> <div>${image.where}</div>`;
+            galleryElement.appendChild(xy2);
+
+            const img = document.createElement('img');
+            img.src = image.url;
+            img.alt = '';
+            img.classList.add('hoverImage');
+            galleryElement.appendChild(img);
+
+            galleryContainer.appendChild(galleryElement);
+        });
+
+        const imagesElements = document.querySelectorAll('.hoverImage');
+        imagesElements.forEach(img => {
+            img.addEventListener('mouseenter', function () {
+                const color = getImageColor(img);
+                document.body.style.backgroundColor = color;
+            });
+
+            img.addEventListener('mouseleave', function () {
+                document.body.style.backgroundColor = '';
+            });
+        });
+    }
+
+    document.getElementById('filter').addEventListener('click', function () {
+        const sortedImages = sortImagesByDate(images);
+        updateGallery(sortedImages);
+    });
+
+
+</script>
+
+
+</html>