|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <style> |
|
5 /* |
|
6 |
|
7 MIT License |
|
8 |
|
9 Copyright (c) 2020 Simple.css (Kev Quirk) |
|
10 |
|
11 Permission is hereby granted, free of charge, to any person obtaining a copy |
|
12 of this software and associated documentation files (the "Software"), to deal |
|
13 in the Software without restriction, including without limitation the rights |
|
14 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
15 copies of the Software, and to permit persons to whom the Software is |
|
16 furnished to do so, subject to the following conditions: |
|
17 */ |
|
18 |
|
19 :root { |
|
20 --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif; |
|
21 --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; |
|
22 |
|
23 --base-fontsize: 1.15rem; |
|
24 |
|
25 --header-scale: 1.25; |
|
26 |
|
27 --line-height: 1.618; |
|
28 |
|
29 /* Default (light) theme */ |
|
30 --bg: #FFF; |
|
31 --accent-bg: #F5F7FF; |
|
32 --text: #212121; |
|
33 --text-light: #585858; |
|
34 --border: #D8DAE1; |
|
35 --accent: #0D47A1; |
|
36 --accent-light: #90CAF9; |
|
37 --code: #D81B60; |
|
38 --preformatted: #444; |
|
39 --marked: #FFDD33; |
|
40 --disabled: #EFEFEF; |
|
41 } |
|
42 |
|
43 /* Dark theme */ |
|
44 @media (prefers-color-scheme: dark) { |
|
45 :root { |
|
46 --bg: #212121; |
|
47 --accent-bg: #2B2B2B; |
|
48 --text: #DCDCDC; |
|
49 --text-light: #ABABAB; |
|
50 --border: #666; |
|
51 --accent: #FFB300; |
|
52 --accent-light: #FFECB3; |
|
53 --code: #F06292; |
|
54 --preformatted: #CCC; |
|
55 --disabled: #111; |
|
56 } |
|
57 |
|
58 img, video { |
|
59 opacity: .6; |
|
60 } |
|
61 } |
|
62 |
|
63 html { |
|
64 /* Set the font globally */ |
|
65 font-family: var(--sans-font); |
|
66 } |
|
67 |
|
68 /* Make the body a nice central block */ |
|
69 body { |
|
70 color: var(--text); |
|
71 background: var(--bg); |
|
72 font-size: var(--base-fontsize); |
|
73 line-height: var(--line-height); |
|
74 display: flex; |
|
75 min-height: 100vh; |
|
76 flex-direction: column; |
|
77 flex: 1; |
|
78 margin: 0 auto; |
|
79 max-width: 45rem; |
|
80 padding: 0 .5rem; |
|
81 overflow-x: hidden; |
|
82 word-break: break-word; |
|
83 overflow-wrap: break-word; |
|
84 } |
|
85 |
|
86 /* Fix line height when title wraps */ |
|
87 h1, h2, h3 { |
|
88 line-height: 1.1; |
|
89 } |
|
90 |
|
91 /* Format headers */ |
|
92 h1 { |
|
93 font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale)); |
|
94 margin-top: calc(var(--line-height) * 1.5rem); |
|
95 } |
|
96 |
|
97 h2 { |
|
98 font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale)); |
|
99 margin-top: calc(var(--line-height) * 1.5rem); |
|
100 } |
|
101 |
|
102 h3 { |
|
103 font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale)); |
|
104 margin-top: calc(var(--line-height) * 1.5rem); |
|
105 } |
|
106 |
|
107 h4 { |
|
108 font-size: calc(var(--base-fontsize) * var(--header-scale)); |
|
109 margin-top: calc(var(--line-height) * 1.5rem); |
|
110 } |
|
111 |
|
112 h5 { |
|
113 font-size: var(--base-fontsize); |
|
114 margin-top: calc(var(--line-height) * 1.5rem); |
|
115 } |
|
116 |
|
117 h6 { |
|
118 font-size: calc(var(--base-fontsize) / var(--header-scale)); |
|
119 margin-top: calc(var(--line-height) * 1.5rem); |
|
120 } |
|
121 |
|
122 /* Format links & buttons */ |
|
123 a, |
|
124 a:visited { |
|
125 color: var(--accent); |
|
126 } |
|
127 |
|
128 a:hover { |
|
129 text-decoration: none; |
|
130 } |
|
131 |
|
132 /* Format tables */ |
|
133 table { |
|
134 border-collapse: collapse; |
|
135 width: 100%; |
|
136 margin: 1.5rem 0; |
|
137 } |
|
138 |
|
139 td, |
|
140 th { |
|
141 border: 1px solid var(--border); |
|
142 text-align: left; |
|
143 padding: .5rem; |
|
144 } |
|
145 |
|
146 th { |
|
147 background: var(--accent-bg); |
|
148 font-weight: bold; |
|
149 } |
|
150 |
|
151 tr:nth-child(even) { |
|
152 background: var(--accent-bg); |
|
153 } |
|
154 |
|
155 /* Lists */ |
|
156 ol, ul { |
|
157 padding-left: 3rem; |
|
158 } |
|
159 </style> |
|
160 </head> |
|
161 <body> |
|
162 <div class="container"> |
|
163 <h1>OMEMO encryption information</h1> |
|
164 <p>OMEMO is an end-to-end encryption technology that protects communication between |
|
165 users on the XMPP network. Find out more information <a href="https://conversations.im/omemo/">about OMEMO</a> |
|
166 and <a href="https://omemo.top/">a list of OMEMO-capable software</a>. |
|
167 </p> |
|
168 |
|
169 <p>If you are on this page, it may mean that you received an encrypted message that your client could not decrypt. |
|
170 Some possible causes of this problem are:</p> |
|
171 <ul> |
|
172 <li>Your XMPP client does not support OMEMO, or does not have it enabled.</li> |
|
173 <li>Your server software is too old (Prosody 0.11.x is recommended) or misconfigured.</li> |
|
174 <li>The sender's client, or your client, has a bug in its OMEMO support.</li> |
|
175 </ul> |
|
176 |
|
177 <h2>Advanced information</h2> |
|
178 <p>Here you can find some advanced information that may be useful |
|
179 when debugging why an OMEMO message could not be decrypted. You may |
|
180 share this page privately with XMPP developers to help them |
|
181 diagnose your problem. |
|
182 </p> |
|
183 |
|
184 <h3>Message status</h3> |
|
185 |
|
186 <p>This was an {message.encryption} {message.direction} {message.type} message. The sending device id was <tt>{omemo.sender_id}</tt>.</p> |
|
187 |
|
188 <h4>Recipient devices</h4> |
|
189 <table class="table"> |
|
190 <tr> |
|
191 <th>Device ID</th> |
|
192 <th>Status</th> |
|
193 <th>Comment</th> |
|
194 </tr> |
|
195 {rids%<tr> |
|
196 <td>{idx}</td> |
|
197 <td>{item.status?Unknown device} {item.prekey&<span class="badge badge-warning">Used pre-key</span>}</td> |
|
198 <td>{item.comment?}</td> |
|
199 </tr>} |
|
200 </table> |
|
201 |
|
202 <h2>Account status</h2> |
|
203 <p>{user}'s account has {omemo.status} with OMEMO.</p> |
|
204 |
|
205 <h4>Registered OMEMO devices</h4> |
|
206 <table class="table"> |
|
207 <tr> |
|
208 <th>Device ID</th> |
|
209 <th>Status</th> |
|
210 <th>Bundle</th> |
|
211 <th>Access</th> |
|
212 </tr> |
|
213 {omemo.devices%<tr> |
|
214 <td>{idx}</td> |
|
215 <td>{item.status}</td> |
|
216 <td>{item.bundle}</td> |
|
217 <td>{item.access_model}</td> |
|
218 </tr>} |
|
219 </table> |
|
220 </div> |
|
221 </body> |
|
222 </html> |