knockout+d3+bootstrap实现可编辑颜色文字的仪表盘卡片效果代码-html代码-BFW代码库

代码语言：html

代码描述：knockout+d3+bootstrap实现可编辑颜色文字的仪表盘卡片效果代码

代码标签： knockout d3 bootstrap 可编辑颜色文字仪表盘卡片

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
<style>
body {
  background: #e7edf2;
  margin: 3em;
}
.green-bg {
  background-color: #0da58e;
}
.lightgreen-bg {
  background-color: #8cc152;
}
.lime-bg {
  background-color: #cdda49;
}
.yellow-bg {
  background-color: #fdc02f;
}
.orange-bg {
  background-color: #fd9727;
}
.deeporange-bg {
  background-color: #fc5830;
}
.red-bg {
  background-color: #e2202c;
}
.pink-bg {
  background-color: #e62565;
}
.purple-bg {
  background-color: #9b2fae;
}
.deeppurple-bg {
  background-color: #673fb4;
}
.blue-bg {
  background-color: #4054b2;
}
.lightblue-bg {
  background-color: #587bf8;
}
.log-box {
  color: #fff;
}
.log-box h3 {
  margin-top: 0;
  margin-bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  padding-bottom: 10px;
}
.log-box .log-box-button {
  color: #fff;
  display: none;
  opacity: 0.5;
  padding: 5px 8px;
  font-size: 13px;
  margin-bottom: -5px;
}
.log-box .log-box-button:hover {
  opacity: 1;
}
.log-box .log-box-button-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.log-box .log-box-buttons-buttom {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
.log-box .log-box-buttons-buttom a {
  margin-left: 0px;
}
.log-box .colorpicker {
  font-size: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.log-box .colorpicker li {
  display: inline-block;
  width: 8.33333333%;
  height: 40px;
  position: relative;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.log-box .colorpicker li:first-child {
  border-radius: 0 0 0 5px;
}
.log-box .colorpicker li:last-child {
  border-radius: 0 0 5px 0;
}
.log-box .colorpicker li span {
  width: 100%;
  height: 40px;
  text-align: center;
  padding-top: 13px;
  pointer-events: none;
}
.log-box .colorpicker li span:before {
  opacity: 0;
}
.log-box .colorpicker li.selected span:before {
  opacity: 1;
}
.log-box .colorpicker li:hover span:before {
  opacity: 0.5;
}
.log-box div[class*=col-]:first-child {
  padding-right: 7px;
}
.log-box div[class*=col-]:last-child {
  padding-left: 7px;
}
.log-box .access {
  opacity: 0.5;
}
.log-box:hover .access {
  display: none;
}
.log-box:hover .log-box-button {
  display: inline-block;
}
.log-box .btn {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
.log-box .btn:active {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
.sparkline {
  font-size: 0;
  position: absolute;
  top: 60px;
  bottom: 38px;
  left: 0;
  right: 0;
}
.sparkline path {
  stroke-width: 2;
  fill: none;
  stroke: white;
}
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
}
.flip-container,
.front,
.back {
  width: 100%;
  height: 100%;
}
.flip-container .flipper {
  box-shadow: 0 ;
}
.flip-container.flipped .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  margin: -20px -20px 0 -20px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1), 0 60px 90px rgba(0, 0, 0, 0.3);
}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  position: relative;
  overflow: initial;
  border-radius: 5px;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  padding: 15px;
}
.front {
  z-index: 1;
}
.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  border-width: 0px;
  top: 0;
  bottom: -40px;
  height: auto;
  transition: background-color 0.3s;
}
.back .row:first-child {
  margin-bottom: 17px;
}
</style>


</head>

<body>
  <div class="container">
  <p class="text-muted">Hover and click the pencil icon (<a href="">Updated version here</a>)</p>
  <div class="row" data-bind="foreach: logs">
    <div class="col-xs-4">
      <div class="flip-container log-box" data-bind="css: css">
        <div class="flipper embed-responsive embed-responsive-16by9">
          <div class="front" data-bind="css: colorStyle">
            <h3 data-bind="text: Name">Log name</h3>
            <a href="#" class="log-box-button log-box-button-edit " data-bind="click: $parent.editLog, visible: Access() === 'Administrator'" title="Edit"><i class="fa fa-pencil"></i></a>
            
            <div class="sparkline" data-bind="sparkline: sparklinedata"></div>
            <div class="log-box-buttons-buttom">
              <div class="access" data-bind="text: Access() + ' access'">Administrator access</div>
            </div>
            <div class="log-box-buttons-buttom">
              <a href="#" class="log-box-button log-box-button-install" data-bind="click: $parent.viewLogSearch"><i class="fa fa-search"></i></a><a href="#" class="log-box-button log-box-button-install" data-bind="click: $parent.viewInstallLog, visible: Access() === 'Administrator'" title="Settings"><i class="fa fa-cogs"></i></a>
              </div>
          </div>
          <div class="back" data-bind="css: colorStyle">
            <div class="row">
              <form method="POST" data-bind="submit: $parent.saveLog">
                <div class="col-xs-7 col-sm-8 col-md-8 col-lg-9">
                  <input type="text" class="form-control" data-bind="value: Name" placeholder="Enter log name"><span class="validationMessage" style="display: none;"></span>
                </div>
                <div class="col-xs-5 col-sm-4 col-md-4 col-lg-3">
                  <input type="submit" class="btn btn-default btn-block" data-bind="click: $parent.saveLog" value="Save">
                </div>
              </form>
            </div>

                <div class="checkbox">
                  <label>
                    <input type="checkbox" data-bind="checked: DailyDigestEmail"> Daily Digest Email <span data-toggle="popover" data-trigger="hover" data-container="body" data-content="Daily Digest is a daily email containing a summary of the errors logged within the last 24 hours." class="fa fa-question-circle"></span>
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" data-bind="checked: NewErrorEmail"> New Error Email <span data-toggle="popover" data.........完整代码请登录后点击上方下载按钮下载查看