Created
September 21, 2013 11:58
-
-
Save sree0962/6649927 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="A layout example that shows off a blog page with a list of posts."> | |
| <title>Blog – Layout Examples – Pure</title> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css"> | |
| <style type="text/css"> | |
| /******************** | |
| * HTML CSS | |
| */ | |
| .chartWrap { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| /******************** | |
| * TOOLTIP CSS | |
| */ | |
| .nvtooltip { | |
| position: absolute; | |
| background-color: rgba(255,255,255,1); | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| z-index: 10000; | |
| font-family: Arial; | |
| font-size: 13px; | |
| transition: opacity 500ms linear; | |
| -moz-transition: opacity 500ms linear; | |
| -webkit-transition: opacity 500ms linear; | |
| transition-delay: 500ms; | |
| -moz-transition-delay: 500ms; | |
| -webkit-transition-delay: 500ms; | |
| -moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5); | |
| -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5); | |
| box-shadow: 4px 4px 8px rgba(0,0,0,.5); | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| pointer-events: none; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .nvtooltip h3 { | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .nvtooltip p { | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .nvtooltip span { | |
| display: inline-block; | |
| margin: 2px 0; | |
| } | |
| .nvtooltip-pending-removal { | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| /******************** | |
| * SVG CSS | |
| */ | |
| svg { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| /* Trying to get SVG to act like a greedy block in all browsers */ | |
| display: block; | |
| width:100%; | |
| height:100%; | |
| } | |
| svg text { | |
| font: normal 12px Arial; | |
| } | |
| svg .title { | |
| font: bold 14px Arial; | |
| } | |
| .nvd3 .nv-background { | |
| fill: white; | |
| fill-opacity: 0; | |
| /* | |
| pointer-events: none; | |
| */ | |
| } | |
| .nvd3.nv-noData { | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| /********** | |
| * Brush | |
| */ | |
| .nv-brush .extent { | |
| fill-opacity: .125; | |
| shape-rendering: crispEdges; | |
| } | |
| /********** | |
| * Legend | |
| */ | |
| .nvd3 .nv-legend .nv-series { | |
| cursor: pointer; | |
| } | |
| .nvd3 .nv-legend .disabled circle { | |
| fill-opacity: 0; | |
| } | |
| /********** | |
| * Axes | |
| */ | |
| .nvd3 .nv-axis path { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .75; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .nv-axis path.domain { | |
| stroke-opacity: .75; | |
| } | |
| .nvd3 .nv-axis.nv-x path.domain { | |
| stroke-opacity: 0; | |
| } | |
| .nvd3 .nv-axis line { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .25; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .nv-axis line.zero { | |
| stroke-opacity: .75; | |
| } | |
| .nvd3 .nv-axis .nv-axisMaxMin text { | |
| font-weight: bold; | |
| } | |
| .nvd3 .x .nv-axis .nv-axisMaxMin text, | |
| .nvd3 .x2 .nv-axis .nv-axisMaxMin text, | |
| .nvd3 .x3 .nv-axis .nv-axisMaxMin text { | |
| text-anchor: middle | |
| } | |
| /********** | |
| * Brush | |
| */ | |
| .nv-brush .resize path { | |
| fill: #eee; | |
| stroke: #666; | |
| } | |
| /********** | |
| * Bars | |
| */ | |
| .nvd3 .nv-bars .negative rect { | |
| zfill: brown; | |
| } | |
| .nvd3 .nv-bars rect { | |
| zfill: steelblue; | |
| fill-opacity: .75; | |
| transition: fill-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear; | |
| } | |
| .nvd3 .nv-bars rect:hover { | |
| fill-opacity: 1; | |
| } | |
| .nvd3 .nv-bars .hover rect { | |
| fill: lightblue; | |
| } | |
| .nvd3 .nv-bars text { | |
| fill: rgba(0,0,0,0); | |
| } | |
| .nvd3 .nv-bars .hover text { | |
| fill: rgba(0,0,0,1); | |
| } | |
| /********** | |
| * Bars | |
| */ | |
| .nvd3 .nv-multibar .nv-groups rect, | |
| .nvd3 .nv-multibarHorizontal .nv-groups rect, | |
| .nvd3 .nv-discretebar .nv-groups rect { | |
| stroke-opacity: 0; | |
| transition: fill-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear; | |
| } | |
| .nvd3 .nv-multibar .nv-groups rect:hover, | |
| .nvd3 .nv-multibarHorizontal .nv-groups rect:hover, | |
| .nvd3 .nv-discretebar .nv-groups rect:hover { | |
| fill-opacity: 1; | |
| } | |
| .nvd3 .nv-discretebar .nv-groups text, | |
| .nvd3 .nv-multibarHorizontal .nv-groups text { | |
| font-weight: bold; | |
| fill: rgba(0,0,0,1); | |
| stroke: rgba(0,0,0,0); | |
| } | |
| /*********** | |
| * Pie Chart | |
| */ | |
| .nvd3.nv-pie path { | |
| stroke-opacity: 0; | |
| transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| } | |
| .nvd3.nv-pie .nv-slice text { | |
| stroke: #000; | |
| stroke-width: 0; | |
| } | |
| .nvd3.nv-pie path { | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| stroke-opacity: 1; | |
| } | |
| .nvd3.nv-pie .hover path { | |
| fill-opacity: .7; | |
| /* | |
| stroke-width: 6px; | |
| stroke-opacity: 1; | |
| */ | |
| } | |
| .nvd3.nv-pie .nv-label rect { | |
| fill-opacity: 0; | |
| stroke-opacity: 0; | |
| } | |
| /********** | |
| * Lines | |
| */ | |
| .nvd3 .nv-groups path.nv-line { | |
| fill: none; | |
| stroke-width: 2.5px; | |
| /* | |
| stroke-linecap: round; | |
| shape-rendering: geometricPrecision; | |
| transition: stroke-width 250ms linear; | |
| -moz-transition: stroke-width 250ms linear; | |
| -webkit-transition: stroke-width 250ms linear; | |
| transition-delay: 250ms | |
| -moz-transition-delay: 250ms; | |
| -webkit-transition-delay: 250ms; | |
| */ | |
| } | |
| .nvd3 .nv-groups path.nv-area { | |
| stroke: none; | |
| /* | |
| stroke-linecap: round; | |
| shape-rendering: geometricPrecision; | |
| stroke-width: 2.5px; | |
| transition: stroke-width 250ms linear; | |
| -moz-transition: stroke-width 250ms linear; | |
| -webkit-transition: stroke-width 250ms linear; | |
| transition-delay: 250ms | |
| -moz-transition-delay: 250ms; | |
| -webkit-transition-delay: 250ms; | |
| */ | |
| } | |
| .nvd3 .nv-line.hover path { | |
| stroke-width: 6px; | |
| } | |
| /* | |
| .nvd3.scatter .groups .point { | |
| fill-opacity: 0.1; | |
| stroke-opacity: 0.1; | |
| } | |
| */ | |
| .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { | |
| fill-opacity: 0; | |
| stroke-opacity: 0; | |
| } | |
| .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { | |
| fill-opacity: .5 !important; | |
| stroke-opacity: .5 !important; | |
| } | |
| .nvd3 .nv-groups .nv-point { | |
| transition: stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| } | |
| .nvd3.nv-scatter .nv-groups .nv-point.hover, | |
| .nvd3 .nv-groups .nv-point.hover { | |
| stroke-width: 20px; | |
| fill-opacity: .5 !important; | |
| stroke-opacity: .5 !important; | |
| } | |
| .nvd3 .nv-point-paths path { | |
| stroke: #aaa; | |
| stroke-opacity: 0; | |
| fill: #eee; | |
| fill-opacity: 0; | |
| } | |
| .nvd3 .nv-indexLine { | |
| cursor: ew-resize; | |
| } | |
| /********** | |
| * Distribution | |
| */ | |
| .nvd3 .nv-distribution { | |
| pointer-events: none; | |
| } | |
| /********** | |
| * Scatter | |
| */ | |
| /* **Attempting to remove this for useVoronoi(false), need to see if it's required anywhere | |
| .nvd3 .nv-groups .nv-point { | |
| pointer-events: none; | |
| } | |
| */ | |
| .nvd3 .nv-groups .nv-point.hover { | |
| stroke-width: 20px; | |
| stroke-opacity: .5; | |
| } | |
| .nvd3 .nv-scatter .nv-point.hover { | |
| fill-opacity: 1; | |
| } | |
| /* | |
| .nv-group.hover .nv-point { | |
| fill-opacity: 1; | |
| } | |
| */ | |
| /********** | |
| * Stacked Area | |
| */ | |
| .nvd3.nv-stackedarea path.nv-area { | |
| fill-opacity: .7; | |
| /* | |
| stroke-opacity: .65; | |
| fill-opacity: 1; | |
| */ | |
| stroke-opacity: 0; | |
| transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; | |
| /* | |
| transition-delay: 500ms; | |
| -moz-transition-delay: 500ms; | |
| -webkit-transition-delay: 500ms; | |
| */ | |
| } | |
| .nvd3.nv-stackedarea path.nv-area.hover { | |
| fill-opacity: .9; | |
| /* | |
| stroke-opacity: .85; | |
| */ | |
| } | |
| /* | |
| .d3stackedarea .groups path { | |
| stroke-opacity: 0; | |
| } | |
| */ | |
| .nvd3.nv-stackedarea .nv-groups .nv-point { | |
| stroke-opacity: 0; | |
| fill-opacity: 0; | |
| } | |
| .nvd3.nv-stackedarea .nv-groups .nv-point.hover { | |
| stroke-width: 20px; | |
| stroke-opacity: .75; | |
| fill-opacity: 1; | |
| } | |
| /********** | |
| * Line Plus Bar | |
| */ | |
| .nvd3.nv-linePlusBar .nv-bar rect { | |
| fill-opacity: .75; | |
| } | |
| .nvd3.nv-linePlusBar .nv-bar rect:hover { | |
| fill-opacity: 1; | |
| } | |
| /********** | |
| * Bullet | |
| */ | |
| .nvd3.nv-bullet { font: 10px sans-serif; } | |
| .nvd3.nv-bullet .nv-measure { fill-opacity: .8; } | |
| .nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; } | |
| .nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; } | |
| .nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; } | |
| .nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; } | |
| .nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; } | |
| .nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; } | |
| .nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; } | |
| .nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; } | |
| .nvd3.nv-bullet .nv-subtitle { fill: #999; } | |
| .nvd3.nv-bullet .nv-range { | |
| fill: #999; | |
| fill-opacity: .4; | |
| } | |
| .nvd3.nv-bullet .nv-range:hover { | |
| fill-opacity: .7; | |
| } | |
| /********** | |
| * Sparkline | |
| */ | |
| .nvd3.nv-sparkline path { | |
| fill: none; | |
| } | |
| .nvd3.nv-sparklineplus g.nv-hoverValue { | |
| pointer-events: none; | |
| } | |
| .nvd3.nv-sparklineplus .nv-hoverValue line { | |
| stroke: #333; | |
| stroke-width: 1.5px; | |
| } | |
| .nvd3.nv-sparklineplus, | |
| .nvd3.nv-sparklineplus g { | |
| pointer-events: all; | |
| } | |
| .nvd3 .nv-hoverArea { | |
| fill-opacity: 0; | |
| stroke-opacity: 0; | |
| } | |
| .nvd3.nv-sparklineplus .nv-xValue, | |
| .nvd3.nv-sparklineplus .nv-yValue { | |
| /* | |
| stroke: #666; | |
| */ | |
| stroke-width: 0; | |
| font-size: .9em; | |
| font-weight: normal; | |
| } | |
| .nvd3.nv-sparklineplus .nv-yValue { | |
| stroke: #f66; | |
| } | |
| .nvd3.nv-sparklineplus .nv-maxValue { | |
| stroke: #2ca02c; | |
| fill: #2ca02c; | |
| } | |
| .nvd3.nv-sparklineplus .nv-minValue { | |
| stroke: #d62728; | |
| fill: #d62728; | |
| } | |
| .nvd3.nv-sparklineplus .nv-currentValue { | |
| /* | |
| stroke: #444; | |
| fill: #000; | |
| */ | |
| font-weight: bold; | |
| font-size: 1.1em; | |
| } | |
| /********** | |
| * historical stock | |
| */ | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick { | |
| stroke-width: 2px; | |
| } | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover { | |
| stroke-width: 4px; | |
| } | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive { | |
| stroke: #2ca02c; | |
| } | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative { | |
| stroke: #d62728; | |
| } | |
| .nvd3.nv-historicalStockChart .nv-axis .nv-axislabel { | |
| font-weight: bold; | |
| } | |
| .nvd3.nv-historicalStockChart .nv-dragTarget { | |
| fill-opacity: 0; | |
| stroke: none; | |
| cursor: move; | |
| } | |
| .nvd3 .nv-brush .extent { | |
| /* | |
| cursor: ew-resize !important; | |
| */ | |
| fill-opacity: 0 !important; | |
| } | |
| .nvd3 .nv-brushBackground rect { | |
| stroke: #000; | |
| stroke-width: .4; | |
| fill: #fff; | |
| fill-opacity: .7; | |
| } | |
| /********** | |
| * Indented Tree | |
| */ | |
| /** | |
| * TODO: the following 3 selectors are based on classes used in the example. I should either make them standard and leave them here, or move to a CSS file not included in the library | |
| */ | |
| .nvd3.nv-indentedtree .name { | |
| margin-left: 5px; | |
| } | |
| .nvd3.nv-indentedtree .clickable { | |
| color: #08C; | |
| cursor: pointer; | |
| } | |
| .nvd3.nv-indentedtree span.clickable:hover { | |
| color: #005580; | |
| text-decoration: underline; | |
| } | |
| .nvd3.nv-indentedtree .nv-childrenCount { | |
| display: inline-block; | |
| margin-left: 5px; | |
| } | |
| .nvd3.nv-indentedtree .nv-treeicon { | |
| cursor: pointer; | |
| /* | |
| cursor: n-resize; | |
| */ | |
| } | |
| .nvd3.nv-indentedtree .nv-treeicon.nv-folded { | |
| cursor: pointer; | |
| /* | |
| cursor: s-resize; | |
| */ | |
| } | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .pure-button-warning { | |
| background: rgb(223, 117, 20); /* this is an orange */ | |
| } | |
| #vulnerability_list{ | |
| display: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: rgb(142, 142, 214); | |
| } | |
| a:hover, | |
| a:focus { | |
| text-decoration: underline; | |
| } | |
| /* progress bar */ | |
| .progress { | |
| height: 20px; | |
| margin-bottom: 20px; | |
| overflow: hidden; | |
| background-color: #f7f7f7; | |
| background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); | |
| background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); | |
| background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); | |
| background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); | |
| background-repeat: repeat-x; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); | |
| -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
| -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
| box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress .bar { | |
| float: left; | |
| width: 0; | |
| height: 100%; | |
| font-size: 12px; | |
| color: #ffffff; | |
| text-align: center; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
| background-color: #0e90d2; | |
| background-image: -moz-linear-gradient(top, #149bdf, #0480be); | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); | |
| background-image: -webkit-linear-gradient(top, #149bdf, #0480be); | |
| background-image: -o-linear-gradient(top, #149bdf, #0480be); | |
| background-image: linear-gradient(to bottom, #149bdf, #0480be); | |
| background-repeat: repeat-x; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); | |
| -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: width 0.6s ease; | |
| -moz-transition: width 0.6s ease; | |
| -o-transition: width 0.6s ease; | |
| transition: width 0.6s ease; | |
| } | |
| .progress .bar + .bar { | |
| -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| } | |
| .progress.active .bar { | |
| -webkit-animation: progress-bar-stripes 2s linear infinite; | |
| -moz-animation: progress-bar-stripes 2s linear infinite; | |
| -ms-animation: progress-bar-stripes 2s linear infinite; | |
| -o-animation: progress-bar-stripes 2s linear infinite; | |
| animation: progress-bar-stripes 2s linear infinite; | |
| } | |
| .progress-danger .bar, | |
| .progress .bar-danger { | |
| background-color: #dd514c; | |
| background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); | |
| background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); | |
| background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); | |
| background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); | |
| background-repeat: repeat-x; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); | |
| } | |
| .progress-success .bar, | |
| .progress .bar-success { | |
| background-color: #5eb95e; | |
| background-image: -moz-linear-gradient(top, #62c462, #57a957); | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); | |
| background-image: -webkit-linear-gradient(top, #62c462, #57a957); | |
| background-image: -o-linear-gradient(top, #62c462, #57a957); | |
| background-image: linear-gradient(to bottom, #62c462, #57a957); | |
| background-repeat: repeat-x; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); | |
| } | |
| .progress-warning .bar, | |
| .progress .bar-warning { | |
| background-color: #faa732; | |
| background-image: -moz-linear-gradient(top, #fbb450, #f89406); | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); | |
| background-image: -webkit-linear-gradient(top, #fbb450, #f89406); | |
| background-image: -o-linear-gradient(top, #fbb450, #f89406); | |
| background-image: linear-gradient(to bottom, #fbb450, #f89406); | |
| background-repeat: repeat-x; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); | |
| } | |
| /* LAYOUT CSS */ | |
| #layout { | |
| padding-left: 25%; /* "left col (nav + list)" width */ | |
| position: relative; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| width: 25%; | |
| margin-left: -25%; | |
| background: rgb(24, 33, 61); | |
| color: #fff; | |
| } | |
| .header { | |
| margin: 50% 2em 0; | |
| text-align: left; | |
| } | |
| .brand-title, | |
| .brand-tagline { | |
| margin: 0; | |
| } | |
| .brand-title { | |
| text-transform: uppercase; | |
| } | |
| .brand-tagline { | |
| font-weight: 300; | |
| color: rgb(142, 142, 214); | |
| } | |
| .nav-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .nav-item { | |
| display: inline-block; | |
| *display: inline; | |
| zoom: 1; | |
| } | |
| .nav-item a { | |
| background: transparent; | |
| border: 3px solid rgb(103, 103, 180); | |
| color: #fff; | |
| margin-top: 1em; | |
| } | |
| .nav-item a:hover, | |
| .nav-item a:focus { | |
| border: 3px solid rgb(142, 142, 214); | |
| color: rgb(142, 142, 214); | |
| text-decoration: none; | |
| } | |
| .content-subhead { | |
| text-transform: uppercase; | |
| color: #aaa; | |
| border-bottom: 1px solid #eee; | |
| padding: 0.4em 0; | |
| font-size: 80%; | |
| font-weight: 500; | |
| letter-spacing: 0.1em; | |
| } | |
| .content { | |
| padding: 2em 3em 0; | |
| } | |
| .post { | |
| padding-bottom: 2em; | |
| } | |
| .post-title { | |
| font-size: 2em; | |
| color: #222; | |
| margin-bottom: 0.2em; | |
| } | |
| .post-avatar { | |
| border-radius: 50px; | |
| float: right; | |
| margin-left: 1em; | |
| } | |
| .post-description { | |
| font-family: Georgia, "Cambria", serif; | |
| color: #444; | |
| line-height: 1.8em; | |
| } | |
| .post-meta { | |
| color: #999; | |
| font-size: 90%; | |
| margin: 0; | |
| } | |
| .enprobe-category { | |
| margin: 0 0.1em; | |
| padding: 0.3em 1em; | |
| color: #fff; | |
| background: #999; | |
| font-size: 80%; | |
| } | |
| .enprobe-category-design { | |
| background: #5aba59; | |
| } | |
| .enprobe-category-pure { | |
| background: #4d85d1; | |
| } | |
| .enprobe-category-yui { | |
| background: #8156a7; | |
| } | |
| .enprobe-category-js { | |
| background: #c0392b; | |
| } | |
| .enprobe-category-issue { | |
| background: #e67e22; | |
| } | |
| .post-images { | |
| margin: 1em 0; | |
| } | |
| .post-image-meta { | |
| margin-top: -3.5em; | |
| margin-left: 1em; | |
| color: #fff; | |
| text-shadow: 0 1px 1px #333; | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 1em 0; | |
| } | |
| .footer a { | |
| color: #ccc; | |
| font-size: 80%; | |
| } | |
| .footer .pure-menu a:hover, | |
| .footer .pure-menu a:focus { | |
| background: none; | |
| } | |
| @media (max-width: 767px) { | |
| .sidebar { | |
| width: 100%; | |
| position: relative; | |
| margin: 0; | |
| } | |
| .header { | |
| text-align: left; | |
| top: auto; | |
| margin: 3em auto; | |
| position: static; | |
| } | |
| #layout { | |
| padding: 0; | |
| } | |
| @media (max-width: 480px) { | |
| .content { | |
| padding: 2em 1em 0; | |
| } | |
| } | |
| } | |
| </style> | |
| <script src="Enprobe_Libraries/lib/d3.v2.js"></script> | |
| <script src="Enprobe_Libraries/js/nv.d3.min.js"></script> | |
| <!-- <script src="Enprobe_Libraries/src/models/legend.js"></script> | |
| <script src="Enprobe_Libraries/src/models/pie.js"></script> | |
| <script src="Enprobe_Libraries/src/models/pieChart.js"></script> | |
| <script src="Enprobe_Libraries/src/utils.js"></script> | |
| <script src="http://use.typekit.net/gis6vng.js"></script> --> | |
| <script> | |
| try { Typekit.load(); } catch (e) {} | |
| </script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> | |
| </script> | |
| <script> | |
| $(document).ready(function(){ | |
| $("#vulnerability").click(function(){ | |
| $("#vulnerability_list").slideToggle(1000); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var testdata1 = [ | |
| { | |
| key: "High", | |
| y: 1 | |
| }, | |
| { | |
| key: "Medium", | |
| y: 1 | |
| }, | |
| { | |
| key: "Low", | |
| y: 1 | |
| }, | |
| { | |
| key: "Informational", | |
| y: 31 | |
| } | |
| ]; | |
| var testdata2 = [ | |
| { | |
| key: "Form", | |
| y: 2 | |
| }, | |
| { | |
| key: "Link", | |
| y: 0 | |
| }, | |
| { | |
| key: "Cookie", | |
| y: 4 | |
| }, | |
| { | |
| key: "Header", | |
| y: 0 | |
| }, | |
| { | |
| key: "Body", | |
| y: 0 | |
| }, | |
| { | |
| key: "Path", | |
| y: 2 | |
| }, | |
| { | |
| key: "Server", | |
| y: 26 | |
| } | |
| ]; | |
| var testdata3 = [ | |
| { | |
| key: "Safe", | |
| y: 149 | |
| }, | |
| { | |
| key: "Unsafe", | |
| y: 30 | |
| } | |
| ]; | |
| var chart; | |
| nv.addGraph(function() { | |
| var width = 500, | |
| height = 500; | |
| chart = nv.models.pieChart() | |
| .x(function(d) { return d.key }) | |
| .y(function(d) { return d.y }) | |
| //.showLabels(false) | |
| .values(function(d) { return d }) | |
| .color(['#c0392b', '#e67e22', '#5aba59','#4d85d1']) | |
| .width(width) | |
| .height(height); | |
| d3.select("#test1") | |
| .datum([testdata1]) | |
| .transition().duration(1200) | |
| .attr('width', width) | |
| .attr('height', height) | |
| .call(chart); | |
| chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); | |
| return chart; | |
| }); | |
| nv.addGraph(function() { | |
| var width = 500, | |
| height = 500; | |
| var chart = nv.models.pieChart() | |
| .x(function(d) { return d.key }) | |
| //.y(function(d) { return d.value }) | |
| .values(function(d) { return d }) | |
| //.labelThreshold(.08) | |
| //.showLabels(false) | |
| .color(d3.scale.category10().range()) | |
| .width(width) | |
| .height(height); | |
| d3.select("#test2") | |
| //.datum(historicalBarChart) | |
| .datum([testdata2]) | |
| .transition().duration(1200) | |
| .attr('width', width) | |
| .attr('height', height) | |
| .call(chart); | |
| return chart; | |
| }); | |
| nv.addGraph(function() { | |
| var width = 500, | |
| height = 500; | |
| var chart = nv.models.pieChart() | |
| .x(function(d) { return d.key }) | |
| //.y(function(d) { return d.value }) | |
| .values(function(d) { return d }) | |
| //.labelThreshold(.08) | |
| //.showLabels(false) | |
| .color(d3.scale.category10().range()) | |
| .width(width) | |
| .height(height); | |
| d3.select("#test3") | |
| //.datum(historicalBarChart) | |
| .datum([testdata3]) | |
| .transition().duration(1200) | |
| .attr('width', width) | |
| .attr('height', height) | |
| .call(chart); | |
| return chart; | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="pure-g-r" id="layout"> | |
| <div class="sidebar pure-u"> | |
| <header class="header"> | |
| <hgroup> | |
| <h1 class="brand-title">Enprobe Report</h1> | |
| </hgroup> | |
| <h3><a href="http://www.eventbee.com" target="_blank">http://www.eventbee.com</a> [23.23.106.63]</h3> | |
| <p class="lead">Enprobe audited the <a href="http://www.eventbee.com" target="_blank">target</a> for <span>01:21:51, </span>crawled through pages and found <b>34</b> issues of which 1 are critical, 1 medium, 1 low and 31 Informational Issues.</p> | |
| <nav class="nav"> | |
| <ul class="nav-list"> | |
| <li class="nav-item"> | |
| <a class="pure-button" href="#issues">Issues</a> | |
| <a class="pure-button" href="#detail">The Detailed Report</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h4>Health Map</h4> | |
| <div class="progress"> | |
| <div class="bar bar-success" style="width: 0%;"></div> | |
| <div class="bar bar-danger" style="width: 100%;"></div> | |
| </div> | |
| <p><span class="enprobe-category enprobe-category-design">Healthy</span> <span class="enprobe-category enprobe-category-js">Unhealthy</span></p> | |
| </header> | |
| </div> | |
| <div class="pure-u-1"> | |
| <div class="content"> | |
| <!-- A wrapper for all the blog posts --> | |
| <div class="posts"> | |
| <!-- A single blog post --> | |
| <section class="post"> | |
| <header class="post-header"> | |
| <!-- <img class="post-avatar" | |
| alt="Tilo Mitra's avatar" src="/img/common/tilo-avatar.png" | |
| height="48" width="48"> --> | |
| <button class="pure-button pure-button-warning" id="vulnerability">Kinds of Vulnerabilities scanned</button> | |
| </header> | |
| <div class="post-description" id="vulnerability_list"> | |
| <dl> | |
| <dt class="enprobe-category enprobe-category-pure">CSRF</dt> | |
| <dd>Cross Site Request Forgery</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Session Fixation</dt> | |
| <dd>Session Fixation is an attack that permits an attacker to hijack a valid user session</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Blind SQL Injection</dt> | |
| <dd>Blind SQL Injection is used when a web application is vulnerable to an SQL injection but the results of the injection are not visible to the attacker.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">XSS</dt> | |
| <dd>cross site scripting,this vulnerability allows that enables attackers to inject client-side script into Web pages viewed by other users</dd> | |
| <dt class="enprobe-category enprobe-category-pure">SQLI</dt> | |
| <dd>Structured Query Language injection,Sql injection is a flaw in " web application" development</dd> | |
| <dt class="enprobe-category enprobe-category-pure">XPATH</dt> | |
| <dd>xml path injection,Similar to SQL Injection, XPath Injection attacks occur when a web site uses user-supplied information to construct an XPath query for XML data</dd> | |
| <dt class="enprobe-category enprobe-category-pure">LDAPI</dt> | |
| <dd>LDAP Injection is an attack used to exploit web based applications that construct LDAP statements based on user input.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">CODE Injection</dt> | |
| <dd>Code injection is the exploitation of a computer bug that is caused by processing invalid data. Code injection can be used by an attacker to introduce (or "inject") code into acomputer program to change the course of execution.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Response Splitting</dt> | |
| <dd>HTTP response splitting is a form of web application vulnerability, resulting from the failure of the application</dd> | |
| <dt class="enprobe-category enprobe-category-pure">OS Command Injection</dt> | |
| <dd>OS command injection is a technique used via a web interface in order to execute OS commands on a web server</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Remote File Injection</dt> | |
| <dd>Remote file inclusion,attacker to adt a remote file on the web server</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Path Traversal</dt> | |
| <dd>A Path Traversal attack aims to access files and directories that are stored outside the web root folder.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Unvalidated Redirect</dt> | |
| <dd>A web application accepts a user-controlled input that specifies a link to an external site, and uses that link in a Redirect. This simplifies phishing attacks</dd> | |
| <dt class="enprobe-category enprobe-category-pure">HTTP Only Cookies</dt> | |
| <dd>If the HttpOnly flag (optional) is included in the HTTP response header, the cookie cannot be accessed through client side script . As a result,even if a cross-site scripting (XSS) flaw exist</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Mixed Resource</dt> | |
| <dd>Attackers may use this information to modify data during transit, such as the images or script files, and thus compromise the entire encryption chain</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Insecure Cookies</dt> | |
| <dd>If the cookie transport security is not set up properly, the hacker can access sensitive information stored in those cookies</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Unencrypted Passwords</dt> | |
| <dd>By using this vulnerability the attcker sniff the username and paswords in clear text format</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Common Files</dt> | |
| <dd>By making educated guesses via brute forcing an attacker can guess file and directory names not intended for public viewing. Brute forcing filenames is easy because files/paths often have common naming convention and reside in standard location.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">HTTP PUT</dt> | |
| <dd>PUT is an HTTP (Hypertext Transfer Protocol) method, like GET or POST, defined in RFC 1945. This method allows a client to submit data to be saved on the Web server as the file name specified by the URI, or to update a file on the Web server with new data.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Interesting Response</dt> | |
| <dd>database query errors,content incorrectly typed errors,forbidden,Restricted access,</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Htaccess Limit</dt> | |
| <dd>During this test we analyze your website’s .htaccess file for insecure configurations such as HTTP verb tampering</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Backup Files</dt> | |
| <dd>A possible backup file was found on your webserver. These files are usually created by developers to backup their work.Backup files can contain script sources, configuration files or other sensitive information that may help an malicious user to prepare more advanced attacks.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Backdoors</dt> | |
| <dd>A backdoor in a computer system (or cryptosystem or algorithm) is a method of bypassing normal authentication, securing illegal remote access to a computer, obtaining access to plaintext, and so on, while attempting to remain undetected. The backdoor may take the form of an installed program (e.g., Back Orifice) or may subvert the system through arootkit.</dd> | |
| <dt class="enprobe-category enprobe-category-pure">Allowed Methods</dt> | |
| <dd>Attackers may abuse HTTP OPTIONS functionality to gain access to information in HTTP headers such as cookies and authentication data. In the presence of other cross-domain vulnerabilities in web browsers, sensitive header information could be read from any domains.</dd> | |
| </dl> | |
| </div> | |
| </section> | |
| </div> | |
| <a name="detail"></a> | |
| <div class="posts"> | |
| <h1 class="content-subhead">Report Details</h1> | |
| <section class="post"> | |
| <header class="post-header"> | |
| <p class="post-avatar"><svg id="test1"></svg></p> | |
| <h2 class="post-title">Security Levels</h2> | |
| <p class="post-meta"> | |
| By <a class="post-author" href="#">Eric Ferraiuolo</a> under <a class="enprobe-category enprobe-category-js" href="#">JavaScript</a> | |
| </p> | |
| </header> | |
| <div class="post-description"> | |
| <p>The Severity of the issues directly implicates the threat of being hacked with these entry points. Enprobes audit resulted in <b>27</b> issues.</p><p> Of which there exists.</p> | |
| <ul class="nav-list"> | |
| <li class="nav-list"><p><b>1</b> <a href="#high" style="text-decoration:none; color: #000;"><span class="enprobe-category enprobe-category-js">High</span> Level Issues</a></p></li> | |
| <li class="nav-list"><p><b>1</b> <a href="#medium" style="text-decoration:none; color: #000;"><span class="enprobe-category enprobe-category-issue">Medium</span> Level Issues</a></p></li> | |
| <li class="nav-list"><p><b>1</b> <a href="#low" style="text-decoration:none; color: #000;"><span class="enprobe-category enprobe-category-design">Low</span> Level Issues</a></p></li> | |
| <li class="nav-list"><p><b>31</b> <a href="#informational" style="text-decoration:none; color: #000;"><span class="enprobe-category enprobe-category-pure">Informational</span> Level Issues</a></p></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <a name="issues"></a> | |
| <section class="post"> | |
| <header class="post-header"> | |
| <p class="post-avatar"><svg id="test2"></svg></p> | |
| <h2 class="post-title">Issues by elements</h2> | |
| <p class="post-meta"> | |
| By <a class="post-author" href="#">Reid Burke</a> under <a class="enprobe-category" href="#">Uncategorized</a> | |
| </p> | |
| </header> | |
| <div class="post-description"> | |
| <p>The issues of any web application commonly fall under 7 elements.</p> | |
| <table> | |
| <th>Element</th> | |
| <th>Description</th> | |
| <tr> | |
| <td>Form</td> | |
| <td>Forms are the usual entry point to the application or to the database.</td> | |
| </tr> | |
| <tr> | |
| <td>Link</td> | |
| <td>Links are reference to another location, Links may refer to some sensitive information</td> | |
| </tr> | |
| <tr> | |
| <td>Cookie</td> | |
| <td>Cookies are variables stored in the clients machine to maintain a session or token of transaction</td> | |
| </tr> | |
| <tr> | |
| <td>Header</td> | |
| <td>Header refers to response header, which may reveal the internal software architecture.</td> | |
| </tr> | |
| <tr> | |
| <td>Body</td> | |
| <td>Body may reveal some improper issues inside the web application.</td> | |
| </tr> | |
| <tr> | |
| <td>Path</td> | |
| <td>Path is the url of a specific resource which may be indeed sensitive.</td> | |
| </tr> | |
| <tr> | |
| <td>Server</td> | |
| <td>Server refers to the server issues returned by specific probes.</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- <section class="post"> | |
| <header class="post-header"> | |
| <img class="post-avatar" | |
| alt="Andrew Wooldridge's avatar" src="/img/common/andrew-avatar.png" | |
| height="48" width="48"> | |
| <h2 class="post-title">YUI 3.10.2 Released</h2> | |
| <p class="post-meta"> | |
| By <a class="post-author" href="#">Andrew Wooldridge</a> under <a class="enprobe-category enprobe-category-yui" href="#">YUI</a> | |
| </p> | |
| </header> | |
| <div class="post-description"> | |
| <p> | |
| We are happy to announce the release of YUI 3.10.2! You can find it now on the Yahoo! CDN, download it directly, or pull it in via npm. We’ve also updated the YUI Library website with the latest documentation. | |
| </p> | |
| </div> | |
| </section> | |
| </div> | |
| <footer class="footer"> | |
| <div class="pure-menu pure-menu-horizontal pure-menu-open"> | |
| <ul> | |
| <li><a href="http://purecss.io/">About</a></li> | |
| <li><a href="http://twitter.com/yuilibrary/">Twitter</a></li> | |
| <li><a href="http://github.com/yui/pure/">Github</a></li> | |
| </ul> | |
| </div> | |
| </footer> --> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment