Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_list_v1.html @ 98714f8a

History | View | Annotate | Download (6.1 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=""><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
                <div class="info top-info success">
64
                        <div class="wrap">
65

    
66
                                <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. </p>
67
                        </div>
68
                        <a href="#" class="close" title="hide message">close</a>
69
                </div>
70

    
71
        </div>
72
        <div class="row-full wrapper">
73

    
74
                
75
                <!-- main area -->
76
                <section class="main">
77
                        
78
                        <div class="vms">
79
                                <ul class="items-list small-block-grid-2 large-block-grid-4">
80
                                        <li>
81
                                                <div class="img running">
82
                                                        VM running
83
                                                        <span class="os windows">os</span>
84
                                                </div>
85
                                                <p class="visible-info">
86
                                                        <span>IPv4 83.212.97.127</span>
87
                                                        <span>my awsome machine</span>
88
                                                </p>
89
                                        </li>
90
                                        <li>
91
                                                <div class="img running">
92
                                                        VM running
93
                                                        <span class="os fedora">os</span>
94
                                                </div>
95
                                                <p class="visible-info">
96
                                                        <span>IPv4 83.212.97.127</span>
97
                                                        <span>my awsome machine</span>
98
                                                </p>
99
                                        </li>
100
                                        <li>
101
                                                <div class="img stopped">
102
                                                        VM running
103
                                                        <span class="os kubuntu">os</span>
104
                                                </div>
105
                                                <p class="visible-info">
106
                                                        <span>IPv4 83.212.97.127</span>
107
                                                        <span>my awsome machine</span>
108
                                                </p>
109
                                        </li>
110
                                        <li>
111
                                                <div class="img running">
112
                                                        VM running
113
                                                        <span class="os windows">os</span>
114
                                                </div>
115
                                                <p class="visible-info">
116
                                                        <span>IPv4 83.212.97.127</span>
117
                                                        <span>my awsome machine</span>
118
                                                </p>
119
                                        </li>
120
                                        <li>
121
                                                <div class="img running">
122
                                                        VM running
123
                                                        <span class="os kubuntu">os</span>
124
                                                </div>
125
                                                <p class="visible-info">
126
                                                        <span>IPv4 83.212.97.127</span>
127
                                                        <span>my awsome machine</span>
128
                                                </p>
129
                                        </li>
130
                                        <li>
131
                                                <div class="img running">
132
                                                        VM running
133
                                                        <span class="os">os</span>
134
                                                </div>
135
                                                <p class="visible-info">
136
                                                        <span>IPv4 83.212.97.127</span>
137
                                                        <span>my awsome machine</span>
138
                                                </p>
139
                                        </li>
140
                                        <li>
141
                                                <div class="img running">
142
                                                        VM running
143
                                                        <span class="os windows">os</span>
144
                                                </div>
145
                                                <p class="visible-info">
146
                                                        <span>IPv4 83.212.97.127</span>
147
                                                        <span>my awsome machine</span>
148
                                                </p>
149
                                        </li>
150
                                </ul>
151
                        </div>
152
                </section>
153
        </div>
154
        <div class="extras">
155
                <span data-tooltip ="has-tip  suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
156
                <span data-tooltip ="has-tip  questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
157
                <span data-tooltip ="has-tip  problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
158
        </div>
159
 
160
  <script src="javascripts/vendor/jquery.js"></script>
161
  <script src="javascripts/foundation/foundation.js"></script>
162
        
163
        <script src="javascripts/foundation/foundation.alerts.js"></script>
164
        
165
        <script src="javascripts/foundation/foundation.clearing.js"></script>
166
        
167
        <script src="javascripts/foundation/foundation.cookie.js"></script>
168
        
169
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
170
        
171
        <script src="javascripts/foundation/foundation.forms.js"></script>
172
        
173
        <script src="javascripts/foundation/foundation.joyride.js"></script>
174
        
175
        <script src="javascripts/foundation/foundation.magellan.js"></script>
176
        
177
        <script src="javascripts/foundation/foundation.orbit.js"></script>
178
        
179
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
180
        
181
        <script src="javascripts/foundation/foundation.reveal.js"></script>
182
        
183
        <script src="javascripts/foundation/foundation.section.js"></script>
184
        
185
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
186
        
187
        <script src="javascripts/foundation/foundation.topbar.js"></script>
188
        <script src="javascripts/common.js"></script>
189
        
190
  
191
  <script>
192
    $(document).foundation();
193
  </script>
194
</body>
195
</html>