2021-11-12 13:52:41 +01:00
|
|
|
{% load static %}
|
2021-11-20 19:54:57 +01:00
|
|
|
{% load slippers %}
|
2021-11-12 13:52:41 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>htmx demo</title>
|
2021-11-12 20:54:20 +01:00
|
|
|
<link rel="icon" type="image/png" href="{% static "img/favicon.png" %}">
|
2021-11-12 13:52:41 +01:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
|
|
|
|
|
<meta name="author" content="Andros Fenollosa">
|
|
|
|
|
<meta name="generator" content="Django">
|
|
|
|
|
<meta name="description" content="Demo WebSockets over HTML with htmx">
|
|
|
|
|
<meta property="og:type" content="website">
|
|
|
|
|
{# Styles #}
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}">
|
2021-11-20 19:54:57 +01:00
|
|
|
<link rel="stylesheet" type="text/css" href="{% static "css/nprogress.css" %}">
|
2021-11-12 13:52:41 +01:00
|
|
|
<link rel="stylesheet" type="text/css" href="{% static "css/pico.min.css" %}">
|
|
|
|
|
{# JavaScript #}
|
2021-11-20 19:54:57 +01:00
|
|
|
<script src="{% static "js/nprogress.js" %}"></script>
|
|
|
|
|
<script src="{% static "js/htmx.min.js" %}"></script>
|
|
|
|
|
<script defer src="{% static "js/main.js" %}"></script>
|
2021-11-12 13:52:41 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2021-11-12 20:54:20 +01:00
|
|
|
<div class="container" hx-ws="connect:ws:{{ DOMAIN }}/ws/pages/{{ room_random }}/">
|
2021-11-12 18:59:01 +01:00
|
|
|
<header>
|
|
|
|
|
<nav>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><strong>HTML over WebSockets with htmx</strong></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
2021-11-12 21:25:19 +01:00
|
|
|
<li>
|
|
|
|
|
{# To page Talks #}
|
2021-11-21 09:34:54 +01:00
|
|
|
{% #link action="page" value="talks" scroll-up="true" %}Talks{% /link %}
|
2021-11-20 19:54:57 +01:00
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
{# To page Profiles #}
|
2021-11-21 09:34:54 +01:00
|
|
|
{% #link action="page" value="profiles" scroll-up="true" %}Profiles{% /link %}
|
2021-11-12 21:25:19 +01:00
|
|
|
</li>
|
2021-11-21 12:47:12 +01:00
|
|
|
<li>
|
|
|
|
|
{# To page Chat #}
|
2021-11-23 21:41:52 +01:00
|
|
|
<a href="#" onclick="document.querySelector('#chat').classList.toggle('hidden')">Chat</a>
|
2021-11-21 12:47:12 +01:00
|
|
|
</li>
|
2021-11-12 21:25:19 +01:00
|
|
|
<li>
|
|
|
|
|
{# To page About #}
|
2021-11-21 09:34:54 +01:00
|
|
|
{% #link action="page" value="about" scroll-up="true" %}About{% /link %}
|
2021-11-12 21:25:19 +01:00
|
|
|
</li>
|
2021-11-12 18:59:01 +01:00
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
2021-11-12 20:54:20 +01:00
|
|
|
<main id="main"></main>
|
2021-11-12 18:59:01 +01:00
|
|
|
</div>
|
2021-11-23 21:41:52 +01:00
|
|
|
<section hx-ws="connect:ws:{{ DOMAIN }}/ws/chat/">
|
|
|
|
|
<div id="chat" class="hidden"></div>
|
|
|
|
|
</section>
|
2021-11-12 13:52:41 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
