Skip to content

Commit

Permalink
UX updates to guestbook app
Browse files Browse the repository at this point in the history
  • Loading branch information
Seth Eliot committed Feb 23, 2025
1 parent abf6f91 commit 7c4beb2
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 57 deletions.
124 changes: 67 additions & 57 deletions src/templates/guestbook.html
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<title>Guestbook Entry</title>
<style>
/* Style the form fields to left-align them */
form {
text-align: left;
}
label, input, textarea {
display: block;
margin-bottom: 8px;
}
input[type="text"], textarea {
width: 100%;
max-width: 300px; /* Optional: Limit the width of the input fields */
}
</style>
</head>
<body>
<table border="1" cellpadding="8">
<tr>
<td>Pod Name</td>
<td><b>{{ pod_name }}</b></td>
</tr>
<tr>
<td>Node Name</td>
<td><b>{{ node_name }}</b></td>
</tr>
<tr>
<td>AWS Region</td>
<td><b>{{ region }}</b></td>
</tr>

</table>
<h2><br/>Hello, World! 🌎 -- Please sign the guest book 📖</h2>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guestbook</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 600px;
margin-top: 20px;
background: rgb(232, 245, 246);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.table {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Guestbook 📖</h1>
<p class="text-center text-muted">Sign the guestbook and leave a message!</p>

<table class="table table-bordered">
<tr><td><strong>Pod Name</strong></td><td>{{ pod_name }}</td></tr>
<tr><td><strong>Node Name</strong></td><td>{{ node_name }}</td></tr>
<tr><td><strong>AWS Region</strong></td><td>{{ region }}</td></tr>
</table>

<form action="/" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>

<input type="submit" value="Submit">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message:</label>
<textarea id="message" name="message" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">Submit</button>
</form>

<h2>📖 Current Guestbook Entries:</h2>
<h3 class="mt-4">Guestbook Entries</h3>
{% if entries %}
<ul>
<table border="1" cellpadding="8">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>👋 Name</th>
<th>🍾 Message</th>
<th>🔒 UUID</th>
<th>Name</th>
<th>Message</th>
<th>UUID</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr>
<td>{{ entry['Name'] }}</td>
<td>{{ entry['Message'] }}</td>
<td>{{ entry['GuestID'] }}</td>
</tr>
{% endfor %}
</table>
</ul>
</tbody>
</table>
{% else %}
<p>No entries yet.</p>
<p class="text-muted">No entries yet.</p>
{% endif %}

{% if pv_action %}
<h2>💾 PersistentVolume action:</h2>
<h4>{{pv_action}}</h4>
<h3 class="mt-4">💾 PersistentVolume Action:</h3>
<div class="alert alert-info mt-3">{{ pv_action }}</div>
{% endif %}
{% if error %}
<hr>
<h4 style="color: red;">Error: {{ error }}</h4>
<h3 class="mt-4">❌ Error:</h3>
<div class="alert alert-danger mt-3">{{ error }}</div>
{% endif %}

<hr>
🛠️ Help improve this sample app!<br/>
💻 Make Pull Requests here: <a href="https://github.com/setheliot/xyz_app_poc">https://github.com/setheliot/xyz_app_poc</a>
</body>
</html>

</div>
<!-- Bootstrap JavaScript Bundle (includes Popper.js) -->
<!-- Provided by jsDelivr: https://www.jsdelivr.com/package/npm/bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
80 changes: 80 additions & 0 deletions src/templates/old_guestbook.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>Guestbook Entry</title>
<style>
/* Style the form fields to left-align them */
form {
text-align: left;
}
label, input, textarea {
display: block;
margin-bottom: 8px;
}
input[type="text"], textarea {
width: 100%;
max-width: 300px; /* Optional: Limit the width of the input fields */
}
</style>
</head>
<body>
<table border="1" cellpadding="8">
<tr>
<td>Pod Name</td>
<td><b>{{ pod_name }}</b></td>
</tr>
<tr>
<td>Node Name</td>
<td><b>{{ node_name }}</b></td>
</tr>
<tr>
<td>AWS Region</td>
<td><b>{{ region }}</b></td>
</tr>

</table>
<h2><br/>Hello, World! 🌎 -- Please sign the guest book 📖</h2>
<form action="/" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>

<input type="submit" value="Submit">
</form>

<h2>📖 Current Guestbook Entries:</h2>
{% if entries %}
<ul>
<table border="1" cellpadding="8">
<tr>
<th>👋 Name</th>
<th>🍾 Message</th>
<th>🔒 UUID</th>
</tr>
{% for entry in entries %}
<tr>
<td>{{ entry['Name'] }}</td>
<td>{{ entry['Message'] }}</td>
<td>{{ entry['GuestID'] }}</td>
</tr>
{% endfor %}
</table>
</ul>
{% else %}
<p>No entries yet.</p>
{% endif %}
{% if pv_action %}
<h2>💾 PersistentVolume action:</h2>
<h4>{{pv_action}}</h4>
{% endif %}
{% if error %}
<hr>
<h4 style="color: red;">Error: {{ error }}</h4>
{% endif %}
<hr>
🛠️ Help improve this sample app!<br/>
💻 Make Pull Requests here: <a href="https://github.com/setheliot/xyz_app_poc">https://github.com/setheliot/xyz_app_poc</a>
</body>
</html>

0 comments on commit 7c4beb2

Please sign in to comment.