From 6cae36af51478c6ade31e507ff436ce9562b7534 Mon Sep 17 00:00:00 2001 From: OPC PSE Date: Fri, 28 Nov 2025 10:17:05 +0100 Subject: [PATCH] Print-IT --- .goutputstream-QJFPF3 | 132 +++++++++++++++++ assets/.script.js.swp | Bin 0 -> 16384 bytes assets/script.js | 74 +++++++--- assets/style.css | 2 +- index.html | 320 +++++++++++++++++++++++++----------------- script.js | 98 +++++++++++++ 6 files changed, 482 insertions(+), 144 deletions(-) create mode 100644 .goutputstream-QJFPF3 create mode 100644 assets/.script.js.swp create mode 100644 script.js diff --git a/.goutputstream-QJFPF3 b/.goutputstream-QJFPF3 new file mode 100644 index 00000000..5d4172bb --- /dev/null +++ b/.goutputstream-QJFPF3 @@ -0,0 +1,132 @@ + + + + + + Print it ! - Impressions d'entreprise + + + + + + +
+

+ +

+ Devis +
+
+ +
+
+

Qui sommes-nous ?

+
    +
  • Depuis près de 60 ans nous sommes un imprimeur familial spécialisé dans les besoins d’entreprises de petite et grande taille. Implantés à Rennes dans le quartier Bréquigny, nous accompagnons nos clients dans leurs projets d’impression.
    • +
  • De la création de vos fichiers à la livraison de vos imprimés, nous mettons tout notre savoir-faire à votre disposition afin de répondre au mieux à vos attentes.
    • +
+
+ +
+
+
+

Nos produits

+

Grâce à nos nombreuses années d'expérience dans l'impression de produits évènementiels et supports de communication, nous ne cessons d'innover et de perfectionner nos services afin de satisfaire au mieux nos clients. Vous pourrez parcourir les différentes rubriques du site afin de découvrir notre large gamme de papiers et finitions, pour des produits aussi divers que les dépliants ou plaquettes promotionnelles, les brochures, les flyers, les goodies d’entreprises, les autocollants de toutes tailles...

+
+ + +
+
+

Une question? Un devis?

+

Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :

+ Devis +
+
+

Pourquoi faire appel à nous?

+
+
+ Icone Proximité +

Proximité

+

Facile d’accès, une équipe compétente et à l'écoute des clients vous attend pour tous vos besoins d'impression et en communication visuelle.

+
+
+ Icone Qualité +

Qualité

+

Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous garantissons toujours des résultats optimaux.

+
+
+ Rapidité Qualité +

Rapidité

+

Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.

+
+
+
+
+
+
+

Contact

+
+

Par téléphone

+
    +
  • Appelez-nous au 02 12 34 56 78
    • +
  • Lun-Ven : 9h30-18h30
    • +
  • Sam : 10h-13h et 14h-18h30
    • +
+
+
+

Par e-mail

+

+ Nous écrire +

+
+
+

Se rendre en boutique

+

5, rue Yves Noël,
+ 35200 Rennes
+ metro Clémenceau

+
+
+
+ Loupe avec palette bleue +
+ +
+
+
+ + + + diff --git a/assets/.script.js.swp b/assets/.script.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..c98fc8c53e4e1eeee1845c343ead2b201bbb4af1 GIT binary patch literal 16384 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 literal 0 HcmV?d00001 diff --git a/assets/script.js b/assets/script.js index 4fe57504..aeb25286 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,18 +1,56 @@ -const slides = [ - { - "image":"slide1.jpg", - "tagLine":"Impressions tous formats en boutique et en ligne" - }, - { - "image":"slide2.jpg", - "tagLine":"Tirages haute définition grand format pour vos bureaux et events" - }, - { - "image":"slide3.jpg", - "tagLine":"Grand choix de couleurs de CMJN aux pantones" - }, - { - "image":"slide4.png", - "tagLine":"Autocollants avec découpe laser sur mesure" - } -] +document.addEventListener("DOMContentLoaded", () => { + const slides = [ + { image: "./assets/images/slideshow/slide1.jpg", + tagLine: "Impressions tous formats en boutique et en ligne" }, + { image: "./assets/images/slideshow/slide2.jpg", + tagLine: "Tirages haute définition grand format pour vos bureaux et events" }, + { image: "./assets/images/slideshow/slide3.jpg", + tagLine: "Grand choix de couleurs de CMJN aux pantones" }, + { image: "./assets/images/slideshow/slide4.png", + tagLine: "Autocollants avec découpe laser sur mesure" } + ]; + + +const banner = document.querySelector('#banner'); +const bannerImages = banner.querySelector('.banner-img'); +const bannerText = banner.querySelector('.banner-text'); +const dotsContainer = banner.querySelector('.dots'); +const leftArrow = banner.querySelector('.arrow_left'); +const rightArrow = banner.querySelector('.arrow_right'); + +slides.forEach((slide, index) => { + const dot = document.createElement('span'); + dot.className = 'dot' + (index === 0 ? ' dot_selected' : ''); + dot.dataset.index = index; + dotsContainer.appendChild(dot); +}); + +const images = banner.querySelector('.banner-img'); +const dots = banner.querySelectorAll('.dot'); +let currentIndex = 0; + + +function goToSlide(index) { + dots.forEach((dot, i) => dot.classList.toggle('dot_selected', i === index)); + images.src= slides[index].image; + bannerText.innerHTML = slides[index].tagLine; + currentIndex = index; + console.log (slides[index].image,images) +} + +leftArrow.addEventListener('click', () => { + const newIndex = currentIndex > 0 ? currentIndex - 1 : slides.length - 1; + goToSlide(newIndex); +}); + +rightArrow.addEventListener('click', () => { + const newIndex = (currentIndex + 1) % slides.length; + goToSlide(newIndex); +}); + +dots.forEach(dot => + dot.addEventListener('click', () => goToSlide(parseInt(dot.dataset.index))) +); + +bannerText.innerHTML = slides[0].tagLine; +}); \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index ebec468b..187916f7 100644 --- a/assets/style.css +++ b/assets/style.css @@ -119,7 +119,7 @@ header { height: 100%; z-index: -1; object-fit: cover; - object-position: center; + object-position: left; } /* Code CSS en prévision de l'ajout d'un carousel pour la bannière */ /* Gestion des fleches du carrousel */ diff --git a/index.html b/index.html index 8c07106a..c5e928fd 100644 --- a/index.html +++ b/index.html @@ -1,128 +1,198 @@ - - - - Print it ! - Impressions d'entreprise - - - - - - -
-

