graph/src/app/home/home.component.html

424 lines
24 KiB
HTML

<div class="uk-margin-large-bottom">
<div class="uk-container uk-container-large uk-section">
<h1>Open. Transparent. Interconnected.</h1>
<div class="uk-grid uk-grid-small uk-flex uk-margin-medium-top uk-child-width-1-2@m uk-flex-bottom" uk-grid>
<div>
<p>
OpenAIRE Research Graph is an open resource that aggregates a <span class="portal-color">collection of research data properties</span>
(metadata, links) available within the OpenAIRE Open Science infrastructure for funders, organizations,
researchers, research communities and publishers to interlink information by using a semantic graph database
approach.
</p>
<a class="uk-button portal-button uk-margin-medium-top" routerLink="/about">Learn more</a>
</div>
<div class="uk-flex uk-flex-right uk-padding-large uk-padding-remove-bottom">
<img src="assets/graph-assets/home/1.svg" style="transform: rotateY(180deg);" class="uk-width-4-5@m">
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom">
<div class="uk-container uk-container-large uk-section">
<h2 class="uk-text-center"><span class="portal-color">How</span> it works</h2>
<div class="how-first uk-padding uk-margin-large-top">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div
class="uk-padding-large uk-padding-remove-vertical uk-flex-last@m uk-margin-large-bottom uk-margin-medium-top">
<h3 class="uk-text-bold uk-margin-large-left uk-text-capitalize">360° view on linked open science<span
class="portal-color">.</span></h3>
</div>
<div>
<img src="assets/graph-assets/home/2.png">
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="how-second uk-padding uk-margin-large-top">
<div class="uk-grid" uk-grid>
<div class="uk-margin-large-top uk-margin-large-bottom uk-width-expand">
<h3 class="uk-text-bold uk-margin-large-left uk-text-capitalize">From open and authoritative sources around
the globe<span class="portal-color">.</span></h3>
</div>
<div class="uk-width-3-5@m uk-margin-bottom">
<img src="assets/graph-assets/home/3.png">
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom">
<div class="uk-section uk-container uk-container-large">
<h2 class="uk-text-center uk-margin-remove-bottom"><span class="portal-color">Why</span> OpenAIRE Research Graph
</h2>
<h6 class="uk-text-center uk-text-normal uk-margin-small-top">Unlock the power of open science data</h6>
<div class="uk-padding uk-margin-medium-top">
<div class="uk-grid why uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-width-3-4@m">
<h6 class="portal-color">Open and transparent</h6>
<div class="uk-text-light">
It is available for download and re-use as CC-BY (due to some input sources whose
license is CC-BY); parts of the graphs can be re-used as CC-0; provenance is tracked at the level of the
records and, when these are the result of full-text mining, of the properties (provenance also includes
an indicator of trust, in the range [0..1]).
</div>
</div>
</div>
<div class="uk-flex uk-flex-right">
<div class="uk-width-3-4@m">
<h6 class="portal-color">Decentralized and interoperable</h6>
<div class="uk-text-light">
Metadata and links are collected from data
sources, such as institutional/data/software repositories, publishers, registries, and re-distributed to
such sources via brokering services.
</div>
</div>
</div>
<div>
<div class="uk-hidden@m">
<h6 class="portal-color">Intelligent linking</h6>
<div class="uk-text-light">
Abstracts, full-texts of Open Access publications and links
are processed by several algorithms that infer new links and enrich the graph.
</div>
</div>
<div class="uk-padding-large uk-visible@m">
<h6 class="portal-color">Intelligent linking</h6>
<div class="uk-text-light">
Abstracts, full-texts of Open Access publications and links
are processed by several algorithms that infer new links and enrich the graph.
</div>
</div>
</div>
<div class="uk-flex uk-flex-right">
<div class="uk-hidden@m">
<h6 class="portal-color">Embedded metrics</h6>
<div class="uk-text-light">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</div>
</div>
<div class="uk-width-3-4 uk-visible@m uk-padding uk-padding-remove-right">
<h6 class="portal-color">Embedded metrics</h6>
<div class="uk-text-light">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom">
<div class="services">
<div class="uk-section uk-container uk-container-large">
<h2>Products & Services</h2>
<div class="service-slide uk-position-relative">
<div *ngFor="let portal of portals; let i=index;" [class.fade-out]="i !== state" [class.fade-in]="i === state"
class="uk-margin-medium-top uk-grid uk-grid-large uk-child-width-1-2@m uk-position-center" uk-grid>
<div class="uk-flex-last@m">
<div class="uk-width-4-5 uk-padding uk-padding-remove-right">
<img [src]="'assets/common-assets/logo-large-' + portal.name + '.png'">
<h6 class="uk-margin-medium-top uk-text-normal">{{portal.text}}</h6>
<div class="uk-margin-medium-top">
<a class="uk-button portal-button" [href]="'https://' + portal.name + '.openaire.eu'" target="_blank">
Learn More
<span class="space">
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z"
fill="#fff" id="arrow-down-left2" transform="translate(7.071 19.799) rotate(-135)"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
<div>
<img class="uk-box-shadow-medium" [src]="'assets/graph-assets/home/services/' + portal.name + '.jpg'">
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-section uk-padding-remove-top uk-margin-medium-top">
<div class="uk-grid uk-child-width-1-3 uk-child-width-1-5@m uk-flex uk-flex-middle services-list" uk-grid>
<div *ngFor="let portal of portals; let i=index;">
<a [class.uk-active]="state == i" (click)="changeSlide(i)"><img
[src]="'assets/common-assets/logo-large-' + portal.name + '.png'"></a>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom">
<div class="uk-container uk-container-large uk-section">
<h2 class="uk-text-center">Who <span class="portal-color">Benefits</span></h2>
<div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-margin-large-top" uk-grid uk-height-match=".target">
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="target">
<h4 class="uk-text-center uk-margin-remove">Researchers</h4>
<h6 class="uk-text-center uk-padding uk-margin-remove uk-text-light">Intelligent and contextual discovery
of research</h6>
</div>
<hr>
<ul class="uk-list target">
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Open Access versions
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Lorem ipsum dolor sit amet
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Lorem ipsum dolor sit amet
</li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="target">
<h4 class="uk-text-center uk-margin-remove">Service Providers</h4>
<h6 class="uk-text-center uk-padding uk-margin-remove uk-text-light">Lorem ipsum dolor sit amet</h6>
</div>
<hr>
<ul class="uk-list target">
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Lorem ipsum dolor sit amet
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Lorem ipsum dolor sit amet
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Lorem ipsum dolor sit amet
</li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="target">
<h4 class="uk-text-center uk-margin-remove">Research managers & Policy makers</h4>
<h6 class="uk-text-center uk-padding uk-margin-remove uk-text-light">Used in metrics</h6>
</div>
<hr>
<ul class="uk-list target">
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Open Science trends
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Compliance to funder mandates
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Research Impact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom numbers">
<div class="uk-section">
<h2 class="uk-text-center">
We believe in <span class="uk-text-bold">Numbers</span>
</h2>
<div class="uk-margin-large-top uk-container uk-margin-bottom uk-text-center">
<div class="uk-grid uk-child-width-1-3@m">
<div *ngIf="fundersSize">
<h3 class="uk-text-secondary">
<span class="uk-text-bold emphasis"> {{fundersSize.number|number}}</span>{{fundersSize.size}}
</h3>
<span class="uk-text-uppercase uk-text-large">Funders</span>
</div>
<div *ngIf="datasourcesSize">
<h3 class="uk-text-secondary">
<span class="uk-text-bold emphasis"> {{datasourcesSize.number|number}}</span>{{datasourcesSize.size}}
</h3>
<span class="uk-text-uppercase uk-text-large">Content providers</span>
</div>
<div *ngIf="projectsSize">
<h3 class="uk-text-secondary">
<span class="uk-text-bold emphasis"> {{projectsSize.number|number}}</span>{{projectsSize.size}}
</h3>
<span class="uk-text-uppercase uk-text-large">Projects</span>
</div>
</div>
</div>
<div class="numbers-background">
<div class="uk-container uk-section">
<div class="uk-grid uk-margin-auto-left uk-margin-auto-right uk-grid-large uk-child-width-1-2@m" uk-grid>
<div *ngIf="publicationsSize || softwareSize || datasetsSize"
class="uk-margin-medium-bottom uk-flex uk-flex-center">
<div>
<div *ngIf="publicationsSize">
<div class="emphasis uk-margin-bottom">{{publicationsSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="22.106" height="30" viewBox="0 0 22.106 30">
<path id="book"
d="M26.9,9.405V25.749c0,.824-.713,1.218-1.579,1.832a1.034,1.034,0,0,1-1.579-.927V10.685a.877.877,0,0,0-.5-.845c-.379-.194-12.218-6.418-12.218-6.418A2.239,2.239,0,0,0,8.9,3.4,4.487,4.487,0,0,0,7.119,4.808l12.916,7.077a.917.917,0,0,1,.555.815V29.755a1.057,1.057,0,0,1-.582.924,1.209,1.209,0,0,1-1.136-.042c-.339-.207-12.274-7.526-13.063-8-.379-.227-.823-.693-.832-1.039L4.8,5.355a2.612,2.612,0,0,1,.456-1.629c1.1-1.711,4.94-3.658,6.884-2.65L26.348,8.268A1.151,1.151,0,0,1,26.9,9.405Z"
transform="translate(-4.799 -0.8)" fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">publications</span>
</div>
</div>
<div *ngIf="softwareSize" class="uk-visible@m">
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{softwareSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="30.001" height="30" viewBox="0 0 30.001 30">
<path id="cog"
d="M29.67,17.558A5.108,5.108,0,0,1,32.557,13.2a15.981,15.981,0,0,0-1.235-2.985A4.827,4.827,0,0,1,26.48,8.634a4.665,4.665,0,0,1-1.22-4.841,15.611,15.611,0,0,0-2.985-1.234,5.655,5.655,0,0,1-4.717,2.884,5.658,5.658,0,0,1-4.719-2.884A15.571,15.571,0,0,0,9.855,3.793,4.661,4.661,0,0,1,8.634,8.634a4.824,4.824,0,0,1-4.841,1.577A15.756,15.756,0,0,0,2.559,13.2a5.106,5.106,0,0,1,2.884,4.362,5.661,5.661,0,0,1-2.884,4.719,15.89,15.89,0,0,0,1.234,2.985A4.667,4.667,0,0,1,8.634,26.48a4.669,4.669,0,0,1,1.221,4.841,15.779,15.779,0,0,0,2.985,1.238,5.647,5.647,0,0,1,4.719-2.887,5.658,5.658,0,0,1,4.719,2.887,16.052,16.052,0,0,0,2.985-1.238,4.667,4.667,0,0,1,1.22-4.841A4.84,4.84,0,0,1,31.325,24.9a15.741,15.741,0,0,0,1.235-2.985A5.106,5.106,0,0,1,29.67,17.558Zm-12.111,6.52a6.522,6.522,0,1,1,6.52-6.52A6.521,6.521,0,0,1,17.558,24.079Z"
transform="translate(-2.559 -2.559)" fill="#0000000"/>
</svg>
</span>
<span class="uk-margin-small-left">software</span>
</div>
</div>
<div *ngIf="datasetsSize" class="uk-hidden@m">
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{datasetsSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="23.864" height="30" viewBox="0 0 23.864 30">
<path id="database"
d="M28.2,21.443c-1.437,2.324-6.026,4.025-11.465,4.025S6.7,23.767,5.266,21.443c-.3-.494-.466-.23-.466.012v3.412c0,3.307,5.342,6.733,11.932,6.733s11.932-3.426,11.932-6.731V21.457C28.664,21.213,28.5,20.949,28.2,21.443Zm.018-8.721c-1.415,2.054-6.02,3.562-11.483,3.562S6.661,14.776,5.246,12.722c-.292-.423-.446-.193-.446,0v4.017c0,3,5.342,5.435,11.932,5.435s11.932-2.434,11.932-5.435V12.719c0-.19-.157-.42-.449,0ZM16.732,1.6C10.142,1.6,4.8,3.611,4.8,6.088V8.236c0,2.627,5.342,4.758,11.932,4.758s11.932-2.131,11.932-4.758V6.088C28.664,3.611,23.322,1.6,16.732,1.6Z"
transform="translate(-4.8 -1.6)" fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">research data</span>
</div>
</div>
</div>
</div>
<div *ngIf="softwareSize || datasetsSize || otherSize"
class="uk-margin-medium-bottom uk-flex uk-flex-center">
<div>
<div *ngIf="softwareSize" class="uk-hidden@m">
<div class="emphasis uk-margin-bottom">{{softwareSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="30.001" height="30" viewBox="0 0 30.001 30">
<path id="cog"
d="M29.67,17.558A5.108,5.108,0,0,1,32.557,13.2a15.981,15.981,0,0,0-1.235-2.985A4.827,4.827,0,0,1,26.48,8.634a4.665,4.665,0,0,1-1.22-4.841,15.611,15.611,0,0,0-2.985-1.234,5.655,5.655,0,0,1-4.717,2.884,5.658,5.658,0,0,1-4.719-2.884A15.571,15.571,0,0,0,9.855,3.793,4.661,4.661,0,0,1,8.634,8.634a4.824,4.824,0,0,1-4.841,1.577A15.756,15.756,0,0,0,2.559,13.2a5.106,5.106,0,0,1,2.884,4.362,5.661,5.661,0,0,1-2.884,4.719,15.89,15.89,0,0,0,1.234,2.985A4.667,4.667,0,0,1,8.634,26.48a4.669,4.669,0,0,1,1.221,4.841,15.779,15.779,0,0,0,2.985,1.238,5.647,5.647,0,0,1,4.719-2.887,5.658,5.658,0,0,1,4.719,2.887,16.052,16.052,0,0,0,2.985-1.238,4.667,4.667,0,0,1,1.22-4.841A4.84,4.84,0,0,1,31.325,24.9a15.741,15.741,0,0,0,1.235-2.985A5.106,5.106,0,0,1,29.67,17.558Zm-12.111,6.52a6.522,6.522,0,1,1,6.52-6.52A6.521,6.521,0,0,1,17.558,24.079Z"
transform="translate(-2.559 -2.559)" fill="#0000000"/>
</svg>
</span>
<span class="uk-margin-small-left">software</span>
</div>
</div>
<div *ngIf="datasetsSize" class="uk-visible@m">
<div class="emphasis uk-margin-bottom">{{datasetsSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="23.864" height="30" viewBox="0 0 23.864 30">
<path id="database"
d="M28.2,21.443c-1.437,2.324-6.026,4.025-11.465,4.025S6.7,23.767,5.266,21.443c-.3-.494-.466-.23-.466.012v3.412c0,3.307,5.342,6.733,11.932,6.733s11.932-3.426,11.932-6.731V21.457C28.664,21.213,28.5,20.949,28.2,21.443Zm.018-8.721c-1.415,2.054-6.02,3.562-11.483,3.562S6.661,14.776,5.246,12.722c-.292-.423-.446-.193-.446,0v4.017c0,3,5.342,5.435,11.932,5.435s11.932-2.434,11.932-5.435V12.719c0-.19-.157-.42-.449,0ZM16.732,1.6C10.142,1.6,4.8,3.611,4.8,6.088V8.236c0,2.627,5.342,4.758,11.932,4.758s11.932-2.131,11.932-4.758V6.088C28.664,3.611,23.322,1.6,16.732,1.6Z"
transform="translate(-4.8 -1.6)" fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">research data</span>
</div>
</div>
<div *ngIf="otherSize">
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{otherSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<path id="earth"
d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"
fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">other research products</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-bottom">
<div class="uk-section uk-container">
<h3 class="uk-text-center">Synergies</h3>
<div class="uk-padding-large">
<div class="uk-flex uk-flex-middle uk-grid uk-grid-large uk-child-width-1-4@m uk-child-width-1-2"
uk-grid>
<div>
<img src="assets/graph-assets/home/synergies/microsoft.png">
</div>
<div>
<img src="assets/graph-assets/home/synergies/unpaywall.png">
</div>
<div>
<img src="assets/graph-assets/home/synergies/orcid.png">
</div>
<div>
<img src="assets/graph-assets/home/synergies/rda.png">
</div>
</div>
</div>
</div>
</div>