Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 8ebafb71

History | View | Annotate | Download (28.7 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 "Invite people" %}";
77
        var APP_DEBUG = {% if DEBUG %}true{% else %}false{% endif %};
78
        var FEEDBACK_URL = "{% url feedback %}";
79
        var FEEDBACK_TITLE = "{% trans "Send us 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
                    // wrap in its own try catch to avoid retriggering ajax_error
289
                    try {
290
                        var data = $.extend({'error_info': $.extend({}, extra_data)}, get_user_data());
291
                        var payload = {'feedback-msg': "Automated error report", 'feedback-data': JSON.stringify(data)};
292

293
                        // we will close error overlay to display feedback form
294
                        // set feedback pending flag to not reload the window url
295
                        // unless the user is done with the feedback
296
                        window.FEEDBACK_PENDING = true;
297

298
                        $("a#notification").overlay().close();
299

300
                        var errorCode = extra_data[0] || -10;
301
                        var errorType = extra_data[1] || "Generic error";
302
                        var errorAction = extra_data[2] || "noaction";
303
                        var errorData = extra_data[3] || "";
304
                            
305
                        fdb_msg =   "Error report\n" +
306
                                    "------------\n" + 
307
                                    "Code: " + errorCode + "\n" + 
308
                                    "Type: " + errorType + "\n" + 
309
                                    "Action: " + errorAction + "\n" + 
310
                                    "Data: " + errorData + "\n\n" + 
311
                                    "Please describe the actions that triggered the error:\n";
312

313
                        setTimeout('show_feedback_form(fdb_msg, 1); $("#exposeMask").show();', 400);
314
                    } catch (err) {
315
                        console.log(err);
316
                        sel(".send-btn").hide();
317
                        sel(".errormsg").fadeIn();
318
                        window.FEEDBACK_PENDING = false;
319
                    }
320
                });
321
            }
322

323
            // bring up error notification
324
            var triggers = $("a#notification").overlay({
325
                // some mask tweaks suitable for modal dialogs
326
                mask: '#666',
327
                top: 'center',
328
                closeOnClick: false,
329
                fixed: false,
330
                oneInstance: false,
331
                load: false,
332
                onClose: function () {
333
                    // user requested feedback from error page
334
                    if (!window.FEEDBACK_PENDING) {
335
                        // refresh the whole page
336
                       location.reload();
337
                    }
338
                },
339
                onLoad: function() {
340
                    initialize_error_report($(this.getOverlay()), [status, serverID, action, responseText]);
341
                }
342

343
            });
344

345
            // we need to give the browser some time to close the old overlays before opening the new one
346
            setTimeout("$('a#notification').data('overlay').load()",400);
347
            return false;
348
        }
349

350
        // ajax success checking
