<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Typography / Icons | Melon - Flat & Responsive Admin Template</title>
<!--=== CSS ===-->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery UI -->
<!--<link href="plugins/jquery-ui/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="plugins/jquery-ui/jquery.ui.1.10.2.ie.css"/>
<![endif]-->
<!-- Theme -->
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="assets/css/fontawesome/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/fontawesome/font-awesome-ie7.min.css">
<![endif]-->
<!--[if IE 8]>
<link href="assets/css/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!--=== JavaScript ===-->
<script type="text/javascript" src="assets/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/libs/lodash.compat.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/libs/html5shiv.js"></script>
<![endif]-->
<!-- Smartphone Touch Events -->
<script type="text/javascript" src="plugins/touchpunch/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="plugins/event.swipe/jquery.event.move.js"></script>
<script type="text/javascript" src="plugins/event.swipe/jquery.event.swipe.js"></script>
<!-- General -->
<script type="text/javascript" src="assets/js/libs/breakpoints.js"></script>
<script type="text/javascript" src="plugins/respond/respond.min.js"></script> <!-- Polyfill for min/max-width CSS3 Media Queries (only for IE8) -->
<script type="text/javascript" src="plugins/cookie/jquery.cookie.min.js"></script>
<script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.horizontal.min.js"></script>
<!-- Page specific plugins -->
<!-- Charts -->
<script type="text/javascript" src="plugins/sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="plugins/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="plugins/blockui/jquery.blockUI.min.js"></script>
<!-- App -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins.js"></script>
<script type="text/javascript" src="assets/js/plugins.form-components.js"></script>
<script>
$(document).ready(function(){
"use strict";
App.init(); // Init layout and core plugins
Plugins.init(); // Init all plugins
FormComponents.init(); // Init all form-specific plugins
});
</script>
<!-- Demo JS -->
<script type="text/javascript" src="assets/js/custom.js"></script>
</head>
<body>
<!-- Header -->
<header class="header navbar navbar-fixed-top" role="banner">
<!-- Top Navigation Bar -->
<div class="container">
<!-- Only visible on smartphones, menu toggle -->
<ul class="nav navbar-nav">
<li class="nav-toggle"><a href="javascript:void(0);" title=""><i class="icon-reorder"></i></a></li>
</ul>
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo.png" alt="logo" />
<strong>ME</strong>LON
</a>
<!-- /logo -->
<!-- Sidebar Toggler -->
<a href="#" class="toggle-sidebar bs-tooltip" data-placement="bottom" data-original-title="Toggle navigation">
<i class="icon-reorder"></i>
</a>
<!-- /Sidebar Toggler -->
<!-- Top Left Menu -->
<ul class="nav navbar-nav navbar-left hidden-xs hidden-sm">
<li>
<a href="#">
Dashboard
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<i class="icon-caret-down small"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-user"></i> Example #1</a></li>
<li><a href="#"><i class="icon-calendar"></i> Example #2</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-tasks"></i> Example #3</a></li>
</ul>
</li>
</ul>
<!-- /Top Left Menu -->
<!-- Top Right Menu -->
<ul class="nav navbar-nav navbar-right">
<!-- Notifications -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-warning-sign"></i>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu extended notification">
<li class="title">
<p>You have 5 new notifications</p>
</li>
<li>
<a href="javascript:void(0);">
<span class="label label-success"><i class="icon-plus"></i></span>
<span class="message">New user registration.</span>
<span class="time">1 mins</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="label label-danger"><i class="icon-warning-sign"></i></span>
<span class="message">High CPU load on cluster #2.</span>
<span class="time">5 mins</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="label label-success"><i class="icon-plus"></i></span>
<span class="message">New user registration.</span>
<span class="time">10 mins</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="label label-info"><i class="icon-bullhorn"></i></span>
<span class="message">New items are in queue.</span>
<span class="time">25 mins</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="label label-warning"><i class="icon-bolt"></i></span>
<span class="message">Disk space to 85% full.</span>
<span class="time">55 mins</span>
</a>
</li>
<li class="footer">
<a href="javascript:void(0);">View all notifications</a>
</li>
</ul>
</li>
<!-- Tasks -->
<li class="dropdown hidden-xs hidden-sm">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-tasks"></i>
<span class="badge">7</span>
</a>
<ul class="dropdown-menu extended notification">
<li class="title">
<p>You have 7 pending tasks</p>
</li>
<li>
<a href="javascript:void(0);">
<span class="task">
<span class="desc">Preparing new release</span>
<span class="percent">30%</span>
</span>
<div class="progress progress-small">
<div style="width: 30%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="task">
<span class="desc">Change management</span>
<span class="percent">80%</span>
</span>
<div class="progress progress-small progress-striped active">
<div style="width: 80%;" class="progress-bar progress-bar-danger"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="task">
<span class="desc">M
- 1
- 2
- 3
前往页