<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39">
<title>Support</title>
<!-- Force IE to turn off past version compatibility mode and use current version mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<!-- Get the width of the users display-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Text encoded as UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- icons -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- bootstrap -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default">
<!-- theme -->
<link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme">
<style>
body {background-color: white;}
table#TixManagementContent {background-color: #fff;}
.navbar-btn.navbar-left {margin-left: 10px;}
.navbar-btn.navbar-right {margin-right: 10px;}
</style>
</head>
<body>
<!-- start header -->
<center>
<table width="990px" id="TixManagementContent" class="TixManagementContent" background-color:""red"">
<tbody>
<tr>
<td align="left">
<div id="boxed-page">
<div id="wrapper" class="bootstrap">
<!-- end header -->
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class=" navbar-btn navbar-left">
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-justify"></span>
<span class="label-icon">Menu</span>
</button>
</div>
<div class=" navbar-btn navbar-left">
<button class="btn btn-default">
<span class="glyphicon glyphicon-dashboard"></span>
<span class="label-icon">Dashboard</span>
</button>
</div>
<div class="nav navbar-nav">
<form class="navbar-form navbar-search" role="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-outline btn-search dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-search"></span>
<span class="label-icon">Search</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" role="menu">
<li>
<a href="#" data-width="widthUser">
<span class="glyphicon glyphicon-user"></span>
<span class="label-icon">Search By User</span>
</a>
</li>
<li>
<a href="#" data-width="widthOrg">
<span class="glyphicon glyphicon-book"></span>
<span class="label-icon">Search By Organization</span>
</a>
</li>
<li>
<a href="#" data-width="widthSearch">
<span class="glyphicon glyphicon-search"></span>
<span class="label-icon">Search</span>
</a>
</li>
</ul>
</div>
<div id="search-text-input" class="widthSearch">
<input type="text" class="form-control">
</div>
<div class="input-group-btn">
<button class="btn btn-default btn-outline">
GO
</button>
</div>
</div>
</form>
</div>
<div class="navbar-btn navbar-right">
<div class="dropdown">
<button class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<span class="label-icon">Preferences</span>
</button>
<ul class="dropdown-menu" style="width:300px; padding:0px;">
<li>
<form class="form-horizontal" id="preferences" action="" method="post" accept-charset="utf-8">
<div class="panel panel-default" id="preferences" style="margin:0px;">
<div class="panel-heading">
<span class="glyphicon glyphicon-wrench"></span>
<span class="panel-label">User Preferences</span>
</div>
<div class="panel-body">
<div class="form-group">
<label for="theme_name"class="col-lg-6 control-label" style="font-color:#000000">
Theme
</label>
<div class="col-lg-6">
<select class="form-control" id="theme_name" name="theme_name">
<option value="amelia"> Amelia </option>
<option value="bootstrap"> Default </option>
<option value="cerulean"> Cerulean </option>
<option value="cosmo"> Cosmo </option>
<option value="cyborg"> Cyborg </option>
<option selected value="flatly"> Flatly </option>
<option value="journal"> Journal </option>
<option value="readable"> Readable </option>
<option value="simplex"> Simplex </option>
<option value="slate"> Slate </option>
<option value="spacelab"> Spacelab </option>
<option value="united"> United </option>
<option value="yeti"> Yeti </option>
<option value="whiteplum"> WhitePlum </option>
</select>
</div>
</div>
<div class="form-group">
<label for="background_color" class="col-lg-6 control-label" style="font-color:#000000">
Background
</label>
<div class="col-lg-6">
<select class="form-control" id="background_color" name="background_color">
<option selected value="#FFFFFF"> White </option>
<option value="#C0C0C0"> Silver </option>
<option value="#808080"> Gray </option>
<option value="#000000"> Black </option>
<option value="#FF0000"> Red </option>
<option value="#800000"> Maroon </option>
<option value="#FFFF00"> Yellow </option>
<option value="#808000"> Olive </option>
<option value="#00FF00"> Lime </option>
<option value="#008000"> Green </option>
<option value="#00FFFF"> Aqua </option>
<option value="#008080"> Teal </option>
<option value="#0000FF"> Blue </option>
<option value="#000080"> Navy </option>
<option value="#FF00FF"> Fuchsia </option>
<option value="#800080"> Purple </option>
<option value="#e0e0e0"> Tix </option>
</select>
</div>
</div>
<div class="form-group">
<label for="text_color" class="col-lg-6 control-label" style="font-color:#000000">
Text Color
</label>
<div class="col-lg-6">
<select class="form-control" id="text_color" name="text_color">
<option value="#FFFFFF"> White </option>
<option value="#C0C0C0"> Silver </option>
<option value="#808080"> Gray </option>
<option selected value="#000000"> Black </option>
<option value="#FF0000"> Red </option>
<option value="#800000"> Maroon </option>
<option value="#FFFF00"> Yellow </option>
<option value="#808000"> Olive </option>
<option value="#00FF00"> Lime </option>
<option value="#008000"> Green </option>
<option value="#00FFFF"> Aqua </option>
<option value="#008080"> Teal </option>
<option value="#0000FF"> Blue </option>
<option value="#000080"> Navy </option>
<option value="#FF00FF"> Fuchsia </option>
<option value="#800080"> Purple </option>
</select>
</div>
</div>
<div class="form-group">
<label for="text_size" class="col-lg-6 control-label" style="font-color:#000000">
Text size
</label>
<div class="col-lg-6">
<select class="form-control" id="text_size" name="text_size">
<option value="32">32px</option>
<option value="24">24px</option>
<option value="20">20px</option>
<option value="16">16px</option>
<option value="12" selected>12px</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-6 control-label" style="font-color:#000000">
Icon Label
</label>
<div class="col-lg-6">
<label class="radio-inline">
<input id="inlineradio1" name="display_label" value="" type="radio">Show
</label>
<label class="radio-inline">
<input id="inlineradio2" name="display_label" value="hide" type="radio">Hide
</label>
</div>
</div>
</div>
<div class="panel-footer">
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" style="width:80px;">Update</button>
<button type="submit" class="btn btn-default" style="width:80px;">Reset</button>
</div>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
<div class="navbar-btn navbar-right">
<div class="dropdown">
<button class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-bell"></span>
<span class="label-icon">Alerts</span>
</button>
<ul class="dropdown-menu" style="width:500px; padding:0px;">
<li>
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-money"></i> Recent Transactions</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th>Order # <i class="fa fa-sort"></i></th>
<th>Order Date <i class="fa fa-sort"></i></th>
<th>Name <i class="fa fa-sort"></i></th>
<th>Amount <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td>3326</td>
<td>10/21/2013</td>
<td>3:29 PM</td>
<td>$321.33</td>
</tr>
<tr>
<td>3325</td>
<td>10/21/2013</td>
<td>3:20 PM</td>
<td>$234.34</td>
</tr>
<tr>
<td>3324</td>
<td>10/21/2013</td>
<td>3:03 PM</td>
<td>$724.17</td>
</tr>
<tr>
<td>3323</td>
<td>10/21/2013</td>
<td>3:00 PM</td>
<td>$23.71</td>
</tr>
<tr>
<td>3322</td>
<td>10/21/2013</td>
<td>2:49 PM</td>
<td>$8345.23</td>
</tr>
<tr>
<td>3321</td>
<td>10/21/2013</td>
<td>2:23 PM</td>
<td>$245.12</td>
</tr>
<tr>
<td>3320</td>
<td>10/21/2013</td>
<td>2:15 PM</td>
<td>$5663.54</td>
</tr>
<tr>
<td>3319</td>
<td>10/21/2013</td>
<td>2:13 PM</td>
<td>$943.45</td>
</tr>
</tbody>
</table>
</div>
<div class="text-right">
<a href="#">View All Transactions <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
</div><!-- /#page-wrapper -->
</div><!-- /#wrapper -->
</li>
</ul>
</div>
</div>
</nav>
<!-- /.navbar-collapse -->
</div>
<div class="row">
<div class="well">
<h1><span class="current-theme">Bootstrap</span></h1>
<p>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-inverse">Inverse</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-default">Default</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-outline">Primary</button>
<button type="button" class="btn btn-lg btn-outline btn-inverse">Inverse</button>
<button type="button" class="btn btn-lg btn-outline btn-info">Info</button>
<button type="button" class="btn btn-lg btn-outline btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-outline btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-outline btn-success">Success</button>
<button type="button" class="btn btn-lg btn-outline btn-default">Default</button>
</p>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<span class="glyphicon glyphicon-dash"></span> Organization Dashboard
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;">
<div id="box_1"><span class="fa fa-clock-o fa-3x"></span></div>
<div id="box_2" class="icon-label">Time Zone</div>
<button class="btn btn-default btn-block">Pacific</button>
</a>
</div>
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;">
<div id="box_1"><span class="fa fa-desktop fa-3x"></span></div>
<div id="box_2" class="icon-label">Platform</div>
<button class="btn btn-default btn-block">Tix2</button>
</a>
</div>
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;">
<div id="box_1"><span class="fa fa-shopping-cart fa-3x"></span></div>
<div id="box_2" class="icon-label">Gateway</div>
<button class="btn btn-default btn-block">Authorize.net</button>
</a>
</div>
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;">
<div id="box_1"><span class="fa fa-print fa-3x"></span></div>
<div id="box_2" class="icon-label">Fullfilment</div>
<button class="btn btn-default btn-block">Yes</button>
</a>
</div>
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;">
<div id="box_1"><span class="fa fa-suitcase fa-3x"></span></div>
<div id="box_2" class="icon-label">Sales Rep</div>
<button class="btn btn-default btn-block">Silvia Mahoney</button>
</a>
</div>
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;">
<div id="box_1"><span class="fa fa-user fa-3x"></span></div>
<div id="box_2" class="icon-label">Contact</div>
<button class="btn btn-default btn-block">Steve Moore</button>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- start footer -->
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
<!-- end footer -->
</body>
@import url("//netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
body {background-color: white;}
.btn-outline
{
background-color: transparent;
color: inherit;
transition: all .5s;
}
.btn-inverse
{
background-color: #ffffff;
color: inherit;
transition: all .5s;
}
.btn-primary.btn-outline {
color: #428bca;
}
.btn-success.btn-outline {
color: #5cb85c;
}
.btn-info.btn-outline {
color: #5bc0de;
}
.btn-warning.btn-outline {
color: #f0ad4e;
}
.btn-danger.btn-outline {
color: #d9534f;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover
{
color: #fff;
}
$(function(){
$(".input-group-btn .dropdown-menu li a").click(function(){
var selText = $(this).html();
//working version - for single button //
//$('.btn:first-child').html(selText+'<span class="caret"></span>');
//working version - for multiple buttons //
$(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});
});
function save_settings()
{
localStorage.setItem("background_color" , $( "#background_color" ).val());
localStorage.setItem("text_color", $( "#text_color" ).val());
localStorage.setItem("text_size", $( "#text_size" ).val());
localStorage.setItem("theme_name", $( "#theme_name" ).val());
localStorage.setItem("display_label",$('input[name="display_label"]:checked').val());
apply_preferences_to_page();
}
function load_settings()
{
var background_color = localStorage.getItem( "background_color" );
var text_color = localStorage.getItem( "text_color" );
var text_size = localStorage.getItem( "text_size" );
var theme_name = localStorage.getItem( "theme_name" );
var display_label = localStorage.getItem( "display_label" );
$("#background_color").val(background_color);
$("#text_color").val(text_color);
$("#text_size").val(text_size);
$("#theme_name").val(theme_name);
$("#display_label").val(display_label);
apply_preferences_to_page();
}
function apply_preferences_to_page()
{
var background_color = localStorage.getItem( "background_color");
var text_color = localStorage.getItem("text_color");
var text_size = localStorage.getItem("text_size");
var theme_name = localStorage.getItem("theme_name");
var display_label = localStorage.getItem("display_label");
$("body").css("backgroundColor",background_color);
$("body").css("color",$("#text_color").val());
$("body").css("fontSize",$("#text_size").val() + "px");
$("body").attr("class",theme_name);
$('link[title="theme"]').attr('href','http://netdna.bootstrapcdn.com/bootswatch/3.0.3/'+theme_name+'/bootstrap.min.css');
$(".current-theme").html(theme_name);
$(".label-filter").html(theme_name);
$(".label-icon").attr("class","label-icon "+display_label);
display_preferences();
}
function display_preferences()
{
//the variable that will hold the results
var dataLog = "";
var i = 0;
//how many items are in the database starting with zero
var logLength = localStorage.length-1;
dataLog = "<thead><tr class='active'><th>Item Name</th><th>Item Data</th></tr></thead><tbody>"
//now we are going to loop through each item in the database
for (i = 0; i <= logLength; i++) {
//lets setup some variables for the key and values
var itemKey = localStorage.key(i);
var itemData = localStorage.getItem(itemKey);
//now that we have the item, lets add it to the table
dataLog += '<tr><td>'+itemKey+'</td><td>'+itemData+'</td></tr>';
}
//if there were no items in the database
if (dataLog == "")
dataLog = '<li class="empty">Log Currently Empty</li>';
//update the ul with the list items
$("#theLog").html(dataLog);
}
$(function()
{
load_settings();
$('form#preferences').submit(function(event){
event.preventDefault();
save_settings();
});
});
</script>
