Patrick.Sy/edgeconnect-action-demo
1
0
Fork 0
forked from DevFW-CICD/edgeconnect-action-demo
Code Pull requests Projects Releases Packages Activity Actions

Added EDP EdgeXR test page

Browse source
This commit is contained in:
Richard Robert Reitz 2025-08-14 14:49:50 +02:00
parent 4832520b73
commit 7fa6ce9810
2 changed files with 113 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Dockerfile
View file

@ -2,4 +2,4 @@ FROM nginx
RUN rm -rf /usr/share/nginx/html/*
ADD index.html /usr/share/nginx/html/
COPY --chmod=644 index.html /usr/share/nginx/html/

111
index.html
View file

@ -1,5 +1,112 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Text with Image</title>
<!--
The following script loads Tailwind CSS, which is used for rapid styling.
The CSS below uses basic selectors to demonstrate how to achieve the
requested layout without relying solely on a framework.
-->
<style>
/* This applies a smooth, rounded border to all elements. */
* {
border-radius: 0.5rem;
}
/*
The body is a flex container to center its child element.
- display: flex makes it a flexible box container.
- justify-content: center centers the child horizontally.
- align-items: center centers the child vertically.
- min-height: 100vh ensures the body takes up the full viewport height.
- background-color: black sets the background color as requested.
- color: magenta sets the text color for the entire body as requested.
*/
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: black;
color: #e20074;
font-family: 'Inter', sans-serif;
margin: 0;
padding: 1rem;
}
/*
This container holds both the image and the text.
- It uses flexbox to arrange the items in a row.
- align-items: center vertically aligns the image and the text.
- The gap adds space between the image and the text.
- max-width prevents the content from stretching too wide on large screens.
- The padding adds some space inside the container.
*/
.content-container {
align-items: center;
flex-wrap: wrap; /* Allows wrapping on smaller screens */
gap: 2rem;
max-width: 90%;
padding: 1.5rem;
text-align: center;
justify-content: center;
}
/*
The image styling.
- max-width ensures the image is responsive.
- height: auto maintains the aspect ratio.
*/
.content-container img {
width: 150px;
height: auto;
}
/*
The text styling.
- font-size: 6rem makes the text very large.
- font-weight: bold makes the text stand out.
- line-height ensures there is enough space around the text.
*/
.content-container h1 {
font-size: clamp(3rem, 10vw, 6rem); /* Responsive font size */
font-weight: bold;
line-height: 1;
margin: 0;
}
/*
This media query adjusts the layout for smaller screens.
- It changes the flex direction to column, stacking the image and text.
- The text alignment is centered.
*/
@media (max-width: 600px) {
.content-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>YE-HAW</h1>
<div class="content-container">
<!--
This is a placeholder image. You should replace the 'src'
attribute with the URL of your own image. The `onerror`
attribute provides a fallback in case the image fails to load.
-->
<img
src="https://edp.buildth.ing/assets/img/logo.svg"
>
<br />
<!-- The main heading text, styled to be large and centered -->
<h1>EDP meets EdgeXR</h1>
</div>
</body>
</html>