premier commit

pages/contact.vue

@@ -0,0 +1,67 @@
+<template>
+    <main id="contact">
+        <div v-if="globalData.contact_image">
+            <NuxtImg 
+                :src="img(globalData.contact_image)" 
+                :alt="globalData.contact_image_titre"
+                format="webp"
+                placeholder
+                lazy
+                sizes="sm:40vw" />
+        </div>
+        <div>
+            <p>{{ globalData.contact_texte }}</p>
+            <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
+        </div>
+    </main>
+</template>
+
+<script setup>
+    const globalData = inject('globalData');
+    const { getThumbnail : img } = useDirectusFiles();
+</script>
+
+<style lang="scss">
+    #contact {
+        display: flex;
+        flex-direction: column;
+        > div:first-of-type {
+            width: 40vw;
+            > img {
+                width: 100%;
+            }
+        }
+        > div:last-of-type {
+            margin-top: 2rem;
+            > p {
+                line-height: 1.2;
+                margin-bottom: 1.5rem;
+            }
+        }
+    }
+
+    @media screen and (min-width: 800px) {
+        #contact {
+            flex-direction: row;
+            > div:first-of-type {
+                width: 30vw;
+            }
+            > div:last-of-type {
+                width: 40vw;
+                margin-left: 2rem;
+                align-self: flex-end;
+            }
+        }
+    }
+
+    @media screen and (min-width: 1200px) {
+        #contact {
+            > div:first-of-type {
+                width: 15vw;
+            }
+            > div:last-of-type {
+                width: 30vw;
+            }
+        }
+    }
+</style>

pages/galerie.vue

@@ -0,0 +1,25 @@
+<template>
+    <Projects :contents="galerie" />
+</template>
+
+<script>
+import Projects from '@/components/Projects.vue';
+
+export default {
+    setup() {
+        const { getItems } = useDirectusItems();
+        const galerie = ref([]);
+        onMounted(async () => {
+            const items = await getItems({ collection: "galerie" });
+            galerie.value = items;
+        });
+
+        return {
+            galerie
+        };
+    },
+    components: {
+        Projects
+    }
+};
+</script>

pages/index.vue

@@ -0,0 +1,83 @@
+<template>
+    <main>
+        <div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
+            <NuxtImg
+                :src="img(image.image_accueil)"
+                :alt="image.titre"
+                format="webp"
+                placeholder
+                lazy
+                sizes="sm:150vw" />
+       </div>
+    </main>
+</template>
+
+<script setup>
+    const { getItems } = useDirectusItems();
+
+    const itemsAccueil = await getItems({
+        collection: "images_accueil"
+    });
+
+    const { getThumbnail : img } = useDirectusFiles();
+
+    onMounted(() => {
+        const imgs = document.querySelectorAll('.indexImg img');
+        
+        const showingTime = 5000, transitionTime = 2000;
+
+        for (let img of imgs) {
+            img.addEventListener('click', function() {
+                nextSlide();
+                resetTimer();
+            });
+            img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
+        }
+
+        imgs[0].style.opacity = 1;
+
+        let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+
+        let index = 1;
+
+        function nextSlide() {
+            if (index === 0) {
+                imgs[imgs.length - 1].style.opacity = 0;
+                imgs[index].style.opacity = 1;
+            } else {
+                imgs[index - 1].style.opacity = 0;
+                imgs[index].style.opacity = 1;
+            }
+
+            if (index === imgs.length - 1) {
+                index = 0;
+            } else {
+                index ++;
+            }
+        }
+
+        function resetTimer() {
+            clearInterval(diapoTimer);
+            diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+        }
+    });
+
+</script>
+
+<style lang="scss">
+    .indexImg {
+        z-index: -1;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        img {
+            object-fit: cover;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+        }
+    }
+</style>

pages/magasin.vue

@@ -0,0 +1,31 @@
+<template>
+    <main>
+        <p>{{ globalData.magasin_explication }}</p>
+        <Projects :contents="magasin" />
+    </main>
+</template>
+
+<script>
+import Projects from '@/components/Projects.vue';
+
+export default {
+    setup() {
+        const { getItems } = useDirectusItems();
+        const magasin = ref([]);
+        onMounted(async () => {
+            const items = await getItems({ collection: "magasin" });
+            magasin.value = items;
+        });
+
+        const globalData = inject('globalData');
+
+        return {
+            globalData,
+            magasin
+        };
+    },
+    components: {
+        Projects
+    }
+};
+</script>