Revision d0fe8c12 snf-cyclades-app/synnefo/ui/new_ui/ui/index.html

b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
1

  
2 1
<!DOCTYPE html>
2
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
3 3
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
4 4
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5 5

  
6 6
<head>
7 7
	<meta charset="utf-8" />
8
  <meta name="viewport" content="width=device-width" />
9
  <title>New ui mocks</title>
10
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11
  <link rel="stylesheet" href="stylesheets/normalize.css" />
12
  
13
  <link rel="stylesheet" href="stylesheets/app.css" />
14
  
15

  
16
  <script src="javascripts/vendor/custom.modernizr.js"></script>
8
    <meta name="viewport" content="width=device-width" />
9
    <title>VMs list</title>
10
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/farbtastic.css" />
14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
16
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
17 17

  
18 18
</head>
19 19
<body>
20
 	<div class="row">
21
 			<h2>Misc</h2>
22
 			<ul>
23
 				<li><a href="icon_guide.html">Info about Icon-Font</a></li>
24
 			</ul>
25
 		
26
 			<h2>Kpal original designs</h2>
27
 			<ul>
28
				<li><a href="vm_list.html">VMs list page</a></li>
29
				<li><a href="vm_list_no_vms.html">VMs list with no machine</a></li>
30
				<li><a href="vm_details.html">VM Details</a></li>
31
				<li><a href="network_list.html">Networks list page</a></li>
32
				<li><a href="network_details.html">Network Details</a></li>
33
				<li><a href="volumes_list.html">Volumes list</a></li>
34
				<li><a href="images_list.html">Images list</a></li>
35
				<li><a href="snapshots_list.html">Snapshots list</a></li>
36
				<li><a href="pithos.html">Pithos</a></li>
37
			</ul>
20
	<script type="text/x-handlebars">
21
		<header class="header">
22
			<nav>
23
			{{collection Okeanos.NavigationView}}
24
				
25
			</nav>
26
			{{login-menu email = model.email}}
27
			<div class="logo">
28
				<a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
29
			</div>
30
		</header>
31
		<div class="body-wrapper">
32
			<section class="actions-bar clearfix">
33
				<h2>{{pageTitle}}</h2>
34
				<div class="rt-actions">
35
					<a href="vm_details.html" class="single"></a>
36
					<a href="#grid" class="grid"><span class="snf-gridview current"></span></a>
37
					<a href="#list" class="list"><span class="snf-listview "></span></a>
38
				</div>
39
				<div class="filter-menu">
40
					<div><a class="filter" href="">Filter</a></div>
41
					<ul class="options">
42
						<li><a href="">option 1</a></li>
43
						<li><a href="">option 2</a></li>
44
						<li><a href="">option 3</a></li>
45
						<li><a href="">option 4</a></li>
46
					</ul>
47
				</div>
48
				<div id="hd-search" class="hd-search">
49
				    <form>
50
						<span class="hd-icon-search snf-search"></span>
51
				        <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
52
				    </form>
53
				</div>
54
			</section>
55
			<section class="main row">
56
				{{outlet}}
57
			</section>
38 58
		</div>
59
	</script>
60
	<script type="text/x-handlebars" data-template-name="nets">
61
		<h2>nets</h2>
62
	</script>
63
	<script type="text/x-handlebars" data-template-name="elems">
64
		<h2>{{other}}</h2>
65
		<div {{bind-attr class=":entities :grid-view"}}>
66
		<ul class="items-list">
67
			<li>Add New...</li>
