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

/dev/null
1 

  		





  2
  
  
    

  		





  3
  
  
    
<!DOCTYPE html>


  		





  4
  
  
    
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->


  		





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


  		





  6
  
  
    
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->


  		





  7
  
  
    

  		





  8
  
  
    
<head>


  		





  9
  
  
    
	<meta charset="utf-8" />


  		





  10
  
  
    
    <meta name="viewport" content="width=device-width" />


  		





  11
  
  
    
    <title>Images list</title>


  		





  12
  
  
    
    <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'>


  		





  13
  
  
    
    <link rel="stylesheet" href="stylesheets/normalize.css" />


  		





  14
  
  
    
    <link rel="stylesheet" href="stylesheets/app.css" />


  		





  15
  
  
    
    <link rel="stylesheet" href="stylesheets/font_custom.css" />


  		





  16
  
  
    
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />


  		





  17
  
  
    
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />


  		





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


  		





  19
  
  
    
</head>


  		





  20
  
  
    
<body>


  		





  21
  
  
    
		<header class="header">


  		





  22
  
  
    
		<nav>


  		





  23
  
  
    
			<ul class="icons-nav">


  		





  24
  
  
    
				<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-pc-outline"></span></a></li>


  		





  25
  
  
    
				<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network-outline"></span></a></li>


  		





  26
  
  
    
				<li><a href="volumes_list.html" data-tooltip class="has-tip" title="Volumes"><span class="snf-volume-outline"></span></a></li>


  		





  27
  
  
    
				<li><a href="pithos.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-pithos-outline"></span></a></li>


  		





  28
  
  
    
				<li><a href="images_list.html" data-tooltip class="has-tip current" title="Images" ><span class="snf-image-outline"></span></a></li>


  		





  29
  
  
    
				<li><a href="snapshots_list.html" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot-outline"></span></a></li>


  		





  30
  
  
    
				<li><a href="" data-tooltip class="has-tip" title="IPs"><span class="snf-nic-outline"></span></a></li>


  		





  31
  
  
    
                <li><a href="" data-tooltip class="has-tip" title="SSH keys"><span class="snf-key-outline"></span></a></li>


  		





  32
  
  
    
			</ul>


  		





  33
  
  
    
		</nav>


  		





  34
  
  
    
		<div class="login">


  		





  35
  
  
    
			<div class="wrap">


  		





  36
  
  
    
				<a href="">user1@synnefo.org</a>


  		





  37
  
  
    
				<ul>


  		





  38
  
  
    
					<li><a href="">dashboard</a></li>


  		





  39
  
  
    
					<li><a href="">sign out</a></li>


  		





  40
  
  
    
				</ul>


  		





  41
  
  
    
			</div>


  		





  42
  
  
    
		</div>


  		





  43
  
  
    
		<div class="logo">


  		





  44
  
  
    
			<a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>


  		





  45
  
  
    
		</div>


  		





  46
  
  
    
	</header>


  		





  47
  
  
    
	


  		





  48
  
  
    
	<div class="body-wrapper">


  		





  49
  
  
    

  		





  50
  
  
    
	<!-- overlays start -->


  		





  51
  
  
    
	<div class="overlay-area-custom">


  		





  52
  
  
    
		


  		





  53
  
  
    
		<div id="overlay1" class="overlay-div">


  		





  54
  
  
    
			<a href="" class="close"><span class="snf-close"></span></a>


  		





  55
  
  
    
			<p>Are you sure you want to reboot your machine?</p>


  		





  56
  
  
    
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>


  		





  57
  
  
    
		</div>


  		





  58
  
  
    
		<div id="overlay2" class="overlay-div">


  		





  59
  
  
    
			<p>Are you sure you want to shutdown your machine?</p>


  		





  60
  
  
    
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>


  		





  61
  
  
    
		</div>


  		





  62
  
  
    
			<div id="image-wizard" class="overlay-div wizard">


  		





  63
  
  
    
				<div class="top">


  		





  64
  
  
    
					<div class="numbers">


  		





  65
  
  
    
						<div class="menus row">


  		





  66
  
  
    
							<a href="" class="close"><span class="snf-close"></span></a>


  		





  67
  
  
    
							<ul class="nums">


  		





  68
  
  
    
								<li class="preselected current">


  		





  69
  
  
    
									<em><span>1</span></em>


  		





  70
  
  
    
									<p><strong>To be added...</strong></p>


  		





  71
  
  
    
								</li>


  		





  72
  
  
    
							</ul>


  		





  73
  
  
    
						</div>


  		





  74
  
  
    
					</div>


  		





  75
  
  
    
					<div class="row">


  		





  76
  
  
    
						<nav class="sub-menu" data-step=1>


  		





  77
  
  
    
						</nav>


  		





  78
  
  
    
					</div>


  		





  79
  
  
    
				</div>


  		





  80
  
  
    
				<div class="middle">


  		





  81
  
  
    
				<div class="steps">


  		





  82
  
  
    
					<div class="step step-1 preselected current">


  		





  83
  
  
    
						</div>


  		





  84
  
  
    
					</div>


  		





  85
  
  
    
				</div>


  		





  86
  
  
    
