Statistics
| Branch: | Tag: | Revision:

root / ui / src / synnefo / templates / home.pt @ 01045535

History | View | Annotate | Download (2 kB)

1
<!DOCTYPE html>
2
<html xmlns:tal="http://xml.zope.org/namespaces/tal">
3

    
4
<head>
5
	<title>$project</title>
6
	<!-- include the Tools -->
7
	<script src="static/jquery.tools.min.js"></script>
8
	<link rel="stylesheet" type="text/css" href="static/main.css"/>	
9
</head>
10

    
11
<body>
12
    <div id="wrapper">
13
        <div id='nefo'><a href="/" class="logo"><img src="static/nefo.png"/></a></div>
14
        <div id="header">
15
            <div id="about">Greek Research and Technology Network - Cloud management web interface</div>
16
            <a href="/" class="logo">
17
                <h1>$project</h1>
18
            </a>
19
        </div>
20
        <!-- tabs -->
21
        <ul class="css-tabs">
22
	        <li><a href="instances" title="manage your virtual machines">instances</a></li>
23
	        <li><a href="storage" title="manage your storage volumes">disks</a></li>
24
	        <li><a href="images" title="manage boot images">images</a></li>
25
	        <li><a href="network" title="configure networking">network</a></li>
26
        </ul>
27
        <div class="css-panes">
28
	        <div class="pane" style="display:block"></div>
29
	        <div class="pane"></div>
30
	        <div class="pane"></div>
31
	        <div class="pane"></div>
32
        </div>
33
    </div>
34
    <!-- activate tabs with JavaScript -->
35
    <script>
36
		$(function() {
37
			$('ul.css-tabs li').hover(function(){
38
				$(this).find('a').animate({top:'-3px'},{queue:false,duration:150});
39
			}, function(){
40
				$(this).find('a').animate({top:'0px'},{queue:false,duration:150});
41
			});
42
		});
43
        $(function() {
44
	        $("ul.css-tabs").tabs("div.css-panes div.pane", {	
45
		        effect: 'ajax',
46
		        onBeforeClick: function(event, i) {
47
			        // get the pane to be opened
48
			        var pane = this.getPanes().eq(i);
49

    
50
			        // load it with a page specified in the tab's href attribute
51
			        pane.load(this.getTabs().eq(i).attr("href"));
52
		        }
53
	        });
54
        });
55
        $("ul.css-tabs a").tooltip({effect: 'fade', predelay: 1000, delay: 2, position: 'top center', opacity: 0.8});
56
    </script>
57
</body>
58
</html>
59