update

css/metricsgraphics.min.css

@@ -0,0 +1 @@
+.mg-active-datapoint{fill:#000;font-size:.9rem;font-weight:400;opacity:.8}.mg-area1-color{fill:#00f}.mg-area2-color{fill:#05b378}.mg-area3-color{fill:#db4437}.mg-area4-color{fill:#f8b128}.mg-area5-color{fill:#5c5c5c}text.mg-barplot-group-label{font-weight:900}.mg-barplot rect.mg-bar{shape-rendering:auto}.mg-barplot rect.mg-bar.default-bar{fill:#b6b6fc}.mg-barplot rect.mg-bar.default-active{fill:#9e9efc}.mg-barplot .mg-bar-prediction{fill:#5b5b5b}.mg-barplot .mg-bar-baseline{stroke:#5b5b5b;stroke-width:2}.mg-bar-target-element{font-size:11px;padding-left:5px;padding-right:5px;font-weight:300}.mg-baselines line{opacity:1;shape-rendering:auto;stroke:#b3b2b2;stroke-width:1px}.mg-baselines text{fill:#000;font-size:.9rem;opacity:.6;stroke:none}.mg-baselines-small text{font-size:.6rem}.mg-category-guides line{stroke:#b3b2b2}.mg-header{cursor:default;font-size:1.2rem}.mg-header .mg-chart-description,.mg-header .mg-warning{fill:#ccc;font-family:FontAwesome;font-size:1.2rem}.mg-points circle{opacity:.65}.mg-popover{font-size:.95rem}.mg-popover-content{cursor:auto;line-height:17px}.mg-data-table{margin-top:30px}.mg-data-table thead tr th{border-bottom:1px solid #a9a9a9;cursor:default;font-size:1.1rem;font-weight:400;padding:5px 5px 8px;text-align:right}.mg-data-table thead tr th .fa{color:#ccc;padding-left:4px}.mg-data-table thead tr th .popover{font-size:1rem;font-weight:400}.mg-data-table .secondary-title{color:#a9a9a9}.mg-data-table tbody tr td{margin:2px;padding:5px;vertical-align:top}.mg-data-table tbody tr td.table-text{opacity:.8;padding-left:30px}.mg-x-axis line.mg-extended-xax-ticks,.mg-y-axis line.mg-extended-yax-ticks{opacity:.4}.mg-histogram .axis line,.mg-histogram .axis path{fill:none;opacity:.7;shape-rendering:auto;stroke:#ccc}tspan.hist-symbol{fill:#9e9efc}.mg-histogram .mg-bar rect{fill:#b6b6fc;shape-rendering:auto}.mg-histogram .mg-bar rect.active{fill:#9e9efc}.mg-least-squares-line{stroke:red;stroke-width:1px}.mg-lowess-line{fill:none;stroke:red}.mg-line1-color{stroke:#4040e8}.mg-hover-line1-color{fill:#4040e8}.mg-line2-color{stroke:#05b378}.mg-hover-line2-color{fill:#05b378}.mg-line3-color{stroke:#db4437}.mg-hover-line3-color{fill:#db4437}.mg-line4-color{stroke:#f8b128}.mg-hover-line4-color{fill:#f8b128}.mg-line5-color{stroke:#5c5c5c}.mg-hover-line5-color{fill:#5c5c5c}.mg-line-legend text{font-size:.9rem;font-weight:300;stroke:none}.mg-line1-legend-color{color:#4040e8;fill:#4040e8}.mg-line2-legend-color{color:#05b378;fill:#05b378}.mg-line3-legend-color{color:#db4437;fill:#db4437}.mg-line4-legend-color{color:#f8b128;fill:#f8b128}.mg-line5-legend-color{color:#5c5c5c;fill:#5c5c5c}.mg-main-area-solid svg .mg-main-area{fill:#ccf;opacity:1}.mg-markers line{opacity:1;shape-rendering:auto;stroke:#b3b2b2;stroke-width:1px}.mg-markers text{fill:#000;font-size:.8rem;opacity:.6}.mg-missing-text{opacity:.9}.mg-missing-background{stroke:#00f;fill:none;stroke-dasharray:10,5;stroke-opacity:.05;stroke-width:2}.mg-missing .mg-main-line{opacity:.1}.mg-missing .mg-main-area{opacity:.03}path.mg-main-area{opacity:.2;stroke:none}path.mg-confidence-band{fill:#ccc;opacity:.4;stroke:none}path.mg-main-line{fill:none;opacity:.8;stroke-width:1.1px}.mg-points circle{fill-opacity:.4;stroke-opacity:1}circle.mg-points-mono,tspan.mg-points-mono{fill:#00f;stroke:#00f}.mg-points circle.selected{fill-opacity:1;stroke-opacity:1}.mg-voronoi path{fill:none;pointer-events:all;stroke:none;stroke-opacity:.1}.mg-x-rug-mono,.mg-y-rug-mono{stroke:#000}.mg-x-axis line,.mg-y-axis line{opacity:1;shape-rendering:auto;stroke:#b3b2b2;stroke-width:1px}.mg-histogram .axis text,.mg-x-axis text,.mg-y-axis text{fill:#000;font-size:.9rem;opacity:.6}.mg-axis .label,.mg-x-axis .label,.mg-y-axis .label{font-size:.8rem;text-transform:uppercase;font-weight:400}.mg-active-datapoint-small,.mg-x-axis-small text,.mg-y-axis-small text{font-size:.6rem}.mg-x-axis-small .label,.mg-y-axis-small .label{font-size:.65rem}.mg-year-marker text{fill:#000;font-size:.7rem;opacity:.6}.mg-year-marker line{opacity:1;shape-rendering:auto;stroke:#b3b2b2;stroke-width:1px}.mg-year-marker-small text{font-size:.6rem}

css/statbate.css

@@ -16,7 +16,7 @@ body {
 }
 
 .header_menu {
-width: 100%; 
+	width: 100%; 
     display: flex;
     padding: 0.5rem 1rem;
     align-items: center;
@@ -65,8 +65,13 @@ width: 100%;
 .content {
 	margin-top: 12px;
 	background: #fff;
-	height: 250px;
 	border-radius: 8px;
+	padding: 12px;
+}
+
+.income_chart {
+	height: 180px;
+	border-bottom: 1px solid #dee2e6;
 }
 
 .footer {
@@ -186,6 +191,7 @@ width: 100%;
 }
 
 @media (max-width: 805px) {
+	.income_chart,
 	.header {
 		display: none;
 	}

index.html

@@ -11,17 +11,13 @@
 		<!-- CSS -->
 		<link rel="stylesheet" href="./css/normalize.css">
 		<link rel="stylesheet" href="./css/font-awesome.min.css">
+		<link rel="stylesheet" href="./css/metricsgraphics.min.css">
 		<link rel="stylesheet" href="./css/bootstrap.min.css" >
 		<link rel="stylesheet" href="./css/statbate.css">
 	</head>
 	
 	<body>
-	
-	
-	
-	
 	<div class="statbate">
-		
 		<!-- header start -->
 		<div class="header">
 			<div class="header_menu">
@@ -38,7 +34,6 @@
 		<!-- header end -->
 		
 		<!-- header mobile start -->
-		
 		<div class="header_mobile">
 			<div class="header_menu">
 				<a href="/" class="header_logo"></a>
@@ -51,8 +46,6 @@
 				</div>	
 			</div>
 		</div>
-		
-		
 		<div class="header_mobile_nav">
 			<a href="/" class="color_first">Chaturbate</a>
 			<a href="/bonga/" class="color_second">BongaCams</a>
@@ -60,12 +53,16 @@
 			<a href="/search.php" class="color_second">Search</a>
 			<a class="header_track trackCount color_first" href="/list.php">1925 rooms</a>
 		</div>
-		
-		
-		
 		<!-- header mobile end -->
 		
-		<div class="content"></div>
+		<div class="content">
+		
+			<div class="income_chart"></div>
+			
+		
+			
+		</div>
+
 		
 		<!-- footer start -->
 		<div class="footer">
@@ -93,6 +90,9 @@
 	
 	<!-- JS -->
 	<script src="./js/jquery-3.7.0.min.js"></script>
+	<script src="./js/d3.min.js"></script>
+	<script src="./js/metricsgraphics.min.js"></script>
 	<script src="./js/bootstrap.min.js"></script>
 	<script src="./js/statbate.js"></script>
+	
 </html>