diff options
author | tg(x) <*@tg-x.net> | 2016-10-11 18:57:09 +0200 |
---|---|---|
committer | tg(x) <*@tg-x.net> | 2016-10-11 18:57:09 +0200 |
commit | ea953cbcb0d36c24d157a79aa2c28ab0b9650dec (patch) | |
tree | 44d15ec7ab12e1ced72a8ab16129ebce8578452f | |
parent | ee101ab2d248a7742a6f7ae271ac93e13ca9d4f8 (diff) | |
download | www-ea953cbcb0d36c24d157a79aa2c28ab0b9650dec.tar.gz www-ea953cbcb0d36c24d157a79aa2c28ab0b9650dec.zip |
wallet: styling
-rw-r--r-- | wallet-installation.html | 281 |
1 files changed, 152 insertions, 129 deletions
diff --git a/wallet-installation.html b/wallet-installation.html index 1b5cdad4..f2d862d2 100644 --- a/wallet-installation.html +++ b/wallet-installation.html | |||
@@ -1,162 +1,185 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | 2 | <html> |
3 | <head profile="http://www.w3.org/2005/10/profile"> | 3 | <head profile="http://www.w3.org/2005/10/profile"> |
4 | <meta charset="utf-8"/> | 4 | <meta charset="utf-8"/> |
5 | <title>Taler Wallet Installation</title> | 5 | <title>GNU Taler - Wallet</title> |
6 | <link rel="icon" type="image/png" href="/web-common/favicon-taler.ico" /> | 6 | <meta name="description" content=""> |
7 | <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/millncjiddlpgdmkklmhfadpacifaonc" /> | 7 | <!--# include file="common/header.inc" --> |
8 | <script src="web-common/taler-wallet-lib.js" type="text/javascript"></script> | ||
9 | |||
10 | <script type="application/javascript"> | ||
11 | /* | ||
12 | @licstart The following is the entire license notice for the | ||
13 | JavaScript code in this page. | ||
14 | |||
15 | Copyright (C) 2015 GNUnet e.V. | ||
16 | |||
17 | The JavaScript code in this page is free software: you can | ||
18 | redistribute it and/or modify it under the terms of the GNU | ||
19 | Lesser General Public License (GNU LGPL) as published by the Free Software | ||
20 | Foundation, either version 2.1 of the License, or (at your option) | ||
21 | any later version. The code is distributed WITHOUT ANY WARRANTY; | ||
22 | without even the implied warranty of MERCHANTABILITY or FITNESS | ||
23 | FOR A PARTICULAR PURPOSE. See the GNU LGPL for more details. | ||
24 | |||
25 | As additional permission under GNU LGPL version 2.1 section 7, you | ||
26 | may distribute non-source (e.g., minimized or compacted) forms of | ||
27 | that code without the copy of the GNU LGPL normally required by | ||
28 | section 4, provided you include this license notice and a URL | ||
29 | through which recipients can access the Corresponding Source. | ||
30 | |||
31 | @licend The above is the entire license notice | ||
32 | for the JavaScript code in this page. | ||
33 | */ | ||
34 | |||
35 | var chrome_min_version = '47.0.2526'; | ||
36 | |||
37 | function onSuccess() { | ||
38 | console.log("installation successful"); | ||
39 | document.getElementById("install-result").appendChild(document.createTextNode("Installation was successful.")); | ||
40 | } | ||
41 | 8 | ||
42 | function onFailure(detail) { | 9 | <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/millncjiddlpgdmkklmhfadpacifaonc" /> |
43 | console.error("installation failed:", detail); | 10 | <script src="web-common/taler-wallet-lib.js" type="text/javascript"></script> |
44 | document.getElementById("install-result").appendChild(document.createTextNode("Installation failed: " + detail)); | ||
45 | } | ||
46 | 11 | ||
47 | function installWallet() { | 12 | <script type="application/javascript"> |
48 | if (window.chrome) { | 13 | /* |
14 | @licstart The following is the entire license notice for the | ||
15 | JavaScript code in this page. | ||
16 | |||
17 | Copyright (C) 2015 GNUnet e.V. | ||
18 | |||
19 | The JavaScript code in this page is free software: you can | ||
20 | redistribute it and/or modify it under the terms of the GNU | ||
21 | Lesser General Public License (GNU LGPL) as published by the Free Software | ||
22 | Foundation, either version 2.1 of the License, or (at your option) | ||
23 | any later version. The code is distributed WITHOUT ANY WARRANTY; | ||
24 | without even the implied warranty of MERCHANTABILITY or FITNESS | ||
25 | FOR A PARTICULAR PURPOSE. See the GNU LGPL for more details. | ||
26 | |||
27 | As additional permission under GNU LGPL version 2.1 section 7, you | ||
28 | may distribute non-source (e.g., minimized or compacted) forms of | ||
29 | that code without the copy of the GNU LGPL normally required by | ||
30 | section 4, provided you include this license notice and a URL | ||
31 | through which recipients can access the Corresponding Source. | ||
32 | |||
33 | @licend The above is the entire license notice | ||
34 | for the JavaScript code in this page. | ||
35 | */ | ||
36 | |||
37 | var chrome_min_version = '49'; | ||
38 | |||
39 | function onSuccess() { | ||
40 | console.log("installation successful"); | ||
41 | document.getElementById("install-result").appendChild(document.createTextNode("Installation was successful.")); | ||
42 | } | ||
43 | |||
44 | function onFailure(detail) { | ||
45 | console.error("installation failed:", detail); | ||
46 | document.getElementById("install-result").appendChild(document.createTextNode("Installation failed: " + detail)); | ||
47 | } | ||
48 | |||
49 | function installWallet() { | ||
50 | if (window.chrome) { | ||
49 | chrome.webstore.install("https://chrome.google.com/webstore/detail/millncjiddlpgdmkklmhfadpacifaonc", onSuccess, onFailure); | 51 | chrome.webstore.install("https://chrome.google.com/webstore/detail/millncjiddlpgdmkklmhfadpacifaonc", onSuccess, onFailure); |
50 | } else { | 52 | } else { |
51 | onFailure("Google Chrome or Chromium is required for installation."); | 53 | onFailure("Google Chrome or Chromium is required for installation."); |
52 | } | ||
53 | } | 54 | } |
55 | } | ||
54 | 56 | ||
55 | try { | 57 | try { |
56 | taler.onPresent(function () { | 58 | taler.onPresent(function () { |
57 | document.getElementById("box-present").style.display = "inherit"; | 59 | document.getElementById("box-present").style.display = "inherit"; |
58 | document.getElementById("box-not-present").style.display = "none"; | 60 | document.getElementById("box-not-present").style.display = "none"; |
59 | }); | 61 | }); |
60 | taler.onAbsent(function () { | 62 | taler.onAbsent(function () { |
61 | document.getElementById("box-present").style.display = "none"; | 63 | document.getElementById("box-present").style.display = "none"; |
62 | document.getElementById("box-not-present").style.display = "inherit"; | 64 | document.getElementById("box-not-present").style.display = "inherit"; |
63 | }); | 65 | }); |
64 | } catch (err) { | 66 | } catch (err) {} |
65 | } | ||
66 | 67 | ||
67 | function onLoad() { | 68 | function onLoad() { |
68 | if (typeof window.chrome != "object") { | 69 | if (typeof window.chrome != "object") { |
69 | document.getElementById("error-chrome").style.display = "inherit"; | 70 | document.getElementById("error-chrome").style.display = "inherit"; |
70 | } else { | 71 | } else { |
71 | var m = navigator.userAgent.match(/Chrome\/([0-9.]+)/); | 72 | var m = navigator.userAgent.match(/Chrome\/([0-9.]+)/); |
72 | if (null == m || m[1] < chrome_min_version) { | 73 | if (null == m || m[1] < chrome_min_version) { |
73 | document.getElementById('chrome-min-version').appendChild(document.createTextNode(chrome_min_version)); | 74 | document.getElementById('chrome-min-version').appendChild(document.createTextNode(chrome_min_version)); |
74 | document.getElementById('error-chrome-version').style.display = "inherit"; | 75 | document.getElementById('error-chrome-version').style.display = "inherit"; |
75 | } | 76 | } |
76 | } | ||
77 | } | 77 | } |
78 | } | ||
78 | 79 | ||
79 | document.addEventListener('DOMContentLoaded', onLoad); | 80 | document.addEventListener('DOMContentLoaded', onLoad); |
80 | </script> | 81 | </script> |
81 | 82 | ||
82 | <style type="text/css"> | 83 | <style type="text/css"> |
83 | .greenbox { | 84 | .greenbox { |
84 | background-color: #5EFF64; | 85 | background-color: #5EFF64; |
85 | border: solid; | 86 | border: solid; |
86 | border-radius: 5px; | 87 | border-radius: 5px; |
87 | padding: 0.5em; | 88 | padding: 0.5em; |
88 | } | 89 | } |
89 | .bluebox { | 90 | .bluebox { |
90 | background-color: #C2C6FF; | 91 | background-color: #C2C6FF; |
91 | border: solid; | 92 | border: solid; |
92 | border-radius: 5px; | 93 | border-radius: 5px; |
93 | padding: 0.5em; | 94 | padding: 0.5em; |
94 | } | 95 | } |
95 | .error { | 96 | .error { |
96 | font-style: italic; | 97 | font-style: italic; |
97 | display: none; | 98 | display: none; |
98 | } | 99 | } |
99 | #install-result { | 100 | #install-result { |
100 | font-weight: bold; | 101 | font-weight: bold; |
101 | } | 102 | } |
102 | 103 | ||
103 | main ul li { | 104 | main ul li { |
104 | margin-bottom: 1em; | 105 | margin-bottom: 1em; |
105 | } | 106 | } |
106 | </style> | 107 | </style> |
107 | </head> | 108 | </head> |
108 | 109 | ||
109 | <body> | 110 | <body class="en" onLoad="loadLang();"> |
110 | <h1>Install the Taler wallet</h1> | 111 | <div class="container"> |
111 | 112 | <!--# include file="common/navigation.inc" --> | |
112 | <main style="display:inline-block;"> | 113 | <!-- Jumbotron --> |
113 | <h2>Google Chrome / Chromium 49+</h2> | 114 | <div class="jumbotron"> |
114 | <p id="error-chrome" class="error"> | 115 | <h1 lang="en">Taler Wallet</h1> |
115 | <a href="https://www.google.com/chrome">Google Chrome</a> or <a href="https://www.chromium.org/">Chromium</a> | 116 | </div> |
116 | is required, but it appears you don't have it installed. | 117 | |
117 | </p> | 118 | <div class="row"> |
118 | <p id="error-chrome-version" class="error"> | 119 | <div class="col-lg-6"> |
119 | <a href="https://www.google.com/chrome">Google Chrome</a> or <a href="https://www.chromium.org/">Chromium</a> | 120 | |
120 | version <span id="chrome-min-version"></span> or newer is required, but it appears you have an older version.</p> | 121 | <h2>Google Chrome / Chromium 49+</h2> |
121 | <ul> | 122 | |
122 | <li> | 123 | <p id="error-chrome" class="error"> |
123 | <a href="https://chrome.google.com/webstore/detail/gnu-taler-wallet/millncjiddlpgdmkklmhfadpacifaonc">Install from the Chrome Web Store</a> | 124 | <a href="https://www.google.com/chrome">Google Chrome</a> or <a href="https://www.chromium.org/">Chromium</a> |
124 | </li> | 125 | is required, but it appears you don't have it installed. |
125 | <li id="inline-install-chrome"> | 126 | </p> |
126 | <button onclick="installWallet()" id="install-button"> | 127 | <p id="error-chrome-version" class="error"> |
127 | Install from this page | 128 | <a href="https://www.google.com/chrome">Google Chrome</a> or <a href="https://www.chromium.org/">Chromium</a> |
128 | </button> | 129 | version <span id="chrome-min-version"></span> or newer is required, but it appears you have an older version.</p> |
129 | <div id="install-result"></div> | 130 | <ul> |
130 | </li> | 131 | <li> |
131 | </ul> | 132 | <a href="https://chrome.google.com/webstore/detail/gnu-taler-wallet/millncjiddlpgdmkklmhfadpacifaonc">Install from the Chrome Web Store</a> |
132 | 133 | </li> | |
133 | <h2>Firefox 50+</h2> | 134 | <li id="inline-install-chrome"> |
134 | 135 | <button onclick="installWallet()" id="install-button"> | |
135 | <p>The add-on is currently in the process of being signed by Mozilla, | 136 | Install from this page |
136 | until then it can be installed the following way:</p> | 137 | </button> |
137 | 138 | <div id="install-result"></div> | |
138 | <h3>Firefox Beta</h3> | 139 | </li> |
139 | <ol> | 140 | </ul> |
140 | <li><a href="/releases/taler-wallet/taler-wallet-stable.xpi">Download the wallet</a> (right click, Save Link As...)</li> | 141 | </div> <!-- /col-lg-6 --> |
141 | <li>On the <code>about:debugging</code> page, "Load temporary extension"</li> | 142 | |
142 | </ol> | 143 | <div class="col-lg-6"> |
143 | 144 | <h2>Firefox 50+</h2> | |
144 | <h3>Firefox Developer Edition</h3> | 145 | |
145 | <p>Either from the <code>about:debugging</code> page like above, or:</p> | 146 | <p>The add-on is currently in the process of being signed by Mozilla, |
146 | <ol> | 147 | until then it can be installed the following way:</p> |
147 | <li>On the <code>about:config</code> page set <code>xpinstall.signatures.required</code> to <code>false</code></li> | 148 | |
148 | <li><a href="/releases/taler-wallet/taler-wallet-stable.xpi">Install the wallet</a></li> | 149 | <h3>Firefox Beta</h3> |
149 | </ol> | 150 | <ol> |
150 | 151 | <li><a href="/releases/taler-wallet/taler-wallet-stable.xpi">Download the wallet</a> (right click, Save Link As...)</li> | |
151 | <h2>Other browsers</h2> | 152 | <li>On the <code>about:debugging</code> page, "Load temporary extension"</li> |
152 | <p>Wallets for other browsers will be provided in the near future.</p> | 153 | </ol> |
153 | <p class="greenbox" id="box-present" style="display:none"> | 154 | |
154 | Congratulations, you have installed the Taler wallet. | 155 | <h3>Firefox Developer Edition</h3> |
155 | Check out the <a href="https://demo.taler.net/">demo</a>. | 156 | <p>Either from the <code>about:debugging</code> page like above, or:</p> |
156 | </p> | 157 | <ol> |
157 | <p class="bluebox" id="box-not-present" style="display:none"> | 158 | <li>On the <code>about:config</code> page set <code>xpinstall.signatures.required</code> to <code>false</code></li> |
158 | You don't have a wallet installed yet. | 159 | <li><a href="/releases/taler-wallet/taler-wallet-stable.xpi">Install the wallet</a></li> |
159 | </p> | 160 | </ol> |
160 | </main> | 161 | |
161 | </body> | 162 | </div> <!-- /col-lg-6 --> |
163 | |||
164 | </div> <!-- /row --> | ||
165 | |||
166 | <div class="row"> | ||
167 | |||
168 | <div class="col-lg-6"> | ||
169 | <h2>Other browsers</h2> | ||
170 | <p>Wallets for other browsers will be provided in the near future.</p> | ||
171 | <p class="greenbox" id="box-present" style="display:none"> | ||
172 | Congratulations, you have installed the Taler wallet. | ||
173 | Check out the <a href="https://demo.taler.net/">demo</a>. | ||
174 | </p> | ||
175 | <p class="bluebox" id="box-not-present" style="display:none"> | ||
176 | You don't have a wallet installed yet. | ||
177 | </p> | ||
178 | |||
179 | </div> <!-- /col-lg-6 --> | ||
180 | </div> <!-- /row --> | ||
181 | |||
182 | <!--# include file="common/footer.inc" --> | ||
183 | </div> <!-- /container --> | ||
184 | </body> | ||
162 | </html> | 185 | </html> |