move template page files into a better structure

2025-10-25 14:20:12 +02:00
parent 501acce9ba
commit 31a3e25a16
5 changed files with 88 additions and 6 deletions
@@ -0,0 +1,76 @@
+{% extends "base.htm" %}
+
+{% block title %}NanoShare - Accesslog{% endblock %}
+
+{% block meta %}
+  <meta name="description" content="NanoShare is a lightweight self-hosted file sharing service built on Python Quart.">
+  <meta name="keywords" content="NanoShare, file sharing, self-hosted, Python Quart, open source">
+  <meta name="robots" content="index, follow" />
+{% endblock %}
+
+{% block content %}
+  <main class="file-list">
+    <section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
+      <h2 class="page-title">Accesslog</h2>
+      <p class="subtle">Your uploaded files at a glance. Click a filename to open, or use the actions on the right.</p>
+
+      <div class="table-wrap" role="region" aria-label="Files table" tabindex="0">
+        <table class="table">
+          <thead>
+            <tr>
+              <th scope="col">Accessed At</th>
+              <th scope="col">Status</th>
+              <th scope="col">IP Address</th>
+              <th scope="col">User Agent</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for access in access_logs %}
+            <tr>
+              <td><time datetime="{{ access.accessed_at }}" class="local-time"></time></td>
+              <td><span class="badge">{{ access.status }}</span></td>
+              <td>{{ access.ip }}</td>
+              <td>{{ access.user_agent }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    document.addEventListener('click', (e) => {
+      const btn = e.target.closest('button[data-action="copy"]');
+      if(!btn) return;
+      const row = btn.closest('tr');
+      const link = row?.querySelector('.cell--name a')?.href;
+      if(!link) return;
+      navigator.clipboard.writeText(link).then(() => {
+        const original = btn.innerHTML;
+        btn.innerHTML = '✅';
+        setTimeout(() => btn.innerHTML = original, 1200);
+      }).catch(() => {
+        alert('Could not copy link.');
+      });
+    });
+
+    document.querySelectorAll("time.local-time").forEach(timeEl => {
+      const datetime = timeEl.getAttribute("datetime");
+      if (!datetime) return;
+
+      const date = new Date(datetime);
+
+      timeEl.title = date.toISOString();
+      timeEl.textContent = date.toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: undefined,
+        hour12: false,
+      });
+    });
+  </script>
+{% endblock %}