From 7fa6ce9810e2629295b66dfe8cd7483cec215915 Mon Sep 17 00:00:00 2001
From: Richard Robert Reitz <richard-robert.reitz@telekom.de>
Date: Thu, 14 Aug 2025 14:49:50 +0200
Subject: [PATCH] Added EDP EdgeXR test page

---
 Dockerfile |   2 +-
 index.html | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 113 insertions(+), 6 deletions(-)
diff --git a/Dockerfile b/Dockerfile
index 1f74906..c98e24d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,4 +2,4 @@ FROM nginx
 
 RUN rm -rf /usr/share/nginx/html/*
 
-ADD index.html /usr/share/nginx/html/
\ No newline at end of file
+COPY --chmod=644 index.html /usr/share/nginx/html/
diff --git a/index.html b/index.html
index 657e011..bc50627 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,112 @@
-<html>
-    <body>
-        <h1>YE-HAW</h1>
-    </body>
-</html>
\ No newline at end of file
+<!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>
+
+    <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>
