MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

start on mobile pages

This commit is contained in:
Alex Martzios 2022-11-28 10:59:14 +02:00
parent 751953e097
commit 289694288b
9 changed files with 1018 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/about/faqs.component.html
View File

@ -1,12 +1,25 @@
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-margin-medium-top uk-margin-medium-bottom">Frequently Asked <br> Questions<span
class="uk-text-primary">.</span></h1>
</div>
</div>
<div class="uk-visible@m">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-margin-medium-top uk-margin-medium-bottom">Frequently Asked <br> Questions<span
class="uk-text-primary">.</span></h1>
</div>
</div>
</div>
<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>
</div>
<div class="uk-hidden@m">
<div class="uk-background-muted">
<div class="uk-container uk-container-large">
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-heading-small uk-margin-medium-top uk-margin-medium-bottom">Frequently Asked <br> Questions<span
class="uk-text-primary">.</span></h1>
</div>
</div>
</div>
<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>
</div>
<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>

877
src/app/about/how-it-works.component.ts
View File

@ -13,304 +13,585 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
@Component({
selector: 'how-it-works',
template: `
<div class="uk-position-relative">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk-scrollspy-class>
<h1 class="uk-margin-medium-top" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-width-1-2@l uk-width-2-3" uk-scrollspy-class>
Join the OpenAIRE Monitor service and we will create for you a dashboard to track, understand and
position your organization's research activities and their impact, discover and evaluate Open Science
trends for your organization and make data-driven decisions. Here's how it works.
</div>
<div class="uk-margin-medium-top uk-margin-small-bottom" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
</div>
</div>
</div>
<div class="uk-padding"></div>
<img class="uk-visible@l uk-position-bottom-right uk-width-1-3@xl uk-width-1-2@l"
src="assets/monitor-assets/about/hero.svg" loading="lazy">
</div>
<div class="uk-section uk-section-small">
<div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null"
[attr.offset]="offset">
<div class="uk-container">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
</div>
<div class="uk-sticky uk-blur-background uk-hidden@l" [attr.uk-sticky]="shouldSticky?'':null">
<div class="uk-container">
<slider-tabs flexPosition="center">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
<li>
<you-we [type]="stakeholderEntities.FUNDER" id="funder">
<ng-container you>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You provide Information about your funded projects and
<a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">join OpenAIRE</a>.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
src="assets/monitor-assets/about/icon1.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You validate the results and approve for them to be shown
on the <a href="https://explore.openaire.eu" target="_blank">Explore</a> portal.</p>
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-medium-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-card-default uk-overflow-hidden uk-position-relative uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">We ingest your project metadata and mine the <a
href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>.
</p>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
funded research activities.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present your dashboard to you.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<you-we [type]="stakeholderEntities.RI" id="ri">
<ng-container you>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having a research initiative
dashboard.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
src="assets/monitor-assets/about/icon1.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You configure the criteria to identify the research
products that you want to be accounted for.</p>
<p>You use the administration dashboard we created for you. If this is not enough, you give us input for
the implementation of a customised full-text mining algorithm.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-medium-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/ri" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">We set up an administration dashboard that you can use
to specify which research products of the <a href="https://graph.openaire.eu" target="_blank"
class="text-graph">OpenAIRE Research Graph</a> are
relevant for you.</p>
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present your dashboard to you.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<!-- RESEARCH INSTITUTION -->
<you-we [type]="stakeholderEntities.ORGANIZATION" id="organizations">
<ng-container you>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having an institutional
dashboard for your institution.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
src="assets/monitor-assets/about/icon1.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You validate and approve the results.</p>
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-medium-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/organization" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Starting from the <a href="https://graph.openaire.eu"
target="_blank" class="text-graph">OpenAIRE
Research Graph</a> we check for existing data for your institution.</p>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
institution’s research activities.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present your dashboard to you.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</ng-container>
</you-we>
</li>
</ul>
</div>
<div class="uk-visible@m">
<div class="uk-position-relative">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk-scrollspy-class>
<h1 class="uk-margin-medium-top" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-width-1-2@l uk-width-2-3" uk-scrollspy-class>
Join the OpenAIRE Monitor service and we will create for you a dashboard to track, understand and
position your organization's research activities and their impact, discover and evaluate Open Science
trends for your organization and make data-driven decisions. Here's how it works.
</div>
<div class="uk-margin-medium-top uk-margin-small-bottom" uk-scrollspy-class>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
</div>
</div>
</div>
<div class="uk-padding"></div>
<img class="uk-position-bottom-right uk-width-1-3@xl uk-width-1-2@l"
src="assets/monitor-assets/about/hero.svg" loading="lazy">
</div>
<div class="uk-section uk-section-small">
<div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null"
[attr.offset]="offset">
<div class="uk-container">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
</div>
<div class="uk-sticky uk-blur-background uk-hidden@l" [attr.uk-sticky]="shouldSticky?'':null">
<div class="uk-container">
<slider-tabs flexPosition="center">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
<li>
<you-we [type]="stakeholderEntities.FUNDER" id="funder">
<ng-container you>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You provide Information about your funded projects and
<a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">join OpenAIRE</a>.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
src="assets/monitor-assets/about/icon1.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You validate the results and approve for them to be shown
on the <a href="https://explore.openaire.eu" target="_blank">Explore</a> portal.</p>
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-medium-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-card-default uk-overflow-hidden uk-position-relative uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">We ingest your project metadata and mine the <a
href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>.
</p>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
funded research activities.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present your dashboard to you.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<you-we [type]="stakeholderEntities.RI" id="ri">
<ng-container you>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having a research initiative
dashboard.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
src="assets/monitor-assets/about/icon1.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You configure the criteria to identify the research
products that you want to be accounted for.</p>
<p>You use the administration dashboard we created for you. If this is not enough, you give us input for
the implementation of a customised full-text mining algorithm.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-medium-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/ri" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">We set up an administration dashboard that you can use
to specify which research products of the <a href="https://graph.openaire.eu" target="_blank"
class="text-graph">OpenAIRE Research Graph</a> are
relevant for you.</p>
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present your dashboard to you.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</ng-container>
</you-we>
</li>
<li>
<!-- RESEARCH INSTITUTION -->
<you-we [type]="stakeholderEntities.ORGANIZATION" id="organizations">
<ng-container you>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1a</span>
<p class="uk-text-large uk-margin-xsmall-top">You state your interest on having an institutional
dashboard for your institution.</p>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left"
src="assets/monitor-assets/about/icon1.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2a</span>
<p class="uk-text-large uk-margin-xsmall-top">You validate and approve the results.</p>
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3a</span>
<p class="uk-text-large uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</p>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-medium-bottom">
<span class="uk-text-primary">Step 4a</span>
<p class="uk-text-large uk-margin-xsmall-top">Customise your dashboard and make your own profile.</p>
<p>Select the <a href="https://monitor.openaire.eu/indicators/organization" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-left" src="assets/monitor-assets/about/icon3.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5a</span>
<p class="uk-text-large uk-margin-xsmall-top">Select your team</p>
<p>And make them collaborators of the service.</p>
</div>
</ng-container>
<ng-container we>
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
<div class="uk-card-body uk-margin-large-bottom">
<span class="uk-text-primary">Step 1b</span>
<p class="uk-text-large uk-margin-xsmall-top">Starting from the <a href="https://graph.openaire.eu"
target="_blank" class="text-graph">OpenAIRE
Research Graph</a> we check for existing data for your institution.</p>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
<img class="uk-width-xsmall uk-position-bottom-right" src="assets/monitor-assets/about/icon2.svg">
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 2b</span>
<p class="uk-text-large uk-margin-xsmall-top">We present the results to you on our Beta portal.</p>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 3b</span>
<p class="uk-text-large uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</p>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
institution’s research activities.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<span class="uk-text-primary">Step 4b</span>
<p class="uk-text-large uk-margin-xsmall-top">We refine until we are happy with the results.</p>
<p>We present your dashboard to you.</p>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<span class="uk-text-primary">Step 5b</span>
<p class="uk-text-large uk-margin-xsmall-top">Notify you about new metrics and indicators</p>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</ng-container>
</you-we>
</li>
</ul>
</div>
</div>
<div class="uk-hidden@m">
<div class="uk-background-muted">
<div class="uk-container uk-container-large">
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-margin-medium-top uk-margin-medium-bottom" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large" uk-scrollspy-class>
Join the OpenAIRE Monitor service and we will create for you a dashboard to track, understand and
position your organization's research activities and their impact, discover and evaluate Open Science
trends for your organization and make data-driven decisions. Here's how it works.
</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>
<div class="uk-position-relative uk-height-medium uk-overflow-hidden">
<img class="uk-width-4-5 uk-position-absolute" src="assets/monitor-assets/about/hero.svg" loading="lazy"
style="bottom: -40px; right: -60px;">
</div>
<!-- style="transform: translate(60px, 40px);" -->
</div>
<div class="uk-section uk-section-large uk-margin-medium-top">
<div class="uk-sticky uk-blur-background" [attr.uk-sticky]="shouldSticky?'':null">
<div class="">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<div class="uk-container uk-container-large">
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
<li id="funder">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Funder?</span>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 1a</span>
<h5 class="uk-margin-xsmall-top">You provide Information about your funded projects and
<a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">join OpenAIRE</a>.</h5>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 1b</span>
<h5 class="uk-margin-xsmall-top">We ingest your project metadata and mine the <a
href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>.
</h5>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 2a</span>
<h5 class="uk-margin-xsmall-top">You validate the results and approve for them to be shown
on the <a href="https://explore.openaire.eu" target="_blank">Explore</a> portal.</h5>
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 2b</span>
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 3a</span>
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</h5>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 3b</span>
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</h5>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
funded research activities.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 4a</span>
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
<p>Select the <a href="https://monitor.openaire.eu/indicators/funder" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 4b</span>
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
<p>We present your dashboard to you.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 5a</span>
<h5 class="uk-margin-xsmall-top">Select your team</h5>
<p>And make them collaborators of the service.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 5b</span>
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</li>
<li id="ri">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Research Initiative?</span>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 1a</span>
<h5 class="uk-margin-xsmall-top">You state your interest on having a research initiative
dashboard.</h5>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 1b</span>
<h5 class="uk-margin-xsmall-top">We set up an administration dashboard that you can use
to specify which research products of the <a href="https://graph.openaire.eu" target="_blank"
class="text-graph">OpenAIRE Research Graph</a> are
relevant for you.</h5>
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 2a</span>
<h5 class="uk-margin-xsmall-top">You configure the criteria to identify the research
products that you want to be accounted for.</h5>
<p>You use the administration dashboard we created for you. If this is not enough, you give us input for
the implementation of a customised full-text mining algorithm.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 2b</span>
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 3a</span>
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</h5>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 3b</span>
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</h5>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
institution’s research activities.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 4a</span>
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
<p>Select the <a href="https://monitor.openaire.eu/indicators/ri" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 4b</span>
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
<p>We present your dashboard to you.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 5a</span>
<h5 class="uk-margin-xsmall-top">Select your team</h5>
<p>And make them collaborators of the service.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 5b</span>
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</li>
<li id="organizations">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Research Institution?</span>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 1a</span>
<h5 class="uk-margin-xsmall-top">You state your interest on having an institutional
dashboard for your institution.</h5>
<p>All information is exchanged under confidential agreements and we only make public what you agree
on.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 1b</span>
<h5 class="uk-margin-xsmall-top">Starting from the <a href="https://graph.openaire.eu"
target="_blank" class="text-graph">OpenAIRE
Research Graph</a> we check for existing data for your institution.</h5>
<p>We infer links to research results: publications, datasets, software, etc.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 2a</span>
<h5 class="uk-margin-xsmall-top">You validate and approve the results.</h5>
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you
see.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 2b</span>
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
your dashboard.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 3a</span>
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
us</h5>
<ul class="uk-list uk-list-disc">
<li>to understand any gaps and deviations within the dashboard</li>
<li>to verify the data integrity</li>
<li>to discuss the addition of any new metrics and indicators that might interest you</li>
</ul>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 3b</span>
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
advanced composite indicators.</h5>
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
institution’s research activities.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 4a</span>
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
<p>Select the <a href="https://monitor.openaire.eu/indicators/organization" target="_blank">metrics</a> of
interest to you and the ones you want to publish, to keep private, or to share just with colleagues.
</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 4b</span>
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
<p>We present your dashboard to you.</p>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
<div>
<span class="uk-text-primary">Step 5a</span>
<h5 class="uk-margin-xsmall-top">Select your team</h5>
<p>And make them collaborators of the service.</p>
</div>
<div class="uk-margin-large-top">
<span class="uk-text-primary">Step 5b</span>
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
`,
styles: [`
.custom-translate-bottom-left {

3
src/app/app.component.ts
View File

@ -64,7 +64,8 @@ import {ResourcesService} from "./openaireLibrary/monitor/services/resources.ser
[properties]="properties"></bottom>
<quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending" [images]="images" [contact]="'Help'"
[organizationTypes]="organizationTypes"></quick-contact>
[organizationTypes]="organizationTypes"
class="uk-visible@m"></quick-contact>
<modal-alert #modal [overflowBody]="false"></modal-alert>
</div>
`

7
src/app/contact/contact.component.html
View File

@ -1,6 +1,6 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div>
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-visible@m uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
@ -10,7 +10,10 @@
<div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
<contact-us [organizationTypes]="organizationTypes" [sending]="sending" [scrollspy]="true"
[contactForm]="contactForm" (sendEmitter)="send($event)">
<h1 page-title class="uk-margin-auto uk-text-center" uk-scrollspy-class>
<h1 page-title class="uk-visible@m uk-margin-auto uk-text-center" uk-scrollspy-class>
Contact us<span class="uk-text-primary">.</span>
</h1>
<h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center" uk-scrollspy-class>
Contact us<span class="uk-text-primary">.</span>
</h1>
<div page-description class="uk-text-large uk-text-center" uk-scrollspy-class>

147
src/app/get-started/get-started.component.html
View File

@ -1,66 +1,117 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-small-top uk-text-center uk-flex uk-flex-middle uk-child-width-1-1 uk-flex-column">
<h1 class="uk-width-3-4@m" uk-scrollspy-class>Get started with <br> OpenAIRE Monitor Dashboard <span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-width-2-3@m" uk-scrollspy-class>
The OpenAIRE Monitor Dashboard is an <span class="uk-text-bold">open tracking platform</span> with all the tools you need
to understand and make insightful decisions — whether you are a <span class="uk-text-bold">funder</span>, a <span class="uk-text-bold">research initiative</span>
or a <span class="uk-text-bold">community</span>, and want to measure or increase uptake
of Open Science, understand your costs, gaps and strengths, or build a community around it.
<div class="uk-visible@m">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-auto uk-width-1-1 uk-width-3-4@l uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-flex uk-flex-center uk-flex-top" uk-scrollspy-class>
<img class="uk-visible@m" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-small-top uk-text-center uk-flex uk-flex-middle uk-child-width-1-1 uk-flex-column">
<h1 class="uk-width-3-4@m" uk-scrollspy-class>Get started with <br> OpenAIRE Monitor Dashboard <span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-width-2-3@m" uk-scrollspy-class>
The OpenAIRE Monitor Dashboard is an <span class="uk-text-bold">open tracking platform</span> with all the tools you need
to understand and make insightful decisions — whether you are a <span class="uk-text-bold">funder</span>, a <span class="uk-text-bold">research initiative</span>
or a <span class="uk-text-bold">community</span>, and want to measure or increase uptake
of Open Science, understand your costs, gaps and strengths, or build a community around it.
</div>
<div class="uk-flex uk-flex-center uk-flex-top" uk-scrollspy-class>
<img class="uk-visible@m" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact <br> you</span>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-auto uk-width-1-1 uk-width-3-4@l uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-flex uk-flex-center uk-flex-top" uk-scrollspy-class>
<img class="uk-visible@m" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
</div>
<div class="uk-flex uk-flex-center uk-flex-top" uk-scrollspy-class>
<img class="uk-visible@m" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact <br> you</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-large">
<div class="uk-padding-small">
<h2 class="uk-h1 uk-text-center">Provide some information<span class="uk-text-primary">.</span></h2>
<div class="uk-flex uk-flex-center uk-width-1-1">
<div class="uk-width-1-2@m uk-width-1-1 uk-margin-large-top">
<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
[contactForm]="contactForm" alignButton="center" (sendEmitter)="send($event)">
</contact-us>
<div class="uk-container uk-container-large uk-section uk-section-large">
<div class="uk-padding-small">
<h2 class="uk-h1 uk-text-center">Provide some information<span class="uk-text-primary">.</span></h2>
<div class="uk-flex uk-flex-center uk-width-1-1">
<div class="uk-width-1-2@m uk-width-1-1 uk-margin-large-top">
<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
[contactForm]="contactForm" alignButton="center" (sendEmitter)="send($event)">
</contact-us>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1">
<div class="uk-padding-small">
<h2>Need more information?<br>View details on the process<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button 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>
<div class="uk-width-expand uk-flex uk-flex-center">
<img src="assets/common-assets/monitor-assets/how/steps.svg" loading="lazy">
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1">
<div class="uk-padding-small">
<h2>Need more information?<br>View details on the process<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
<div class="uk-hidden@m">
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-text-center">
<h1 class="uk-heading-small uk-padding-small uk-padding-remove-vertical" uk-scrollspy-class>Get started with <br>OpenAIRE Monitor Dashboard<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-margin-large-top" uk-scrollspy-class>
The OpenAIRE Monitor Dashboard is an <span class="uk-text-bold">open tracking platform</span> with all the tools you need
to understand and make insightful decisions — whether you are a <span class="uk-text-bold">funder</span>, a <span class="uk-text-bold">research initiative</span>
or a <span class="uk-text-bold">community</span>, and want to measure or increase uptake
of Open Science, understand your costs, gaps and strengths, or build a community around it.
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small">
<icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small">
<icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact you</span>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-large">
<div class="uk-padding-small">
<h2 class="uk-heading-small uk-text-center">Provide some information<span class="uk-text-primary">.</span></h2>
<div class="uk-flex uk-flex-center uk-width-1-1">
<div class="uk-width-1-2@m uk-width-1-1 uk-margin-large-top">
<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
[contactForm]="contactForm" alignButton="center" (sendEmitter)="send($event)">
</contact-us>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-text-center uk-padding uk-padding-remove-vertical">
<h2>Need more information?<br>View details on the process<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-large-top uk-margin-large-bottom"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
</a>
</div>
</div>
<div class="uk-width-expand uk-flex uk-flex-center">
</a>
<img src="assets/common-assets/monitor-assets/how/steps.svg" loading="lazy">
</div>
</div>

318
src/app/home/home.component.html
View File

@ -1,4 +1,4 @@
<div>
<div class="uk-visible@m">
<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>
@ -15,7 +15,7 @@
<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-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">
@ -24,7 +24,6 @@
</div>
</div>
</div>
<ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2 uk-text-primary">
@ -52,7 +51,7 @@
<h2 class="uk-h1 uk-margin-remove-top uk-width-3-5@l">Simplify research monitoring & evaluation<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" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-height-viewport monitor-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid" uk-grid style="height: 100vh;">
<div class="uk-width-expand uk-first-column uk-position-relative uk-height-1-1">
<div class="monitor-dark-logo-background"><!-- uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true"-->
@ -60,17 +59,11 @@
<img class="uk-position-center" 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: 75vh;">
<!-- <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 uk-height-1-1">
<div><!-- uk-sticky="bottom: #js-sticky-parallax-images-all"-->
<div>
<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>
@ -78,19 +71,6 @@
</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 uk-flex-middle">
<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-2-3">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
@ -112,7 +92,7 @@
<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>
[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
@ -157,7 +137,7 @@
<h3 class="uk-margin-small-top">Openness. Usability. Replicability. <span class="uk-text-primary">Trust</span><span class="uk-margin-right">.</span></h3>
<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 uk-button-text"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
routerLinkActive="router-link-active" routerLink="/about/learn-how">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
@ -226,7 +206,7 @@
</div>
</div>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse">
routerLinkActive="router-link-active" routerLink="/browse">
<span class="uk-flex uk-flex-middle">
<span>Browse</span>
</span>
@ -291,14 +271,292 @@
</div>
<div class="uk-text-center uk-width-expand">
<h3>
Need more information or a demo? Get in touch and let us show you in practice how you can apply OpenAIRE Monitor to your needs<span class="uk-text-primary">.</span>
Need more information or a demo? Get in touch and let us show you in practice how you can apply OpenAIRE Monitor 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>
routerLink="/contact-us">Contact us</a></div>
<div class="right uk-position-relative uk-width-1-1 uk-width-1-5@m">
<img class="uk-box-shadow-large" src="assets/monitor-assets/avatar2.jpg">
</div>
</div>
</div>
</div>
<div class="uk-hidden@m">
<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-margin-large-bottom">
<h1 class="uk-heading-small" 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 impact</div>
<div>pathways for your organization.</div>
<div>Make informed decisions.</div>
</div>
</div>
</div>
<div class="uk-container uk-padding-remove-right uk-height-medium uk-child-width-1-2 uk-flex">
<div>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
<div class="uk-position-relative">
<img style="padding: 1px;" src="assets/monitor-assets/home/monitor.jpg">
<img class="uk-position-cover" src="assets/monitor-assets/home/mask.svg">
</div>
</div>
</div>
<ng-template #scrolling_text_mobile let-position_class="position_class">
<div #scrolling_element_mobile [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand.
</h3>
<p class="uk-text-large">Track your organization’s research output in a comprehensive manner. Identify research pathways across key dimensions with granular and timely indicators.</p>
</div>
<div #scrolling_element_mobile [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Enhance</span> open science uptake<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Work with the Open Science expert community for open and transparent metrics. Discover Open Science costs and trends for your organization. See how you fare in the European Open Science Cloud.</p>
</div>
<div #scrolling_element_mobile [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 data into <span class="uk-text-primary">actionable insights.</span>
</h3>
<p class="uk-text-large">See what works and what not, reveal hidden potential. Measure research impact, discover trends, connections and collaborations 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>
<span class="uk-text-large uk-text-primary">Funders. Research Institutions. Research Initiatives.</span>
<h2 class="uk-h1 uk-margin-remove-top">Simplify research monitoring & evaluation<span class="uk-text-primary">.</span></h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div>
<div class="uk-inline" style="height: 50vh;">
<div uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<img src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
</div>
<div class="uk-inline">
<ng-container *ngTemplateOutlet="scrolling_text_mobile; context: {position_class: 'uk-position-top-center'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="uk-section uk-section-large uk-position-relative uk-overflow-hidden">
<img class="uk-position-absolute" src="assets/monitor-assets/home/graph.svg" alt="OpenAIRE Graph" loading="lazy"
style="width: 200px; top: -80px; left: -80px;">
<img class="uk-position-absolute" src="assets/monitor-assets/home/graph.svg" alt="OpenAIRE Graph" loading="lazy"
style="width: 200px; top: 60px; right: -145px; transform: rotate(-25deg)">
<div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-flex uk-flex-column uk-flex-middle">
<h2 class="uk-h1 uk-text-center uk-padding uk-padding-remove-vertical uk-margin-top">
Tap into the OpenAIRE Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-text-center uk-margin-top">
The OpenAIRE Research Graph is one of the largest open scholarly record collections
worldwide, key in fostering Open Science and establishing its practices in the daily
research activities. Conceived as a public and transparent good, populated out of data
sources trusted by scientists, the Graph aims at bringing discovery, monitoring, and
assessment of science back in the hands of the scientific community.
</div>
</div>
<div class="uk-flex uk-flex-center uk-margin-top uk-margin-medium-bottom">
<div class="uk-width-1-1 uk-flex-center uk-grid uk-child-width-1-2" uk-grid uk-height-match="target: .targetName;" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-template #numberCardMobile let-numberSize="numberSize" let-name="name" let-url="url">
<a class="uk-position-relative 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 uk-margin-auto">
<div class="uk-text-center">
<div class="uk-text-background uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
<div class="uk-margin-small-top uk-text-bold targetName">{{name}}</div>
</div>
</div>
</a>
</ng-template>
<div *ngIf="publicationsSize">
<ng-container *ngTemplateOutlet="numberCardMobile; context: {numberSize: publicationsSize, name: openaireEntities.PUBLICATIONS,
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
</ng-container>
</div>
<div *ngIf="datasetsSize">
<ng-container *ngTemplateOutlet="numberCardMobile; context: {numberSize: datasetsSize, name: openaireEntities.DATASETS,
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=datasets'}">
</ng-container>
</div>
<div *ngIf="softwareSize">
<ng-container *ngTemplateOutlet="numberCardMobile; context: {numberSize: softwareSize, name: openaireEntities.SOFTWARE,
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
</ng-container>
</div>
<div *ngIf="otherSize">
<ng-container *ngTemplateOutlet="numberCardMobile; context: {numberSize: otherSize, name: openaireEntities.OTHER,
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
</ng-container>
</div>
<div *ngIf="fundersSize">
<ng-container *ngTemplateOutlet="numberCardMobile; context: {numberSize: fundersSize, name: stakeholderEntities.FUNDERS,
url: 'https://explore.openaire.eu/search/find/projects'}">
</ng-container>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-container uk-container-large uk-background-muted">
<div class="uk-text-center">
<div class="">
<h3 class="uk-heading-small uk-margin-remove">Openness.</h3>
<h3 class="uk-heading-small uk-margin-remove">Usability.</h3>
<h3 class="uk-heading-small uk-margin-remove">Replicability.</h3>
<h3 class="uk-heading-small uk-text-primary uk-margin-remove">Trust.</h3>
<div class="uk-text-large uk-margin-medium-top uk-margin-medium-bottom">Learn and work with a thriving community behind you.</div>
<a class="uk-display-inline-block uk-text-uppercase uk-button 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-margin-xlarge-top" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div class="">
<div uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-auto">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
customClass="uk-text-background"></icon>
</div>
<h5 class="uk-margin-top">Comprehensive outlook</h5>
<div>
Monitor is built on the <a href="https://graph.openaire.eu/" class="text-graph" target="_blank">OpenAIRE Research
Graph</a>. A global linked research graph, a shared data resource from open initiatives around the world. Our indicators cover a wide range of themes from input to impact.
</div>
</div>
<div class="uk-margin-large-top" uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-auto">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
customClass="uk-text-background"></icon>
</div>
<h5 class="uk-margin-top">Showcasing, monitoring, analysis</h5>
<div>
Customize your dashboard by choosing from a variety of pre-defined metrics and select which ones to show publicly, which to invited team members, and which are still work in progress (private).</div>
</div>
<div class="uk-margin-large-top" uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-auto">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
customClass="uk-text-background"></icon>
</div>
<h5 class="uk-margin-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 class="uk-margin-large-top" uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-auto">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
customClass="uk-text-background"></icon>
</div>
<h5 class="uk-margin-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.
</div>
</div>
<div class="uk-margin-large-top" uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-auto">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
customClass="uk-text-background"></icon>
</div>
<h5 class="uk-margin-top">Tailor-made monitoring, responsive to your needs</h5>
<div>
Our experts work with you on demand in one-on-one sessions to provide additional indicators and curate your data.</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom uk-container uk-container-large">
<div class="uk-margin-bottom">
<h2 class="uk-heading-xlarge">{{stakeholderEntities.STAKEHOLDERS}} in action<span class="uk-text-primary">.</span></h2>
<div class="uk-text-large">
View existing {{stakeholderEntities.STAKEHOLDERS | lowercase}} from collaborating organizations. Get a preview on how they work and how our service can be customized to serve you.
</div>
</div>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse">
<span class="uk-flex uk-flex-middle">
<span>Browse</span>
</span>
</a>
</div>
<div class="uk-margin-xlarge-top uk-margin-xlarge-bottom">
<div *ngIf="loading" class="uk-height-large uk-flex uk-flex-column uk-flex-center">
<loading></loading>
</div>
<ng-container *ngIf="!loading">
<div class="uk-sticky uk-background-default" uk-sticky>
<slider-tabs position="horizontal" connect="#tabs-content">
<slider-tab tabId="all" tabTitle="All"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.FUNDERS}}" tabTitle="{{stakeholderEntities.FUNDERS | titlecase}}"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.RIS}}" tabTitle="{{stakeholderEntities.RIS | titlecase}}"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.ORGANIZATIONS}}" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
</slider-tabs>
</div>
<ul id="tabs-content" class="uk-switcher">
<li id="all">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
</li>
<li id="{{stakeholderEntities.FUNDERS}}">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.funders}"></ng-container>
</li>
<li id="{{stakeholderEntities.RIS}}">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides:stakeholdersSlider.ris}"></ng-container>
</li>
<li id="{{stakeholderEntities.ORGANIZATIONS}}">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.organizations}"></ng-container>
</li>
</ul>
</ng-container>
<!-- Slider Template for Tab Content -->
<ng-template #sliderTemplateMobile let-slides="slides">
<div uk-slider class="uk-slider 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="">
<div class="uk-padding-small uk-padding-remove-right">
<div class="uk-flex uk-flex-nowrap" 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 #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
<div class="uk-position-relative">
<h2 class="uk-width-1-2 uk-margin-medium-bottom">
Need more information or a demo?
</h2>
<div class="uk-width-3-4 uk-text-large">
Get in touch and let us show you in practice how you can apply OpenAIRE Monitor to your needs<span class="uk-text-primary">.</span>
</div>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
routerLink="/contact-us">Contact us</a>
<img class="uk-box-shadow-large contact-image contact-image-left" src="assets/monitor-assets/avatar1.jpg">
<img class="uk-box-shadow-large contact-image contact-image-right" src="assets/monitor-assets/avatar2.jpg">
</div>
</div>
</div>

