github/fuelux
1
1
Fork 0
mirror of https://github.com/ExactTarget/fuelux.git synced 2026-04-26 03:00:10 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
02e605c01bc2bbfb946515e32538da82c8d0bedd
fuelux/index.html
kevinparkerson 02e605c01b changes to loader
2014-05-12 18:06:42 -04:00

1391 lines
83 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<script src="bower_components/requirejs/require.js"></script>
<script type="text/javascript">
(function () {
var jQueryPath;
// Feature detect for jQuery version
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window ) {
jQueryPath = 'bower_components/jquery/dist/jquery';
} else {
jQueryPath = 'bower_components/jquery-1.9.1/jquery';
}
// or force/overwrite the variable with a version via ?jquery= URL parameter
var jqverParam = location.search.match(/[?&]jquery=(.*?)(?=&|$)/);
var jqver = (jqverParam) ? jqverParam[1] : undefined;
// if jquery version does not using dist folder
if(jqver == '1.9.1') {
jQueryPath = 'bower_components/jquery-' + jqver + '/jquery';
}
requirejs.config({
config: {
moment: {
noGlobal: true
}
},
paths: {
jquery: jQueryPath,
underscore: 'bower_components/underscore/underscore',
bootstrap: 'bower_components/bootstrap/dist/js/bootstrap.min',
moment: 'bower_components/moment-with-langs/index', // comment out if you dont want momentjs to be default
fuelux: 'js',
sample: 'sample'
}
});
})();
require(['jquery', 'moment', 'index'], function($){});
</script>
</head>
<body>
<div class="container">
<div class="clearfix">
<h2>Checkbox</h2>
<div class="checkbox">
<label class="checkbox-custom">
<input id="chk1" checked="checked" class="checked" type="checkbox" value="">
Custom appearance checkbox checked at page load (#chk1)
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input checked="checked" data-toggle="#checkboxToggle1" class="checked" type="checkbox" value="">
Custom appearance checkbox checked at page load <br/><i>with linked element visibility toggle by id</i>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input class="checkbox" data-toggle=".checkboxToggle2" type="checkbox" value="">
Custom appearance checkbox unchecked on page load<br/><i>with linked element visibility toggle by class</i>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input checked="checked" disabled="disabled" class="checkbox" type="checkbox" value="">
Disabled custom appearance checkbox <br/><i>checked on page load</i>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input class="checkbox" disabled="disabled" type="checkbox" value="">
Disabled custom appearance checkbox <br/><i>unchecked on page load</i>
</label>
</div>
<div class="checkbox"><label><input checked="checked" type="checkbox" value="">Native checkbox: Checked Enabled</label></div>
<div class="checkbox"><label><input type="checkbox" value="">Native Checkbox: Unchecked Enabled</label></div>
<div class="checkbox"><label><input checked="checked" disabled="disabled" type="checkbox" value="">Native Checkbox: Checked Disabled</label></div>
<div class="checkbox"><label><input disabled="disabled" type="checkbox" value="">Native Checkbox: Unchecked Disabled</label></div>
<br/>
<h5>Sample element visibility toggle bound to checkboxes</h5>
<div id="checkboxToggle1" class="alert bg-info" style="display: none;">This message's visibility toggles by id with a checkbox above.</div>
<div class="checkboxToggle2 alert bg-warning" style="display: none;">This message's visibility toggles by class with a checkbox above.</div>
<div class="checkboxToggle2 alert bg-success" style="display: none;">This message's visibility toggles by class with a checkbox above.</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<button type="button" class="btn btn-default" id="btnChkToggle">toggle #chk1</button>
<button type="button" class="btn btn-default" id="btnChkDisable">disable #chk1</button>
<button type="button" class="btn btn-default" id="btnChkEnable">enable #chk1</button>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Combobox</h2>
<h5>Has selected item</h5>
<div style="max-width: 300px;">
<div id="MyComboboxWithSelected" class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3" data-selected="true"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
<h5>No selected item</h5>
<div style="max-width: 300px;">
<div id="MyCombobox" class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<input id="btnComboboxGetSelectedItem" type="button" class="btn btn-default" value="log item"/>
<input id="btnComboboxSelectByValue" type="button" class="btn btn-default" value="set by value (1)"/>
<input id="btnComboboxSelectByIndex" type="button" class="btn btn-default" value="set by element index (1)"/>
<input id="btnComboboxSelectByText" type="button" class="btn btn-default" value="set by text (Four)"/>
</div>
<div class="btn-group">
<input id="btnComboboxSelectBySelector" type="button" class="btn btn-default"
value="set by CSS selector li[data-fizz=buzz] (6)"/>
<input id="btnComboboxDisable" type="button" class="btn btn-default" value="disable"/>
<input id="btnComboboxEnable" type="button" class="btn btn-default" value="enable"/>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Datepicker</h2>
<div class="row">
<div class="col-lg-4">
<div class="datepicker input-group dropdown" id="datepicker1">
<input type="text" class="form-control" data-toggle="dropdown" />
<!-- this must go aver the input. if button is present, it must go in between or the input group will not look right -->
<div class="dropdown-menu dropdown-menu-right"></div>
<span class="input-group-btn" data-toggle="dropdown">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<span class="btn btn-default" id="datepicker-enable">enable</span>
<span class="btn btn-default" id="datepicker-disabled">disable</span>
<span class="btn btn-default" id="datepicker-logFormattedDate">log formatted date</span>
<span class="btn btn-default" id="datepicker-logDateObj">log date object</span>
<span class="btn btn-default" id="datepicker-logDateUnix">log unix date</span>
<span class="btn btn-default" id="datepicker-setDate">set date 7 days ahead (will log new value)</span>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Infinite Scroll</h2>
<div class="infinitescroll" id="MyInfiniteScroll1" style="border: 1px solid black; float: left; height: 500px; margin-right: 50px; max-width: 300px;">
<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
</div>
<div class="infinitescroll" id="MyInfiniteScroll2" style="border: 1px solid black; float: left; height: 500px; max-width: 300px;">
<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
</div>
</div>
<div class="clearfix">
<h2>Loader</h2>
<div>
<div class="loader"></div>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Pillbox</h2>
<div id="MyPillbox" class="pillbox">
<ul class="clearfix pill-group">
<li class="btn btn-default pill" data-value="foo">
<span>Item 1</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn pill btn-success">
<span>Item 2</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn pill btn-warning" data-value="three-value">
<span>Item 3</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn pill btn-danger">
<span>Item 4</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn pill btn-info">
<span>Item 5</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<div class="pillbox-input-wrap btn-group">
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</div>
</ul>
</div>
<h5>Empty Pillbox</h5>
<div id="MyPillboxEmpty" class="pillbox">
<ul class="clearfix pill-group">
<div class="pillbox-input-wrap btn-group">
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</div>
</ul>
</div>
<br/>
<h5 style="clear:both;">Sample Methods</h5>
<div class="btn-group">
<input type="button" class="btn btn-default" id="btnAdd" value="add">
<input type="button" class="btn btn-default" id="btnRemoveByValue" value="remove by value">
<input type="button" class="btn btn-default" id="btnRemoveBySelector" value="remove by selector">
<input type="button" class="btn btn-default" id="btnRemoveByText" value="remove by text">
<input type="button" class="btn btn-default" id="btnItems" value="log items to console">
</div>
<hr/>
</div>
<div class="clearfix" style="background: #f3f3f3; padding: 5px;">
<h2>Placard</h2>
<div class="placard">
<div class="placard-popup"></div>
<input class="form-control placard-field" readonly="readonly" type="text"/>
</div>
<br/>
<div class="placard" data-ellipsis="true">
<div class="placard-popup"></div>
<div class="placard-header"><h5>Header</h5></div>
<input class="form-control placard-field" readonly="readonly" type="text"/>
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
</div>
</div>
<br/>
<div class="placard" data-ellipsis="true">
<div class="placard-popup"></div>
<div class="placard-header"><h5>Header</h5></div>
<textarea class="form-control placard-field glass" readonly="readonly"></textarea>
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
</div>
</div>
</div>
<div class="clearfix radio-container">
<h2>Radio</h2>
<div class="radio">
<label class="radio-custom" id="lbl1">
<input id="radio1" checked="checked" data-toggle="#radioToggle1" name="radio1a" type="radio">
Custom appearance radio selected on page load <br/><i>with linked element visibility toggle by id</i>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl2">
<input id="radio2" data-toggle=".radioToggle2" name="radio1a" type="radio">
Custom appearance radio not selected on page load <br/><i>with linked element visibility toggle by class</i>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl3">
<input id="radio3" checked="checked" disabled="disabled" name="radio1b" type="radio">
Disabled custom appearance radio selected on page load
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl4">
<input id="radio4" disabled="disabled" name="radio1b" type="radio">
Disabled custom appearance radio not selected on page load
</label>
</div>
<div class="radio"><label><input type="radio" name="radio2a" checked="checked">Native: Checked Enabled</label></div>
<div class="radio"><label><input type="radio" name="radio2a">Native: Unchecked Enabled</label></div>
<div class="radio"><label><input type="radio" name="radio2b" checked="checked" disabled="disabled">Native: Checked Disabled</label></div>
<div class="radio"><label><input type="radio" name="radio2b" disabled="disabled">Native: Unchecked Disabled</label></div>
<br/>
<h5>Sample element visibility toggle bound to radios</h5>
<div id="radioToggle1" class="alert bg-info" style="display: none;">This message's visibility toggles by id with a radio above.</div>
<div class="radioToggle2 alert bg-warning" style="display: none;">This message's visibility toggles by class with a radio above.</div>
<div class="radioToggle2 alert bg-success" style="display: none;">This message's visibility toggles by class with a radio above.</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<button type="button" class="btn btn-default" id="btnRadioDisable">disable name=radio1a</button>
<button type="button" class="btn btn-default" id="btnRadioEnable">enable name=radio1a</button>
<button type="button" class="btn btn-default" id="btnRadioDisableAll">disable all</button>
<button type="button" class="btn btn-default" id="btnRadioEnableAll">enable all</button>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Repeater</h2>
<div class="repeater" data-staticheight="500px" id="MyRepeater">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Awesome Repeater</span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</div>
<div class="repeater-header-right">
<div class="btn-group selectlist repeater-filters" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">&nbsp;</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-selected="true"><a href="#">All</a></li>
<li data-value="some"><a href="#">Some</a></li>
<li data-value="others"><a href="#">Others</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
</label>
</div>
</div>
</div>
<div class="repeater-viewport">
<div class="repeater-canvas"></div>
<div class="loader repeater-loader">
<i></i><i></i><i></i><i></i>
<!--[if lt IE 10]><script type="text/javascript">window.fuelux_loader.scan();</script><![endif]-->
</div>
</div>
<div class="repeater-footer">
<div class="repeater-footer-left">
<div class="repeater-itemization">
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
<div class="btn-group selectlist" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">&nbsp;</span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="5"><a href="#">5</a></li>
<li data-value="10" data-selected="true"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
<li data-value="100"><a href="#">100</a></li>
</ul>
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<span>Per Page</span>
</div>
</div>
<div class="repeater-footer-right">
<div class="repeater-pagination">
<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
<span>Page</span>
<div class="repeater-primaryPaging active">
<div class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right"></ul>
</div>
</div>
</div>
<input type="text" class="form-control repeater-secondaryPaging">
<span>of <span class="repeater-pages"></span></span>
<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix">
<h2>Scheduler</h2>
<div id="MyScheduler" class="form-horizontal container-fluid scheduler" role="form">
<div class="form-group scheduler-start">
<label class="col-sm-4 control-label scheduler-label">Start Date</label>
<div class="col-sm-10 row">
<div class="col-sm-8 form-group">
<div class="input-group datepicker scheduler-start-date">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"><span class="sr-only">View Calendar</span></span>
</button>
<div class="dropdown-menu pull-right" role="menu"></div>
</div>
</div>
</div>
<div class="col-sm-4 form-group">
<div class="input-group combobox scheduler-start-time">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">12:00 AM</a></li>
<li><a href="#">12:30 AM</a></li>
<li><a href="#">1:00 AM</a></li>
<li><a href="#">1:30 AM</a></li>
<li><a href="#">2:00 AM</a></li>
<li><a href="#">2:30 AM</a></li>
<li><a href="#">3:00 AM</a></li>
<li><a href="#">3:30 AM</a></li>
<li><a href="#">4:00 AM</a></li>
<li><a href="#">4:30 AM</a></li>
<li><a href="#">5:00 AM</a></li>
<li><a href="#">5:30 AM</a></li>
<li><a href="#">6:00 AM</a></li>
<li><a href="#">6:30 AM</a></li>
<li><a href="#">7:00 AM</a></li>
<li><a href="#">7:30 AM</a></li>
<li><a href="#">8:00 AM</a></li>
<li><a href="#">8:30 AM</a></li>
<li><a href="#">9:00 AM</a></li>
<li><a href="#">9:30 AM</a></li>
<li><a href="#">10:00 AM</a></li>
<li><a href="#">10:30 AM</a></li>
<li><a href="#">11:00 AM</a></li>
<li><a href="#">11:30 AM</a></li>
<li><a href="#">12:00 PM</a></li>
<li><a href="#">12:30 PM</a></li>
<li><a href="#">1:00 PM</a></li>
<li><a href="#">1:30 PM</a></li>
<li><a href="#">2:00 PM</a></li>
<li><a href="#">2:30 PM</a></li>
<li><a href="#">3:00 PM</a></li>
<li><a href="#">3:30 PM</a></li>
<li><a href="#">4:00 PM</a></li>
<li><a href="#">4:30 PM</a></li>
<li><a href="#">5:00 PM</a></li>
<li><a href="#">5:30 PM</a></li>
<li><a href="#">6:00 PM</a></li>
<li><a href="#">6:30 PM</a></li>
<li><a href="#">7:00 PM</a></li>
<li><a href="#">7:30 PM</a></li>
<li><a href="#">8:00 PM</a></li>
<li><a href="#">8:30 PM</a></li>
<li><a href="#">9:00 PM</a></li>
<li><a href="#">9:30 PM</a></li>
<li><a href="#">10:00 PM</a></li>
<li><a href="#">10:30 PM</a></li>
<li><a href="#">11:00 PM</a></li>
<li><a href="#">11:30 PM</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row form-group scheduler-timezone">
<label class="col-sm-2 control-label scheduler-label">Timezone</label>
<div class="col-xs-12 col-sm-8 col-md-6 col-md-4">
<div data-resize="auto" class="btn-group selectlist">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label" style="width: 67px;">(GMT-06:00) Central Standard Time</span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-name="Central Standard Time (no DST)" data-offset="-06:00"><a href="#">(GMT-06:00) Central Standard Time</a></li>
<li data-name="Morocco Standard Time" data-offset="+00:00"><a href="#">(GMT) Casablanca *</a></li>
<li data-name="GMT Standard Time" data-offset="+00:00"><a href="#">(GMT) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London *</a></li>
<li data-name="Greenwich Standard Time" data-offset="+00:00"><a href="#">(GMT) Monrovia, Reykjavik</a></li>
<li data-name="W. Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna *</a></li>
<li data-name="Central Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague *</a></li>
<li data-name="Romance Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris *</a></li>
<li data-name="Central European Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb *</a></li>
<li data-name="W. Central Africa Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) West Central Africa</a></li>
<li data-name="Jordan Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Amman *</a></li>
<li data-name="GTB Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Athens, Bucharest, Istanbul *</a></li>
<li data-name="Middle East Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Beirut *</a></li>
<li data-name="Egypt Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Cairo *</a></li>
<li data-name="South Africa Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Harare, Pretoria</a></li>
<li data-name="FLE Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius *</a></li>
<li data-name="Israel Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Jerusalem *</a></li>
<li data-name="E. Europe Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Minsk *</a></li>
<li data-name="Namibia Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Windhoek *</a></li>
<li data-name="Arabic Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Baghdad *</a></li>
<li data-name="Arab Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Kuwait, Riyadh</a></li>
<li data-name="Russian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Moscow, St. Petersburg, Volgograd *</a></li>
<li data-name="E. Africa Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Nairobi</a></li>
<li data-name="Georgian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Tbilisi</a></li>
<li data-name="Iran Standard Time" data-offset="+03:30"><a href="#">(GMT+03:30) Tehran *</a></li>
<li data-name="Arabian Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Abu Dhabi, Muscat</a></li>
<li data-name="Azerbaijan Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Baku *</a></li>
<li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Caucasus Standard Time</a></li>
<li data-name="Mauritius Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Port Louis *</a></li>
<li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Yerevan</a></li>
<li data-name="Afghanistan Standard Time" data-offset="+04:30"><a href="#">(GMT+04:30) Kabul</a></li>
<li data-name="Ekaterinburg Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Ekaterinburg *</a></li>
<li data-name="Pakistan Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Islamabad, Karachi *</a></li>
<li data-name="West Asia Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Tashkent</a></li>
<li data-name="India Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</a></li>
<li data-name="Sri Lanka Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Sri Jayawardenepura</a></li>
<li data-name="Nepal Standard Time" data-offset="+05:45"><a href="#">(GMT+05:45) Kathmandu</a></li>
<li data-name="N. Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Almaty, Novosibirsk *</a></li>
<li data-name="Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Astana, Dhaka</a></li>
<li data-name="Myanmar Standard Time" data-offset="+06:00"><a href="#">(GMT+06:30) Yangon (Rangoon)</a></li>
<li data-name="SE Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Bangkok, Hanoi, Jakarta</a></li>
<li data-name="North Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Krasnoyarsk *</a></li>
<li data-name="China Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</a></li>
<li data-name="North Asia East Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Irkutsk, Ulaan Bataar *</a></li>
<li data-name="Singapore Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Kuala Lumpur, Singapore</a></li>
<li data-name="W. Australia Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Perth *</a></li>
<li data-name="Taipei Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Taipei</a></li>
<li data-name="Tokyo Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Osaka, Sapporo, Tokyo</a></li>
<li data-name="Korea Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Seoul</a></li>
<li data-name="Yakutsk Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Yakutsk *</a></li>
<li data-name="Cen. Australia Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Adelaide *</a></li>
<li data-name="AUS Central Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Darwin</a></li>
<li data-name="E. Australia Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Brisbane</a></li>
<li data-name="AUS Eastern Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Canberra, Melbourne, Sydney *</a></li>
<li data-name="West Pacific Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Guam, Port Moresby</a></li>
<li data-name="Tasmania Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Hobart *</a></li>
<li data-name="Vladivostok Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Vladivostok *</a></li>
<li data-name="Central Pacific Standard Time" data-offset="+11:00"><a href="#">(GMT+11:00) Magadan, Solomon Is., New Caledonia</a></li>
<li data-name="New Zealand Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Auckland, Wellington *</a></li>
<li data-name="Fiji Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</a></li>
<li data-name="Tonga Standard Time" data-offset="+12:00"><a href="#">(GMT+13:00) Nukualofa</a></li>
<li data-name="Azores Standard Time" data-offset="+12:00"><a href="#">(GMT-01:00) Azores *</a></li>
<li data-name="Cape Verde Standard Time" data-offset="-01:00"><a href="#">(GMT-01:00) Cape Verde Is.</a></li>
<li data-name="Mid-Atlantic Standard Time" data-offset="-02:00"><a href="#">(GMT-02:00) Mid-Atlantic *</a></li>
<li data-name="E. South America Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Brasilia *</a></li>
<li data-name="Argentina Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Buenos Aires *</a></li>
<li data-name="SA Western Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Georgetown</a></li>
<li data-name="Greenland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Greenland *</a></li>
<li data-name="Montevideo Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Montevideo *</a></li>
<li data-name="Newfoundland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:30) Newfoundland *</a></li>
<li data-name="Atlantic Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Atlantic Time (Canada) *</a></li>
<li data-name="SA Western Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) La Paz</a></li>
<li data-name="Central Brazilian Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Manaus *</a></li>
<li data-name="Pacific SA Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Santiago *</a></li>
<li data-name="Venezuela Standard Time" data-offset="-04:30"><a href="#">(GMT-04:30) Caracas</a></li>
<li data-name="SA Pacific Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</a></li>
<li data-name="Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Eastern Time (US &amp; Canada) *</a></li>
<li data-name="US Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Indiana (East)</a></li>
<li data-name="Central America Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central America</a></li>
<li data-name="Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central Time (US &amp; Canada) *</a></li>
<li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - New *</a></li>
<li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - Old</a></li>
<li data-name="Canada Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Saskatchewan</a></li>
<li data-name="US Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Arizona</a></li>
<li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - New *</a></li>
<li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - Old</a></li>
<li data-name="Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Mountain Time (US &amp; Canada) *</a></li>
<li data-name="Pacific Standard Time" data-offset="-08:00"><a href="#">(GMT-08:00) Pacific Time (US &amp; Canada) *</a></li>
<li data-name="Pacific Standard Time (Mexico)" data-offset="-08:00"><a href="#">(GMT-08:00) Tijuana, Baja California *</a></li>
<li data-name="Alaskan Standard Time" data-offset="-09:00"><a href="#">(GMT-09:00) Alaska *</a></li>
<li data-name="Hawaiian Standard Time" data-offset="-10:00"><a href="#">(GMT-10:00) Hawaii</a></li>
<li data-name="Samoa Standard Time" data-offset="-11:00"><a href="#">(GMT-11:00) Midway Island, Samoa</a></li>
<li data-name="Dateline Standard Time" data-offset="-12:00"><a href="#">(GMT-12:00) International Date Line West</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="TimeZoneSelectlist" class="hidden hidden-field">
</div>
</div>
</div>
<div class="form-group scheduler-repeat">
<label class="col-sm-2 control-label scheduler-label">Repeat</label>
<div class="col-sm-10">
<div class="repeat-interval">
<div data-resize="auto" class="btn-group selectlist pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">None (run once)</span>
<span class="caret"></span>
<span class="sr-only">None (run once)</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="none"><a href="#">None (run once)</a></li>
<li data-value="hourly" data-text="hour(s)"><a href="#">Hourly</a></li>
<li data-value="daily" data-text="day(s)"><a href="#">Daily</a></li>
<li data-value="weekdays"><a href="#">Weekdays</a></li>
<li data-value="weekly" data-text="week(s)"><a href="#">Weekly</a></li>
<li data-value="monthly" data-text="month(s)"><a href="#">Monthly</a></li>
<li data-value="yearly"><a href="#">Yearly</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
</div>
<div class="repeat-interval-panel">
<div class="repeat-interval-pretext">every</div>
<div class="spinbox">
<input type="number" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
<div class="repeat-interval-text">day(s)</div>
</div>
</div>
<div class="recurrence-panel scheduler-weekly">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default" data-value="SU">Sun</button>
<button type="button" class="btn btn-default" data-value="MO">Mon</button>
<button type="button" class="btn btn-default" data-value="TU">Tue</button>
<button type="button" class="btn btn-default" data-value="WE">Wed</button>
<button type="button" class="btn btn-default" data-value="TH">Thu</button>
<button type="button" class="btn btn-default" data-value="FR">Fri</button>
<button type="button" class="btn btn-default" data-value="SA">Sat</button>
</div>
</div>
<div class="recurrence-panel scheduler-monthly">
<div class="scheduler-monthly-date form-group">
<div class="radio pull-left"><label class="radio-custom"><input type="radio" checked="checked" name="scheduler-month"> on day</label></div>
<div data-resize="auto" class="btn-group selectlist pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">1</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
<li data-value="1"><a href="#">1</a></li>
<li data-value="2"><a href="#">2</a></li>
<li data-value="3"><a href="#">3</a></li>
<li data-value="4"><a href="#">4</a></li>
<li data-value="5"><a href="#">5</a></li>
<li data-value="6"><a href="#">6</a></li>
<li data-value="7"><a href="#">7</a></li>
<li data-value="8"><a href="#">8</a></li>
<li data-value="9"><a href="#">9</a></li>
<li data-value="10"><a href="#">10</a></li>
<li data-value="11"><a href="#">11</a></li>
<li data-value="12"><a href="#">12</a></li>
<li data-value="13"><a href="#">13</a></li>
<li data-value="14"><a href="#">14</a></li>
<li data-value="15"><a href="#">15</a></li>
<li data-value="16"><a href="#">16</a></li>
<li data-value="17"><a href="#">17</a></li>
<li data-value="18"><a href="#">18</a></li>
<li data-value="19"><a href="#">19</a></li>
<li data-value="20"><a href="#">20</a></li>
<li data-value="21"><a href="#">21</a></li>
<li data-value="22"><a href="#">22</a></li>
<li data-value="23"><a href="#">23</a></li>
<li data-value="24"><a href="#">24</a></li>
<li data-value="25"><a href="#">25</a></li>
<li data-value="26"><a href="#">26</a></li>
<li data-value="27"><a href="#">27</a></li>
<li data-value="28"><a href="#">28</a></li>
<li data-value="29"><a href="#">29</a></li>
<li data-value="30"><a href="#">30</a></li>
<li data-value="31"><a href="#">31</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
</div>
</div>
<div class="scheduler-monthly-day form-group">
<div class="radio pull-left"><label class="radio-custom"><input type="radio" checked="checked" name="scheduler-month"> on the</label></div>
<div data-resize="auto" class="btn-group selectlist month-day-pos pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">First</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="1"><a href="#">First</a></li>
<li data-value="2"><a href="#">Second</a></li>
<li data-value="3"><a href="#">Third</a></li>
<li data-value="4"><a href="#">Fourth</a></li>
<li data-value="-1"><a href="#">Last</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
</div>
<div data-resize="auto" class="btn-group selectlist month-days pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">Sunday</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="SU"><a href="#">Sunday</a></li>
<li data-value="MO"><a href="#">Monday</a></li>
<li data-value="TU"><a href="#">Tuesday</a></li>
<li data-value="WE"><a href="#">Wednesday</a></li>
<li data-value="TH"><a href="#">Thursday</a></li>
<li data-value="FR"><a href="#">Friday</a></li>
<li data-value="SA"><a href="#">Saturday</a></li>
<li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a></li>
<li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a></li>
<li data-value="SU,SA"><a href="#">Weekend day</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
</div>
</div>
</div>
<div class="recurrence-panel scheduler-yearly form-group">
<div class="scheduler-yearly-date">
<div class="radio pull-left"><label class="radio-custom"><input type="radio" checked="checked" name="scheduler-year" value="1"> on</label></div>
<div data-resize="auto" class="btn-group selectlist year-month pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">January</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="1"><a href="#">January</a></li>
<li data-value="2"><a href="#">February</a></li>
<li data-value="3"><a href="#">March</a></li>
<li data-value="4"><a href="#">April</a></li>
<li data-value="5"><a href="#">May</a></li>
<li data-value="6"><a href="#">June</a></li>
<li data-value="7"><a href="#">July</a></li>
<li data-value="8"><a href="#">August</a></li>
<li data-value="9"><a href="#">September</a></li>
<li data-value="10"><a href="#">October</a></li>
<li data-value="11"><a href="#">November</a></li>
<li data-value="12"><a href="#">December</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
</div>
<div data-resize="auto" class="btn-group selectlist year-month-day pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">1</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
<li data-value="1"><a href="#">1</a></li>
<li data-value="2"><a href="#">2</a></li>
<li data-value="3"><a href="#">3</a></li>
<li data-value="4"><a href="#">4</a></li>
<li data-value="5"><a href="#">5</a></li>
<li data-value="6"><a href="#">6</a></li>
<li data-value="7"><a href="#">7</a></li>
<li data-value="8"><a href="#">8</a></li>
<li data-value="9"><a href="#">9</a></li>
<li data-value="10"><a href="#">10</a></li>
<li data-value="11"><a href="#">11</a></li>
<li data-value="12"><a href="#">12</a></li>
<li data-value="13"><a href="#">13</a></li>
<li data-value="14"><a href="#">14</a></li>
<li data-value="15"><a href="#">15</a></li>
<li data-value="16"><a href="#">16</a></li>
<li data-value="17"><a href="#">17</a></li>
<li data-value="18"><a href="#">18</a></li>
<li data-value="19"><a href="#">19</a></li>
<li data-value="20"><a href="#">20</a></li>
<li data-value="21"><a href="#">21</a></li>
<li data-value="22"><a href="#">22</a></li>
<li data-value="23"><a href="#">23</a></li>
<li data-value="24"><a href="#">24</a></li>
<li data-value="25"><a href="#">25</a></li>
<li data-value="26"><a href="#">26</a></li>
<li data-value="27"><a href="#">27</a></li>
<li data-value="28"><a href="#">28</a></li>
<li data-value="29"><a href="#">29</a></li>
<li data-value="30"><a href="#">30</a></li>
<li data-value="31"><a href="#">31</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
</div>
</div>
<div class="scheduler-yearly-day">
<div class="radio pull-left"><label class="radio-custom"><input type="radio" name="scheduler-year" value="2"> on the</label></div>
<div data-resize="auto" class="btn-group selectlist year-month-day-pos pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">First</span>
<span class="caret"></span>
<span class="sr-only">First</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="1"><a href="#">First</a></li>
<li data-value="2"><a href="#">Second</a></li>
<li data-value="3"><a href="#">Third</a></li>
<li data-value="4"><a href="#">Fourth</a></li>
<li data-value="5"><a href="#">Last</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDateSelectlist" class="hidden hidden-field">
</div>
<div data-resize="auto" class="btn-group selectlist year-month-days pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">Sunday</span>
<span class="caret"></span>
<span class="sr-only">Sunday</span>
</button>
<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
<li data-value="SU"><a href="#">Sunday</a></li>
<li data-value="MO"><a href="#">Monday</a></li>
<li data-value="TU"><a href="#">Tuesday</a></li>
<li data-value="WE"><a href="#">Wednesday</a></li>
<li data-value="TH"><a href="#">Thursday</a></li>
<li data-value="FR"><a href="#">Friday</a></li>
<li data-value="SA"><a href="#">Saturday</a></li>
<li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a></li>
<li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a></li>
<li data-value="SU,SA"><a href="#">Weekend day</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
</div>
<div class="scheduler-yearly-day-text">of</div>
<div data-resize="auto" class="btn-group selectlist year-month pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">January</span>
<span class="caret"></span>
<span class="sr-only">January</span>
</button>
<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
<li data-value="1"><a href="#">January</a></li>
<li data-value="2"><a href="#">February</a></li>
<li data-value="3"><a href="#">March</a></li>
<li data-value="4"><a href="#">April</a></li>
<li data-value="5"><a href="#">May</a></li>
<li data-value="6"><a href="#">June</a></li>
<li data-value="7"><a href="#">July</a></li>
<li data-value="8"><a href="#">August</a></li>
<li data-value="9"><a href="#">September</a></li>
<li data-value="10"><a href="#">October</a></li>
<li data-value="11"><a href="#">November</a></li>
<li data-value="12"><a href="#">December</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
</div>
</div>
</div>
</div>
</div>
<div class="form-group scheduler-end">
<label class="col-sm-2 control-label scheduler-label">End</label>
<div class="col-sm-10 row">
<div class="col-sm-3 form-group">
<div data-resize="auto" class="btn-group selectlist end-options pull-left">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="selected-label">Never</span>
<span class="caret"></span>
<span class="sr-only">Never</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="never"><a href="#">Never</a></li>
<li data-value="after"><a href="#">After</a></li>
<li data-value="date"><a href="#">On date</a></li>
</ul>
<input type="text" aria-hidden="true" readonly="readonly" name="EndSelectlist" class="hidden hidden-field">
</div>
</div>
<div class="col-sm-3 form-group end-option-panel end-after pull-left">
<div class="spinbox">
<input type="number" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
<div class="col-sm-8 form-group end-option-panel end-on-date pull-left">
<div class="input-group datepicker">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"><span class="sr-only">View Calendar</span></span>
</button>
<div class="dropdown-menu pull-right" role="menu"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<input id="schedulerEnableBtn" type="button" class="btn btn-default" value="enable" />
<input id="schedulerDisableBtn" type="button" class="btn btn-default" value="disable" />
<input id="schedulerLogValueBtn" type="button" class="btn btn-default" value="log value" />
<input id="schedulerSetValueBtn" type="button" class="btn btn-default" value="set value to the following schedule" />
</div>
<br/>
<br/>
<pre>startDateTime: '2014-03-31T03:23+02:00',
timeZone: {
name: 'Namibia Standard Time',
offset: '+02:00'
},
recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'</pre>
<hr/>
</div>
<div class="clearfix">
<h2>Search</h2>
<form class="search-form" role="search">
<div id="MySearch" class="search input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</form>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<button type="button" class="btn btn-default" id="btnSearchDisable" value="disable">disable</button>
<button type="button" class="btn btn-default" id="btnSearchEnable" value="enable">enable</button>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Spinbox</h2>
<h5>Without Default</h5>
<div class="clearfix">
<div id="MySpinbox" class="spinbox">
<input type="text" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
<h5>With Default</h5>
<div class="clearfix">
<div id="MySpinboxWithDefault" class="spinbox">
<input type="text" value="3" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<input id="enableSpinbox" type="button" class="btn btn-default" value="enable"/>
<input id="disableSpinbox" type="button" class="btn btn-default" value="disable first spinbox"/>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Selectlist</h2>
<div id="MySelectlist" class="btn-group selectlist" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">&nbsp;</span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2" data-selected="true"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
</ul>
<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<br/>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<input id="getSelectedItem" type="button" class="btn btn-default" value="log selected item/value"/>
<input id="selectByValue" type="button" class="btn btn-default" value="set by value (3)"/>
<input id="selectByIndex" type="button" class="btn btn-default" value="set by element index (zero-based) ('4')"/>
</div>
<div class="btn-group">
<input id="selectByText" type="button" class="btn btn-default" value="set by text ('One')"/>
<input id="selectBySelector" type="button" class="btn btn-default" value="set by CSS selector ('li[data-fizz=buzz]')"/>
<input id="enableSelectlist" type="button" class="btn btn-default" value="enable"/>
<input id="disableSelectlist" type="button" class="btn btn-default" value="disable"/>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Tree</h2>
<div id="ex-tree" class="tree">
<div class="tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="glyphicon glyphicon-folder-close"></i>
<div class="tree-folder-name"></div>
</div>
<div class="tree-folder-content"></div>
<div class="tree-loader" style="display:none">
<!--Place your loading HTML here-->
Loading...
</div>
</div>
<div class="tree-item" style="display:none;">
<i class="glyphicon tree-dot"></i>
<div class="tree-item-name"></div>
</div>
</div>
<div id="ex-tree-folder" class="tree tree-folder-select" style="margin-top:10px;">
<div class="tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="tree-triangle-right"></i>
<i class="glyphicon glyphicon-folder-close"></i>
</div>
<div class="tree-folder-name"></div>
<div class="tree-folder-content"></div>
<div class="tree-loader" style="display:none">
<!--Place your loading HTML here-->
Loading...
</div>
</div>
</div>
<hr/>
</div>
<div class="clearfix">
<h2>Wizard</h2>
<div id="MyWizard" class="wizard">
<ul class="steps">
<li class="active" data-step="1"><span class="badge badge-info">1</span>Campaign<span class="chevron"></span></li>
<li data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span></li>
<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span></li>
<li data-step="4"><span class="badge">4</span>Preview<span class="chevron"></span></li>
<li data-step="5"><span class="badge">5</span>Send<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<div class="step-content">
<div class="step-pane active sample-pane alert" data-step="1">
<h4>Setup Campaign</h4>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p>
</div>
<div class="step-pane sample-pane bg-info alert" data-step="2">
<h4>Choose Recipients</h4>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens. </p>
</div>
<div class="step-pane sample-pane bg-danger alert" data-step="3">
<h4>Design Template</h4>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
</div>
<div class="step-pane sample-pane bg-warning alert" data-step="4">
<h4>Preview Message</h4>
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
<p>Ja­cama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
</div>
<div class="step-pane sample-pane bg-success alert" data-step="5">
<h4>Send Message</h4>
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
</div>
</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
<input type="button" class="btn btn-default" id="btnWizardPrev" value="prev">
<input type="button" class="btn btn-default" id="btnWizardNext" value="next">
<input type="button" class="btn btn-default" id="btnWizardStep" value="log current step index">
<input type="button" class="btn btn-default" id="btnWizardSetStep" value="jump to step 3 (recipients)">
<input type="button" class="btn btn-default" id="btnWizardAddSteps" value="add step (setup)">
<input type="button" class="btn btn-default" id="btnWizardRemoveStep" value="remove step (preview)">
</div>
<hr/>
<br/>
<br/>
<div id="MyWizardPreviousStepDisabled" class="wizard" data-restrict="previous">
<ul class="steps">
<li class="active" data-step="1"><span class="badge badge-info">1</span>Campaign<span class="chevron"></span></li>
<li data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span></li>
<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span></li>
<li data-step="4"><span class="badge">4</span>Preview<span class="chevron"></span></li>
<li data-step="5"><span class="badge">5</span>Send<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<div class="step-content">
<div class="step-pane active sample-pane alert" data-step="1">
<h4>Setup Campaign</h4>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p>
</div>
<div class="step-pane sample-pane bg-info alert" data-step="2">
<h4>Choose Recipients</h4>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens. </p>
</div>
<div class="step-pane sample-pane bg-danger alert" data-step="3">
<h4>Design Template</h4>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
</div>
<div class="step-pane sample-pane bg-warning alert" data-step="4">
<h4>Preview Message</h4>
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
<p>Ja­cama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
</div>
<div class="step-pane sample-pane bg-success alert" data-step="5">
<h4>Send Message</h4>
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
</div>
</div>
<br/>
<br/>
<div id="MyWizardWithSpaces" class="wizard">
<ul class="steps">
<li class="active" data-step="1"><span class="badge badge-info">1</span>This is step 1<span class="chevron"></span></li>
<li data-step="2"><span class="badge">2</span>This is step 2<span class="chevron"></span></li>
<li data-step="3"><span class="badge">3</span>This is step 3<span class="chevron"></span></li>
<li data-step="4"><span class="badge">4</span>This is step 4<span class="chevron"></span></li>
<li data-step="5"><span class="badge">5</span>This is step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
<button class="btn btn-default btn-next" data-last="Finish">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<div class="step-content">
<div class="step-pane active sample-pane alert" data-step="1">
<h4>Setup Campaign</h4>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p>
</div>
<div class="step-pane sample-pane bg-info alert" data-step="2">
<h4>Choose Recipients</h4>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens. </p>
</div>
<div class="step-pane sample-pane bg-danger alert" data-step="3">
<h4>Design Template</h4>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
</div>
<div class="step-pane sample-pane bg-warning alert" data-step="4">
<h4>Preview Message</h4>
<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
<p>Ja­cama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
</div>
<div class="step-pane sample-pane bg-success alert" data-step="5">
<h4>Send Message</h4>
<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>
</div>
</div>
</div>
<div class="clearfix">
<h2>Dropdown Auto Flip Menu</h2>
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-flip="auto" >
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" >
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div><!-- container -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink