/hub.html
HTML | 295 lines | 232 code | 40 blank | 23 comment | 0 complexity | c118330c3c45a7ef352126988615a0ca MD5 | raw file
- <!DOCTYPE html>
- <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
- <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
- <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
- <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8" />
- <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <!-- Mobile viewport optimized: h5bp.com/viewport -->
- <meta name="viewport" content="width=device-width">
-
- <title>Hub ยท BootMetro</title>
-
- <meta name="robots" content="noindex, nofollow">
- <meta name="description" content="BootMetro : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
- <meta name="keywords" content="bootmetro, modern ui, modern-ui, metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
- <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
-
- <!-- remove or comment this line if you want to use the local fonts -->
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-
- <!--<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">-->
- <link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons.css">
- <link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
- <link rel="stylesheet" type="text/css" href="content/css/bootmetro-responsive.css">
- <link rel="stylesheet" type="text/css" href="content/css/bootmetro-ui-light.css">
- <link rel="stylesheet" type="text/css" href="content/css/datepicker.css">
- <!--[if IE 7]>
- <link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons-ie7.css">
- <![endif]-->
-
- <!-- these two css are to use only for documentation -->
- <link rel="stylesheet" type="text/css" href="content/css/demo.css">
- <link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >
-
- <!-- Le fav and touch icons -->
- <link rel="shortcut icon" href="content/ico/favicon.ico">
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
- <link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
-
- <!-- All JavaScript at the bottom, except for Modernizr and Respond.
- Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
- For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
- <script src="scripts/modernizr-2.6.2.min.js"></script>
-
- <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-3182578-6']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
- </head>
-
- <body>
- <!--[if lt IE 7]>
- <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
- <![endif]-->
-
- <!-- Header
- ================================================== -->
- <header id="nav-bar" class="container">
- <div class="row">
- <div class="span12">
- <div id="header-container">
- <a id="backbutton" class="win-backbutton" href="./index.html"></a>
- <h5>BootMetro</h5>
- <div class="dropdown">
- <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
- Start
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="./metro-layouts.html">Metro Layouts</a></li>
- <li><a href="./hub.html">Hub</a></li>
- <li><a href="./tiles-templates.html">Tile Templates</a></li>
- <li><a href="./listviews.html">ListViews</a></li>
- <li><a href="./appbar-demo.html">App-Bar Demo</a></li>
- <li><a href="./table.html">Table Demo</a></li>
- <li><a href="./wizard.html">Wizard</a></li>
- <li><a href="./icons.html">Icons</a></li>
- <li><a href="./toast.html">Toast Notifications</a></li>
- <li><a href="./pivot.html">Pivot</a></li>
- <li><a href="./metro-components.html">Metro Components</a></li>
- <li class="divider"></li>
- <li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
- <li><a href="./base-css.html">Bootstrap Base CSS</a></li>
- <li><a href="./components.html">Bootstrap Components</a></li>
- <li><a href="./javascript.html">Bootstrap Javascript</a></li>
- <li class="divider"></li>
- <li><a href="./index.html">Home</a></li>
- </ul>
- </div>
- </div>
- <div id="top-info" class="pull-right">
- <a id="settings" class="pull-right" href="#">
- <b class="icon-settings"></b>
- </a>
- <!--<hr class="separator pull-right"/>-->
- <a id="logged-user" href="#" class="pull-right">
- <b class="icon-user-2"></b>
- </a>
- <div class="pull-left">
- <h3>FirstName</h3>
- <h4>LastName</h4>
- </div>
- </div>
- </div>
- </div>
- </header>
-
- <div class="container">
- <div class="row">
- <div id="hub" class="metro span12">
- <div class="panorama">
- <div class="panorama-sections">
-
- <div id="section1" class="panorama-section tile-span-4">
-
- <h2>BootMetro Demos</h2>
-
- <a class="tile wide imagetext bg-color-orange" href="./metro-layouts.html">
- <div class="image-wrapper">
- <img src="content/img/metro-tiles.jpg" />
- </div>
- <div class="column-text">
- <div class="text4">Demos of various Metro style layouts.</div>
- </div>
- <div class="app-label">Layouts</div>
- </a>
-
- <a class="tile wide imagetext bg-color-blueDark" href="./tiles-templates.html">
- <div class="image-wrapper">
- <img src="content/img/metro-tiles.jpg" />
- </div>
- <div class="column-text">
- <div class="text4">List of all tile templates: square, wide, widepeek, with images or text only.</div>
- </div>
- <div class="app-label">Tiles Templates</div>
- </a>
-
- <a class="tile wide imagetext wideimage bg-color-orange" href="./appbar-demo.html">
- <img src="content/img/appbar.png" alt=""/>
- <div class="textover-wrapper bg-color-blue">
- <div class="text2">Application Bar</div>
- </div>
- </a>
-
- <a class="tile app square bg-color-greenDark" href="./table.html">
- <div class="image-wrapper">
- <img src="content/img/My Apps.png" alt=""/>
- </div>
- <div class="app-label">Styled Table</div>
- </a>
-
- <a class="tile app bg-color-purple" href="./listviews.html">
- <div class="image-wrapper">
- <span class="icon icon-list-2"></span>
- </div>
- <span class="app-label">ListView</span>
- </a>
-
- <a class="tile app bg-color-red" href="#">
- <div class="image-wrapper">
- <span class="icon icon-publish"></span>
- </div>
- <span class="app-label">[TODO] Charms</span>
- </a>
-
- <a class="tile app bg-color-blueDark" href="./icons.html">
- <div class="image-wrapper">
- <span class="icon icon-IcoMoon" ></span>
- </div>
- <span class="app-label">Icons</span>
- </a>
-
- <a class="tile app bg-color-purple" href="./metro-components.html">
- <div class="image-wrapper">
- <span class="icon icon-list-2"></span>
- </div>
- <span class="app-label">Metro Components</span>
- </a>
-
- </div>
-
- <div id="section2" class="panorama-section tile-span-4">
-
- <h2>Bootstrap Metro</h2>
-
- <a class="tile wide imagetext bg-color-blue" href="./scaffolding.html">
- <div class="image-wrapper">
- <img src="content/img/My Apps.png" />
- </div>
- <div class="column-text">
- <div class="text">Grid system</div>
- <div class="text">Layouts</div>
- <div class="text">Responsive design</div>
- </div>
- <span class="app-label">SCAFFOLDING</span>
- </a>
-
- <a class="tile wide imagetext bg-color-blueDark" href="./base-css.html">
- <div class="image-wrapper">
- <img src="content/img/Coding app.png" />
- </div>
- <div class="column-text">
- <div class="text">Typography</div>
- <div class="text">Tables</div>
- <div class="text">Forms</div>
- <div class="text">Buttons</div>
- </div>
- <span class="app-label">BASE CSS</span>
- </a>
-
- <a class="tile app bg-color-orange" href="./components.html">
- <div class="image-wrapper">
- <img src="content/img/RegEdit.png" alt="" />
- </div>
- <span class="app-label">COMPONENTS</span>
- </a>
-
- <a class="tile app bg-color-red" href="./javascript.html">
- <div class="image-wrapper">
- <img src="content/img/Devices.png" alt="" />
- </div>
- <span class="app-label">JAVASCRIPT</span>
- </a>
-
- </div>
-
- </div>
- </div>
- <a id="panorama-scroll-prev" href="#"></a>
- <a id="panorama-scroll-next" href="#"></a>
- </div>
- </div>
- </div>
-
-
- <div id="charms" class="win-ui-dark slide">
-
- <div id="theme-charms-section" class="charms-section">
- <div class="charms-header">
- <a href="#" class="close-charms win-backbutton"></a>
- <h2>Settings</h2>
- </div>
-
- <div class="row-fluid">
- <div class="span12">
-
- <form class="">
- <label for="win-theme-select">Change theme:</label>
- <select id="win-theme-select" class="">
- <option value="metro-ui-light">Light</option>
- <option value="metro-ui-dark">Dark</option>
- </select>
- </form>
-
- </div>
- </div>
- </div>
-
- </div>
-
- <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script>window.jQuery || document.write("<script src='scripts/jquery-1.8.3.min.js'>\x3C/script>")</script>
-
- <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
- <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
- <script type="text/javascript" src="scripts/bootmetro-panorama.js"></script>
- <script type="text/javascript" src="scripts/bootmetro-pivot.js"></script>
- <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
- <script type="text/javascript" src="scripts/bootstrap-datepicker.js"></script>
- <!--<script type="text/javascript" src="scripts/jquery.nicescroll.js"></script>-->
- <script type="text/javascript" src="scripts/jquery.touchSwipe.js"></script>
- <script type="text/javascript" src="scripts/demo.js"></script>
- <script type="text/javascript" src="scripts/holder.js"></script>
- <script type="text/javascript">
- $('.panorama').panorama({
- nicescroll: false,
- showscrollbuttons: true,
- keyboard: true
- });
-
- $('#pivot').pivot();
- </script>
- </body>
- </html>