Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 54417a11

History | View | Annotate | Download (28.3 kB)

1
<!--
2
Copyright 2011 GRNET S.A. All rights reserved.
3

4
Redistribution and use in source and binary forms, with or
5
without modification, are permitted provided that the following
6
conditions are met:
7

8
  1. Redistributions of source code must retain the above
9
     copyright notice, this list of conditions and the following
10
     disclaimer.
11

12
  2. Redistributions in binary form must reproduce the above
13
     copyright notice, this list of conditions and the following
14
     disclaimer in the documentation and/or other materials
15
     provided with the distribution.
16

17
THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
18
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
21
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
24
USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
25
AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
26
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
27
ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28
POSSIBILITY OF SUCH DAMAGE.
29

30
The views and conclusions contained in the software and
31
documentation are those of the authors and should not be
32
interpreted as representing official policies, either expressed
33
or implied, of GRNET S.A.
34
-->
35

    
36
<html>
37

    
38
{% load i18n %}
39
<!DOCTYPE html>
40
<head>
41
    <title>~okeanos</title>
42
    <!-- include the Tools -->
43
    <!-- jquery tools minified for deployment-->
44
    <script src="static/jquery.tools.min.js"></script>
45
    <!-- jquery tools source for JS debugging -->
46
    <!--
47
    <script src="http://flowplayer.org/tools/download/1.2.5/jquery-1.4.2.js"></script>
48
    <script src="http://flowplayer.org/tools/download/1.2.5/tabs/tabs.js"></script>
49
    <script src="http://flowplayer.org/tools/download/1.2.5/scrollable/scrollable.js"></script>
50
    <script src="http://flowplayer.org/tools/download/1.2.5/overlay/overlay.js"></script>
51
    <script src="http://flowplayer.org/tools/download/1.2.5/rangeinput/rangeinput.js"></script>
52
    <script src="http://flowplayer.org/tools/download/1.2.5/toolbox/toolbox.expose.js"></script>
53
    -->
54
    <script src="static/jquery.cookie.js"></script>
55
    <script src="static/jquery.client.js"></script>
56
    <script src="static/json2.js"></script>
57
    <script src="static/jquery.dataTables.min.js"></script>
58
    <script src="static/invitations.js"></script>
59
    <script src="static/synnefo.js"></script>
60

    
61
    <link rel="stylesheet" type="text/css" href="static/main.css"/>
62
    <!--[if IE]><style type="text/css" media="all">@import url(static/ie.css);</style><![endif]-->
63
    <script>
64
        // empty object for console to avoid errors in browsers that don't support it
65
        if (!window.console) {window.console = {}; window.console.log = window.console.info = window.console.debug =
66
            window.console.error = function() {}};
67

68
        //populate available image icons array
69
        var os_icons = {{image_icons|safe}};
70

71
        // timeout value from settings.py
72
        var TIMEOUT = {{timeout}};
73
        var UPDATE_INTERVAL = {{update_interval}};
74
        var LOGOUT_REDIRECT = undefined;
75
        var INVITATIONS_URL = "{% url invitations %}";
76
        var INVITATIONS_TITLE = "{% trans "Invitations" %}";
77
        var APP_DEBUG = {% if DEBUG %}true{% else %}false{% endif %};
78
        var FEEDBACK_URL = "{% url feedback %}";
79
        var FEEDBACK_TITLE = "{% trans "Feedback" %}";
80

81
        // server statuses and transitions
82
        var STATUSES = {
83
            'UNKNOWN'   : '{% trans "Unknown" %}',
84
            'BUILD'     : '{% trans "Building" %}',
85
            'REBOOT'    : '{% trans "Rebooting" %}',
86
            'STOPPED'   : '{% trans "Stopped" %}',
87
            'ACTIVE'    : '{% trans "Running" %}',
88
            'ERROR'     : '{% trans "Error" %}'
89
        };
90

91
        var TRANSITIONS = {
92
            'Shutting down' : '{% trans "Shutting down" %}',
93
            'Rebooting'     : '{% trans "Rebooting" %}',
94
            'Starting'      : '{% trans "Starting" %}',
95
            'Destroying'    : '{% trans "Destroying" %}',
96
            'Connecting'    : '{% trans "Connecting" %}',   // used only in networks
97
            'Disconnecting' : '{% trans "Disconnecting" %}' // used only in networks
98
        };
