Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_create_v1.html @ 2d47196d

History | View | Annotate | Download (5.4 kB)

1

    
2
<!DOCTYPE html>
3
<!--[if IE 8]>                                  <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5

    
6
<head>
7
        <meta charset="utf-8" />
8
    <meta name="viewport" content="width=device-width" />
9
    <title>Synnefo | VM list</title>
10
    <link rel="stylesheet" href="stylesheets/normalize.css" />
11
    <link rel="stylesheet" href="stylesheets/app.css" />
12

    
13
    <script src="javascripts/vendor/custom.modernizr.js"></script>
14

    
15
</head>
16
<body>
17
        <div class="dummy-navigation">
18
                <a href="" class="close">X</a>
19
                <a href="index.html">Homepage</a><br>
20
                <a href="" class="our" data-our="questions">Show/Hide questions</a><br>
21
                <a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br>
22
                <a href="" class="our" data-our="problems">Show/Hide problems</a><br>
23
        </div>
24
        <div class="row-full">
25
                <header class="header">
26
                        <!-- logo -->
27
                        <div class="logo">
28
                                <img src="http://dummyimage.com/300x100/000/fff" alt="software logo">
29
                        </div>
30
                        <div class="new-btn"><a href="" class="current"><span>+</span> NEW MACHINE </a></div>
31
                        <!-- icons-nav -->
32
                        <nav class="top-nav icons-nav">
33
                                
34
                                <ul>
35
                                        <li><a href="" data-tooltip ="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li>
36
                                        <li><a href="" data-tooltip ="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li>
37
                                        
38
                                        <li><a href="" data-tooltip ="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>
39
                                        <li><a href="" data-tooltip ="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>
40
                                </ul>
41
                                 
42
                        </nav>
43
                        
44
                        <!-- login functionality -->
45
                        <div class="login">
46
                                <a href="">test@grnet.gr</a>
47
                        </div>
48
                        <!-- extra actions -->
49
                        <div class="actions">
50
                                
51
                                <div class="lt-actions"></div>
52
                                <div class="main-actions">
53
                                        <ul>
54
                                                <li><a href="">Reboot</a></li>
55
                                                <li><a href="">Shutdown</a></li>
56
                                                <li><a href="">Console</a></li>
57
                                                <li><a href="">Action1</a></li>
58
                                                <li><a href="">Action2</a></li>
59
                                        </ul>
60
                                </div>
61
                        </div>
62
                </header>
63
                
64
        </div>
65
        <div class="row-full wrapper ">
66
                <div class="overlay create-vm">
67
                        <div class="lt-sidebar">
68
                                <ul>
69
                                        <li><a href="#">Image type<span>></span></a></li>
70
                                        <li><a href="#" class="current">System<span>></span></a></li>
71
                                        <li><a href="#">My images<span>></span></a></li>
72
                                        <li><a href="#">Shared with me<span>></span></a></li>
73
                                </ul>
74
                                <ul>
75
                                        <li><a href="#">Categories<span>></span></a></li>
76
                                        
77
                                </ul>
78
                        </div>
79
                        <div class="main">
80
                                <div class="select-os">
81
                                        <ul class="clearfix">
82
                                                <li>
83
                                                        <div class="os kubuntu">kubuntu</div>
84
                                                        <h2>kubuntu sidufsoi foisdu fso</h2>
85
                                                        <p class="details"><a href="">details</a></p>
86
                                                </li>
87
                                                <li>
88
                                                        <div class="os fedora">fedora</div>
89
                                                        <h2>fedora </h2>
90
                                                        <p class="details"><a href="">details</a></p>
91
                                                </li>
92
                                                <li>
93
                                                        <div class="os windows">windows</div>
94
                                                        <h2>Windows </h2>
95
                                                        <p class="details"><a href="">details</a></p>
96
                                                </li>
97
                                                <li>
98
                                                        <div class="os kubuntu">windows</div>
99
                                                        <h2>Windows </h2>
100
                                                        <p class="details"><a href="">details</a></p>
101
                                                </li>
102
                                                <li>
103
                                                        <div class="os kubuntu">windows</div>
104
                                                        <h2>Windows </h2>
105
                                                        <p class="details"><a href="">details</a></p>
106
                                                </li>
107
                                                <li>
108
                                                        <div class="os fedora">windows</div>
109
                                                        <h2>Windows </h2>
110
                                                        <p class="details"><a href="">details</a></p>
111
                                                </li>
112
                                        </ul>
113
                                </div>
114
                                <div class="navigation clearfix">
115
                                        <a class="lt" href="">PREVIOUS</a>
116
                                        <a class="rt" href="">NEXT</a>
117
                                </div>
118
                        </div>
119
                </div>
120
                
121
        </div>
122
        <div class="extras">
123
                <span data-tooltip ="has-tip  suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
124
                <span data-tooltip ="has-tip  questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
125
                <span data-tooltip ="has-tip  problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
126
        </div>
127
 
128
  <script src="javascripts/vendor/jquery.js"></script>
129
  <script src="javascripts/foundation/foundation.js"></script>
130
        
131
        <script src="javascripts/foundation/foundation.alerts.js"></script>
132
        
133
        <script src="javascripts/foundation/foundation.clearing.js"></script>
134
        
135
        <script src="javascripts/foundation/foundation.cookie.js"></script>
136
        
137
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
138
        
139
        <script src="javascripts/foundation/foundation.forms.js"></script>
140
        
141
        <script src="javascripts/foundation/foundation.joyride.js"></script>
142
        
143
        <script src="javascripts/foundation/foundation.magellan.js"></script>
144
        
145
        <script src="javascripts/foundation/foundation.orbit.js"></script>
146
        
147
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
148
        
149
        <script src="javascripts/foundation/foundation.reveal.js"></script>
150
        
151
        <script src="javascripts/foundation/foundation.section.js"></script>
152
        
153
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
154
        
155
        <script src="javascripts/foundation/foundation.topbar.js"></script>
156
        <script src="javascripts/common.js"></script>
157
        
158
  
159
  <script>
160
    $(document).foundation();
161
  </script>
162
</body>
163
</html>