From f1f1072a18a490486b785387113d387429978815 Mon Sep 17 00:00:00 2001
From: mitteneer <swebbguy@gmail.com>
Date: Mon, 8 Apr 2024 20:18:40 -0400
Subject: [PATCH] Begin building views

---
 public/styles.css                | 19 +++++++++++++++++--
 src/app/views/root/_content.zmpl | 18 ------------------
 src/app/views/root/_graph.zmpl   |  0
 src/app/views/root/_header.zmpl  |  6 ++++++
 src/app/views/root/_history.zmpl |  0
 src/app/views/root/_random.zmpl  |  0
 src/app/views/root/_recent.zmpl  |  0
 src/app/views/root/_top.zmpl     | 31 +++++++++++++++++++++++++++++++
 src/app/views/root/index.zmpl    | 10 ++--------
 src/app/views/search/index.zmpl  |  3 +++
 src/app/views/stats.zig          |  7 +++++++
 src/app/views/stats/index.zmpl   |  3 +++
 12 files changed, 69 insertions(+), 28 deletions(-)
 delete mode 100644 src/app/views/root/_content.zmpl
 create mode 100644 src/app/views/root/_graph.zmpl
 create mode 100644 src/app/views/root/_header.zmpl
 create mode 100644 src/app/views/root/_history.zmpl
 create mode 100644 src/app/views/root/_random.zmpl
 create mode 100644 src/app/views/root/_recent.zmpl
 create mode 100644 src/app/views/root/_top.zmpl
 create mode 100644 src/app/views/search/index.zmpl
 create mode 100644 src/app/views/stats.zig
 create mode 100644 src/app/views/stats/index.zmpl

diff --git a/public/styles.css b/public/styles.css
index 1755d47..afdbce9 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -3,8 +3,23 @@
  * <link rel="stylesheet" href="/styles.css" />
  *
  */
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
-.message {
-    font-weight: bold;
+.title {
+    font-family: 'Roboto';
     font-size: 3rem;
+    font-weight: 500;
+    margin-left: 20px;
+    margin-right: 40px;
+    margin-top: 20px;
+}
+
+.header-link{
+    font-family: 'Roboto';
+    font-size: 1.5rem;
+    margin-right: 20px;
+}
+
+#replaceMe{
+    font-family:'Courier New';
 }
diff --git a/src/app/views/root/_content.zmpl b/src/app/views/root/_content.zmpl
deleted file mode 100644
index 6d3a665..0000000
--- a/src/app/views/root/_content.zmpl
+++ /dev/null
@@ -1,18 +0,0 @@
-// Renders the `message` response data value.
-<h3 class="message text-[#39b54a]">{.message}</h3>
-
-<div><img class="p-3 mx-auto" src="/jetzig.png" /></div>
-
-<div>
-  <a href="https://github.com/jetzig-framework/zmpl">
-    <img class="p-3 m-3 mx-auto" src="/zmpl.png" />
-  </a>
-
-</div>
-
-<div>Visit <a class="font-bold text-[#39b54a]" href="https://jetzig.dev/">jetzig.dev</a> to get started.
-  <div>Join our Discord server and introduce yourself:</div>
-  <div>
-    <a class="font-bold text-[#39b54a]" href="https://discord.gg/eufqssz7X6">https://discord.gg/eufqssz7X6</a>
-  </div>
-</div>
diff --git a/src/app/views/root/_graph.zmpl b/src/app/views/root/_graph.zmpl
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/root/_header.zmpl b/src/app/views/root/_header.zmpl
new file mode 100644
index 0000000..3362c8f
--- /dev/null
+++ b/src/app/views/root/_header.zmpl
@@ -0,0 +1,6 @@
+<b class="title text-[#123456]">Zuletzt</b> 
+<a class="header-link" href="/artists">Artists</a>
+<a class="header-link" href="/albums">Albums</a>
+<a class="header-link" href="/tracks">Tracks</a>
+<a class="header-link" href="/stats">Stats</a>
+<hr>
\ No newline at end of file
diff --git a/src/app/views/root/_history.zmpl b/src/app/views/root/_history.zmpl
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/root/_random.zmpl b/src/app/views/root/_random.zmpl
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/root/_recent.zmpl b/src/app/views/root/_recent.zmpl
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/root/_top.zmpl b/src/app/views/root/_top.zmpl
new file mode 100644
index 0000000..1ce9914
--- /dev/null
+++ b/src/app/views/root/_top.zmpl
@@ -0,0 +1,31 @@
+@html {
+<style>
+#myHeader {  background-color: lightblue;  color: black;  padding: 40px;  text-align: center;}
+</style>
+}
+<div>
+<fieldset>
+Top:
+<input type="radio" label="Artist" name="q" value="artist" hx-get="/stats" hx-target="#update" hx-include="[name='t']" hx-swap="outerHTML" hx-trigger="click" checked>Artist</input>
+<input type="radio" label="Album" name="q" value="album">Album</input>
+<input type="radio" label="Track" name="q" value="track">Track</input>
+</fieldset>
+
+<fieldset>
+of:
+<input type="radio" label="Day" name="t" value="day" checked>Day</input>
+<input type="radio" label="Week" name="t" value="week">Week</input>
+<input type="radio" label="Month" name="t" value="month">Month</input>
+<input type="radio" label="3 Months" name="t" value="quarter">3 Months</input>
+<input type="radio" label="6 Months" name="t" value="half">6 Months</input>
+<input type="radio" label="Current Year" name="t" value="begin">Current Year</input>
+<input type="radio" label="365 Days" name="t" value="year">365 days</input>
+<input type="radio" label="All Time" name="t" value="all">All Time</input>
+</fieldset>
+
+<tr>
+<td colspan="3">
+<b id="myHeader">hyello</b>
+</td>
+</tr>
+</div>
diff --git a/src/app/views/root/index.zmpl b/src/app/views/root/index.zmpl
index cccb8d8..ea52da6 100644
--- a/src/app/views/root/index.zmpl
+++ b/src/app/views/root/index.zmpl
@@ -8,13 +8,7 @@
   </head>
 
   <body>
-    <div class="text-center pt-10 m-auto">
-      // If present, renders the `message_param` response data value, add `?message=hello` to the
-      // URL to see the output:
-      <h2 class="param text-3xl text-[#f7931e]">{.message_param}</h2>
-
-      // Renders `src/app/views/root/_content.zmpl` with the same template data available:
-      <div>{^root/content}</div>
-    </div>
+    @partial root/header
+    @partial root/top
   </body>
 </html>
diff --git a/src/app/views/search/index.zmpl b/src/app/views/search/index.zmpl
new file mode 100644
index 0000000..76457d0
--- /dev/null
+++ b/src/app/views/search/index.zmpl
@@ -0,0 +1,3 @@
+<div>
+  <span>Content goes here</span>
+</div>
diff --git a/src/app/views/stats.zig b/src/app/views/stats.zig
new file mode 100644
index 0000000..4fac587
--- /dev/null
+++ b/src/app/views/stats.zig
@@ -0,0 +1,7 @@
+const std = @import("std");
+const jetzig = @import("jetzig");
+
+pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
+    _ = data;
+    return request.render(.ok);
+}
diff --git a/src/app/views/stats/index.zmpl b/src/app/views/stats/index.zmpl
new file mode 100644
index 0000000..76457d0
--- /dev/null
+++ b/src/app/views/stats/index.zmpl
@@ -0,0 +1,3 @@
+<div>
+  <span>Content goes here</span>
+</div>