From aeb48728b4528ed0d641a5c8779c680249d61c8c Mon Sep 17 00:00:00 2001 From: raph-bard Date: Tue, 3 Oct 2023 17:35:47 +0200 Subject: [PATCH 1/2] =?UTF-8?q?r=C3=A9f=C3=A9rencement=20des=20bars=20seul?= =?UTF-8?q?ement=20dans=20page=20d=C3=A9tail?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 41 +++------ js/bar-detail.js | 226 ++++++++++++++++++++++++----------------------- js/index.js | 180 ++++++------------------------------- 3 files changed, 155 insertions(+), 292 deletions(-) diff --git a/css/style.css b/css/style.css index 7e5e1f5..f498499 100644 --- a/css/style.css +++ b/css/style.css @@ -281,10 +281,8 @@ a.card:hover { } .card-image { width: 100%; - min-height: 200px; + min-height: 220px; border-radius: 3px; - background: url("https://media.timeout.com/images/105922006/750/422/image.jpg") - no-repeat center/cover; } .card-details { display: flex; @@ -370,7 +368,6 @@ a.card:hover { margin-top: 50px; width: 100%; height: 300px; - background: url("/media/cafe-neon.jpg") no-repeat center/cover; } .container-infos-bar h1 { font-size: 26px; @@ -468,6 +465,7 @@ a.card:hover { background-color: white; border-radius: 15px; font-size: 16px; + overflow-x: auto; } .popup-bar p { @@ -590,6 +588,7 @@ a.card:hover { position: relative; overflow: hidden; margin-bottom: 50px; + color: white; } .aboutus .team-card div { position: absolute; @@ -614,15 +613,17 @@ a.card:hover { .aboutus .team-card div, .aboutus .team-card img, .aboutus .team-card:hover img { - transition: all 0.3s; + transition: transform 0.3s; } .aboutus .team-card img { float: left; width: 100%; height: auto; + filter: grayscale(100%); } .aboutus .team-card:hover img { transform: scale(1.08); + filter: none; } .aboutus .team-card strong { display: block; @@ -977,6 +978,9 @@ iframe { @media screen and (min-width: 992px) { /* ------- main -------- */ + .popup-bar .container { + padding: 0 1.5em; + } .bandeau { padding: 15vh 10%; } @@ -986,12 +990,6 @@ iframe { .card { width: 49%; - flex-direction: row; - padding: 1.3rem; - } - - .card-details { - padding: 0; } .card h2 { @@ -1004,18 +1002,9 @@ iframe { width: 100%; justify-content: space-between; } - - .card-image { - min-width: 100px; - max-width: 130px; - margin-right: 1.3rem; - min-height: auto; - } } -.card-details { - padding: 0; -} + .card h2 { margin-top: 0; @@ -1029,10 +1018,7 @@ iframe { } .card-image { - min-width: 100px; - max-width: 130px; margin-right: 1.3rem; - min-height: auto; } @media screen and (max-width: 992px) { @@ -1043,9 +1029,6 @@ iframe { @media screen and (min-width: 1200px) { /* bandeau */ - .popup-bar .container { - padding: 0 1.5em; - } .popup-bar .container-horaires { padding: 30px 15px 30px 15px; } @@ -1053,7 +1036,5 @@ iframe { @media screen and (max-width: 1200px) { /* ------- main -------- */ - .container { - padding: 0 1.5em; - } + } diff --git a/js/bar-detail.js b/js/bar-detail.js index ad85ed2..d420823 100644 --- a/js/bar-detail.js +++ b/js/bar-detail.js @@ -1,179 +1,187 @@ let bars = [ { id: 1, - name: "Nom de bar", - img: "media/cafe-neon.jpg", - imgBar: "media/cafe-neon.jpg", + name: "Delirium Café", + img: "media/deliriumcafe2.png", + imgBar: "media/deliriumcafe2.png", shortDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus. amet consectetur adipisicing elit. Quae, necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.", + "Découvrez le Délirium Café, un bar à bières convivial de 800m2. Avec plus de 30 bières à la pression, des tapas en terrasse, des matchs en direct et des soirées animées, c'est l'endroit idéal pour passer un moment agréable entre amis. Profitez de l'ambiance festive et décontractée !", longDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", + "Plonge dans 800m2 de folie, de fête et de bonne humeur ! 🍻 Avec plus de 30 bières à la pression, des tapas à savourer en terrasse, des matchs en direct et des soirées inoubliables, le Délirium Café promet de devenir ton nouveau lieu de prédilection ! 🎶 ", ambianceDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", - price: "cheap", - type: "vin", + "", + price: "expensive", + type: "biere", location: "Bordeaux", coupDeCoeur: false, - adress: "1 rue La Fontaine de bière, 33000 Bordeaux", - openTime: "Lundi au samedi : 16h - 02h", - infos: "Happy hours tous les jours de 16h à 20h", - linkMap: `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d781137.9506807565!2d-1.8405982541953783!3d43.87331476487897!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd55291a454527fd%3A0xe5a9bb6c46321064!2sMy%20Beers%20-%20Bassins%20%C3%A0%20Flot%20-%20Bar%20%C3%A0%20bi%C3%A8re%20pr%C3%A8s%20de%20Bordeaux!5e0!3m2!1sfr!2sfr!4v1695976340475!5m2!1sfr!2sfr`, + adress: "30 Quai Virginie Hériot, 33300 Bordeaux", + openTime: "16h-2h", + infos: "Bar à bières belges", + linkMap: `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2827.7562997504083!2d-0.5642949233835012!3d44.86725577306881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd552912a8688e8b%3A0x7a0454fe7700333e!2sDelirium%20Caf%C3%A9%20Bordeaux!5e0!3m2!1sfr!2sfr!4v1696339846975!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade`, }, { id: 2, - name: "Nom de bar", - img: "media/cafe-neon.jpg", + name: "My Beers", + img: "media/bar-comptoir.jpg", + imgBar: "media/mybeers.jpg", shortDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus. amet consectetur adipisicing elit. Quae, necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.", - + "Un bar à bières évidemment, mais pas que. Avec un choix impressionnant de bières bouteilles et une dizaine de tirages pression dont les références changent toutes les 3 semaines pour permettre aux clients de goûter à ce qui existe de mieux dans la bière. Nous proposons aussi du vin, du champagne, des soft, des planches de fromages, de saucissons et de chips.", longDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", + "Notre engagement envers la qualité et la diversité se reflète également dans nos dix tirages pression en constante évolution. Nous renouvelons souvent notre sélection, offrant ainsi à nos clients la possibilité de déguster les dernières pépites de la bière artisanale. Chaque visite au bar est une opportunité de découvrir de nouvelles saveurs, de partager vos découvertes avec des amis et d'explorer l'univers riche et varié de la bière. Bien entendu, notre offre ne se limite pas qu'à la bière. Pour satisfaire tous les goûts, nous proposons également une gamme de boissons non alcoolisées rafraîchissantes, ainsi que des planches de fromages et de saucissons pour accompagner parfaitement vos boissons préférées. Chez nous, il y en a pour tous les palais, que vous soyez passionné de bière, ou simplement à la recherche d'un endroit convivial pour vous détendre et savourer de délicieuses bouchées.", + ambianceDescription: + "", price: "cheap", - type: "vin", + type: "biere", location: "Bordeaux", coupDeCoeur: false, + adress: "63 Quai Virginie Hériot, 33300 Bordeaux", + openTime: "11h-22h", + infos: "Réduction de -20% pour tous les wilders", + linkMap: `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d723892.7364145775!2d-1.7825317382812673!3d44.86827963401475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd55291a454527fd%3A0xe5a9bb6c46321064!2sMy%20Beers%20-%20Bassins%20%C3%A0%20Flot%20-%20Bar%20%C3%A0%20bi%C3%A8re%20pr%C3%A8s%20de%20Bordeaux!5e0!3m2!1sfr!2sfr!4v1696344160468!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade`, }, { id: 3, - name: "Nom de bar", - img: "media/cafe-neon.jpg", + name: "La Cervoiserie", + img: "media/bar-tonneaux.jpg", + imgBar: "media/cervoiserie.jpg", shortDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus. amet consectetur adipisicing elit. Quae, necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.", - + "Chez nous, la bière, c'est une expérience de partage. Que vous préfériez en bouteille ou en fût, avec ou sans saucisson, en solo ou entre amis, notre cave à bière vous propose plus de 500 références parmi les plus savoureuses et étonnantes. De l'artisanale à l'abbaye, blonde, brune, ambrée, forte ou légère, de France, de Belgique ou d'ailleurs, vous trouverez ici une variété de bières à découvrir et à savourer.", longDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", - price: "cheap", - type: "cocktail", + "En bouteille ou en fût. Avec ou sans saucisson. Avec ou sans copains, mais surtout avec. Parce que pour nous, la bière n’est pas quelque chose que l’on boit, mais que l’on partage. Physiquement, c’est bel et bien une cave à bière : on y trouve plus de 500 références de marques parmi les plus savoureuses et les plus étonnantes. Artisanales, d’Abbaye ou de spécialité, blondes, brunes ou ambrées, fortes ou légères, de France, de Belgique ou d’ailleurs, en bouteille ou en fût, à l’unité ou à la caisse, elles sont toutes différentes et toutes méritent qu’on les découvre.", + ambianceDescription: + "", + price: "affordable", + type: "biere", location: "Bordeaux", coupDeCoeur: false, - }, + adress: "10 Quai Lawton, 33300 Bordeaux", + openTime: "14h-23h", + infos: "Accueil chaleureux", + linkMap: `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d723940.4546297085!2d-1.782545134106463!3d44.86448522708456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54d9f344261233%3A0x4ddc4a9c0de69f88!2sLa%20Cervoiserie!5e0!3m2!1sfr!2sfr!4v1696344929696!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade`, + }, { id: 4, - name: "Nom de bar", - img: "media/cafe-neon.jpg", + name: "V&B", + img: "https://www.rejoinsvandb.fr/wp-content/uploads/2020/09/VandBLeHaillan-5711.jpg", + imgBar: "https://www.rejoinsvandb.fr/wp-content/uploads/2023/04/couverture-article.png", shortDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus. amet consectetur adipisicing elit. Quae, necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.", - + "V and B s’inscrit dans l’ère de l’after-work, cette tendance qui plaît et qui rassemble toutes les générations en fin de journée, après le travail, autour d’un verre.", longDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", + "L’originalité du concept se dessine autour d’une idée forte : anoblir la bière et démocratiser le vin. Cet ADN s’exprime en magasin par un espace de vente composé d’une cave à vins, à bières, et spiritueux, doublé d’un espace bar dédié à la découverte et à la dégustation. Le concept est renforcé par l’after-work, cette tendance qui plaît et qui rassemble toutes les générations en fin de journée après le travail autour d’un verre. Nos magasins ferment donc entre 20h et 20h30. Dans cette ambiance chaleureuse, une place importante est donnée au choix et au conseil. Nous veillons à maintenir de la convivialité dans nos magasins en proposant à nos clients de nombreuses animations : soirées thématiques, retransmissions sportives, concerts… V and B, ce n’est pas vraiment un bar et pas vraiment un magasin, c’est un lieu de vie qui permet de découvrir des produits minutieusement sélectionnés,", + ambianceDescription: + "", price: "cheap", - type: "cocktail", + type: "vin biere", location: "Bordeaux", coupDeCoeur: false, + adress: "5 Rue la Motte Picquet, 33300 Bordeaux", + openTime: "10h-20h30", + infos: "Afterwork à l'ambiance festive", + linkMap: `https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d90478.51143412713!2d-0.6921722!3d44.8734196!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd5528f67d0f344f%3A0x1f9ca2c8843aaa82!2sV%20and%20B%20Bordeaux-Lac!5e0!3m2!1sfr!2sfr!4v1696344925445!5m2!1sfr!2sfr`, }, { id: 5, - name: "Nom de bar", - img: "media/cafe-neon.jpg", + name: "Vinimarché", + img: "media/vinimarche.jpg", + imgBar: "media/bar-tonneaux.jpg", shortDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus. amet consectetur adipisicing elit. Quae, necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.", - + "Niché au cœur des Halles de Bacalan, notre bar vous offre une expérience sensorielle incomparable. Que vous soyez amateur de vins raffinés, de cocktails créatifs, de spiritueux exceptionnels ou de bières artisanales, notre établissement vous promet un voyage gustatif inoubliable.", longDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", - price: "cheap", - type: "biere", + "Imaginez un lieu convivial au cœur des Halles de Bacalan, un endroit idéal pour les amateurs de boissons. Notre bar offre bien plus qu'une simple expérience, c'est un lieu où se retrouvent les passionnés et les curieux en quête de découvertes gustatives. Lorsque vous franchirez notre porte, vous ressentirez immédiatement l'ambiance détendue qui règne ici. Que vous soyez un passionné ou un novice en matière de boissons, notre bar à vins, cocktails, spiritueux et bières vous attend pour une expérience gustative mémorable. Laissez-vous tenter par l'appel de Bacalan et plongez dans une expérience qui éveillera vos sens et vous donnera envie de revenir.", + ambianceDescription: + "", + price: "affordable", + type: "vin", location: "Bordeaux", coupDeCoeur: false, + adress: "Les Halles de Bacalan, 10 Quai de Bacalan, 33300 Bordeaux", + openTime: "09h-23h", + infos: "Ambiance conviviable", + linkMap: `https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d90478.59004338508!2d-0.6930951!3d44.8733696!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd5529875426eef5%3A0xca03b3d5c51a94e1!2sVinimarch%C3%A9!5e0!3m2!1sfr!2sfr!4v1696344964963!5m2!1sfr!2sfr`, }, { id: 6, - name: "Nom de bar", - img: "media/cafe-neon.jpg", + name: "Bar Cave de Bacalan", + img: "../media/deliriumcafe.jpeg", + imgBar: "media/deliriumcafe2.png", shortDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus. amet consectetur adipisicing elit. Quae, necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.", - + "Restauration traditionnelle au juste prix à Bacalan sur Bordeaux, Profitez de notre bar à l’ambiance chaleureuse et conviviale entre amis, famille ou rendez-vous d’affaires, Christian vous fera découvrir sa passion et sa meilleure sélection de vins de Bordeaux et de France", longDescription: - "Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque itaque perspiciatis, illo ex fuga culpa modi accusantium quas temporibus similique deleniti, ullam facere dignissimos illum tenetur deserunt ut, enim fugit adipisci maxime perferendis assumenda. Modi facere recusandae libero! Quidem incidunt vel tempora repudiandae eaque doloremque quibusdam tenetur reiciendis reprehenderit culpa delectus architecto, deserunt dolorem ipsum accusamus dolores dignissimos suscipit quae unde nesciunt impedit! Temporibus rem maiores culpa soluta cumque sequi vel labore esse. Laborum deleniti corporis impedit quo placeat perspiciatis explicabo ex aut illo in exercitationem architecto, sed animi vero unde reprehenderit earum maxime nisi id. Corporis, similique. Iure, tempora?", + "Situé au cœur de Bacalan à Bordeaux et ouvert depuis 1923, le restaurant bar et cave de Bacalan vous accueille dans une ambiance chaleureuse et conviviale. Christian Gerardi vous propose des plats traditionnels, des menus du jour préparés avec des produits du moment. Le Bar Cave de Bacalan vous propose ses prestations :