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

161 lines
9.1 KiB
HTML

<div class="home">
<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-top" routerLink="/about">Learn more</a>
</div>
<div class="uk-flex uk-flex-right">
<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="second 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="third 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 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="portal-color">
<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="portal-color">
<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="portal-color">
<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" 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-icon uk-text-uppercase">
<svg height="20" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
<rect
style="stroke: var(--portal-main-color);" fill="none" height="16" stroke="#000" width="12" x="3.5"
y="2.5"></rect>
<polyline style="stroke: var(--portal-main-color);" fill="none"
points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline>
</svg>
publications
</div>
</div>
<div *ngIf="softwareSize" >
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{softwareSize.count|number}} </div>
<div class="uk-icon uk-text-uppercase">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="cog">
<circle
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" cx="9.997" cy="10"
r="3.31"></circle>
<path style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path>
</svg>
software
</div>
</div>
</div>
</div>
<div *ngIf="datasetsSize || otherSize" class="uk-margin-medium-bottom uk-flex uk-flex-center">
<div>
<div *ngIf="datasetsSize">
<div class="emphasis uk-margin-bottom">{{datasetsSize.count|number}} </div>
<div class="uk-icon uk-text-uppercase">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="database">
<ellipse
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" cx="10" cy="4.64" rx="7.5"
ry="3.14"></ellipse>
<path style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path>
<path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path>
<path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path>
</svg>
research data
</div>
</div>
<div *ngIf="otherSize" >
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{otherSize.count|number}} </div>
<div class="uk-icon uk-text-uppercase">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="world">
<path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" d="M1,10.5 L19,10.5"></path>
<path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M2.35,15.5 L17.65,15.5"></path>
<path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M2.35,5.5 L17.523,5.5"></path>
<path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M10,19.46 L9.98,19.46 C7.31,17.33 5.61,14.141 5.61,10.58 C5.61,7.02 7.33,3.83 10,1.7 C10.01,1.7 9.99,1.7 10,1.7 L10,1.7 C12.67,3.83 14.4,7.02 14.4,10.58 C14.4,14.141 12.67,17.33 10,19.46 L10,19.46 L10,19.46 L10,19.46 Z"></path>
<circle
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" cx="10" cy="10.5"
r="9"></circle>
</svg>
other research products
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>