damn cookies

StellarStoic · Aug 31, 2024 · fb9f78b · fb9f78b
1 parent 57cdd7c
commit fb9f78b
Show file tree

Hide file tree

Showing 8 changed files with 271 additions and 8 deletions.
diff --git a/converter.html b/converter.html
@@ -89,8 +89,32 @@ <h4 id="gratitudeHeader">If you like what you see, consider contributing a few s
       </div>
   </div>
 
+    <!-- Cookie Consent Modal -->
+    <div id="cookieConsentModal" class="description-modal">
+        <div class="modal-content">
+            <h4>Listen Up, Cookie Crunchers!</h4>
+            <h6>The G.D.P.R. (Greatly Demanding Privacy Rules) requires us to share this with you...</h6>
+            <p>We don't really give a damn about cookies. But some settings, like our fancy currency rates converter, store your preferences so you don't have to waste time setting things up every damn time you visit.</p>
+            <br>
+            <p>But seriously, we don't track you, we don't sell your data, and we definitely don't care about what you're doing online (unless you're baking actual cookies, in which case, send some our way digitally in sats. <span style="color: aliceblue">⚡</span>)</p>
+            <br>
+            <p>If you're cool with us making your life a little bit easier, click the button below. If not, hey, that's cool too. Just remember! stay humble and stack sats.</p>
+            <br>
+            <!-- Button container with Flexbox -->
+            <div class="consent-button-container">
+                <button onclick="acceptCookies()" class="consent-icon-button green-check" title="Yeah, whatever, just do it!">
+                    &#10004; <!-- Unicode checkmark -->
+                </button>
+                <button onclick="declineCookies()" class="consent-icon-button red-cross" title="Nope, delete sll none essential cookies">
+                    &#10008; <!-- Unicode cross -->
+                </button>
+            </div>
+        </div>
+      </div>
+
 
 
+<script src="coockieConsent.js"></script>
 <script src="copyonclick.js"></script>
 <script src="converter.js"></script>
 <script src="index.js"></script>

diff --git a/converter.js b/converter.js
@@ -49,7 +49,9 @@ document.addEventListener('DOMContentLoaded', function () {
         const currencySymbol = currencySymbolElement.textContent;
         if (currencySymbol !== 'BTC' && currencySymbol !== 'SAT') {
             e.target.parentNode.removeChild(e.target); // Remove the swiped container
-            saveUserSettings(); // Save settings after removing a currency
+            if (getCookie("cookieConsent") === "true") {
+                saveUserSettings(); // Save settings after removing a currency
+            }
             updateAllCurrencies(); // Update currencies after removing one
         }
     });
@@ -67,7 +69,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
     container.addEventListener('slip:reorder', function (e) {
         e.target.parentNode.insertBefore(e.target, e.detail.insertBefore);
-        saveUserSettings(); // Save settings after reordering
+        if (getCookie("cookieConsent") === "true") {
+            saveUserSettings(); // Save settings after reordering
+        }
         updateAllCurrencies(); // Recalculate all currencies after reorder
         return false;
     });
@@ -110,7 +114,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     loadUserSettings(); // Load user settings after fetching rates
                     updateAllCurrencies();
 
-                    // Store rates in localStorage with expiry
+                    // Store rates in localStorage with expiry (always store this data)
                     localStorage.setItem(CACHE_KEY, JSON.stringify(exchangeRates));
                     localStorage.setItem(CACHE_EXPIRY_KEY, (now + CACHE_DURATION_MS).toString());
                 })
