[Trunk|Connect]: Home Page, About almost ready. It is needed to specify gif images and their texts on create Gifs function.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56216 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-06-27 10:25:02 +00:00
parent 3d7d20f746
commit 6ee80a8d0d
4 changed files with 151 additions and 112 deletions

View File

@ -56,8 +56,10 @@
</div>
</div>
<div class="uk-position-relative uk-align-center banner-img-box">
<img src="../../assets/banner/login.png" class="uk-padding uk-position-center">
<div class="uk-position-relative">
<div class="uk-align-center uk-position-center">
<img width="296" height="285" src="../../assets/banner/login.png">
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
@ -181,7 +183,7 @@
</div>
</div>
</div>
<div class="uk-margin-large-top background uk-background-norepeat uk-background-cover">
<div class="uk-margin-large-top home-background uk-background-norepeat uk-background-cover">
<div class="uk-container uk-container-large">
<gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about'">
</gif-slider>
@ -222,8 +224,10 @@
<div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
<div class="uk-position-relative uk-align-center banner-img-box">
<img src="../../assets/contact/2.png" class="uk-padding uk-position-center">
<div class="uk-position-relative">
<div class="uk-align-center uk-position-center">
<img width="237" height="250" src="../../assets/contact/2.png">
</div>
</div>
<div>
<h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>

View File

@ -1,78 +1,76 @@
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf="!showLoading" class="image-front-topbar background uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div *ngIf="!showLoading" class="image-front-topbar home-background uk-section-large uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div style=" min-height: 350px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
<div class="uk-margin-top uk-align-center">
<div class="uk-section uk-section-large">
<div class="uk-container uk-container-large">
<div class="uk-grid-divider" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h4 class="uk-margin-auto uk-h4 uk-text-bold">Contact us and create your community profile</h4>
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center" role="alert">{{errorMessage}}</div>
<div class="uk-margin-top" uk-grid>
<div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required fields</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Name <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
<input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Surname <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
<input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Email <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">Please add an email. </div>
<div *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')" class=" uk-text-danger uk-text-small style=display:none">Please add a valid email. </div>
<input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required #sender="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="affiliation.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation. </div>
<input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
</div>
<label class="uk-width-1-1 uk-h5 uk-text-bold">
Community Name <span class="uk-text-danger uk-text-bold">*</span>
<div class="uk-align-center">
<div class="uk-container uk-container-large">
<div class="uk-grid-divider" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h4 class="uk-margin-auto uk-h4 uk-text-bold">Contact us and create your community profile</h4>
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center" role="alert">{{errorMessage}}</div>
<div class="uk-margin-top" uk-grid>
<div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required fields</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Name <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div class="uk-width-1-2 uk-margin-remove-top">
<div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
<input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
</div>
<label class="uk-width-1-1 uk-h5 uk-text-bold">
Message <span class="uk-text-danger uk-text-bold">*</span>
<div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
<input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Surname <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div class="uk-width-1-1 uk-margin-remove-top">
<div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please write us a message. </div>
<textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
</div>
<div class="uk-width-1-1">
<div *ngIf="!contactForm.recaptcha && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge. </div>
<re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey" required></re-captcha>
</div>
<div class="uk-width-1-1 uk-text-right">
<button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
<button class="uk-button portal-button" (click)="send()">Send</button>
</div>
<div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
<input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Email <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">Please add an email. </div>
<div *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')" class=" uk-text-danger uk-text-small style=display:none">Please add a valid email. </div>
<input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required #sender="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="affiliation.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation. </div>
<input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
</div>
<label class="uk-width-1-1 uk-h5 uk-text-bold">
Community Name <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div class="uk-width-1-2 uk-margin-remove-top">
<div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
<input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
</div>
<label class="uk-width-1-1 uk-h5 uk-text-bold">
Message <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div class="uk-width-1-1 uk-margin-remove-top">
<div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please write us a message. </div>
<textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
</div>
<div class="uk-width-1-1">
<div *ngIf="!contactForm.recaptcha && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge. </div>
<re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey" required></re-captcha>
</div>
<div class="uk-width-1-1 uk-text-right">
<button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
<button class="uk-button portal-button" (click)="send()">Send</button>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h5 class="uk-margin-auto-top uk-margin-remove-bottom uk-h5 uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h5>
<ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
<li><h5 class="uk-h5"><span class="uk-text-bold">Create and Manage</span> your community</h5></li>
<li><h5 class="uk-h5"><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
<li><h5 class="uk-h5"><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
</ul>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h5 class="uk-margin-auto-top uk-margin-remove-bottom uk-h5 uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h5>
<ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
<li><h5 class="uk-h5"><span class="uk-text-bold">Create and Manage</span> your community</h5></li>
<li><h5 class="uk-h5"><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
<li><h5 class="uk-h5"><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
</ul>
</div>
</div>
</div>

