Mercurial > xmpp-account-manager

comparison index.xhtml @ 15:3eed9fe0bd7c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
End spinners with either a green ✔ or a red ✘.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sat, 22 Dec 2018 18:38:27 +0100
parents 8724e28ccbd7
children 07543f7f5e89
comparison
equal deleted inserted replaced
14:962f64b156dd 15:3eed9fe0bd7c
41 <div class="row"> 41 <div class="row">
42 <form id="connection"> 42 <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”"/> 43 <input type="email" id="jid" placeholder="JID" title="Enter your JID (or XMPP address), on the form “you@your-server.tld”"/>
44 <input type="password" id="pass" placeholder="Password" title="Enter the password used for this JID"/> 44 <input type="password" id="pass" placeholder="Password" title="Enter the password used for this JID"/>
45 <input type="submit" id="connect" value="Log in"/> 45 <input type="submit" id="connect" value="Log in"/>
46 <img src="spinner.svg" width="24" height="24" id="connect-spinner" hidden=""/> 46 <img width="24" height="24" id="connect-spinner" hidden=""/>
47 </form> 47 </form>
48 </div> 48 </div>
49 49
50 <div id="connected" hidden=""> 50 <div id="connected" hidden="">
51 51
54 <h2>Nickname</h2> 54 <h2>Nickname</h2>
55 </div> 55 </div>
56 <div class="col-sm-8"> 56 <div class="col-sm-8">
57 <p> 57 <p>
58 <input id="nick" placeholder="Nickname"/> 58 <input id="nick" placeholder="Nickname"/>
59 <img src="spinner.svg" width="24" height="24" id="nick-spinner"/> 59 <img width="24" height="24" id="nick-spinner"/>
60 </p> 60 </p>
61 <p> 61 <p>
62 Enter your nickname, so people you know can recognize you. 62 Enter your nickname, so people you know can recognize you.
63 </p> 63 </p>
64 </div> 64 </div>
70 <div class="col-sm-4"> 70 <div class="col-sm-4">
71 <h2>Avatar</h2> 71 <h2>Avatar</h2>
72 <p>This image allows your contact to quickly identify you.</p> 72 <p>This image allows your contact to quickly identify you.</p>
73 </div> 73 </div>
74 <div class="col-sm-8"> 74 <div class="col-sm-8">
75 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img src="spinner.svg" width="24" height="24" id="avatar-spinner"/><br/> 75 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/> <img width="24" height="24" id="avatar-spinner"/><br/>
76 <input type="file" style="display:none" accept="image/*" id="avatar-file"/> 76 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
77 <p><label>Upload new avatar<br/> 77 <p><label>Upload new avatar<br/>
78 <button id="avatar-upload">Choose file…</button></label><br/> 78 <button id="avatar-upload">Choose file…</button></label><br/>
79 <button id="avatar-change" hidden="">Use as your avatar</button><br/> 79 <button id="avatar-change" hidden="">Use as your avatar</button><br/>
80 <label>Who can see your avatar? <select id="avatar-access"> 80 <label>Who can see your avatar? <select id="avatar-access">
81 <option value="open">Anyone (pick this if you use public groupchats)</option> 81 <option value="open">Anyone (pick this if you use public groupchats)</option>
82 <option value="presence">Only your contacts</option> 82 <option value="presence">Only your contacts</option>
83 </select></label> <img src="spinner.svg" width="24" height="24" id="access-model-avatar-spinner" hidden=""/> 83 </select></label> <img width="24" height="24" id="access-model-avatar-spinner" hidden=""/>
84 </p> 84 </p>
85 </div> 85 </div>
86 </div> 86 </div>
87 87
88 <hr/> 88 <hr/>