Comparison

mod_http_muc_log/res/http_muc_log.html @ 4182:1890115b2773

mod_http_muc_log: Move template into a directory to ease packaging There's no LuaRocks directive like `copy_directories` for individual files, short of writing a whole custom installation method.
author Kim Alvefur <zash@zash.se>
date Thu, 08 Oct 2020 16:39:19 +0200
parent 4073:mod_http_muc_log/http_muc_log.html@f6542e51b741
child 4195:796c0eef888c
comparison
equal deleted inserted replaced
4181:fcc6b92869d4 4182:1890115b2773
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 {date&<meta name="dcterms.date" content="{date}">}
7 <title>{title?{room.name?{jid_node}}{date& - {date}}}</title>
8 <style>
9 :link,:visited{color:#3465a4;text-decoration:none;}
10 :link:hover,:visited:hover{color:#6197df;}
11 body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;}
12 ul,ol{padding:0;}
13 li{list-style:none;}
14 hr{visibility:hidden;clear:both;}
15 br{clear:both;}
16 header,footer{margin:1ex 1em;}
17 footer{font-size:smaller;color:#babdb6;}
18 nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;}
19 footer nav .up{display:none;}
20 @media screen and (min-width: 460px) {
21 nav {font-size:x-large;margin:1ex 1em;}
22 }
23 nav a{padding: 1ex;}
24 nav .up{font-size:smaller;display:block;clear:both;}
25 nav .up::before{content:"↑ ";}
26 nav .prev{float:left;}
27 nav .next{float:right;}
28 nav .next::after{content:" →";}
29 nav .prev::before{content:"← ";}
30 nav .last::after{content:" ⇥";}
31 nav :empty::after,nav :empty::before{content:""}
32 table{display:inline-block; margin:1ex 1em;vertical-align:top;}
33 th{font-size:x-small}
34 td{text-align:right;color:#bababa}
35 td > a, td > span{padding:0.4em}
36 .content{background-color:white;padding:1em;list-style-position:inside;}
37 .time{float:right;font-size:small;opacity:0.2;}
38 li:hover .time{opacity:1;}
39 .description{font-size:smaller;}
40 .body{white-space:pre-line;}
41 .body::before,.body::after{content:"";}
42 .presence .verb{font-style:normal;color:#30c030;}
43 .unavailable .verb{color:#c03030;}
44 .button{display:inline-block}
45 .button>a{color:white;background-color:orange;border-radius:4px}
46 form{text-align:right}
47 @media (prefers-color-scheme: dark) {
48 html{color:#eee}
49 body{background-color:#161616}
50 .content{background-color:#1c1c1c}
51 footer{color:#444}
52 td{color:#444}
53 .button>a{background-color:#282828}
54 }
55 </style>
56 </head>
57 <body>
58 <header>
59 <h1 {lang&lang="{lang}"} title="xmpp:{jid?}">{title?{room.name?{jid_node}}{date& - {date}}}</h1>
60 <nav>
61 <ul>
62 {jid_node&
63 <li class="button"><a href="xmpp:{jid?}?join">Join using a client</a></li>
64 }
65 {room.webchat_url&
66 <li class="button"><a href="{room.webchat_url}">Join via web</a></li>
67 }
68 {links#
69 <li><a class="{item.rel?}" href="{item.href}{hide_presence&?p=h}" rel="{item.rel?}">{item.text}</a></li>}
70 </ul>
71 </nav>
72 </header>
73 <hr>
74 <main {lang&lang="{lang}"} class="content">
75 <nav>
76 <dl class="room-list">
77 {rooms#
78 <dt {item.lang&lang="{item.lang}"} class="name"><a href="{item.href}{hide_presence&?p=h}">{item.name}</a></dt>
79 <dd {item.lang&lang="{item.lang}"} class="description">{item.description?}</dd>}
80 </dl>
81 {dates|calendarize#
82 <h2 id="{item.year}">{item.year}</h2>
83 {item.months#
84 <table id="{item.month}-{item.year}">
85 <caption>{item.month}</caption>
86 <thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead>
87 <tbody>{item.weeks#
88 <tr>{item.days#<td>{item.href&<a href="{item.href}{hide_presence&?p=h}">}<span>{item.day?&nbsp;}</span>{item.href&</a>}</td>}</tr>}
89 </tbody>
90 </table>
91 }
92 }
93 </nav>
94
95 <div>
96 {presence_available&<form>
97 <label>
98 <input name="p" value="h" type="checkbox"{hide_presence& checked}>
99 <span>Hide joins and parts</span>
100 </label>
101 <noscript>
102 <button type="submit">Apply</button>
103 </noscript>
104 </form>}
105 </div>
106
107 <ol class="chat-logs">{lines#
108 <li {item.lang&lang="{item.lang}"} class="{item.st_name} {item.st_type?}" id="{item.key}">
109 <a class="time" href="#{item.key}"><time id="{item.time}" datetime="{item.datetime}">{item.time}</time></a>
110 <b class="nick">{item.nick}</b>
111 <em class="verb">{item.verb?}</em>
112 <q class="body">{item.body?}</q>
113 {item.oob.url&<figure><a rel="nofollow" href="{item.oob.url?}"><img style="max-height:9em;max-width:16em" alt="{item.oob.desc?}" src="{item.oob.url?}"/></a><figcaption>{item.oob.desc?}</figcaption></figure>}
114 </li>}
115 </ol>
116 </main>
117 <hr>
118 <footer>
119 <nav>
120 <ul>{links#
121 <li><a class="{item.rel?}" href="{item.href}{hide_presence&?p=h}" rel="{item.rel?}">{item.text}</a></li>}
122 </ul>
123 </nav>
124 <br>
125 <div class="powered-by">Prosody</div>
126 </footer>
127 <script>
128 /*
129 * Local timestamps
130 */
131 (function () {
132 var timeTags = document.getElementsByTagName("time");
133 var i = 0, tag, date;
134 while(timeTags[i]) {
135 tag = timeTags[i++];
136 if(date = tag.getAttribute("datetime")) {
137 date = new Date(date);
138 tag.textContent = date.toLocaleTimeString(navigator.language);
139 tag.setAttribute("title", date.toString());
140 }
141 }
142 document.forms[0].elements.p.addEventListener("change", function() {
143 document.forms[0].submit();
144 });
145 })();
146 </script>
147 </body>
148 </html>