Merge pull request #27 from jxmot/20220404-updates

Updates

public_html/assets/css/cookies.css

@@ -0,0 +1,123 @@
+/* https://angrytools.com/css-grid/ */
+
+/* cookies */
+.cookie-con {
+    display: none;
+
+    margin-left: 2rem;
+    margin-right: 2rem;
+    bottom: 3.1rem;
+
+    position: fixed;
+    background-color: lightgrey;
+    border: 3px solid black;
+    border-radius: 1rem;
+}
+
+.cookie-con-body {
+    margin-left: 2rem;
+    margin-right: 2rem;
+
+    display: grid;
+    gap: 0px;
+    /* grid-template-rows: 1fr 1fr; */
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: min-content;
+}
+
+.cookie-con-msg {
+    text-align: center;
+
+    grid-row-start: 1;
+    grid-row-end: 2;
+
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+.cookie-con-text {
+    font-size: small;
+    font-weight: 900;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.cookie-con-accept {
+    text-align: center;
+
+    grid-row-start: 2;
+    grid-row-end: 3;
+
+    grid-column-start: 1;
+    grid-column-end: 2;
+}
+
+.cookie-con-decline {
+    text-align: center;
+
+    grid-row-start: 2;
+    grid-row-end: 3;
+
+    grid-column-start: 2;
+    grid-column-end: 3;
+}
+
+/* 
+    Button Styles 
+
+    Used https://cssbuttons.app/
+*/
+.cookie-con-button {
+    width: 6em;
+    font-size: 1em;
+    font-weight: 600;
+    color: black;
+    cursor: pointer;
+    margin-bottom: 1.25em;
+    height: 3em;
+    text-align: center;
+    border: none;
+    background-size: 300% 100%;
+
+    moz-transition: all 0.4s ease-in-out;
+    -o-transition: all 0.4s ease-in-out;
+    -webkit-transition: all 0.4s ease-in-out;
+    transition: all 0.4s ease-in-out;
+}
+
+.cookie-con-button:hover {
+    background-position: 100% 0;
+    moz-transition: all 0.4s ease-in-out;
+    -o-transition: all 0.4s ease-in-out;
+    -webkit-transition: all 0.4s ease-in-out;
+    transition: all 0.4s ease-in-out;
+}
+
+.cookie-con-button:focus {
+    outline: none;
+}
+
+/* https://cssbuttons.app/buttons/22 */
+.cookie-con-accbutton-bg {
+    background-image: linear-gradient(
+        to right,
+        #0ba360,
+        #3cba92,
+        #30dd8a,
+        #2bb673
+    );
+    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
+}
+
+/* https://cssbuttons.app/buttons/27 */
+.cookie-con-decbutton-bg {
+    background-image: linear-gradient(
+        to right,
+        #ed6ea0,
+        #ec8c69,
+        #d40834, /* #f7186a, */
+        #fbb03b
+    );
+    box-shadow: 0 4px 15px 0 rgba(211, 29, 77, 0.75);
+    /* box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75); */
+}

public_html/assets/css/nobs-contact.css

@@ -8,7 +8,6 @@
     Repository: https://github.com/jxmot/website_template-no_bootstrap
 */
 .contact-container {
-    max-width: 1170px;
     margin-top: 1rem;
 }
 

public_html/assets/css/nobs.css

@@ -7,7 +7,19 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 
-body{
+html {
+/* 
+    Works everywhere, EXCEPT firefox android! 
+
+    Ok, so FF is adding a varying amount (a 
+    percentage?) to the value below. Again...
+    WHY?
+
+*/
+    font-size: 16px;
+}
+
+body {
     background-color: var(--body-bg);
     color: var(--body-text);
     font-family: "Roboto", sans-serif;
@@ -115,7 +127,7 @@ body{
     }
 
     .menu a {
-        /* padding is managed in logo.js:setLogo() */
+        /* padding is managed in nobs-logo.js:setLogo() */
     }
 
     /* menu item highlight */
@@ -228,6 +240,11 @@ body{
     padding-bottom: 1rem;
 }
 
+/* needed because reseter.css adjusted <ul> and <ol> */
+.section-body ul {
+    margin-left: 2rem;
+}
+
 /* Footer */
 .footer {
     bottom: 0;

public_html/assets/js/cookies.js

@@ -0,0 +1,135 @@
+/*
+    Cookies:
+        makeCookie()        - creates a cookie
+        getCookie()         - get a cookie
+        getAllCookies()     - get an array of all cookies
+        deleteAllCookies()  - delete all cookies
+        deleteCookie()      - deletes a specified cookie
+
+    Adapted From:
+        https://www.w3schools.com/js/js_cookies.asp
+
+    Cookie Info:
+        https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+
+        Good cookie description, but the tutorial is junk - 
+        https://www.w3resource.com/javascript/cookies/introduction-cookies.php
+*/
+const default_cookie_expire = 5;
+
+function makeCookie(name, val, days = default_cookie_expire) {
+    let encval = '';
+
+    switch(typeof val) {
+        case 'string':
+            encval = encodeURIComponent(val);
+            break;
+
+        case 'number':
+        case 'boolean':
+            encval = encodeURIComponent(val.toString());
+            break;
+
+        case 'object':
+            encval = encodeURIComponent(JSON.stringify(val));
+            break;
+
+        case 'undefined':
+            encval = 'undefined';
+            break;
+
+        default:
+            encval = encodeURIComponent('error '+typeof val);
+            break;
+    };
+
+    const d = new Date();
+    d.setTime(d.getTime() + (days*24*60*60*1000));
+
+    /*
+        This is going to send a simple cookie. The "domain" will 
+        be left as default. Other cookie fields may be added later.
+    */
+    document.cookie = `${name}=${encval};expires=${d.toUTCString()};path=/`;
+};
+
+function getCookie(_name) {
+    let ret = '';
+    let name = _name + '=';
+
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) === 0) {
+            ret = c.substring(name.length, c.length);
+            break;
+        }
+    }
+    return ret;
+};
+
+function getAllCookies() {
+    let ret = [];
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+        ret.push(ca[i]);
+    }
+    return ret;
+};
+
+function deleteAllCookies() {
+    let cdel = 0;
+    let cookies = document.cookie.split(";");
+    for(let i = 0; i < cookies.length; i++) {
+        if(cookies[i] !== '') {
+            let cookie = cookies[i];
+            let eqPos = cookie.indexOf("=");
+            let name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+            document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
+            cdel += 1;
+        }
+    }
+    // return the number of cookies that were deleted
+    return cdel
+};
+
+function deleteCookie(name) {
+    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
+};
+
+/*
+    Cookie Consent Management:
+        hasConsent()    - returns true if the users has accepted
+        adjustCookies() - adjust the CSS for the consent dialog
+        $().ready(...)  - on page ready manage the cookie consent
+*/
+const default_cookie_name = 'cookie_consent';
+
+function hasConsent(name = default_cookie_name) {
+    return !!getCookie(name);
+};
+
+function adjustCookies() {
+    $('.cookie-con').css('margin-left','0.5rem');
+    $('.cookie-con').css('margin-right','0.5rem');
+    $('.cookie-con-button').css('font-size','0.75rem');
+};
+
+$().ready(() => {
+    if(hasConsent() === false) {
+        $('#cookie_con').css('display', 'block');
+        $('.cookie-con-button').click(function(event) {
+            if(event.target.id === 'cc_accbutton') {
+                makeCookie(default_cookie_name, true);
+            }
+            // even if the user does not consent we 
+            // will hide the consent request (for now)
+            $('#cookie_con').css('display', 'none');
+        });
+    }
+});