comparison index.xhtml @ 38:c2e2b107c7c1

Commit changes from the July 2019 Lyon sprint.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 23 May 2020 17:59:09 +0200
parents 44ebcf732706
children 6a42b1783c9d
comparison
equal deleted inserted replaced
37:44ebcf732706 38:c2e2b107c7c1
10 <link rel="stylesheet" href="share/bootstrap/css/bootstrap.min.css"/> 10 <link rel="stylesheet" href="share/bootstrap/css/bootstrap.min.css"/>
11 <link rel="stylesheet" href="prosody.css"/> 11 <link rel="stylesheet" href="prosody.css"/>
12 </head> 12 </head>
13 <body> 13 <body>
14 14
15 <nav class="navbar navbar-default">
16 <div class="container">
17 <div class="navbar-header">
18 <a class="navbar-toggle collapsed" href="index.html#navbar">
19 <span class="sr-only">Toggle navigation</span>
20 <span class="icon-bar"></span>
21 <span class="icon-bar"></span>
22 <span class="icon-bar"></span>
23 </a>
24 <a class="navbar-brand" href="index.html">Prosody IM</a>
25 </div>
26 <div id="navbar" class="navbar-collapse">
27 <ul class="nav navbar-nav">
28 <li><a href="https://prosody.im/download">Download</a></li>
29 <li><a href="https://prosody.im/doc">Documentation</a></li>
30 <li><a href="https://prosody.im/discuss">Support</a></li>
31 <li><a href="https://prosody.im/bugs">Issues</a></li>
32 <li><a href="https://prosody.im/source">Source</a></li>
33 <li><a href="https://prosody.im/doc/developers">Dev docs</a></li>
34 </ul>
35 </div>
36 </div>
37 </nav>
38
39 <div class="container"> 15 <div class="container">
40 16
41 <div class="row"> 17 <div class="row">
42 <form id="connection"> 18 <form id="connection">
43 <input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/> 19 <input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/>
60 <div class="col-sm-4"> 36 <div class="col-sm-4">
61 <h2>Nickname</h2> 37 <h2>Nickname</h2>
62 </div> 38 </div>
63 <div class="col-sm-8"> 39 <div class="col-sm-8">
64 <p> 40 <p>
65 <input id="nick" placeholder="Nickname"/> 41 <input class="form-control" id="nick" placeholder="Nickname"/>
66 <img width="24" height="24" id="nick-spinner"/> 42 <img width="24" height="24" id="nick-spinner"/>
67 </p> 43 </p>
68 <p> 44 <p>Enter your nickname, so people you know can recognize you.</p>
69 Enter your nickname, so people you know can recognize you. 45 <p class="form-group">
70 </p> 46 <label for="nick-access">Who can see your nickname?</label>
71 <p> 47 <img width="24" height="24" id="nick-access-spinner" hidden=""/>
72 <label>Who can see your nickname?<br/> 48 <select class="form-control" id="nick-access">
73 <select id="nick-access">
74 <option value="open">Anyone</option> 49 <option value="open">Anyone</option>
75 <option value="presence">Only your contacts</option> 50 <option value="presence">Only your contacts</option>
76 </select></label> <img width="24" height="24" id="nick-access-spinner" hidden=""/> 51 </select>
77 </p> 52 </p>
78 </div> 53 </div>
79 </div> 54 </div>
80 55
81 <hr class="tab-profile"/> 56 <hr class="tab-profile"/>
86 <p>This image allows your contact to quickly identify you.</p> 61 <p>This image allows your contact to quickly identify you.</p>
87 </div> 62 </div>
88 <div class="col-sm-8"> 63 <div class="col-sm-8">
89 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img width="24" height="24" id="avatar-spinner"/><br/> 64 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img width="24" height="24" id="avatar-spinner"/><br/>
90 <input type="file" style="display:none" accept="image/*" id="avatar-file"/> 65 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
91 <p><label>Upload new avatar<br/> 66 <p class="custom-file">
92 <button id="avatar-upload">Choose file…</button></label><br/> 67 <label class="custom-file-label" for="avatar-upload">Upload new avatar</label>
93 <button id="avatar-change" hidden="">Use as your avatar</button><br/> 68 <button id="avatar-upload">Choose file…</button>
94 <label>Who can see your avatar?<br/> 69 <button id="avatar-change">Use as your avatar</button>
95 <select id="avatar-access"> 70 </p>
71 <p class="form-group">
72 <label for="avatar-access">Who can see your avatar?</label>
73 <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
74 <select class="form-control" id="avatar-access">
96 <option value="open">Anyone (pick this if you use public groupchats)</option> 75 <option value="open">Anyone (pick this if you use public groupchats)</option>
97 <option value="presence">Only your contacts</option> 76 <option value="presence">Only your contacts</option>
98 </select></label> <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/> 77 </select>
99 </p> 78 </p>
100 </div> 79 </div>
101 </div> 80 </div>
102 81
103 <hr class="tab-profile"/> 82 <hr class="tab-profile"/>
136 <div class="row tab-account" hidden=""> 115 <div class="row tab-account" hidden="">
137 <div class="col-sm-4"> 116 <div class="col-sm-4">
138 <h2>Contact list</h2> 117 <h2>Contact list</h2>
139 </div> 118 </div>
140 <div class="col-sm-8"> 119 <div class="col-sm-8">
141 <table> 120 <table class="table">
142 <thead> 121 <thead>
143 <tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr> 122 <tr><th>JID</th><th>Name</th><th>Subscription</th><th>Groups</th><th>⚠️ Delete</th></tr>
144 </thead> 123 </thead>
145 <tbody id="roster-table"/> 124 <tbody id="roster-table"/>
146 </table> 125 </table>
154 <h2>Dangerous zone</h2> 133 <h2>Dangerous zone</h2>
155 </div> 134 </div>
156 <div class="col-sm-8"> 135 <div class="col-sm-8">
157 <p> 136 <p>
158 <button disabled="">Change my password</button> 137 <button disabled="">Change my password</button>
159 <button disabled="">⚠️ Delete my account</button> 138 <button class="btn btn-danger" disabled="">⚠️ Delete my account</button>
160 </p> 139 </p>
161 </div> 140 </div>
162 </div> 141 </div>
163 142
164 <div class="row tab-pep" hidden=""> 143 <div class="row tab-pep" hidden="">
165 <div class="col-sm-4"> 144 <div class="col-sm-4">
166 <h2>PEP</h2> 145 <h2>PEP</h2>
167 </div> 146 </div>
168 <div class="col-sm-8"> 147 <div class="col-sm-8">
169 <table> 148 <table class="table">
170 <thead> 149 <thead>
171 <tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr> 150 <tr><th>PEP node</th><th>Title</th><th>Description</th><th>Type</th><th>⚠️ Delete</th></tr>
172 </thead> 151 </thead>
173 <tbody id="pep-table"/> 152 <tbody id="pep-table"/>
174 </table> 153 </table>
186 <option value="always">All messages</option> 165 <option value="always">All messages</option>
187 <option value="never">No messages</option> 166 <option value="never">No messages</option>
188 <option value="roster">Messages from your contacts only</option> 167 <option value="roster">Messages from your contacts only</option>
189 </select></label> 168 </select></label>
190 <img width="24" height="24" id="mam-prefs-spinner" hidden=""/><br/> 169 <img width="24" height="24" id="mam-prefs-spinner" hidden=""/><br/>
191 <table hidden=""> 170 <table class="table" hidden="">
192 <tr> 171 <tr>
193 <th>Always:</th> 172 <th>Always:</th>
194 <th>Never:</th> 173 <th>Never:</th>
195 </tr> 174 </tr>
196 <tr> 175 <tr>
199 </tr> 178 </tr>
200 </table> 179 </table>
201 <button id="mam-retrieve">Retrieve my message archive</button> <img width="24" height="24" id="mam-retrieve-spinner" hidden=""/><br/> 180 <button id="mam-retrieve">Retrieve my message archive</button> <img width="24" height="24" id="mam-retrieve-spinner" hidden=""/><br/>
202 <button disabled="">View my message archive</button><br/> 181 <button disabled="">View my message archive</button><br/>
203 <button id="mam-download" disabled="">Download my entire message archive</button><br/> 182 <button id="mam-download" disabled="">Download my entire message archive</button><br/>
204 <button disabled="">⚠️ Purge my entire message archive</button> 183 <button class="btn btn-danger" disabled="">⚠️ Purge my entire message archive</button>
205 </p> 184 </p>
206 </div> 185 </div>
207 </div> 186 </div>
208 187
209 </div> 188 </div>
210 </div> 189 </div>
211
212 <footer class="container">
213 <dl class="col-xs-4">
214 <dt class="hidden-xs">License</dt>
215 <dd><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" title="Creative Commons Attribution-ShareAlike 4.0 International License.">cc-by-sa</a></dd>
216 </dl>
217 <dl class="col-xs-4">
218 <dt class="hidden-xs">Last change</dt>
219 <dd><datetime datetime="2018-12-18">2018-12-18</datetime></dd>
220 </dl>
221 <dl class="col-xs-4 pull-right">
222 <dt class="hidden-xs">Page source</dt>
223 <dd><a rel="alternate" href="https://hg.prosody.im/site/file/e956afb61f21/index.md">index.md</a></dd>
224 </dl>
225 </footer>
226 190
227 <script src="util.js"/> 191 <script src="util.js"/>
228 <script src="strophe.js"/> 192 <script src="strophe.js"/>
229 <script src="strophe.rsm.js"/> 193 <script src="strophe.rsm.js"/>
230 <script src="strophe.mam.js"/> 194 <script src="strophe.mam.js"/>