root / snf-cyclades-app / synnefo / ui / new_ui / ui / network_list.html @ fed367f0
History | View | Annotate | Download (9 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>Synnefo | Network 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"></span></a></li> |
| 25 |
<li><a href="network_list.html" data-tooltip ="has-tip " title="Networks"><span class="snf-network_full"></span></a></li> |
| 26 |
<li><a href="" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li> |
| 27 |
<li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li> |
| 28 |
</ul>
|
| 29 |
</nav>
|
| 30 |
<div class="login"> |
| 31 |
<a href=""><span class="snf-lock_open"></span></a> |
| 32 |
</div>
|
| 33 |
<div class="logo"> |
| 34 |
<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a> |
| 35 |
</div>
|
| 36 |
</header>
|
| 37 |
|
| 38 |
<div class="overlay-wrapper"> |
| 39 |
|
| 40 |
<!-- overlays start -->
|
| 41 |
<div class="overlay-area"> |
| 42 |
<a href="" class="close"><span class="snf-close"></span></a> |
| 43 |
<div id="overlay1" class="overlay-div"> |
| 44 |
<p>Are you sure you want to reboot your machine?</p> |
| 45 |
<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p> |
| 46 |
</div>
|
| 47 |
<div id="overlay2" class="overlay-div"> |
| 48 |
<p>Are you sure you want to shutdown your machine?</p> |
| 49 |
<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p> |
| 50 |
</div>
|
| 51 |
<div id="network-wizard" class="overlay-div wizard"> |
| 52 |
<div class="top"> |
| 53 |
<div class="numbers"> |
| 54 |
<div class="row"> |
| 55 |
<a href="" class="close"><span class="snf-close"></span></a> |
| 56 |
<ul class="nums"> |
| 57 |
<li class="current"> |
| 58 |
<em><span href="">1</span></em> |
| 59 |
<p><strong>Create new private network</strong></p> |
| 60 |
</li>
|
| 61 |
</ul>
|
| 62 |
</div>
|
| 63 |
</div>
|
| 64 |
<div class="row"> |
| 65 |
<nav class="sub-menu" data-step=1> |
| 66 |
<ul>
|
| 67 |
<li><a href="" class="current">System</a></li> |
| 68 |
<li><a href="">My images</a></li> |
| 69 |
<li><a href="">Shared with me</a></li> |
| 70 |
<li><a href="">Public</a></li> |
| 71 |
</ul>
|
| 72 |
</nav>
|
| 73 |
</div>
|
| 74 |
</div>
|
| 75 |
<div class="middle"> |
| 76 |
<div class="wizard-content"> |
| 77 |
|
| 78 |
<div class="row main"> |
| 79 |
<ul class="network_options clearfix"> |
| 80 |
<li>
|
| 81 |
<div class="network-name"> |
| 82 |
<h2>Network name</h2> |
| 83 |
<span class="input"><input type="text" placeholder="My Network"></span> |
| 84 |
</div>
|
| 85 |
</li>
|
| 86 |
<li class="dhcp_option"><span>Assign IP addresses automatically:</span> |
| 87 |
<a href="" class="check"> |
| 88 |
<span class="snf-checkbox-checked"></span> |
| 89 |
</a>
|
| 90 |
<p>
|
| 91 |
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. |
| 92 |
</p>
|
| 93 |
</li>
|
| 94 |
<li>
|
| 95 |
<span class="sub_title">Network subnet:</span> |
| 96 |
<ul class="subnet_options"> |
| 97 |
<li>
|
| 98 |
<span>Auto
|
| 99 |
<a href="" class="radio_btn"> |
| 100 |
<span class="snf-radio-checked"></span> |
| 101 |
</a>
|
| 102 |
</span>
|
| 103 |
</li>
|
| 104 |
<li class="manual"> |
| 105 |
<form>
|
| 106 |
<span>Manual
|
| 107 |
<a href="" class="radio_btn manual"> |
| 108 |
<span class="snf-radio-unchecked"></span> |
| 109 |
</a>
|
| 110 |
<input class="manual_sub hidden" type="text" name="network_name"> |
| 111 |
</span>
|
| 112 |
</form>
|
| 113 |
</li>
|
| 114 |
<li>
|
| 115 |
<span>10.0.0.0/24
|
| 116 |
<a href="" class="radio_btn"> |
| 117 |
<span class="snf-radio-unchecked"></span> |
| 118 |
</a>
|
| 119 |
</span>
|
| 120 |
</li>
|
| 121 |
<li>
|
| 122 |
<span>192.168.0.0/24
|
| 123 |
<a href="" class="radio_btn"> |
| 124 |
<span class="snf-radio-unchecked"></span> |
| 125 |
</a>
|
| 126 |
</span>
|
| 127 |
</li>
|
| 128 |
</ul>
|
| 129 |
</li>
|
| 130 |
</ul>
|
| 131 |
</div>
|
| 132 |
|
| 133 |
|
| 134 |
</div>
|
| 135 |
</div>
|
| 136 |
<!-- new tba start -->
|
| 137 |
<div class="bottom"> |
| 138 |
<div class="row"> |
| 139 |
<a href="" class="nav prev"><span>CANCEL</span></a> |
| 140 |
<a href="" class="nav next"><span>CREATE</span></a> |
| 141 |
|
| 142 |
</div>
|
| 143 |
</div>
|
| 144 |
<!-- new tba end -->
|
| 145 |
|
| 146 |
</div>
|
| 147 |
|
| 148 |
</div>
|
| 149 |
<!-- overlays end -->
|
| 150 |
|
| 151 |
|
| 152 |
<section class="actions-bar clearfix"> |
| 153 |
<div class="row"> |
| 154 |
<div class="new-btn"> |
| 155 |
<a data-overlay-id="#network-wizard" href="#"><span>+</span> NEW NETWORK </a></div> |
| 156 |
<div class="main-actions"> |
| 157 |
<ul>
|
| 158 |
<li class="running" ><a href="">Reboot</a></li> |
| 159 |
<li class="running"><a href="">Shutdown</a></li> |
| 160 |
<li class="both"><a href="">Destroy</a></li> |
| 161 |
<li class="stopped"><a href="">Start</a></li> |
| 162 |
<!-- in case we want an action always activated
|
| 163 |
<li class="pernament"><a href="" class="active">Action</a></li> -->
|
| 164 |
</ul>
|
| 165 |
</div>
|
| 166 |
</div>
|
| 167 |
<div class="border-dashed"></div> |
| 168 |
</section>
|
| 169 |
<section class="main row"> |
| 170 |
<div class="networks entities"> |
| 171 |
<ul class="items-list small-block-grid-2 large-block-grid-3 sortable"> |
| 172 |
<li data-order="0"> |
| 173 |
<div class="container"> |
| 174 |
<div class="img-wrap"> |
| 175 |
<div class="img running"> |
| 176 |
Network |
| 177 |
</div>
|
| 178 |
</div>
|
| 179 |
<p class="visible-info"> |
| 180 |
<span><em>IPv4 83.212.97.127</em></span> |
| 181 |
<span class="title"> |
| 182 |
<a href="network_details.html"><em>Network name</em></a> |
| 183 |
</span>
|
| 184 |
</p>
|
| 185 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
| 186 |
</div>
|
| 187 |
</li>
|
| 188 |
<li data-order="1"> |
| 189 |
<div class="container"> |
| 190 |
<div class="img-wrap"> |
| 191 |
<div class="img running"> |
| 192 |
Network |
| 193 |
</div>
|
| 194 |
</div>
|
| 195 |
<p class="visible-info"> |
| 196 |
<span><em>IPv4 83.212.97.127</em></span> |
| 197 |
<span class="title"> |
| 198 |
<a href="network_details.html"><em>Network name</em></a> |
| 199 |
</span>
|
| 200 |
</p>
|
| 201 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
| 202 |
</div>
|
| 203 |
</li>
|
| 204 |
<li data-order="2"> |
| 205 |
<div class="container"> |
| 206 |
<div class="img-wrap"> |
| 207 |
<div class="img running"> |
| 208 |
Network |
| 209 |
</div>
|
| 210 |
</div>
|
| 211 |
<p class="visible-info"> |
| 212 |
<span><em>IPv4 83.212.97.127</em></span> |
| 213 |
<span class="title"> |
| 214 |
<a href="network_details.html"><em>Network name</em></a> |
| 215 |
</span>
|
| 216 |
</p>
|
| 217 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
| 218 |
</div>
|
| 219 |
</li>
|
| 220 |
<li data-order="3"> |
| 221 |
<div class="add-new"><a href="#">NEW<br>NETWORK</a></div> |
| 222 |
</li>
|
| 223 |
</ul>
|
| 224 |
</div>
|
| 225 |
</section>
|
| 226 |
</div>
|
| 227 |
|
| 228 |
|
| 229 |
<script src="javascripts/vendor/jquery.js"></script> |
| 230 |
<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script> |
| 231 |
<script src="javascripts/foundation/foundation.js"></script> |
| 232 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
| 233 |
|
| 234 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
| 235 |
|
| 236 |
<script src="javascripts/foundation/foundation.cookie.js"></script> |
| 237 |
|
| 238 |
<script src="javascripts/foundation/foundation.dropdown.js"></script> |
| 239 |
|
| 240 |
<script src="javascripts/foundation/foundation.forms.js"></script> |
| 241 |
|
| 242 |
<script src="javascripts/foundation/foundation.joyride.js"></script> |
| 243 |
|
| 244 |
<script src="javascripts/foundation/foundation.magellan.js"></script> |
| 245 |
|
| 246 |
<script src="javascripts/foundation/foundation.orbit.js"></script> |
| 247 |
|
| 248 |
<script src="javascripts/foundation/foundation.placeholder.js"></script> |
| 249 |
|
| 250 |
<script src="javascripts/foundation/foundation.reveal.js"></script> |
| 251 |
|
| 252 |
<script src="javascripts/foundation/foundation.section.js"></script> |
| 253 |
|
| 254 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
| 255 |
|
| 256 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
| 257 |
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script> |
| 258 |
<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script> |
| 259 |
<script type="text/javascript" src="javascripts/dropzone.js"></script> |
| 260 |
<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script> |
| 261 |
|
| 262 |
|
| 263 |
<script src="javascripts/common.js"></script> |
| 264 |
<script src="javascripts/network-wizard.js"></script> |
| 265 |
<!-- <script src="javascripts/vm-wizard.js"></script> -->
|
| 266 |
|
| 267 |
|
| 268 |
<script>
|
| 269 |
$(document).foundation();
|
| 270 |
</script>
|
| 271 |
</body>
|
| 272 |
</html>
|