Mercurial > prosody-modules

comparison mod_invites_page/html/invite.html @ 4094:dd00a2b9927c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
mod_invites_page: New module to generate landing page for invites
author Matthew Wild <mwild1@gmail.com>
date Fri, 11 Sep 2020 13:52:32 +0100
parents
children 82b02f85ac31
comparison
equal deleted inserted replaced
4093:a2116f5a7c8f 4094:dd00a2b9927c
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Invite to {site_name}</title>
7 <link rel="alternate" href="{uri}">
8 <link rel="stylesheet" href="/share/bootstrap4/css/bootstrap.min.css">
9 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
10 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
11 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
12 <link rel="manifest" href="/site.webmanifest">
13 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
14 <meta name="msapplication-TileColor" content="#fbd308">
15 <meta name="theme-color" content="#fbd308">
16 </head>
17 <body>
18 <div id="background" class="fixed-top overflow-hidden" aria-role="none presentation"></div>
19 <div id="form" class="container col-md-10 col-md-offset-1 col-sm-8 col-sm-offset-2 col-lg-10 col-lg-offset-1 mt-2 mt-md-5">
20 <div class="card rounded-lg shadow">
21 <h1 class="card-header rounded-lg rounded-lg">
22 Invite to {site_name}<br/>
23 </h1>
24 <div class="card-body" >
25 <div id="qr-button-container" class="float-right w-25 border border-info p-3 d-none">
26 <strong>Tip:</strong> You can open this invite
27 on your mobile device by scanning a barcode with
28 your camera.
29 <a href="#qr-modal" class="mt-2 d-block" id="qr-modal-show">
30 <button class="btn btn-info" title="Send this invite to your device"
31 data-toggle="modal" data-target="#qr-modal">
32 <img src="{static}/qr-logo.png" class="align-middle h-50 mt-1" style="display:inline" >
33 Scan with mobile device
34 </button>
35 </a>
36 </div>
37
38 {inviter?<p>You have been invited to chat on {site_name} using XMPP,
39 a secure and decentralized messaging network.</p>}
40
41 {inviter&<p>You have been invited to chat with {inviter} on {site_name},
42 part of the XMPP secure and decentralized messaging network.</p>}
43
44 <h5 class="card-title" style="clear:both">Get started</h5>
45
46 <p>To get started, you need to install an app for your platform:</p>
47
48 <div class="container">
49 <div class="row">
50 {apps#
51 <div class="card m-3 client-card {item.platforms#app-platform-{item|lower|classname} } flex-wrap col-sm-12 col-md-8 col-lg-5">
52 <div class="row no-gutters h-100">
53 <div class="col-md-4">
54 <img src="{item.image|relurl}" class="p-2 img-fluid" alt="{item.imagetext?}">
55 </div>
56 <div class="col-md-8 h-100">
57 <div class="card-body d-flex flex-column h-100">
58 <h5 class="card-title text-nowrap mb-1">{item.name}</h5>
59 <div>
60 {item.platforms#<span class="badge badge-info client-platform-badge client-platform-badge-{item|lower|classname} mr-1 mb-3">{item}</span> }
61 </div>
62 <p class="card-text">{item.text}</p>
63 <a href="{item.proceed_url?#}" class="btn btn-primary mt-md-auto">Install</a>
64 </div>
65 </div>
66 </div>
67 </div>
68 }
69 </div>
70 </div>
71
72 <div id="show-all-clients-button-container" class="d-none alert alert-info">
73 Showing apps for <span class="platform-name">your current platform</span> only. You may also <a href="#" id="show-all-clients-button">view all apps.</a>
74 </div>
75
76 <div id="install-buttons-container" class="container mt-2 text-center">
77 </div>
78
79 <h6 class="text-center">Already have a compatible app installed?</h6>
80
81 <div class="text-center">
82 <a href="{uri}" id="uri-cta"><button class="btn btn-secondary btn-sm">Open the app</button></a><br/>
83 <small class="text-muted">This button works only if you have a compatible app installed already!</small>
84 </div>
85 <br/>
86 <h5>Other software</h5>
87 <p>You can connect to {site_name} using any XMPP-compatible software. If the button above does not
88 work with your app, you may need to <a href="register?t={token}">register an account manually</a>.</p>
89 </div>
90 </div>
91 </div>
92
93 <div class="modal" tabindex="-1" role="dialog" id="qr-modal">
94 <div class="modal-dialog" role="document">
95 <div class="modal-content">
96 <div class="modal-header">
97 <h5 class="modal-title">Scan invite code</h5>
98 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
99 <span aria-hidden="true">&times;</span>
100 </button>
101 </div>
102 <div class="modal-body">
103 <p>You can transfer this invite to your mobile device by scanning a code with your camera.</p>
104 <div id="qr-info-url" class="tab-pane show active">
105 <p>Use a <em>QR code</em> scanner on your mobile device to scan the code below:</p>
106 <div id="qr-invite-page" class="w-50 p-1 mx-auto"></div>
107 </div>
108 <div class="modal-footer">
109 <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
110 </div>
111 </div>
112 </div>
113 </div>
114
115 <script src="/share/jquery/jquery.min.js"></script>
116 <script src="/share/bootstrap4/js/bootstrap.min.js"></script>
117 <script src="{static}/qrcode.min.js"></script>
118 <script src="{static}/platform.min.js"></script>
119 <script type="text/javascript">
120 $(function () {
121 // If QR lib loaded ok, show QR button on desktop devices
122 if(window.QRCode) {
123 $('#qr-modal').one('show.bs.modal', function (e) {
124 new QRCode(document.getElementById("qr-invite-page"), document.location.href);
125 });
126 $('#qr-button-container').addClass("d-md-block");
127 }
128
129 // Detect current platform and show/hide appropriate clients
130 if(window.platform) {
131 var platform_friendly = null;
132 var platform_classname = null;
133
134 switch(platform.os.family) {
135 case "Ubuntu":
136 case "Linux":
137 case "Fedora":
138 case "Red Hat":
139 case "SuSE":
140 platform_friendly = platform.os.family + " (Linux)";
141 platform_classname = "linux";
142 break;
143 case "Windows Phone":
144 platform_friendly = "Windows Phone";
145 platform_classname = "windows-phone";
146 break;
147 default:
148 if(platform.os.family.startsWith("Windows")) {
149 platform_friendly = "Windows";
150 platform_classname = "windows";
151 }
152 }
153
154 if(platform_friendly && platform_classname) {
155 // Hide clients not for this platform
156 $('.client-card.app-platform-'+platform_classname).addClass("supported-platform");
157 $('.client-card').not(".supported-platform").hide();
158 $('.client-card .client-platform-badge')
159 .not(".client-platform-badge-"+platform_classname)
160 .addClass("badge-secondary")
161 .removeClass("badge-info");
162 $('.client-card .client-platform-badge-'+platform_classname)
163 .addClass("badge-success")
164 .removeClass("badge-info");
165 $('#show-all-clients-button-container .platform-name').text(platform_friendly);
166 $('#show-all-clients-button-container').removeClass("d-none");
167 $('#show-all-clients-button').click(function () {
168 $('.client-card').show();
169 $('#show-all-clients-button-container').hide();
170 });
171 }
172 }
173 });
174
175 </script>
176 </body>
177 </html>