@@ -312,7 +316,9 @@ document.addEventListener('DOMContentLoaded', function () {
         `;
         container.appendChild(newContainer);
         initializeInputValidation(); // Reinitialize input validation
-        saveUserSettings(); // Save user settings after adding a new currency
+        if (getCookie("cookieConsent") === "true") {
+            saveUserSettings(); // Save user settings after adding a new currency
+        }
         selectedCurrency = null;  // Reset after use
         updateAllCurrencies(); // Update all currencies after adding a new one
     };
@@ -349,4 +355,22 @@ document.addEventListener('DOMContentLoaded', function () {
 
     initializeInputValidation();
     fetchSupportedCurrencies(); // Fetch the supported currencies and exchange rates
+
+    // Helper functions to manage cookies
+    function setCookie(name, value, days) {
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        const expires = "expires=" + date.toUTCString();
+        document.cookie = name + "=" + value + ";" + expires + ";path=/";  // Set path to root
+    }
+
+    function getCookie(name) {
+        const value = "; " + document.cookie;
+        const parts = value.split("; " + name + "=");
+        if (parts.length === 2) return parts.pop().split(";").shift();
+    }
+
+    function deleteCookie(name) {
+        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";  // Set path to root
+    }
 });
diff --git a/coockieConsent.js b/coockieConsent.js
@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Function to set a cookie with a specified path
+    function setCookie(name, value, days) {
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        const expires = "expires=" + date.toUTCString();
+        document.cookie = name + "=" + value + ";" + expires + ";path=/";  // Set path to root
+    }
+
+    // Function to get a cookie by name
+    function getCookie(name) {
+        const value = "; " + document.cookie;
+        const parts = value.split("; " + name + "=");
+        if (parts.length === 2) return parts.pop().split(";").shift();
+    }
+
+    // Function to delete a cookie by name
+    function deleteCookie(name) {
+        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";  // Set path to root
+    }
+
+    // Function to check for cookie consent
+    function checkCookieConsent() {
+        const consent = getCookie("cookieConsent");
+        const sessionDecline = sessionStorage.getItem("cookieConsentDeclined");
+
+        if (!consent && !sessionDecline) {
+            // Show the cookie consent modal if consent is not found and not declined in the current session
+            openCookieConsentModal();
+        }
+    }
+
+    // Function to show the cookie consent modal
+    function openCookieConsentModal() {
+        const cookieModal = document.getElementById('cookieConsentModal');
+        if (cookieModal) {
+            cookieModal.classList.add('active');
+            document.body.classList.add('modal-open');
+        }
+    }
+
+    // Function to accept cookies and close the modal
+    function acceptCookies() {
+        setCookie("cookieConsent", "true", 365); // Store consent for 1 year
+        const cookieModal = document.getElementById('cookieConsentModal');
+        if (cookieModal) {
+            cookieModal.classList.remove('active');
+            document.body.classList.remove('modal-open');
+        }
+    }
+
+    // Function to decline cookies, delete all cookies and close the modal
+    function declineCookies() {
+        // Mark that the user declined cookies for this session
+        sessionStorage.setItem("cookieConsentDeclined", "true");
+
+        // List of cookies to delete
+        const cookiesToDelete = ['exchangeRatesCache', 'exchangeRatesCacheExpiry', 'userCurrencySettings', 'cookieConsent'];
+
+        // Delete each cookie
+        cookiesToDelete.forEach(cookieName => {
+            deleteCookie(cookieName);
+        });
+
+        // Clear localStorage as well
+        localStorage.clear();
+
+        const cookieModal = document.getElementById('cookieConsentModal');
+        if (cookieModal) {
+            cookieModal.classList.remove('active');
+            document.body.classList.remove('modal-open');
+        }
+    }
+
+    // Check consent on page load
+    checkCookieConsent();
+
+    // Attach global functions to the window object if needed
+    window.acceptCookies = acceptCookies;
+    window.declineCookies = declineCookies;
+});
diff --git a/index.html b/index.html
@@ -79,8 +79,33 @@ <h4 id="gratitudeHeader">If you like what you see, consider contributing a few s
       </div>
   </div>
 
+    <!-- Cookie Consent Modal -->
+    <div id="cookieConsentModal" class="description-modal">
+      <div class="modal-content">
+          <h4>Listen Up, Cookie Crunchers!</h4>
+          <h6>The G.D.P.R. (Greatly Demanding Privacy Rules) requires us to share this with you...</h6>
+          <p>We don't really give a damn about cookies. But some settings, like our fancy currency rates converter, store your preferences so you don't have to waste time setting things up every damn time you visit.</p>
+          <br>
+          <p>But seriously, we don't track you, we don't sell your data, and we definitely don't care about what you're doing online (unless you're baking actual cookies, in which case, send some our way digitally in sats. <span style="color: aliceblue">⚡</span>)</p>
+          <br>
+          <p>If you're cool with us making your life a little bit easier, click the button below. If not, hey, that's cool too. Just remember! stay humble and stack sats.</p>
+          <br>
+          <!-- Button container with Flexbox -->
+          <div class="consent-button-container">
+              <button onclick="acceptCookies()" class="consent-icon-button green-check" title="Yeah, whatever, just do it!">
+                  &#10004; <!-- Unicode checkmark -->
+              </button>
+              <button onclick="declineCookies()" class="consent-icon-button red-cross" title="Nope, delete sll none essential cookies">
+                  &#10008; <!-- Unicode cross -->
+              </button>
+          </div>
+      </div>
+    </div>
+
+
 
 
+<script src="coockieConsent.js"></script>
 <script src="copyonclick.js"></script>
 <script src="text.js"></script>
 <script src="index.js"></script>

diff --git a/nip05.html b/nip05.html
@@ -152,7 +152,31 @@ <h4 id="gratitudeHeader">If you like what you see, consider contributing a few s
         </div>
     </div>
 
-    <!-- Scripts -->
+    <!-- Cookie Consent Modal -->
+    <div id="cookieConsentModal" class="description-modal">
+        <div class="modal-content">
+            <h4>Listen Up, Cookie Crunchers!</h4>
+            <h6>The G.D.P.R. (Greatly Demanding Privacy Rules) requires us to share this with you...</h6>
+            <p>We don't really give a damn about cookies. But some settings, like our fancy currency rates converter, store your preferences so you don't have to waste time setting things up every damn time you visit.</p>
+            <br>
+            <p>But seriously, we don't track you, we don't sell your data, and we definitely don't care about what you're doing online (unless you're baking actual cookies, in which case, send some our way digitally in sats. <span style="color: aliceblue">⚡</span>)</p>
+            <br>
+            <p>If you're cool with us making your life a little bit easier, click the button below. If not, hey, that's cool too. Just remember! stay humble and stack sats.</p>
+            <br>
+            <!-- Button container with Flexbox -->
+            <div class="consent-button-container">
+                <button onclick="acceptCookies()" class="consent-icon-button green-check" title="Yeah, whatever, just do it!">
+                    &#10004; <!-- Unicode checkmark -->
+                </button>
+                <button onclick="declineCookies()" class="consent-icon-button red-cross" title="Nope, delete sll none essential cookies">
+                    &#10008; <!-- Unicode cross -->
+                </button>
+            </div>
+        </div>
+      </div>
+
+
+    <script src="coockieConsent.js"></script>
     <script src="copyonclick.js"></script>
     <script src="burgerMenu.js"></script>
     <script src="index.js"></script>

diff --git a/quotes.html b/quotes.html
@@ -61,9 +61,35 @@ <h4 id="gratitudeHeader">If you like what you see, consider contributing a few s
             </div>
         </div>
     </div>
+
     <!-- Copy text notification -->
     <div id="copyNotification"  class="copy-notification">Text copied to clipboard!</div>
 
+    <!-- Cookie Consent Modal -->
+    <div id="cookieConsentModal" class="description-modal">
+        <div class="modal-content">
+            <h4>Listen Up, Cookie Crunchers!</h4>
+            <h6>The G.D.P.R. (Greatly Demanding Privacy Rules) requires us to share this with you...</h6>
+            <p>We don't really give a damn about cookies. But some settings, like our fancy currency rates converter, store your preferences so you don't have to waste time setting things up every damn time you visit.</p>
+            <br>
+            <p>But seriously, we don't track you, we don't sell your data, and we definitely don't care about what you're doing online (unless you're baking actual cookies, in which case, send some our way digitally in sats. <span style="color: aliceblue">⚡</span>)</p>
+            <br>
+            <p>If you're cool with us making your life a little bit easier, click the button below. If not, hey, that's cool too. Just remember! stay humble and stack sats.</p>
+            <br>
+            <!-- Button container with Flexbox -->
+            <div class="consent-button-container">
+                <button onclick="acceptCookies()" class="consent-icon-button green-check" title="Yeah, whatever, just do it!">
+                    &#10004; <!-- Unicode checkmark -->
+                </button>
+                <button onclick="declineCookies()" class="consent-icon-button red-cross" title="Nope, delete sll none essential cookies">
+                    &#10008; <!-- Unicode cross -->
+                </button>
+            </div>
+        </div>
+      </div>
+
+
+    <script src="coockieConsent.js"></script>
     <script src="quotes.js"></script>
     <script src="copyonclick.js"></script>
     <script src="index.js"></script>

diff --git a/styles.css b/styles.css
@@ -242,7 +242,7 @@ p, #text {
 }
 
 /* Styles for modals */
-.description-modal, #uploadModal, #infoModal, #qrCodeModal {
+.description-modal, #uploadModal, #infoModal, #qrCodeModal #cookieConsentModal {
     display: none;
     position: fixed;
     word-break: keep-all;
@@ -276,7 +276,7 @@ p, #text {
 	font-family: "Roboto Mono", monospace;
 }
 
-.description-modal.active, #uploadModal.active, #infoModal.active, #qrCodeModal.active {
+.description-modal.active, #uploadModal.active, #infoModal.active, #qrCodeModal.active #cookieConsentModal.active {
     display: flex; /* Use flex to center content */
 }
 
@@ -344,4 +344,37 @@ p, #text {
     color: #fff;
     margin-top: 5px; /* Add some spacing above the text */
     text-align: center; /* Center align the text */
+}
+
+/* Container for the consent buttons */
+.consent-button-container {
+    display: flex; /* Enable Flexbox layout */
+    justify-content: center; /* Center items horizontally */
+    gap: 40px; /* Set gap between the buttons */
+    margin-top: 20px; /* Optional: Add some margin above the button row */
+}
+
+/* Styles for icon-only buttons */
+.consent-icon-button {
+    background-color: transparent; /* No background */
+    border: none; /* Remove border */
+    font-size: 2rem; /* Make icons larger */
+    cursor: pointer; /* Show pointer cursor on hover */
+    transition: transform 0.2s ease; /* Smooth transform effect */
+}
+
+.consent-icon-button:focus {
+    outline: none; /* Remove default focus outline */
+}
+
+.consent-icon-button:hover {
+    transform: scale(1.2); /* Slightly enlarge the button on hover */
+}
+
+.green-check {
+    color: green; /* Green color for checkmark */
+}
+
+.red-cross {
+    color: red; /* Red color for cross */
 }
diff --git a/whitepaper.html b/whitepaper.html
@@ -102,10 +102,36 @@ <h4 id="gratitudeHeader">If you like what you see, consider contributing a few s
             </div>
         </div>
     </div>
+
     <!-- Copy text notification -->
     <div id="copyNotification"  class="copy-notification">Text copied to clipboard!</div>
 
-    <!-- Scripts -->
+    <!-- Cookie Consent Modal -->
+    <div id="cookieConsentModal" class="description-modal">
+        <div class="modal-content">
+            <h4>Listen Up, Cookie Crunchers!</h4>
+            <h6>The G.D.P.R. (Greatly Demanding Privacy Rules) requires us to share this with you...</h6>
+            <p>We don't really give a damn about cookies. But some settings, like our fancy currency rates converter, store your preferences so you don't have to waste time setting things up every damn time you visit.</p>
+            <br>
+            <p>But seriously, we don't track you, we don't sell your data, and we definitely don't care about what you're doing online (unless you're baking actual cookies, in which case, send some our way digitally in sats. <span style="color: aliceblue">⚡</span>)</p>
+            <br>
+            <p>If you're cool with us making your life a little bit easier, click the button below. If not, hey, that's cool too. Just remember! stay humble and stack sats.</p>
+            <br>
+            <!-- Button container with Flexbox -->
+            <div class="consent-button-container">
+                <button onclick="acceptCookies()" class="consent-icon-button green-check" title="Yeah, whatever, just do it!">
+                    &#10004; <!-- Unicode checkmark -->
+                </button>
+                <button onclick="declineCookies()" class="consent-icon-button red-cross" title="Nope, delete sll none essential cookies">
+                    &#10008; <!-- Unicode cross -->
+                </button>
+            </div>
+        </div>
+      </div>
+
+
+
+    <script src="coockieConsent.js"></script>
     <script src="index.js"></script>
     <script src="burgerMenu.js"></script>
     <script src="copyonclick.js"></script>