Initial Commit

templates/index.html

@@ -0,0 +1,89 @@
+{% extends "base.html" %}
+
+{% block title %}Hello!{% endblock %}
+
+{% block head %}
+<style>
+    .navbar {
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: #161b22;
+    }
+
+    .overlay {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background: #161b22;
+        opacity: 0.75;
+    }
+
+    th {
+        white-space: nowrap;
+    }
+
+    td {
+        white-space: nowrap;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<nav class="navbar" style="z-index: 20">
+    <div>
+        <a href="/" style="display: flex">
+            <img src="/assets/logo.svg" style="margin:8px; height: 32px" alt="RSS Notifier Logo"/>
+            <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
+        </a>
+    </div>
+</nav>
+<div style="height: 48px; margin-bottom: 8px"></div>
+<div x-data="{'isModalOpen': false}">
+    <div style="display:flex; justify-content:flex-end">
+        <button @click="isModalOpen = true">Create</button>
+    </div>
+    <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
+    <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
+        <header>
+            <h2>Create new RSS Feed subscription</h2>
+        </header>
+        <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" hx-indicator="#indicator"
+              @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
+            <label>
+                Name
+                <input type="text" name="name">
+            </label>
+            <label>
+                Feed URL
+                <input type="url" name="feed_url">
+            </label>
+        </form>
+        <footer>
+            <button form="create_form" type="reset" @click="isModalOpen = false">Close</button>
+            <button form="create_form" type="submit">
+                Submit
+                <img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px"
+                     alt="...">
+            </button>
+        </footer>
+    </dialog>
+    <table style="text-align:center">
+        <thead>
+        <tr>
+            <th>Feed Name</th>
+            <th>Feed URL</th>
+            <th>Last Mail Sent</th>
+            <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody id="feed_tbody">
+        {{ feeds|safe }}
+        </tbody>
+    </table>
+</div>
+{% endblock %}