Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ cc570918

History | View | Annotate | Download (4.2 kB)

1
{% load i18n %}
2
<!DOCTYPE html>
3
<head>
4
        <title>{{ project }}</title>
5
        <!-- include the Tools -->
6
        <script src="static/jquery.tools.min.js"></script>
7
    <script src="static/jQueryRotate.js"></script>
8
        <link rel="stylesheet" type="text/css" href="static/main.css"/>        
9
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
10

    
11
</head>
12
<body>
13
    <div id="wrapper">
14
        <div id='user'>
15
            <a href="#">{% trans "username" %}</a> &nbsp;|&nbsp; <a href="#">{% trans "settings" %}</a>
16
            {% get_available_languages as LANGUAGES %}
17
            {% for lang in LANGUAGES %}
18
                &nbsp;|&nbsp;
19
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a> 
20
            {% endfor %}
21
        </div>
22
        <div id='header'>
23
            <a href="/" class="logo">
24
                <img src="static/nefo.png" alt="+nefo"/>
25
            </a>
26
            <div class='fatborder'></div>
27
        </div>
28
        <!-- tabs -->
29
        <ul class="css-tabs">
30
                <li><a href="machines" title="{% trans "manage  virtual " %}" id="machines">{% trans "machines" %}
31
                </a></li>
32
                <li><a href="disks" title="{% trans "manage  storage " %}" id="disks">{% trans "disks" %}</a></li>
33
                <li><a href="images" title="{% trans "manage  images" %}" id="images">{% trans "images" %}</a></li>
34
                <li><a href="networks" title="{% trans "configure " %}" id="networks">{% trans "networks" %}</a></li>
35
            <li><a href="files" title="{% trans "your " %}" id="files">{% trans "files" %}</a></li>
36
                <li><a href="desktops" title="{% trans "your " %}" id="desktops">{% trans "desktops" %}</a></li>
37
                <li><a href="apps" title="{% trans "your " %}" id="apps">{% trans "apps" %}</a></li>
38
        </ul>
39
        <div class="more-tabs"><img src="static/arrow.png" id="arrow"></img></div>
40
        <div class="css-panes">
41
                <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
42
                <div id="disks-pane" class="pane"></div>
43
                <div id="images-pane" class="pane"></div>
44
                <div id="networks-pane" class="pane"></div>
45
            <div id="files-pane" class="pane"></div>
46
                <div id="desktops-pane" class="pane"></div>
47
                <div id="apps-pane" class="pane"></div>
48
        </div>
49
    </div>
50
    <!-- activate tabs with JavaScript -->
51
    <script>
52
                $(function() {
53
                    $('ul.css-tabs li').hover(function(){
54
                            $(this).find('a:not(.current)').animate({top:'0px'},{queue:false,duration:150});
55
            }, function(){
56
                $('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});
57
                    });
58
                });
59
        $(function() {
60
                $("ul.css-tabs").tabs("div.css-panes div.pane", {        
61
                        onBeforeClick: function(event, i) {
62
                    $('ul.css-tabs li a').animate({top:'9px'},{queue:false,duration:150});
63
                                // get the pane to be opened
64
                                var pane = this.getPanes().eq(i);
65
                    pane.text('');
66
                                // load it with a page specified in the tab's href attribute
67
                                pane.load(this.getTabs().eq(i).attr("href"));
68

69
                        }
70
                });
71
        });
72
        // what should be working
73
        /*
74
        $(".inactive#arrow").click(function(event){
75
            $(this).removeClass("inactive");
76
            $(this).addClass("active");
77
            $(this).rotateAnimation(90);
78
        });
79

80
        $(".active#arrow").click(function(event){
81
            $(this).removeClass("active");
82
            $(this).addClass("inactive");
83
            $(this).rotateAnimation(0);
84
        });
85
        */
86
        
87
        // what is working
88
        $("#arrow").click(function(event){
89
            var state = true; 
90
            $(this).rotate({animateAngle: (90), bind:[{
91
                "click":function(){
92
                    if (state) {
93
                        $(this).rotateAnimation(90);
94
                        state = false;
95
                        }
96
                    else {
97
                       $(this).rotateAnimation(0);
98
                       state = true;
99
                        }
100
                }}]
101
            });
102
        });
103

    
104
    </script>
105
</body>
106
</html>
107