adding echo pod container

2024-12-19 15:39:37 +01:00
parent 4483b2fa8e
commit 77c155bdb8
7 changed files with 172 additions and 0 deletions
--- a/echo-pod/html/index.html
+++ b/echo-pod/html/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pod Info</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Logo and Kubernetes text -->
+        <div class="logo-container">
+            <img src="k8s-logo.png" alt="Kubernetes Logo" class="logo-img">
+            <span class="k8s-text">Kubernetes</span>
+        </div>
+
+        <!-- Information Box -->
+        <div class="info-box">
+            <!-- Welcome message -->
+            <div class="welcome-message">
+                Welcome from Echo Pod
+            </div>
+
+            <!-- Node name section -->
+            <div class="node-name">
+                Node Name: {{NODE_NAME}}
+            </div>
+
+            <!-- Pod name section -->
+            <div class="pod-name">
+                Pod Name: {{POD_NAME}}
+            </div>
+        </div>
+    </div>
+</body>
+</html>
--- a/echo-pod/html/k8s-logo.png
+++ b/echo-pod/html/k8s-logo.png
--- a/echo-pod/html/style.css
+++ b/echo-pod/html/style.css
@@ -0,0 +1,66 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    position: relative; /* Allow absolute positioning of the footer */
+}
+
+.container {
+    text-align: center;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.logo-img {
+    width: 100px; /* Adjust the logo size here */
+    margin-right: 10px; /* Space between the logo and text */
+}
+
+.k8s-text {
+    font-size: 65px;
+    font-weight: bold;
+    color: #007acc;
+}
+
+.info-box {
+    background-color: white; /* Background color of the box */
+    border: 2px solid #007acc; /* Border color */
+    border-radius: 8px; /* Rounded corners */
+    padding: 20px; /* Space inside the box */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    margin: 20px auto; /* Center the box with margin */
+    width: fit-content; /* Allow width to adjust based on content */
+    max-width: 90%; /* Max width to prevent overflow */
+}
+
+.welcome-message, .node-name, .pod-name {
+    font-size: 20px; /* Font size for all messages */
+    color: #333; /* Text color for contrast */
+    margin: 10px 0; /* Margin for spacing */
+}
+
+.welcome-message {
+    font-size: 20px; /* Font size for all messages */
+    font-weight: bold;
+}
+
+#footer {
+    font-size: 14px;
+    color: #666;
+    position: absolute; /* Change to absolute positioning */
+    bottom: 10px; /* Distance from the bottom */
+    left: 50%; /* Center horizontally */
+    transform: translateX(-50%); /* Adjust to center */
+    text-align: center; /* Center text inside footer */
+    font-style: italic;
+}