]> _ Git - pmi.git/commitdiff
wip #2934 @7
authornael <nael@cubedesigners.com>
Tue, 6 Aug 2019 16:06:56 +0000 (18:06 +0200)
committernael <nael@cubedesigners.com>
Tue, 6 Aug 2019 16:06:56 +0000 (18:06 +0200)
package.json
public/_modules/product-detail-page/index.html [new file with mode: 0644]
public/_modules/product-detail-page/main.js [new file with mode: 0644]
public/_modules/product-detail-page/style.styl [new file with mode: 0644]
yarn.lock

index 10caffd53d38447c1ecc3babc26f8a0d5095af8d..45196e727bfd40104670fe54f24335278f367610 100644 (file)
@@ -32,5 +32,8 @@
         "vue": "^2.6.10",
         "vue-slide-up-down": "^1.7.2",
         "vue-template-compiler": "^2.6.10"
+    },
+    "dependencies": {
+        "tooltip.js": "^1.3.2"
     }
 }
diff --git a/public/_modules/product-detail-page/index.html b/public/_modules/product-detail-page/index.html
new file mode 100644 (file)
index 0000000..aa7274a
--- /dev/null
@@ -0,0 +1,468 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="csrf-token" content="RdQtGdocG4Zne4EasBBHujibhJgs798hXRa6D1dS">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../../css/app.css">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
+    <title>pmi</title>
+</head>
+<body >
+<div id="app" data-cart-items="[]" class="flex flex-col min-h-screen">
+    <header class="site-header">
+        <div class="container flex items-center py-8 relative z-20">
+            <div class="mobile-menu-icon hidden"><a href="#menu"><img
+                    src="https://staging.pm-instrumentation.com/images/icon-burger-menu.svg" alt="Menu"></a></div>
+            <div class="logo"><a href="/"><img src="https://staging.pm-instrumentation.com/images/pmi-logo.svg"
+                                               alt="PM Instrumentation logo"></a></div>
+            <nav id="menu" class="nav mx-auto flex items-center mm--main mm--offcanvas" data-mm-title="Menu">
+                <ul class="nav-primary mm--open">
+                    <li><a href="https://staging.pm-instrumentation.com/#">Produits</a>
+                        <ul>
+                            <li class="nav-submenu-wrapper">
+                                <ul>
+                                    <li class="nav-submenu-title">Capteurs</li>
+                                    <li><a href="https://staging.pm-instrumentation.com/force">Force</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/deplacement">Déplacement</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/acceleration">Accélération</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/inclinometres">Inclinomètres</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/couple">Couple</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/pression">Pression</a></li>
+                                </ul>
+                            </li>
+                            <li class="nav-submenu-wrapper">
+                                <ul>
+                                    <li class="nav-submenu-title">Systèmes de mesure</li>
+                                    <li><a href="https://staging.pm-instrumentation.com/roue-dynamometrique">Roue
+                                        dynamométrique</a></li>
+                                    <li>
+                                        <a href="https://staging.pm-instrumentation.com/anti-pincement">Anti-pincement</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/collecteurs-tournants">Collecteurs
+                                        tournants</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/amplificateurs-conditionneurs">Amplificateurs
+                                        conditionneurs</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/cartographie-de-pression">Cartographie
+                                        de pression</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/controle-de-taraudage">Contrôle
+                                        de taraudage</a></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li><a href="https://staging.pm-instrumentation.com/energie">Solutions</a>
+                        <ul>
+                            <li class="nav-submenu-wrapper">
+                                <ul>
+                                    <li><a href="https://staging.pm-instrumentation.com/energie">Énergie</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/aeronautique">Aéronautique</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/ferroviaire">Ferroviaire</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/automobile">Automobile</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/genie-civil">Génie civil</a>
+                                    </li>
+                                    <li><a href="https://staging.pm-instrumentation.com/production">Production</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/petrochimie">Pétrochimie</a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li><a href="https://staging.pm-instrumentation.com/etalonnage">Services</a>
+                        <ul>
+                            <li class="nav-submenu-wrapper">
+                                <ul>
+                                    <li><a href="https://staging.pm-instrumentation.com/etalonnage">Étalonnage</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/location">Location</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/cablage">Câblage</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/developpement-oem">Développement
+                                        OEM</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/formation">Formation</a></li>
+                                    <li><a href="https://staging.pm-instrumentation.com/demande-de-demo">Demande de
+                                        Démo</a></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li><a href="https://staging.pm-instrumentation.com/societe">Société</a>
+                        <ul>
+                            <li class="nav-submenu-wrapper">
+                                <ul>
+                                    <li><a href="https://staging.pm-instrumentation.com/societe">Société</a></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li><a href="https://staging.pm-instrumentation.com/support">Support</a></li>
+                    <li><a href="https://staging.pm-instrumentation.com/contact">Contact</a></li>
+                </ul> <!----></nav>
+        </div>
+    </header>
+    <section class="pt-1v pb-1v ">
+        <div class="container ">
+            <div class="breadcrumbs">
+                <div class="breadcrumbs-item"><a href="https://staging.pm-instrumentation.com">Accueil</a></div>
+                <div class="breadcrumbs-item"><a>Produits</a></div>
+                <div class="breadcrumbs-item"><a>Capteurs</a></div>
+                <div class="breadcrumbs-item"><a href="https://staging.pm-instrumentation.com/force">Force</a></div>
+                <div class="active"><a
+                        href="https://staging.pm-instrumentation.com/capteur-de-force-3-axes-de-50-n-a-5kn">Capteur de
+                    force 3 axes de 50 N à 5kN</a></div>
+            </div>
+        </div>
+    </section>
+    <main class="flex-grow">
+        <div class="container pt-1v">
+            <div class="text-block  text-block-default-padding pl-2v"><h1 class="h1 text-6xl">Capteur de force 3 axes de
+                50 N à 5kN</h1>
+                <div class="text-block-body"></div>
+            </div>
+            <div class="flex mb-2v sm:block">
+                <div class="product-detail-images-wrapper flex-grow" style="max-width: 348px;">
+                    <div class="product-img-holder border-gray-100 border-4">
+                        <div class="product-img"
+                             style="background-image: url(&quot;/storage/115/K3D120.jpg&quot;);"></div>
+                    </div>
+                    <div class="grid grid-cols-3 grid-gap-sm "></div>
+                </div>
+                <div class="text-block product-detail-text sm:mt-6 text-block-default-padding pl-2v">
+                    <div class="text-block-body">
+                        <div class="markdown">
+                            <ul>
+                                <li>type: 3-axis-force sensor;
+                                </li>
+                                <li>nominal force: ±50N, ±100N, ±200N, ±500N, ±1kN, ±2kN, ±5kN;
+                                </li>
+                                <li>accuracy class: 0.5 %;
+                                </li>
+                                <li>dimensions: 120 mm x 120 mm x 30 mm;
+                                </li>
+                                <li>force transmission: 4 x female thread M6x1;
+                                </li>
+                                <li>connection: 3 m Unitronic FD CP (TP) Plus 6 x 2 x 0,14;
+                                </li>
+                                <li>material: aluminium/ stainless steel;
+                                </li>
+                                <li>weight: 0.65 / 1.95 kg;
+                                </li>
+                            </ul>
+                        </div>
+
+
+                        <!-- TODO Add tippy JS-->
+
+                        <!--<button data-tippy-content="Tooltip">Text</button>-->
+                        <!--<button data-tippy-content="Another Tooltip">Text</button>-->
+
+
+                        <div id="popup" class="hidden">
+                            Ajoutez un ou plusieurs produits à votre sélection,
+                            ajustez les quantités et obtenez un devis.
+                        </div>
+
+                        <div class="flex">
+                        <p class="mt-4"><a href="/storage/116/Datasheet_K3D120_pmi_EN.pdf">
+                            Télécharger la fiche produit
+                        </a></p>
+                        <div class="ml-4 question-tooltip">
+                            <div class="questionmark">
+                                ?
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tabs mb-3v mode-tabs" style="">
+                <ul role="tablist" class="tabs-list">
+                    <li role="presentation" class="tab-wrapper"><a aria-controls="#description" href="#description"
+                                                                   role="tab" class="tab-title">
+                        Description
+                    </a>
+                        <div class="accordion-content" style="display: none;">
+                            <div class="markdown"><p>The 3-axis force sensor K3D120 is suitable for measuring force in
+                                three mutually perpendicular axes. It is ready for 50N to 5kN in all three axes and can
+                                optionally be manufactured in other measurement ranges. The force sensor is made of
+                                high-strength aluminium alloy up to the 1kN measurement range. From 1kN onwards, the
+                                force sensor is made from the material stainless steel 1.4542 (option "VA"). It stands
+                                out due to its particularly compact structure, with an area of 120mm x 120mm and a low
+                                total height of just 30mm. Example application areas include force measurement in
+                                production processes, force control in handling machines, force measurement in assembly
+                                processes, and three-dimensional load measurement.</p></div>
+                        </div>
+                    </li>
+                    <li role="presentation" class="tab-wrapper is-active"><a aria-controls="#specifications"
+                                                                             href="#specifications" role="tab"
+                                                                             class="tab-title" aria-selected="true">
+                        Spécifications
+                    </a>
+                        <div class="accordion-content" style="display: none;">
+                            <dl>
+                                <div>
+                                    <dt>Type de capteur</dt>
+                                    <dd>Capteur galette</dd>
+                                </div>
+                                <div>
+                                    <dt>Direction de mesure</dt>
+                                    <dd>Traction</dd>
+                                </div>
+                                <div>
+                                    <dt>Signal de sortie</dt>
+                                    <dd>0-10 VDC</dd>
+                                </div>
+                                <div>
+                                    <dt>Température de fonctionnement</dt>
+                                    <dd> à °C</dd>
+                                </div>
+                                <div>
+                                    <dt>Gamme de compensation en température</dt>
+                                    <dd> à °C</dd>
+                                </div>
+                                <div>
+                                    <dt>Tension d'alimentation</dt>
+                                    <dd> à V</dd>
+                                </div>
+                                <div>
+                                    <dt>Classe de Protection</dt>
+                                    <dd>IP40</dd>
+                                </div>
+                                <div>
+                                    <dt>Boitier</dt>
+                                    <dd>Plastique</dd>
+                                </div>
+                            </dl>
+                        </div>
+                    </li>
+                    <li role="presentation" class="tab-wrapper"><a aria-controls="#documents" href="#documents"
+                                                                   role="tab" class="tab-title">
+                        Documents
+                    </a>
+                        <div class="accordion-content" style="display: none;">
+                            <ul>
+                                <li><a href="/storage/116/Datasheet_K3D120_pmi_EN.pdf" target="_blank"
+                                       class="flex items-center text-grey-dark hover:text-blue"><img
+                                        src="https://staging.pm-instrumentation.com/images/product-details/icon-tech.svg"
+                                        alt="" class="mr-4 mb-2">
+                                    Fiche technique
+                                </a></li>
+                                <li><a href="/storage/117/k3d120_000_montagehinweis.pdf" target="_blank"
+                                       class="flex items-center text-grey-dark hover:text-blue"><img
+                                        src="https://staging.pm-instrumentation.com/images/product-details/icon-tech.svg"
+                                        alt="" class="mr-4 mb-2">
+                                    Documentation
+                                </a></li>
+                            </ul>
+                        </div>
+                    </li>
+                    <li role="presentation" class="tab-wrapper"><a aria-controls="#dimensions" href="#dimensions"
+                                                                   role="tab" class="tab-title">
+                        Dimensions
+                    </a>
+                        <div class="accordion-content" style="display: none;">
+                            <div class="markdown"><p>120 mm x 120 mm x 30 mm</p>
+                                <p>Internal thread 4 x M6 x 1 Depth 12 mm</p></div>
+                        </div>
+                    </li>
+                </ul>
+                <div class="tabs-content" style="">
+                    <section data-id="description" role="tabpanel" class="tabs-content-panel" style="display: none;"
+                             aria-hidden="true">
+                        <div class="markdown"><p>The 3-axis force sensor K3D120 is suitable for measuring force in three
+                            mutually perpendicular axes. It is ready for 50N to 5kN in all three axes and can optionally
+                            be manufactured in other measurement ranges. The force sensor is made of high-strength
+                            aluminium alloy up to the 1kN measurement range. From 1kN onwards, the force sensor is made
+                            from the material stainless steel 1.4542 (option "VA"). It stands out due to its
+                            particularly compact structure, with an area of 120mm x 120mm and a low total height of just
+                            30mm. Example application areas include force measurement in production processes, force
+                            control in handling machines, force measurement in assembly processes, and three-dimensional
+                            load measurement.</p></div>
+                    </section>
+                    <section data-id="specifications" role="tabpanel" class="tabs-content-panel" style="">
+                        <dl>
+                            <div>
+                                <dt>Type de capteur</dt>
+                                <dd>Capteur galette</dd>
+                            </div>
+                            <div>
+                                <dt>Direction de mesure</dt>
+                                <dd>Traction</dd>
+                            </div>
+                            <div>
+                                <dt>Signal de sortie</dt>
+                                <dd>0-10 VDC</dd>
+                            </div>
+                            <div>
+                                <dt>Température de fonctionnement</dt>
+                                <dd> à °C</dd>
+                            </div>
+                            <div>
+                                <dt>Gamme de compensation en température</dt>
+                                <dd> à °C</dd>
+                            </div>
+                            <div>
+                                <dt>Tension d'alimentation</dt>
+                                <dd> à V</dd>
+                            </div>
+                            <div>
+                                <dt>Classe de Protection</dt>
+                                <dd>IP40</dd>
+                            </div>
+                            <div>
+                                <dt>Boitier</dt>
+                                <dd>Plastique</dd>
+                            </div>
+                        </dl>
+                    </section>
+                    <section data-id="documents" role="tabpanel" class="tabs-content-panel" style="display: none;"
+                             aria-hidden="true">
+                        <ul>
+                            <li><a href="/storage/116/Datasheet_K3D120_pmi_EN.pdf" target="_blank"
+                                   class="flex items-center text-grey-dark hover:text-blue"><img
+                                    src="https://staging.pm-instrumentation.com/images/product-details/icon-tech.svg"
+                                    alt="" class="mr-4 mb-2">
+                                Fiche technique
+                            </a></li>
+                            <li><a href="/storage/117/k3d120_000_montagehinweis.pdf" target="_blank"
+                                   class="flex items-center text-grey-dark hover:text-blue"><img
+                                    src="https://staging.pm-instrumentation.com/images/product-details/icon-tech.svg"
+                                    alt="" class="mr-4 mb-2">
+                                Documentation
+                            </a></li>
+                        </ul>
+                    </section>
+                    <section data-id="dimensions" role="tabpanel" class="tabs-content-panel" style="display: none;"
+                             aria-hidden="true">
+                        <div class="markdown"><p>120 mm x 120 mm x 30 mm</p>
+                            <p>Internal thread 4 x M6 x 1 Depth 12 mm</p></div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </main>
+    <div class="contact-shortcut flex flex-col z-30 xs:hidden"><a href="tel:0146919332"
+                                                                  class="contact-shortcut-tab mb-px inline-flex self-start bg-blue p-3"><img
+            src="https://staging.pm-instrumentation.com/images/icon-phone.svg" alt="Téléphone"
+            class="contact-shortcut-icon">
+        01 46 91 93 32
+    </a>
+        <div class="contact-shortcut-tab"><a href="/contact" class="bg-blue p-3 bg-blue flex items-center pr-10"><img
+                src="https://staging.pm-instrumentation.com/images/icon-email.svg" alt="Contact"
+                class="contact-shortcut-icon">
+            Formulaire de contact</a></div>
+    </div>
+    <footer class="footer bg-navy text-white antialiased">
+        <div class="container footer-wrapper">
+            <div class="footer-col">
+                <div class="footer-logo mb-10"><a href="/"><img
+                        src="https://staging.pm-instrumentation.com/images/pmi-logo.svg" alt="PM Instrumentation logo"></a>
+                </div>
+                <div class="footer-company-info leading-relaxed mb-6">
+                    PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité.<br> <br>
+                    Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes
+                    d’excellente qualité provenant principalement des Etats-Unis.
+                </div>
+                <div class="footer-social flex"><a href="https://twitter.com/Pminstru" target="_blank" rel="noopener"
+                                                   class="text-white hover:text-blue mr-6">
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve" class="svg fill-current"><path d="M38.6,14c-1.2,0.7-2.4,1.2-3.8,1.4c-1.1-1.2-2.7-1.8-4.3-1.8c-3.2,0-5.9,2.6-5.9,5.8c0,0,0,0,0,0
+       c0,0.4,0.1,0.9,0.2,1.3c-4.7-0.2-9.2-2.4-12.2-6.1c-0.5,0.9-0.8,1.9-0.8,2.9c0,2,1,3.8,2.6,4.8c-0.9,0-1.9-0.3-2.7-0.7v0.1
+       c0,2.8,2,5.2,4.8,5.7c-0.5,0.1-1,0.2-1.6,0.2c-0.4,0-0.7,0-1.1-0.1c0.8,2.4,3,4,5.5,4c-2.1,1.6-4.7,2.5-7.4,2.5
+       c-0.5,0-0.9,0-1.4-0.1c2.7,1.7,5.9,2.6,9.1,2.6c9.2,0.1,16.7-7.2,16.8-16.3c0-0.1,0-0.2,0-0.2c0-0.3,0-0.5,0-0.8
+       c1.2-0.8,2.2-1.8,3-3c-1.1,0.5-2.2,0.8-3.4,0.9C37.3,16.6,38.2,15.4,38.6,14"></path> <path d="M25,50C11.2,50,0,38.8,0,25C0,11.2,11.2,0,25,0c13.8,0,25,11.2,25,25C50,38.8,38.8,50,25,50z M25,1.5
+       C12.1,1.5,1.5,12.1,1.5,25c0,12.9,10.5,23.5,23.5,23.5c12.9,0,23.5-10.5,23.5-23.5C48.5,12.1,37.9,1.5,25,1.5z"></path></svg>
+                </a> <a href="https://www.linkedin.com/company/pm-instrumentation/" target="_blank" rel="noopener"
+                        class="text-white hover:text-blue">
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve" class="svg fill-current"><path d="M13.5,36.8h5.4V21.4h-5.4V36.8z"></path> <path d="M16.2,19c1.5,0,2.7-1.2,2.7-2.7c0-1.5-1.2-2.7-2.7-2.7c-1.5,0-2.7,1.2-2.7,2.7c0,0,0,0,0,0
+       C13.5,17.8,14.7,19,16.2,19C16.2,19,16.2,19,16.2,19"></path> <path d="M36.5,28.3c0-4.2-0.9-6.9-5.7-6.9c-2.3,0-3.9,0.9-4.5,2.1h-0.1v-2.1h-4.3v15.4h4.5v-7.6c0-2,0.4-4,2.9-4
+       c2.5,0,2.6,2.3,2.6,4.1v7.5h4.6V28.3z"></path> <path d="M25,50C11.2,50,0,38.8,0,25C0,11.2,11.2,0,25,0c13.8,0,25,11.2,25,25C50,38.8,38.8,50,25,50z M25,1.5
+       C12.1,1.5,1.5,12.1,1.5,25c0,12.9,10.5,23.5,23.5,23.5c12.9,0,23.5-10.5,23.5-23.5C48.5,12.1,37.9,1.5,25,1.5z"></path></svg>
+                </a></div>
+            </div>
+            <div class="footer-col"><h3 class="footer-col-heading">Nous contacter</h3> <a
+                    href="https://maps.google.fr/?q=59%2C+rue+%C3%89mile+Deschanel%0D+92400+-+COURBEVOIE+-+France"
+                    target="_blank" rel="noopener" class="contact-details-block">
+                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="#fff"
+                     class="svg fill-current contact-details-icon">
+                    <path d="M23.1 29.5c-.4-.1-.8.2-.8.6-.1.4.2.8.6.8 3.1.5 4.1 1.4 4.1 1.6 0 .6-3.2 2-9 2s-9-1.4-9-2c0-.1.7-1 4.1-1.6.4-.1.7-.4.6-.8-.1-.4-.5-.7-.8-.6-2.4.4-5.3 1.3-5.3 3C7.5 34.9 13 36 18 36s10.5-1.1 10.5-3.4c0-1.8-2.9-2.7-5.4-3.1z"></path>
+                    <path d="M18 0C11.6 0 6.5 5.2 6.5 11.5c0 6.1 10.5 20.4 11 21 .1.2.4.3.6.3s.5-.1.6-.3c.4-.6 11-14.8 11-21C29.5 5.2 24.4 0 18 0zm0 30.8C15.8 27.7 7.9 16.4 7.9 11.5c0-5.5 4.5-10 10.1-10S28.1 6 28.1 11.6c0 4.8-7.9 16.1-10.1 19.2z"></path>
+                    <path d="M18 6.5c-2.8 0-5.1 2.3-5.1 5.1s2.3 5.1 5.1 5.1 5.1-2.3 5.1-5.1-2.3-5.1-5.1-5.1zm0 8.6c-2 0-3.6-1.6-3.6-3.6S16 8 18 8s3.6 1.6 3.6 3.6-1.6 3.5-3.6 3.5z"></path>
+                </svg>
+                <div class="contact-details-text">
+                    <div class="contact-details-title">Adresse</div>
+                    59, rue Émile Deschanel<br>
+                    92400 - COURBEVOIE - France
+                </div>
+            </a> <a href="mailto:contact@pm-instrumentation.com" class="contact-details-block">
+                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="31.3" fill="#fff"
+                     class="svg fill-current contact-details-icon">
+                    <path d="M26.9 13c-5 0-9.1 4.1-9.1 9.1s4.1 9.1 9.1 9.1c1.8 0 3.6-.5 5.1-1.6.4-.3.5-.8.2-1.1-.3-.4-.8-.5-1.1-.2-1.3.9-2.7 1.3-4.2 1.3-4.1 0-7.5-3.4-7.5-7.5s3.4-7.5 7.5-7.5 7.5 3.4 7.5 7.5v.7c0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7v-.7c0-2.2-1.8-4-4.1-4-2.2 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1c1.2 0 2.3-.6 3.1-1.4.6.9 1.6 1.4 2.7 1.4 1.8 0 3.3-1.5 3.3-3.3v-.7c0-5.2-4.1-9.3-9.1-9.3zm0 11.6c-1.3 0-2.4-1.1-2.4-2.4s1.1-2.4 2.4-2.4c1.3 0 2.4 1.1 2.4 2.4s-1.1 2.4-2.4 2.4z"></path>
+                    <path d="M30.8 3.2v6.5c0 .4.4.8.8.8s.8-.4.8-.8V3.2C32.4 1.4 31 0 29.3 0H3.2C1.4 0 0 1.4 0 3.2v16c0 .7.3 1.3.8 1.8s1.1.8 1.8.8h11.3c.4 0 .8-.4.8-.8s-.4-.8-.8-.8H2.6c-.3 0-.5-.1-.7-.3-.2-.2-.3-.4-.3-.7v-16c0-.2 0-.3.1-.5L16 13.9c.1.1.3.2.5.2s.4-.1.5-.2L30.8 2.7v.5zm-14.3 9L2.9 1.6h26.6l-13 10.6z"></path>
+                </svg>
+                <div class="contact-details-text">
+                    <div class="contact-details-title">Email</div>
+                    contact@pm-instrumentation.com
+                </div>
+            </a> <a href="tel:+33146919332" class="contact-details-block">
+                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="31.3" fill="#fff"
+                     class="svg fill-current contact-details-icon">
+                    <path d="M23.3 0H12.6c-1.7.1-3.1 1.4-3.1 3.2v24.9c.1 1.7 1.4 3.1 3.2 3.2h10.7c1.7-.1 3.1-1.4 3.1-3.1v-25C26.4 1.4 25 .1 23.3 0zm1.6 24.9H11.1V6.4h13.8v18.5zM12.6 1.6h10.6c.9 0 1.6.7 1.6 1.5v1.6H11.1V3.2c0-.9.7-1.6 1.5-1.6zm10.7 28H12.7c-.9 0-1.6-.7-1.6-1.6v-1.6h13.8v1.5c-.1 1-.8 1.7-1.6 1.7zM5.5 7.9c-.4 0-.8.4-.8.8v17.9c0 .4.4.8.8.8s.8-.4.8-.8V8.7c0-.5-.3-.8-.8-.8zM.8 9.4c-.4 0-.8.3-.8.8v15c0 .4.4.8.8.8s.8-.4.8-.8v-15c0-.5-.3-.8-.8-.8zM30.4 4.9c-.4 0-.8.4-.8.8v17.9c0 .4.4.8.8.8s.8-.4.8-.8V5.7c0-.5-.3-.8-.8-.8zM35.2 6.4c-.4 0-.8.4-.8.8v15c0 .4.4.8.8.8s.8-.4.8-.8v-15c0-.5-.4-.8-.8-.8z"></path>
+                </svg>
+                <div class="contact-details-text">
+                    <div class="contact-details-title">Téléphone</div>
+                    01 46 91 93 32
+                </div>
+            </a></div>
+            <div class="footer-col"><h3 class="footer-col-heading">PMI à votre service</h3>
+                <ul>
+                    <li class="flex items-center mb-6"><img src="/storage/1303/icon-expertise.svg"
+                                                            alt="Notre expertise&amp;nbsp;: le test et la mesure"
+                                                            class="flex-shrink-0 w-12 h-12 mr-4">
+                        <div><span class="font-display font-semibold">Notre expertise&nbsp;: le test et la mesure</span>
+                            <br> <span class="text-grey-200">Plus de 5000 capteurs et systèmes de mesure</span></div>
+                    </li>
+                    <li class="flex items-center mb-6"><img src="/storage/1302/icon-approche.svg"
+                                                            alt="Notre approche&amp;nbsp;: partenaire de l’industrie"
+                                                            class="flex-shrink-0 w-12 h-12 mr-4">
+                        <div><span
+                                class="font-display font-semibold">Notre approche&nbsp;: partenaire de l’industrie</span>
+                            <br> <span class="text-grey-200">Plus de 1000 clients accompagnés</span></div>
+                    </li>
+                    <li class="flex items-center mb-6"><img src="/storage/1304/icon-philosophie.svg"
+                                                            alt="Notre philosphie&amp;nbsp;: la personnalisation"
+                                                            class="flex-shrink-0 w-12 h-12 mr-4">
+                        <div><span class="font-display font-semibold">Notre philosphie&nbsp;: la personnalisation</span>
+                            <br> <span class="text-grey-200">Une solution unique pour chaque besoin</span></div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="bg-navy-dark">
+            <div class="container footer-end">
+                <ul class="footer-nav">
+                    <li><a href="https://staging.pm-instrumentation.com/mentions-legales">Mentions légales</a></li>
+                    <li><a href="https://staging.pm-instrumentation.com/conditions-generales-de-vente">Conditions
+                        générales de vente</a></li>
+                    <li><a href="https://staging.pm-instrumentation.com/vie-privee">Vie privée</a></li>
+                    <li><a href="https://staging.pm-instrumentation.com/credits">Crédits</a></li>
+                </ul>
+                <div class="footer-copyright">
+                    © 2019
+                </div>
+            </div>
+        </div>
+    </footer>
+    <div class="body-overlay"></div>
+</div>
+<script src="https://unpkg.com/popper.js@1"></script>
+<script src="https://unpkg.com/tippy.js@4"></script>
+<script src="jQuery.js"></script>
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/public/_modules/product-detail-page/main.js b/public/_modules/product-detail-page/main.js
new file mode 100644 (file)
index 0000000..da7f218
--- /dev/null
@@ -0,0 +1,9 @@
+// jshint ignore: start
+
+var ref = $('.question-tooltip');
+var popup = $('#popup');
+// popup.hide();
+// ref.on('click',function(){
+//     popup.show();
+// });
+
diff --git a/public/_modules/product-detail-page/style.styl b/public/_modules/product-detail-page/style.styl
new file mode 100644 (file)
index 0000000..5661370
--- /dev/null
@@ -0,0 +1,38 @@
+
+.question-tooltip
+  align-self center
+  border-radius 50%
+  border 1.5px solid #6B7287
+  width 25px
+  height 25px
+  display flex
+  justify-content center
+  align-items center
+  color: #6B7287
+  font-weight: 600
+  cursor: pointer
+
+//.tooltip
+//  margin-top: 55px;
+//  position relative
+//  &-arrow
+//    width 20px
+//    height 20px
+//    background #6B7287
+//    position absolute
+//    bottom -5px
+//    transform rotate(45deg)
+//  &-inner
+//      background #6B7287
+//      padding 1.5rem
+//      border-radius 3px
+//      color white
+      //margin-top: -35px
+      //position: relative
+      //top: 5px
+#popup
+  background #6B7287
+  padding 1.5rem
+  color: white
+  border-radius 3px
+  max-width: 388px
\ No newline at end of file
index 0f907d062f03b77aa705a2e130533cb3eb7c0323..bc46435d00b57fdbed0ef0f5970303b36657665b 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -5228,7 +5228,7 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-popper.js@^1.12:
+popper.js@^1.0.2, popper.js@^1.12:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
   integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
@@ -6999,6 +6999,13 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+tooltip.js@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/tooltip.js/-/tooltip.js-1.3.2.tgz#ccfe450ffd7332ce5f254033778649526c1db542"
+  integrity sha512-DeDr9JxYx/lSvQ53ZCRFLxXrmrSyU3fLz6k+ITUTw69AIYtpWij/NmOJQscJ7BwY5lcEwWJWSfqqQWVvTMYZiw==
+  dependencies:
+    popper.js "^1.0.2"
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"