17
src/app/home/home.component.less
View File

@ -50,4 +50,21 @@
transform: matrix(1, 0.07, -0.07, 1, 0, 0);
}
.contact-image {
position: absolute;
width: 66px;
height: 82px;
object-fit: cover;
border-radius: 18px;
transform: matrix(1, 0.07, -0.07, 1, 0, 0);
&.contact-image-left {
top: 0;
right: 25%;
}
&.contact-image-right {
bottom: 50%;
right: 5%;
}
}
}

7
src/app/home/home.module.ts
View File

@ -2,11 +2,8 @@ import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {HomeComponent} from './home.component';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
@ -23,12 +20,14 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
import {SectionScrollModule} from '../openaireLibrary/utils/section-scroll/section-scroll.module';
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {BrowseStakeholderModule} from "../browse-stakeholder/browse-stakeholder.module";
import {SliderTabsModule} from '../openaireLibrary/sharedComponents/tabs/slider-tabs.module';
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule, OtherPortalsModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule, SearchResearchResultsServiceModule,
RefineFieldResultsServiceModule, AlertModalModule, IconsModule, UrlPrefixModule, LogoUrlPipeModule, SectionScrollModule, LoadingModule, BrowseStakeholderModule
RefineFieldResultsServiceModule, AlertModalModule, IconsModule, UrlPrefixModule, LogoUrlPipeModule,
SectionScrollModule, LoadingModule, BrowseStakeholderModule, SliderTabsModule
],
declarations: [
HomeComponent

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 10b386179c34b3e33e4466b17a9622c7c81e67fc
Subproject commit 64b22f3eb54c3cd75a2ff579a810e67bac19b8e8