Add privacy policy (cont.)

_includes/footer.html

@@ -9,11 +9,17 @@
 			</p>
 			<p>Scratch Addons is licensed under the terms of GNU General Public License v3.0.</p>
 		</section>
+        <section>
+            <h3>Pages</h3>
+            <a href="/contributors">Contributors</a>
+            <a href="/feedback">Send Feedback</a>
+			<a href="/privacy">Privacy Policy</a>
+        </section>
 		<section>
 			<h3>Resources</h3>
 			<a href="https://github.com/ScratchAddons" rel="noopener">Organization</a>
 			<a href="https://github.com/ScratchAddons/ScratchAddons" rel="noopener">Repository</a>
 			<a href="https://github.com/ScratchAddons/ScratchAddons/wiki" rel="noopener">Documentation</a>
 		</section>
 	</div>
-</footer>
+</footer>

_includes/head.html

@@ -32,10 +32,8 @@
 <script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin></script>
 <!-- <script data-pace-options='{ "eventLag": false, "restartOnRequestAfter": false }' src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script> -->
 <script async src="https://code.iconify.design/1/1.0.7/iconify.min.js" crossorigin></script>
-<script src="https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js" crossorigin></script>
-<script async src="/assets/js/website-base.js"></script>
-
+<script async src="https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js" crossorigin></script>
 {% unless page.no-analytics %}
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144464383-2"></script>
-<script>window.dataLayer = window.dataLayer || []; function gtag() {dataLayer.push(arguments)}; gtag("js", new Date); gtag("config", "UA-144464383-2")</script>
+<script async src="https://cdn.jsdelivr.net/npm/cookies-eu-banner@2.0.1/dist/cookies-eu-banner.min.js"></script>
 {% endunless %}
+<script defer src="/assets/js/website-base.js"></script>

_includes/nav.html

@@ -22,4 +22,13 @@
 
 	</nav>
 
-</header>
+</header>
+
+<div id="cookies-eu-banner" style="display: none">
+    <div style="display: flex">
+        <p>By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.</p>
+        <a href="/privacy" id="cookies-eu-more" class="btn btn-dark">Read more</a>
+        <button id="cookies-eu-accept" class="btn btn-success">Accept</button>
+        <button id="cookies-eu-reject" class="btn btn-light">Reject</button>
+    </div>
+</div>

assets/css/base.scss

@@ -170,6 +170,77 @@ button#dark-toggle {
 	}
 }
 
+#cookies-eu-banner {
+
+    background: $dark-dp-2;
+    color: #fff;
+    padding: 6px;
+
+    > div {
+        justify-content: center;
+        align-content: center;
+
+        > * {
+            margin: auto 0.125rem;
+            font-size: 0.8rem
+        }
+    }
+
+    p {
+        display: block;
+        margin-left: 0.25rem
+    }
+
+    #cookies-eu-more, #cookies-eu-accept, #cookies-eu-reject {
+        // text-decoration: none;
+        // background: #222;
+        // color: #fff;
+        // border: 1px solid #000;
+        // cursor: pointer;
+        padding: 4px 7px;
+        // font-size: 13px;
+        // font-weight: bold;
+    }
+
+    #cookies-eu-more {
+        color: white;
+        background: inherit;
+        border-color: white
+    }
+
+    // #cookies-eu-more, #cookies-eu-accept {
+
+    //     &:hover, &:focus {
+    //         border-color: #fff;
+    //         background: #222;
+    //         color: #fff;
+    //     }
+
+    //     background: #fff;
+    //     color: #222;
+
+    // }
+
+    // #cookies-eu-reject {
+
+    //     background: none;
+    //     font-weight: normal;
+    //     color: #ccc;
+    //     cursor: pointer;
+    //     padding: 4px 7px;
+    //     border: 1px solid #666;
+
+    //     &:hover, &:focus {
+    //         border-color: #fff;
+    //         background: #222;
+    //         color: #fff;
+    //     }
+
+    // }
+
+}
+
+
 body.dark {
 
 	background-color: $dark-neutral;
@@ -232,6 +303,14 @@ body.extension-styled {
 	}
 }
 
+body.extension-styled {
+
+    #cookies-eu-banner {
+        background: #2a2a2a
+    }
+
+}
+
 body.dark.extension-styled {
 
 	background-color: #222;
@@ -241,7 +320,7 @@ body.dark.extension-styled {
 	}
 
 	header {
-		background-color: #ff7b26;
+		background-color: $scratch-orange;
 	}
 
 	footer {
@@ -278,4 +357,4 @@ body:not([data-theme-loaded=true]) {
 
 	display: none;
 
-}
+}

assets/js/website-base.js

@@ -16,7 +16,7 @@ const waitForElement = selector => {
             }
         })
 