68
			{{#each}}
69
				{{view Okeanos.ElemView}}
70
			{{/each}}
71
		</ul>
72
		</div>
73
	</script>
39 74

  
40
  <script>
41
  document.write('<script src=' +
42
  ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') +
43
  '.js><\/script>')
44
  </script>
45
  
46
  <script src="javascripts/foundation/foundation.js"></script>
75
	<script type="text/x-handlebars" data-template-name="elem">
76
		<ul class="side-actions">
77
			<li>
78
				<a href="vm_details.html" data-tooltip title="view details" class="details has-tip">i</a>
79
			</li>
80
			<li>
81
				<a href="#" title="connect to machine" data-tooltip data-reveal-id="vm-connect" class="has-tip">
82
					<span class="snf-thunder-full"></span>
83
				</a>
84
			</li>
85
			<li class="more-actions">
86
				<a href="#" title="">...</a>
87
				<ul class="many">
88
					{{#each setAvailableActions}}
89
						<li>
90
							{{actionBtns-simple actionLabel=this.description elementID=controller.id action= this.description param=controller.id}}
91
						</li>
92
					{{/each}}
93
				</ul>
94
			</li>
95
			<li class="bottom">
96
				<a href="" title=""><span ></span></a>
97
				<ul class="options">
98
					<li class="selected"><a href="">My awesome project</a></li>
99
					<li><a href="">Project 1</a></li>
100
					<li><a href="">Project 2</a></li>
101
					<li><a href="">Project 3</a></li>
102
					<li><a href="">Project 4</a></li>
103
				</ul>
104
				<ul>
105
					<li>My awesome project</li>
106
					<li><a href="" class="reassign">Reassign<span class="arrow-right"></span></a></li>
107
				</ul>
108
			</li>
109
		</ul>
110
		<div class="container">
111
			<a href="" class="check">
112
				<span class="snf-checkbox-unchecked"></span>
113
			</a>
114
			<div class="img-wrap">
115
				<span {{bind-attr class="parentController.icon :snf-font"}}></span>
116
				{{#if parentController.hasOS}}
117
					<span {{bind-attr class="os :os"}}></span>
118
				{{/if}}
119
			</div>
120
			<h4>{{icon}}</h4>
121
			<div class="actions">
122
				<a href="" data-reveal-id="vm-connect" data-tooltip title="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
123
				<a href="vm_details.html" data-tooltip title="view vm details" class="snf-info-outline has-tip">i</a>
124
			</div>
125
			<div class="tags">
126
			</div>
127
			<div class= "status">
128
				<span class="state">{{parentController.icon}}</span>
129
				<span class="state">{{status}}</span>
130
				<span class="logs">{{name}}</span>
131
			</div>
132
			<div class="info"><a {{bind-attr href=hostname}} title="">{{hostname}}</a></div>
133
		</div>
134
	</script>
47 135
	
136

  
137
	<script type="text/x-handlebars" data-template-name="volumes">
138
		<h2>volumes</h2>
139
	</script>
140
	<script type="text/x-handlebars" data-template-name="pithos">
141
		<h2>pithos</h2>
142
	</script>
143
	<script type="text/x-handlebars" data-template-name="snapshots">
144
		<h2>shapshots</h2>
145
	</script>
146
	<script type="text/x-handlebars" data-template-name="images">
147
		<h2>images</h2>
148
	</script>
149
	<script type="text/x-handlebars" data-template-name="ips">
150
		<h2>ips</h2>
151
	</script>
152
	<script type="text/x-handlebars" data-template-name="sshkeys">
153
		<h2>sshkeys</h2>
154
	</script>
155
		
156

  
157
	<!-- COMPONENTS -->			
158
	<script type="text/x-handlebars" id="components/actionBtns-simple">
159
		{{actionLabel}} - {{elementID}}
160
	</script>
161
	
162
	<script type="text/x-handlebars" id="components/login-menu">
163
		<div class="wrap">
164
			<a href="">{{email}}</a>
165
			<ul>
166
				<li><a href="">dashboard</a></li>
167
				<li><a href="">sign out</a></li>
168
			</ul>
169
		</div>
170
	</script>
171

  
172

  
173

  
174

  
175

  
176
	<script src="javascripts/custom.modernizr.js"></script>
177
	<script src="javascripts/jquery.js"></script>
178
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
179
	<script src="javascripts/handlebars-1.1.2.js"></script>
180
	<script src="javascripts/ember-1.3.0.js"></script>
181
  	<script src="javascripts/ember-data.js"></script>
182
	<script src="javascripts/underscore-min.js"></script>
183
  	<script src="javascripts/okeanos.js"></script>
184
  	<!-- templates must be loaded before we use it  -->
185
  	<script src="javascripts/templates.js"></script>
186
  	<script src="javascripts/okeanos-ember.js"></script>
187
	<script src="javascripts/foundation/foundation.js"></script>
48 188
	<script src="javascripts/foundation/foundation.alerts.js"></script>
49 189
	
50 190
	<script src="javascripts/foundation/foundation.clearing.js"></script>
......
68 208
	<script src="javascripts/foundation/foundation.section.js"></script>
69 209
	
70 210
	<script src="javascripts/foundation/foundation.tooltips.js"></script>
71
	
72 211
	<script src="javascripts/foundation/foundation.topbar.js"></script>
73
	
74
  
212
	<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
213
	<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
214
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
215
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
216
	<!-- dropzone.js used for drag and drop files to upload them --> 
217
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
218
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
219
	<!-- fabrastic.js used for the color picker --> 
220
	<script type="text/javascript" src="javascripts/farbtastic.js"></script>
221

  
75 222
  <script>
76 223
    $(document).foundation();
224
    $(document).ready(function() {
225

  
226
    })
77 227
  </script>
78 228
</body>
79 229
</html>

Also available in: Unified diff