<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .content-primary img{ display: inline-block; max-width: 100%; } @media all and (min-width: 650px){ .content-secondary { float: left; width: 30%; } .content-primary { float: right; width: 67%; } } .content-primary .ui-listview { margin-top: 0px; margin-bottom: 0px; } #slider{ height: 200px; margin-left: -15px; margin-top: -19px; margin-right: -119px; } </style> <script id="page1" type="text/html"> <header data-role="header"> <h2>Page1</h2> </header> <section data-role="content"> <a href="#/page2">Vers page2</a> </section> </script> <script id="page2" type="text/html"> <header data-role="header"> <h2>Page2</h2> </header> <section data-role="content"> <a href="#/page1">Vers page1</a> </section> </script> <!-- -COMPONENTS --> <script id="headbar" type="text/html"> <div data-role="header"> <h1>{{ title }}</h1> {{# leftbutton }} <a href="{{ link }}" data-direction="reverse" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a> {{/ leftbutton }} {{# rightbutton }} <a href="{{ link }}" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a> {{/ rightbutton }} {{# headmenu }} <div data-role="navbar"> <ul> {{# headlinks }} <li><a href="{{ link }}">{{ name }}</a></li> {{/ headlinks}} </ul> </div> {{/ headmenu }} </div> </script> <script id="menu" type="text/html"> <ul data-role="listview" data-divider-theme="a"> {{^ menu-extension }} <li data-role="list-divider" role="header">Menu</li> {{/ menu-extension }} {{# menu-extension }} <li data-role="list-divider">{{ menu-extension }}</li> {{# menuextlinks }} <li><a href="{{ link }}">{{ name }}</a></li> {{/ menuextlinks }} <li data-role="list-divider" role="header">General</li> {{/ menu-extension }} {{# menulinks }} <li><a href="{{ link }}">{{ name }}</a></li> {{/ menulinks }} </ul> </script> <script id="content" type="text/html"> <div data-role="content"> {{#menu}} <div class="content-primary"> {{/ menu}} {{{ mainPanel }}} {{#menu}} </div> <div class="content-secondary"> {{> menu}} </div> {{/ menu}} </div> </script> <script id="footbar" type="text/html"> <div data-role="footer"> <div data-role="navbar"> <ul> {{# footlinks }} <li><a href="{{ link }}">{{ name }}</a></li> {{/ footlinks}} </ul> </div> </div> </script> <script id="actions" type="text/html"> <!--<div data-role="controlgroup" data-type="horizontal">--> {{# actions }} <a href="{{ link }}" data-role="button" data-inline="true" data-mini="true">{{ name }}</a> {{/ actions }} <!--</div>--> </script> <script id="service-inlist" type="text/html"> <li><a href="{{ link }}"><h4>{{ name }}</h4></a></li> </script> <!-- -ERRORPAGE --> <script id="error" type="text/html"> {{> headbar}} {{> content}} </script> <script id="notfoundPanel" type="text/html"> <h3>NOT FOUND</h3> </script> <!-- -HOMEPAGE --> <script id="homepage" type="text/html"> {{> headbar}} {{> content}} </script> <script id="homepagePanel" type="text/html"> {{> carousel }} <a href="#/login" data-role="button">Try it now !</a> </script> <script id="carousel" type="text/html"> <div id="slider"> <ul> <li style="display: block"> <h2>Paas Without limit</h2> <p>c c++ java javascript perl php python kumofs mysql mariadb memcached apache nodejs flask tomcat zope</p> </li> <li style="display: none"> <h2>Iaas broker</h2> <p>xen kvm hyperv vmware openstack opennebula amazon eucalyptus niftyname gandi rackspace</p> </li> <li style="display: none"> <h2>Resilient Cloud Computing</h2> <fieldset class="ui-grid-a"> <div class="ui-block-a"> <ul> <li>decentralized</li> <li>open-source</li> </ul> </div> <div class="ui-block-b"> <ul> <li>10x cost efficient</li> <li>tremendously simpler</li> </ul> </div> </fieldset> </li> <li style="display: none"> <h2>Mobile Edge Computing</h2> <p>bsd linux macos windows android tizen</p> </li> <li style="display: none"> <h2>Billing</h2> <p>accoutning billing charging crm portal market</p> </li> <li style="display: none"> <h2>Saas for free</h2> <p>wordpress drupal erp5 prestashop joomla xwiki mediawiki oscommerce sugarcrm phpbb facturalux zabbix</p> </li> </ul> </div> </script> <!-- -LIBRARY --> <script id="library" type="text/html"> {{> headbar}} {{> content}} <!--{{> footbar}}--> </script> <script id="libraryPanel" type="text/html"> <form id="search-form"> <div data-role="fieldcontain" class="ui-hide-label"> <label for="search"></label> <input type="search" name="search" placeholder="Search"/> </div> </form> <ul data-role="listview"> <li data-role="list-divider" role="heading"> Most downloaded </li> {{# most }} {{> service-inlist }} {{/ most }} <li data-role="list-divider" role="heading">Brand new<span class="ui-li-count">{{ newCount }}</span></li> {{# new }} {{> service-inlist }} {{/ new }} </ul> </script> <script id="library.all" type="text/html"> {{> headbar }} {{> content }} </script> <script id="library.allPanel" type="text/html"> {{> software.list }} </script> <!-- -SOFTWARE> --> <script id="software" type="text/html"> {{> headbar }} {{> content }} </script> <script id="softwarePanel" type="text/html"> <img src="{{ image_url }}"> <p><b>{{ description }}</b></p> <a data-role="button" href="#/login">Buy it for {{ price }}€</a> </script> <script id="software.list" type="text/html"> <ul data-role="listview" id="software-list"></ul> </script> <script id="software.listitem" type="text/html"> <a href="{{ software_url }}"> {{# thumb_url }} <img src="{{ thumb_url }}" /> {{/ thumb_url }} <h3>{{ name }}</h3> </a> </script> <!-- -INSTANCE // SERVICE --> <script id="instance" type="text/html"> {{> headbar }} {{> content }} </script> <script id="instancePanel" type="text/html"> {{> actions }} <ul data-role="listview"> {{# information }} <li> {{ name }} <h4>{{ value }}</h4> </li> {{/ information }} </ul> </script> <script id="instance.list" type="text/html"> <form id="search-form"> <div data-role="fieldcontain" class="ui-hide-label"> <label for="search"></label> <input type="search" name="search" placeholder="Search"/> </div> </form> <ul data-role="listview" id="instance-list"></ul> </script> <script id="instance.listitem" type="text/html"> <a href="{{ instance_url }}"> {{# thumb_url }} <img src="{{ thumb_url }}" /> {{/ thumb_url }} <h3>{{ instance_id }}</h3> </a> </script> <script id="instance.bangPanel" type="text/html"> <form id="form-bang"> <label for="reasons">Why bang this instance ?</label> <textarea name="reasons"></textarea> <div class="ui-body ui-body-b"> <fieldset class="ui-grid-a"> <button type="submit" data-theme="a">Connexion</button> <button type="submit" data-theme="a">Cancel</button> </fieldset> </div> </form> </script> <!-- -LOGIN --> <script id="login" type="text/html"> {{> headbar }} {{> content }} </script> <script id="loginPanel" type="text/html"> <form> <div data-role="fieldcontain" class="ui-hide-label"> <label for="username"></label> <input type="text" name="username" placeholder="Username"/> </div> <div data-role="fieldcontain" class="ui-hide-label"> <label for="password"></label> <input type="password" name="password" placeholder="Password"/> </div> <div class="ui-body ui-body-b"> <fieldset class="ui-grid-a"> <button type="submit" data-theme="a">Connexion</button> </fieldset> </div> </form> </script> <!-- -DASHBOARD --> <script id="dashboard" type="text/html"> {{> headbar }} {{> content }} </script> <script id="dashboardPanel" type="text/html"> <div class="ui-grid-a"> <div class="ui-block-a"> <a data-iconpos="top" data-icon="star" data-role="button" href="#/library">Library</a> </div> <div class="ui-block-b"> <a data-iconpos="top" data-icon="star" data-role="button" href="#/network">Networks</a> </div> <div class="ui-block-a"> <a data-iconpos="top" data-icon="star" data-role="button" href="#/instance">Services</a> </div> <div class="ui-block-b"> <a data-iconpos="top" data-icon="star" data-role="button" href="#/computer">Computers</a> </div> <div class="ui-block-a"> <a data-iconpos="top" data-icon="star" data-role="button" href="#/billing">Billing</a> </div> <div class="ui-block-b"> <a data-iconpos="top" data-icon="star" data-role="button" href="#/support">Support</a> </div> </div> </script> <script type="text/javascript" src="static/js/libs/jquery-1.7.2.js"></script> <script type="text/javascript" src="static/js/libs/ICanHaz.min.js"></script> <script type="text/javascript" src="static/js/libs/swipe.min.js"></script> <script type="text/javascript" src="static/js/libs/modernizr-2.5.3.js"></script> <script type="text/javascript" src="static/js/libs/sinon-1.3.2.js"></script> <script type="text/javascript" src="static/js/libs/jquery.slapos.js"></script> <script type="text/javascript" src="static/js/libs/jquery.urljs.js"></script> <script type="text/javascript" src="static/js/fake.js"></script> <script type="text/javascript" src="static/js/jqm-config.js"></script> <script type="text/javascript" src="static/js/vifib.utils.js"></script> <script type="text/javascript" src="static/js/vifib.core.js"></script> <script type="text/javascript" src="static/js/pages/vifib.homepage.js"></script> <script type="text/javascript" src="static/js/pages/vifib.dashboard.js"></script> <script type="text/javascript" src="static/js/pages/vifib.instance.js"></script> <script type="text/javascript" src="static/js/pages/vifib.library.js"></script> <script type="text/javascript" src="static/js/pages/vifib.login.js"></script> <script type="text/javascript" src="static/js/vifib.init.js"></script> <script type="text/javascript" src="static/js/libs/jquery.mobile-1.1.0.js"></script> </head> <body> </body> </html>