View File

@ -8,25 +8,70 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
@Component({
selector: 'learn-how',
template: `
<div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class="image-front-topbar" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: calc(7.89999px + 60vh);"
class="uk-section uk-padding-remove-bottom" >
<div class="uk-container uk-container-large uk-section">
<div class="uk-margin-large-top" uk-grid>
<h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
<h5 class="uk-width-1-2@l uk-width-1-1@s">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</h5>
</div>
</div>
<div class="uk-section-muted"> <!--background-->
class="uk-padding-remove-bottom cloud-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
<div class="uk-section uk-margin-large-top">
<div class="uk-container uk-container-large">
<gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
<div class="uk-margin-large-top" uk-grid>
<h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
<div class="uk-width-1-2@l uk-width-1-1@s uk-text-large">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</div>
</div>
<div class="uk-margin-large-top uk-flex-middle uk-flex uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
<div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
<div>
<h5 class="uk-text-bold">1. Understanding your needs</h5>
<div>
First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together well talk about how OpenAIRE RCD fits as a solution.
</div>
</div>
<div class="uk-visible@m">
<h5 class=" uk-text-bold">4. Roll out the service</h5>
<div>
We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
</div>
</div>
<div class="uk-hidden@m">
<h5 class=" uk-text-bold">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We tranlate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway. </div>
</div>
</div>
<div>
<img src="../../assets/about/cicle.png">
</div>
<div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
<div class="uk-visible@m">
<h5 class=" uk-text-bold">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We tranlate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway. </div>
</div>
<div class="uk-hidden@m">
<h5 class=" uk-text-bold">4. Roll out the service</h5>
<div>
We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service. </div>
</div>
<div>
<h5 class="uk-text-bold">3. Test and Validate</h5>
<div>
You validate and test your new Science Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large">
<gif-slider [gifs]="second"></gif-slider>
</div>
<div class="uk-section-muted"> <!--background-->
<div class="uk-container uk-container-large uk-section">
</div>
<div class="uk-section">
<div class="uk-container uk-container-large">
<gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
</div>
</div>
<div class="uk-container uk-container-large">
<gif-slider [gifs]="second"></gif-slider>
</div>
<div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
<div>
<h1>We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
@ -35,13 +80,15 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
</div>
</div>
<div>
eikona
<div class="uk-position-relative">
<div class="uk-align-center uk-position-center">
<img width="263" height="250" src="../../assets/contact/4.png">
</div>
</div>
</div>
</div>
</div>
<div *ngIf="questions.length > 0" class="uk-container">
<div *ngIf="questions.length > 0 else comingSoon" class="uk-container">
<h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
<div class="uk-width-1-1 uk-section">
<ul uk-accordion>
@ -55,32 +102,27 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
</ul>
</div>
</div>
</div>
<ng-template #comingSoon>
<div class="uk-container">
<h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
<div class="uk-width-1-1 uk-section uk-text-center uk-text-large uk-text-bold uk-text-uppercase">
Coming Soon
</div>
</div>
</ng-template>
</div>
`
})
export class LearnHowComponent {
public piwiksub: any;
questions: FAQ[] = [
{
/*{
question: 'Coming soon?',
answer: 'Yes'
},
/*{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
question: 'Could you be more specific?',
answer: 'No'
}*/
];
public first: {"gif": string, "header": string, "text"}[] = [];

View File

@ -50,11 +50,6 @@
background-color: rgb(255, 255, 255);
}
.banner-img-box {
width: 300px;
height: 290px;
}
.contact-background {
background-image: url("./contact/background.png") !important;
background-color: rgb(255, 255, 255);
@ -70,7 +65,7 @@
background-color: rgb(255, 255, 255);
}
.background {
.home-background {
background-image: url("home/background.jpg") !important;
background-color: rgb(255, 255, 255);
}