99

100
        // Server statuses and transitions that should be displayed as active or inactive
101
        var ACTIVE_STATES = [
102
            '{% trans "Building" %}',
103
            '{% trans "Rebooting" %}',
104
            '{% trans "Running" %}',
105
            '{% trans "Shutting down" %}',
106
            '{% trans "Rebooting" %}',
107
            '{% trans "Destroying" %}'
108
        ];
109

110
        var INACTIVE_STATES = [
111
            '{% trans "Unknown" %}',
112
            '{% trans "Stopped" %}',
113
            '{% trans "Error" %}',
114
            '{% trans "Starting" %}',
115
        ];
116

117
        // Network statuses and transitions
118
        var NET_STATES = {
119
            'ACTIVE'        : '{% trans "Private network" %}',  // this comes from the API
120
            'DELETED'       : '{% trans "Deleted" %}',          // this comes from the API
121
            'Destroying'    : '{% trans "Destroying" %}',
122
            'Connecting'    : '{% trans "Connecting" %}',
123
            'Disconnecting' : '{% trans "Disconnecting" %}'
124
        };
125

126
        var ERRORS = {
127
            // error message header
128
            'HEADER' : '{% trans "Error" %}',
129
            // default
130
            'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
131
            // bad request
132
            '400' : '{% trans "Malformed request." %}',
133
            // not found
134
            '404' : '{% trans "Your request has failed. Resource not found." %}',
135
            // internal server error
136
            '500' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
137
            // service unavailable
138
            '501' : '{% trans "This server has not been implemented yet." %}',
139
            // service unavailable
140
            '502' : '{% trans "Bad Gateway error." %}',
141
            // service unavailable
142
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
143
            // no server handshake
144
            '0' : '{% trans "Could not contact the server." %}',
145
            // no images found
146
            'NO_IMAGES' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
147
            // no flavors found
148
            'NO_FLAVORS' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
149
            // error box title
150
            'GENERIC_POPUP_HEADER' : '{% trans "Something seems to have gone wrong :( Here is what happened:" %}',
151
            // no advanced details
152
            'NO_DETAILS' : '{% trans "Νο advanced details provided" %}'
153
        };
154

155
        var SUCCESS = {
156
            'HEADER' : '{% trans "Success" %}',
157
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
158
            'PASSWORD' : '{% trans "Password:" %}',
159
            'CREATE_VM_SUCCESS' : '{% trans "Success" %}',
160
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your new machine is now buidling... (this might take a few minutes)" %}',
161
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Write down your password now:" %}',
162
            'CREATE_VM_SUCCESS_THREE' : '{% trans "You will need this later to connect to your machine." %}',
163
            'CREATE_VM_SUCCESS_FOUR' : '{% trans "After closing this window you will NOT be able to retrieve it again." %}'
164
        };
165

166
        var VARIOUS = {
167
            'CONFIRM' : '{% trans "Confirm" %}',
168
            'CANCEL' : '{% trans "Cancel" %}',
169
            'APPLY' : '{% trans "Apply" %}',
170
            'OFF' : '{% trans "Off" %}',
171
            'ON' : '{% trans "On" %}'
172
        };
173

174
        // ajax error checking
