-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (155 loc) · 7.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Your Dashboard</title>
<meta name="description" content="">
<link rel="shortcut icon" href="about:blank">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header class="navbar navbar-default navbar-static-top visible-sm visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Your Co.</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign out</a></li>
</ul>
</div>
<div class="hidden-xs">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign out</a></li>
</ul>
</div>
</div>
</header>
<div class="container-fluid app">
<div class="col-md-3 col-lg-2 hidden-sm hidden-xs h-100 sidebar default">
<h4 class="brand">Your Co.</h4>
<div class="list-group-nav-header">Tab group heading</div>
<div class="list-group">
<a href="#" class="list-group-item active">
<i class="glyphicon glyphicon-paperclip" aria-hidden="true"></i> Tab 1
</a>
<a href="#" class="list-group-item">
<i class="glyphicon glyphicon-user" aria-hidden="true"></i> Tab 2
</a>
<a href="#" class="list-group-item">
<i class="glyphicon glyphicon-stats" aria-hidden="true"></i> Tab 3
</a>
</div>
<div class="list-group-nav-header">Tab group heading</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="glyphicon glyphicon-paperclip" aria-hidden="true"></i> Tab 4
</a>
<a href="#" class="list-group-item">
<i class="glyphicon glyphicon-user" aria-hidden="true"></i> Tab 5
</a>
<a href="#" class="list-group-item">
<i class="glyphicon glyphicon-stats" aria-hidden="true"></i> Tab 6
</a>
</div>
</div>
<div class="col-md-9 col-lg-10 page-container h-100">
<h3 class="panel-title hidden-sm hidden-xs">Tab Title</h3>
<div class="row">
<div class="col-md-4 col-lg-3">
<h4>Theme</h4>
<p>This setting allows you to customize the appearance of the site, ex. sidebar.</p>
</div>
<div class="col-md-8 col-lg-9">
<form class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2">
<label class="theme">
<div class="sidebar-preview default"></div>
<input type="radio" value="default" name="theme" checked="checked">
Default
</label>
<label class="theme">
<div class="sidebar-preview aubergine"></div>
<input type="radio" value="aubergine" name="theme">
Eggplant
</label>
<label class="theme">
<div class="sidebar-preview work"></div>
<input type="radio" value="work" name="theme">
Tabby
</label>
<label class="theme">
<div class="sidebar-preview blue"></div>
<input type="radio" value="blue" name="theme">
Blue
</label>
<label class="theme">
<div class="sidebar-preview violet"></div>
<input type="radio" value="violet" name="theme">
Violet
</label>
<label class="theme">
<div class="sidebar-preview green"></div>
<input type="radio" value="green" name="theme">
Green
</label>
<label class="theme">
<div class="sidebar-preview grey"></div>
<input type="radio" value="grey" name="theme">
Gray
</label>
<label class="theme">
<div class="sidebar-preview graphite"></div>
<input type="radio" value="graphite" name="theme">
Graphite
</label>
<label class="theme">
<div class="sidebar-preview charcoal"></div>
<input type="radio" value="charcoal" name="theme">
Charcoal
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="col-sm-7 col-lg-5 col-sm-offset-3 col-lg-offset-2">
<button class="btn btn-primary btn-lg btn-block" type="button">Save Current Theme</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.theme input').click(function(){
var theme = $(this).val();
$('.sidebar').removeClass().addClass('col-md-3 col-lg-2 hidden-sm hidden-xs h-100 sidebar '+theme);
});
</script>
</body>
</html>