257 lines
8.0 KiB
HTML
257 lines
8.0 KiB
HTML
{{template "base.html" .}} {{define "title"}}Home{{end}} {{define "header"}}
|
|
<a href="./">Home</a>
|
|
{{end}} {{define "content"}}
|
|
<div class="flex flex-col gap-4">
|
|
<div class="w-full">
|
|
<div
|
|
class="relative w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<p
|
|
class="absolute top-3 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
|
|
>
|
|
Daily Read Totals
|
|
</p>
|
|
|
|
{{ $data := (GetSVGGraphData .Data.GraphData 800 70 )}}
|
|
<svg
|
|
viewBox="26 0 755 {{ $data.Height }}"
|
|
preserveAspectRatio="none"
|
|
width="100%"
|
|
height="4em"
|
|
>
|
|
<!-- Bezier Line Graph -->
|
|
<path
|
|
fill="#316BBE"
|
|
fill-opacity="0.5"
|
|
stroke="none"
|
|
d="{{ $data.BezierPath }} {{ $data.BezierFill }}"
|
|
/>
|
|
|
|
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
|
|
|
|
{{ range $index, $item := $data.LinePoints }}
|
|
<line
|
|
class="hover-trigger"
|
|
stroke="black"
|
|
stroke-opacity="0.0"
|
|
stroke-width="{{ $data.Offset }}"
|
|
x1="{{ $item.X }}"
|
|
x2="{{ $item.X }}"
|
|
y1="0"
|
|
y2="{{ $data.Height }}"
|
|
></line>
|
|
<g class="hover-item">
|
|
<line
|
|
class="text-black dark:text-white"
|
|
stroke-opacity="0.2"
|
|
x1="{{ $item.X }}"
|
|
x2="{{ $item.X }}"
|
|
y1="30"
|
|
y2="{{ $data.Height }}"
|
|
></line>
|
|
<text
|
|
class="text-black dark:text-white"
|
|
alignment-baseline="middle"
|
|
transform="translate({{ $item.X }}, 5) translate(-30, 8)"
|
|
font-size="10"
|
|
>
|
|
{{ (index $.Data.GraphData $index).Date }}
|
|
</text>
|
|
<text
|
|
class="text-black dark:text-white"
|
|
alignment-baseline="middle"
|
|
transform="translate({{ $item.X }}, 25) translate(-30, -2)"
|
|
font-size="10"
|
|
>
|
|
{{ (index $.Data.GraphData $index).MinutesRead }} minutes
|
|
</text>
|
|
</g>
|
|
{{ end }}
|
|
</svg>
|
|
|
|
<style>
|
|
/* Interactive Hover */
|
|
.hover-item {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.hover-trigger:hover + .hover-item,
|
|
.hover-item:hover {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* SVG Component Styling */
|
|
svg text.text-black {
|
|
fill: black;
|
|
}
|
|
svg line.text-black {
|
|
stroke: black;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
svg text.dark\:text-white {
|
|
fill: white;
|
|
}
|
|
svg line.dark\:text-white {
|
|
stroke: white;
|
|
}
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
<a href="./documents" class="w-full">
|
|
<div
|
|
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
|
>
|
|
<p class="text-2xl font-bold text-black dark:text-white">
|
|
{{ .Data.DatabaseInfo.DocumentsSize }}
|
|
</p>
|
|
<p class="text-sm text-gray-400">Documents</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="./activity" class="w-full">
|
|
<div
|
|
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
|
>
|
|
<p class="text-2xl font-bold text-black dark:text-white">
|
|
{{ .Data.DatabaseInfo.ActivitySize }}
|
|
</p>
|
|
<p class="text-sm text-gray-400">Activity Records</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="w-full">
|
|
<div
|
|
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
|
>
|
|
<p class="text-2xl font-bold text-black dark:text-white">
|
|
{{ .Data.DatabaseInfo.ProgressSize }}
|
|
</p>
|
|
<p class="text-sm text-gray-400">Progress Records</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div
|
|
class="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<div
|
|
class="flex flex-col justify-around dark:text-white w-full text-sm"
|
|
>
|
|
<p class="text-2xl font-bold text-black dark:text-white">
|
|
{{ .Data.DatabaseInfo.DevicesSize }}
|
|
</p>
|
|
<p class="text-sm text-gray-400">Devices</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{{ range $item := .Data.Streaks }}
|
|
<div class="w-full">
|
|
<div
|
|
class="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<p
|
|
class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
|
|
>
|
|
{{ if eq $item.Window "WEEK" }} Weekly Read Streak {{ else }} Daily
|
|
Read Streak {{ end }}
|
|
</p>
|
|
<div class="flex items-end my-6 space-x-2">
|
|
<p class="text-5xl font-bold text-black dark:text-white">
|
|
{{ $item.CurrentStreak }}
|
|
</p>
|
|
</div>
|
|
<div class="dark:text-white">
|
|
<div
|
|
class="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200"
|
|
>
|
|
<div>
|
|
<p>
|
|
{{ if eq $item.Window "WEEK" }} Current Weekly Streak {{ else }}
|
|
Current Daily Streak {{ end }}
|
|
</p>
|
|
<div class="flex items-end text-sm text-gray-400">
|
|
{{ $item.CurrentStreakStartDate }} ➞ {{
|
|
$item.CurrentStreakEndDate }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end font-bold">
|
|
{{ $item.CurrentStreak }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pb-2 mb-2 text-sm">
|
|
<div>
|
|
<p>
|
|
{{ if eq $item.Window "WEEK" }} Best Weekly Streak {{ else }}
|
|
Best Daily Streak {{ end }}
|
|
</p>
|
|
<div class="flex items-end text-sm text-gray-400">
|
|
{{ $item.MaxStreakStartDate }} ➞ {{ $item.MaxStreakEndDate }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end font-bold">{{ $item.MaxStreak }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div class="w-full">
|
|
<div
|
|
class="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
|
|
>
|
|
<div>
|
|
<p
|
|
class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
|
|
>
|
|
WPM Leaderboard
|
|
</p>
|
|
<div class="flex items-end my-6 space-x-2">
|
|
{{ $length := len .Data.WPMLeaderboard }} {{ if eq $length 0 }}
|
|
<p class="text-5xl font-bold text-black dark:text-white">N/A</p>
|
|
{{ else }}
|
|
<p class="text-5xl font-bold text-black dark:text-white">
|
|
{{ (index .Data.WPMLeaderboard 0).UserID }}
|
|
</p>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<div class="dark:text-white">
|
|
{{ range $index, $item := .Data.WPMLeaderboard }} {{ if lt $index 3 }}
|
|
{{ if eq $index 0 }}
|
|
<div class="flex items-center justify-between pt-2 pb-2 text-sm">
|
|
{{ else }}
|
|
<div
|
|
class="flex items-center justify-between pt-2 pb-2 text-sm border-t border-gray-200"
|
|
>
|
|
{{ end }}
|
|
<div>
|
|
<p>{{ $item.UserID }}</p>
|
|
</div>
|
|
<div class="flex items-end font-bold">{{ $item.Wpm }} WPM</div>
|
|
</div>
|
|
{{ end }} {{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{end}}
|
|
</div>
|
|
</div>
|