175
        function ajax_error(status, serverID, action, responseText) {
176
             // close existing overlays to begin with
177
            close_all_overlays();
178
            // clear old deferred calls (stops all auto-updates)
179
            clearTimeout(deferred);
180

181
            $('#error-success').addClass('error');
182
            $('#error-success').removeClass('success');
183

184
            var serverName = '';
185

186
            if (serverID !== undefined) {
187
                // standard view
188
                serverName = $("#" + serverID).find("span.name").text();
189
                if (serverName === "") { // list view
190
                    serverName = $("#" + serverID).parent().parent().find("span.name").text();
191
                }
192
            }
193

194
            // prepare the error message
195
            $("#error-success h3").text(ERRORS['HEADER']);
196
            if (responseText !== undefined) {
197
                var errors = parse_error(responseText, status), details = '';
198
                if (serverName) {
199
                    serverName = "<p>{% trans "Server" %}: " + serverName + "</p>";
200
                }
201

202
                if ((errors[0].details === undefined) || (errors[0].details === "")) {
203
                    details = ERRORS["NO_DETAILS"];
204
                    
205
                    // if no details message show debug info
206
                    if (window.APP_DEBUG) {
207
                        details = responseText;
208
                        try {
209
                            console.trace();
210
                        } catch (err) {
211
                        }
212
                    }
213
                } else {
214
                    details = errors[0].details;
215
                }
216

217
                $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
218
                $("#error-success .popup-header").addClass("popup-header-error");
219
                $("#error-success").addClass("popup-border-error");
220
                $("#error-success .password-container").hide();
221
                $("#error-success .popup-details").addClass("popup-details-error");
222
                $("#error-success .popup-separator").addClass("popup-separator-error");
223
                $("#error-success .popup-details").html("<p>" + 
224
                    (errors[0].message || ERRORS[errors[0].code] || serverID) + 
225
                    "</p>" + serverName + "<p>{% trans "Action" %}:" + 
226
                    action + "</p><p>{% trans "Code" %}: " + errors[0].code + 
227
                    "<p><a class='expand-details' href='#'>{% trans 'Details' %}</a><div class='more-details'>" + 
228
                    details + "</div></p>");
229

230
            } else if (ERRORS[status] !== undefined) {
231
                if (serverID === undefined) {
232
                    //eg no_images, no_flavors cases
233
                    $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
234
                    $("#error-success .popup-header").addClass("popup-header-error");
235
                    $("#error-success").addClass("popup-border-error");
236
                    $("#error-success .password-container").hide();
237
                    $("#error-success .popup-details").addClass("popup-details-error");
238
                    $("#error-success .popup-separator").addClass("popup-separator-error");
239
                    $("#error-success .popup-details").html("<p>" + ERRORS[status] + "</p>");
240
                } else {
241
                    $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
242
                    $("#error-success .popup-header").addClass("popup-header-error");
243
                    $("#error-success").addClass("popup-border-error");
244
                    $("#error-success .password-container").hide();
245
                    $("#error-success .popup-details").addClass("popup-details-error");
246
                    $("#error-success .popup-separator").addClass("popup-separator-error");
247
                    $("#error-success .popup-details").html("<p>" + ERRORS[status] + "</p><p>" + serverName + "</p>");
248
                }
249
            } else {
250
                $("#error-success .machine-now-building").html(ERRORS["DEFAULT"]);
251
                $("#error-success .popup-header").addClass("popup-header-error");
252
                $("#error-success").addClass("popup-border-error");
253
                $("#error-success .password-container").hide();
254
                $("#error-success .popup-details").hide();
255
                $("#error-success .popup-separator").hide();
256
            }
257
            $("#error-success p:first").css("padding-bottom", "10px");
258
            $("#error-success p:first").css("color", "#800000");
259
            $("#error-success div.more-details").hide();
260
            $("#error-success a.expand-details").live('click', function () {
261
                $(this).parent().parent().find("div.more-details").slideToggle(600);
262
                return false;
263
            });
264
            //stop the progress icon and hide the wizard
265
            if (action !== undefined) {
266
                if (action === 'Create VM') {
267
                    $('#wizard #start').text('{% trans "Create VM" %}');
268
                    $("#wizard").hide();
269
                } else if (action === 'Create network') {
270
                    $('#networks-wizard').hide();
271
                } else if (action === 'Add server to network') {
272
                    $('#add-machines-wizard').hide();
273
                }
274
            }
275

276
            
277
            // prepare ajax call to get called when user clicks on 
278
            // send error report button
279
            function initialize_error_report(cont, extra_data) {
280
                var cont = $(cont);
281
                var sel = function(sel) {return $(sel, cont)};
282
                var btn = sel(".send-btn");
283
                var extra_data = extra_data;
284

285
                // clear previous callbacks
286
                btn.unbind('click');
287
                btn.click(function(){
288

289
                    // wrap in its own try catch to avoid retriggering ajax_error
290

291
                    try {
292
                        var data = $.extend({'error_info': $.extend({}, extra_data)}, get_user_data());
293
                        var payload = {'feedback-msg': "Automated error report", 'feedback-data': JSON.stringify(data)};
294
                        
295
                        $.ajax({
296
                            url: FEEDBACK_URL,
297
                            type: "POST",
298
                            data: $.param(payload),
299
                            beforeSend: function() {
300
                                sel(".send-btn").hide();
301
                                sel(".sending").fadeIn();
302
                            },
303
                            error: function() {
304
                                sel(".sending").hide();
305
                                sel(".errormsg").fadeIn();
306
                            },
307
                            success: function() {
308
                                sel(".sending").hide();
309
                                sel(".success").fadeIn();
310
                            }
311
                        });
312

313
                    } catch (err) {
314
                        console.error(err);
315
                    }
316
                });
317
            }
318

319
            // bring up error notification
320
            var triggers = $("a#notification").overlay({
321
                // some mask tweaks suitable for modal dialogs
322
                mask: '#666',
323
                top: 'center',
324
                closeOnClick: false,
325
                fixed: false,
326
                oneInstance: false,
327
                load: false,
328
                onClose: function () {
329
                   // refresh the whole page
330
                   location.reload();
331
                },
332
                onLoad: function() {
333
                    initialize_error_report($(this.getOverlay()), [status, serverID, action, responseText]);
334
                }
335

336
            });
337

338
            // we need to give the browser some time to close the old overlays before opening the new one
339
            setTimeout("$('a#notification').data('overlay').load()",400);
340
            return false;
341
        }
