explore-services/explore/src/app/home/home.component.html

317 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<ng-template #_logos let-logo="logo" let-class="class">
<div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
<div class="">
<img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">
</div>
</div>
</ng-template>
<div>
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden">
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5@m uk-margin-large-bottom">
<h1 class="uk-h2" uk-scrollspy-class>
Discover open <br> linked research<span class="uk-text-primary">.</span>
</h1>
<div *ngIf="showContentWithNumbers" class="uk-margin-top" style="max-width: 600px;" uk-scrollspy-class>
<div>
A comprehensive and open dataset of research information covering
<span class="uk-text-bold">{{numbers.publicationsSize.number|number}}<span class="uk-text-lowercase">{{numbers.publicationsSize.size}}</span> {{openaireEntities.PUBLICATIONS.toLowerCase()}}</span>,
<span class="uk-text-bold">{{numbers.datasetsSize.number|number}}<span class="uk-text-lowercase">{{numbers.datasetsSize.size}}</span> {{openaireEntities.DATASETS.toLowerCase()}}</span>,
<span class="uk-text-bold">{{numbers.softwareSize.number|number}}<span class="uk-text-lowercase">{{numbers.softwareSize.size}}</span> {{openaireEntities.SOFTWARE.toLowerCase()}}</span> items, from
<span class="uk-text-bold">{{numbers.datasourcesSize.number|number}}<span class="uk-text-lowercase">{{numbers.datasourcesSize.size}}</span> {{openaireEntities.DATASOURCES.toLowerCase()}}</span>, linked to
<span class="uk-text-bold">{{numbers.projectsSize.number|number}}<span class="uk-text-lowercase">{{numbers.projectsSize.size}}</span> grants</span> and
<span class="uk-text-bold">{{numbers.organizationsSize.number|number}}<span class="uk-text-lowercase">{{numbers.organizationsSize.size}}</span> {{openaireEntities.ORGANIZATIONS.toLowerCase()}}</span>.
</div>
<div class="uk-text-primary">All linked together through citations and semantics.</div>
</div>
<div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-4-5@l uk-width-3-5@xl">
<advanced-search-input #advanced (searchEmitter)="goTo(true)">
<entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
(selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
[onChangeNavigate]="false"></entities-selection>
<div input #input placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">
<div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
</div>
</div>
</div>
<div class="uk-padding-small uk-margin-small-top">
<div class="uk-text-meta">
Try browsing by:
</div>
<div class="link-actions uk-flex uk-flex-column uk-flex-top uk-margin-small-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-small-bottom"
routerLinkActive="router-link-active" routerLink="/sdgs">
<span class="uk-flex uk-flex-middle">
<img src="assets/explore-assets/sdg-dot-img.svg" alt="SDGs logo" loading="lazy">
<span class="uk-margin-small-left">Sustainable Development Goals (SDG<span class="uk-text-lowercase">s</span>)</span>
</span>
</a>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/fields-of-science">
<span class="uk-flex uk-flex-middle">
<img src="assets/explore-assets/fos-icon.svg" alt="FOS logo" loading="lazy">
<span class="uk-margin-small-left">Fields of Science (FoS)</span>
</span>
</a>
</div>
</div>
</div>
<div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative">
<img src="assets/explore-assets/home/explore.jpg" uk-parallax="y: 500">
<img class="uk-position-bottom-left" src="assets/explore-assets/home/mask.svg">
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-top">
<div class="uk-container uk-container-large uk-width-2-3">
<div uk-slider="autoplay: false; autoplay-interval: 2500" class="">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
<ng-container *ngFor="let type of getKeys(logos)">
<li *ngFor="let range of createRange(logos[type].length) let j=index"
class="uk-width-1-1 home-logo">
<h1 class="uk-text-center uk-margin-large-bottom uk-text-primary uk-h4">
<span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize">
<span
class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
{{openaireEntities.PUBLICATIONS}}</span><span> deduplicated</span>
</span>
<span
*ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)">
<span *ngIf="numbers?.datasetsLinkedSize">
<span
class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}}
datasets</span> interlinked with publications</span>
<span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize"
class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}}
{{openaireEntities.DATASETS}}</span>
</span>
<span
*ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)">
<span *ngIf="numbers?.softwareLinkedSize">
<span
class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
{{openaireEntities.SOFTWARE}}</span> interlinked with publications</span>
<span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
{{openaireEntities.SOFTWARE}}</span>
</span>
<span *ngIf="type=='persistent'">
<span>Persistent identifiers and registries</span>
</span>
<span *ngIf="type=='funder' && showProjects && numbers?.fundersSize && numbers?.projectsSize">
<span
class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
funders</span><span> and</span>
<span
class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
funded grants</span>
</span>
</h1>
<div
class="uk-grid-small uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center"
uk-grid uk-height-match="target: > div > .logo2; row: false;">
<div
*ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
<ng-container
*ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
<ng-container
*ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
</div>
</div>
</li>
</ng-container>
</ul>
</div>
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="icon: chevron-left; ratio: 2"></span></a>
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="icon: chevron-right; ratio: 2"></span></a>
</div>
</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: 0; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">
Whether its publications, data or software, <br>
select an <a href="" target="_blank">OpenAIRE compatible repository</a> and <br>
share using community standards. Alternatively <br>
use Zenodo, a catch-all repository hosted by CERN. <br>
All results will be indexed, discoverable and accessible <br>
via EXPLORE.
</p>
<div class="uk-margin-medium-top">
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/deposit/learn-how">Start Deposit</a>
</div>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%">
<h3 class="uk-h2">
<span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">
Connect all your research. If you can't find your research <br> results in OpenAIRE, don't worry! Use our Link service, <br> that reaches out to many external sources via APIs, and <br>
claim them to your Grant or ORCID. Use the service to provide <br>
meaningful links between publications-datasets-software.
</p>
<div class="uk-margin-medium-top">
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/claim">Start Linking</a>
</div>
</div>
</ng-template>
<div class="uk-section uk-section-secondary">
<div class="uk-container uk-container-large">
<div class="uk-width-1-1">
<h2 class="uk-h1 uk-margin-large-top">Share your research<span class="uk-text-primary">.</span></h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 200vh">
<div class="uk-visible@m uk-height-viewport explore-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid" uk-grid>
<div class="uk-width-expand uk-first-column">
<div class="explore-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<img class="uk-position-center-left" src="assets/explore-assets/home/landscape.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
style="width: 40%;">
</div>
</div>
</div>
<div class="uk-inline uk-width-expand">
<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>
</div>
</div>
</div>
</div>
<div class="uk-hidden@m uk-height-viewport explore-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div class="uk-flex uk-flex-column">
<div class="explore-dark-logo-background uk-inline uk-width-1-1" style="width: 40%;">
<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/explore-assets/home/landscape.png" alt="ipad" loading="lazy">
</div>
</div>
<div class="uk-inline uk-width-expand">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Not yet! -->
<!-- <div class="uk-section">
<div class="uk-container uk-container-large">
<h2 class="uk-h1 uk-text-center">
New sources in <br> OpenAIRE<span class="uk-text-primary">.</span>
</h2>
<div class="cards-on-slider">
TODO: Repositories content
</div>
</div>
</div> -->
<div class="uk-background-muted">
<div class="uk-position-relative">
<div class="uk-section uk-section-large">
<div class="uk-container">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<div style="max-width: 550px;">
<h2>Linked Open Research.</h2>
<div class="">
EXPLORE is built on the <a href="https://graph.openaire.eu/" target="_blank" class="graph">OpenAIRE Research Graph</a>, one of the largest
open scholarly record collections worldwide. Conceived as a public and
transparent good, populated out of data sources trusted by scientists, the
OpenAIRE Research Graph brings discovery, monitoring, and assessment of science
back in the hands of the scientific community.
</div>
</div>
</div>
<div></div>
<img class="uk-visible@m uk-height-1-1 uk-position-top-right" src="assets/explore-assets/home/graph.svg" alt="ipad" loading="lazy">
</div>
</div>
</div>
</div>
<div class="uk-section uk-padding-remove-top">
<div class="uk-container">
<div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;">
<div>
Within a constantly emerging scholarly communication environment, the OpenAIRE Research Graph is a moving target, continuously integrating new sources, new types or research objects, and embedding access measures. We therefore welcome the community to work with us to improve all its aspects: its <span class="uk-text-bold">coverage</span> (geographic and thematic), <span class="uk-text-bold">quality</span> (disambiguation and semantics) and <span class="uk-text-bold">access</span> (APIs).
</div>
<div class="uk-margin-top">
Find information about the OpenAIRE Research Graph, how to test it and contribute to improving it.
</div>
<div class="uk-margin-top">
<a href="https://www.openaire.eu/blogs/the-openaire-research-graph" target="_blank" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
Learn more. Contribute
</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-large">
<div class="uk-container uk-container-large">
<h2 class="uk-h5 uk-margin-remove uk-text-primary">
Did you know that
</h2>
<h2 class="uk-heading-large uk-margin-medium-bottom uk-margin-remove-top">
you may
</h2>
<div id="custom-links" class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
<div>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<a href="https://provide.openaire.eu/home" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">have your repository, Journal or CRIS system indexed in EXPLORE and take advantage of services for enriching metadata and counting usage?</span>
<icon name="east" ratio="1.5"></icon>
</a>
</div>
</div>
<div>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<a href="https://canada.explore.openaire.eu/" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">use EXPLORE as an application platform as a service (aPaaS) and set up a national portal for Open Science, such as Canada.EXPLORE?</span>
<icon name="east" ratio="1.5"></icon>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section">
<div class="uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h3 class="uk-h2 uk-margin-remove">
Need more information?
</h3>
<h4 class="uk-h4 uk-margin-small-top uk-margin-medium-bottom">
Get in touch and let us help you<span class="uk-text-primary">.</span>
</h4>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-top uk-margin-medium-bottom"
href="https://www.openaire.eu/contact-us" target="_blank">Contact us</a>
</div>
</div>
</div>