update

css/statbate.css

@@ -418,12 +418,31 @@ table.dataTable {
     border-radius: 6px;
 }
 
+.DonTable > tbody > tr > td, .DonTable > tbody > tr > th, .DonTable > tfoot > tr > td, .DonTable > tfoot > tr > th, .DonTable > thead > tr > td, .DonTable > thead > tr > th {
+    padding: 0px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 0px;
+}
+
+td, th {
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+.table>:not(:first-child) {
+    border-top: 0 !important;
+}
+
 @media (max-width: 805px) {
 	.promo-block,
 	.dataTables_paginate,
 	.dataTables_info,
 	.dataTables_length,
-	.income_chart,
 	.content_nav,
 	.header {
 		display: none;
@@ -438,14 +457,18 @@ table.dataTable {
 	.content_nav_mobile {
 		display: block;
 	}
-	.content_center {
-		flex-direction: column-reverse;
-		padding-top: 0;
-	}
-	.content_wslog,
-	.content_table {
+
+	.content_wslog {
 		width: 100%;
 	}
+	.content_table {
+		width: 75%;
+	}
+	
+	.content_center {
+		grid-gap: 8px;
+		padding-top: 0;
+	}
 
 	.form-control-sm[type=search] {
 		width: 100% !important;
@@ -459,6 +482,22 @@ table.dataTable {
 	}
 }
 
+@media (max-width: 690px) {
+	.content_center {
+		flex-direction: column-reverse;
+		grid-gap: 12px;
+	}
+	.content_table {
+		width: 100%;
+	}
+}
+
+@media (max-width: 568px) {
+	.income_chart {
+		display: none;
+	}
+}
+
 @media (any-hover: hover) {
 	.promo-block:hover,
 	.footer_social i:hover,

index.html

@@ -4,7 +4,7 @@
 		<title>Statbate</title>
 		<meta charset="UTF-8">
 		<meta name="description" content="How much do webcam models make? Now you know the answer!"/>
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 		<meta name="format-detection" content="telephone=no">
 		<link rel="shortcut icon" href="favicon.ico">
 		
@@ -194,7 +194,7 @@
 													<td><font color="green">online</font></td>
 													<td class="d-none d-sm-table-cell">1909</td>
 													<td class="d-none d-sm-table-cell">1601</td>
-													<td>51546</td>
+													<td><a href="#" data-modal-info="" data-modal-id="27842" data-modal-type="income" data-modal-name="ehotlovea">51759</a></td>
 												</tr>
 
 											</tbody>
@@ -235,6 +235,35 @@
 		<!-- footer end -->
 		
 	</div>
+	
+	<!-- modal windows start -->
+	
+	<div class="modal fade" id="donRoomModal" tabindex="-1" role="dialog" aria-hidden="true">
+		<div class="modal-dialog" style="max-width: 400px;">
+			<div class="modal-content">
+				<div class="modal-body">
+					<table id="donRoomTable" class="table table-striped DonTable">
+						<thead>
+							<tr>
+								<th></th>
+								<th>USD</th>
+								<th data-toggle="tooltip" data-placement="right" title="Average tip">AVG</th>
+							</tr>
+						</thead>
+						<tbody>
+						</tbody>
+					</table>
+					<hr />
+					<div id="modelChart" class="d-none d-md-block" style="margin-top: -25px;"></div>
+					<div id="allIncome"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	
+	
+	<!-- modal windows end --> 
+	
 	</body>
 	
 	<!-- JS -->