First commit

README.md

@@ -0,0 +1 @@
+# Ossatures

css/menus.css

@@ -0,0 +1,87 @@
+/* line 7, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+#div-menu-contextuel {
+  display: flex;
+  z-index: 200;
+  position: absolute;
+  border-radius: 12px;
+  box-shadow: 0 0 12px black;
+  background: black;
+  color: white;
+  font-size: 18x;
+  font-weight: normal;
+  opacity: 95%;
+  -webkit-transition: opacity 500ms;
+  -moz-transition: opacity 500ms;
+  -o-transition: opacity 500ms;
+  -ms-transition: opacity 500ms; }
+
+/* line 26, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante {
+  list-style: none;
+  margin-right: 20px; }
+
+/* line 31, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+ul.liste-deroulante {
+  margin: 10px;
+  padding-left: 8px;
+  border: 0px; }
+
+/* line 37, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li {
+  padding: 6px 8px;
+  cursor: pointer;
+  font-family: "Avenir Next", "Avenir", sans-serif; }
+  /* line 42, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+  .liste-deroulante li:before {
+    padding-right: 8px;
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900; }
+
+/* line 49, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li:not(.blank)::before {
+  content: "\f00d"; }
+
+/* line 53, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li.moveBack::before {
+  content: "\f062"; }
+
+/* line 57, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li.moveFront::before {
+  content: "\f063"; }
+
+/* line 61, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li.add::before {
+  content: "\f067"; }
+
+/* line 65, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li.delete::before {
+  content: "\f2ed"; }
+
+/* line 69, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li.choose::before {
+  content: "\f05b"; }
+
+/* line 73, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante li.disabled {
+  cursor: not-allowed; }
+  /* line 76, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+  .liste-deroulante li.disabled:hover {
+    background-color: #202020; }
+
+/* line 81, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.liste-deroulante hr {
+  background-color: grey;
+  height: 1px;
+  border: 0;
+  margin: 2px 0px; }
+
+/* Pour le dat.gui */
+/* line 90, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.dg .property-name {
+  width: 70% !important; }
+
+/* line 94, /Volumes/Dev/Sources/Clients/Maninghem/css/menus.scss */
+.dg .c {
+  width: 20% !important; }
+
+/*# sourceMappingURL=menus.css.map */

css/menus.css.map

@@ -0,0 +1,9 @@
+{
+  "version": 3,
+  "file": "menus.css",
+  "sources": [
+    "menus.scss"
+  ],
+  "mappings": ";AAMA,AAAA,oBAAoB,CAAC;EACjB,OAAO,EAAE,IAAK;EACd,OAAO,EAAE,GAAI;EACb,QAAQ,EAAE,QAAS;EAEnB,aAAa,EAAE,IAAK;EACpB,UAAU,EAAE,cAAe;EAC3B,UAAU,EAAE,KAAM;EAClB,KAAK,EAAE,KAAM;EACb,SAAS,EAAE,GAAI;EACf,WAAW,EAAE,MAAO;EAEpB,OAAO,EAAE,GAAI;EACb,kBAAkB,EAAE,aAAc;EAClC,eAAe,EAAE,aAAc;EAC/B,aAAa,EAAE,aAAc;EAC7B,cAAc,EAAE,aAAc,GACjC;;;AAED,AAAA,iBAAiB,CAAC;EACd,UAAU,EAAE,IAAK;EACjB,YAAY,EAAE,IAAK,GACtB;;;AAED,AAAE,EAAA,AAAA,iBAAiB,CAAC;EAChB,MAAM,EAAE,IAAK;EACb,YAAY,EAAE,GAAI;EAClB,MAAM,EAAE,GAAI,GACf;;;AAED,AAAkB,iBAAD,CAAC,EAAE,CAAC;EACjB,OAAO,EAAE,OAAQ;EACjB,MAAM,EAAE,OAAQ;EAChB,WAAW,EAtCK,aAAa,EACjC,QAAQ,EACR,UAAU,GA2CT;;EAVD,AAAkB,iBAAD,CAAC,EAAE,AAKf,OAAO,CAAC;IACL,aAAa,EAAE,GAAI;IACnB,WAAW,EA3CE,qBAAqB;IA4ClC,WAAW,EAAE,GAAI,GACpB;;;AAGL,AAAgC,iBAAf,CAAC,EAAE,AAAA,IAAK,CAAA,AAAA,MAAM,CAAC,QAAQ,CAAC;EACrC,OAAO,EAAE,OAAQ,GACpB;;;AAED,AAA6B,iBAAZ,CAAC,EAAE,AAAA,SAAS,AAAA,QAAQ,CAAC;EAClC,OAAO,EAAE,OAAQ,GACpB;;;AAED,AAA8B,iBAAb,CAAC,EAAE,AAAA,UAAU,AAAA,QAAQ,CAAC;EACnC,OAAO,EAAE,OAAQ,GACpB;;;AAED,AAAwB,iBAAP,CAAC,EAAE,AAAA,IAAI,AAAA,QAAQ,CAAC;EAC7B,OAAO,EAAE,OAAQ,GACpB;;;AAED,AAA2B,iBAAV,CAAC,EAAE,AAAA,OAAO,AAAA,QAAQ,CAAC;EAChC,OAAO,EAAE,OAAQ,GACpB;;;AAED,AAA2B,iBAAV,CAAC,EAAE,AAAA,OAAO,AAAA,QAAQ,CAAC;EAChC,OAAO,EAAE,OAAQ,GACpB;;;AAED,AAAoB,iBAAH,CAAC,EAAE,AAAA,SAAS,CAAC;EAC1B,MAAM,EAAE,WAAY,GAKvB;;EAND,AAAoB,iBAAH,CAAC,EAAE,AAAA,SAAS,AAGxB,MAAM,CAAC;IACJ,gBAAgB,EAAE,OAAQ,GAC7B;;;AAGL,AAAkB,iBAAD,CAAC,EAAE,CAAC;EACjB,gBAAgB,EAAE,IAAK;EACvB,MAAM,EAAE,GAAI;EACZ,MAAM,EAAE,CAAE;EACV,MAAM,EAAE,OAAQ,GACnB;;AAGD,qBAAqB;;AACrB,AAAI,GAAD,CAAC,cAAc,CAAC;EACf,KAAK,EAAE,cAAe,GACzB;;;AAED,AAAI,GAAD,CAAC,EAAE,CAAC;EACH,KAAK,EAAE,cAAe,GACzB",
+  "names": []
+}

