MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Merge remote-tracking branch 'origin/Development' into Development

This commit is contained in:
George Kalampokis 2020-05-28 18:40:10 +03:00
parent d0952d91c5 6a5eeec076
commit 48a17b6d55
7 changed files with 360 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
dmp-frontend/src/assets/splash/contact.html Normal file
View File

@ -0,0 +1,127 @@
<!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/footer.css" rel="stylesheet">
<link href="css/section.css" rel="stylesheet">
<link href="css/contact.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="index.html"><img src="assets/img/argos-logo.svg"></a>
<button class="collapse navbar-toggler" 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="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#howItWorks">How it works</a>
<a href="#roadmap">Roadmap</a>
<a href="#faqs">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('resourcesDropdown')" href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#mediaKit">Media kit</a>
<a href="#userGuide">User Guide</a>
<a href="#coBranding">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link active-nav-link" href="contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- Contact -->
<section class="page-section contact" id="contact">
<div class="container">
<div class="col ">
<div class="contact-title">Contact</div>
</div>
<div class="main-contact">
<div class="col contact-subtitle"><div>Contact us to learn more</div></div>
<div class="col required"><div>* Required fields</div></div>
<form class="form">
<!-- Full Name -->
<div class="col d-flex flex-direction-row pb-2"><div class="form-title">Full name</div>&nbsp;<div class="required">*</div></div>
<div class="col pb-4"><input type="text" id="fullName" placeholder="Type your full name"></div>
<!-- E-mail -->
<div class="col d-flex flex-direction-row pb-2"><div class="form-title">E-mail</div>&nbsp;<div class="required">*</div></div>
<div class="col pb-4"><input type="email" id="email" placeholder="Type your E-mail"></div>
<!-- Affiliation -->
<div class="col d-flex flex-direction-row pb-2"><div class="form-title">Affiliation</div>&nbsp;<div class="required">*</div></div>
<div class="col pb-4"><input type="email" id="email" placeholder="Type your E-mail"></div>
<!-- Message -->
<div class="col d-flex flex-direction-row pb-2"><div class="form-title">Message</div>&nbsp;<div class="required">*</div></div>
<div class="col pb-4"><textarea name="message" placeholder="Type your message here..."></textarea>
</form>
</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. 731011.</div>
</div>
<div class="col-auto">
<img src="assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</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="#!"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><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 d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">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 class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</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>

42
dmp-frontend/src/assets/splash/css/contact.css Normal file
View File

@ -0,0 +1,42 @@
.contact-title {
text-align: center;
font-weight: 700;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: -0.95px;
color: #212121;
opacity: 1;
}
.contact-subtitle {
text-align: left;
font-weight: 300;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 1;
}
.main-contact {
padding: 3rem 16.5rem;
}
.required {
color: #E54242;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
.form {
padding-top: 3.5rem;
}
.form-title {
text-align: left;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 1.12rem;
color: #212121;
}

90
dmp-frontend/src/assets/splash/css/navbar.css
View File

@ -49,6 +49,7 @@
flex-basis: 100%;
flex-grow: 1;
align-items: center;
padding-top: 0.5rem;
}
.navbar-toggler {
@ -104,16 +105,31 @@
cursor: default;
}
.active-nav-link {
border-bottom: 4px solid #23BCBA !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0px !important;
}
.nav-item {
margin-bottom: -1px;
}
.nav-link {
width: fit-content;
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
/* .nav-link:hover {
border-bottom: 4px solid #23BCBA !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0px !important;
} */
.nav-link.disabled {
color: #6c757d;
background-color: transparent;
@ -182,11 +198,77 @@
display: none;
}
.dropdown-top {
width: 0px;
border-bottom: 10px solid #23BCBA ;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: 0 20%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 2;
}
.dropdown-options {
background-color: #23BCBA;
border-radius: 5px;
min-width: 160px;
width: 214px;
overflow: auto;
padding: 20px 0px;
}
.dropdown-content a {
text-align: left;
font-weight: 700;
font-family: 'Roboto',sans-serif;
font-size: 0.87rem;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;
padding: 8px 28px;
text-decoration: none;
display: block;
}
.dropdown-options a:hover {
background-color: rgba(255, 255, 255, 0.609) !important;
}
.show {
display: block;
}
@media (max-width: 991.98px) {
.navbar-expand-lg>.container {
padding-right: 0;
padding-left: 0;
}
#nav.navbar-shrink {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #212529;
}
#nav.navbar-shrink .navbar-brand {
font-size: 1.25em;
}
#nav.navbar-shrink .navbar-brand svg {
height: 1.5rem;
}
#nav.navbar-shrink .nav-link, #nav.navbar-shrink button {
color: white;
}
#nav.navbar-shrink .nav-link:hover {
color: #23BCBA;
}
}
@media (min-width: 992px) {
@ -229,7 +311,7 @@
transition: font-size 0.3s ease-in-out;
}
#nav .navbar-brand img {
height: 2rem;
/* height: 2rem; */
transition: height 0.3s ease-in-out;
}
#nav.navbar-shrink {
@ -243,12 +325,12 @@
#nav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img {
height: 1.5rem;
}
#nav.navbar-shrink .nav-link {
#nav.navbar-shrink .nav-link, #nav.navbar-shrink button {
color: white;
}
}
#nav.navbar-shrink .nav-link:hover {
color: #23BCBA;
}
}
#nav .navbar-nav .nav-item {
margin-right: 1rem;
}