351
        function ajax_success(status, password) {
352
            // prepare the error message
353
            // bring up success notification
354
            $('#error-success').addClass('success');
355
            $('#error-success').removeClass('error');
356
            if (status !== undefined && SUCCESS[status]) {
357
                if (password !== undefined && status === "CREATE_VM_SUCCESS") {
358

359
                    //stop the progress icon and hide the wizard
360
                    $('#wizard #start').text('{% trans "Create VM" %}');
361
                    $("#wizard").hide();
362

363
                    $("#error-success h3 span.header-box").text(SUCCESS[status]);
364
                    var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_THREE"] + '<br / >'
365
                        + SUCCESS["CREATE_VM_SUCCESS_FOUR"];
366
                    $("#error-success div.machine-now-building").html(SUCCESS["CREATE_VM_SUCCESS_ONE"]);
367
                    $("#error-success .popup-header").removeClass("popup-header-error");
368
                    $("#error-success").removeClass("popup-border-error");
369
                    $("#error-success .popup-details").removeClass("popup-details-error");
370
                    $("#error-success .popup-separator").removeClass("popup-separator-error");
371
                    $("#error-success .password-container").show();
372

373
                    $("#error-success .popup-details").html("</div><div class=\"write-password-details\">" + CREATE_VM_SUCCESS_MSG + "</div>");
374
                    $("#error-success div.password").html("<div class=\"write-password\">" + SUCCESS["CREATE_VM_SUCCESS_TWO"] + "<div class=\"write-password-password\">" + password + "</div></div>");
375
                    //$("#error-success div.write-password").html(SUCCESS["CREATE_VM_SUCCESS_TWO"]);
376
                    //$("#error-success div.write-password-details").html(CREATE_VM_SUCCESS_MSG);
377
                } else {
378
                    $("#error-success h3").text(SUCCESS['HEADER']);
379
                    $("#error-success div.popup-body-inner").text("<p>" + SUCCESS[status] + "</p>");
380
                }
381
            } else {
382
                $("#error-success h3").text(SUCCESS['HEADER']);
383
                $("#error-success div.popup-body-inner").html("<p>" + SUCCESS['DEFAULT'] + "</p>");
384
            }
385

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

    
456
    <!-- activate tabs with JavaScript -->
457
    <script>
458

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

479
        // set pane cookie whenever the user clicks on a different pane
480
        $("ul.css-tabs a").click(function(i) {
481
            $.cookie("pane", $("ul.css-tabs a").index(this));
482
        });
483

484
        //change menu title on hover
485
        $("ul.css-tabs li").hover(
486
            function () {
487
                if ($(this).find("a.current").length == 0) {
488
                    $(this).parent().parent().find(".tab-name").text($(this).find("a").attr("href"));
489
                }
490
            },
491
            function () {
492
                $(this).parent().parent().find(".tab-name").text($(this).parent().find("a.current").attr("href"));
493
            }
494
        );
495

496
        //load opera css fixes
497
        if ($.browser.opera) {
498
            $("<link/>", {
499
               rel: "stylesheet",
500
               type: "text/css",
501
               href: "static/opera.css"
502
            }).appendTo("head");
503
        }
504

505
        $(document).ready(function(){
506
            
507
            $(".close-msg-box").live('click', close_all_overlays);
508

509
            {% if current_lang == "el" and not DEBUG %}
510
                window.location = "/lang/?l=en";
511
            {% endif %}
512

513
            // user menu interaction
514
            var resetUserMenu = function() {
515
                $(this).removeClass("hovered");
516
                $(this).removeClass("active");
517
            }
518
            $(".usermenu").live("click", function(){
519
                $(this).addClass("active");
520
            });
521
            $(".usermenu").bind('mouseleave', resetUserMenu);
522
            $(".usermenu").live("mouseover", function(){
523
                $(this).addClass("hovered");
524
            });
525

526
            $(".usermenu li").mouseenter(function(){$(this).addClass("hovered")})
527
            $(".usermenu li").mouseleave(function(){$(this).removeClass("hovered")});
528

529
            // bind menu actions
530
            $(".usermenu .logout").click(function() {
531
                user_session_logout();
532
            });
533

534
            $(".usermenu .invitations").click(show_invitations);
535
            $(".usermenu .feedback").click(show_feedback_form);
536
                
537
        });
538
    </script>
539
    <!-- base notification for error/success reporting -->
540
    <a id="notification" rel="#error-success" href="#"></a>
541
    <a id="msgbox" rel="#notification-box" href="#"></a>
542
    <a id="feedbackbox" rel="#feedback-form" href="#"></a>
543

    
544
    <div class="modal" id="error-success">
545
        <h3 class="popup-header">
546
            <span class="header-box"></span>
547
        </h3>
548
        <div class="popup-body">
549
            <div class="popup-body-inner">
550
                <div class="error-report">
551
                    <div class="send-btn">{% trans "report error" %}</div>
552
                    <div class="sending">{% trans "sending error report..." %}</div>
553
                    <div class="errormsg">{% trans "report failed" %}</div>
554
                    <div class="success">{% trans "report send successfully" %}</div>
555
                </div>
556
                <div class="machine-now-building"></div>
557
                <div class="popup-separator"></div>
558
                <div class="password-container">
559
                    <div class="password-header"></div>
560
                    <div class="password"></div>
561
                </div>
562
                <div class="popup-details">
563
                    <div class="write-password"></div>
564
                    <div class="write-password-details">{% trans "More details about the result"%}</div>
565
                </div>
566
            </div>
567
        </div>
568
    </div>
569

    
570
    <div class="modal" id="feedback-form" class="feedback notification-box">
571
        <h3 class="popup-header">
572
            <span class="header-box">{% trans "Send us feedback" %}</span>
573
        </h3>
574
        <div class="popup-body">
575
            <div class="popup-body-inner">
576
                <div class="form-container">
577
                <p class="feedback-intro">
578
                {% blocktrans %}~okeanos is currently in alpha version and we would appreciate any kind of feedback.
579
We welcome any suggestions, questions and bug reports you may have.{% endblocktrans %}</p>
580
                <form id="feedback-form">
581
                    <label for="feedback-msg">{% trans "Please describe your problem here, provide as many details as possible" %}</label>
582
                    <div class="description"></div>
583
                    <div class="empty-error-msg">{% trans "Please provide some feedback" %}</div>
584
                    <textarea name="feedback-msg" class="feedback-text"></textarea>
585

    
586
                    <input type="checkbox" name="submit-submit-data" class='submit-data' />
587
                    <input type="submit" value="{% trans "submit " %}" class="submit" />
588
                    <textarea name="feedback-data" class="data-text"></textarea>
589
                </form>
590
            </div>
591

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

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