884 lines
40 KiB
HTML
884 lines
40 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="author" content="">
|
||
|
|
<link rel="shortcut icon" href="images/favicon.png" type="image/png">
|
||
|
|
|
||
|
|
<title>Bracket Responsive Bootstrap3 Admin</title>
|
||
|
|
|
||
|
|
<link href="css/style.default.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="js/html5shiv.js"></script>
|
||
|
|
<script src="js/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Preloader -->
|
||
|
|
<div id="preloader">
|
||
|
|
<div id="status"><i class="fa fa-spinner fa-spin"></i></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
|
||
|
|
<div class="leftpanel">
|
||
|
|
|
||
|
|
<div class="logopanel">
|
||
|
|
<h1><span>[</span> bracket <span>]</span></h1>
|
||
|
|
</div><!-- logopanel -->
|
||
|
|
|
||
|
|
<div class="leftpanelinner">
|
||
|
|
|
||
|
|
<!-- This is only visible to small devices -->
|
||
|
|
<div class="visible-xs hidden-sm hidden-md hidden-lg">
|
||
|
|
<div class="media userlogged">
|
||
|
|
<img alt="" src="images/photos/loggeduser.png" class="media-object">
|
||
|
|
<div class="media-body">
|
||
|
|
<h4>John Doe</h4>
|
||
|
|
<span>"Life is so..."</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5 class="sidebartitle actitle">Account</h5>
|
||
|
|
<ul class="nav nav-pills nav-stacked nav-bracket mb30">
|
||
|
|
<li><a href="profile.html"><i class="fa fa-user"></i> <span>Profile</span></a></li>
|
||
|
|
<li><a href="#"><i class="fa fa-cog"></i> <span>Account Settings</span></a></li>
|
||
|
|
<li><a href="#"><i class="fa fa-question-circle"></i> <span>Help</span></a></li>
|
||
|
|
<li><a href="signout.html"><i class="fa fa-sign-out"></i> <span>Sign Out</span></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5 class="sidebartitle">Navigation</h5>
|
||
|
|
<ul class="nav nav-pills nav-stacked nav-bracket">
|
||
|
|
<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
|
||
|
|
<li><a href="email.html"><i class="fa fa-envelope-o"></i> <span>Email</span></a></li>
|
||
|
|
<li class="nav-parent"><a href="#"><i class="fa fa-edit"></i> <span>Forms</span></a>
|
||
|
|
<ul class="children">
|
||
|
|
<li><a href="general-forms.html"><i class="fa fa-caret-right"></i> General Forms</a></li>
|
||
|
|
<li><a href="form-layouts.html"><i class="fa fa-caret-right"></i> Form Layouts</a></li>
|
||
|
|
<li><a href="form-validation.html"><i class="fa fa-caret-right"></i> Form Validation</a></li>
|
||
|
|
<li><a href="form-wizards.html"><i class="fa fa-caret-right"></i> Form Wizards</a></li>
|
||
|
|
<li><a href="wysiwyg.html"><i class="fa fa-caret-right"></i> WYSIWYG</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="nav-parent nav-active active"><a href="#"><i class="fa fa-suitcase"></i> <span>UI Elements</span></a>
|
||
|
|
<ul class="children" style="display: block">
|
||
|
|
<li><a href="buttons.html"><i class="fa fa-caret-right"></i> Buttons</a></li>
|
||
|
|
<li><a href="icons.html"><i class="fa fa-caret-right"></i> Icons</a></li>
|
||
|
|
<li class="active"><a href="typography.html"><i class="fa fa-caret-right"></i> Typography</a></li>
|
||
|
|
<li><a href="alerts.html"><i class="fa fa-caret-right"></i> Alerts & Notifications</a></li>
|
||
|
|
<li><a href="tabs-accordions.html"><i class="fa fa-caret-right"></i> Tabs & Accordions</a></li>
|
||
|
|
<li><a href="sliders.html"><i class="fa fa-caret-right"></i> Sliders</a></li>
|
||
|
|
<li><a href="graphs.html"><i class="fa fa-caret-right"></i> Graphs & Charts</a></li>
|
||
|
|
<li><a href="widgets.html"><i class="fa fa-caret-right"></i> Panels & Widgets</a></li>
|
||
|
|
<li><a href="extras.html"><i class="fa fa-caret-right"></i> Extras</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="tables.html"><i class="fa fa-th-list"></i> <span>Tables</span></a></li>
|
||
|
|
<li><a href="maps.html"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li>
|
||
|
|
<li class="nav-parent"><a href="#"><i class="fa fa-file-text"></i> <span>Pages</span></a>
|
||
|
|
<ul class="children">
|
||
|
|
<li><a href="calendar.html"><i class="fa fa-caret-right"></i> Calendar</a></li>
|
||
|
|
<li><a href="media-manager.html"><i class="fa fa-caret-right"></i> Media Manager</a></li>
|
||
|
|
<li><a href="timeline.html"><i class="fa fa-caret-right"></i> Timeline</a></li>
|
||
|
|
<li><a href="blog-list.html"><i class="fa fa-caret-right"></i> Blog List</a></li>
|
||
|
|
<li><a href="blog-single.html"><i class="fa fa-caret-right"></i> Blog Single</a></li>
|
||
|
|
<li><a href="people-directory.html"><i class="fa fa-caret-right"></i> People Directory</a></li>
|
||
|
|
<li><a href="profile.html"><i class="fa fa-caret-right"></i> Profile</a></li>
|
||
|
|
<li><a href="invoice.html"><i class="fa fa-caret-right"></i> Invoice</a></li>
|
||
|
|
<li><a href="search-results.html"><i class="fa fa-caret-right"></i> Search Results</a></li>
|
||
|
|
<li><a href="blank.html"><i class="fa fa-caret-right"></i> Blank Page</a></li>
|
||
|
|
<li><a href="notfound.html"><i class="fa fa-caret-right"></i> 404 Page</a></li>
|
||
|
|
<li><a href="locked.html"><i class="fa fa-caret-right"></i> Locked Screen</a></li>
|
||
|
|
<li><a href="signin.html"><i class="fa fa-caret-right"></i> Sign In</a></li>
|
||
|
|
<li><a href="signup.html"><i class="fa fa-caret-right"></i> Sign Up</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="layouts.html"><i class="fa fa-laptop"></i> <span>Skins & Layouts</span></a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="infosummary">
|
||
|
|
<h5 class="sidebartitle">Information Summary</h5>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<div class="datainfo">
|
||
|
|
<span class="text-muted">Daily Traffic</span>
|
||
|
|
<h4>630, 201</h4>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar-chart" class="chart"></div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="datainfo">
|
||
|
|
<span class="text-muted">Average Users</span>
|
||
|
|
<h4>1, 332, 801</h4>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar-chart2" class="chart"></div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="datainfo">
|
||
|
|
<span class="text-muted">Disk Usage</span>
|
||
|
|
<h4>82.2%</h4>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar-chart3" class="chart"></div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="datainfo">
|
||
|
|
<span class="text-muted">CPU Usage</span>
|
||
|
|
<h4>140.05 - 32</h4>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar-chart4" class="chart"></div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="datainfo">
|
||
|
|
<span class="text-muted">Memory Usage</span>
|
||
|
|
<h4>32.2%</h4>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar-chart5" class="chart"></div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div><!-- infosummary -->
|
||
|
|
|
||
|
|
</div><!-- leftpanelinner -->
|
||
|
|
</div><!-- leftpanel -->
|
||
|
|
|
||
|
|
<div class="mainpanel">
|
||
|
|
|
||
|
|
<div class="headerbar">
|
||
|
|
|
||
|
|
<a class="menutoggle"><i class="fa fa-bars"></i></a>
|
||
|
|
|
||
|
|
<form class="searchform" action="http://themepixels.com/demo/webpage/bracket/index.html" method="post">
|
||
|
|
<input type="text" class="form-control" name="keyword" placeholder="Search here..." />
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="header-right">
|
||
|
|
<ul class="headermenu">
|
||
|
|
<li>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-default dropdown-toggle tp-icon" data-toggle="dropdown">
|
||
|
|
<i class="glyphicon glyphicon-user"></i>
|
||
|
|
<span class="badge">2</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu dropdown-menu-head pull-right">
|
||
|
|
<h5 class="title">2 Newly Registered Users</h5>
|
||
|
|
<ul class="dropdown-list user-list">
|
||
|
|
<li class="new">
|
||
|
|
<div class="thumb"><a href="#"><img src="images/photos/user1.png" alt="" /></a></div>
|
||
|
|
<div class="desc">
|
||
|
|
<h5><a href="#">Draniem Daamul (@draniem)</a> <span class="badge badge-success">new</span></h5>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="new">
|
||
|
|
<div class="thumb"><a href="#"><img src="images/photos/user2.png" alt="" /></a></div>
|
||
|
|
<div class="desc">
|
||
|
|
<h5><a href="#">Zaham Sindilmaca (@zaham)</a> <span class="badge badge-success">new</span></h5>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="thumb"><a href="#"><img src="images/photos/user3.png" alt="" /></a></div>
|
||
|
|
<div class="desc">
|
||
|
|
<h5><a href="#">Weno Carasbong (@wenocar)</a></h5>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="thumb"><a href="#"><img src="images/photos/user4.png" alt="" /></a></div>
|
||
|
|
<div class="desc">
|
||
|
|
<h5><a href="#">Nusja Nawancali (@nusja)</a></h5>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="thumb"><a href="#"><img src="images/photos/user5.png" alt="" /></a></div>
|
||
|
|
<div class="desc">
|
||
|
|
<h5><a href="#">Lane Kitmari (@lane_kitmare)</a></h5>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="new"><a href="#">See All Users</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-default dropdown-toggle tp-icon" data-toggle="dropdown">
|
||
|
|
<i class="glyphicon glyphicon-envelope"></i>
|
||
|
|
<span class="badge">1</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu dropdown-menu-head pull-right">
|
||
|
|
<h5 class="title">You Have 1 New Message</h5>
|
||
|
|
<ul class="dropdown-list gen-list">
|
||
|
|
<li class="new">
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user1.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Draniem Daamul <span class="badge badge-success">new</span></span>
|
||
|
|
<span class="msg">Lorem ipsum dolor sit amet...</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user2.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Nusja Nawancali</span>
|
||
|
|
<span class="msg">Lorem ipsum dolor sit amet...</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user3.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Weno Carasbong</span>
|
||
|
|
<span class="msg">Lorem ipsum dolor sit amet...</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user4.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Zaham Sindilmaca</span>
|
||
|
|
<span class="msg">Lorem ipsum dolor sit amet...</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user5.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Veno Leongal</span>
|
||
|
|
<span class="msg">Lorem ipsum dolor sit amet...</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="new"><a href="#">Read All Messages</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-default dropdown-toggle tp-icon" data-toggle="dropdown">
|
||
|
|
<i class="glyphicon glyphicon-globe"></i>
|
||
|
|
<span class="badge">5</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu dropdown-menu-head pull-right">
|
||
|
|
<h5 class="title">You Have 5 New Notifications</h5>
|
||
|
|
<ul class="dropdown-list gen-list">
|
||
|
|
<li class="new">
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user4.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Zaham Sindilmaca <span class="badge badge-success">new</span></span>
|
||
|
|
<span class="msg">is now following you</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="new">
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user5.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Weno Carasbong <span class="badge badge-success">new</span></span>
|
||
|
|
<span class="msg">is now following you</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="new">
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user3.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Veno Leongal <span class="badge badge-success">new</span></span>
|
||
|
|
<span class="msg">likes your recent status</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="new">
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user3.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Nusja Nawancali <span class="badge badge-success">new</span></span>
|
||
|
|
<span class="msg">downloaded your work</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="new">
|
||
|
|
<a href="#">
|
||
|
|
<span class="thumb"><img src="images/photos/user3.png" alt="" /></span>
|
||
|
|
<span class="desc">
|
||
|
|
<span class="name">Nusja Nawancali <span class="badge badge-success">new</span></span>
|
||
|
|
<span class="msg">send you 2 messages</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="new"><a href="#">See All Notifications</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
|
|
<img src="images/photos/loggeduser.png" alt="" />
|
||
|
|
John Doe
|
||
|
|
<span class="caret"></span>
|
||
|
|
</button>
|
||
|
|
<ul class="dropdown-menu dropdown-menu-usermenu pull-right">
|
||
|
|
<li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
|
||
|
|
<li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li>
|
||
|
|
<li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li>
|
||
|
|
<li><a href="signin.html"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<button id="chatview" class="btn btn-default tp-icon chat-icon">
|
||
|
|
<i class="glyphicon glyphicon-comment"></i>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div><!-- header-right -->
|
||
|
|
|
||
|
|
</div><!-- headerbar -->
|
||
|
|
|
||
|
|
<div class="pageheader">
|
||
|
|
<h2><i class="fa fa-font"></i> Typography <span>Subtitle goes here...</span></h2>
|
||
|
|
<div class="breadcrumb-wrapper">
|
||
|
|
<span class="label">You are here:</span>
|
||
|
|
<ol class="breadcrumb">
|
||
|
|
<li><a href="index.html">Bracket</a></li>
|
||
|
|
<li><a href="buttons.html">UI Elements</a></li>
|
||
|
|
<li class="active">Typography</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contentpanel">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Headings</h4>
|
||
|
|
<p>All HTML headings, <code>h1</code> through <code>h6</code>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<h1>h1. Bootstrap heading</h1>
|
||
|
|
<h2>h2. Bootstrap heading</h2>
|
||
|
|
<h3>h3. Bootstrap heading</h3>
|
||
|
|
<h4>h4. Bootstrap heading</h4>
|
||
|
|
<h5>h5. Bootstrap heading</h5>
|
||
|
|
<h6>h6. Bootstrap heading</h6>
|
||
|
|
</div>
|
||
|
|
</div><!-- panel -->
|
||
|
|
</div><!-- col-md-6 -->
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Body Copy</h4>
|
||
|
|
<p>Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> receive a bottom margin of half their computed line-height (10px by default).</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
||
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
|
|
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||
|
|
</div>
|
||
|
|
</div><!-- panel -->
|
||
|
|
</div><!-- col-md-6 -->
|
||
|
|
|
||
|
|
</div><!-- row -->
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Lead Body Copy</h4>
|
||
|
|
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
|
||
|
|
<code><p class="lead">...</p></code>
|
||
|
|
</div>
|
||
|
|
</div><!-- panel -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Font Color</h4>
|
||
|
|
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||
|
|
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||
|
|
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||
|
|
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||
|
|
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||
|
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
|
|
</div>
|
||
|
|
</div><!-- panel -->
|
||
|
|
</div><!-- col-md-6 -->
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Addresses</h4>
|
||
|
|
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br /></code>.</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<address>
|
||
|
|
<strong>Twitter, Inc.</strong><br>
|
||
|
|
795 Folsom Ave, Suite 600<br>
|
||
|
|
San Francisco, CA 94107<br>
|
||
|
|
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||
|
|
</address>
|
||
|
|
<address>
|
||
|
|
<strong>Full Name</strong><br>
|
||
|
|
<a href="mailto:#">first.last@example.com</a>
|
||
|
|
</address>
|
||
|
|
</div>
|
||
|
|
</div><!-- panel -->
|
||
|
|
</div><!-- col-md-6 -->
|
||
|
|
</div><!-- row -->
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Blockquote</h4>
|
||
|
|
<p>Wrap <code><blockquote></code> around any HTML as the quote. For straight quotes, we recommend a <code><p></code>.</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<blockquote>
|
||
|
|
<i class="fa fa-quote-left"></i>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
<blockquote>
|
||
|
|
<i class="fa fa-quote-left"></i>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
|
|
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
</div><!-- panel-body -->
|
||
|
|
</div><!-- panel -->
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">List</h4>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<h5 class="subtitle">Unordered</h5>
|
||
|
|
<p>A list of items in which the order does not explicitly matter.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Lorem ipsum dolor sit amet</li>
|
||
|
|
<li>Consectetur adipiscing elit
|
||
|
|
<ul>
|
||
|
|
<li>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Integer molestie lorem at massa</li>
|
||
|
|
</ul>
|
||
|
|
</div><!-- col-md-4 -->
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<h5 class="subtitle">Ordered</h5>
|
||
|
|
<p>A list of items in which the order does explicitly matter.</p>
|
||
|
|
<ol>
|
||
|
|
<li>Lorem ipsum dolor sit amet</li>
|
||
|
|
<li>Consectetur adipiscing elit
|
||
|
|
<ol>
|
||
|
|
<li>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li>Integer molestie lorem at massa</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<h5 class="subtitle">Unstyled</h5>
|
||
|
|
<p>A list of items with class of <code>.list-unstyled</code>.</p>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Lorem ipsum dolor sit amet</li>
|
||
|
|
<li>Consectetur adipiscing elit
|
||
|
|
<ol>
|
||
|
|
<li>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li>Integer molestie lorem at massa</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- row -->
|
||
|
|
</div><!-- panel-body -->
|
||
|
|
</div><!-- panel -->
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<div class="panel-btns">
|
||
|
|
<a href="#" class="panel-close">×</a>
|
||
|
|
<a href="#" class="minimize">−</a>
|
||
|
|
</div>
|
||
|
|
<h4 class="panel-title">Wells</h4>
|
||
|
|
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
|
||
|
|
</div><!-- panel-heading -->
|
||
|
|
<div class="panel-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="well">Look, I'm in well</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="well well-lg">Look, I'm in a large well</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="well well-sm">Look, I'm in a small well</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div><!-- panel-body -->
|
||
|
|
</div><!-- panel -->
|
||
|
|
|
||
|
|
</div><!-- contentpanel -->
|
||
|
|
|
||
|
|
</div><!-- mainpanel -->
|
||
|
|
|
||
|
|
<div class="rightpanel">
|
||
|
|
<!-- Nav tabs -->
|
||
|
|
<ul class="nav nav-tabs nav-justified">
|
||
|
|
<li class="active"><a href="#rp-alluser" data-toggle="tab"><i class="fa fa-users"></i></a></li>
|
||
|
|
<li><a href="#rp-favorites" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
|
||
|
|
<li><a href="#rp-history" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
|
||
|
|
<li><a href="#rp-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- Tab panes -->
|
||
|
|
<div class="tab-content">
|
||
|
|
<div class="tab-pane active" id="rp-alluser">
|
||
|
|
<h5 class="sidebartitle">Online Users</h5>
|
||
|
|
<ul class="chatuserlist">
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/userprofile.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Eileen Sideways</strong>
|
||
|
|
<small>Los Angeles, CA</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user1.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<span class="pull-right badge badge-danger">2</span>
|
||
|
|
<strong>Zaham Sindilmaca</strong>
|
||
|
|
<small>San Francisco, CA</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user2.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Nusja Nawancali</strong>
|
||
|
|
<small>Bangkok, Thailand</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user3.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Renov Leongal</strong>
|
||
|
|
<small>Cebu City, Philippines</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user4.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Weno Carasbong</strong>
|
||
|
|
<small>Tokyo, Japan</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="mb30"></div>
|
||
|
|
|
||
|
|
<h5 class="sidebartitle">Offline Users</h5>
|
||
|
|
<ul class="chatuserlist">
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user5.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Eileen Sideways</strong>
|
||
|
|
<small>Los Angeles, CA</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user2.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Zaham Sindilmaca</strong>
|
||
|
|
<small>San Francisco, CA</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user3.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Nusja Nawancali</strong>
|
||
|
|
<small>Bangkok, Thailand</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user4.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Renov Leongal</strong>
|
||
|
|
<small>Cebu City, Philippines</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user5.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Weno Carasbong</strong>
|
||
|
|
<small>Tokyo, Japan</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user4.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Renov Leongal</strong>
|
||
|
|
<small>Cebu City, Philippines</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user5.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Weno Carasbong</strong>
|
||
|
|
<small>Tokyo, Japan</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="rp-favorites">
|
||
|
|
<h5 class="sidebartitle">Favorites</h5>
|
||
|
|
<ul class="chatuserlist">
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user2.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Eileen Sideways</strong>
|
||
|
|
<small>Los Angeles, CA</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user1.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Zaham Sindilmaca</strong>
|
||
|
|
<small>San Francisco, CA</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user3.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Nusja Nawancali</strong>
|
||
|
|
<small>Bangkok, Thailand</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user4.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Renov Leongal</strong>
|
||
|
|
<small>Cebu City, Philippines</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user5.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Weno Carasbong</strong>
|
||
|
|
<small>Tokyo, Japan</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="rp-history">
|
||
|
|
<h5 class="sidebartitle">History</h5>
|
||
|
|
<ul class="chatuserlist">
|
||
|
|
<li class="online">
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user4.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Eileen Sideways</strong>
|
||
|
|
<small>Hi hello, ctc?... would you mind if I go to your...</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user2.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Zaham Sindilmaca</strong>
|
||
|
|
<small>This is to inform you that your product that we...</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="media">
|
||
|
|
<a href="#" class="pull-left media-thumb">
|
||
|
|
<img alt="" src="images/photos/user3.png" class="media-object">
|
||
|
|
</a>
|
||
|
|
<div class="media-body">
|
||
|
|
<strong>Nusja Nawancali</strong>
|
||
|
|
<small>Are you willing to have a long term relat...</small>
|
||
|
|
</div>
|
||
|
|
</div><!-- media -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane pane-settings" id="rp-settings">
|
||
|
|
|
||
|
|
<h5 class="sidebartitle mb20">Settings</h5>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-xs-8 control-label">Show Offline Users</label>
|
||
|
|
<div class="col-xs-4 control-label">
|
||
|
|
<div class="toggle toggle-success"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-xs-8 control-label">Enable History</label>
|
||
|
|
<div class="col-xs-4 control-label">
|
||
|
|
<div class="toggle toggle-success"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-xs-8 control-label">Show Full Name</label>
|
||
|
|
<div class="col-xs-4 control-label">
|
||
|
|
<div class="toggle-chat1 toggle-success"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-xs-8 control-label">Show Location</label>
|
||
|
|
<div class="col-xs-4 control-label">
|
||
|
|
<div class="toggle toggle-success"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- tab-pane -->
|
||
|
|
|
||
|
|
</div><!-- tab-content -->
|
||
|
|
</div><!-- rightpanel -->
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="js/jquery-1.10.2.min.js"></script>
|
||
|
|
<script src="js/jquery-migrate-1.2.1.min.js"></script>
|
||
|
|
<script src="js/bootstrap.min.js"></script>
|
||
|
|
<script src="js/modernizr.min.js"></script>
|
||
|
|
<script src="js/jquery.sparkline.min.js"></script>
|
||
|
|
<script src="js/toggles.min.js"></script>
|
||
|
|
<script src="js/retina.min.js"></script>
|
||
|
|
<script src="js/jquery.cookies.js"></script>
|
||
|
|
|
||
|
|
<script src="js/custom.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|