Adding buttons to pages

packages/frontend/assets/styles/main.scss

@@ -115,6 +115,11 @@ h1 {
         font-weight: 600;
         line-height: 72px;
     }
+
+    h2 {
+        font-size: 40px;
+        line-height: 60px;
+    }
 
 
     h3 {

packages/frontend/components/TrackAsset.vue

@@ -0,0 +1,70 @@
+<!-- TrackAsset.vue
+Copyright (C) 2024 GOSQAS Team
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
+<!--
+    This is the component that shows users an input field to enter
+    a device key to be tracked.
+-->
+
+
+<template>
+    <form @submit.prevent="submit">
+        <input type="text" id="input" v-model="deviceKey" placeholder="Device key" style="width: inputWidth;" required/>
+        <button-component buttonText="Track asset" padding="12px 16px"
+            type="submit" style="font-size: 16px;"></button-component>
+    </form>
+</template>
+
+<script lang="ts">
+
+export default {
+    props: {
+        inputWidth: { type: String, default: "100%" }
+    },
+    data() {
+        return {
+            deviceKey: ''
+        }
+    },
+    mounted() {
+        let inputField = document.getElementById("input") as HTMLDivElement;
+        inputField.style.width = this.inputWidth;
+    },
+    methods: {
+        async submit() {
+            this.$router.push({ path: `/provenance/${this.deviceKey}` });
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+
+input {
+    border: 1px solid #CBD5E1;
+    border-radius: 6px;
+    line-height: 48px;
+    margin-right: 15px;
+}
+
+input::placeholder{
+    padding-left: 5px;
+}
+
+form {
+    width: 100%;
+}
+
+</style>

packages/frontend/layouts/learn_more.vue

@@ -20,12 +20,19 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
 <template>
 
     <div class="row" id="learn-more">
-                <h3 class="text-iris"> Interested in learning more? </h3>
-                <p style="font-weight: 400;"> Learn more about Global Open Source Quality Assurance System (GOSQAS) by emailing us at 
-                    <span style="font-weight: 400;" class="text-decoration-underline text-iris"> gosqasystem@gmail.com</span> 
+        <h3 class="text-iris"> Interested in learning more? </h3>
+        <p style="font-weight: 400;"> Learn more about Global Open Source Quality Assurance System (GOSQAS) by emailing us at 
+        <span style="font-weight: 400;" class="text-decoration-underline text-iris"> gosqasystem@gmail.com</span> 
                     or visiting the links below.</p>
-                **buttons go here**  
-            </div>
+        <span>
+            <button-component buttonText="How It Works" color="#322253" margin="0px 20px 20px 0px"
+                backgroundColor="#ffffff00" onclick="window.location.href='how_it_works'" style="font-size:18px"></button-component>                
+            <button-component buttonText="Data & Privacy" color="#322253" margin="0px 20px 0px 0px" onclick="window.location.href='data_privacy'"
+                backgroundColor="#ffffff00" style="font-size:18px"></button-component>                
+            <button-component buttonText="GDT GitHub" color="#322253" onclick="location.href='https://github.com/gosqasorg/asset-provenance-tracking'"
+                backgroundColor="#ffffff00" style="font-size:18px"></button-component>
+        </span>
+    </div>
 
 </template>
 

packages/frontend/pages/about.vue

@@ -1,49 +1,70 @@
-<template>
-    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
-    <div class = "body1">
-        <h1>About Us</h1>
-The Global Open Source Quality Assurance System (GOSQAS) creates
-opportunities for better practices across the diverse humanitarian
-response, open-source hardware, and scientific research
-communities. We employ open-source tools and principles to centralize
-user solutions, despite location or resource environment.
-
-<h4>Our current products</h4>
-
-    As an open-source organization, GOSQAS prioritizes transparency in all
-projects. Because we know that openness and clarity build trust and
-promote wide user adoption, our commitment to Trust Through
-Transparency (TTT) ensures our initiatives are enacted with integrity
-and accountability.
-
-
-<h2>Our Values</h2>
-
-<h5>Data Ownership</h5>
-Users maintain full ownership of the data generated within the GOSQAS flagship product, Global Distributed Tracking. We do not have access to any user data, ensuring complete privacy and independent ownership.
-
-
-<h5>Simplicity & Accessibility</h5>
-All users, especially laypersons in limited resource environments, have access to GOSQAS projects. We believe that open-source projects should be simple to use and understand.
-
-<h5>Open Source</h5>
-Our projects are created for the public good and are available either free of charge or at minimal cost, reinforcing our dedication to community benefit and accessibility.
-<h4>Interested in learning more?</h4>
-Learn more about Global Distributed Tracking by emailing us at gosqasystem@gmail.com or visiting the links below.
+<!-- about.vue
+Copyright (C) 2024 GOSQAS Team
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
+<!--
+    This is the About Us page for GOSQAS
+-->
+<script setup lang="ts">
+    const route = useRoute()
+</script>
 
- <div>
 
-    <button-component class="mt-3 mb-5 textToLinkButton0" buttonText="How It Works" color="#4e3681" backgroundColor="white"/>
-    <button-component class="mt-3 mb-5 textToLinkButton0" buttonText="Data & Privacy" margin="0px 0px 0px 20px" color="#4e3681" backgroundColor="white"/>
-    <button-component class="mt-3 mb-5 textToLinkButton0" buttonText="GDT GitHub" margin="0px 0px 0px 20px" color="#4e3681" backgroundColor="white"/>
+<template>
+    <div class="container-fluid" id="about-container">
+        <h1 class="text-iris">About Us</h1>
+        <div class="row">
+            <p style="font-weight: 400; margin-bottom: 30px;" > The Global Open Source Quality Assurance System (GOSQAS) creates
+                opportunities for better practices across the diverse humanitarian
+                response, open-source hardware, and scientific research
+                communities. We employ open-source tools and principles to centralize
+                user solutions, despite location or resource environment. </p>
+
+            <p> <span class="text-iris" style="font-weight:600">Our current products</span> <br>
+                Global Distributed Tracking - an open-source provenance tracker enabling closed-loop 
+                tracking for products, information, and logistics.</p>
+        </div>
+
+        <div class="row">
+            <h2 class="text-iris" id="subtitle">Our Mission: Trust Through Transparency</h2>
+            <p>As an open-source organization, GOSQAS prioritizes transparency in all projects. Because we know that 
+                openness and clarity build trust and promote wide user adoption, our commitment to Trust Through Transparency 
+                (TTT) ensures our initiatives are enacted with integrity and accountability.</p>
+        </div>
+
+        <div class="row">
+            <h2 class="text-iris" id="subtitle">Our Values</h2>
+            <p> <span class="text-iris" style="font-weight:600">Data Ownership</span> <br>
+                Users maintain full ownership of the data generated within the GOSQAS flagship product, Global Distributed Tracking. 
+                We do not have access to any user data, ensuring complete privacy and independent ownership.</p>
+            <p> <span class="text-iris" style="font-weight:600">Simplicity & Accessibility</span> <br>
+                All users, especially laypersons in limited resource environments, have access to GOSQAS projects. 
+                We believe that open-source projects should be simple to use and understand.</p>
+            <p> <span class="text-iris" style="font-weight:600">Open Source</span> <br>
+                Our projects are created for the public good and are available either free of charge or at minimal cost, 
+                reinforcing our dedication to community benefit and accessibility.</p>
+        </div>
+
+            <Learn_more></Learn_more>
 
     </div>
-    </div>
+
 </template>
 
 
 <script lang="ts">
 import ButtonComponent from '~/components/ButtonComponent.vue';
+import Learn_more from '~/layouts/learn_more.vue';
 
 export default {
     components: {
@@ -52,38 +73,36 @@ export default {
 };
 </script>
 
-<style>
-body {
-    font-family: 'Poppins', sans-serif;
-}
+<style scoped>
 
-div.body1 {
-    margin: 50px;
-}
-.navigationBar {
-    display: flex;
-    align-items: center;
-    padding-top: 7px;
-    background-color: #e6f6ff;
-}
-.logohomepage {
-    width: 60px;
-    margin: 20px 20px 20px 50px;
-}
+/* For screens smaller than 768px */
+@media (max-width: 768px) {
+    #about-container{
+        padding: 20px 20px 40px 20px;
+    }
+    .row{
+        margin-top:32px;
+    }
+    #subtitle{
+        margin-bottom:16px
+    }
 
-button.navigation {
-    background-color: transparent;
-    border-width: 0;
-    text-align: center;
-    margin: 0 10px;
-}
 
-.mainStuff {
-    margin: 50px;
-    margin-top: 30px;
 }
-.buttonSpacing {
-    display: flex;
-    column-gap: 20px;
+
+/* For screens larger than 768px */
+@media (min-width: 768px) {
+    #about-container{
+        padding: 80px 200px 100px 200px;
+    }
+    .row{
+        margin-top:32px;
+    }
+    #subtitle{
+        margin-bottom:20px
+    }
+
 }
+
+
 </style>

packages/frontend/pages/data_privacy.vue

@@ -0,0 +1,71 @@
+<!-- home.vue
+Copyright (C) 2024 GOSQAS Team
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
+<!--
+    This is the home page for GOSQAS
+-->
+
+<script setup lang="ts">
+    const route = useRoute()
+</script>
+
+<template>
+    <div class="container-fluid" id="about-container">
+        <h1 class="text-iris">Data & Privacy</h1>
+        <div class="row"> <p>
+            Global Distributed Tracking encrypts user data and ensures its accessibility only 
+            through the unique device key, which is linked to a QR code. A cryptographic hash function 
+            securely references data via the device key. AES encryption with 128 bit keys is used along 
+            with SHA-256 for cryptographic hashing. This process is performed in a zero-knowledge manner, 
+            ensuring that the Global Distributed Tracking team never stores or knows a user device key. 
+            Only Global Distributed Tracking users and individuals with whom they share a device key have 
+            access to the History Record of a device.
+        </p> </div>
+
+        <learn_more></learn_more>
+
+    </div>
+
+</template>
+
+<script lang="ts">
+import Learn_more from '~/layouts/learn_more.vue';
+</script>
+
+<style scoped>
+/* For screens smaller than 768px */
+@media (max-width: 768px) {
+    #about-container{
+        padding: 20px 20px 40px 20px;
+    }
+    .row{
+        margin-top:20px;
+    }
+
+
+}
+
+/* For screens larger than 768px */
+@media (min-width: 768px) {
+    #about-container{
+        padding: 80px 200px 100px 200px;
+    }
+    .row{
+        margin-top:32px;
+    }
+
+}
+
+</style>
+