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

updated draft

parent 4fd5a232
No related branches found
No related tags found
1 merge request!13Resolve "Update landing page layout to comply with new vNOC approach"
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 { ...@@ -85,3 +85,7 @@ a:hover {
align-items: center; align-items: center;
flex-direction: row; 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"> <footer class="footer col-xs-12" id="global-footer">
<div class="container"> <div class="container-width">
<div class="row row-center"> <div class="row row-center">
<div class="col-sm-2"> <div class="col-sm-2">
<!-- NMaaS Logo optionally --> <!-- NMaaS Logo optionally -->
<a href="https://www.geant.org/"> <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> </a>
</div> </div>
<div class="col-sm-3"> <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="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<a routerLink="/"><img alt="Geant" src="assets/images/logo-small.png" style="margin: 5px; height:35px"></a> <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 { html, body {
min-height: 100vh; min-height: 100vh;
} }
.w-50{
.container-fluid { width: 50%;
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%;
} }
.flex{ .flex{
display: flex; display: flex;
...@@ -80,12 +12,66 @@ html, body { ...@@ -80,12 +12,66 @@ html, body {
} }
.button{ .button{
text-decoration: none; text-decoration: none;
background: #DC6E28;
font-weight: bold; font-weight: bold;
color:#ffffff; color:#ffffff;
border-radius: 30px; border-radius: 30px;
padding:12px 25px; padding:10px 20px;
}
.button-vNOC{
background: #DC6E28;
}
.button-vLAB{
background: #E9A143;
} }
.margin2{ .margin2{
margin: 3rem 0; 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 @@ ...@@ -10,179 +10,138 @@
</div> </div>
<div *ngIf="landingProfile === 'VNOC'; else elseBlock"> <div *ngIf="landingProfile === 'VNOC'; else elseBlock">
<div class="row">
<div class="container-fluid" > <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
<div class="row"> style="text-align: justify; padding: 0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container" <div class="col-lg-12" style="padding: 0">
style="text-align: justify; font-size: large; padding: 0"> <section class="flex" style="justify-content: space-between; align-items: center;">
<div class="col-lg-12"> <div class="flex flex-column w-50" style="padding-left:160px; align-items: center">
<section class="flex" style="justify-content: space-between; align-items: center; margin-top: 70px"> <div>
<div class=" w-40" style="margin-left:200px; padding-right: 100px"> <img src="assets/images/landing/VirtualNOC.png" width="70%">
<img src="assets/images/landing/VirtualNOC.png" width="80%"> <p class="margin2" style="width: 70%">
<p class="margin2">
sample headline sample headline
</p> </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 Learn more
</a> </a>
</div> </div>
<div class="flex w-40" style="justify-content: end"> </div>
<img src="assets/images/landing/g1.png" width="100%"> <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> </div>
</section> </section>
</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">-->
<!-- <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" <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'" [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 panel-default">
<div class="panel-heading"> <div class="panel-heading">
</div> </div>
...@@ -191,64 +150,14 @@ ...@@ -191,64 +150,14 @@
<li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}"> <li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
<a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li> <a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
<li role="registration" [routerLinkActive]="['active']" <li role="registration" [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact:true}"><a [routerLinkActiveOptions]="{exact:true}">
[routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li> <a [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
</ul> </ul>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</div> </div>
</div> </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> </div>
</ng-template> </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