- -

- Devis -
-
- -
-
-

Qui sommes-nous ?

-
    -
  • Depuis près de 60 ans nous sommes un imprimeur familial spécialisé dans les besoins d’entreprises de petite et grande taille. Implantés à Rennes dans le quartier Bréquigny, nous accompagnons nos clients dans leurs projets d’impression.
    • -
  • De la création de vos fichiers à la livraison de vos imprimés, nous mettons tout notre savoir-faire à votre disposition afin de répondre au mieux à vos attentes.
    • -
-
- -
-
-
-

Nos produits

-

Grâce à nos nombreuses années d'expérience dans l'impression de produits évènementiels et supports de communication, nous ne cessons d'innover et de perfectionner nos services afin de satisfaire au mieux nos clients. Vous pourrez parcourir les différentes rubriques du site afin de découvrir notre large gamme de papiers et finitions, pour des produits aussi divers que les dépliants ou plaquettes promotionnelles, les brochures, les flyers, les goodies d’entreprises, les autocollants de toutes tailles...

-
- - -
-
-

Une question? Un devis?

-

Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :

- Devis -
-
-

Pourquoi faire appel à nous?

-
-
- Icone Proximité -

Proximité

-

Facile d’accès, une équipe compétente et à l'écoute des clients vous attend pour tous vos besoins d'impression et en communication visuelle.

-
-
- Icone Qualité -

Qualité

-

Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous garantissons toujours des résultats optimaux.

-
-
- Rapidité Qualité -

Rapidité

-

Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.

-
-
-
-
-
-
-

Contact

-
-

Par téléphone

-
    -
  • Appelez-nous au 02 12 34 56 78
    • -
  • Lun-Ven : 9h30-18h30
    • -
  • Sam : 10h-13h et 14h-18h30
    • -
-
-
-

Par e-mail

-

- Nous écrire -

-
-
-

Se rendre en boutique

-

5, rue Yves Noël,
- 35200 Rennes
- metro Clémenceau

-
-
-
- Loupe avec palette bleue -
- -
-
-
-
-
-

Contact

-
    -
  • Appelez-nous au 02 12 34 56 78
    • -
  • Lun-Ven : 9h30-18h30
    • -
  • Sam : 10h-13h et 14h-18h30
    • -
-
-
-

5, rue Yves Noël,35200 Rennes
- metro Clémenceau

-
- -
- -
-
- - + + + + Print it ! - Impressions d'entreprise + + + + + + +
+

+ +

+ Devis +
+
+ +
+
+

Qui sommes-nous ?

+
    +
  • + Depuis près de 60 ans nous sommes un imprimeur familial spécialisé + dans les besoins d’entreprises de petite et grande taille. + Implantés à Rennes dans le quartier Bréquigny, nous accompagnons + nos clients dans leurs projets d’impression. +
    • +
  • + De la création de vos fichiers à la livraison de vos imprimés, + nous mettons tout notre savoir-faire à votre disposition afin de + répondre au mieux à vos attentes. +
    • +
+
+ +
+
+
+

Nos produits

+

+ Grâce à nos nombreuses années d'expérience dans l'impression de + produits évènementiels et supports de communication, nous ne cessons + d'innover et de perfectionner nos services afin de satisfaire au + mieux nos clients. Vous pourrez parcourir les différentes rubriques + du site afin de découvrir notre large gamme de papiers et finitions, + pour des produits aussi divers que les dépliants ou plaquettes + promotionnelles, les brochures, les flyers, les goodies + d’entreprises, les autocollants de toutes tailles... +

+
+ +
+
+

Une question? Un devis?

+

+ Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici : +

+ Devis +
+
+

Pourquoi faire appel à nous?

+
+
+ Icone Proximité +

Proximité

+

+ Facile d’accès, une équipe compétente et à l'écoute des clients + vous attend pour tous vos besoins d'impression et en communication + visuelle. +

+
+
+ Icone Qualité +

Qualité

+

+ Qu'il s'agisse de copies simples, de brochures, de cartes de + visite ou de conception, nous vous garantissons toujours des + résultats optimaux. +

+
+
+ Rapidité Qualité +

Rapidité

+

+ Vous pouvez compter sur nous pour répondre à vos sollicitations en + temps et en heure. +

+
+
+
+
+
+
+

Contact

+
+

Par téléphone

+
    +
  • Appelez-nous au 02 12 34 56 78
    • +
  • Lun-Ven : 9h30-18h30
    • +
  • Sam : 10h-13h et 14h-18h30
    • +
+
+
+

Par e-mail

+

+ Nous écrire +

+
+
+

Se rendre en boutique

+

+ 5, rue Yves Noël,
+ 35200 Rennes
+ metro + Clémenceau +

+
+
+
+ Loupe avec palette bleue +
+
+
+
+
+
+

Contact

+
    +
  • Appelez-nous au 02 12 34 56 78
    • +
  • Lun-Ven : 9h30-18h30
    • +
  • Sam : 10h-13h et 14h-18h30
    • +
+
+
+

+ 5, rue Yves Noël,35200 Rennes
+ metro Clémenceau +

+
+ +
+ +
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 00000000..a7c3c182 --- /dev/null +++ b/script.js @@ -0,0 +1,98 @@ + +const slides = [ + { + "image": "./assets/images/slideshow/slide1.jpg", + "tagLine": "Impressions tous formats en boutique et en ligne" + }, + { + "image": "slide2.jpg", + "tagLine": "Tirages haute définition grand format pour vos bureaux et events" + }, + { + "image": "slide3.jpg", + "tagLine": "Grand choix de couleurs de CMJN aux pantones" + }, + { + "image": "slide4.png", + "tagLine": "Autocollants avec découpe laser sur mesure" + } +]; + + +const slider = document.querySelector('.slider-content'); +const nbLanguages = document.querySelectorAll('.slider-content .card').length; + +let i = 0; + +document.querySelector('#left')?.addEventListener('click', () => { + let nbDisplayedLanguages = window.innerWidth > 768 ? 4 : 2; + i = i > 0 ? i - 1 : (nbLanguages - nbDisplayedLanguages); + slider.style.transform = 'translateX(-' + (248 * i) + 'px)'; +}); + +document.querySelector('#right')?.addEventListener('click', () => { + let nbDisplayedLanguages = window.innerWidth > 768 ? 4 : 2; + i = (i < nbLanguages - nbDisplayedLanguages) ? i + 1 : 0; + slider.style.transform = 'translateX(-' + (248 * i) + 'px)'; +}); + + changeInProgress = true; + + // Images + images.forEach((img, i) => img.classList.toggle('active', i === index)); + // Dots + dots.forEach((dot, i) => dot.classList.toggle('dot_selected', i === index)); + // Texte + bannerText.innerHTML = slides[index].tagLine; + + currentIndex = index; + + // Fin de transition (600ms = durée de l'opacité dans le CSS) + setTimeout(() => changeInProgress = false, 600); + } + + // === Navigation === + leftArrow.addEventListener('click', () => { + if (changeInProgress) return; + const newIndex = currentIndex > 0 ? currentIndex - 1 : totalSlides - 1; + goToSlide(newIndex); + resetAutoSlide(); + }); + + rightArrow.addEventListener('click', () => { + if (changeInProgress) return; + const newIndex = (currentIndex + 1) % totalSlides; + goToSlide(newIndex); + resetAutoSlide(); + }); + + dots.forEach(dot => { + dot.addEventListener('click', () => { + if (changeInProgress) return; + const index = parseInt(dot.dataset.index); + goToSlide(index); + resetAutoSlide(); + }); + }); + + // === Défilement automatique === + function startAutoSlide() { + autoSlideInterval = setInterval(() => { + if (changeInProgress) return; + const newIndex = (currentIndex + 1) % totalSlides; + goToSlide(newIndex); + }, 5000); + } + + function resetAutoSlide() { + clearInterval(autoSlideInterval); + startAutoSlide(); + } + + // === Pause au survol === + banner.addEventListener('mouseenter', () => clearInterval(autoSlideInterval)); + banner.addEventListener('mouseleave', startAutoSlide); + + // === Démarrage === + startAutoSlide(); +});