342

343
        // ajax success checking
344
        function ajax_success(status, password) {
345
            // prepare the error message
346
            // bring up success notification
347
            $('#error-success').addClass('success');
348
            $('#error-success').removeClass('error');
349
            if (status !== undefined && SUCCESS[status]) {
350
                if (password !== undefined && status === "CREATE_VM_SUCCESS") {
351

352
                    //stop the progress icon and hide the wizard
353
                    $('#wizard #start').text('{% trans "Create VM" %}');
354
                    $("#wizard").hide();
355

356
                    $("#error-success h3 span.header-box").text(SUCCESS[status]);
357
                    var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_THREE"] + '<br / >'
358
                        + SUCCESS["CREATE_VM_SUCCESS_FOUR"];
359
                    $("#error-success div.machine-now-building").html(SUCCESS["CREATE_VM_SUCCESS_ONE"]);
360
                    $("#error-success .popup-header").removeClass("popup-header-error");
361
                    $("#error-success").removeClass("popup-border-error");
362
                    $("#error-success .popup-details").removeClass("popup-details-error");
363
                    $("#error-success .popup-separator").removeClass("popup-separator-error");
364
                    $("#error-success .password-container").show();
365

366
                    $("#error-success .popup-details").html("</div><div class=\"write-password-details\">" + CREATE_VM_SUCCESS_MSG + "</div>");
367
                    $("#error-success div.password").html("<div class=\"write-password\">" + SUCCESS["CREATE_VM_SUCCESS_TWO"] + "<div class=\"write-password-password\">" + password + "</div></div>");
368
                    //$("#error-success div.write-password").html(SUCCESS["CREATE_VM_SUCCESS_TWO"]);
369
                    //$("#error-success div.write-password-details").html(CREATE_VM_SUCCESS_MSG);
370
                } else {
371
                    $("#error-success h3").text(SUCCESS['HEADER']);
372
                    $("#error-success div.popup-body-inner").text("<p>" + SUCCESS[status] + "</p>");
373
                }
374
            } else {
375
                $("#error-success h3").text(SUCCESS['HEADER']);
376
                $("#error-success div.popup-body-inner").html("<p>" + SUCCESS['DEFAULT'] + "</p>");
377
            }
378

379
            var triggers = $("a#notification").overlay({
380
                // some mask tweaks suitable for modal dialogs
381
                mask: '#666',
382
                top: 'center',
383
                closeOnClick: false,
384
                oneInstance: false,
385
                load: false,
386
                onClose: function () {
387
                    // With partial refresh working properly,
388
                    // it is no longer necessary to refresh the whole page
389
                    // choose_view();
390
                }
391
            });
392
            $("a#notification").data('overlay').load();
393
            return false;
394
        }
395
    </script>
396
</head>
397
<body>
398
    <div id="container">
399
        <div id='header'>
400
            <div id='user'>
401
                <div class="usermenu">
402
                    <div class="username">{{ request.user.uniq }}</div>
