Merge pull request #419 from RobzLegz/staging

Staging

components/containers/privacyPolicy/PrivacyPolicy.tsx

@@ -0,0 +1,63 @@
+import { useRouter } from 'next/dist/client/router';
+import React from 'react'
+
+function PrivacyPolicy() {
+    const router = useRouter();
+
+    return (
+        <div className="privacyPolicy__container">
+            <h1>Privacy Policy</h1>
+
+            <div className="privacyPolicy__container__button">
+                <button onClick={() => router.back()}>Back</button>
+            </div>
+
+            <p>Last Updated: 08.11.2021</p>
+            <p>This Privacy Policy (“Policy”) explains the information collection, use, and sharing practices of mathroom.</p>
+            <p>Unless otherwise stated, this Policy describes and governs the information collection, use, and sharing practices of mathroom with respect to your use of our website mathroom.vercel.app/ and the services (“education”) we provide.</p>
+            <p>Before you use or submit any information through or in connection with the Services, please carefully review this Privacy Policy. By using any part of the Services, you understand that your information will be collected, used, and disclosed as outlined in this Privacy Policy.</p>
+
+            <h3>Our Principles</h3>
+
+            <p>Mathroom has designed this policy to be consistent with the following principles:</p>
+
+            <ul>
+                <li>Privacy policies should be human readable and easy to find.</li>
+                <li>Data collection, storage, and processing should be simplified as much as possible to enhance security, ensure consistency, and make the practices easy for users to understand.</li>
+                <li>Data practices should meet the reasonable expectations of users.</li>
+            </ul>
+
+            <h3>Information We Collect</h3>
+
+            <p>The only information we collect is the user's name and email, even passwords are not stored in the database.We don't collect any cookies and don’t pass the information on to third parties.</p>
+
+            <h3>How We Use Your Information</h3>
+
+            <p>We can use the information collected to improve our service,  including to develop new features or services, and take steps to secure the Services.</p>
+
+            <h3>When We Disclose Your Information</h3>
+
+            <p>Legal Compliance and Protection of Creative Commons and Others. We may disclose your information if required to do so by law or on a good faith belief that such disclosure is permitted by this Privacy Policy or reasonably necessary or appropriate for any of the following reasons:  to comply with legal process;</p>
+
+            <h3>Your Choices and Data Subject Rights</h3>
+
+            <p>Account Preferences</p>
+
+            <p>If you create an account at the current stage of the game, you will not be able to change the username or email. You won't be able to sign out of the account, but you can leave the game by closing the browser tab.</p>
+
+            <h3>Data Retention</h3>
+
+            <p>We retain the information we collect for as long as necessary to fulfill the purposes set forth in this Privacy Policy or as long as we are legally required or permitted to do so. Information may persist in copies made for backup and business continuity purposes for additional time.</p>
+
+            <h3>Changes to this Privacy Policy</h3>
+
+            <p>We will continue to evaluate this Privacy Policy as we update and expand our Services, and we may make changes to the Privacy Policy accordingly. We will post any changes here and revise the date last updated above. We encourage you to check this page periodically for updates to stay informed on how we collect, use and share your information. If we make material changes to this Privacy Policy, we will provide you with notice.</p>
+
+            <h3>Questions About this Privacy Policy</h3>
+
+            <p>If you have any questions about this Privacy Policy or our privacy practices, you can contact us at: [email protected]</p>
+        </div>
+    )
+}
+
+export default PrivacyPolicy

pages/privacy-policy.tsx

@@ -1,12 +1,15 @@
 import React from "react"
 import Head from "next/head"
+import PrivacyPolicy from "../components/containers/privacyPolicy/PrivacyPolicy";
 
 function privacyPolicy() {
     return (
-        <div>
+        <div className="privacyPolicy">
             <Head>
                 <title>MathRoom | Privacy policy</title>
             </Head>
+
+            <PrivacyPolicy />
         </div>
     )
 }

styles/main.scss

@@ -7,4 +7,5 @@
 @import "./levels/index.scss";
 @import "./community/index.scss";
 @import "./instructions/instructionPage.scss";
-@import "./profilePage/profilePage.scss";
+@import "./profilePage/profilePage.scss";
+@import "./privacyPolicy/privacyPolicy.scss";

styles/privacyPolicy/privacyPolicy.scss

@@ -0,0 +1,74 @@
+@import "../variables.scss";
+
+.privacyPolicy{
+    width: 100%;
+    padding: 100px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $mathRoomDarkerPurple;
+
+    &__container{
+        width: 700px;
+        padding: 20px;
+        border-radius: 10px;
+        background-color: $mathRoomContainerBG;
+
+        h1{
+            margin: 0 0 10px;
+            text-align: center;
+        }
+
+        &__button{
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+
+            button{
+                width: 150px;
+                height: 40px;
+                border-radius: 5px;
+                margin: 10px 0;
+            }
+        }
+
+        h3{
+            margin: 20px 0 10px;
+        }
+
+        p{
+            margin: 10px 0;
+            text-align: start;
+        }
+
+        ul{
+            list-style: circle !important;
+            padding: 0 20px;
+
+            li{
+                list-style: circle !important;
+            }
+        }
+    }
+
+    @media screen and (max-width: 800px) {
+        padding: 50px 20px;
+
+        &__container{
+            width: 100%;
+        }
+    }
+
+    @media screen and (max-width: 500px) {
+        padding: 0;
+
+        &__container{
+            border-radius: 0;
+            padding: 10px;
+
+            &__button{
+                justify-content: center;
+            }
+        }
+    }
+}