-        observer.observe(document.body, {
+        observer.observe(document.documentElement, {
             childList: true,
             subtree: true
         })
@@ -80,6 +80,40 @@ window.addEventListener('load', () => {
 
 })
 
+/* =============================================================
+                         COOKIE CONSENT
+============================================================= */
+
+var cookiesBanner = new CookiesEuBanner(function () {
+    window.dataLayer = window.dataLayer || []; function gtag() {dataLayer.push(arguments)}; gtag("js", new Date); gtag("config", "UA-144464383-2")
+    let s = document.createElement("script")
+    s.src ="https://www.googletagmanager.com/gtag/js?id=UA-144464383-2";
+    document.head.appendChild(s)
+    // this.deleteCookie(this.cookieName)
+    // window.location.reload()
+}, false)
+
+// cookiesBanner.deleteCookie(cookiesBanner.cookieName);
+// console.log(cookiesBanner.hasConsent())
+
+// function updateCookiesEuState() {
+//     var hasConsent = cookiesBanner.hasConsent()
+//     var state = '❔ Nor accepted nor rejected';
+
+//     if (hasConsent === true) {
+//         state = '✅ Accepted';
+//     } else if (hasConsent === false) {
+//         state = '❌ Rejected';
+//         cookiesBanner.deleteCookie(cookiesBanner.cookieName)
+//         cookiesBanner.setConsent(false);
+//     }
+
+//     console.log(state)
+// }
+
+// updateCookiesEuState();
+// setInterval(updateCookiesEuState, 100);
+
 /* =============================================================
                            DARK THEME
 ============================================================= */
@@ -127,7 +161,7 @@ if (localStorage.getItem("darkTheme") === "true") {
     localStorage.setItem("darkTheme", false)
 }
 
-document.body.dataset.themeLoaded = true
+waitForElement("body").then(() => document.body.dataset.themeLoaded = true)
 
 waitForElement("#dark-toggle").then(() => {
 

faq.md

@@ -5,7 +5,7 @@ description:
 ---
 
 <!-- 
-Use Markdown, not HTML!
+Use Markdown, not HTML.
 
 H1 is from front matter above, not this one in the bottom
 # Frequently Asked Questions 
@@ -21,4 +21,4 @@ Answer 2
 
 ### Question 3
 
-Answer 3
+Answer 3

privacy.md

@@ -0,0 +1,41 @@
+---
+layout: markdown
+title: Privacy Policy
+description: This Privacy Policy describes how we collect, use, and safeguard the information you give us.
+---
+
+*Effective date: 30 September 2020*
+
+This Privacy Policy describes how we collect, use, and safeguard the information you give us. In this agreement, website refers to the Scratch Addons website (<https://scratchaddons.com/>). Extension refers to our browser extension, which you can download from <https://chrome.google.com/webstore/detail/fbeffbjdlemaoicjdapfpikkikjoneco> or <https://addons.mozilla.org/firefox/addon/scratch-messaging-extension/.>
+
+When we talk about the service, we mean any service provided by us, such as the website or our services used in addons. The terms &quot;we,&quot; &quot;us,&quot; and &quot;our&quot; refer to the leaders of the Scratch Addons open source project (<https://github.com/ScratchAddons>). When you use our services, you agree to this privacy policy.
+
+## Information we collect
+
+We collect a few different kinds of information about you, like what part of the world you are in, what pages you come to our website from, and what device and software you use. We also collect information about how you use our website. We might collect your Scratch username.
+
+### Information collected via Technology
+
+When you load our website, your browser automatically sends us some information about you. That information includes what page you were on before you came to our website, what kind of device you use, and your IP address. This information does not let us know who you are, but it can help us make decisions about how to make our website better. We may use cookies or other local storage to collect information about you, but not who you are, and remember your settings. For example, Scratch Addons may use cookies to remember if you want to use dark mode.
+
+Scratch Addons may use both persistent and session storage. Persistent storage stays on your computer after you close your browser until you delete it, and your browser deletes session storage when you close it. We use Google Analytics to collect data. For information about how Google may use your data, see <https://support.google.com/analytics/answer/6004245> and <https://policies.google.com/technologies/partner-sites>.
+
+### How we use your information
+
+We will never sell, rent, or share your data, except as needed to operate the service. We do share your information with companies whose services we use, like the company that hosts the servers collecting form responses or the one hosting our website. In general, we use the personal information you give to us to help us communicate with you. For example, we might use personal information to contact you in response to questions or provide technical support. If law enforcement asks for data about a user, we will give it to them.
+
+### How we protect information
+
+We are generally quite careful with your data, using security measures like HTTPS and avoiding the use of insecure code that could allow XSS. However, we ensure that hackers won't. When you use our service, you accept that small have access to your information if we get hacked.
+
+## Links to other websites
+
+As part of the service, we may provide links to or compatibility with other websites or apps. We aren't responsible for the content on those sites or how they might use your data. This Privacy Policy is only about our service.
+
+## Changes to our privacy policy
+
+We might change this policy at any time, but if we do, we will tell you. If we make substantial changes, they will take effect 30 days after we tell you. Small changes or clarifications will take effect immediately. You should periodically check the website and this page for updates.
+
+## How to contact us
+
+If you have any questions, please contact us through our feedback page at <https://scratchaddons.com/feedback.> This page was last updated on 30 September 2020.