monitor/src/app/home/home.component.html

551 lines
26 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.

<div>
<div class="uk-section uk-background-fixed uk-background-bottom-right uk-background-norepeat homeBackgroundImage" style="background: #fff;">
<div class="uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid">
<div>
<h1 class="uk-heading-large">
A new era of <br><span class="uk-text-primary">monitoring</span> <br>research<span class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top">
<div>Work together with us to view, understand and visualize</div>
<div>research statistics and indicators.</div>
</div>
<div class="uk-margin-medium-top">
<a class="uk-button uk-button-primary" routerLink="/">GET STARTED</a>
</div>
</div>
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom '" [childrenCustomClass]="' uk-container uk-container-large '">
<div top class="uk-width-1-1 uk-background-primary">
<div class="top-content uk-container uk-container-large">
<span class="uk-h6 uk-text-primary">Benefits</span>
<h2 class="uk-h1 uk-margin-remove-top">Simplify open science <br>tracking & monitoring<span class="uk-text-primary">.</span></h2>
</div>
</div>
<div left class="uk-width-1-1 uk-width-1-2@m" uk-scrollspy="target: > img; cls: uk-animation-slide-bottom-medium; repeat: true">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 1;">
<img id="imgId1" src="assets/monitor-assets/home/placeholder.png" alt="img1">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0;">
<img id="imgId2" src="assets/monitor-assets/home/placeholder.png" alt="img2">
</div>
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0;">
<img id="imgId3" src="assets/monitor-assets/home/placeholder.png" alt="img3">
</div>
</div>
<div scroll class="uk-width-expand">
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="1st" name="txt">
<h3 class="uk-h2">
Get a <span class="uk-text-primary">complete <br> picture.</span>
</h3>
<p class="uk-text-lead">Track and discover your organizations research output. <br> Use the OpenAIRE Research Graph to get a 360o view of <br> your publications-data-code.</p>
</div>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="2nd" name="txt">
<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-lead"> Work with the open science expert community <br> for open and transparent metrics. Discover open <br> science trends for your organization and see how <br> you fare in EOSC.</p>
</div>
</div>
<div class="uk-background-primary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="3rd" name="txt">
<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-lead">Understand your community. Measure impact, <br> discover trends, connections and collaborations <br> to improve and optimize your future actions. </p>
</div>
</div>
</div>
</section-scroll>
<div class="uk-section uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
<h2 class="uk-h1 uk-text-center">
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom">
<loading *ngIf="loading"></loading>
<div *ngIf="!loading" class="uk-width-1-1 uk-flex-center uk-grid" uk-grid>
<div *ngIf="publicationsSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h4 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(publicationsSize.number|number) + publicationsSize.size}}</h4>
<div class="uk-margin-small uk-text-large">Publications</div>
</div>
</div>
</a>
</div>
<div *ngIf="datasetsSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(datasetsSize.number|number) + datasetsSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Datasets</div>
</div>
</div>
</a>
</div>
<div *ngIf="softwareSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=software" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class=" uk-text-primary-gradient uk-margin-remove-bottom">{{(softwareSize.number|number) + softwareSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Software</div>
</div>
</div>
</a>
</div>
<div *ngIf="otherSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=other" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class="uk-text-primary-gradient uk-margin-remove-bottom">{{(otherSize.number|number) + otherSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Other</div>
</div>
</div>
</a>
</div>
<div *ngIf="fundersSize">
<a class="uk-card uk-card-default uk-position-relative uk-padding-small uk-display-block uk-link-reset"
href="https://explore.openaire.eu/search/find/projects" target="_blank">
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center">
<h3 class=" uk-text-primary-gradient uk-margin-remove-bottom">{{(fundersSize.number|number) + fundersSize.size}}</h3>
<div class="uk-margin-small uk-text-large">Funders</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-3">
<span class="uk-h6 uk-text-primary">Features</span>
<h2 class="uk-h1 uk-margin-remove-top">Open data. <br> Open <br> methodologies<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
</a>
</div>
<div class="uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Global outlook
</div>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data resource from open initiatives around the world, of global interest.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Minimum effort to join
</div>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we deliver a view of your world. As you see fit.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Transparent methodology
</div>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms for every metric and indicator we publish.
</div>
</div>
<div class="">
<div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs" customClass="uk-text-primary-gradient"></icon>
</div>
<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
Customised to your needs
</div>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our advanced tools and expertise add add your own metrics.
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<h2 class="uk-h1">Dashboards <br> in action<span class="uk-text-primary">.</span></h2>
<div class="uk-text-large uk-margin-bottom">
Short description of “what monitor members are”, sed diam nonumy eirmod <br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <br> voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse">
<span class="uk-flex uk-flex-middle">
<span>Browse them all</span>
</span>
</a>
<div class="uk-margin-large-top uk-margin-large-bottom">
<!-- Tabs -->
<my-tabs>
<my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
<ng-container *ngTemplateOutlet="allContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
<ng-container *ngTemplateOutlet="fundersContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Initiatives'" [tabId]="'researchInitiatives'">
<ng-container *ngTemplateOutlet="researchInitiativesContainer"></ng-container>
</my-tab>
<my-tab [tabTitle]="'Research Institutions'" [tabId]="'researchInstitutions'">
<ng-container *ngTemplateOutlet="researchInstitutionsContainer"></ng-container>
</my-tab>
</my-tabs>
<!-- Tab content -->
<ng-template #allContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(stakeholders)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #fundersContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(funders)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #researchInitiativesContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(researchInitiatives)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
<ng-template #researchInstitutionsContainer>
<div uk-slider class="uk-margin-large-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of sliderize(researchInstitutions)" class="uk-width-1-1">
<div class="uk-padding">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
<div *ngFor="let stakeholder of slide">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</ng-template>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h1">
Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
</h2>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">Contact us</a>
</div>
</div>
<!-- <div class="image-front-topbar"
style="background: transparent linear-gradient(180deg, #F4F4F4 0%, #F5F5F5 83%, #FAFAFA 100%) no-repeat;">
<div
class="uk-section uk-container uk-container-large uk-text-center uk-section uk-section-small uk-margin-large-bottom"
uk-parallax="media: @l; y: -200; easing: 0.5">
<div class="uk-padding-small">
<h1 class="uk-margin-top">A new era of monitoring research</h1>
<div class="girl-background">
<h4 class="uk-margin-remove-top">Open data. Open methodologies.</h4>
<div class="uk-margin-medium-top uk-text-muted">
Work together with us to view, understand and visualize<br>research statistics and indicators.
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large dashboard-section">
<div class="uk-padding-small">
<div class="dashboard uk-flex uk-flex-center">
<img class="uk-width-1-2@l" src="/assets/monitor-assets/home/dashboard.png">
</div>
<div class="uk-margin-large-top">
<div class="uk-margin-medium-left uk-margin-medium-right uk-margin-large-bottom">
<div class="uk-child-width-1-3@m uk-grid info" uk-grid>
<div [@1]="state.toString()" class="clickable" [class.uk-active]="state === 1" (click)="startAnimation()">
<h5>
Get a complete picture
</h5>
<div class="uk-text-muted">
Track and discover your organizations research output. Use the OpenAIRE Research Graph to get a
360<span>&#176;</span>
view of your publications-data-code.
</div>
</div>
<div [@2]="state.toString()" class="clickable" [class.uk-active]="state === 2" (click)="startAnimation(2)">
<h5>
Monitor open science compliance
</h5>
<div class="uk-text-muted">
Work with the open science expert community for open and transparent metrics. Discover open science trends
for your organization and see how you fare in EOSC.
</div>
</div>
<div [@3]="state.toString()" class="clickable" [class.uk-active]="state === 3" (click)="startAnimation(3)">
<h5>
Turn research results to insights
</h5>
<div class="uk-text-muted">
Understand your community. Measure impact, discover trends, connections and collaborations to improve
and optimize your future actions.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small hologram uk-position-relative">
<div class="uk-grid uk-grid-match uk-child-width-1-2 uk-visible@m" uk-grid>
<div uk-parallax="y: 40, -60; easing: 0.5">
<div class="uk-margin-large-left uk-margin-large-bottom uk-width-3-4 part">
<h5 class="uk-text-secondary">Global outlook</h5>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
</div>
<div uk-parallax="y: 40, -60; easing: 0.5" class="uk-flex uk-flex-right">
<div class="part uk-width-3-4 uk-margin-medium-right">
<h5 class="uk-text-secondary">Transparent methodology</h5>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms
for every metric and indicator we publish.
</div>
</div>
</div>
<div uk-parallax="y: -100; easing: 0.5">
<div class="part uk-width-3-4 uk-margin-medium-left">
<h5 class="uk-text-secondary">Customised to your needs</h5>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
</div>
<div uk-parallax="y: -100; easing: 2" class="uk-flex uk-flex-center">
<div class="part uk-width-3-4 uk-margin-large-left">
<h5 class="uk-text-secondary">Minimum effort to join</h5>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we
deliver a view of your world. As you see fit.
</div>
</div>
</div>
</div>
<div class="uk-hidden@m uk-grid uk-child-width-1-1" uk-grid>
<div>
<h5 class="uk-text-secondary">Global outlook</h5>
<div>
Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
resource from open initiatives around the world, of global interest.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Transparent methodology</h5>
<div>
We base our service on open science principles. We rely on open data sources, and document our algorithms for
every metric and indicator we publish.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Customised to your needs</h5>
<div>
Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
advanced tools and expertise add add your own metrics.
</div>
</div>
<div>
<h5 class="uk-text-secondary">Minimum effort to join</h5>
<div>
You only share some information with us to include in out backend aggregating and data mining, and we deliver
a view of your world. As you see fit.
</div>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-large">
<a class="uk-button portal-button" routerLink="/about">Learn More</a>
</div>
</div>
<div class="graph-section">
<div class="uk-section uk-container uk-margin-large">
<div class="uk-text-center uk-padding-small">
<h2>Tap into the OpenAIRE Research Graph</h2>
<div class="uk-flex uk-flex-center">
<div class="uk-width-3-4@m uk-margin-large-top uk-grid uk-child-width-1-5@m uk-child-width-1-2">
<div *ngIf="publicationsSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset"
href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
<span class="uk-text-bold number">{{publicationsSize.number|number}}</span>{{publicationsSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">publications</div>
</div>
<div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=datasets"
target=_blank>
<span class="uk-text-bold number">{{datasetsSize.number|number}}</span>{{datasetsSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">datasets</div>
</div>
<div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=software"
target="_blank">
<span class="uk-text-bold number">{{softwareSize.number|number}}</span>{{softwareSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">software</div>
</div>
<div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=other"
target="_blank">
<span class="uk-text-bold number">{{otherSize.number|number}}</span>{{otherSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">other</div>
</div>
<div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center">
<h3 class="uk-margin-remove portal-color">
<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/projects" target="_blank">
<span class="uk-text-bold number">{{fundersSize.number|number}}</span>{{fundersSize.size}}
</a>
</h3>
<div class="uk-margin-small uk-text-large uk-text-uppercase">Funders</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="loading && stakeholders.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
<errorMessages [status]="[status]" [type]="'stakeholders'"></errorMessages>
</div>
<div *ngIf="!loading && stakeholders && stakeholders.length > 0"
class="uk-section uk-section-large uk-margin-right uk-margin-left uk-margin-large-top stakeholder-section">
<div class="uk-container" uk-filter="target: .stakeholders">
<ul class="uk-subnav uk-subnav-pill">
<li class="uk-active" uk-filter-control><a (click)="type = null">All</a></li>
<li uk-filter-control="[data-type='funder']"><a (click)="type = 'funder'">Funders</a></li>
<li uk-filter-control="[data-type='ri']"><a (click)="type = 'ri'">Research Initiatives</a></li>
<li uk-filter-control="[data-type='organization']"><a (click)="type = 'organization'">Institutions</a></li>
</ul>
<div class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
uk-grid="masonry: true" uk-height-match="target: .uk-card; row: false;">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
<a *ngIf="directLink && hasPermission(stakeholder)" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<ng-container *ngTemplateOutlet="stakeholderCard; context: {stakeholder: stakeholder}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(stakeholder)" (click)="confirmModalOpen(stakeholder)">
<ng-container *ngTemplateOutlet="stakeholderCard; context: {stakeholder: stakeholder}"></ng-container>
</a>
<ng-container *ngIf="!hasPermission(stakeholder)">
<ng-container *ngTemplateOutlet="stakeholderCard; context: {stakeholder: stakeholder}"></ng-container>
</ng-container>
</div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type"
class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top uk-padding-large">
Nothing here yet.
</div>
</div>
</div>
</div>
<div style="background: linear-gradient(0deg, #FFFFFF 0%, #EFF3F8 0%, #FAFAFA 100%);">
<div class="uk-section uk-container uk-text-center uk-margin-large-bottom">
<div class="uk-padding-small">
<h3>Contact us to help you.</h3>
<div class="uk-text-muted uk-margin-medium">
Are you looking for more? Get in touch with our team and let us help you.
</div>
<a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a>
</div>
</div>
</div>
<div class="uk-section-muted"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
<other-portals [properties]="properties" portal="monitor"></other-portals>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
</modal-alert>
<ng-template #stakeholderCard let-stakeholder="stakeholder">
<div class="uk-card uk-card-default uk-text-center uk-position-relative" [class.disabled]="!hasPermission(stakeholder)">
<div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get(stakeholder.visibility)"></icon>
<span class="space uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
</div>
<img *ngIf="stakeholder.logoUrl" class="uk-margin-auto" [src]="stakeholder | logoUrl">
<div class="uk-text-light uk-margin-medium-top">{{stakeholder.name}}</div>
</div>
</ng-template> -->