css/menus.scss

@@ -0,0 +1,96 @@
+$font-family-icones: 'Font Awesome 5 Free';
+$font-family-texte: 'Avenir Next',
+'Avenir',
+sans-serif;
+
+
+#div-menu-contextuel {
+    display: flex;
+    z-index: 200;
+    position: absolute;
+
+    border-radius: 12px;
+    box-shadow: 0 0 12px black;
+    background: black;
+    color: white;
+    font-size: 18x;
+    font-weight: normal;
+
+    opacity: 95%;
+    -webkit-transition: opacity 500ms;
+    -moz-transition: opacity 500ms;
+    -o-transition: opacity 500ms;
+    -ms-transition: opacity 500ms;
+}
+
+.liste-deroulante {
+    list-style: none;
+    margin-right: 20px;
+}
+
+ul.liste-deroulante {
+    margin: 10px;
+    padding-left: 8px;
+    border: 0px;
+}
+
+.liste-deroulante li {
+    padding: 6px 8px;
+    cursor: pointer;
+    font-family: $font-family-texte;
+
+    &:before {
+        padding-right: 8px;
+        font-family: $font-family-icones;
+        font-weight: 900;
+    }
+}
+
+.liste-deroulante li:not(.blank)::before {
+    content: "\f00d";
+}
+
+.liste-deroulante li.moveBack::before {
+    content: "\f062";
+}
+
+.liste-deroulante li.moveFront::before {
+    content: "\f063";
+}
+
+.liste-deroulante li.add::before {
+    content: "\f067";
+}
+
+.liste-deroulante li.delete::before {
+    content: "\f2ed";
+}
+
+.liste-deroulante li.choose::before {
+    content: "\f05b";
+}
+
+.liste-deroulante li.disabled {
+    cursor: not-allowed;
+
+    &:hover {
+        background-color: #202020;
+    }
+}
+
+.liste-deroulante hr {
+    background-color: grey;
+    height: 1px;
+    border: 0;
+    margin: 2px 0px;
+}
+
+
+/* Pour le dat.gui */
+.dg .property-name {
+    width: 70% !important;
+}
+
+.dg .c {
+    width: 20% !important;
+}

css/styles.css

