root / snf-cyclades-app / synnefo / ui / new_ui / ui / network_list.html @ 1eb800de
History | View | Annotate | Download (13.2 kB)
| 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>Networks list</title> |
| 12 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&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 ="has-tip" title="Machines"><span class="snf-pc-outline"></span></a></li> |
| 25 |
<li><a href="network_list.html" data-tooltip ="has-tip " title="Networks"><span class="snf-network-outline"></span></a></li> |
| 26 |
<li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-volume-outline"></span></a></li> |
| 27 |
<li><a href="pithos.html" data-tooltip ="has-tip" title="Storage"><span class="snf-pithos-outline"></span></a></li> |
| 28 |
<li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-image-outline"></span></a></li> |
| 29 |
<li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot-outline"></span></a></li> |
| 30 |
<li><a href="" data-tooltip ="has-tip" title="IPs"><span class="snf-nic-outline"></span></a></li> |
| 31 |
<li><a href="" data-tooltip ="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 |
<!-- overlays start -->
|
| 50 |
<section class="overlay-area-custom"> |
| 51 |
<div id="overlay1" class="overlay-div"> |
| 52 |
<a href="" class="close"><span class="snf-close"></span></a> |
| 53 |
<p>Are you sure you want to reboot your machine?</p> |
| 54 |
<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p> |
| 55 |
</div>
|
| 56 |
<div id="overlay2" class="overlay-div"> |
| 57 |
<p>Are you sure you want to shutdown your machine?</p> |
| 58 |
<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p> |
| 59 |
</div>
|
| 60 |
<div id="network-wizard" class="overlay-div wizard"> |
| 61 |
<div class="top"> |
| 62 |
<div class="numbers"> |
| 63 |
<div class="menus row"> |
| 64 |
<a href="" class="close"><span class="snf-close"></span></a> |
| 65 |
<ul class="nums"> |
| 66 |
<li class="preselected current"> |
| 67 |
<em><span>1</span></em> |
| 68 |
<p><strong>Create new private network</strong></p> |
| 69 |
</li>
|
| 70 |
</ul>
|
| 71 |
</div>
|
| 72 |
</div>
|
| 73 |
<div class="row"> |
| 74 |
<nav class="sub-menu" data-step=1> |
| 75 |
</nav>
|
| 76 |
</div>
|
| 77 |
</div>
|
| 78 |
<div class="middle"> |
| 79 |
<div class="steps"> |
| 80 |
<div class="step step-1 preselected current"> |
| 81 |
<ul class="row network-options"> |
| 82 |
<li class="project-selection"> |
| 83 |
<form class="custom"> |
| 84 |
<select class="medium"> |
| 85 |
<option class="el5">Basic Project</option> |
| 86 |
<option>Project 2</option> |
| 87 |
<option>Project 3</option> |
| 88 |
</select>
|
| 89 |
</form>
|
| 90 |
</li>
|
| 91 |
<li>
|
| 92 |
<div class="network-name"> |
| 93 |
<h2>Network name</h2> |
| 94 |
<span class="input"><input class="el1" type="text" placeholder="My Network"></span> |
| 95 |
</div>
|
| 96 |
</li>
|
| 97 |
<li class="dhcp-option trigger-checkbox selected"><span>Assign IP addresses automatically:</span> |
| 98 |
<a href="" class="check"> |
| 99 |
<span class="snf-checkbox-checked prechecked"></span> |
| 100 |
</a>
|
| 101 |
</li>
|
| 102 |
<li class="explanatory"> |
| 103 |
If you enable DHCP on the private network, connected virtual machines will automatically be assigned an IP address based on the given subnet. You may disable this option if you want to assign IP addresses to the connected virtual machines manually. |
| 104 |
</li>
|
| 105 |
<li>
|
| 106 |
<span class="sub_title">Network subnet:</span> |
| 107 |
<ul class="subnet-options"> |
| 108 |
<li class="trigger-radiobtn selected"> |
| 109 |
<span>Auto
|
| 110 |
<a href="" class="radiobtn"> |
| 111 |
<span class="snf-radio-checked prechecked"></span> |
| 112 |
</a>
|
| 113 |
</span>
|
| 114 |
</li>
|
| 115 |
<li class="manual trigger-radiobtn"> |
| 116 |
<form>
|
| 117 |
<span>Manual
|
| 118 |
<a href="" class="radiobtn"> |
| 119 |
<span class="snf-radio-unchecked"></span> |
| 120 |
</a>
|
| 121 |
<span class="input"><input type="text" placeholder="192.168.32.0/24"></span> |
| 122 |
</span>
|
| 123 |
</form>
|
| 124 |
</li>
|
| 125 |
<li class="trigger-radiobtn"> |
| 126 |
<span>10.0.0.0/24
|
| 127 |
<a href="" class="radiobtn"> |
| 128 |
<span class="snf-radio-unchecked"></span> |
| 129 |
</a>
|
| 130 |
</span>
|
| 131 |
</li>
|
| 132 |
<li class="trigger-radiobtn"> |
| 133 |
<span>192.168.0.0/24
|
| 134 |
<a href="" class="radiobtn"> |
| 135 |
<span class="snf-radio-unchecked"></span> |
| 136 |
</a>
|
| 137 |
</span>
|
| 138 |
</li>
|
| 139 |
</ul>
|
| 140 |
</li>
|
| 141 |
</ul>
|
| 142 |
</div>
|
| 143 |
</div>
|
| 144 |
</div>
|
| 145 |
<div class="bottom"> |
| 146 |
<div class="row"> |
| 147 |
<a href="" class="nav prev"><span>CANCEL</span></a> |
| 148 |
<a href="" class="nav next" data-next="el1"><span>CREATE</span></a> |
| 149 |
</div>
|
| 150 |
</div>
|
| 151 |
</div>
|
| 152 |
<div id="destroy-network-confirm" class="reveal-modal medium"> |
| 153 |
<p class="message-forimg">Are you sure you want to destroy your network?</p> |
| 154 |
<p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p> |
| 155 |
<a class="close-reveal-modal has-tip" data-tooltip ="close ">x</a> |
| 156 |
</div>
|
| 157 |
</section>
|
| 158 |
<!-- overlays end -->
|
| 159 |
|
| 160 |
<section class="actions-bar clearfix"> |
| 161 |
<h2>Networks</h2> |
| 162 |
<div class="rt-actions"> |
| 163 |
<a href="network_details.html" class="single"></a> |
| 164 |
<a href="#grid" class="grid"><span class="snf-gridview current"></span></a> |
| 165 |
<a href="#list" class="list"><span class="snf-listview "></span></a> |
| 166 |
</div>
|
| 167 |
<div class="filter-menu"> |
| 168 |
<a class="filter" href="">Filter</a> |
| 169 |
<ul class="options"> |
| 170 |
<li><a href=""> set an option</a></li> |
| 171 |
<li><a href=""> set an option</a></li> |
| 172 |
<li><a href=""> set an option</a></li> |
| 173 |
<li><a href=""> set an option</a></li> |
| 174 |
</ul>
|
| 175 |
</div>
|
| 176 |
<div id="hd-search" class="hd-search"> |
| 177 |
<form>
|
| 178 |
<span class="hd-icon-search snf-search"></span> |
| 179 |
<input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> |
| 180 |
</form>
|
| 181 |
</div>
|
| 182 |
</section>
|
| 183 |
<section class="main row"> |
| 184 |
<div class="networks entities grid-view"> |
| 185 |
<ul class="items-list"> |
| 186 |
<li data-status="add-new" class="add-new not-selectable" data-overlay-id="network-wizard"> |
| 187 |
<div class="container"> |
| 188 |
<div class="check"></div> |
| 189 |
<div class="img-wrap"> |
| 190 |
<span class="snf-network-create-full snf-font"></span> |
| 191 |
</div>
|
| 192 |
<h4>New Network</h4> |
| 193 |
</div>
|
| 194 |
</li>
|
| 195 |
<li data-status="active" class="running"> |
| 196 |
<div class="more"> |
| 197 |
<div class="clearfix"> |
| 198 |
<div class="col lt"> |
| 199 |
<ul>
|
| 200 |
<li><a href="">Connect Machine</a></li> |
| 201 |
<li><a href="" data-reveal-id="destroy-network-confirm">Destroy</a></li> |
| 202 |
</ul>
|
| 203 |
</div>
|
| 204 |
<div class="col rt"> |
| 205 |
<ul>
|
| 206 |
<li> </li> |
| 207 |
<li><a href="network_details.html">Details</a></li> |
| 208 |
</ul>
|
| 209 |
</div>
|
| 210 |
</div>
|
| 211 |
<div class="name">Network Name</div> |
| 212 |
</div>
|
| 213 |
<div class="container"> |
| 214 |
<a href="" class="check"> |
| 215 |
<span class="snf-checkbox-unchecked"></span> |
| 216 |
</a>
|
| 217 |
<div class="img-wrap"> |
| 218 |
<span class="snf-network-full snf-font"></span> |
| 219 |
</div>
|
| 220 |
<h4>Network Name</h4> |
| 221 |
<div class="tags"> |
| 222 |
</div>
|
| 223 |
<div class= "status"> |
| 224 |
<span class="state"></span> |
| 225 |
<span class="logs"></span> |
| 226 |
</div>
|
| 227 |
</div>
|
| 228 |
</li>
|
| 229 |
<li data-status="active" class="running"> |
| 230 |
<div class="more"> |
| 231 |
<div class="clearfix"> |
| 232 |
<div class="col lt"> |
| 233 |
<ul>
|
| 234 |
<li><a href="">Connect Machine</a></li> |
| 235 |
<li><a href="" data-reveal-id="destroy-network-confirm">Destroy</a></li> |
| 236 |
</ul>
|
| 237 |
</div>
|
| 238 |
<div class="col rt"> |
| 239 |
<ul>
|
| 240 |
<li> </li> |
| 241 |
<li><a href="network_details.html">Details</a></li> |
| 242 |
</ul>
|
| 243 |
</div>
|
| 244 |
</div>
|
| 245 |
<div class="name">Network Name</div> |
| 246 |
</div>
|
| 247 |
<div class="container"> |
| 248 |
<a href="" class="check"> |
| 249 |
<span class="snf-checkbox-unchecked"></span> |
| 250 |
</a>
|
| 251 |
<div class="img-wrap"> |
| 252 |
<span class="snf-network-full snf-font"></span> |
| 253 |
</div>
|
| 254 |
<h4>Network Name</h4> |
| 255 |
<div class="tags"> |
| 256 |
</div>
|
| 257 |
<div class= "status"> |
| 258 |
<span class="state"></span> |
| 259 |
<span class="logs"></span> |
| 260 |
</div>
|
| 261 |
</div>
|
| 262 |
</li>
|
| 263 |
<li data-status="active" class="running"> |
| 264 |
<div class="more"> |
| 265 |
<div class="clearfix"> |
| 266 |
<div class="col lt"> |
| 267 |
<ul>
|
| 268 |
<li><a href="">Connect Machine</a></li> |
| 269 |
<li><a href="" data-reveal-id="destroy-network-confirm">Destroy</a></li> |
| 270 |
</ul>
|
| 271 |
</div>
|
| 272 |
<div class="col rt"> |
| 273 |
<ul>
|
| 274 |
<li> </li> |
| 275 |
<li><a href="network_details.html">Details</a></li> |
| 276 |
</ul>
|
| 277 |
</div>
|
| 278 |
</div>
|
| 279 |
<div class="name">Network Name</div> |
| 280 |
</div>
|
| 281 |
<div class="container"> |
| 282 |
<a href="" class="check"> |
| 283 |
<span class="snf-checkbox-unchecked"></span> |
| 284 |
</a>
|
| 285 |
<div class="img-wrap"> |
| 286 |
<span class="snf-network-full snf-font"></span> |
| 287 |
</div>
|
| 288 |
<h4>Network Name</h4> |
| 289 |
<div class="tags"> |
| 290 |
</div>
|
| 291 |
<div class= "status"> |
| 292 |
<span class="state"></span> |
| 293 |
<span class="logs"></span> |
| 294 |
</div>
|
| 295 |
</div>
|
| 296 |
</li>
|
| 297 |
</ul>
|
| 298 |
<div class="lt-bar"> |
| 299 |
<ul>
|
| 300 |
<li class="select trigger-checkbox"> |
| 301 |
<a href="" class="check"> |
| 302 |
<span class="snf-checkbox-unchecked checkbox"></span> |
| 303 |
</a>
|
| 304 |
<em>Un</em>Select all |
| 305 |
</li>
|
| 306 |
<li class="running"><a href="#" title="">Connect VM</a></li> |
| 307 |
<li class="permanent"><a href="#" class="active">Destroy</a></li> |
| 308 |
<li class="both"><a href="#" >Option i</a></li> |
| 309 |
<!-- in case we want an action always activated
|
| 310 |
<li class="pernament"><a href="" class="active">Action</a></li> -->
|
| 311 |
</ul>
|
| 312 |
</div>
|
| 313 |
<div class="welcome">It seems you have not yet created a VM! Go ahead!</div> |
| 314 |
</div>
|
| 315 |
</section>
|
| 316 |
</div>
|
| 317 |
|
| 318 |
|
| 319 |
<script src="javascripts/vendor/jquery.js"></script> |
| 320 |
<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script> |
| 321 |
<script src="javascripts/underscore-min.js"></script> |
| 322 |
<script src="javascripts/foundation/foundation.js"></script> |
| 323 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
| 324 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
| 325 |
<script src="javascripts/foundation/foundation.cookie.js"></script> |
| 326 |
<script src="javascripts/foundation/foundation.dropdown.js"></script> |
| 327 |
<script src="javascripts/foundation/foundation.forms.js"></script> |
| 328 |
<script src="javascripts/foundation/foundation.joyride.js"></script> |
| 329 |
<script src="javascripts/foundation/foundation.magellan.js"></script> |
| 330 |
<script src="javascripts/foundation/foundation.orbit.js"></script> |
| 331 |
<script src="javascripts/foundation/foundation.placeholder.js"></script> |
| 332 |
<script src="javascripts/foundation/foundation.reveal.js"></script> |
| 333 |
<script src="javascripts/foundation/foundation.section.js"></script> |
| 334 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
| 335 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
| 336 |
<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script> |
| 337 |
<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script> |
| 338 |
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script> |
| 339 |
<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script> |
| 340 |
<!-- dropzone.js used for drag and drop files to upload them -->
|
| 341 |
<script type="text/javascript" src="javascripts/dropzone.js"></script> |
| 342 |
<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script> |
| 343 |
<!-- fabrastic.js used for the color picker -->
|
| 344 |
<script type="text/javascript" src="javascripts/farbtastic.js"></script> |
| 345 |
<script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script> |
| 346 |
<script src="javascripts/common.js"></script> |
| 347 |
<script type="text/javascript" src="javascripts/wizard.js"></script> |
| 348 |
<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script> |
| 349 |
<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script> |
| 350 |
<script>
|
| 351 |
$(document).foundation();
|
| 352 |
</script>
|
| 353 |
</body>
|
| 354 |
</html>
|