frontend changes

dmapp/dmweb/templates/pages.html

@@ -1,16 +1,81 @@
 {% extends 'layout.html' %}
 
-{% block content  %}
+{% block head %}
+<style>
+	body {
+		background-color: #1a1a1a;
+		color: #e0e0e0;
+		margin: 20px;
+		font-family: monospace;
+	}
+
+	.nav-bar {
+		display: flex;
+		gap: 20px;
+		margin-bottom: 30px;
+		padding-bottom: 15px;
+		border-bottom: 2px solid #444;
+		flex-wrap: wrap;
+	}
+
+	.nav-bar a {
+		text-decoration: none;
+		color: #6b9bd1;
+		font-size: 12pt;
+		padding: 5px 10px;
+		border-radius: 3px;
+	}
+
+	.nav-bar a:hover {
+		background-color: #2a2a2a;
+	}
+
+	table {
+		font-size: 24pt;
+		border-collapse: collapse;
+		width: auto;
+		margin: 0 auto;
+	}
+
+	td {
+		padding: 10px 40px 10px 0;
+		color: #e0e0e0;
+	}
+
+	.grey {
+		color: #888;
+	}
+
+	.blue {
+		color: #6b9bd1;
+	}
+</style>
+{% endblock head %}
+
+{% block content %}
+
+<div class="nav-bar">
+	<a href="/">Today</a>
+	<a href="/calendar/daily">Calendar</a>
+	<a href="/switches/daily">Switches</a>
+	<a href="/work">Work</a>
+	<a href="/totals">All Time</a>
+</div>
 
 <table>
-	{%  for row in rows %}
+	{% for row in rows %}
+	{% if row["ws"] in ['Away', 'Other'] %}
+		{% set my_class = 'grey' %}
+	{% elif row["ws"] in ['Active', 'Idle'] %}
+		{% set my_class = 'blue' %}
+	{% else %}
+		{% set my_class = '' %}
+	{% endif %}
 	<tr>
-			<td>{{ row["ws"] }}</td>
-			<td>{{ row["total"] }}</td>
+		<td class="{{ my_class }}">{{ row["ws"] }}</td>
+		<td class="{{ my_class }}">{{ row["total"] }}</td>
 	</tr>
-{% endfor %}
+	{% endfor %}
 </table>
 
-
-
 {% endblock content %}