@ -1,3 +1,209 @@
<!-- Redesign START -->
< 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 home-background" >
< div class = "uk-container uk-container-large" uk-scrollspy = "target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200" >
<!-- first grid with search and mask -->
< div class = "uk-grid uk-flex-middle" uk-grid >
< div class = "uk-width-3-5 uk-margin-large-bottom" >
< h1 class = "uk-h2" uk-scrollspy-class >
Lorem ipsum dolor sit < br > amet, consetetur< span class = "uk-text-primary" > .< / span >
< / h1 >
< div class = "uk-text-large uk-margin-medium-top" uk-scrollspy-class >
< div > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam< / div >
< div > nonumy eirmod tempor invidunt ut labore et dolore magna< / div >
< div > aliquyam erat, sed diam voluptua.< / div >
< / div >
< 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 class = "uk-visible@m uk-width-expand" uk-scrollspy-class >
< div class = "uk-position-relative" >
< img style = "padding: 1px" src = "assets/explore-assets/home/explore.jpg" uk-parallax = "y: 300" >
< img class = "uk-position-top-left" src = "assets/explore-assets/home/mask.svg" >
< / div >
< / div >
< / div >
<!-- logos carousel -->
< div class = "uk-padding-large uk-padding-remove-horizontal uk-margin-large-top uk-margin-large-bottom" >
< 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-bottom portal-color uk-h3" >
< span * ngIf = "type=='publication' && showPublications && numbers?.publicationsSize" >
< span
class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
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}}
research data< / 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}}
research
software< / span > interlinked with publications< / span >
< span * ngIf = "numbers?.softwareSize && !numbers?.softwareLinkedSize"
class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
research 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 >
< div class = "uk-hidden@s" >
< a class = "uk-position-center-left uk-position-small" href = "#" uk-slidenav-previous
uk-slider-item="previous">< span class = "visually-hidden" > prev< / span > < / a >
< a class = "uk-position-center-right uk-position-small" href = "#" uk-slidenav-next
uk-slider-item="next">< span class = "visually-hidden" > next< / span > < / a >
< / div >
< div class = "uk-visible@s" >
< a class = "uk-position-center-left-out uk-position-small" href = "#" uk-slidenav-previous
uk-slider-item="previous">< span class = "visually-hidden" > prev< / span > < / a >
< a class = "uk-position-center-right-out uk-position-small" href = "#" uk-slidenav-next
uk-slider-item="next">< span class = "visually-hidden" > next< / span > < / a >
< / div >
< / div >
< / div >
< / div >
<!-- <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']">< / helper > -->
< / div >
< / div >
< ng-template # scrolling_text let-position_class = "position_class" >
< div [ class ] = " position_class " uk-parallax = "target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,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" >
Deposit in a repository of your choice. Select an OpenAIRE < br > compatible repository (2.0 +) so that your research is linked < br > to your funding information. Use Zenodo, a catch-all < br > repository hosted by CERN to deposit all your research < br > results (publications, data, software, etc.)
< / p >
< / div >
< div [ class ] = " position_class " uk-parallax = "target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0" >
< h3 class = "uk-h2" >
Monitor < span class = "uk-text-primary" > Open Science < br > < / span > compliance< span
class="uk-text-primary">.< / span >
< / h3 >
< p class = "uk-text-large" > Work with the Open Science expert community < br > for open and transparent metrics.
Discover Open < br > Science trends for your organization. See how < br > you fare in European Open Science Cloud.< / p >
< / div >
< div [ 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 < span class = "uk-text-primary" > research < br > results < / span > to insights< span
class="uk-text-primary">.< / span >
< / h3 >
< p class = "uk-text-large" > Understand your needs for your community. Measure impact, < br > discover trends, connections and
collaborations < br > 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 class = "uk-width-1-1" >
< h2 class = "uk-h1 uk-margin-remove-top" > Lorem ipsum lorem< 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-grid" uk-grid >
< div class = "uk-width-expand uk-first-column" >
< div class = "monitor-dark-logo-background" >
< div uk-parallax = "target: #js-sticky-parallax-images-all;" >
<!-- TODO: change ipad image -->
< img class = "uk-position-center-left" src = "assets/explore-assets/home/ipad.png" alt = "ipad" loading = "lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
style="height: 70vh">
< / div >
< / div >
< / div >
< div class = "uk-inline uk-width-expand" >
< div class = "" > <!-- uk - sticky="bottom: #js - sticky - parallax - images - all" -->
< 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 monitor-dark-logo-background" uk-sticky = "bottom: #js-sticky-parallax-images-all" >
< div class = "uk-flex uk-flex-column" >
< 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-expand" >
< ng-container * ngTemplateOutlet = "scrolling_text; context: {position_class: 'uk-position-top-center'}" > < / ng-container >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Redesign END -->
< 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 = "" >
@ -8,18 +214,13 @@
< div class = "image-front-topbar mainPageSearchForm" >
< div class = "uk-section" >
< div class = "uk-container uk-container-large uk-flex uk-flex-center" >
< div [ class . uk-invisible ] = " disableSelect " class = "uk-width-xlarge@l uk-width-large uk-child-width-1-1" >
< advanced-search-input searchEmitter ) = " goTo ( true ) " >
< div class = "uk-width-xlarge@l uk-width-large uk-child-width-1-1" >
< advanced-search-input [class . uk-hidden ] = " entities . disableSelect " (searchEmitter ) = " goTo ( true ) " >
< entities-selection # entities [ simpleView ] = " true " currentEntity = "all" [ selectedEntity ] = " selectedEntity "
(selectionChange)="entityChanged($event)" (disableSelectEmitter)="disableSelect = $event"
(selectionChange)="entityChanged($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 class = "uk-margin-medium" >
@ -29,7 +230,7 @@
< div class = "uk-grid uk-margin uk-margin-bottom uk-width-xxlarge uk-margin-auto" >
< div class = "uk-width-expand uk-padding-remove" >
< div uk-slider = "autoplay: tru e; autoplay-interval: 2500" class = "uk-margin-top" >
< div uk-slider = "autoplay: fals e; autoplay-interval: 2500" class = "uk-margin-top" >
< 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;" >