403
                    <ul class="useractions">
404
                        <li class="invitations"><a class="action" href="#">{% trans "invitations" %}</a></li>
405
                        <li class="feedback"><a class="action" href="#">{% trans "feedback" %}</a></li>
406
                        <li class="logout last"><a class="action" href="#">{% trans "logout" %}</a></li>
407
                    </ul>
408
                </div>
409
                <div class="langmenu">
410
                <a class="current_lang">en</a>
411
                {% comment %}
412
                {% get_available_languages as LANGUAGES %}
413
                {% for lang in LANGUAGES %}
414
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
415
                    {% if not forloop.last %}<span class="sep">~</span>{% endif %}
416
                    {% endfor %}
417
                {% endcomment %}
418
                </div>
419
            </div>
420
            <div class="header-logo">
421
                <a href="/">
422
                    <img src="static/okeanos.png" alt="okeanos"/>
423
                </a>
424
            </div>
425
        </div>
426
        <div id="content">
427
            <div id="wrapper">
428
                <!-- tabs -->
429
                <div class="tab-name">{% trans "machines" %}</div>
430
                <div class="tab-separator"></div>
431
                <ul class="css-tabs">
432
                    <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
433
                        <img src="static/machines-icon.png" /></a></li><div class="tab-separator"></div>
434
                    <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
435
                        <img src="static/networks-icon.png" /></a></li><div class="tab-separator"></div>
436
                    <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
437
                        <img src="static/disks-icon.png" /></a></li>
438
                </ul>
439
                <div class="css-panes">
440
                    <div id="machines-pane" class="pane" style="display:block;"></div>
441
                    <div id="networks-pane" class="pane"></div>
442
                    <div id="disks-pane" class="pane"></div>
443
                </div>
444
            </div>
445
        </div>
446
        {% include "footer.html" %}
447
    </div>
448

    
449
    <!-- activate tabs with JavaScript -->
450
    <script>
451

452
        $(function() {
453
            // check pane cookie to select the initial pane
454
            var initial = 0, pane = $.cookie("pane");
455
            if (pane > 0)
456
                initial = pane;
457
            //alert(initial);
458
            $("ul.css-tabs").tabs("div.css-panes div.pane", {
459
                initialIndex: initial,
460
                onBeforeClick: function(event, i) {
461
                    this.getPanes().children().remove();
462
                    // get the pane to be opened
463
                    var pane = this.getPanes().eq(i);
464
                    //change the displaying title
465
                    $(".tab-name").text(this.getTabs().eq(i).attr("href"));
466
                    // load it with a page specified in the tab's href attribute
467
                    pane.load(this.getTabs().eq(i).attr("href"),function() {if (!i) {choose_view()}});
468
                }
469
            });
470
        });
471

472
        // set pane cookie whenever the user clicks on a different pane
473
        $("ul.css-tabs a").click(function(i) {
474
            $.cookie("pane", $("ul.css-tabs a").index(this));
475
        });
476

477
        //change menu title on hover
478
        $("ul.css-tabs li").hover(
479
            function () {
480
                if ($(this).find("a.current").length == 0) {
481
                    $(this).parent().parent().find(".tab-name").text($(this).find("a").attr("href"));
482
                }
483
            },
484
            function () {
485
                $(this).parent().parent().find(".tab-name").text($(this).parent().find("a.current").attr("href"));
486
            }
487
        );
488

489
        //load opera css fixes
490
        if ($.browser.opera) {
491
            $("<link/>", {
492
               rel: "stylesheet",
493
               type: "text/css",
494
               href: "static/opera.css"
495
            }).appendTo("head");
496
        }
497

498
        $(document).ready(function(){
499
            
500
            $(".close-msg-box").live('click', close_all_overlays);
501

502
            {% if current_lang == "el" and not DEBUG %}
503
                window.location = "/lang/?l=en";
504
            {% endif %}
505

506
            // user menu interaction
507
            var resetUserMenu = function() {
508
                $(this).removeClass("hovered");
509
                $(this).removeClass("active");
510
            }
511
            $(".usermenu").live("click", function(){
512
                $(this).addClass("active");
513
            });
514
            $(".usermenu").bind('mouseleave', resetUserMenu);
515
            $(".usermenu").live("mouseover", function(){
516
                $(this).addClass("hovered");
517
            });
518

519
            $(".usermenu li").mouseenter(function(){$(this).addClass("hovered")})
520
            $(".usermenu li").mouseleave(function(){$(this).removeClass("hovered")});
521

522
            // bind menu actions
523
            $(".usermenu .logout").click(function() {
524
                user_session_logout();
525
            });
526

527
            $(".usermenu .invitations").click(show_invitations);
528
            $(".usermenu .feedback").click(show_feedback_form);
529

530
        });
