hezus/empty_html Secret

## empty_html
<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <style>
        html{
            font-family: "Open Sans";
            font-style: normal;
            font-variant: normal;
            font-weight: 500;
            color: #333;
            background: #f5f5f5;
        }
        .row{
            clear: both;
            overflow: hidden;
        }
        h1{
            color: #333;
        }
        h2{
            color: #999;
            padding: 5px;
            line-height: 1.5em;
            margin: 0;
        }
        p{
            text-align: center;
        }
        #table table{
            width: 90%;
            margin: auto;
        }
        #counter_table{
            float: left;
        }
        #counter_table table{
            width: 500px;
            margin-right: 50px;
            margin-top: 40px;
            margin-left: 20px;
        }
        thead tr{
            color: #999;
        }
        tbody tr{
            height: 40px;

        }
        tbody td{
            border-bottom: 1px solid #f5f5f5;
        }
        td .legend{
            border-radius: 50%;
            height: 20px;
            width: 20px;
            display: block;
        }
        th.value{
            width: 30px;
        }
        th{
            text-transform: uppercase;
            font-size: 12px;
            text-align: left;
        }
        .main{
            width: 900px;
            margin: auto;
        }
        .y.axis .tick line {
            stroke-width: 1;
            stroke: rgba(0, 0, 0, 0.2);
        }
        .y.axis path.domain{
            stroke: none;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class="main">
    <h1>Dashboard</h1>

    <!-- We will add the donut and table here -->
    <h2>Total value</h2>
    <div class="row">
        <div id="counter_table"></div>
        <div id="today"></div>
    </div>

    <!-- We will add barchart here -->
    <h2>Sales every month</h2>
    <div class="row">
        <div id="month">
        </div>
    </div>

    <!-- We will add the data table here -->
    <h2>Data</h2>
    <div class="row">
        <div id="table">
        </div>
    </div>

</div>


<script>

    data =
        [
            {year: "2013-01", value: 53, category: "pants"},
            {year: "2013-02", value: 165, category: "pants"},
            {year: "2013-03", value: 269, category: "pants"},
            {year: "2013-04", value: 344, category: "pants"},
            {year: "2013-05", value: 376, category: "shirt"},
            {year: "2013-06", value: 410, category: "shirt"},
            {year: "2013-07", value: 421, category: "shirt"},
            {year: "2013-08", value: 405, category: "shirt"},
            {year: "2013-09", value: 376, category: "shirt"},
            {year: "2013-10", value: 359, category: "shoes"},
            {year: "2013-11", value: 392, category: "shoes"},
            {year: "2013-12", value: 433, category: "shoes"},
            {year: "2014-01", value: 455, category: "shoes"},
            {year: "2014-02", value: 478, category: "shoes"}
        ];

    var	parseDate = d3.timeParse("%Y-%m");

    data.forEach(function(d) {
        d.date = parseDate(d.year);
        d.value = +d.value;
    });


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<style>
	html{
	font-family: "Open Sans";
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	color: #333;
	background: #f5f5f5;
	}
	.row{
	clear: both;
	overflow: hidden;
	}
	h1{
	color: #333;
	}
	h2{
	color: #999;
	padding: 5px;
	line-height: 1.5em;
	margin: 0;
	}
	p{
	text-align: center;
	}
	#table table{
	width: 90%;
	margin: auto;
	}
	#counter_table{
	float: left;
	}
	#counter_table table{
	width: 500px;
	margin-right: 50px;
	margin-top: 40px;
	margin-left: 20px;
	}
	thead tr{
	color: #999;
	}
	tbody tr{
	height: 40px;

	}
	tbody td{
	border-bottom: 1px solid #f5f5f5;
	}
	td .legend{
	border-radius: 50%;
	height: 20px;
	width: 20px;
	display: block;
	}
	th.value{
	width: 30px;
	}
	th{
	text-transform: uppercase;
	font-size: 12px;
	text-align: left;
	}
	.main{
	width: 900px;
	margin: auto;
	}
	.y.axis .tick line {
	stroke-width: 1;
	stroke: rgba(0, 0, 0, 0.2);
	}
	.y.axis path.domain{
	stroke: none;
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<div class="main">
	<h1>Dashboard</h1>

	<!-- We will add the donut and table here -->
	<h2>Total value</h2>
	<div class="row">
	<div id="counter_table"></div>
	<div id="today"></div>
	</div>

	<!-- We will add barchart here -->
	<h2>Sales every month</h2>
	<div class="row">
	<div id="month">
	</div>
	</div>

	<!-- We will add the data table here -->
	<h2>Data</h2>
	<div class="row">
	<div id="table">
	</div>
	</div>

	</div>



	<script>

	data =
	[
	{year: "2013-01", value: 53, category: "pants"},
	{year: "2013-02", value: 165, category: "pants"},
	{year: "2013-03", value: 269, category: "pants"},
	{year: "2013-04", value: 344, category: "pants"},
	{year: "2013-05", value: 376, category: "shirt"},
	{year: "2013-06", value: 410, category: "shirt"},
	{year: "2013-07", value: 421, category: "shirt"},
	{year: "2013-08", value: 405, category: "shirt"},
	{year: "2013-09", value: 376, category: "shirt"},
	{year: "2013-10", value: 359, category: "shoes"},
	{year: "2013-11", value: 392, category: "shoes"},
	{year: "2013-12", value: 433, category: "shoes"},
	{year: "2014-01", value: 455, category: "shoes"},
	{year: "2014-02", value: 478, category: "shoes"}
	];

	var parseDate = d3.timeParse("%Y-%m");

	data.forEach(function(d) {
	d.date = parseDate(d.year);
	d.value = +d.value;
	});


	</script>

	</body>
	</html>