You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
argos/dmp-frontend/src/assets/splash/index.html

396 lines
22 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argos</title>
<link rel="icon" type="image/x-icon" href="assets/img/fav-icon.png">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- Core theme CSS -->
<link href="css/styles.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/section.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="#page-top"><img src="assets/img/argos-logo.svg"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars ml-1"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="about/faqs.html">faqs</a>
<a href="about/contributors.html">Contributors</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn" href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="resources/media-kit.html">Media kit</a>
<a href="resources/user-guide.html">User Guide</a>
<a href="resources/co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>
<li class="nav-item"><li class="nav-item"><a class="nav-link" href="/login">SIGN IN</a></li></li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="head">
<div class="container">
<div class="row">
<div class="col-auto margin-right-6">
<h1>Plan and follow your data</h1>
<div class="head-subtitles">
<div class="d-flex flex-direction-row">
<h4>Create</h4>&nbsp;<h6>machine actionable DMPs.</h6>
</div>
<div class="d-flex flex-direction-row">
<h4>Configure</h4>&nbsp;<h6>to best fit your discipline.</h6>
</div>
<div class="d-flex flex-direction-row">
<h4>Link</h4>&nbsp;<h6>to EOSC components out of the box.</h6>
</div>
<div class="d-flex flex-direction-row">
<h4>Share</h4>&nbsp;<h6>easily in your repository.</h6>
</div>
</div>
<div class="head-subtitle">
<p class="body-text">Bring your Data Management Plans closer to where data are generated,
analysed and stored.</p>
</div>
<div class="head-start-dmp">
<a href="/home">
<button type="button" class="normal-btn">Start your DMP</button>
</a>
</div>
</div>
<div class="col-auto ml-auto">
<img src="assets/img/1.png" width="363" height="330">
</div>
</div>
</div>
</header>
<!-- Start -->
<section class="page-section start" id="start">
<div class="container">
<div class="row template-img">
<div class="col-auto margin-right-6">
<p class="title-1 mb-0">Start your</p>
<div class="d-flex flex-direction-row">
<p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p>
</div>
<div class="options">
<div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1')">
<p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2')">
<p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3')">
<p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p>
</div>
</div>
</div>
<div class="col-auto ml-auto template-img">
<img id="template-preview" src="assets/img/template-preview-1.svg" width="472" height="519">
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="page-section features" id="features">
<div class="container">
<div class="row features-title">Features</div>
<div class="row features-layout">
<div class="col">
<div class="row feature-img">
<div class="col-auto"><img src="assets/img/Asset 15.svg" width="84" height="107"></div>
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Produce DMP outputs</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Close the data management planning lifecycle by publishing your DMPs in a FAIR manner.
Assign licenses, PIDs and publish DMPs in a repository of your choice.
</div>
</div>
</div>
<div class="col">
<div class="row feature-img">
<img src="assets/img/Asset 14.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Update DMPs</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Treat DMPs as living documents. Secure their provenance and continue work in new versions
(new DOIs assigned).
</div>
</div>
</div>
</div>
<div class="row features-layout">
<div class="col">
<div class="row feature-img">
<img src="assets/img/Asset 12.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Re-use datasets & templates</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Identify datasets to be re-used in your DMP. Copy or clone dataset descriptions to other
DMPs.
</div>
</div>
</div>
<div class="col">
<div class="row feature-img">
<img src="assets/img/Asset 10.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Import and Export DMPs</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Import a .json file of your DMP and continue work in ARGOS. Export DMPs in machine readable
(.xml) and machine-actionable (.json) formats.
</div>
</div>
</div>
</div>
<div class="row features-layout">
<div class="col">
<div class="row feature-img">
<img src="assets/img/Asset 11.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Customise dataset descriptions</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Differentiate DMPs from dataset descriptions. Describe your datasets with more than one
template and tailor its content to your specific needs.
</div>
</div>
</div>
<div class="col">
<div class="row feature-img">
<img src="assets/img/Asset 13.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Connect with OpenAIRE & EOSC</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Use OpenAIRE and EOSC underlying services, sources and semantics to ease completion of DMPs
and trace the quality of your research.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Benefits -->
<section class="page-section benefits" id="benefits">
<div class="container">
<div class="row justify-content-around">
<div class="col"></div>
<div class="col d-flex align-items-center justify-content-center flex-direction-row">
<span class="section-title-1">Who</span>&nbsp;<span class="section-title-2">Benefits</span>
</div>
<div class="col">
<div class="row justify-content-center">
<div class="col-auto">
<img src="assets/img/2 - Copy.png" width="116" height="139">
</div>
</div>
</div>
</div>
<div class="row justify-content-around">
<div class="col-auto">
<div class="benefit-card">
<div class="row justify-content-center">
<span class="benefit-card-title">Funders</span>
</div>
<div class="row justify-content-center">
<span class="benefit-desc caption">Include DMPs in data management policies.</span>
</div>
<hr>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Add, update and modify DMP templates</span>
</div>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Enrich your organisations research graph</span>
</div>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Link argos to your</span>&nbsp;
<span class="benefit-card-sub-color"><a href="https://monitor.openaire.eu/">Monitoring
Dashboard</a></span>
</div>
</div>
</div>
<div class="col-auto">
<div class="benefit-card">
<div class="row justify-content-center">
<span class="benefit-card-title">Researchers</span>
</div>
<div class="row justify-content-center">
<span class="benefit-desc-1 caption">Become Research Data Management literate and lead Open
Science cultural change/ practices.</span>
</div>
<hr>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Comply with DMP requirements</span>
</div>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Learn and apply best practices for DMPs</span>
</div>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Co-edit DMPs and manage workload</span>
</div>
</div>
</div>
<div class="col-auto">
<div class="benefit-card">
<div class="row justify-content-center">
<span class="benefit-card-title">Institutions</span>
</div>
<div class="row justify-content-center">
<span class="benefit-desc caption">Support Open and FAIR Data Management Planning.</span>
</div>
<hr>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Add, update and modify DMP templates</span>
</div>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Connect your organisations services</span>
</div>
<div class="row benefit-ic">
<img src="assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Ensure research integrity and excellence</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Co-branding -->
<section class="page-section co-branding" id="co-branding">
<div class="container">
<div class="row justify-content-around">
<div class="col-auto">
<img class="mirror" src="assets/img/3.png" width="311" height="309">
</div>
<div class="col-auto">
<div class="row">
<div class="col-auto branding-logo pl-0">
<img src="assets/img/argos-logo - Copy.svg" width="91" height="35">
</div>
<span class="title-3">co-branding</span>
</div>
<div class="row">
<span class="co-branding-text">
ARGOS is based on OpenDMP, an open source software that can be deployed by third parties.
ARGOS development team welcomes contributions by the international community to strengthen
functionalities and further align with global fora.
</span>
</div>
<div class="row">
<div class="head-start-dmp">
<a href="resources/co-branding.html">
<button type="button" class="normal-btn">Learn more</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020
Research and Innovation programme under Grant Agreement No. 777541.</div>
</div>
<div class="col-auto">
<a href="https://www.openaire.eu/">
<img src="assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</a>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="https://www.facebook.com/groups/openaire/"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="https://twitter.com/OpenAIRE_eu"><i class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="https://www.linkedin.com/groups/3893548/"><i class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="https://www.youtube.com/channel/UChFYqizc-S6asNjQSoWuwjw"><i class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="https://www.openaire.eu/newsletter/listing"><span class="newsletter">Newsletter</span><i class="fas fa-lg fa-wifi wifi-rotate"></i></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col-auto conditions-policy" href="/opensource-licences">Οpensource licences</a>
<a class="col-auto conditions-policy" href="/terms-and-conditions">Terms and conditions</a>
<a class="col-auto conditions-policy" href="/cookies-policy">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under
</div>&nbsp;
<div><u><a class="licence" href="https://creativecommons.org/licenses/by/4.0/">CC ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</a></u></div>
</div>
</div>
</footer>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>