<!-- new tba start -->


  		





  87
  
  
    
				<div class="bottom">


  		





  88
  
  
    
					<div class="row">


  		





  89
  
  
    
						<a href="" class="nav prev"><span>CANCEL</span></a>


  		





  90
  
  
    
						<a href="" class="nav next" data-next="el1"><span>CREATE</span></a>


  		





  91
  
  
    
						


  		





  92
  
  
    
					</div>


  		





  93
  
  
    
				</div>


  		





  94
  
  
    
<!-- new tba end -->


  		





  95
  
  
    

  		





  96
  
  
    
			</div>


  		





  97
  
  
    

  		





  98
  
  
    
	</div>


  		





  99
  
  
    
	<!-- overlays end -->


  		





  100
  
  
    
	


  		





  101
  
  
    
		<section class="actions-bar clearfix">


  		





  102
  
  
    
			<h2>Images</h2>


  		





  103
  
  
    
			<div class="rt-actions">


  		





  104
  
  
    
				<a href="" class="single"></a>


  		





  105
  
  
    
				<a href="#grid" class="grid"><span class="snf-gridview current"></span></a>


  		





  106
  
  
    
				<a href="#list" class="list"><span class="snf-listview "></span></a>


  		





  107
  
  
    
			</div>


  		





  108
  
  
    
			<div class="filter-menu">


  		





  109
  
  
    
				<a class="filter" href="">Filter</a>


  		





  110
  
  
    
				<ul class="options">


  		





  111
  
  
    
					<li><a href=""> set an option</a></li>


  		





  112
  
  
    
					<li><a href=""> set an option</a></li>


  		





  113
  
  
    
					<li><a href=""> set an option</a></li>


  		





  114
  
  
    
					<li><a href=""> set an option</a></li>


  		





  115
  
  
    
				</ul>


  		





  116
  
  
    
			</div>


  		





  117
  
  
    
			<div id="hd-search" class="hd-search">


  		





  118
  
  
    
			    <form>


  		





  119
  
  
    
					<span class="hd-icon-search snf-search"></span>


  		





  120
  
  
    
			        <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">


  		





  121
  
  
    
			    </form>


  		





  122
  
  
    
			</div>


  		





  123
  
  
    
		</section>


  		





  124
  
  
    
		<section class="main row">


  		





  125
  
  
    
			<div class="images entities grid-view">


  		





  126
  
  
    
				<ul class="items-list">


  		





  127
  
  
    
					<li data-status="add-new" class="add-new not-selectable" data-overlay-id="image-wizard">


  		





  128
  
  
    
						<div class="container">


  		





  129
  
  
    
							<a href="" class="check">


  		





  130
  
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  131
  
  
    
							</a>


  		





  132
  
  
    
							<div class="img-wrap">


  		





  133
  
  
    
									<span class="snf-image-full snf-font"></span>


  		





  134
  
  
    
									<span class="os symbol">+</span>


  		





  135
  
  
    
							</div>


  		





  136
  
  
    
							<h4>New Image</h4>


  		





  137
  
  
    
						</div>


  		





  138
  
  
    
						<div class="tags">


  		





  139
  
  
    
						</div>


  		





  140
  
  
    
						<div class= "status">


  		





  141
  
  
    
						</div>


  		





  142
  
  
    
					</li>


  		





  143
  
  
    
					<li data-status="available" class="running">


  		





  144
  
  
    
						<div class="more">


  		





  145
  
  
    
							<div class="clearfix">


  		





  146
  
  
    
								<div class="col lt">


  		





  147
  
  
    
									<ul>


  		





  148
  
  
    
										<li><a href="">Option i</a></li>


  		





  149
  
  
    
										<li><a href="">Option j</a></li>


  		





  150
  
  
    
										<li><a href="">Option k</a></li>


  		





  151
  
  
    
										<li><a href="">Option l</a></li>


  		





  152
  
  
    
										<li><a href="">Option m</a></li>


  		





  153
  
  
    
									</ul>


  		





  154
  
  
    
								</div>


  		





  155
  
  
    
								<div class="col rt">


  		





  156
  
  
    
									<ul>


  		





  157
  
  
    
										<li><a href="">Option i</a></li>


  		





  158
  
  
    
										<li><a href="">Option j</a></li>


  		





  159
  
  
    
									</ul>


  		





  160
  
  
    
								</div>


  		





  161
  
  
    
							</div>


  		





  162
  
  
    
							<div class="name">Image Name</div>


  		





  163
  
  
    
						</div>


  		





  164
  
  
    
						<div class="container">


  		





  165
  
  
    
							<a href="" class="check">


  		





  166
  
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  167
  
  
    
							</a>


  		





  168
  
  
    
							<div class="img-wrap">


  		





  169
  
  
    
								<span class="snf-font snf-image-full"></span>


  		





  170
  
  
    
							</div>


  		





  171
  
  
    
							<h4>Image Name</h4>


  		





  172
  
  
    
							<div class="tags">


  		





  173
  
  
    
							</div>


  		





  174
  
  
    
							<div class= "status">


  		





  175
  
  
    
								<span class="state"></span>


  		





  176
  
  
    
								<span class="logs"></span>


  		





  177
  
  
    
							</div>


  		





  178
  
  
    
						</div>


  		





  179
  
  
    
					</li>


  		





  180
  
  
    
					<li data-status="active" class="running">


  		





  181
  
  
    
						<div class="more">


  		





  182
  
  
    
							<div class="clearfix">


  		





  183
  
  
    
								<div class="col lt">


  		





  184
  
  
    
									<ul>


  		





  185
  
  
    
										<li><a href="">Option i</a></li>


  		





  186
  
  
    
										<li><a href="">Option j</a></li>


  		





  187
  
  
    
										<li><a href="">Option k</a></li>


  		





  188
  
  
    
										<li><a href="">Option l</a></li>


  		





  189
  
  
    
										<li><a href="">Option m</a></li>


  		





  190
  
  
    
									</ul>


  		





  191
  
  
    
								</div>


  		





  192
  
  
    
								<div class="col rt">


  		





  193
  
  
    
									<ul>


  		





  194
  
  
    
										<li><a href="">Option i</a></li>


  		





  195
  
  
    
										<li><a href="">Option j</a></li>


  		





  196
  
  
    
									</ul>


  		





  197
  
  
    
								</div>


  		





  198
  
  
    
							</div>


  		





  199
  
  
    
							<div class="name">Image Name</div>


  		





  200
  
  
    
						</div>


  		





  201
  
  
    
						<div class="container">


  		





  202
  
  
    
							<a href="" class="check">


  		





  203
  
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  204
  
  
    
							</a>


  		





  205
  
  
    
							<div class="img-wrap">


  		





  206
  
  
    
								<span class="snf-font snf-image-full"></span>						


  		





  207
  
  
    
							</div>


  		





  208
  
  
    
							<h4>Image Name</h4>


  		





  209
  
  
    
							<div class="tags">


  		





  210
  
  
    
							</div>


  		





  211
  
  
    
							<div class= "status">


  		





  212
  
  
    
								<span class="state"></span>


  		





  213
  
  
    
								<span class="logs"></span>


  		





  214
  
  
    
							</div>


  		





  215
  
  
    
						</div>


  		





  216
  
  
    
					</li>


  		





  217
  
  
    
				</ul>


  		





  218
  
  
    
				<div class="lt-bar">


  		





  219
  
  
    
					<ul>


  		





  220
  
  
    
						<li class="select trigger-checkbox">


  		





  221
  
  
    
							<a href="" class="check">


  		





  222
  
  
    
								<span class="snf-checkbox-unchecked checkbox"></span>


  		





  223
  
  
    
							</a>


  		





  224
  
  
    
							<em>Un</em>Select all


  		





  225
  
  
    
						</li>


  		





  226
  
  
    
						<li class="running"><a href="#" title="">Destroy</a></li>


  		





  227
  
  
    
						<!-- in case we want an action always activated


  		





  228
  
  
    
						<li class="pernament"><a href="" class="active">Action</a></li> -->


  		





  229
  
  
    
					</ul>


  		





  230
  
  
    
				</div>


  		





  231
  
  
    
				<div class="welcome">It seems you have not yet created a VM! Go ahead!</div>


  		





  232
  
  
    
			</div>


  		





  233
  
  
    
		</section>


  		





  234
  
  
    
	</div>


  		





  235
  
  
    
	


  		





  236
  
  
    

  		





  237
  
  
    
	<script src="javascripts/vendor/jquery.js"></script>


  		





  238
  
  
    
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>


  		





  239
  
  
    
	<script src="javascripts/underscore-min.js"></script>


  		





  240
  
  
    
	<script src="javascripts/foundation/foundation.js"></script>


  		





  241
  
  
    
	<script src="javascripts/foundation/foundation.alerts.js"></script>


  		





  242
  
  
    
	<script src="javascripts/foundation/foundation.clearing.js"></script>


  		





  243
  
  
    
	<script src="javascripts/foundation/foundation.cookie.js"></script>


  		





  244
  
  
    
	<script src="javascripts/foundation/foundation.dropdown.js"></script>


  		





  245
  
  
    
	<script src="javascripts/foundation/foundation.forms.js"></script>


  		





  246
  
  
    
	<script src="javascripts/foundation/foundation.joyride.js"></script>


  		





  247
  
  
    
	<script src="javascripts/foundation/foundation.magellan.js"></script>


  		





  248
  
  
    
	<script src="javascripts/foundation/foundation.orbit.js"></script>


  		





  249
  
  
    
	<script src="javascripts/foundation/foundation.placeholder.js"></script>


  		





  250
  
  
    
	<script src="javascripts/foundation/foundation.reveal.js"></script>


  		





  251
  
  
    
	<script src="javascripts/foundation/foundation.section.js"></script>


  		





  252
  
  
    
	<script src="javascripts/foundation/foundation.tooltips.js"></script>


  		





  253
  
  
    
	<script src="javascripts/foundation/foundation.topbar.js"></script>


  		





  254
  
  
    
	<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>


  		





  255
  
  
    
	<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>


  		





  256
  
  
    
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>


  		





  257
  
  
    
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>


  		





  258
  
  
    
	<!-- dropzone.js used for drag and drop files to upload them --> 


  		





  259
  
  
    
	<script type="text/javascript" src="javascripts/dropzone.js"></script>


  		





  260
  
  
    
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>


  		





  261
  
  
    
	<!-- fabrastic.js used for the color picker -->


  		





  262
  
  
    
	<script type="text/javascript" src="javascripts/farbtastic.js"></script>


  		





  263
  
  
    
	<script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>


  		





  264
  
  
    
	<script src="javascripts/common.js"></script>


  		





  265
  
  
    
	


  		





  266
  
  
    
	<script type="text/javascript" src="javascripts/wizard.js"></script>


  		





  267
  
  
    
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>


  		





  268
  
  
    
	<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script>


  		





  269
  
  
    
  <script>


  		





  270
  
  
    
    $(document).foundation();


  		





  271
  
  
    
  </script>


  		





  272
  
  
    
</body>


  		





  273
  
  
    
</html>


  		












Also available in:
  Unified diff