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

README.md

@@ -1,3 +1,19 @@
-# python-webserver-template
+# Python Flask Webserver Template
 
 Python3 website template including git actions
+
+# Development
+1. Install requirements
+```bash
+python3 -m pip install -r requirements.txt
+```
+2. Run the dev server
+```bash
+python3 server.py
+```
+
+# Production
+Run using the main.py file
+```bash
+python3 main.py
+```

server.py

@@ -74,7 +74,9 @@ def wellknown(path):
 # region Main routes
 @app.route("/")
 def index():
-    return render_template("index.html")
+    # Get current time in the format "dd MMM YYYY hh:mm AM/PM"
+    current_datetime = datetime.now().strftime("%d %b %Y %I:%M %p")
+    return render_template("index.html", datetime=current_datetime)
 
 
 @app.route("/<path:path>")
@@ -102,6 +104,31 @@ def catch_all(path: str):
 # endregion
 
 
+# region API routes
+
+api_requests = 0
+
+@app.route("/api/v1/data", methods=["GET"])
+def api_data():
+    """
+    Example API endpoint that returns some data.
+    You can modify this to return whatever data you need.
+    """
+
+    global api_requests
+    api_requests += 1
+
+    data = {
+        "header": "Sample API Response",
+        "content": f"Hello, this is a sample API response! You have called this endpoint {api_requests} times.",
+        "timestamp": datetime.now().isoformat(),
+    }
+    return jsonify(data)
+
+
+# endregion
+
+
 # region Error Catching
 # 404 catch all
 @app.errorhandler(404)

templates/assets/css/index.css

@@ -18,3 +18,24 @@ 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>