274 lines
16 KiB
HTML
274 lines
16 KiB
HTML
<div>
|
||
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden home-background">
|
||
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||
<div class="uk-grid uk-flex-middle" uk-grid>
|
||
<div class="uk-width-3-5 uk-margin-large-bottom">
|
||
<h1 class="uk-heading-large" uk-scrollspy-class>
|
||
A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
|
||
</h1>
|
||
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
|
||
<div>Discover, track and understand trends and indicators <br> on Open Science for your organization.</div>
|
||
<div>Make informed decisions.</div>
|
||
</div>
|
||
<div class="uk-margin-medium-top" uk-scrollspy-class>
|
||
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
|
||
</div>
|
||
</div>
|
||
<div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
|
||
<div class="uk-position-relative">
|
||
<img style="padding: 1px" src="assets/monitor-assets/home/monitor.jpg" uk-parallax="y: 300">
|
||
<img class="uk-position-top-left" src="assets/monitor-assets/home/mask.svg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ng-template #scrolling_text let-position_class="position_class">
|
||
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
|
||
<h3 class="uk-h2">
|
||
Get a <span class="uk-text-primary">360° view <br> of research results.</span>
|
||
</h3>
|
||
<p class="uk-text-large">Track and discover your organization’s research output. <br> Use the <a href="https://graph.openaire.eu/" target="_blank">OpenAIRE Research
|
||
Graph</a> to view your publications-data-code <br> and how they interconnect.</p>
|
||
</div>
|
||
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
|
||
<h3 class="uk-h2">
|
||
Monitor <span class="uk-text-primary">Open Science <br></span> compliance<span
|
||
class="uk-text-primary">.</span>
|
||
</h3>
|
||
<p class="uk-text-large"> Work with the Open Science expert community <br> for open and transparent metrics.
|
||
Discover Open <br> Science trends for your organization. See how <br> you fare in European Open Science Cloud.</p>
|
||
</div>
|
||
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
|
||
<h3 class="uk-h2">
|
||
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
|
||
class="uk-text-primary">.</span>
|
||
</h3>
|
||
<p class="uk-text-large">Understand your needs for your community. Measure impact, <br> discover trends, connections and
|
||
collaborations <br> to improve and optimize your future actions.</p>
|
||
</div>
|
||
</ng-template>
|
||
|
||
<div class="uk-section uk-section-secondary">
|
||
<div class="uk-container uk-container-large">
|
||
<div class="uk-width-1-1">
|
||
<span class="uk-h6 uk-text-primary">Funders. Universities. Research Institutions. Communities.</span>
|
||
<h2 class="uk-h1 uk-margin-remove-top">Simplify Open Science <br>tracking & monitoring<span
|
||
class="uk-text-primary">.</span></h2>
|
||
</div>
|
||
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
|
||
<div class="uk-visible@m uk-height-viewport monitor-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
|
||
<div uk-grid>
|
||
<div class="uk-width-expand uk-first-column">
|
||
<div class="monitor-dark-logo-background"><!-- uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true"-->
|
||
<div uk-parallax="target: #js-sticky-parallax-images-all;"> <!-- y: 55vh, 45vh; -->
|
||
<img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy"
|
||
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
|
||
style="height: 70vh">
|
||
|
||
<!-- <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" width="1800" height="1200" alt=""-->
|
||
<!-- uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">-->
|
||
<!-- <img class="uk-position-center-left" src="assets/monitor-assets/home/monitor.jpg" width="1800" height="1200" alt=""-->
|
||
<!-- uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">-->
|
||
<!-- <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" width="1800" height="1200" alt=""-->
|
||
<!-- uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing:0">-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="uk-inline uk-width-expand">
|
||
<div class=""><!-- uk-sticky="bottom: #js-sticky-parallax-images-all"-->
|
||
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
||
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="uk-hidden@m uk-height-viewport monitor-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
|
||
<div class="uk-flex uk-flex-column">
|
||
<div class="monitor-dark-logo-background uk-inline uk-width-1-1" style="height: 50vh;">
|
||
<div class="uk-position-center uk-height-1-1" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
|
||
<img class="uk-height-1-1" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="uk-inline uk-width-expand">
|
||
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
|
||
<h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
|
||
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
|
||
</h2>
|
||
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
|
||
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
|
||
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
|
||
<a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
|
||
[href]="url" target="_blank" uk-scrollspy-class>
|
||
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
|
||
<div class="uk-text-center">
|
||
<div
|
||
class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
|
||
<div class="uk-margin-small-top uk-text-large">{{name}}</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</ng-template>
|
||
<div *ngIf="publicationsSize">
|
||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize, name: 'Publications',
|
||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
|
||
</ng-container>
|
||
</div>
|
||
<div *ngIf="datasetsSize">
|
||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets',
|
||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}">
|
||
</ng-container>
|
||
</div>
|
||
<div *ngIf="softwareSize">
|
||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software',
|
||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
|
||
</ng-container>
|
||
</div>
|
||
<div *ngIf="otherSize">
|
||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other',
|
||
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
|
||
</ng-container>
|
||
</div>
|
||
<div *ngIf="fundersSize">
|
||
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders',
|
||
url: 'https://explore.openaire.eu/search/find/projects'}">
|
||
</ng-container>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
|
||
<div class="uk-grid uk-grid-large" uk-grid>
|
||
<div class="uk-width-1-3@m uk-width-1-1">
|
||
<h2 class="uk-margin-remove-top">Open data. <br> Open <br> methodologies<span
|
||
class="uk-text-primary">.</span></h2>
|
||
<div class="uk-text-large uk-margin-bottom">Learn and work with a thriving community behind you.</div>
|
||
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
|
||
routerLinkActive="router-link-active" routerLink="/about/learn-how">
|
||
<span class="uk-flex uk-flex-middle">
|
||
<span>Learn More</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="uk-width-expand uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250" uk-grid>
|
||
<div uk-scrollspy-class>
|
||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
|
||
customClass="uk-text-primary-gradient"></icon>
|
||
</div>
|
||
<h5 class="uk-margin-remove-top">Global outlook</h5>
|
||
<div>
|
||
Monitor is built on the <a href="https://graph.openaire.eu/" class="graph" target="_blank">OpenAIRE Research
|
||
Graph</a>. A comprehensive and global linked research graph, shared data resource from open initiatives around the world.
|
||
</div>
|
||
</div>
|
||
<div uk-scrollspy-class>
|
||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
|
||
customClass="uk-text-primary-gradient"></icon>
|
||
</div>
|
||
<h5 class="uk-margin-remove-top">Minimum effort to join</h5>
|
||
<div>
|
||
You only share some information with us to include in our backend aggregating and data mining, and we deliver a view of your world. As you see fit.
|
||
</div>
|
||
</div>
|
||
<div uk-scrollspy-class>
|
||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
|
||
customClass="uk-text-primary-gradient"></icon>
|
||
</div>
|
||
<h5 class="uk-margin-remove-top">Transparent methodology</h5>
|
||
<div>
|
||
We base our service on Open Science principles. We rely on open data sources, and document our algorithms for every metric and indicator we publish.
|
||
</div>
|
||
</div>
|
||
<div uk-scrollspy-class>
|
||
<div class="uk-icon-bg-shadow uk-margin-bottom">
|
||
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
|
||
customClass="uk-text-primary-gradient"></icon>
|
||
</div>
|
||
<h5 class="uk-margin-remove-top">Responsive to your needs</h5>
|
||
<div>
|
||
Choose from a variety of pre-defined metrics on compliance, trends, distribution, costs.
|
||
Select how to visualize them and who to share with. Use our advanced tools to add your own metrics.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
|
||
<h2 class="uk-h1">Dashboards <br> in action<span class="uk-text-primary">.</span></h2>
|
||
<div class="uk-text-large uk-margin-bottom">
|
||
View existing dashboards from collaborating organizations. <br> Get a preview on how they work and how our service <br> can be customized to serve you.
|
||
</div>
|
||
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
|
||
routerLinkActive="router-link-active" routerLink="/browse">
|
||
<span class="uk-flex uk-flex-middle">
|
||
<span>Browse</span>
|
||
</span>
|
||
</a>
|
||
<div class="uk-margin-large-top">
|
||
<div *ngIf="loading" class="uk-height-large uk-flex uk-flex-column uk-flex-center">
|
||
<loading></loading>
|
||
</div>
|
||
<!-- Tabs -->
|
||
<my-tabs *ngIf="!loading">
|
||
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
|
||
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
|
||
</my-tab>
|
||
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
|
||
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.funders}"></ng-container>
|
||
</my-tab>
|
||
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'ris'">
|
||
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides:stakeholdersSlider.ris}"></ng-container>
|
||
</my-tab>
|
||
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'organizations'">
|
||
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.organizations}"></ng-container>
|
||
</my-tab>
|
||
</my-tabs>
|
||
<!-- Slider Template for Tab Content -->
|
||
<ng-template #sliderTemplate let-slides="slides">
|
||
<div uk-slider class="uk-margin-medium-top">
|
||
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
|
||
<!-- Margin right -->
|
||
<li *ngFor="let slide of slides; let i=index" class="uk-width-1-1">
|
||
<div class="uk-padding-small">
|
||
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
|
||
<ng-container *ngIf="i === 0">
|
||
<div *ngFor="let stakeholder of slide" uk-scrollspy-class>
|
||
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
|
||
</div>
|
||
</ng-container>
|
||
<ng-container *ngIf="i !== 0">
|
||
<div *ngFor="let stakeholder of slide">
|
||
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
|
||
</div>
|
||
</ng-container>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
|
||
</div>
|
||
</ng-template>
|
||
</div>
|
||
</div>
|
||
<div id="last-section" class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
|
||
<h3>
|
||
Need more information or a demo? <br> Get in touch and let us show you in practice <br> how you can apply to your needs<span class="uk-text-primary">.</span>
|
||
</h3>
|
||
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
|
||
routerLink="/contact-us">Contact us</a>
|
||
</div>
|
||
</div>
|