Rev 2314 | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | SVN | RSS feed
| Rev 2314 | Rev 2318 | ||
|---|---|---|---|
| 1 | <?php |
1 | <?php |
| 2 | require_once("backend.php"); |
2 | require_once("backend.php"); |
| 3 | require_once("config.php"); |
3 | require_once("config.php"); |
| 4 | ?> |
4 | ?> |
| 5 | <!DOCTYPE HTML> |
5 | <!DOCTYPE HTML> |
| 6 | <html> |
6 | <html> |
| 7 | <head> |
7 | <head> |
| 8 | <meta charset="utf-8"> |
8 | <meta charset="utf-8"> |
| 9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 10 | <title>Home Automation Control Center</title> |
10 | <title>Home Automation Control Center</title> |
| 11 | <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> |
11 | <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> |
| - | 12 | <link rel="manifest" href="manifest.json" /> |
|
| 12 | <script src="jquery-1.7.2.min.js"></script> |
13 | <script src="jquery-1.7.2.min.js"></script> |
| 13 | <script src="jquery.timeago.js"></script> |
14 | <script src="jquery.timeago.js"></script> |
| 14 | <script src="jquery.mobile-1.1.1.min.js"></script> |
15 | <script src="jquery.mobile-1.1.1.min.js"></script> |
| 15 | <script src="jquery.tmpl.min.js"></script> |
16 | <script src="jquery.tmpl.min.js"></script> |
| 16 | 17 | ||
| 17 | <style> |
18 | <style> |
| 18 | <?php |
19 | <?php |
| 19 | foreach ($pages as $page) |
20 | foreach ($pages as $page) |
| 20 | { |
21 | { |
| 21 | if (file_exists("pages/" . $page . "/style.css")) |
22 | if (file_exists("pages/" . $page . "/style.css")) |
| 22 | { |
23 | { |
| 23 | include("pages/" . $page . "/style.css"); |
24 | include("pages/" . $page . "/style.css"); |
| 24 | } |
25 | } |
| 25 | } |
26 | } |
| 26 | ?> |
27 | ?> |
| 27 | 28 | ||
| 28 | .ui-li-heading { |
29 | .ui-li-heading { |
| 29 | white-space: normal; |
30 | white-space: normal; |
| 30 | } |
31 | } |
| 31 | </style> |
32 | </style> |
| 32 | 33 | ||
| 33 | <?php |
34 | <?php |
| 34 | foreach ($pages as $page) |
35 | foreach ($pages as $page) |
| 35 | { |
36 | { |
| 36 | if (file_exists("pages/" . $page . "/template.html")) |
37 | if (file_exists("pages/" . $page . "/template.html")) |
| 37 | { |
38 | { |
| 38 | include("pages/" . $page . "/template.html"); |
39 | include("pages/" . $page . "/template.html"); |
| 39 | } |
40 | } |
| 40 | } |
41 | } |
| 41 | ?> |
42 | ?> |
| 42 | 43 | ||
| 43 | <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false"> |
44 | <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false"> |
| 44 | <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}"> |
45 | <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}"> |
| 45 | <div data-id="PersistentFooter" data-role="header" data-position="fixed" data-tap-toggle="false"> |
46 | <div data-id="PersistentFooter" data-role="header" data-position="fixed" data-tap-toggle="false"> |
| 46 | <div data-role="navbar"> |
47 | <div data-role="navbar"> |
| 47 | <ul class="navbar-container"></ul> |
48 | <ul class="navbar-container"></ul> |
| 48 | </div> |
49 | </div> |
| 49 | </div> |
50 | </div> |
| 50 | <div data-role="content"></div> |
51 | <div data-role="content"></div> |
| 51 | </div> |
52 | </div> |
| 52 | </script> |
53 | </script> |
| 53 | 54 | ||
| 54 | <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false"> |
55 | <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false"> |
| 55 | <span> |
56 | <span> |
| 56 | <a href="#" data-role="button">${title}</a> |
57 | <a href="#" data-role="button">${title}</a> |
| 57 | </span> |
58 | </span> |
| 58 | </script> |
59 | </script> |
| 59 | 60 | ||
| 60 | <script> |
61 | <script> |
| 61 | $.mobile.ignoreContentEnabled = true; |
62 | $.mobile.ignoreContentEnabled = true; |
| 62 | $.mobile.transitionFallbacks.pop = "none"; |
63 | $.mobile.transitionFallbacks.pop = "none"; |
| 63 | $.mobile.transitionFallbacks.flip = "none"; |
64 | $.mobile.transitionFallbacks.flip = "none"; |
| 64 | $.mobile.transitionFallbacks.turn = "none"; |
65 | $.mobile.transitionFallbacks.turn = "none"; |
| 65 | $.mobile.transitionFallbacks.flow = "none"; |
66 | $.mobile.transitionFallbacks.flow = "none"; |
| 66 | $.mobile.transitionFallbacks.slidefade = "none"; |
67 | $.mobile.transitionFallbacks.slidefade = "none"; |
| 67 | $.mobile.transitionFallbacks.slide = "none"; |
68 | $.mobile.transitionFallbacks.slide = "none"; |
| 68 | $.mobile.transitionFallbacks.slideup = "none"; |
69 | $.mobile.transitionFallbacks.slideup = "none"; |
| 69 | $.mobile.transitionFallbacks.slidedown = "none"; |
70 | $.mobile.transitionFallbacks.slidedown = "none"; |
| 70 | $.mobile.defaultPageTransition = "none"; |
71 | $.mobile.defaultPageTransition = "none"; |
| 71 | $.mobile.ajaxEnabled = false; |
72 | $.mobile.ajaxEnabled = false; |
| 72 | 73 | ||
| 73 | var commandActive = false; |
74 | var commandActive = false; |
| 74 | var commandQueue = []; |
75 | var commandQueue = []; |
| 75 | 76 | ||
| 76 | function sendCommand(command, callback) |
77 | function sendCommand(command, callback) |
| 77 | { |
78 | { |
| 78 | if (commandActive) |
79 | if (commandActive) |
| 79 | { |
80 | { |
| 80 | commandQueue.push({ command: command, callback: callback }); |
81 | commandQueue.push({ command: command, callback: callback }); |
| 81 | } |
82 | } |
| 82 | else |
83 | else |
| 83 | { |
84 | { |
| 84 | commandActive = true; |
85 | commandActive = true; |
| 85 | 86 | ||
| 86 | jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData) |
87 | jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData) |
| 87 | { |
88 | { |
| 88 | handleCommandResponse(true, jsonData, callback); |
89 | handleCommandResponse(true, jsonData, callback); |
| 89 | }).error(function() |
90 | }).error(function() |
| 90 | { |
91 | { |
| 91 | handleCommandResponse(false, {}, callback); |
92 | handleCommandResponse(false, {}, callback); |
| 92 | }); |
93 | }); |
| 93 | } |
94 | } |
| 94 | } |
95 | } |
| 95 | 96 | ||
| 96 | function handleCommandResponse(success, jsonData, callback) |
97 | function handleCommandResponse(success, jsonData, callback) |
| 97 | { |
98 | { |
| 98 | commandActive = false; |
99 | commandActive = false; |
| 99 | 100 | ||
| 100 | if (commandQueue.length > 0) |
101 | if (commandQueue.length > 0) |
| 101 | { |
102 | { |
| 102 | var commandItem = commandQueue.shift(); |
103 | var commandItem = commandQueue.shift(); |
| 103 | 104 | ||
| 104 | sendCommand(commandItem.command, commandItem.callback); |
105 | sendCommand(commandItem.command, commandItem.callback); |
| 105 | } |
106 | } |
| 106 | 107 | ||
| 107 | if (success) |
108 | if (success) |
| 108 | { |
109 | { |
| 109 | if (callback) |
110 | if (callback) |
| 110 | { |
111 | { |
| 111 | callback(jsonData); |
112 | callback(jsonData); |
| 112 | } |
113 | } |
| 113 | } |
114 | } |
| 114 | else |
115 | else |
| 115 | { |
116 | { |
| 116 | console.log("command failed!"); |
117 | console.log("command failed!"); |
| 117 | } |
118 | } |
| 118 | } |
119 | } |
| 119 | </script> |
120 | </script> |
| 120 | 121 | ||
| 121 | <script> |
122 | <script> |
| 122 | var pages = {}; |
123 | var pages = {}; |
| 123 | 124 | ||
| 124 | <?php |
125 | <?php |
| 125 | foreach ($pages as $page) |
126 | foreach ($pages as $page) |
| 126 | { |
127 | { |
| 127 | include("pages/" . $page . "/script.js"); |
128 | include("pages/" . $page . "/script.js"); |
| 128 | } |
129 | } |
| 129 | ?> |
130 | ?> |
| 130 | </script> |
131 | </script> |
| 131 | 132 | ||
| 132 | <script> |
133 | <script> |
| 133 | 134 | ||
| 134 | var aliasNames = <?php echo json_encode($aliasNames); ?>; |
135 | var aliasNames = <?php echo json_encode($aliasNames); ?>; |
| 135 | var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>; |
136 | var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>; |
| 136 | var pageInstances = { }; |
137 | var pageInstances = { }; |
| 137 | var serverTimeOffset = 0; |
138 | var serverTimeOffset = 0; |
| 138 | 139 | ||
| 139 | function getServerTimestamp() |
140 | function getServerTimestamp() |
| 140 | { |
141 | { |
| 141 | return ((new Date()).getTime()) - serverTimeOffset |
142 | return ((new Date()).getTime()) - serverTimeOffset |
| 142 | } |
143 | } |
| 143 | 144 | ||
| 144 | $(document).ready(function(event) |
145 | $(document).ready(function(event) |
| 145 | { |
146 | { |
| 146 | sendCommand("(new Date()).getTime();", function(timestamp) |
147 | sendCommand("(new Date()).getTime();", function(timestamp) |
| 147 | { |
148 | { |
| 148 | serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10); |
149 | serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10); |
| 149 | }); |
150 | }); |
| 150 | 151 | ||
| 151 | jQuery.each(pageConfigurations, function(n, configuration) |
152 | jQuery.each(pageConfigurations, function(n, configuration) |
| 152 | { |
153 | { |
| 153 | var pageName = configuration.page + "_" + n; |
154 | var pageName = configuration.page + "_" + n; |
| 154 | 155 | ||
| 155 | pageInstances[pageName] = configuration; |
156 | pageInstances[pageName] = configuration; |
| 156 | 157 | ||
| 157 | pageInstances[pageName].name = pageName; |
158 | pageInstances[pageName].name = pageName; |
| 158 | 159 | ||
| 159 | pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page(); |
160 | pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page(); |
| 160 | pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)"); |
161 | pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)"); |
| 161 | 162 | ||
| 162 | if (pages[configuration.page] && pages[configuration.page].init) |
163 | if (pages[configuration.page] && pages[configuration.page].init) |
| 163 | { |
164 | { |
| 164 | pages[configuration.page].init(pageInstances[pageName]); |
165 | pages[configuration.page].init(pageInstances[pageName]); |
| 165 | } |
166 | } |
| 166 | }); |
167 | }); |
| 167 | 168 | ||
| 168 | 169 | ||
| 169 | jQuery.each(pageInstances, function(pageName, pageInstance) |
170 | jQuery.each(pageInstances, function(pageName, pageInstance) |
| 170 | { |
171 | { |
| 171 | var navbarContainerElement = pageInstances[pageName].pageElement.find("ul.navbar-container"); |
172 | var navbarContainerElement = pageInstances[pageName].pageElement.find("ul.navbar-container"); |
| 172 | 173 | ||
| 173 | jQuery.each(pageInstances, function(pageName2, pageInstance2) |
174 | jQuery.each(pageInstances, function(pageName2, pageInstance2) |
| 174 | { |
175 | { |
| 175 | if (pageInstance === pageInstance2) |
176 | if (pageInstance === pageInstance2) |
| 176 | { |
177 | { |
| 177 | $("<li class=''><a href='#page-" + pageName2 + "' class='ui-btn-active ui-state-persist'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement); |
178 | $("<li class=''><a href='#page-" + pageName2 + "' class='ui-btn-active ui-state-persist'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement); |
| 178 | } |
179 | } |
| 179 | else |
180 | else |
| 180 | { |
181 | { |
| 181 | $("<li class=''><a href='#page-" + pageName2 + "'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement); |
182 | $("<li class=''><a href='#page-" + pageName2 + "'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement); |
| 182 | } |
183 | } |
| 183 | }); |
184 | }); |
| 184 | }); |
185 | }); |
| 185 | 186 | ||
| 186 | $(":jqmData(role=header)").navbar(); |
187 | $(":jqmData(role=header)").navbar(); |
| 187 | 188 | ||
| 188 | 189 | ||
| 189 | /*$(".ui-page").on("swipeleft", function() |
190 | /*$(".ui-page").on("swipeleft", function() |
| 190 | { |
191 | { |
| 191 | var nextpage = $(this).nextAll(":jqmData(role=page)"); |
192 | var nextpage = $(this).nextAll(":jqmData(role=page)"); |
| 192 | 193 | ||
| 193 | if (nextpage.length > 0) |
194 | if (nextpage.length > 0) |
| 194 | { |
195 | { |
| 195 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
196 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
| 196 | } |
197 | } |
| 197 | else |
198 | else |
| 198 | { |
199 | { |
| 199 | nextpage = $(":jqmData(role=page)"); |
200 | nextpage = $(":jqmData(role=page)"); |
| 200 | 201 | ||
| 201 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
202 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
| 202 | } |
203 | } |
| 203 | }); |
204 | }); |
| 204 | |
205 | |
| 205 | $(".ui-page").on("swiperight", function() |
206 | $(".ui-page").on("swiperight", function() |
| 206 | { |
207 | { |
| 207 | var prevpage = $(this).prevAll(":jqmData(role=page)"); |
208 | var prevpage = $(this).prevAll(":jqmData(role=page)"); |
| 208 | 209 | ||
| 209 | if (prevpage.length > 0) |
210 | if (prevpage.length > 0) |
| 210 | { |
211 | { |
| 211 | $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true }); |
212 | $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true }); |
| 212 | } |
213 | } |
| 213 | else |
214 | else |
| 214 | { |
215 | { |
| 215 | prevpage = $(":jqmData(role=page)"); |
216 | prevpage = $(":jqmData(role=page)"); |
| 216 | 217 | ||
| 217 | $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true }); |
218 | $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true }); |
| 218 | } |
219 | } |
| 219 | });*/ |
220 | });*/ |
| 220 | 221 | ||
| 221 | $(".ui-page").on("pagebeforeshow", function(arg1, arg2) |
222 | $(".ui-page").on("pagebeforeshow", function(arg1, arg2) |
| 222 | { |
223 | { |
| 223 | var res=arg1.currentTarget.id.split("-"); |
224 | var res=arg1.currentTarget.id.split("-"); |
| 224 | if (res[1] != null) { |
225 | if (res[1] != null) { |
| 225 | res=res[1].split("_"); |
226 | res=res[1].split("_"); |
| 226 | if (pages[res[0]].pageshow) { |
227 | if (pages[res[0]].pageshow) { |
| 227 | pages[res[0]].pageshow(); |
228 | pages[res[0]].pageshow(); |
| 228 | } |
229 | } |
| 229 | } |
230 | } |
| 230 | }); |
231 | }); |
| 231 | 232 | ||
| 232 | $(".ui-page").on("pagehide", function(arg1, arg2) |
233 | $(".ui-page").on("pagehide", function(arg1, arg2) |
| 233 | { |
234 | { |
| 234 | 235 | ||
| 235 | var res=arg1.currentTarget.id.split("-"); |
236 | var res=arg1.currentTarget.id.split("-"); |
| 236 | if (res[1] != null) { |
237 | if (res[1] != null) { |
| 237 | res=res[1].split("_"); |
238 | res=res[1].split("_"); |
| 238 | if (pages[res[0]].pagehide) { |
239 | if (pages[res[0]].pagehide) { |
| 239 | pages[res[0]].pagehide(); |
240 | pages[res[0]].pagehide(); |
| 240 | } |
241 | } |
| 241 | } |
242 | } |
| 242 | }); |
243 | }); |
| 243 | 244 | ||
| 244 | $(":jqmData(role=navbar)").delegate("a", "vclick", function(event) |
245 | $(":jqmData(role=navbar)").delegate("a", "vclick", function(event) |
| 245 | { |
246 | { |
| 246 | if(!$(event.target).hasClass("ui-disabled")) |
247 | if(!$(event.target).hasClass("ui-disabled")) |
| 247 | { |
248 | { |
| 248 | $(":jqmData(role=navbar)").find("a").not(".ui-state-persist").removeClass($.mobile.activeBtnClass); |
249 | $(":jqmData(role=navbar)").find("a").not(".ui-state-persist").removeClass($.mobile.activeBtnClass); |
| 249 | $(this).addClass($.mobile.activeBtnClass); |
250 | $(this).addClass($.mobile.activeBtnClass); |
| 250 | } |
251 | } |
| 251 | }); |
252 | }); |
| 252 | 253 | ||
| 253 | if (document.location.hash === "" || document.location.hash === "#") |
254 | if (document.location.hash === "" || document.location.hash === "#") |
| 254 | { |
255 | { |
| 255 | document.location.hash = "#" + $(":jqmData(role=page)").attr("id"); |
256 | document.location.hash = "#" + $(":jqmData(role=page)").attr("id"); |
| 256 | } |
257 | } |
| 257 | 258 | ||
| 258 | $.mobile.changePage($(document.location.hash)); |
259 | $.mobile.changePage($(document.location.hash)); |
| 259 | 260 | ||
| 260 | }); |
261 | }); |
| 261 | 262 | ||
| 262 | var dialogCloseTimer = null; |
263 | var dialogCloseTimer = null; |
| 263 | var dialogCloseCallback = null; |
264 | var dialogCloseCallback = null; |
| 264 | 265 | ||
| 265 | function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback) |
266 | function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback) |
| 266 | { |
267 | { |
| 267 | closeDialog(); |
268 | closeDialog(); |
| 268 | 269 | ||
| 269 | $("#dialog .dialog-title").text(titleText); |
270 | $("#dialog .dialog-title").text(titleText); |
| 270 | $("#dialog .dialog-contents").html(contentsHtml); |
271 | $("#dialog .dialog-contents").html(contentsHtml); |
| 271 | $("#dialog a").on("click", function(event) |
272 | $("#dialog a").on("click", function(event) |
| 272 | { |
273 | { |
| 273 | closeDialog(); |
274 | closeDialog(); |
| 274 | event.preventDefault(); |
275 | event.preventDefault(); |
| 275 | return false; |
276 | return false; |
| 276 | }); |
277 | }); |
| 277 | 278 | ||
| 278 | dialogCloseCallback = closeCallback; |
279 | dialogCloseCallback = closeCallback; |
| 279 | 280 | ||
| 280 | $.mobile.changePage($("#dialog"), { role: "dialog"}); |
281 | $.mobile.changePage($("#dialog"), { role: "dialog"}); |
| 281 | 282 | ||
| 282 | $("#dialog").dialog({ close: function(event) |
283 | $("#dialog").dialog({ close: function(event) |
| 283 | { |
284 | { |
| 284 | var callback = dialogCloseCallback; |
285 | var callback = dialogCloseCallback; |
| 285 | 286 | ||
| 286 | closeDialog(); |
287 | closeDialog(); |
| 287 | 288 | ||
| 288 | if (callback) |
289 | if (callback) |
| 289 | { |
290 | { |
| 290 | callback(); |
291 | callback(); |
| 291 | } |
292 | } |
| 292 | }}); |
293 | }}); |
| 293 | 294 | ||
| 294 | 295 | ||
| 295 | if (autoCloseTimeout) |
296 | if (autoCloseTimeout) |
| 296 | { |
297 | { |
| 297 | dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout); |
298 | dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout); |
| 298 | } |
299 | } |
| 299 | } |
300 | } |
| 300 | 301 | ||
| 301 | function closeDialog() |
302 | function closeDialog() |
| 302 | { |
303 | { |
| 303 | if (dialogCloseTimer) |
304 | if (dialogCloseTimer) |
| 304 | { |
305 | { |
| 305 | clearTimeout(dialogCloseTimer); |
306 | clearTimeout(dialogCloseTimer); |
| 306 | dialogCloseTimer = null; |
307 | dialogCloseTimer = null; |
| 307 | } |
308 | } |
| 308 | 309 | ||
| 309 | if ($("#dialog").is(":visible")) |
310 | if ($("#dialog").is(":visible")) |
| 310 | { |
311 | { |
| 311 | $("#dialog").dialog("close"); |
312 | $("#dialog").dialog("close"); |
| 312 | 313 | ||
| 313 | if (dialogCloseCallback) |
314 | if (dialogCloseCallback) |
| 314 | { |
315 | { |
| 315 | dialogCloseCallback(); |
316 | dialogCloseCallback(); |
| 316 | } |
317 | } |
| 317 | } |
318 | } |
| 318 | 319 | ||
| 319 | dialogCloseCallback = null; |
320 | dialogCloseCallback = null; |
| 320 | } |
321 | } |
| 321 | 322 | ||
| 322 | 323 | ||
| 323 | </script> |
324 | </script> |
| 324 | </head> |
325 | </head> |
| 325 | 326 | ||
| 326 | <body> |
327 | <body> |
| 327 | <div data-role="dialog" id="dialog"> |
328 | <div data-role="dialog" id="dialog"> |
| 328 | <div data-role="content"> |
329 | <div data-role="content"> |
| 329 | <h3 class="dialog-title"></h3> |
330 | <h3 class="dialog-title"></h3> |
| 330 | <p class="dialog-contents"></p> |
331 | <p class="dialog-contents"></p> |
| 331 | <a href="#" data-role="button" data-theme="c">Close</a> |
332 | <a href="#" data-role="button" data-theme="c">Close</a> |
| 332 | </div> |
333 | </div> |
| 333 | </div> |
334 | </div> |
| 334 | 335 | ||
| 335 | </body> |
336 | </body> |
| 336 | </html> |
337 | </html> |
| 337 | 338 | ||