Skip to content

Commit

Permalink
Adding buttons to pages (#253)
Browse files Browse the repository at this point in the history
* adding buttons, need to fix spacing and links

* added link for how it works

* changed button spacing and added about page styling

* adjusting styles for about page

* data and privacy page

* change learn more to about us

* adding track asset function

* changing button font size
  • Loading branch information
judithweng authored Sep 9, 2024
1 parent d4115f3 commit 6a380bd
Show file tree
Hide file tree
Showing 6 changed files with 292 additions and 76 deletions.
5 changes: 5 additions & 0 deletions packages/frontend/assets/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,11 @@ h1 {
font-weight: 600;
line-height: 72px;
}

h2 {
font-size: 40px;
line-height: 60px;
}


h3 {
Expand Down
70 changes: 70 additions & 0 deletions packages/frontend/components/TrackAsset.vue
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 12 additions & 5 deletions packages/frontend/layouts/learn_more.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
151 changes: 85 additions & 66 deletions packages/frontend/pages/about.vue
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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>
71 changes: 71 additions & 0 deletions packages/frontend/pages/data_privacy.vue
Original file line number Diff line number Diff line change
@@ -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>

Loading

0 comments on commit 6a380bd

Please sign in to comment.