feat: Add some readme info and add some more boilerplate code

templates/assets/css/index.css

@@ -17,4 +17,25 @@ a {
 }
 a:hover {
     text-decoration: underline;
+}
+
+/* Mike section styling */
+.mike-section {
+    margin-top: 30px;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 20px;
+    background-color: rgba(50, 50, 50, 0.3);
+    border-radius: 8px;
+}
+
+.mike-section h2 {
+    color: #f0f0f0;
+    margin-top: 0;
+}
+
+.mike-section p {
+    line-height: 1.6;
+    margin-bottom: 15px;
 }

templates/index.html

@@ -13,7 +13,48 @@
     <div class="spacer"></div>
     <div class="centre">
         <h1>Nathan.Woodburn/</h1>
+        <span>The current date and time is {{datetime}}</span>
     </div>
+
+    <div class="spacer"></div>
+    <div class="centre">
+        <h2 id="test-content-header">Pulling data</h2>
+        <span class="test-content">This is a test content area that will be updated with data from the server.</span>
+        <br>
+        <br>
+        <span class="test-content-timestamp">Timestamp: Waiting to pull data</span>
+    </div>
+
+    <script>
+        function fetchData() {
+            // Fetch the data from the server
+            fetch('/api/v1/data')
+                .then(response => response.json())
+                .then(data => {
+                    // Get the data header element
+                    const dataHeader = document.getElementById('test-content-header');
+                    // Update the header with the fetched data
+                    dataHeader.textContent = data.header;
+                    // Get the test content element
+                    const testContent = document.querySelector('.test-content');
+                    // Update the content with the fetched data
+                    testContent.textContent = data.content;
+
+                    // Get the timestamp element
+                    const timestampElement = document.querySelector('.test-content-timestamp');
+                    // Update the timestamp with the fetched data
+                    timestampElement.textContent = `Timestamp: ${data.timestamp}`;
+                })
+                .catch(error => console.error('Error fetching data:', error));
+        }
+
+        // Initial fetch after 2 seconds
+        setTimeout(fetchData, 2000);
+        
+        // Then fetch every 2 seconds
+        setInterval(fetchData, 2000);
+    </script>
+
 </body>
 
 </html>