Files
htmxssrtest/templates/index.html

77 lines
2.1 KiB
HTML

{% 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;
}
</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 x-on: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-swap="none">
<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" x-on:click="isModalOpen = false">Close</button>
<button form="create_form" type="submit">Submit</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 hx-get="/feed/" hx-trigger="newFeed from:body" x-on:htmx:after-settle="isModalOpen = false">
{{ feeds|safe }}
</tbody>
</table>
</div>
{% endblock %}