@@ -0,0 +1,733 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    cursor: default;
+}
+
+
+/************   Affichage message d'info ou d'erreur   ***************/
+.infos,
+.alertes {
+    position: absolute;
+    top: 50px;
+    width: 100%;
+    text-align: center;
+    z-index: 100;
+    display: block;
+}
+
+#message-info,
+#message-alerte {
+    font-family: "Avenir Next", "Avenir", sans-serif;
+    font-size: 20px;
+}
+
+.alerte {
+    font-weight: bold;
+    text-shadow: 0px 0px 5px white;
+    color: red;
+}
+
+.normal {
+    font-weight: normal;
+    color: white;
+}
+
+
+/*****************  Logo  *******************/
+
+.logo {
+    position: absolute;
+    bottom: 28px;
+    right: 80px;
+}
+
+.logo h4 {
+    color: white;
+    font-size: 12px;
+    text-align: left;
+    font-family: "Avenir Next", "Avenir", sans-serif;
+}
+
+.image-logo {
+    width: 120px;
+    filter: drop-shadow(5px 5px 5px black);
+    opacity: 0.8;
+    border-radius: 6px;
+    margin-bottom: 10px;
+}
+
+
+/*****************  Aide en ligne  *******************/
+
+.div-aide {
+    display: flex;
+    position: absolute;
+    width: 690px;
+    align-items: flex-end;
+    bottom: 10px;
+    right: -660px;
+    z-index: 200;
+    margin: 10px;
+    opacity: 90%;
+    transition: all .5s ease-in;
+}
+
+.div-aide:hover {
+    transform: translateX(-660px);
+    transition-delay: 0.8s;
+}
+
+.div-aide.affiche {
+    transform: translateX(-660px);
+}
+
+.div-aide .div-icone {
+    width: 46px;
+    padding: 8px;
+    justify-content: center;
+    background-color: white;
+    border-radius: 10px 0px 0px 10px;
+}
+
+.div-aide .div-contenu {
+    height: auto;
+    background-color: white;
+    padding: 15px 10px 0px 30px;
+    border-radius: 10px 10px 10px 0px;
+}
+
+.texte-aide {
+    padding-left: 0px;
+    list-style: none;
+}
+
+.texte-aide > h3 {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.texte-aide > li {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 14px;
+    text-align: justify-all;
+}
+
+.texte-aide > li:before {
+    font-family: "Font Awesome 5 Free";
+    content: "\f105";
+    font-weight: 900;
+    margin-right: 8px;
+}
+
+.image-aide {
+    margin-right: 10px;
+    align-content: center;
+}
+
+#fermer-popup-aide {
+    position: relative;
+    right: -40px;
+    top: -10px;
+}
+
+#fermer-popup-aide > span {
+    font-family: "Avenir Next", "Avenir", sans-serif;
+    color: white;
+    font-size: 18px;
+    font-weight: bolder;
+    margin-left: -400px;
+}
+
+#fermer-popup-aide > span::after {
+    margin-left: 20px;
+    font-family: "Font Awesome 5 Free";
+    font-size: 30px;
+    content: "\f0a9";
+}
+
+.lien-tuto {
+    position: absolute;
+    top: 10px;
+    right: 40px;
+}
+
+.lien-tuto a {
+    font-family: "Avenir Next", "Avenir", sans-serif;
+    font-size: 14px;
+    color: red !important;
+    font-weight: 600;
+}
+
+
+/************   DAT.GUI    *********/
+
+.dg.ac {
+    margin-top: 28px;
+    margin-right: 38px;
+    z-index: 100;
+}
+
+
+/************   Popup d'alerte    *********/
+#popup-alert {
+    display: grid;
+    grid-template-areas:
+        'titre'
+        'bouton bouton bouton';
+    grid-gap: 1.5rem;
+    opacity: 85%;
+    position: fixed;
+    justify-content: center;
+    justify-items: center;
+    align-content: center;
+
+    width: 480px;
+    height: auto;
+    padding: 20px;
+    margin-top: 5vh;
+    margin-left: 35vw;
+
+    background-color: #e6e6e6;
+    border: 1px solid black;
+    border-radius: 10px;
+    transition: all .5s ease-in;
+    box-shadow: 0 0 12px black;
+}
+
+#popup-alert #titre-popup {
+    grid: texte;
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 16px;
+    color: black;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#popup-alert button {
+    grid: bouton;
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 14px;
+    margin-right: 10px;
+}
+
+
+/************   Popup de choix d'une ouverture   *********/
+
+/* Masque semi-transparent sous la popup des ouvertures */
+#overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: black;
+    opacity: 0.8;
+    z-index: 250;
+}
+
+.popup-ouverture {
+    display: flex;
+    position: fixed;
+    z-index: 300;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 20px;
+
+    background-color: #e6e6e6;
+    border: 1px solid black;
+    border-radius: 10px;
+    transition: all .5s ease-in;
+    box-shadow: 0 0 12px black;
+}
+
+#popup-ouverture-out {
+    width: 700px;
+    height: 450px;
+}
+
+#popup-ouverture-in {
+    width: 600px;
+}
+
+#popup-plancher {
+    width: 800px;
+}
+
+#popup-pignon {
+    width: 500px;
+}
+
+.popup-ouverture #titre-popup {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 18px;
+    color: black;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.popup-ouverture .container-images {
+    display: flex;
+    width: 950%;
+    align-items: flex-start;
+    text-align: center;
+    justify-content: space-evenly;
+    margin: 0px 20px;
+}
+
+.popup-ouverture .container-images figure.normal {
+    cursor: pointer;
+    justify-content: center;
+    color: black;
+    opacity: 100%;
+    transition: all .2s ease-in-out;
+}
+
+.popup-ouverture .container-images #PG2 {
+    position: absolute;
+    top: 200px;
+    left: 563px;
+}
+
+.popup-ouverture .container-images #F1gR {
+    position: absolute;
+    top: 200px;
+    left: 43px;
+}
+
+.popup-ouverture .container-images #F1dR {
+    position: absolute;
+    top: 200px;
+    left: 123px;
+}
+
+.popup-ouverture .container-images #F2R {
+    position: absolute;
+    top: 200px;
+    left: 203px;
+}
+
+.popup-ouverture .container-images #PER {
+    position: absolute;
+    top: 200px;
+    left: 293px;
+}
+
+.popup-ouverture .container-images figure:hover {
+    transform: scale(1.2);
+}
+
+.popup-ouverture .container-images figure.disabled {
+    cursor: not-allowed;
+    color: gray;
+    opacity: 40%;
+    transform: none;
+}
+
+.popup-ouverture .popup-ouverture-image {
+    width: 64px;
+    height: auto;
+    border: 0px solid black;
+    border-radius: 3px;
+    box-shadow: 2px 2px 5px;
+}
+
+.popup-ouverture .container-images figcaption {
+    text-align: center;
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 14px;
+    line-height: 1em;
+    margin-top: 10px;
+}
+
+.popup-ouverture .popup-ouverture-texte {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    width: 100%;
+    font-size: 14px;
+    font-style: italic;
+    margin: 80px 20px 0px 20px;
+    ;
+}
+
+.popup-ouverture button {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 14px;
+    text-align: center;
+}
+
+#popup-plancher button {
+    margin-top: 15px;
+}
+
+#popup-plancher .container-images img {
+    width: 32px;
+    border-radius: 0px;
+}
+
+
+/********************    Popup d'attente pour les traitements longs (génération du devis)  ************************/
+
+#popup-attente {
+    display: inline-flex;
+    position: fixed;
+    width: 500px;
+    height: auto;
+    padding: 20px;
+    z-index: 300;
+    align-items: left;
+
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
+    transition: all .5s ease-in;
+    box-shadow: 0 0 12px black;
+}
+
+#popup-attente .texte-attente {
+    margin-left: 20px;
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 18px;
+    text-align: justify-all;
+}
+
+#popup-export {
+    display: grid;
+    position: fixed;
+    width: auto;
+    height: auto;
+    padding: 20px;
+    z-index: 300;
+    align-items: center;
+
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
+    transition: all .5s ease-in;
+    box-shadow: 0 0 12px black;
+}
+
+#popup-export button {
+    margin: 20px 150px 0 150px;
+}
+
+
+/**********************************    Changement d'angle de vue   *************************************/
+#changement-vue {
+    display: grid;
+    grid-template-columns: 10% 80% 10%;
+    grid-template-rows: 10% 10% 70% 10%;
+    position: fixed;
+    bottom: 90px;
+    right: 110px;
+    z-index: 100;
+    padding: 30px;
+    align-items: center;
+    justify-items: center;
+    height: 130px;
+}
+
+
+#changement-vue div {
+    font-size: 16px;
+    cursor: pointer;
+    color: white;
+}
+
+#changement-vue .bouton-fleche:hover {
+    transform: scale(1.6);
+    transition: all .5s ease-in-out;
+}
+
+#changement-vue div.surligne {
+    color: red;
+    font-size: 30px !important;
+}
+
+
+#changement-vue div#aerien {
+    grid-column: 2;
+    grid-row: 1;
+    margin-bottom: 70px;
+    font-size: 26px;
+
+}
+
+#changement-vue div#dessus {
+    grid-column: 2;
+    grid-row: 2;
+    margin-bottom: 15px;
+}
+
+#changement-vue div#arriere {
+    grid-column: 3;
+    grid-row: 2;
+    margin-bottom: -10px;
+}
+
+#changement-vue div#arriere i,
+div#avant i {
+    transform: rotate(-45deg);
+}
+
+#changement-vue div#avant {
+    grid-column: 1;
+    grid-row: 4;
+    margin-bottom: 10px;
+}
+
+#changement-vue div#gauche {
+    grid-column: 1;
+    grid-row: 2;
+    margin-bottom: -10px;
+}
+
+#changement-vue div#gauche i,
+div#droite i {
+    transform: rotate(45deg);
+}
+
+#changement-vue div#droite {
+    grid-column: 3;
+    grid-row: 4;
+    margin-bottom: 10px;
+}
+
+
+#changement-vue div:not(.bouton-fleche) {
+    grid-column: 2;
+    grid-row: 3;
+}
+
+#changement-vue div > img {
+    align-content: center;
+    justify-content: center;
+    width: 35px;
+    height: 35px;
+}
+
+#transparent-overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: red;
+    opacity: 0;
+    z-index: 250;
+}
+
+/**************************    Bouton permettant de quitter la vue aérienne   ***********************************/
+#vue-aerienne {
+    position: fixed;
+    right: 20px;
+    bottom: 270px;
+    z-index: 300;
+    width: 300px;
+}
+
+div#legende-modules {
+    margin-bottom: 200px;
+}
+
+#vue-aerienne #legende {
+    position: relative;
+    margin-bottom: 40px;
+}
+
+#vue-aerienne #legende span,
+th {
+    font-family: "Avenir Next", "Avenir", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    color: white;
+    padding-right: 20px;
+}
+
+#vue-aerienne #legende span.titre {
+    text-decoration: underline;
+    text-align: right;
+}
+
+
+#quitter-vue-aerienne {
+    display: flex;
+    width: 280px;
+    height: 50px;
+    justify-content: center;
+    background-color: red;
+    border-radius: 15px;
+    cursor: pointer;
+    box-shadow: -10px 10px 20px;
+    z-index: 300;
+}
+
+#quitter-vue-aerienne span {
+    font-family: "Avenir Next", "Avenir", sans-serif;
+    font-size: 18px;
+    font-weight: 500;
+    color: white;
+    align-self: center;
+    justify-self: center !important;
+}
+
+#boutons {
+    display: inline-flex;
+    margin-bottom: -15px;
+    z-index: 300;
+}
+
+
+#boutons > #legende {
+    margin-right: 40px;
+}
+
+#boutons > #legende:before {
+    font-family: "Font Awesome 5 Free";
+    content: "\f0ca";
+    font-weight: 900;
+    margin-right: 20px;
+}
+
+#boutons button {
+    text-align: center;
+    font-size: 30px;
+    color: red;
+    width: 45px;
+    height: 45px;
+    border: none;
+    border-radius: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    margin-left: 15px;
+}
+
+#boutons button:focus {
+    outline: none !important;
+}
+
+
+/********************    Formulaire d'enregistrement du projet  ************************/
+#formulaire {
+    display: flex;
+    flex-wrap: wrap;
+    position: fixed;
+    width: 660px;
+    height: auto;
+    padding: 20px;
+    z-index: 500;
+    justify-content: space-around;
+
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
+    transition: all .5s ease-in;
+    box-shadow: 0 0 12px black;
+}
+
+#formulaire .titre {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 18px;
+}
+
+#formulaire .texte {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 0.9em;
+    text-align: justify-all;
+}
+
+#formulaire .question {
+    margin-right: auto;
+}
+
+#formulaire .form-class {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+#formulaire input.texte {
+    font-size: 0.8em;
+}
+
+#formulaire input.button {
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 0.9em;
+    margin: 20px auto 0px auto;
+}
+
+#formulaire .form-top-marge {
+    margin-top: 20px;
+}
+
+
+/*********************   Popup de choix du sens de décalage  ***************************/
+#popup-decalage {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 20px;
+    grid-template-rows: 2fr repeat(2, 1fr);
+
+    position: fixed;
+    width: 700px;
+    height: 300px;
+    padding: 20px;
+    z-index: 300;
+
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
+    transition: all .5s ease-in;
+    box-shadow: 0 0 12px black;
+}
+
+#popup-decalage span {
+    grid-column: span 4;
+}
+
+#popup-decalage .texte {
+    margin-left: 20px;
+    font-family: "Avenir next", "Avenir", sans-serif;
+    font-size: 18px;
+}
+
+#popup-decalage button {
+    height: 40px;
+    width: auto;
+}
+
+#popup-decalage #popup-decalage-arriere {
+    grid-column: 1/3;
+    grid-row: 2;
+}
+
+#popup-decalage #popup-decalage-arriere:before {
+    font-family: "Font Awesome 5 Free";
+
+    content: "\f062";
+    font-weight: 900;
+    margin-right: 20px;
+}
+
+#popup-decalage #popup-decalage-avant {
+    grid-column: 3/5;
+    grid-row: 2;
+}
+
+#popup-decalage #popup-decalage-avant:before {
+    font-family: "Font Awesome 5 Free";
+    content: "\f063";
+    font-weight: 900;
+    margin-right: 20px;
+}
+
+#popup-decalage #popup-decalage-annuler {
+    grid-column: 2/4;
+    grid-row: 3;
+}