6
dmp-frontend/src/assets/splash/css/section.css
View File

@ -195,8 +195,12 @@ 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;
}
}
}

49
dmp-frontend/src/assets/splash/css/styles.css
View File

@ -17,6 +17,40 @@ body {
color: #212529;
}
button:focus {
outline: none !important;
}
input[type=text], select {
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
input[type=email], select {
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
textarea {
width: 100%;
height: 142px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
.bootstrap-overrides a {
text-decoration: none;
background-color: transparent;
@ -136,6 +170,7 @@ hr {
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
z-index: 1;
}
.normal-btn {
@ -150,15 +185,15 @@ hr {
opacity: 1;
}
.margin-right-6 {
margin-left: 5.8rem;
}
.mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.collapse:not(.show) {
display: none;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
@ -175,10 +210,14 @@ hr {
.container {
max-width: 960px;
}
.margin-right-6 {
margin-left: 5.8rem;
}
}
@media (min-width: 1244px) {
.container {
max-width: 1204px !important;
}
}
}

38
dmp-frontend/src/assets/splash/index.html
View File

@ -23,12 +23,32 @@
<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" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars ml-1"></i></button> -->
<div class="navbar-collapse" id="navbarResponsive">
<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" href="#about">ABOUT</a></li>
<li class="nav-item"><a class="nav-link" href="#resources">RESOURCES</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#howItWorks">How it works</a>
<a href="#roadmap">Roadmap</a>
<a href="#faqs">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('resourcesDropdown')" href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#mediaKit">Media kit</a>
<a href="#userGuide">User Guide</a>
<a href="#coBranding">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
@ -333,8 +353,8 @@
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end conditions-policy">Terms and conditions</div>
<div class="col conditions-policy">Cookies policy</div>
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">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>
@ -346,5 +366,9 @@
</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>

27
dmp-frontend/src/assets/splash/js/scripts.js
View File

@ -1,7 +1,7 @@
function toggleClass(ids, option) {
ids.forEach(id => {
var element = document.getElementById(id);
var className = element.getAttribute("class").replace(/ .*/,'');
var className = element.getAttribute("class").replace(/ .*/, '');
console.log(className);
if (id === option) {
element.classList.replace(className, "selected");
@ -23,4 +23,27 @@ function navbarCollapse() {
}
};
navbarCollapse();
window.onscroll = function() { navbarCollapse() };
window.onscroll = function () { navbarCollapse() };
function dropdownToggle(dropdownId) {
this.closeOpenDropdowns();
document.getElementById(dropdownId).classList.toggle("show");
}
function closeOpenDropdowns() {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
this.closeOpenDropdowns();
}
}