Begin building views

This commit is contained in:
mitteneer 2024-04-08 20:18:40 -04:00
parent 8a5666c4e9
commit f1f1072a18
12 changed files with 69 additions and 28 deletions

View file

@ -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';
}

View file

@ -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>

View file

View file

@ -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>

View file

View file

View file

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,3 @@
<div>
<span>Content goes here</span>
</div>

7
src/app/views/stats.zig Normal file
View file

@ -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);
}

View file

@ -0,0 +1,3 @@
<div>
<span>Content goes here</span>
</div>