531
    </script>
532
    <!-- base notification for error/success reporting -->
533
    <a id="notification" rel="#error-success" href="#"></a>
534
    <a id="msgbox" rel="#notification-box" href="#"></a>
535
    <a id="feedbackbox" rel="#feedback-form" href="#"></a>
536

    
537
    <div class="modal" id="error-success">
538
        <h3 class="popup-header">
539
            <span class="header-box">{% trans "Feedback form" %}</span>
540
        </h3>
541
        <div class="popup-body">
542
            <div class="popup-body-inner">
543
                <div class="error-report">
544
                    <div class="send-btn">{% trans "send error report" %}</div>
545
                    <div class="sending">{% trans "sending...." %}</div>
546
                    <div class="errormsg">{% trans "cannot send error report" %}</div>
547
                    <div class="success">{% trans "report send successfully" %}</div>
548
                </div>
549
                <div class="machine-now-building"></div>
550
                <div class="popup-separator"></div>
551
                <div class="password-container">
552
                    <div class="password-header"></div>
553
                    <div class="password"></div>
554
                </div>
555
                <div class="popup-details">
556
                    <div class="write-password"></div>
557
                    <div class="write-password-details">{% trans "More details about the result"%}</div>
558
                </div>
559
            </div>
560
        </div>
561
    </div>
562

    
563
    <div class="modal" id="feedback-form" class="feedback notification-box">
564
        <h3 class="popup-header">
565
            <span class="header-box">{% trans "Feedback form" %}</span>
566
        </h3>
567
        <div class="popup-body">
568
            <div class="popup-body-inner">
569
                <div class="form-container">
570
                <p class="feedback-intro">
571
                {% blocktrans %}
572
                Feedback form intro text ..... .. ... .. ..... .. .. . .. . .. .. .. ...... .. .
573
                Feedback form intro text ..... .. ... .. ..... .. .. . .. . .. .. .. ...... .. .
574
                Feedback form intro text ..... .. ... .. ..... .. .. . .. . .. .. .. ...... .. .
575
                {% endblocktrans %}</p>
576
                <form id="feedback-form">
577
                    <label for="feedback-msg">{% trans "Feedback or question" %}</label>
578
                    <div class="description">{% trans "please describe here .... blah blah blah" %}</div>
579
                    <div class="empty-error-msg">{% trans "Please fill out the feedback form" %}</div>
580
                    <textarea name="feedback-msg" class="feedback-text"></textarea>
581
                    <input type="checkbox" name="submit-submit-data"/><label class="inline" for="submit-submit-data">{% trans "submit application data" %}</label>
582
                    <div class="description">{% trans "describe what application data checkbox does" %}</div>
583
                    <input type="submit" value="{% trans "submit " %}" class="submit" />
584
                    <textarea name="feedback-data" class="data-text"></textarea>
585
                </form>
586
            </div>
587

    
588
            <div class="message sending">{% trans "submiting your data....." %}</div>
589
            <div class="message success">
590
                {% trans "thank you for submiting your feedback" %}
591
                <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
592
            <div class="message errormsg">
593
                {% trans "some error occured submiting submiting your feedback, please try again later" %}
594
                <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
595
            </div>
596
            </div>
597
        </div>
598
    </div>
599

    
600
    <div class="modal" id="notification-box" class="notification-box">
601
        <h3 class="popup-header">
602
            <span class="header-box"></span>
603
        </h3>
604
        <div class="popup-body">
605
            <div class="popup-body-inner">
606
                <div class="machine-now-building"></div>
607
                <div class="popup-separator"></div>
608
                <div class="password-container">
609
                    <div class="password"></div>
610
                </div>
611
                <div class="sub-text"></div>
612
            </div>
613
        </div>
614
    </div>
615
</body>
616
</html>