@ -0,0 +1,470 @@ | |||
/*! | |||
* Bootstrap v3.3.1 (http://getbootstrap.com) | |||
* Copyright 2011-2014 Twitter, Inc. | |||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |||
*/ | |||
.btn-default, | |||
.btn-primary, | |||
.btn-success, | |||
.btn-info, | |||
.btn-warning, | |||
.btn-danger { | |||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); | |||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); | |||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); | |||
} | |||
.btn-default:active, | |||
.btn-primary:active, | |||
.btn-success:active, | |||
.btn-info:active, | |||
.btn-warning:active, | |||
.btn-danger:active, | |||
.btn-default.active, | |||
.btn-primary.active, | |||
.btn-success.active, | |||
.btn-info.active, | |||
.btn-warning.active, | |||
.btn-danger.active { | |||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |||
} | |||
.btn-default .badge, | |||
.btn-primary .badge, | |||
.btn-success .badge, | |||
.btn-info .badge, | |||
.btn-warning .badge, | |||
.btn-danger .badge { | |||
text-shadow: none; | |||
} | |||
.btn:active, | |||
.btn.active { | |||
background-image: none; | |||
} | |||
.btn-default { | |||
text-shadow: 0 1px 0 #fff; | |||
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); | |||
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); | |||
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-color: #dbdbdb; | |||
border-color: #ccc; | |||
} | |||
.btn-default:hover, | |||
.btn-default:focus { | |||
background-color: #e0e0e0; | |||
background-position: 0 -15px; | |||
} | |||
.btn-default:active, | |||
.btn-default.active { | |||
background-color: #e0e0e0; | |||
border-color: #dbdbdb; | |||
} | |||
.btn-default:disabled, | |||
.btn-default[disabled] { | |||
background-color: #e0e0e0; | |||
background-image: none; | |||
} | |||
.btn-primary { | |||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%); | |||
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88)); | |||
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-color: #245580; | |||
} | |||
.btn-primary:hover, | |||
.btn-primary:focus { | |||
background-color: #265a88; | |||
background-position: 0 -15px; | |||
} | |||
.btn-primary:active, | |||
.btn-primary.active { | |||
background-color: #265a88; | |||
border-color: #245580; | |||
} | |||
.btn-primary:disabled, | |||
.btn-primary[disabled] { | |||
background-color: #265a88; | |||
background-image: none; | |||
} | |||
.btn-success { | |||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); | |||
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641)); | |||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-color: #3e8f3e; | |||
} | |||
.btn-success:hover, | |||
.btn-success:focus { | |||
background-color: #419641; | |||
background-position: 0 -15px; | |||
} | |||
.btn-success:active, | |||
.btn-success.active { | |||
background-color: #419641; | |||
border-color: #3e8f3e; | |||
} | |||
.btn-success:disabled, | |||
.btn-success[disabled] { | |||
background-color: #419641; | |||
background-image: none; | |||
} | |||
.btn-info { | |||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); | |||
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2)); | |||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-color: #28a4c9; | |||
} | |||
.btn-info:hover, | |||
.btn-info:focus { | |||
background-color: #2aabd2; | |||
background-position: 0 -15px; | |||
} | |||
.btn-info:active, | |||
.btn-info.active { | |||
background-color: #2aabd2; | |||
border-color: #28a4c9; | |||
} | |||
.btn-info:disabled, | |||
.btn-info[disabled] { | |||
background-color: #2aabd2; | |||
background-image: none; | |||
} | |||
.btn-warning { | |||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); | |||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316)); | |||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-color: #e38d13; | |||
} | |||
.btn-warning:hover, | |||
.btn-warning:focus { | |||
background-color: #eb9316; | |||
background-position: 0 -15px; | |||
} | |||
.btn-warning:active, | |||
.btn-warning.active { | |||
background-color: #eb9316; | |||
border-color: #e38d13; | |||
} | |||
.btn-warning:disabled, | |||
.btn-warning[disabled] { | |||
background-color: #eb9316; | |||
background-image: none; | |||
} | |||
.btn-danger { | |||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); | |||
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a)); | |||
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-color: #b92c28; | |||
} | |||
.btn-danger:hover, | |||
.btn-danger:focus { | |||
background-color: #c12e2a; | |||
background-position: 0 -15px; | |||
} | |||
.btn-danger:active, | |||
.btn-danger.active { | |||
background-color: #c12e2a; | |||
border-color: #b92c28; | |||
} | |||
.btn-danger:disabled, | |||
.btn-danger[disabled] { | |||
background-color: #c12e2a; | |||
background-image: none; | |||
} | |||
.thumbnail, | |||
.img-thumbnail { | |||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); | |||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); | |||
} | |||
.dropdown-menu > li > a:hover, | |||
.dropdown-menu > li > a:focus { | |||
background-color: #e8e8e8; | |||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); | |||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); | |||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.dropdown-menu > .active > a, | |||
.dropdown-menu > .active > a:hover, | |||
.dropdown-menu > .active > a:focus { | |||
background-color: #2e6da4; | |||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); | |||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); | |||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.navbar-default { | |||
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%); | |||
background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8)); | |||
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
border-radius: 4px; | |||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); | |||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); | |||
} | |||
.navbar-default .navbar-nav > .open > a, | |||
.navbar-default .navbar-nav > .active > a { | |||
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); | |||
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2)); | |||
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0); | |||
background-repeat: repeat-x; | |||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); | |||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); | |||
} | |||
.navbar-brand, | |||
.navbar-nav > li > a { | |||
text-shadow: 0 1px 0 rgba(255, 255, 255, .25); | |||
} | |||
.navbar-inverse { | |||
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%); | |||
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222)); | |||
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0); | |||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
background-repeat: repeat-x; | |||
} | |||
.navbar-inverse .navbar-nav > .open > a, | |||
.navbar-inverse .navbar-nav > .active > a { | |||
background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%); | |||
background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f)); | |||
background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0); | |||
background-repeat: repeat-x; | |||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25); | |||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25); | |||
} | |||
.navbar-inverse .navbar-brand, | |||
.navbar-inverse .navbar-nav > li > a { | |||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); | |||
} | |||
.navbar-static-top, | |||
.navbar-fixed-top, | |||
.navbar-fixed-bottom { | |||
border-radius: 0; | |||
} | |||
@media (max-width: 767px) { | |||
.navbar .navbar-nav .open .dropdown-menu > .active > a, | |||
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover, | |||
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus { | |||
color: #fff; | |||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); | |||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); | |||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
} | |||
.alert { | |||
text-shadow: 0 1px 0 rgba(255, 255, 255, .2); | |||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); | |||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); | |||
} | |||
.alert-success { | |||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); | |||
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc)); | |||
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); | |||
background-repeat: repeat-x; | |||
border-color: #b2dba1; | |||
} | |||
.alert-info { | |||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%); | |||
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0)); | |||
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); | |||
background-repeat: repeat-x; | |||
border-color: #9acfea; | |||
} | |||
.alert-warning { | |||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); | |||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0)); | |||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); | |||
background-repeat: repeat-x; | |||
border-color: #f5e79e; | |||
} | |||
.alert-danger { | |||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); | |||
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3)); | |||
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); | |||
background-repeat: repeat-x; | |||
border-color: #dca7a7; | |||
} | |||
.progress { | |||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); | |||
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5)); | |||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.progress-bar { | |||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%); | |||
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090)); | |||
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.progress-bar-success { | |||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); | |||
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); | |||
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.progress-bar-info { | |||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); | |||
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5)); | |||
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.progress-bar-warning { | |||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); | |||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f)); | |||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.progress-bar-danger { | |||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); | |||
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c)); | |||
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.progress-bar-striped { | |||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); | |||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); | |||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); | |||
} | |||
.list-group { | |||
border-radius: 4px; | |||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); | |||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); | |||
} | |||
.list-group-item.active, | |||
.list-group-item.active:hover, | |||
.list-group-item.active:focus { | |||
text-shadow: 0 -1px 0 #286090; | |||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%); | |||
background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a)); | |||
background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0); | |||
background-repeat: repeat-x; | |||
border-color: #2b669a; | |||
} | |||
.list-group-item.active .badge, | |||
.list-group-item.active:hover .badge, | |||
.list-group-item.active:focus .badge { | |||
text-shadow: none; | |||
} | |||
.panel { | |||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); | |||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); | |||
} | |||
.panel-default > .panel-heading { | |||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); | |||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); | |||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.panel-primary > .panel-heading { | |||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); | |||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); | |||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.panel-success > .panel-heading { | |||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); | |||
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6)); | |||
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.panel-info > .panel-heading { | |||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); | |||
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3)); | |||
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.panel-warning > .panel-heading { | |||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); | |||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc)); | |||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.panel-danger > .panel-heading { | |||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%); | |||
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc)); | |||
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); | |||
background-repeat: repeat-x; | |||
} | |||
.well { | |||
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); | |||
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); | |||
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5)); | |||
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0); | |||
background-repeat: repeat-x; | |||
border-color: #dcdcdc; | |||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); | |||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); | |||
} | |||
/*# sourceMappingURL=bootstrap-theme.css.map */ |
@ -0,0 +1,142 @@ | |||
/* GLOBAL STYLES | |||
-------------------------------------------------- */ | |||
/* Padding below the footer and lighter body text */ | |||
body { | |||
padding-bottom: 40px; | |||
color: #5a5a5a; | |||
} | |||
/* CUSTOMIZE THE NAVBAR | |||
-------------------------------------------------- */ | |||
/* Special class on .container surrounding .navbar, used for positioning it into place. */ | |||
.navbar-wrapper { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
left: 0; | |||
z-index: 20; | |||
} | |||
/* Flip around the padding for proper display in narrow viewports */ | |||
.navbar-wrapper > .container { | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
.navbar-wrapper .navbar { | |||
padding-right: 15px; | |||
padding-left: 15px; | |||
} | |||
.navbar-wrapper .navbar .container { | |||
width: auto; | |||
} | |||
/* CUSTOMIZE THE CAROUSEL | |||
-------------------------------------------------- */ | |||
/* Carousel base class */ | |||
.carousel { | |||
height: 500px; | |||
margin-bottom: 60px; | |||
} | |||
/* Since positioning the image, we need to help out the caption */ | |||
.carousel-caption { | |||
z-index: 10; | |||
/*background-color:rgba(0,0,0,0.2);*/ | |||
/*padding-left: 20px;*/ | |||
/*padding-right:20px;*/ | |||
/*border-radius:30px;*/ | |||
} | |||
/* Declare heights because of positioning of img element */ | |||
.carousel .item { | |||
height: 500px; | |||
background-color: #064880; | |||
} | |||
.carousel .item.dark { | |||
background-color: #06132c; | |||
} | |||
.carousel-inner > .item > img { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
min-width: 100%; | |||
height: 800px; | |||
} | |||
/* MARKETING CONTENT | |||
-------------------------------------------------- */ | |||
/* Center align the text within the three columns below the carousel */ | |||
.marketing .col-lg-3 { | |||
margin-bottom: 20px; | |||
text-align: center; | |||
} | |||
.marketing h2 { | |||
font-weight: normal; | |||
} | |||
.marketing .col-lg-3 p { | |||
margin-right: 10px; | |||
margin-left: 10px; | |||
} | |||
/* Featurettes | |||
------------------------- */ | |||
.featurette-divider { | |||
margin: 80px 0; /* Space out the Bootstrap <hr> more */ | |||
border-top: 1px solid #d2d2d2; | |||
} | |||
/* Thin out the marketing headings */ | |||
.featurette-heading { | |||
font-weight: 300; | |||
line-height: 1; | |||
letter-spacing: -1px; | |||
} | |||
/* RESPONSIVE CSS | |||
-------------------------------------------------- */ | |||
@media (min-width: 768px) { | |||
/* Navbar positioning foo */ | |||
.navbar-wrapper { | |||
margin-top: 20px; | |||
} | |||
.navbar-wrapper .container { | |||
padding-right: 15px; | |||
padding-left: 15px; | |||
} | |||
.navbar-wrapper .navbar { | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
/* The navbar becomes detached from the top, so we round the corners */ | |||
.navbar-wrapper .navbar { | |||
border-radius: 4px; | |||
} | |||
/* Bump up size of carousel content */ | |||
.carousel-caption p { | |||
margin-bottom: 20px; | |||
font-size: 21px; | |||
line-height: 1.4; | |||
} | |||
.featurette-heading { | |||
font-size: 50px; | |||
} | |||
} | |||
@media (min-width: 992px) { | |||
.featurette-heading { | |||
margin-top: 120px; | |||
} | |||
} |
@ -0,0 +1,61 @@ | |||
body { | |||
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; | |||
background: url('../images/crossword.png') /* Background pattern from subtlepatterns.com */ | |||
} | |||
div.contentWrapper { | |||
padding:10px; | |||
} | |||
div.navbar-wrapper { | |||
background-color:#07508E; | |||
border-bottom: 3px solid #ffffff; | |||
font-size:16px; | |||
} | |||
pre { | |||
width:450px; | |||
height:552px; | |||
overflow:auto; | |||
} | |||
#visualization { | |||
display:block; | |||
margin-left:470px; | |||
margin-top:-562px; | |||
width:500px; | |||
height:552px; | |||
border: 1px solid #dddddd; | |||
border-radius:4px; | |||
background-color:#fcfcfc; | |||
} | |||
div.textHTMLContent { | |||
margin-top:10px; | |||
margin-bottom:10px; | |||
display:block; | |||
width:800px; | |||
} | |||
img.example { | |||
border:1px solid #dddddd; | |||
width:250px; | |||
height:250px; | |||
border-radius:10px; | |||
margin-top:10px; | |||
} | |||
div.exampleTitle { | |||
position:relative; | |||
top:-7px; | |||
width:100%; | |||
max-width:250px; | |||
height:30px; | |||
border: 1px solid #dddddd; | |||
background-color: #526b84; | |||
color:#ffffff; | |||
text-align:center; | |||
vertical-align:middle; | |||
line-height: 30px; | |||
border-bottom-left-radius:5px; | |||
border-bottom-right-radius:5px; | |||
} |
@ -0,0 +1,83 @@ | |||
html, body { | |||
width: 100%; | |||
height: 100%; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
body, td, th { | |||
font-family: arial, sans-serif; | |||
font-size: 11pt; | |||
color: #4D4D4D; | |||
line-height: 1.7em; | |||
} | |||
#container { | |||
position: relative; | |||
margin: 0 auto; | |||
padding: 10px 10px 50px 10px; | |||
width: 970px; | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
} | |||
h1 { | |||
font-size: 180%; | |||
font-weight: bold; | |||
padding: 0; | |||
margin: 1em 0 1em 0; | |||
} | |||
h2 { | |||
padding-top: 20px; | |||
padding-bottom: 10px; | |||
border-bottom: 1px solid #e0e0e0; | |||
color: #064880; | |||
} | |||
h3 { | |||
font-size: 140%; | |||
} | |||
a > img { | |||
border: none; | |||
} | |||
a { | |||
color: #064880; | |||
text-decoration: none; | |||
} | |||
a:visited { | |||
color: #064880; | |||
text-decoration: none; | |||
} | |||
a:hover { | |||
color: red; | |||
text-decoration: underline; | |||
} | |||
table { | |||
border-collapse: collapse; | |||
} | |||
th { | |||
font-weight: bold; | |||
border: 1px solid lightgray; | |||
background-color: #E5E5E5; | |||
text-align: left; | |||
vertical-align: top; | |||
padding: 5px; | |||
} | |||
td { | |||
border: 1px solid lightgray; | |||
padding: 5px; | |||
vertical-align: top; | |||
} | |||
p.important_note { | |||
color: #3a6baa; | |||
font-weight:bold; | |||
} |
@ -0,0 +1,40 @@ | |||
/**************************************\ | |||
Shapes4FREE License | |||
http://www.shapes4free.com/ - visit us to get free photoshop shapes, read our easy-to-understand shapes tutorials and tips, and view beautiful examples of using shapes in all kinds of design | |||
More about the license: http://www.shapes4free.com/license/ | |||
\**************************************/ | |||
This resource was created by Oksana Khristenko | |||
This resource has been downloaded from Shapes4FREE.com and is free for personal or commercial projects. You may use it for web and print design. | |||
No attribution or backlinks are required, but we would certainly appreciate it if you bookmarked www.shapes4free.com and shared the link to it with your friends: | |||
www.shapes4free.com - free photoshop shapes | |||
You may not resell or distribute this resource. Uploading it to another website | |||
or offering them for download on another website is not allowed. If you would like to feature this resource on | |||
your website or share them with friends, do not link directly to the resource files, | |||
please link to the appropriate page on Shapes4FREE.com where it is possible to download the freebie. | |||
/**************************************\ | |||
Shapes4FREE Ëèöåíçèÿ | |||
http://www.shapes4free.com/ - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà, óðîêè è ïîäñêàçêè, à òàêæå êðàñèâûå ïðèìåðû èñïîëüçîâàíèÿ ôèãóð âî âñåõ âèäàõ äèçàéíà | |||
Ëèöåíçèÿ: http://www.shapes4free.com/license-ru/ | |||
\**************************************/ | |||
Àâòîð: Îêñàíà Õðèñòåíêî | |||
Âñå áåñïëàòíûå ðåñóðñû êîòîðûå ìîæíî ñêà÷àòü íà Shapes4FREE.com, âêëþ÷àÿ ïðîèçâîëüíûå ôèãóðû äëÿ Ôîòîøîïà | |||
(photoshop custom shapes) áåñïëàòíû äëÿ èñïîëüçîâàíèÿ â ëè÷íûõ è êîììåð÷åñêèõ ïðîåêòàõ. Ðàçðåøåíî èñïîëüçîâàòü | |||
áåñïëàòíûå ðåñóðñû Shapes4FREE â âåá äèçàéíå è ïå÷àòíûõ ìàòåðèàëàõ. | |||
Ññûëêà íà ñàéò Shapes4FREE.com íå òðåáóåòñÿ íî ïðèâåòñòâóåòñÿ. Ìû áóäåì ðàäû åñëè âû ðàññêàæåòå î íàñ äðóçüÿì: | |||
www.shapes4free.com - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà | |||
Çàïðåùåíî ïðîäàâàòü èëè ðàñïðîñòðàíÿòü áåñïëàòíûå ðåñóðñû ñîçäàííûå Shapes4FREE. | |||
Çàïðåùåíî çàãðóæàòü èõ íà äðóãèå ñàéòû è ïîçâîëÿòü ïîëüçîâàòåëÿì èõ ñêà÷èâàòü. Åñëè âû õîòèòå ðàññêàçàòü î íàøåì | |||
áåñïëàòíîì ðåñóðñå íà ñàéòå èëè ïîäåëèòüñÿ ñ äðóçüÿìè, íå ñîçäàâàéòå ïðÿìûõ ññûëîê íà ôàéë, ñîçäàéòå ññûëêó íà | |||
ñîîòâåòñòâóþùóþ ñòðàíèöó ñàéòà Shapes4FREE.com ãäå ìîæíî áóäåò ñêà÷àòü ýòîò ðåñóðñ. | |||
@ -0,0 +1,61 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D demo</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50); | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var counter = 0; | |||
var steps = 50; // number of datapoints will be steps*steps | |||
var axisMax = 314; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x < axisMax; x+=axisStep) { | |||
for (var y = 0; y < axisMax; y+=axisStep) { | |||
var value = custom(x,y); | |||
data.add({id:counter++,x:x,y:y,z:value,style:value}); | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'surface', | |||
showPerspective: true, | |||
showGrid: true, | |||
showShadow: false, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5 | |||
}; | |||
// Instantiate our graph object. | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization();"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,110 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D camera position</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
td {font: 10pt arial} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50); | |||
} | |||
// callback function, called when the camera position has changed | |||
function onCameraPositionChange() { | |||
// adjust the values of startDate and endDate | |||
var pos = graph.getCameraPosition(); | |||
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3)); | |||
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3)); | |||
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3)); | |||
} | |||
// set the camera position | |||
function setCameraPosition() { | |||
var horizontal = parseFloat(document.getElementById('horizontal').value); | |||
var vertical = parseFloat(document.getElementById('vertical').value); | |||
var distance = parseFloat(document.getElementById('distance').value); | |||
var pos = { | |||
horizontal: horizontal, | |||
vertical: vertical, | |||
distance: distance | |||
}; | |||
graph.setCameraPosition(pos); | |||
// retrieve the camera position again, to get the applied values | |||
onCameraPositionChange(); | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var steps = 50; // number of datapoints will be steps*steps | |||
var axisMax = 314; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x < axisMax; x+=axisStep) { | |||
for (var y = 0; y < axisMax; y+=axisStep) { | |||
var value = custom(x,y); | |||
data.add([ | |||
{x:x,y:y,z:value,t:0,style:value} | |||
]); | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'surface', | |||
showPerspective: true, | |||
showGrid: true, | |||
showShadow: false, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5 | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
graph.on('cameraPositionChange', onCameraPositionChange); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<h1>Graph 3d camera position</h1> | |||
<table> | |||
<tr> | |||
<td>Horizontal angle (0 to 2*pi)</td> | |||
<td><input type="text" id="horizontal" value="1.0"></td> | |||
</tr> | |||
<tr> | |||
<td>Vertical angle (0 to 0.5*pi)</td> | |||
<td><input type="text" id="vertical" value="0.5"></td> | |||
</tr> | |||
<tr> | |||
<td>Distance (0.71 to 5.0)</td> | |||
<td><input type="text" id="distance" value="1.7"></td> | |||
</tr> | |||
<tr> | |||
<td></td> | |||
<td><input type="button" value="Set" onclick="setCameraPosition();"></td> | |||
</tr> | |||
</table> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,64 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D demo</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return Math.sin(x/50) * Math.cos(y/50) * 50 + 50; | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// Create and populate a data table. | |||
data = []; | |||
// create some nice looking data with sin/cos | |||
var steps = 50; // number of datapoints will be steps*steps | |||
var axisMax = 314; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x < axisMax; x+=axisStep) { | |||
for (var y = 0; y < axisMax; y+=axisStep) { | |||
var value = custom(x,y); | |||
var valueRange = (value > 67) ? '67-100' : | |||
(value < 33) ? '0-33' : | |||
'33-67'; | |||
data.push({x:x,y:y,z:value,filter:valueRange,style:value}); | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'surface', | |||
showPerspective: false, | |||
showGrid: true, | |||
showShadow: false, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5, | |||
filterLabel: 'values' | |||
}; | |||
// Create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,71 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D animation demo</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt arial; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y, t) { | |||
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50; | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var steps = 25; | |||
var axisMax = 314; | |||
var tMax = 31; | |||
var axisStep = axisMax / steps; | |||
for (var t = 0; t < tMax; t++) { | |||
for (var x = 0; x < axisMax; x+=axisStep) { | |||
for (var y = 0; y < axisMax; y+=axisStep) { | |||
var value = custom(x, y, t); | |||
data.add([ | |||
{x:x,y:y,z:value,filter:t,style:value} | |||
]); | |||
} | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'surface', | |||
showPerspective: true, | |||
showGrid: true, | |||
showShadow: false, | |||
// showAnimationControls: false, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5, | |||
animationInterval: 100, // milliseconds | |||
animationPreload: true, | |||
filterValue: 'time' | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization();"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,60 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D line demo</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var steps = 500; | |||
var axisMax = 314; | |||
var tmax = 4 * 2 * Math.PI; | |||
var axisStep = axisMax / steps; | |||
for (var t = 0; t < tmax; t += tmax / steps) { | |||
var r = 1; | |||
var x = r * Math.sin(t); | |||
var y = r * Math.cos(t); | |||
var z = t / tmax; | |||
data.add({x:x,y:y,z:z}); | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'line', | |||
showPerspective: false, | |||
showGrid: true, | |||
keepAspectRatio: true, | |||
verticalRatio: 1.0 | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
graph.setCameraPosition(0.4, undefined, undefined); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,78 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D animation moving dots</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// create the data table. | |||
data = new vis.DataSet(); | |||
// create some shortcuts to math functions | |||
var sin = Math.sin; | |||
var cos = Math.cos; | |||
var pi = Math.PI; | |||
// create the animation data | |||
var tmax = 2.0 * pi; | |||
var tstep = tmax / 75; | |||
var dotCount = 1; // set this to 1, 2, 3, 4, ... | |||
for (var t = 0; t < tmax; t += tstep) { | |||
var tgroup = parseFloat(t.toFixed(2)); | |||
var value = t; | |||
// a dot in the center | |||
data.add( {x:0,y:0,z:0,filter:tgroup,style:value}); | |||
// one or multiple dots moving around the center | |||
for (var dot = 0; dot < dotCount; dot++) { | |||
var tdot = t + 2*pi * dot / dotCount; | |||
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value}); | |||
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value}); | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'dot-color', | |||
showPerspective: true, | |||
showGrid: true, | |||
keepAspectRatio: true, | |||
verticalRatio: 1.0, | |||
animationInterval: 35, // milliseconds | |||
animationPreload: false, | |||
animationAutoStart: true, | |||
legendLabel: 'color value', | |||
cameraPosition: { | |||
horizontal: 2.7, | |||
vertical: 0.0, | |||
distance: 1.65 | |||
} | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization();"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,68 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D cloud with colored dots</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// create the data table. | |||
data = new vis.DataSet(); | |||
// create some shortcuts to math functions | |||
var sqrt = Math.sqrt; | |||
var pow = Math.pow; | |||
var random = Math.random; | |||
// create the animation data | |||
var imax = 100; | |||
for (var i = 0; i < imax; i++) { | |||
var x = pow(random(), 2); | |||
var y = pow(random(), 2); | |||
var z = pow(random(), 2); | |||
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)); | |||
data.add({x:x,y:y,z:z,style:dist}); | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'dot-color', | |||
showPerspective: true, | |||
showGrid: true, | |||
keepAspectRatio: true, | |||
verticalRatio: 1.0, | |||
legendLabel: 'distance', | |||
cameraPosition: { | |||
horizontal: -0.35, | |||
vertical: 0.22, | |||
distance: 1.8 | |||
} | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,67 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D cloud with sized dots</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// create the data table. | |||
data = new vis.DataSet(); | |||
// create some shortcuts to math functions | |||
var sqrt = Math.sqrt; | |||
var pow = Math.pow; | |||
var random = Math.random; | |||
// create the animation data | |||
var imax = 100; | |||
for (var i = 0; i < imax; i++) { | |||
var x = pow(random(), 2); | |||
var y = pow(random(), 2); | |||
var z = pow(random(), 2); | |||
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)); | |||
var range = sqrt(2) - dist; | |||
data.add({x:x,y:y,z:z,style:range}); | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: 'dot-size', | |||
showPerspective: false, | |||
showGrid: true, | |||
keepAspectRatio: true, | |||
legendLabel:'value', | |||
verticalRatio: 1.0, | |||
cameraPosition: { | |||
horizontal: -0.54, | |||
vertical: 0.5, | |||
distance: 1.6 | |||
} | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> | |||
<body onload="drawVisualization()"> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,79 @@ | |||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||
<html> | |||
<head> | |||
<title>Graph 3D demo</title> | |||
<style> | |||
html, body { | |||
font: 10pt arial; | |||
padding: 0; | |||
margin: 0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
#mygraph { | |||
position: absolute; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
</style> | |||
<!-- for mobile devices like android and iphone --> | |||
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50); | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var steps = 10; // number of datapoints will be steps*steps | |||
var axisMax = 314; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x < axisMax; x+=axisStep) { | |||
for (var y = 0; y < axisMax; y+=axisStep) { | |||
var value = custom(x,y); | |||
data.add([ | |||
{x:x,y:y,z:value} | |||
]); | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '100%', | |||
height: '100%', | |||
style: 'surface', | |||
showPerspective: true, | |||
showGrid: true, | |||
showShadow: false, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5, | |||
backgroundColor: { | |||
strokeWidth: 0 | |||
} | |||
}; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onresize="graph.redraw();" onload="drawVisualization()"> | |||
<div id="mygraph"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,121 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D styles</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10); | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
var style = document.getElementById('style').value; | |||
var showPerspective = document.getElementById('perspective').checked; | |||
var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined; | |||
var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined; | |||
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; | |||
// Create and populate a data table. | |||
data = []; | |||
// create some nice looking data with sin/cos | |||
var steps = 5; // number of datapoints will be steps*steps | |||
var axisMax = 10; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x <= axisMax; x+=axisStep) { | |||
for (var y = 0; y <= axisMax; y+=axisStep) { | |||
var z = custom(x,y); | |||
if (withValue) { | |||
var value = (y - x); | |||
data.push({x:x, y:y, z: z, style:value}); | |||
} | |||
else { | |||
data.push({x:x, y:y, z: z}); | |||
} | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: style, | |||
xBarWidth: xBarWidth, | |||
yBarWidth: yBarWidth, | |||
showPerspective: showPerspective, | |||
showGrid: true, | |||
showShadow: false, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5 | |||
}; | |||
var camera = graph ? graph.getCameraPosition() : null; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
if (camera) graph.setCameraPosition(camera); // restore camera position | |||
document.getElementById('style').onchange = drawVisualization; | |||
document.getElementById('perspective').onchange = drawVisualization; | |||
document.getElementById('xBarWidth').onchange = drawVisualization; | |||
document.getElementById('yBarWidth').onchange = drawVisualization; | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<p> | |||
<label for="style"> Style: | |||
<select id="style"> | |||
<option value="bar">bar</option> | |||
<option value="bar-color">bar-color</option> | |||
<option value="bar-size">bar-size</option> | |||
<option value="dot">dot</option> | |||
<option value="dot-line">dot-line</option> | |||
<option value="dot-color">dot-color</option> | |||
<option value="dot-size">dot-size</option> | |||
<option value="grid">grid</option> | |||
<option value="line">line</option> | |||
<option value="surface">surface</option> | |||
</select> | |||
</label> | |||
</p> | |||
<p> | |||
<label for="perspective"> | |||
<input type="checkbox" id="perspective" checked> Show perspective | |||
</label> | |||
</p> | |||
<p> | |||
<label for="xBarWidth"> Bar width X: | |||
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color") | |||
</label> | |||
</p> | |||
<p> | |||
<label for="yBarWidth"> Bar width Y: | |||
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color") | |||
</label> | |||
</p> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,104 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D tooltips</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10); | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
var style = document.getElementById('style').value; | |||
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var steps = 5; // number of datapoints will be steps*steps | |||
var axisMax = 10; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x <= axisMax; x+=axisStep) { | |||
for (var y = 0; y <= axisMax; y+=axisStep) { | |||
var z = custom(x,y); | |||
if (withValue) { | |||
var value = (y - x); | |||
data.add({x:x, y:y, z: z, style:value}); | |||
} | |||
else { | |||
data.add({x:x, y:y, z: z}); | |||
} | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: style, | |||
showPerspective: true, | |||
showGrid: true, | |||
showShadow: false, | |||
// Option tooltip can be true, false, or a function returning a string with HTML contents | |||
//tooltip: true, | |||
tooltip: function (point) { | |||
// parameter point contains properties x, y, z | |||
return 'value: <b>' + point.z + '</b>'; | |||
}, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5 | |||
}; | |||
var camera = graph ? graph.getCameraPosition() : null; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
if (camera) graph.setCameraPosition(camera); // restore camera position | |||
document.getElementById('style').onchange = drawVisualization; | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<p> | |||
<label for="style"> Style: | |||
<select id="style"> | |||
<option value="bar">bar</option> | |||
<option value="bar-color">bar-color</option> | |||
<option value="bar-size">bar-size</option> | |||
<option value="dot">dot</option> | |||
<option value="dot-line">dot-line</option> | |||
<option value="dot-color">dot-color</option> | |||
<option value="dot-size">dot-size</option> | |||
<option value="grid">grid</option> | |||
<option value="line">line</option> | |||
<option value="surface">surface</option> | |||
</select> | |||
</label> | |||
</p> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,116 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph 3D Axis Ticks</title> | |||
<style> | |||
body {font: 10pt arial;} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<script type="text/javascript"> | |||
var data = null; | |||
var graph = null; | |||
function custom(x, y) { | |||
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10) * 1000; | |||
} | |||
// Called when the Visualization API is loaded. | |||
function drawVisualization() { | |||
var style = document.getElementById('style').value; | |||
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; | |||
// Create and populate a data table. | |||
data = new vis.DataSet(); | |||
// create some nice looking data with sin/cos | |||
var steps = 5; // number of datapoints will be steps*steps | |||
var axisMax = 10; | |||
var axisStep = axisMax / steps; | |||
for (var x = 0; x <= axisMax; x+=axisStep) { | |||
for (var y = 0; y <= axisMax; y+=axisStep) { | |||
var z = custom(x,y); | |||
if (withValue) { | |||
var value = (y - x); | |||
data.add({x:x, y:y, z: z, style:value}); | |||
} | |||
else { | |||
data.add({x:x, y:y, z: z}); | |||
} | |||
} | |||
} | |||
// specify options | |||
var options = { | |||
width: '600px', | |||
height: '600px', | |||
style: style, | |||
showPerspective: true, | |||
showGrid: true, | |||
showShadow: false, | |||
// Option tooltip can be true, false, or a function returning a string with HTML contents | |||
//tooltip: true, | |||
tooltip: function (point) { | |||
// parameter point contains properties x, y, z | |||
return 'value: <b>' + point.z + '</b>'; | |||
}, | |||
xValueLabel: function(value) { | |||
return vis.moment().add(value, 'days').format('DD MMM'); | |||
}, | |||
yValueLabel: function(value) { | |||
return value * 10 + '%'; | |||
}, | |||
zValueLabel: function(value) { | |||
return value / 1000 + 'K'; | |||
}, | |||
keepAspectRatio: true, | |||
verticalRatio: 0.5 | |||
}; | |||
var camera = graph ? graph.getCameraPosition() : null; | |||
// create our graph | |||
var container = document.getElementById('mygraph'); | |||
graph = new vis.Graph3d(container, data, options); | |||
if (camera) graph.setCameraPosition(camera); // restore camera position | |||
document.getElementById('style').onchange = drawVisualization; | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawVisualization()"> | |||
<p> | |||
<label for="style"> Style: | |||
<select id="style"> | |||
<option value="bar">bar</option> | |||
<option value="bar-color">bar-color</option> | |||
<option value="bar-size">bar-size</option> | |||
<option value="dot">dot</option> | |||
<option value="dot-line">dot-line</option> | |||
<option value="dot-color">dot-color</option> | |||
<option value="dot-size">dot-size</option> | |||
<option value="grid">grid</option> | |||
<option value="line">line</option> | |||
<option value="surface">surface</option> | |||
</select> | |||
</label> | |||
</p> | |||
<div id="mygraph"></div> | |||
<div id="info"></div> | |||
</body> | |||
</html> |