AnthoLume/templates/home.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>