Mis en place du RGPD

5 files changed, 142 insertions, 0 deletions

diff --git a/Static/Css/footer.css b/Static/Css/footer.css
index 1035cc0..e86c352 100644
--- a/Static/Css/footer.css
+++ b/Static/Css/footer.css
@@ -18,3 +18,7 @@ footer {
     color:              var(--footerTextColor);
     background-color:   var(--footerBgColor);
 }
+
+footer a {
+    color: #695454;
+}
diff --git a/Static/Css/main.css b/Static/Css/main.css
index 4802d61..cbb7849 100644
--- a/Static/Css/main.css
+++ b/Static/Css/main.css
@@ -182,6 +182,7 @@ main table {
     Overflow-y:      auto;
     padding:         1em;
     border-collapse: collapse;
+    width:           -moz-fit-content;
     width:           fit-content;
     max-width:       95%;
     margin-left:     auto;
diff --git a/Static/Css/rgpd.css b/Static/Css/rgpd.css
new file mode 100644
index 0000000..023b5ad
--- /dev/null
+++ b/Static/Css/rgpd.css
@@ -0,0 +1,107 @@
+
+/*
+############################################################################
+#                                                                          #
+# Description: CSS spécifique au bandeau RGPD                              #
+#                                                                          #
+############################################################################
+*/
+
+#rgpd {
+    position:          fixed;
+    display:           flex;
+    flex-direction:    column;
+    justify-content:   space-around;
+    z-index:           3;
+    width:             100%;
+    height:            100%;
+    background-color: #10101090;
+}
+
+#rgpd section {
+    display:          flex;
+    flex-direction:   column;
+    position:         relative;
+    width:            -moz-fit-content;
+    width:            fit-content;
+    max-width:        50%;
+    margin-left:      auto;
+    margin-right:     auto;
+    padding:          1em;
+    background-color: var(--bg);
+    border:           4px solid var(--mainSiteColor);
+    border-radius:    10px;
+    font-size:        var(--fontSizeSmallLess);
+}
+
+#rgpd h3 {
+    margin-left:   auto;
+    margin-right:  auto;
+    width:         -moz-fit-content;
+    width:         fit-content;
+    font-size:     var(--fontSizeMedium);
+    border-bottom: var(--mainSiteColor) 2px solid;
+}
+
+#mainRgpd {
+    display: flex;
+    padding: 1em;
+}
+
+#mainRgpd p {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
+}
+
+#rgpd span {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-around;
+    padding:         0.2em;
+    font-size:       64px;
+}
+
+#btnRgpd {
+    display:      flex;
+    margin-left:  auto;
+    margin-right: 1em;
+    padding:      1em;
+    gap:          1em;
+}
+
+#rgpdAccept, #rgpdDecline {
+    background-color: var(--bg);
+    border-radius:    5px;
+    padding:          0.4em 0.6em;
+    transition:       all 0.08s ease-in-out;
+}
+
+#rgpdAccept:hover, #rgpdDecline:hover {
+    cursor: pointer;
+    color:  var(--bg);
+}
+
+#rgpdAccept {
+    color: #145814;
+    border: 2px solid #218a21;
+}
+
+#rgpdDecline {
+    color: #5e5e5e;
+    border: 2px solid #a1a1a1;
+}
+
+#rgpdAccept:hover {
+    background-color: #218a21;
+}
+
+#rgpdDecline:hover {
+    background-color: #a1a1a1;
+}
+
+@media screen and (max-width: 768px) {
+    #rgpd section {
+        max-width: 80%;
+    }
+}
diff --git a/Static/Js/googleAnalitycs.js b/Static/Js/googleAnalitycs.js
new file mode 100644
index 0000000..c67770f
--- /dev/null
+++ b/Static/Js/googleAnalitycs.js
@@ -0,0 +1,11 @@
+
+// ############################################################################
+// #                                                                          #
+// # Description: Global site tag (gtag.js) - Google Analytics                #
+// #                                                                          #
+// ############################################################################
+
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'G-'); // G-XXXXXXXXXX -> Clef API à récupérer chez google
diff --git a/Static/Js/rgpd.js b/Static/Js/rgpd.js
new file mode 100644
index 0000000..a134717
--- /dev/null
+++ b/Static/Js/rgpd.js
@@ -0,0 +1,19 @@
+
+// ############################################################################
+// #                                                                          #
+// # Description: JS uniquement utile dans l'index                            #
+// #                                                                          #
+// ############################################################################
+
+// Bind du boutton Accepter et Supprimer pour les cookies de google analytics
+// L'option secure oblige le cookie à être transmis uniquement en https
+// Le max-age corrspond ici à un an, 60 sec x 60 min x 24H x 364 jours
+document.getElementById("rgpdAccept").addEventListener("click", () => {
+    document.cookie = "RGPD_ACCEPT=1; max-age=" + 60*60*24*364 + "; path=/; Secure;";
+    window.location.reload()
+});
+
+document.getElementById("rgpdDecline").addEventListener("click", () => {
+    document.cookie = "RGPD_ACCEPT=0; max-age=" + 60*60*24*364 + "; path=/; Secure;";
+    window.location.reload()
+});
\ No newline at end of file