comparison mod_http_muc_log/res/http_muc_log.html @ 5104:d4b0a995e5e3

mod_http_muc_log: Move CSS and JS out of template This allows applying different cache and security policies to the static resources, while reducing the size of all pages.
author Kim Alvefur <zash@zash.se>
date Sun, 04 Dec 2022 22:10:07 +0100
parents d55b10878e43
children 1e10ddbf5c87
comparison
equal deleted inserted replaced
5103:4fb922aa0ace 5104:d4b0a995e5e3
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 {date&<meta name="dcterms.date" content="{date}">} 6 {date&<meta name="dcterms.date" content="{date}">}
7 <title>{title?{room.name?{jid_node}}{date& - {date}}}</title> 7 <title>{title?{room.name?{jid_node}}{date& - {date}}}</title>
8 <style> 8 <link rel="stylesheet" type="text/css" href="{static}/style.css">
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 li,nav dt{margin:1ex}
25 nav .up{font-size:smaller;display:block;clear:both;}
26 nav .up::before{content:"↑ ";}
27 nav .prev{float:left;}
28 nav .next{float:right;}
29 nav .next::after{content:" →";}
30 nav .prev::before{content:"← ";}
31 nav .last::after{content:" ⇥";}
32 nav :empty::after,nav :empty::before{content:""}
33 table{display:inline-block; margin:1ex 1em;vertical-align:top;}
34 th{font-size:x-small}
35 td{text-align:right;color:#bababa}
36 td > a, td > span{padding:0.4em}
37 .content{background-color:white;padding:1em;list-style-position:inside;}
38 .time{float:right;font-size:small;opacity:0.2;}
39 li:hover .time{opacity:1;}
40 .description{font-size:smaller;}
41 .body{white-space:pre-line;}
42 .body::before,.body::after{content:"";}
43 .presence .verb{font-style:normal;color:#30c030;}
44 .unavailable .verb{color:#c03030;}
45 .button{display:inline-block}
46 .button>a{color:white;background-color:orange;border-radius:4px}
47 .reaction{font-size:smaller;outline:1px solid silver;border-radius:2px}
48 form{text-align:right}
49 li.edited{display:none}
50 li:target{outline:1px gray dotted;display:inherit}
51 figure img{max-height:9em;max-width:16em}
52 @media (prefers-color-scheme: dark) {
53 html{color:#eee}
54 body{background-color:#161616}
55 .content{background-color:#1c1c1c}
56 footer{color:#444}
57 td{color:#444}
58 .button>a{background-color:#282828}
59 }
60 </style>
61 </head> 9 </head>
62 <body> 10 <body>
63 <header> 11 <header>
64 <h1 {lang&lang="{lang}"} title="xmpp:{jid?}">{title?{room.name?{jid_node}}{date& - {date}}}</h1> 12 <h1 {lang&lang="{lang}"} title="xmpp:{jid?}">{title?{room.name?{jid_node}}{date& - {date}}}</h1>
65 <nav> 13 <nav>
128 </ul> 76 </ul>
129 </nav> 77 </nav>
130 <br> 78 <br>
131 <div class="powered-by">Prosody</div> 79 <div class="powered-by">Prosody</div>
132 </footer> 80 </footer>
133 <script> 81 <script defer type="application/javascript" src="{static}/timestamps.js"></script>
134 /*
135 * Local timestamps
136 */
137 (function () {
138 var timeTags = document.getElementsByTagName("time");
139 var i = 0, tag, date;
140 while(timeTags[i]) {
141 tag = timeTags[i++];
142 if(date = tag.getAttribute("datetime")) {
143 date = new Date(date);
144 tag.textContent = date.toLocaleTimeString(navigator.language);
145 tag.setAttribute("title", date.toString());
146 }
147 }
148 document.forms[0].elements.p.addEventListener("change", function() {
149 document.forms[0].submit();
150 });
151 })();
152 </script>
153 </body> 82 </body>
154 </html> 83 </html>