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

127 lines
7.2 KiB
HTML

<div class="image-front-topbar">
<div class="uk-section uk-margin-large-left uk-padding-remove-bottom uk-grd uk-flex uk-overflow-hidden home-background">
<div class="uk-grid uk-width-1-1 uk-margin-bottom uk-height-medium">
<div class="uk-width-1-1 uk-width-auto@m uk-margin-medium-top"><div id="searchImage"></div></div>
<div class="uk-width-expand search_box_bg" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-5@m" uk-scrollspy-class>
<advanced-search-input (searchEmitter)="goTo(true)">
<entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
(selectionChange)="entityChanged($event)" (disableSelectEmitter)="disableSelect = $event"
[onChangeNavigate]="false"></entities-selection>
<div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div *ngIf="selectedEntity === 'result' && !entities.input.focused" class="uk-dropdown uk-display-block uk-margin-top uk-width-auto">
<div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-grid uk-child-width-1-1@s">
<div class="uk-width-expand">
<div class="uk-margin-large-left">
<div class=" ">
<span class=" uk-h1">Welcome to EOSC Explore
</span>
<i class=" uk-h5 uk-text-italics"><br>
The in-context research discovery portal over the EOSC Exchange and the global map of science.
</i>
</div>
<div class="uk-margin-large-top uk-text-large">The EOSC Explore supports discovery of research products and services onboarded in the EOSC Exchange in the wider context of scientific research outcomes, research funding, and research organization. The EOSC Research Graph, powered by the OpenAIRE Research Graph, provides links from products and services to funders, projects, organizations, and authors, collects and infers SDGs subjects, communities, many more. The portal exploits the EOSC Interoperability Framework to identify relationships between research products in the graph and EOSC Services in the EOSC Marketplace, to facilitate and enable composability of resources. </div>
</div>
</div>
<img
class="uk-width-large@m uk-width-1-1@s"
src="https://marketplace.eosc-portal.eu/packs/media/images/gfx_whole_illustation_desktop-fc94d4f7e15455d1785ef4793e1573fb.png">
</div>
<div class="uk-section graph-background" *ngIf="aggregator.graphSectionText && aggregator.graphSectionTitle">
<div class="uk-container">
<div class="uk-flex uk-flex-top uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<div class="uk-flex-last@m">
<div [class.lines-10]="!readMore" class="uk-margin-bottom multi-line-ellipsis">
<div class="uk-h3">{{aggregator.graphSectionTitle}}</div>
<p [innerHtml]="aggregator.graphSectionText">
</p>
</div>
<div *ngIf="aggregator.graphSectionText">
<div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
<span>Read more<span class="space" uk-icon="chevron-down"></span></span>
</div>
<div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
<span>Read less<span class="space" uk-icon="chevron-up"></span></span>
</div>
</div>
</div>
<div class="uk-flex uk-flex-bottom">
<div class="uk-width-1-3 uk-width-1-2@m">
<img src="assets/graph.svg">
</div>
<div class="uk-padding uk-width-1-2">
<img src="assets/common-assets/logo-large-graph.png">
</div>
</div>
</div>
</div>
</div>
<div class="uk-section" *ngIf="isRouteAvailable('participate/deposit/learn-how') || isRouteAvailable('participate/claim')">
<div class="uk-padding uk-padding-remove-horizontal">
<div class="uk-container uk-container-small">
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1@m uk-first-column">
<div
class="uk-margin uk-text-center uk-child-width-1-1 uk-grid-match uk-child-width-1-1@s uk-child-width-1-2@m uk-child-width-1-2@l uk-grid"
id="page#8" uk-grid="" uk-height-match="target: .target">
<div class="uk-first-column" *ngIf="isRouteAvailable('participate/deposit/learn-how')">
<div class="el-item uk-card uk-card-default uk-card-medium uk-card-body">
<div class="uk-text-center target"><img alt="Share" class="uk-width-1-3@m uk-width-small"
src="assets/share.svg"></div>
<div class="el-content uk-margin uk-text-large"><span class="uk-text-bold">Deposit</span> your research
</div>
<div class="uk-margin-small-top uk-text-left card-text uk-flex uk-flex-center">
<div class="uk-margin-left uk-margin-right">Deposit in a repository of your choice.<br>
Select an OpenAIRE compatible<br>
repository (2.0 +) so that your research is linked to your funding information. Use Zenodo, a
catch-all repository hosted by CERN to deposit all your research results (publications, data,
software, etc.)
</div>
</div>
<a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
href="/participate/deposit/learn-how" type="submit">Deposit </a></div>
</div>
<div *ngIf=" isRouteAvailable('participate/claim')">
<div class="el-item uk-card uk-card-default uk-card-medium uk-card-body">
<div class="uk-text-center target"><img alt="Share" class="uk-width-1-3@m uk-width-small"
src="assets/link.svg"></div>
<div class="el-content uk-margin uk-text-large"><span class="uk-text-bold">Link</span> your work</div>
<div class="uk-margin-small-top uk-text-left card-text uk-flex uk-flex-center">
<div class="uk-margin-left uk-margin-right">Connect all your research.<br>
If you can't find your research results in OpenAIRE, don't worry! Use our Link Out service , that
reaches out to many<br>
external sources via APIs, to connect<br>
your research results and claim them to your project.
</div>
</div>
<a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
href="/participate/claim" type="submit">Link </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>