From ea8b42968a87256a022120a1be2eb95f75104674 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Thu, 28 May 2020 19:50:16 +0300 Subject: [PATCH] Adds pages: /about/how-it-works.html and /about/faqs.html --- .../src/assets/splash/about/faqs.html | 172 ++++++++++ .../src/assets/splash/about/how-it-works.html | 176 +++++++++++ .../src/assets/splash/css/section.css | 299 ++++++++++-------- dmp-frontend/src/assets/splash/index.html | 14 +- 4 files changed, 526 insertions(+), 135 deletions(-) create mode 100644 dmp-frontend/src/assets/splash/about/faqs.html create mode 100644 dmp-frontend/src/assets/splash/about/how-it-works.html diff --git a/dmp-frontend/src/assets/splash/about/faqs.html b/dmp-frontend/src/assets/splash/about/faqs.html new file mode 100644 index 000000000..7b6487a4d --- /dev/null +++ b/dmp-frontend/src/assets/splash/about/faqs.html @@ -0,0 +1,172 @@ + + + + + + + Argos + + + + + + + + + + + + + + + + + + + +
+
+
+
About
+
+
+
FAQs
+
+
+
+
+ What is ARGOS? +
+
+
+
+ ARGOS is an open and collaborative platform for creating Data Management Plans according to + funders or institutions’ open science policy requirements. ARGOS technology provides solutions + and workflows that connect the DMP to the actual data where they are stored and link to other + useful information such as publications and funding information, thus enabling the association + between research outputs and processes and leading to the creation of coherent/ complete + research entities. ARGOS is comprised of two major features: the ARGOS template and the Dataset + Description. +
+
+
+
+
+
+ Who is it for? +
+
+ +
+
+
+
+ How can I use it? +
+
+ +
+
+
+ + + + + + + + + + + diff --git a/dmp-frontend/src/assets/splash/about/how-it-works.html b/dmp-frontend/src/assets/splash/about/how-it-works.html new file mode 100644 index 000000000..57053347d --- /dev/null +++ b/dmp-frontend/src/assets/splash/about/how-it-works.html @@ -0,0 +1,176 @@ + + + + + + + Argos + + + + + + + + + + + + + + + + + + +
+
+
+
About
+
+
+
How it works
+
+

+ ARGOS is the joint effort of OpenAIRE and EUDAT to deliver an open platform for Data Management Planning + that addresses FAIR and Open best practices and assumes no barriers for its use and adoption. +

+

+ It is an open extensible service - available as a standalone service (OpenDMP) and as a OpenAIRE service + (ARGOS) + - that simplifies the management, validation, monitoring and maintenance of Data Management Plans. It + allows actors (researchers, managers, supervisors etc) to create actionable DMPs that may be freely + exchanged among infrastructures for carrying out specific aspects of the Data management process in + accordance with the intentions and commitment of Data owners. +

+

+ ARGOS is a service that is integrated within the OpenAIRE platform and is freely offered for use through + the + OpenAIRE Service Catalogue and the EOSC Catalogue. ARGOS enhances the OpenAIRE + Research Graph while at the same time utilises its + underlying services, external sources and semantics to add value to the Dataset Description templates it + produces thus increasing validation of DMPs. DMPs in ARGOS are treated as research outputs that can be + assigned DOIs, licenses and can be re-distributed in a FAIR manner. +

+ +
+

+ The Name: ARGOS is inspired by Greek mythology, both from + Argus Panoptes the hundred-eyed giant and + from Argus (Argonaut) builder of Argos ship, for the many-eyes monitoring sense and for the crafting + and building for endurance concealing long-term goals. +

+
+ +

+ More details on ARGOS as registered in the OpenAIRE services catalogue is available here: + http://catalogue.openaire.eu/service/openaire.argos. ARGOS as a Data Management + Planning tool within + EOSC can be explored in the EOSC catalogue of services here: + https://catalogue.eosc-portal.eu/service/openaire.argos +

+

+ ARGOS is offered as a standalone service, where + users can download the source code and co-brand it. Read more on how to implement that in the + Resources section. +

+
+
+ + + + + + + + + + + diff --git a/dmp-frontend/src/assets/splash/css/section.css b/dmp-frontend/src/assets/splash/css/section.css index 18a52a474..c24b95689 100644 --- a/dmp-frontend/src/assets/splash/css/section.css +++ b/dmp-frontend/src/assets/splash/css/section.css @@ -1,206 +1,249 @@ section.start { - text-align: center; - color: #fff; - background: #23BCBA 0% 0% no-repeat padding-box; + text-align: center; + color: #fff; + background: #23BCBA 0% 0% no-repeat padding-box; } .template-img { - margin-right: 6.8rem; + margin-right: 6.8rem; } .options { - padding-top: 4rem; + padding-top: 4rem; } .option-row { - cursor: pointer; + cursor: pointer; } .option-number { - text-align: left; - font-weight: 700; - font-family: 'Roboto', sans-serif; - font-size: 3.25rem; - line-height: 1; - letter-spacing: 0px; - color: #0E6978; - opacity: 1; - padding: 0rem 1rem; + text-align: left; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 3.25rem; + line-height: 1; + letter-spacing: 0px; + color: #0E6978; + opacity: 1; + padding: 0rem 1rem; } .option-text { - display: flex; - align-items: center; - text-align: left; - font-weight: 300; - font-family: 'Roboto', sans-serif; - font-size: 1.56rem; - line-height: 1.68rem; - letter-spacing: 0px; - color: #FFFFFF; + display: flex; + align-items: center; + text-align: left; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 1.56rem; + line-height: 1.68rem; + letter-spacing: 0px; + color: #FFFFFF; } .selected { - opacity: 1; + opacity: 1; } .not-selected { - opacity: 0.6; + opacity: 0.6; } .features-layout { - display: flex; - justify-content: space-around; - padding-bottom: 4rem; + display: flex; + justify-content: space-around; + padding-bottom: 4rem; } .features-title { - display: flex; - justify-content: center; - font-weight: 700; - font-family: 'Roboto', sans-serif; - font-size: 2.37rem; - padding-bottom: 3rem; - color: #212121; - opacity: 1; + display: flex; + justify-content: center; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + padding-bottom: 3rem; + color: #212121; + opacity: 1; } .feature-subtitle { - text-align: center; - font-weight: 700; - font-family: 'Roboto', sans-serif; - font-size: 1.87rem; - padding: 1.5rem 0rem; - color: #000000; - opacity: 0.8; + text-align: center; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 1.87rem; + padding: 1.5rem 0rem; + color: #000000; + opacity: 0.8; } .feature-img { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .feature-desc { - text-align: center; - font-size: 1rem; - color: #292747; - opacity: 1; - max-width: 429px; + text-align: center; + font-size: 1rem; + color: #292747; + opacity: 1; + max-width: 429px; } section.benefits { - background: #F3F3F3 0% 0% no-repeat padding-box; - opacity: 1; + background: #F3F3F3 0% 0% no-repeat padding-box; + opacity: 1; } -.benefits-title-1 { - text-align: center; - font-weight: 300; - font-family: 'Roboto', sans-serif; - font-size: 2.37rem; - color: #212121; +.title-1 { + text-align: center; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + color: #212121; } -.benefits-title-2 { - text-align: center; - font-weight: 700; - font-family: 'Roboto', sans-serif; - font-size: 2.37rem; - color: #212121; +.title-2 { + text-align: center; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + color: #212121; +} + +.title-3 { + text-align: left; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + color: #212121; } .benefit-card { - width: 370px; - height: 378px; - background: #FFFFFF 0% 0% no-repeat padding-box; - box-shadow: 0px 6px 15px #0000001A; - border-radius: 36px; - opacity: 1; + width: 370px; + height: 378px; + background: #FFFFFF 0% 0% no-repeat padding-box; + box-shadow: 0px 6px 15px #0000001A; + border-radius: 36px; + opacity: 1; } .benefit-card-title { - text-align: center; - font-weight: 300; - font-family: 'Roboto', sans-serif; - font-size: 1.68rem; - color: #292747; - opacity: 1; - padding: 2.81rem 0rem 1.5rem 0rem; + text-align: center; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 1.68rem; + color: #292747; + opacity: 1; + padding: 2.81rem 0rem 1.5rem 0rem; } .benefit-desc { - text-align: center; - color: #292747; - max-width: 226px; + text-align: center; + color: #292747; + max-width: 226px; } .benefit-desc-1 { - text-align: center; - color: #292747; - max-width: 250px; + text-align: center; + color: #292747; + max-width: 250px; } .benefit-card hr { - width: 286px; - border: 1px solid #DBDBDB; - opacity: 1; - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + width: 286px; + border: 1px solid #DBDBDB; + opacity: 1; + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; } .benefit-card-subtitle { - text-align: left; - font-weight: 400; - font-family: 'Roboto', sans-serif; - font-size: 0.87rem; - color: #292747; - padding-left: 10px; + text-align: left; + font-weight: 400; + font-family: 'Roboto', sans-serif; + font-size: 0.87rem; + color: #292747; + padding-left: 10px; } .benefit-card-sub-color { - text-align: left; - font-weight: 400; - font-family: 'Roboto', sans-serif; - font-size: 0.87rem; - color: #008887; + text-align: left; + font-weight: 400; + font-family: 'Roboto', sans-serif; + font-size: 0.87rem; + color: #008887; } .benefit-ic { - margin-left: 40px !important; - margin-bottom: .8rem; + margin-left: 40px !important; + margin-bottom: .8rem; } .branding-logo { - display: flex; - align-items: flex-end; + display: flex; + align-items: flex-end; } .co-branding-text { - text-align: left; - font-family: 'Roboto',sans-serif; - font-weight: 300; - font-size: 1rem; - color: #212121; - opacity: 0.81; - max-width: 357px; - padding-top: 1.5rem; + text-align: left; + font-family: 'Roboto', sans-serif; + font-weight: 300; + font-size: 1rem; + color: #212121; + opacity: 0.81; + max-width: 357px; + padding-top: 1.5rem; +} + +.media-kit-logo-title, .moo-card-logo-title { + text-align: left; + font-weight: 300; + font-family: 'Roboto',sans-serif; + font-size: 1.25rem; + letter-spacing: 0px; + color: #212121; + opacity: 0.81; +} + +.co-branding p, .user-guide p, .media-kit p { + text-align: left; + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 0.87rem; + line-height: 1.6rem; + letter-spacing: 0px; + color: #212121; + opacity: 0.8; + padding: 2rem 0rem; +} + +section.media-kit-logo { + background: #F3F3F3; + opacity: 1; } @media (min-width: 768px) { - section.start, section.features, section.co-branding, .footer { - padding-top: 6rem; - padding-bottom: 5.4rem; - } - section.benefits { - padding-top: 3.8rem; - padding-bottom: 5.4rem; - } - section.contact { - padding-top: 2.8rem; - padding-bottom: 0.5rem; - } - .footer { - padding-top: 4.8rem; - padding-bottom: 2rem; - } + section.start, section.features, section.co-branding, section.user-guide, section.media-kit .footer { + padding-top: 6rem; + padding-bottom: 5.4rem; + } + section.benefits { + padding-top: 3.8rem; + padding-bottom: 5.4rem; + } + section.contact { + padding-top: 2.8rem; + padding-bottom: 0.5rem; + } + section.how-it-works { + padding-top: 2.8rem; + padding-bottom: 3.8rem; + } + section.media-kit-logo, section.moo-cards { + padding-top: 4rem; + padding-bottom: 5rem; + } + .footer { + padding-top: 4.8rem; + padding-bottom: 2rem; + } } diff --git a/dmp-frontend/src/assets/splash/index.html b/dmp-frontend/src/assets/splash/index.html index bb74976e8..d5d4ce840 100644 --- a/dmp-frontend/src/assets/splash/index.html +++ b/dmp-frontend/src/assets/splash/index.html @@ -31,9 +31,9 @@
- How it works - Roadmap - faqs + How it works + Roadmap + faqs
@@ -42,9 +42,9 @@
- Media kit - User Guide - Co-branding + Media kit + User Guide + Co-branding
@@ -214,7 +214,7 @@
- Who Benefits + Who Benefits