This commit is contained in:
allard
2025-04-08 09:12:42 +02:00
parent 54c42acf29
commit 23b73cf7f1
4 changed files with 204 additions and 206 deletions

View File

@@ -1,11 +1,10 @@
FROM icr.io/appcafe/open-liberty:kernel-slim-java17-openj9-ubi FROM icr.io/appcafe/open-liberty:kernel-slim-java17-openj9-ubi
#FROM harbor-dev.alldcs.nl/allard/openliberty-java17
ARG VERSION=1.0 ARG VERSION=1.0
ARG REVISION=SNAPSHOT ARG REVISION=SNAPSHOT
LABEL \ LABEL \
org.opencontainers.image.authors="Your Name" \ org.opencontainers.image.authors="Allard Krings" \
org.opencontainers.image.vendor="IBM" \ org.opencontainers.image.vendor="IBM" \
org.opencontainers.image.url="local" \ org.opencontainers.image.url="local" \
org.opencontainers.image.source="https://github.com/OpenLiberty/guide-getting-started" \ org.opencontainers.image.source="https://github.com/OpenLiberty/guide-getting-started" \

View File

@@ -1,5 +1,5 @@
/******************************************************************************* /*******************************************************************************
* Copyright (c) 2018 IBM Corporation and others. * Copyright (c) 2018, 2024 IBM Corporation and others.
* All rights reserved. This program and the accompanying materials * All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0 * are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at * which accompanies this distribution, and is available at
@@ -8,381 +8,380 @@
* Contributors: * Contributors:
* IBM Corporation - initial API and implementation * IBM Corporation - initial API and implementation
*******************************************************************************/ *******************************************************************************/
@import url("https://fonts.googleapis.com/css?family=Asap:300,400,500");
@font-face { @font-face {
font-family: BunueloLight, sans-serif; font-family: BunueloLight;
src: url("/fonts/BunueloCleanPro-Light.woff"); src: url("/fonts/BunueloCleanPro-Light.otf");
} }
@font-face { @font-face {
font-family: BunueloSemiBold, sans-serif; font-family: BunueloSemiBold;
src: url("/fonts/BunueloCleanPro-SemiBold.woff"); src: url("/fonts/BunueloCleanPro-SemiBold.otf");
} }
body{ body {
font-family:Asap, sans-serif; font-family: BunueloSemiBold;
font-size: 16px; font-size: 16px;
color:#24243b; color: #24243b;
background-color: white; background-color: white;
margin: 0px; margin: 0px;
} }
section { section {
padding-top: 55px; padding-top: 55px;
padding-left: 8%; padding-left: 8%;
padding-right: 8%; padding-right: 8%;
letter-spacing:0; /* font-weight: 400; */
text-align:left; letter-spacing: 0;
text-align: left;
} }
.line { .line {
margin-right: 200px; margin-right: 200px;
height: 1px; height: 1px;
background-color: #C8D3D3; background-color: #C8D3D3;
} }
.headerImage { .headerImage {
background-image: url(/img/header_ufo.png); background-image: url("/img/header_ufo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 20px right 15px; background-position: top 20px right 15px;
height: 103px; height: 103px;
margin-top: -94px; margin-top: -94px;
} }
#whereTo { #whereTo {
padding-bottom: 80px; padding-bottom: 80px;
width: 50%; width: 50%;
} }
p { p {
line-height: 22px; line-height: 22px;
margin-top: 0px; margin-top: 0px;
} }
h1 { h1 {
font-family:BunueloSemiBold, sans-serif; font-family: BunueloSemiBold;
font-size: 40px; font-size: 40px;
font-weight: 400; font-weight: 400;
letter-spacing:0; letter-spacing: 0;
text-align:left; text-align: left;
} }
h2 { h2 {
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
} }
h4 { h4 {
margin-top: 52px; margin-top: 52px;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
#appIntro { #appIntro {
background-image:linear-gradient(#141427 0%, #2c2e50 100%); background-image: linear-gradient(#141427 0%, #2c2e50 100%);
background-size: 100% calc(100% - 70px); background-size: 100% calc(100% - 70px);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#titleSection { #titleSection {
color: white; color: white;
margin-bottom: 80px; margin-bottom: 80px;
} }
#appTitle { #appTitle {
font-family:BunueloLight, sans-serif; font-family: BunueloLight;
font-size:55px; font-size: 55px;
} }
.headerRow { .headerRow {
height: 100px; height: 100px;
position:relative; position: relative;
z-index:2; z-index: 2;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
} }
.headerRow > div { .headerRow > div {
display: inline-block; display: inline-block;
} }
.collapsibleRow { .collapsibleRow {
transition: border 400ms ease-out, box-shadow 200ms linear; transition: border 400ms ease-out, box-shadow 200ms linear;
cursor: pointer; cursor: pointer;
box-shadow: none;
border-bottom: 4px solid;
} }
.collapsibleRow:hover .headerTitle { .collapsibleRow:hover .headerTitle {
background-color: #f4f4f4; background-color: #f4f4f4;
transition: background-color 0.1s; transition: background-color 0.1s;
} }
.collapsed { .collapsed .collapsibleRow {
box-shadow: none; box-shadow: none;
border-bottom: 4px solid; border-bottom: 4px solid;
transition: all 400ms ease-out, opacity 300ms ease-in;
opacity: 0;
max-height: 0;
visibility: hidden;
} }
.collapsed#healthSection > .headerRow { .collapsed#healthSection > .headerRow {
border-bottom-color: #D6D9E4; border-bottom-color: #D6D9E4;
} }
.collapsed#configSection > .headerRow { .collapsed#configSection > .headerRow {
border-bottom-color: #F8D7C1; border-bottom-color: #F8D7C1;
} }
.collapsed#metricsSection > .headerRow { .collapsed#metricsSection > .headerRow {
border-bottom-color: #EEF3C3; border-bottom-color: #EEF3C3;
}
.collapsibleContent { /* collapsing animation */
opacity: 0;
max-height: 0;
visibility: hidden;
transition: all 400ms ease-out, opacity 300ms ease-in;
}
.expanded { /* expanding animation */
transition: all 400ms ease-out, opacity 450ms ease-out;
opacity: 1;
max-height: 1000px;
visibility: visible;
}
.headerIcon {
width: 160px;
height: 100%;
float: left;
background-color: #E8EAEF;
}
.headerIcon img {
display:block;
margin:auto;
margin-top: 20px;
} }
#healthSection { .collapsed .collapsibleContent { /* collapsing animation */
background-color: #E8EAEF; transition: all 400ms ease-out, opacity 300ms ease-in;
}
.expanded .collapsibleContent { /* expanding animation */
transition: all 400ms ease-out, opacity 450ms ease-out;
}
.collapsed .collapsibleContent {
opacity: 0;
max-height: 0;
visibility: hidden;
}
.expanded .collapsibleContent {
opacity: 1;
max-height: 1000px;
visibility: visible;
}
.headerIcon {
width: 160px;
height: 100%;
float: left;
background-color: #E8EAEF;
}
.headerIcon img {
display: Block;
margin:auto;
margin-top: 20px;
}
#healthSection .headerIcon {
background-color: #E8EAEF;
} }
#configSection .headerIcon { #configSection .headerIcon {
background-color: #FDE4D1; background-color: #FDE4D1;
} }
#metricsSection .headerIcon { #metricsSection .headerIcon {
background-color: #F5F8DA; background-color: #F5F8DA;
} }
.headerTitle { .headerTitle {
background-color: white; background-color: white;
color:#5d6a8e; color: #5d6a8e;
letter-spacing:0; letter-spacing:0;
text-align:left; text-align:left;
padding-left: 40px; padding-left: 40px;
padding-top: 10px; padding-top: 10px;
width: calc(100% - 200px); /* 160 from icon, 40 from padding */ width: calc(100% - 200px); /* 160 from icon, 40 from padding */
} }
#healthSection h2 { #healthSection h2 {
color: #5D6A8E; color: #5D6A8E;
} }
#configSection h2 { #configSection h2 {
color: #E57000; color: #E57000;
} }
#metricsSection h2 { #metricsSection h2 {
color: #4F6700; color: #4F6700;
} }
#sysPropTitle { #sysPropTitle {
padding-top: 28px; padding-top: 28px;
} }
.headerTitle > h2 { .headerTitle > h2 {
font-family: BunueloLight, sans-serif; font-family: BunueloLight;
font-size:40px; font-size: 40px;
margin: 0; margin: 0;
} }
.caret { .caret {
position: absolute; position: absolute;
right: 45px; right: 45px;
top: 45px; top: 45px;
} }
.collapsed#configSection .caret { .collapsed#configSection .caret {
background-image: url("../img/carets/caret_down_orange.svg") background-image: url("../img/carets/caret_down_orange.svg")
} }
.expanded#configSection .caret { .expanded#configSection .caret {
background-image: url("../img/carets/caret_up_orange.svg") background-image: url("../img/carets/caret_up_orange.svg")
} }
.msSection { .msSection {
background: white; background: white;
box-shadow: 0 2px 4px 0 rgba(63,70,89,0.31); box-shadow: 0 2px 4px 0 rgba(63,70,89,0.31);
} }
.sectionContent { .sectionContent {
margin-left: 160px; margin-left: 160px;
} }
#systemPropertiesTable { #systemPropertiesTable {
padding-left: 160px; padding-left: 160px;
background: white; background: white;
} }
button { button {
border-radius:100px; border-radius: 100px;
height:44px; height: 44px;
color:#24253a; color: #24253a;
text-align:center; text-align: center;
font-family: Asap, sans-serif; font-family: BunueloSemiBold;
margin-top: 25px; margin-top: 25px;
margin-bottom: 70px; margin-bottom: 70px;
cursor: pointer; cursor: pointer;
border: none; border: none;
} }
button a { button a {
text-decoration: none; text-decoration: none;
color:#F4914D; color: #F4914D;
} }
#guidesButton { #guidesButton {
background-color:#abd155; background-color: #abd155;
width:269px; width: 269px;
font-weight: 500; font-weight: 500;
font-size:16px; font-size: 16px;
transition: background-color .2s; transition: background-color .2s;
} }
#guidesButton:hover { #guidesButton:hover {
background-color: #C7EE63; background-color: #C7EE63;
} }
#mpGuidesButton { #mpGuidesButton {
border:2px solid #f4914d8c; border: 2px solid #f4914d8c;
border-radius:100px; border-radius: 100px;
font-size:20px; font-size: 20px;
letter-spacing:0; letter-spacing: 0;
padding-left: 40px; padding-left: 40px;
padding-right: 40px; padding-right: 40px;
background-color: white; background-color: white;
transition: background-color .2s, color .2s; transition: background-color .2s, color .2s;
} }
#mpGuidesButton:hover { #mpGuidesButton:hover {
background-color: #f4914d; background-color: #f4914d;
color: white; color: white;
} }
section#openLibertyAndMp { section#openLibertyAndMp {
background:#f4f4f5; background: #f4f4f5;
background-size: 100% calc(100% - 70px); background-size: 100% calc(100% - 70px);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#healthBox { #healthBox {
text-align: left; text-align: left;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
width: 47%; width: 47%;
} }
#healthBox > div { #healthBox > div {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
#healthIcon { #healthIcon {
padding-left: 73px; padding-left: 73px;
padding-top: 56px; padding-top: 56px;
padding-bottom: 56px; padding-bottom: 56px;
} }
#healthStatusIcon { #healthStatusIcon {
width: 104px; width: 104px;
height: 104px; height: 104px;
} }
#healthText { #healthText {
padding: 50px; padding: 50px;
} }
#serviceStatus { #serviceStatus {
font-size: 50px; font-size: 50px;
font-family:BunueloLight, sans-serif; font-family: BunueloLight;
margin-top: 30px; margin-top: 30px;
} }
#healthNote { #healthNote {
text-align: left; text-align: left;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-left: 43px; padding-left: 43px;
line-height: 26px; line-height: 26px;
width: 53%; width: 53%;
} }
table { table {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
border-collapse: collapse; border-collapse: collapse;
} }
th { th {
height: 63px; height: 63px;
padding-left: 41px; padding-left: 41px;
font-size: 16px; font-size: 16px;
} }
tr { tr {
height: 45px; height: 45px;
} }
td { td {
padding-left: 41px; padding-left: 41px;
} }
#systemPropertiesTable tr:first-child { #systemPropertiesTable tr:first-child {
background: #D6D9E4; background: #D6D9E4;
} }
#configTable tr:first-child { #configTable tr:first-child {
background: #F8D7C1; background: #F8D7C1;;
} }
#metricsTable tr:first-child { #metricsTable tr:first-child {
background: #EEF3C3; background: #EEF3C3;
} }
#systemPropertiesTable tr:nth-child(2n+3) { #systemPropertiesTable tr:nth-child(2n+3) {
background: #EEEFF3; background: #EEEFF3;
} }
#configTable tr:nth-child(2n+2) { #configTable tr:nth-child(2n+2) {
background: #FEF8F4; background: #FEF8F4;
} }
#metricsTable tr:nth-child(2n+2) { #metricsTable tr:nth-child(2n+2) {
background: #FBFCEE; background: #FBFCEE;
} }
#systemPropertiesTable .sourceRow, #systemPropertiesTable .sourceRow,
#healthTable .sourceRow { #healthTable .sourceRow {
border-top: 4px solid #D6D9E4; border-top: 4px solid #D6D9E4;
} }
#systemPropertiesTable .sourceRow a, #systemPropertiesTable .sourceRow a,
#healthTable .sourceRow a { #healthTable .sourceRow a {
color: #5D6A8E; color: #5D6A8E;
} }
#configTable .sourceRow { #configTable .sourceRow {
border-top: 4px solid #F8D7C1; border-top: 4px solid #F8D7C1;
} }
#configTable .sourceRow a { #configTable .sourceRow a {
color: #E57000; color: #E57000;
} }
#metricsTable .sourceRow { #metricsTable .sourceRow {
border-top: 4px solid #EEF3C3; border-top: 4px solid #EEF3C3;
} }
#metricsTable .sourceRow a { #metricsTable .sourceRow a {
color: #4F6700; color: #4F6700;
} }
.sourceRow a { .sourceRow a {
font-weight: 500; font-weight: 500;
} }
#learnMore { #learnMore {
margin-top: 120px; margin-top: 120px;
padding: 0px 200px 100px; padding: 0px 200px 100px;
} }
#learnMore > h2 { #learnMore > h2 {
color:#5e6b8d; color: #5e6b8d;
} }
.bodyFooter { .bodyFooter {
padding: 5px 8%; padding: 5px 8%;
background-image: url(/img/footer_main.png); background-image: url("/img/footer_main.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 20px right 110px; background-position: top 20px right 110px;
margin-bottom: 40px; margin-bottom: 40px;
@@ -391,7 +390,7 @@ td {
} }
.bodyFooterLink { .bodyFooterLink {
font-family: Asap, sans-serif; font-family: BunueloSemiBold;
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 14px;
letter-spacing: 0; letter-spacing: 0;
@@ -404,9 +403,9 @@ td {
} }
.bodyFooterLink > a { .bodyFooterLink > a {
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
color: #96bc32; color: #96bc32;
} }
#licenseLink { #licenseLink {
@@ -415,9 +414,9 @@ td {
} }
#footer_text { #footer_text {
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 16px; font-size: 16px;
} }
#footer_copyright { #footer_copyright {

View File

@@ -9,7 +9,7 @@
<body> <body>
<section id="appIntro"> <section id="appIntro">
<div id="titleSection"> <div id="titleSection">
<h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 2.1</h1> <h1 id="appTitle">Java-PitStop Openliberty/Java17 voorbeeld 1.4</h1>
<div class="line"></div> <div class="line"></div>
<div class="headerImage"></div> <div class="headerImage"></div>
<h2>Open Liberty Java17 applicatie op Container Hosting Platform!</h2> <h2>Open Liberty Java17 applicatie op Container Hosting Platform!</h2>

View File

@@ -1 +1 @@
20250327-4 20250405-0824