index.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Maninghem Econologis - Simulateur 3D</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+    <link rel="icon" href="icons/favicon.ico" />
+    <link href="css/styles.css" rel="stylesheet">
+    <link href="css/menus.css" rel="stylesheet">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/all.min.css" rel="stylesheet">
+
+</head>
+
+<body>
+    <div id="container">
+        <script src="js/jsreport.js"></script>
+        <script src="js/html2canvas.min.js"></script>
+        <script src="js/jquery-3.4.1.min.js"></script>
+        <script src="js/three.min.js"></script>
+        <script src="js/OrbitControls.js"></script>
+        <script src="js/threex.domevents.js"></script>
+        <script src="js/dat.gui.min.js" type="text/javascript"></script>
+        <script src="js/main.js" type="module"></script>
+        <!--        <script src="js/helpers.js" type="module"></script>-->
+
+        <div class="infos">
+            <h3 id="message-info" class="normal"></h3>
+        </div>
+        <div class="alertes">
+            <h3 id="message-alerte" class="normal"></h3>
+        </div>
+
+        <div id="div-menu-contextuel">
+            <ul class="liste-deroulante">
+            </ul>
+        </div>
+
+        <script type="text/javascript">
+            var scene = new THREE.Scene();
+            var loader = new THREE.TextureLoader();
+            var raycaster, mouse, activeCamera, controls;
+            var DEBUG = true;
+
+            var LARGEUR_TRAVEE = 36,
+                LONGUEUR_TRAVEE = 74.8,
+                HAUTEUR_TRAVEE = 25,
+                EPAISSEUR_MUR = 2;
+            var DOWN = true;
+
+            var taillePoliceIncrustations = 2;
+
+            // Quelques constantes pratiques pour repérer les faces
+            var indicePDAR = 1,
+                indicePDAV = 2,
+                indicePGAV = 4,
+                indicePGAR = 5,
+                indiceRoof = 7,
+                indiceToit = 8,
+                indicePignonDroit = 3,
+                indicePignonGauche = 2;
+
+            var NB_CONSTRUCTIONS_MAXI = 2;
+            var NB_TRAVEES_MAXI = 4;
+            var PREFIXE_TRAVEE = "Travee ";
+            var TEXTE_EXPORT = "Votre projet a été sauvegardé sous la référence <b>%s</b><br><b>Conservez-la précieusement</b> car elle vous sera demandée pour revenir ultérieurement sur votre projet.<br>";
+
+            var PRODUITS = new Array(9);
+
+            var nbTravees = nbConstructions = nbOuvertures = 0;
+            var tableauTravees,
+                objetsModifiables,
+                facesSelectionnees,
+                objetSelectionne, inventaire;
+
+        </script>
+
+        <div class="div-aide">
+            <div class="div-icone"><img src="icons/help.ico" class="image-aide"></div>
+            <div class="div-contenu">
+                <ul class="texte-aide">
+                    <h3>Orientation</h3>
+                    <li>Notez que la <strong>boussole</strong> est TOUJOURS placée à <strong>droite</strong> de votre construction.</li>
+                    <li><strong>Pour tourner</strong> autour de votre construction, <strong>cliquez</strong> à l'écran puis, tout en maintenant<br>le bouton de votre souris appuyé, <strong>déplacez votre souris</strong>.</li>
+                    <li>Il vous est également possible de choisir des <strong>vues prédéfinies</strong> en utilisant les flèches se trouvant autour de la <strong>petite maison</strong>, au-dessus de notre logo.</li>
+                    <br>
+                    <h3>Manipulation d'objets</h3>
+                    <li>Pour <strong>sélectionner</strong> un élément (mur, ouverture, ...), <strong>double-cliquez</strong> sur l'élément en question.</li>
+                    <li>Pour <strong>avancer ou reculer</strong> une travée, sélectionnez sa <strong>face avant ou arrière</strong> puis choisissez l'action de votre choix dans le menu déroulant.</li>
+                    <li>Le <strong>bouton "Ajouter"</strong> permet de créer une nouvelle travée <strong>sur la droite</strong> de votre construction.</li>
+                    <li>Le <strong>bouton "Supprimer"</strong> supprimera la <strong>travée la plus à droite</strong> de votre construction.</li>
+                </ul>
+                <span class="lien-tuto"><a href="https://econologis.fr/wp-content/uploads/2021/04/Tutoriel%20modification%20design.mp4" target="_blank">Plus d'aide ? Cliquez ici.</a></span>
+            </div>
+        </div>
+
+        <div class="logo">
+            <img src="icons/logo2.jpg" class="image-logo">
+            <h4>©TheCoreDev 2020 - v1.15</h4>
+        </div>
+
+
+        <div class="popup-ouverture" id="popup-ouverture-out">
+            <span id="titre-popup">Quel type d'ouverture voulez-vous ajouter ?</span>
+            <div class="container-images">
+                <figure id="F1g" class="normal"><img src="icons/MF1g.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 gauche" />
+                    <figcaption>Fenêtre<br>45x65cm<br>gauche</figcaption>
+                </figure>
+                <figure id="F1gR" class="normal"><img src="icons/MF1g.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 gauche renforcée" />
+                    <figcaption>Fenêtre<br>45x65cm<br>gau. renf.</figcaption>
+                </figure>
+                <figure id="F1d" class="normal"><img src="icons/MF1d.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 droite" />
+                    <figcaption>Fenêtre<br>45x65cm<br>droite</figcaption>
+                </figure>
+                <figure id="F1dR" class="normal"><img src="icons/MF1d.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 droite renforcée" />
+                    <figcaption>Fenêtre<br>45x65cm<br>dr. renf.</figcaption>
+                </figure>
+                <figure id="F2" class="normal"><img src="icons/MF2.jpg" class="popup-ouverture-image" alt="Fenêtre 2 vantaux 105x115" />
+                    <figcaption>Fenêtre<br>105x115cm</figcaption>
+                </figure>
+                <figure id="F2R" class="normal"><img src="icons/MF2.jpg" class="popup-ouverture-image" alt="Fenêtre 2 vantaux 105x115 renforcée" />
+                    <figcaption>Fenêtre<br>105x115cm<br>renf.</figcaption>
+                </figure>
+                <figure id="PE" class="normal"><img src="icons/MPE.jpg" class="popup-ouverture-image" alt="Porte d'entrée 90x215" />
+                    <figcaption>Porte entrée<br>90x215cm</figcaption>
+                </figure>
+                <figure id="PER" class="normal"><img src="icons/MPE.jpg" class="popup-ouverture-image" alt="Porte d'entrée 90x215 renforcée" />
+                    <figcaption>Porte entrée<br>90x215cm<br>renforcée</figcaption>
+                </figure>
+                <figure id="PE+F1" class="normal"><img src="icons/MPEF.jpg" class="popup-ouverture-image" alt="Porte d'entrée + fenêtre" />
+                    <figcaption>Porte entrée<br>+ fenêtre</figcaption>
+                </figure>
+                <figure id="PF" class="normal"><img src="icons/MPF.jpg" class="popup-ouverture-image" alt="Porte fenêtre 180x215" />
+                    <figcaption>Porte fenêtre<br>180x215cm</figcaption>
+                </figure>
+                <figure id="PG1" class="normal"><img src="icons/MPG1.jpg" class="popup-ouverture-image" alt="Porte de garage 240x200" />
+                    <figcaption>Porte garage<br>240x200cm</figcaption>
+                </figure>
+                <figure id="PG2" class="normal PG2"><img src="icons/MPG2.jpg" class="popup-ouverture-image" alt="Porte de garage renforcée 240x200" />
+                    <figcaption>Porte garage<br>renforcée</figcaption>
+                </figure>
+            </div>
+            <span class="popup-ouverture-texte">* Les éléments grisés ne sont pas disponibles pour des raisons de contrainte technique.</span>
+            <div class="boutons-popup">
+                <button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
+            </div>
+            <input type="hidden" id="traveeSelectionnee">
+        </div>
+
+        <div class="popup-ouverture" id="popup-ouverture-in">
+            <span id="titre-popup">Quel type d'ouverture voulez-vous ajouter ?</span>
+            <div class="container-images">
+                <figure id="PE" class="normal"><img src="icons/MPE.jpg" class="popup-ouverture-image" alt="Porte de service 90x215" />
+                    <figcaption>Porte de service<br>90x215cm</figcaption>
+                </figure>
+                <figure id="PF" class="normal"><img src="icons/MPF.jpg" class="popup-ouverture-image" alt="Porte vitrée 180x215" />
+                    <figcaption>Porte vitrée<br>180x215cm</figcaption>
+                </figure>
+                <figure id="PO" class="normal"><img src="icons/MPI.jpg" class="popup-ouverture-image" alt="Portique intérieur" />
+                    <figcaption>Portique<br>intérieur</figcaption>
+                </figure>
+            </div>
+            <span class="popup-ouverture-texte">* Les éléments grisés ne sont pas disponibles pour des raisons de contrainte technique.</span>
+            <div class="boutons-popup">
+                <button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
+            </div>
+            <input type="hidden" id="traveeSelectionnee">
+        </div>
+
+        <div class="popup-ouverture" id="popup-plancher">
+            <span id="titre-popup">Où souhaitez-vous positionner la trappe d'accès ?</span>
+            <div class="container-images">
+                <figure id="SOLP" class="normal"><img src="icons/SOLP.jpg" class="popup-ouverture-image" alt="Plancher plein" />
+                    <figcaption>Pas de trappe</figcaption>
+                </figure>
+                <figure id="SOLE_hg" class="normal"><img src="icons/SOLE_hg.jpg" class="popup-ouverture-image" alt="Ouverture haut gauche" />
+                    <figcaption>Trémie escalier<br>haut gauche</figcaption>
+                </figure>
+                <figure id="SOLE_hd" class="normal"><img src="icons/SOLE_hd.jpg" class="popup-ouverture-image" alt="Ouverture haut droite" />
+                    <figcaption>Trémie escalier<br>haut droite</figcaption>
+                </figure>
+                <figure id="SOLE_bg" class="normal"><img src="icons/SOLE_bg.jpg" class="popup-ouverture-image" alt="Ouverture bas gauche" />
+                    <figcaption>Trémie escalier<br>bas gauche</figcaption>
+                </figure>
+                <figure id="SOLE_bd" class="normal"><img src="icons/SOLE_bd.jpg" class="popup-ouverture-image" alt="Ouverture bas droite" />
+                    <figcaption>Trémie escalier<br>bas droite</figcaption>
+                </figure>
+                <figure id="SOLT_hc" class="normal"><img src="icons/SOLT_h.jpg" class="popup-ouverture-image" alt="Ouverture haut centré" />
+                    <figcaption>Trappe en haut</figcaption>
+                </figure>
+                <figure id="SOLT_bc" class="normal"><img src="icons/SOLT_b.jpg" class="popup-ouverture-image" alt="Ouverture bas centré" />
+                    <figcaption>Trappe en bas</figcaption>
+                </figure>
+            </div>
+            <br>
+            <div class="boutons-popup">
+                <button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
+            </div>
+            <input type="hidden" id="traveeSelectionnee">
+        </div>
+
+        <div class="popup-ouverture" id="popup-pignon">
+            <span id="titre-popup">Quel type de pignon intérieur voulez-vous ajouter ?</span>
+            <div class="container-images">
+                <figure id="gauche" class="normal"><img src="icons/PINT_gauche.jpg" class="popup-ouverture-image" alt="Ouverture façade avant" />
+                    <figcaption>Ouverture vers<br>façade avant</figcaption>
+                </figure>
+                <figure id="droite" class="normal"><img src="icons/PINT_droite.jpg" class="popup-ouverture-image" alt="Ouverture façade arrière" />
+                    <figcaption>Ouverture vers<br>façade arrière</figcaption>
+                </figure>
+            </div>
+            <div class="boutons-popup">
+                <button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
+            </div>
+            <input type="hidden" id="traveeSelectionnee">
+        </div>
+
+        <div id="overlay"></div>
+
+        <div id="changement-vue">
+            <div class="bouton-fleche" id="aerien" alt="Vue aérienne"><i class="fas fa-plane" data-toggle="tooltip" data-placement="top" title="Tooltip on top" id="bouton-vue-aerienne"></i></div>
+            <div class="bouton-fleche" id="gauche" alt="Vue de gauche"><i class="fas fa-arrow-right"></i></div>
+            <div class="bouton-fleche" id="dessus" alt="Vue de dessus"><i class="fas fa-arrow-down"></i></div>
+            <div class="bouton-fleche" id="arriere" alt="Vue arrière"><i class="fas fa-arrow-left"></i></div>
+            <div class="bouton-fleche" id="avant" alt="Vue avant"><i class="fas fa-arrow-right"></i></div>
+            <div class="bouton-fleche" id="droite" alt="Vue de droite"><i class="fas fa-arrow-left"></i></div>
+            <div id="perspective"><img src="icons/maison.png"></div>
+        </div>
+
+        <div id="transparent-overlay"></div>
+        <div id="vue-aerienne">
+            <div id="legende">
+                <span class="titre">Légende des modules</span></br>
+                <div id="legende-modules">
+                    <span>MPL : Mur plein</span></br>
+                    <span>MPE : Porte d'entrée</span></br>
+                    <span>MF1 : Fenêtre 45x65</span></br>
+                    <span>MF2 : Fenêtre 105x115</span></br>
+                    <span>MPF : Porte fenêtre</span></br>
+                    <span>MPG1 : Porte de garage 240x200</span></br>
+                    <span>MPG2 : Porte garage renforcée</span></br>
+                    <span>MPEF : Porte d'entrée + fenêtre</span></br>
+                    <span>MPI : Portique intérieur</span></br>
+                </div>
+            </div>
+            <div id="boutons">
+                <button id="legende"></button>
+                <button id="dezoom">-</button>
+                <button id="zoom">+</button>
+            </div>
+            <div id="quitter-vue-aerienne">
+                <span>Quittez le plan d'implantation</span>
+            </div>
+        </div>
+
+        <div id="popup-attente">
+            <div class="spinner-border text-success" role="status" id="popup-attente-icon">
+                <span class="sr-only">Spinner</span>
+            </div>
+            <span class="texte-attente">Veuillez patienter :<br>nous sommes en train de préparer votre demande de prix...</span>
+        </div>
+
+        <div id="popup-export">
+            <span class="texte">Votre projet a été sauvegardé sous la référence <b>%s</b><br>
+                <b>Conservez-la précieusement</b> car elle sera nécessaire pour revenir ultérieurement sur votre projet.<br><br>
+                Nous allons enregistrer cette référence dans le presse-papiers de votre ordinateur :<br>cela vous permettra ensuite de la coller directement dans le document de votre choix.
+            </span>
+            <button type="button" class="btn btn-success" id="popup-export-button">Je copie cette référence dans mon presse-papiers</button>
+        </div>
+
+        <div id="popup-decalage">
+            <span class="texte">Vous souhaitez créer une nouvelle travée, et donc une nouvelle construction (nos constructions sont limitées à 4 travées maximum).<br><br>Dans quelle direction souhaitez-vous décaler cette nouvelle travée, par rapport à votre construction actuelle ?<br></span>
+            <button type="button" class="btn btn-info" id="popup-decalage-arriere">Vers l'arrière</button>
+            <button type="button" class="btn btn-info" id="popup-decalage-avant">Vers l'avant</button>
+            <button type="button" class="btn btn-danger" id="popup-decalage-annuler">Annuler</button>
+        </div>
+
+    </div> <!-- Fin du container  -->
+</body>
+
+</html>