Skip to content
Snippets Groups Projects
Commit 34ccc4be authored by Joanna Kaźmierczak's avatar Joanna Kaźmierczak
Browse files

updated draft

parent 4fd5a232
Branches
Tags
1 merge request!13Resolve "Update landing page layout to comply with new vNOC approach"
This commit is part of merge request !13. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/app/shared/footer/footer.component.css
+ 4
− 0
View file @ 34ccc4be
......@@ -85,3 +85,7 @@ a:hover {
align-items: center;
flex-direction: row;
}
.container-width {
width: 85vw;
margin: auto;
}
src/app/shared/footer/footer.component.html
+ 2
− 2
View file @ 34ccc4be
<footer class="footer col-xs-12" id="global-footer">
<div class="container">
<div class="container-width">
<div class="row row-center">
<div class="col-sm-2">
<!-- NMaaS Logo optionally -->
<a href="https://www.geant.org/">
<img alt="Geant Logo" src="/assets/images/geant-logo.png" class="image-link"/>
<img alt="Geant Logo" src="/assets/images/geant-logo.png" width="200" class="image-link"/>
</a>
</div>
<div class="col-sm-3">
......
src/app/shared/navbar/navbar.component.html
+ 1
− 1
View file @ 34ccc4be
<nav class="navbar navbar-default" id="navbar" role="navigation">
<nav class="navbar navbar-default" id="navbar" role="navigation" style="margin:0">
<div class="container-fluid">
<div class="navbar-header">
<a routerLink="/"><img alt="Geant" src="assets/images/logo-small.png" style="margin: 5px; height:35px"></a>
......
src/app/welcome/welcome.component.css
+ 58
− 72
View file @ 34ccc4be
html, body {
min-height: 100vh;
}
.container-fluid {
min-height: 70vh;
background-repeat: no-repeat;
background-color: rgb(255, 255, 255);
padding-bottom: 50px;
}
.vertical-offset {
margin-top: 50px;
}
.landing-img-sm{
width: 100%;
height: 100%;
max-width: 200px;
max-height: 160px;
}
.landing-img-lg{
width: 100%;
height: 100%;
max-width: 500px;
max-height: 400px;
}
.landing-img-left{
padding-left: 15px;
}
.landing-img-right{
padding-right: 15px;
}
.landing-img-logo{
width: 100%;
height: 100%;
max-height: 150px;
max-width: 200px;
}
.landing-block-padding{
padding-top: 4vh;
}
.features-bottom-padding{
padding-bottom: 1px;
}
.features-top-padding{
padding-top: 15px;
}
.banner{
background-color : #424242;
color: #E8E8E8;
margin-top: -20px;
padding: 12px;
justify-self: center;
display: grid;
width: 100%;
}
.container {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
}
.w-40{
width: 40%;
.w-50{
width: 50%;
}
.flex{
display: flex;
......@@ -80,12 +12,66 @@ html, body {
}
.button{
text-decoration: none;
background: #DC6E28;
font-weight: bold;
color:#ffffff;
border-radius: 30px;
padding:12px 25px;
padding:10px 20px;
}
.button-vNOC{
background: #DC6E28;
}
.button-vLAB{
background: #E9A143;
}
.margin2{
margin: 3rem 0;
}
.shape {
padding-bottom: 25px;
border-radius: 100% 100% 0 0;
background: #FFF6EF;
height: 100%;
width: 80%;
overflow: hidden;
box-shadow: inset 0 6px 7px rgba(0, 0, 0, .2)
}
.position {
transform: rotate(-90deg);
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
width: 65%;
background-color: #ffffff;
}
.map {
height: 80%;
width: 100%;
}
.cls-1,.cls-2 {
fill:none;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-width:3px;
}
.cls-1{
stroke:#E57002;
}
.cls-2{
stroke:#EEA054;
}
.line {
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: draw 10s infinite alternate;
}
@keyframes draw {
from {
stroke-dashoffset: 400;
}
to {
stroke-dashoffset: 0;
}
}
src/app/welcome/welcome.component.html
+ 125
− 216
View file @ 34ccc4be
......@@ -10,179 +10,138 @@
</div>
<div *ngIf="landingProfile === 'VNOC'; else elseBlock">
<div class="container-fluid" >
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
style="text-align: justify; font-size: large; padding: 0">
<div class="col-lg-12">
<section class="flex" style="justify-content: space-between; align-items: center; margin-top: 70px">
<div class=" w-40" style="margin-left:200px; padding-right: 100px">
<img src="assets/images/landing/VirtualNOC.png" width="80%">
<p class="margin2">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
style="text-align: justify; padding: 0">
<div class="col-lg-12" style="padding: 0">
<section class="flex" style="justify-content: space-between; align-items: center;">
<div class="flex flex-column w-50" style="padding-left:160px; align-items: center">
<div>
<img src="assets/images/landing/VirtualNOC.png" width="70%">
<p class="margin2" style="width: 70%">
sample headline
</p>
<a href="https://vnoc.docs.nmaas.eu/" class="button margin2">
<a href="https://vnoc.docs.nmaas.eu/" class="button button-vNOC margin2">
Learn more
</a>
</div>
<div class="flex w-40" style="justify-content: end">
<img src="assets/images/landing/g1.png" width="100%">
</div>
<div class="flex w-50" style="justify-content: end">
<div class="position">
<div class="shape">
<svg class="map" xmlns="http://www.w3.org/2000/svg" viewBox="136 0 180 220">
<path id="green-line" class="line cls-2" d="M 210 0 l 0 37 a 1 1 0 0 1 0 5 a 1 1 0 0 1 0 -5" transform="translate(-27 0)"/>
<path id="yellow-line" class="line cls-1" d="M 222 0 l 0 46 L 209 63 L 209 85 A 1 1 0 0 1 209 91 A 1 1 0 0 1 209 85" transform="translate(-27 0)"/>
<path id="green-line" class="line cls-2" d="M 234 0 l 0 60 L 234 60 L 234 60 A 1 1 0 0 1 234 66 A 1 1 0 0 1 234 60" transform="translate(-27 0)"/>
<path id="green-line" class="line cls-1" d="M 245 0 l 1 54 l 12 19 l 0 41 a 1 1 0 0 1 0 7 a 1 1 0 0 1 0 -7" transform="translate(-27 0)"/>
<path id="green-line" class="line cls-1" d="M 260 0 l 0 38 l 12 15 l 0 46 a 1 1 0 0 1 0 6 a 1 1 0 0 1 0 -6" transform="translate(-27 0)"/>
<path id="green-line" class="line cls-2" d="M 278 0 l 0 25 a 1 1 0 0 1 0 5 a 1 1 0 0 1 0 -5" transform="translate(-27 0)"/>
<path id="green-line" class="line cls-1" d="M 295 0 l 0 49 l -8 14 l 0 70 a 1 1 0 0 1 0 6 a 1 1 0 0 1 0 -6" transform="translate(-27 0)"/>
<path id="green-line" class="line cls-2" d="M 310 0 l 0 80 a 1 1 0 0 1 0 5 a 1 1 0 0 1 0 -5" transform="translate(-27 0)"/>
</svg>
</div>
</div>
</div>
</section>
</div>
<div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset"
[ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px; padding-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body" id="login-out" style="overflow-y: auto;">
<ul class="nav nav-tabs nav-justified">
<li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
<a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
<li role="registration" [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
</ul>
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #elseBlock>
<div>
<div class="row">
<div class="" id="welcome-container"
style="text-align: justify; padding: 0">
<div class="col-lg-12" style="padding: 0">
<section class="flex" style="justify-content: space-between; align-items: center;">
<div class="flex flex-column w-50" style="padding-left:160px; align-items: center">
<div>
<img src="assets/images/landing/VirtualLab.png" width="70%">
<p class="margin2" style="width: 70%">
sample headline
</p>
<a href="https://vnoc.docs.nmaas.eu/" class="button button-vLAB margin2">
Learn more
</a>
</div>
</div>
<div class="flex w-50" style="justify-content: end">
<svg width="60%" height="80%" viewBox="0 275 275 275" xmlns="http://www.w3.org/2000/svg">
<g transform="scale(1) translate(0, 0)">
<path fill="#C0B4CF">
<animate attributeName="d" dur="21s" repeatCount="indefinite"
values="M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C370,0 500,150 500,275 C500,400 370,550 275,550 C180,550 50,400 50,275 C50,150 180,0 275,0 Z;
M275,0 C420,0 550,150 550,275 C550,400 420,550 275,550 C130,550 0,400 0,275 C0,150 130,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C350,0 500,150 500,275 C500,400 350,550 275,550 C200,550 50,400 50,275 C50,150 200,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z"
/>
</path>
</g>
<g transform="scale(0.9) translate(27.5, 27.5)">
<path fill="#AC9CC0" >
<animate attributeName="d" dur="20s" repeatCount="indefinite"
values="M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C370,0 500,150 500,275 C500,400 370,550 275,550 C180,550 50,400 50,275 C50,150 180,0 275,0 Z;
M275,0 C420,0 550,150 550,275 C550,400 420,550 275,550 C130,550 0,400 0,275 C0,150 130,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C350,0 500,150 500,275 C500,400 350,550 275,550 C200,550 50,400 50,275 C50,150 200,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z"
/>
</path>
</g>
<g transform="scale(0.8) translate(55, 55)">
<path fill="#A391B9">
<animate attributeName="d" dur="18s" repeatCount="indefinite"
values="M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C370,0 500,150 500,275 C500,400 370,550 275,550 C180,550 50,400 50,275 C50,150 180,0 275,0 Z;
M275,0 C420,0 550,150 550,275 C550,400 420,550 275,550 C130,550 0,400 0,275 C0,150 130,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C350,0 500,150 500,275 C500,400 350,550 275,550 C200,550 50,400 50,275 C50,150 200,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z"
/>
</path>
</g>
<g transform="scale(0.7) translate(82.5, 82.5)">
<path fill="#785C97">
<animate attributeName="d" dur="19s" repeatCount="indefinite"
values="M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C370,0 500,150 500,275 C500,400 370,550 275,550 C180,550 50,400 50,275 C50,150 180,0 275,0 Z;
M275,0 C420,0 550,150 550,275 C550,400 420,550 275,550 C130,550 0,400 0,275 C0,150 130,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z;
M275,0 C350,0 500,150 500,275 C500,400 350,550 275,550 C200,550 50,400 50,275 C50,150 200,0 275,0 Z;
M275,0 C400,0 550,150 550,275 C550,400 400,550 275,550 C150,550 0,400 0,275 C0,150 150,0 275,0 Z"
/>
</path>
</g>
</svg>
</div>
</section>
</div>
<!-- <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12">-->
<!-- <div style="display: block;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel-body">-->
<!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-bottom: 20px;">-->
<!-- <h2><strong>{{ 'WELCOME.TITLE1' | translate }}</strong> (<a href="https://www.geant.org/NMaaS"-->
<!-- target="_blank"-->
<!-- rel="noopener noreferrer">NMaaS</a>)-->
<!-- {{ 'WELCOME.TITLE2'| translate }}</h2>-->
<!-- </div>-->
<!-- <div style="padding-left: 10px;" class="col-lg-6 col-md-12 col-sm-12 col-xs-12">-->
<!-- <p>-->
<!-- {{ 'WELCOME.INTRO_TEXT' | translate }}-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">-->
<!-- <img src="../../assets/images/landing/nmaas_schema_simple_text.png"-->
<!-- class="center-block glyphicon-align-center landing-img-sm"-->
<!-- style="width: 100%; height: 100%; max-width: 800px; max-height: 600px;" alt="NMaaS Schema">-->
<!-- </div>-->
<!-- </div>-->
<!-- <br>-->
<!-- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">-->
<!-- <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 ">-->
<!-- <img src="../../assets/images/landing/people_2.png" alt="Users"-->
<!-- class="center-block landing-img-sm landing-img-left">-->
<!-- </div>-->
<!-- <div style="padding-left: 10px;" class="col-lg-9 col-md-8 col-sm-12 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.TARGET_USERS_HEADER' | translate }}</h3>-->
<!-- <p>-->
<!-- {{ 'WELCOME.TARGET_USERS_TEXT' | translate }}-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <br>-->
<!-- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">-->
<!-- <div style="padding-left: 10px;" class="col-lg-8 col-md-12 col-sm-12 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.MARKETPLACE_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.MARKETPLACE_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">-->
<!-- <img src="../../assets/images/landing/shop_2.png" alt="Marketplace icon"-->
<!-- class="glyphicon-align-center center-block landing-img-sm landing-img-right">-->
<!-- </div>-->
<!-- </div>-->
<!-- <br>-->
<!-- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">-->
<!-- <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">-->
<!-- <img src="../../assets/images/landing/costs_3.png" alt="Cost reduction icon"-->
<!-- class="center-block landing-img-sm landing-img-left">-->
<!-- </div>-->
<!-- <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.COST_REDUCTION_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.COST_REDUCTION_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">-->
<!-- <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.SECURITY_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.SECURITY_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">-->
<!-- <img src="../../assets/images/landing/security.png" alt="Security icon"-->
<!-- class="center-block landing-img-sm landing-img-right"/>-->
<!-- </div>-->
<!-- </div>-->
<!-- <br>-->
<!-- </div>-->
<!-- <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"-->
<!-- style="border-top: solid 1px #6c757d; margin-top: 20px;">-->
<!-- <div class="col-lg-offset-4 col-lg-4 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center features-bottom-padding features-top-padding">-->
<!-- <h2>{{ 'WELCOME.NMAAS_FEATURES_HEADER' | translate }}</h2>-->
<!-- </div>-->
<!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">-->
<!-- <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.APP_MARKET_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.APP_MARKET_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.OWN_APPS_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.OWN_APPS_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">-->
<!-- <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.EDUGAIN_SUPPORT_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.EDUGAIN_SUPPORT_TEXT' | translate }}-->
<!-- <p>-->
<!-- </div>-->
<!-- <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.FAST_DEPLOYMENT_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.FAST_DEPLOYMENT_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">-->
<!-- <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.WEB_PORTAL_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.WEB_PORTAL_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">-->
<!-- <h3>{{ 'WELCOME.KUBERNETES_HEADER' | translate }}</h3>-->
<!-- <p>{{ 'WELCOME.KUBERNETES_TEXT' | translate }}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"-->
<!-- style="border-top: solid 1px #6c757d; margin-top: 20px;">-->
<!-- <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-2 col-sm-8 col-xs-12 text-center"-->
<!-- style="padding-top: 15px;-->
<!-- padding-bottom: 10px;"><h2>{{ 'WELCOME.TECHNOLOGIES_USED_HEADER' | translate }}</h2></div>-->
<!-- <div class="center-block col-lg-12 col-md-12 col-sm-12 col-xs-12">-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://angular.io/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/angular.png" alt="Angular logo" class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/bootstrap.png" alt="Bootstrap logo"-->
<!-- class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://spring.io/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/spring.png" alt="Spring logo"-->
<!-- class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://www.postgresql.org/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/postgres.png" alt="PostgreSQL logo"-->
<!-- class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/docker.png" alt="Docker logo"-->
<!-- class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://kubernetes.io/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/kuber.png" alt="Kubernetes logo"-->
<!-- class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/gitlab.png" alt="Gitlab logo"-->
<!-- class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">-->
<!-- <a href="https://www.ansible.com/" target="_blank" rel="noopener noreferrer nofollow">-->
<!-- <img src="../../assets/images/logo/ansible.png" alt="Ansible logo" class="landing-img-logo"></a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset"
[ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px;">
style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px; padding-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">
</div>
......@@ -191,64 +150,14 @@
<li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
<a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
<li role="registration" [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
</ul>
[routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
</ul>
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #elseBlock>
<div>
<div class="container-fluid" >
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
style="text-align: justify; font-size: large; padding: 0">
<div class="col-lg-12">
<section class="flex" style="justify-content: space-between; align-items: center; margin-top: 70px">
<div class=" w-40" style="margin-left:200px; padding-right: 100px">
<img src="assets/images/landing/VirtualNOC.png" width="80%">
<p class="margin2">
sample headline NOT VNOC
</p>
<a href="https://vnoc.docs.nmaas.eu/" class="button margin2">
Learn more
</a>
</div>
<div class="flex w-40" style="justify-content: end">
<img src="assets/images/landing/g1.png" width="100%">
</div>
</section>
</div>
<div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset"
[ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px;">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body" id="login-out" style="overflow-y: auto;">
<ul class="nav nav-tabs nav-justified">
<li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
<a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
<li role="registration" [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
</ul>
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
src/assets/images/landing/VirtualLab.png 0 → 100644
+ 0
− 0
View file @ 34ccc4be
src/assets/images/landing/VirtualLab.png

35.3 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment