mirror of
https://github.com/statbate/layout.git
synced 2026-08-11 03:12:42 +00:00
442 lines
16 KiB
HTML
442 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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=1">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<link rel="shortcut icon" type="image/webp" href="favicon.webp" />
|
|
|
|
<!-- 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/dataTables.bootstrap5.min.css" >
|
|
<link rel="stylesheet" href="./css/simplebar.css" >
|
|
<link rel="stylesheet" href="./css/statbate.css">
|
|
<script>
|
|
var page = "main";
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="statbate">
|
|
<!-- header start -->
|
|
<div class="header">
|
|
<div class="header_menu">
|
|
<a href="/" aria-label="Move to main page" class="header_logo"></a>
|
|
<ul class="header_navbar">
|
|
<li><a href="/" class="nav_active">Chaturbate</a></li>
|
|
<li><a href="/bonga/">BongaCams</a></li>
|
|
<li><a href="/strip/">Stripchat</a></li>
|
|
<li><a href="/search.php">Search</a></li>
|
|
</ul>
|
|
<a class="header_track trackCount" href="/list.php">track 1925 rooms</a>
|
|
</div>
|
|
</div>
|
|
<!-- header end -->
|
|
|
|
<!-- header mobile start -->
|
|
<div class="header_mobile">
|
|
<div class="header_menu">
|
|
<a href="/" class="header_logo"></a>
|
|
<div class="icon-menu-wrap">
|
|
<div class="icon-menu" onclick="choose()">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header_mobile_nav">
|
|
<a href="/" class="color_first">Chaturbate</a>
|
|
<a href="/bonga/" class="color_second">BongaCams</a>
|
|
<a href="/strip/" class="color_first">Stripchat</a>
|
|
<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 -->
|
|
|
|
<!-- content start -->
|
|
<div class="content">
|
|
|
|
|
|
<div class="income_chart"></div>
|
|
|
|
<div class="content_center">
|
|
<div class="content_wslog" data-simplebar>
|
|
<div class="wstext"></div>
|
|
</div>
|
|
<div class="content_table">
|
|
<table class="fin_table">
|
|
<tbody>
|
|
<tr>
|
|
<th colspan="2">Statistics for the last month</th>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td>Income</td>
|
|
<td>$21,927,125</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Average</td>
|
|
<td>$1116</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Average tip</td>
|
|
<td>$0.91</td>
|
|
</tr>
|
|
<tr>
|
|
<td>One token</td>
|
|
<td>$0.05</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content_nav">
|
|
<ul class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
|
|
<li class="nav-item">
|
|
<button class="nav-link active" id="cams-tab" data-bs-toggle="tab" role="tab" data-bs-target="#cams" aria-controls="cams" aria-selected="true">Rooms</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="dons-tab" data-bs-toggle="tab" role="tab" data-bs-target="#dons" aria-controls="dons" aria-selected="false">Donators</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="boys-tab" data-bs-toggle="tab" role="tab" data-bs-target="#boys" aria-controls="boys" aria-selected="false">Boys</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="trans-tab" data-bs-toggle="tab" role="tab" data-bs-target="#trans" aria-controls="trans" aria-selected="false">Trans</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="couple-tab" data-bs-toggle="tab" role="tab" data-bs-target="#couple" aria-controls="couple" aria-selected="false">Couple</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="incomeCharts-tab" data-bs-toggle="tab" role="tab" data-bs-target="#incomeCharts" aria-controls="incomeCharts" aria-selected="false">Income</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="roomsCharts-tab" aria-invalid="roomsCharts" data-bs-toggle="tab" role="tab" data-bs-target="#roomsCharts" aria-controls="roomsCharts" aria-selected="false">Streamers</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="viewersCharts-tab" data-bs-toggle="tab" role="tab" data-bs-target="#viewersCharts" aria-controls="viewersCharts" aria-selected="false">Viewers</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" id="heatmap-tab" data-bs-toggle="tab" role="tab" data-bs-target="#heatmap" aria-controls="heatmap" aria-selected="false">Heat map</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="content_nav_mobile">
|
|
<div class="dropdown select-tab">
|
|
<button class="col btn btn-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Rooms
|
|
</button>
|
|
<div class="dropdown-menu nav nav-tabs collapse" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item color_first" href="#cams" data-bs-toggle="tab" role="tab" aria-controls="cams" aria-selected="false">Rooms</a>
|
|
<a class="dropdown-item color_second" href="#dons" data-bs-toggle="tab" role="tab" aria-controls="dons" aria-selected="false">Donators</a>
|
|
<a class="dropdown-item color_first" href="#boys" data-bs-toggle="tab" role="tab" aria-controls="boys" aria-selected="false">Boys</a>
|
|
<a class="dropdown-item color_second" href="#trans" data-bs-toggle="tab" role="tab" aria-controls="trans" aria-selected="false">Trans</a>
|
|
<a class="dropdown-item color_first" href="#couple" data-bs-toggle="tab" role="tab" aria-controls="couple" aria-selected="false">Couple</a>
|
|
<a class="dropdown-item color_second" href="#incomeCharts" data-bs-toggle="tab" role="tab" aria-controls="incomeCharts" aria-selected="false">Income</a>
|
|
<a class="dropdown-item color_first" href="#roomsCharts" data-bs-toggle="tab" role="tab" aria-controls="roomsCharts" aria-selected="false">Streamers</a>
|
|
<a class="dropdown-item color_second" href="#viewersCharts" data-bs-toggle="tab" role="tab" aria-controls="viewers-charts" aria-selected="false">Viewers</a>
|
|
<a class="dropdown-item color_first" href="#heatmap" data-bs-toggle="tab" role="tab" aria-controls="heatmap" aria-selected="false">Heat map</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div aria-labelledby="cams-tab" role="tabpanel active" class="tab-pane fade active show" id="cams">
|
|
<div class="promo-block">
|
|
<a href="https://www.getmonero.org" target="_blank"><img src="./img/xmr.webp" width="380" height="31"></a>
|
|
</div>
|
|
<!-- test data start -->
|
|
<table id="main" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" role="grid" aria-describedby="supportList_info">
|
|
<thead>
|
|
<tr>
|
|
<th class="d-none d-sm-table-cell"></th>
|
|
<th>room</th>
|
|
<th data-toggle="tooltip" data-placement="top" title="Use search online">last</th>
|
|
<th class="d-none d-sm-table-cell" data-toggle="tooltip" data-placement="top" title="Avarage income per day">$.day</th>
|
|
<th class="d-none d-sm-table-cell" data-toggle="tooltip" data-placement="top" title="Uniq donators per month">dons</th>
|
|
<th data-toggle="tooltip" data-placement="top" title="Income per month">USD</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="odd">
|
|
<td class="d-none d-sm-table-cell">1</td>
|
|
<td>hannahjames710</td>
|
|
<td>8 hrs</td>
|
|
<td class="d-none d-sm-table-cell">2408</td>
|
|
<td class="d-none d-sm-table-cell">1904</td>
|
|
<td>52976</td>
|
|
</tr>
|
|
<tr class="even">
|
|
<td class="d-none d-sm-table-cell"><a href="">100</a></td>
|
|
<td><a href="">ehotlovea</a></td>
|
|
<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><a href="#" data-modal-info="" data-modal-id="27842" data-modal-type="income" data-modal-name="ehotlovea">51759</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- test data end -->
|
|
</div>
|
|
<div aria-labelledby="dons-tab" role="tabpanel" class="tab-pane fade" id="dons">
|
|
<div class="promo-block">
|
|
<a href="https://www.getmonero.org" target="_blank"><img src="./img/xmr.webp" width="380" height="31" alt="banner monero"></a>
|
|
</div>
|
|
<!-- test data start -->
|
|
<table id="top100dons" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" role="grid" aria-describedby="supportList_info">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th class="d-none d-sm-table-cell"></th>
|
|
<th>donator</th>
|
|
<th class="d-none d-sm-table-cell">last</th>
|
|
<th class="d-none d-sm-table-cell">rooms</th>
|
|
<th data-toggle="tooltip" data-placement="top" title="Average tip">avg</th>
|
|
<th data-toggle="tooltip" data-placement="top" title="Spend per month">USD</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="d-none d-sm-table-cell">1</td>
|
|
<td><a href='/l/anon_tips' target='_blank' rel='nofollow'>anon_tips</a></td>
|
|
<td class="d-none d-sm-table-cell"><font color="green">today</font></td>
|
|
<td class="d-none d-sm-table-cell">6115</td><td>1.15</td>
|
|
<td><a href='#' data-modal-info data-modal-id=1501699 data-modal-type=spend data-modal-name=anon_tips>142321</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="d-none d-sm-table-cell">2</td>
|
|
<td><a href='/l/had2changemyname' target='_blank' rel='nofollow'>had2changemyname</a></td>
|
|
<td class="d-none d-sm-table-cell"><font color="green">today</font></td>
|
|
<td class="d-none d-sm-table-cell">56</td><td>9.6</td>
|
|
<td><a href='#' data-modal-info data-modal-id=1532783 data-modal-type=spend data-modal-name=had2changemyname>41448</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- test data end -->
|
|
</div>
|
|
|
|
<div aria-labelledby="incomeCharts-tab" role="tabpanel" class="tab-pane fade" id="incomeCharts">
|
|
<div id="pieStat"></div>
|
|
</div>
|
|
|
|
<div aria-labelledby="heatmap-tab" role="tabpanel" class="tab-pane fade" id="heatmap">
|
|
<figure class="highcharts-figure">
|
|
<div id="container-map"></div>
|
|
</figure>
|
|
Monday 18:28 UTC
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- content end -->
|
|
|
|
<!-- footer start -->
|
|
<div class="footer">
|
|
<div class="footer_banner">
|
|
<a href="/s/" rel="nofollow"><img alt="banner" width="770" height="94" class="banner" src="./img/strip.webp"></a>
|
|
</div>
|
|
<div class="footer_bottom">
|
|
<div class="footer_social">
|
|
<a href="https://twitter.com/statbate" aria-label="Subscribe to our twitter" target="_blank" rel="nofollow">
|
|
<i class="fa fa-twitter" aria-hidden="true"></i>
|
|
</a>
|
|
<a href="https://github.com/statbate" aria-label="Subscribe to our github" target="_blank" rel="nofollow">
|
|
<i class="fa fa-github" aria-hidden="true"></i>
|
|
</a>
|
|
<a href="https://t.me/statbate" aria-label="Subscribe to our telegram" target="_blank" rel="nofollow">
|
|
<i class="fa fa-telegram" aria-hidden="true"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 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 -->
|
|
|
|
|
|
<!-- 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/jquery.dataTables.min.js"></script>
|
|
<script src="./js/bootstrap.bundle.min.js"></script>
|
|
<script src="./js/dataTables.bootstrap5.min.js"></script>
|
|
<script src="./js/highcharts.js"></script>
|
|
<script src="./js/heatmap.js"></script>
|
|
<script src="./js/simplebar.js"></script>
|
|
<script src="./js/statbate.js"></script>
|
|
|
|
<script>
|
|
Highcharts.chart('pieStat', {
|
|
chart: {
|
|
plotBackgroundColor: null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
type: 'pie'
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
|
|
accessibility: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: screen.width >= 568 ? 'Income distribution for the current month' : 'Income distribution'
|
|
},
|
|
tooltip: {
|
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
//size: screen.width >= 568 ? null : '80%',
|
|
colors: ["#434348", "#7cb5ec", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"],
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: screen.width >= 568 ? '<b>{point.name}</b>: {point.percentage:.1f} %' : '{point.percentage:.1f} %'
|
|
},
|
|
showInLegend: screen.width < 568
|
|
}
|
|
},
|
|
legend: {
|
|
itemDistance: 10
|
|
},
|
|
series: [{
|
|
name: 'Income',
|
|
colorByPoint: true,
|
|
data: [{"name":"Boys","y":2084012},{"name":"Girls","y":17234882},{"name":"Trans","y":1640962},{"name":"Couple","y":2052034}]
|
|
}]
|
|
});
|
|
|
|
function getPointCategoryName(point, dimension) {
|
|
var series = point.series,
|
|
isY = dimension === 'y',
|
|
axis = series[isY ? 'yAxis' : 'xAxis'];
|
|
return axis.categories[point[isY ? 'y' : 'x']];
|
|
}
|
|
|
|
Highcharts.chart('container-map', {
|
|
chart: {
|
|
type: 'heatmap',
|
|
marginTop: 10,
|
|
marginBottom: 40,
|
|
plotBorderWidth: 1
|
|
},
|
|
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
|
|
accessibility: {
|
|
enabled: false
|
|
},
|
|
|
|
title: {
|
|
text: ''
|
|
},
|
|
|
|
xAxis: {
|
|
categories: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
|
|
},
|
|
|
|
yAxis: {
|
|
categories: ['3', '6', '9', '12', '15', '18', '21', '24'],
|
|
title: null,
|
|
reversed: true
|
|
},
|
|
|
|
|
|
colors : ['#bebebe'],
|
|
colorAxis: {
|
|
min: 60,
|
|
minColor: '#FFFFFF',
|
|
maxColor: '#F8B4A6',
|
|
//maxColor: Highcharts.getOptions().colors[0]
|
|
},
|
|
|
|
legend: {
|
|
align: 'right',
|
|
layout: 'vertical',
|
|
margin: 0,
|
|
verticalAlign: 'top',
|
|
y: 25,
|
|
x: 15,
|
|
symbolHeight: 320
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
formatter: function () {
|
|
return '<b>' +
|
|
this.point.value + 'K USD</b> ';
|
|
}
|
|
},
|
|
|
|
series: [{
|
|
name: 'Income in two hours',
|
|
borderWidth: 1,
|
|
data: [[0,0,120],[0,1,117],[0,2,85],[0,3,78],[0,4,76],[0,5,86],[0,6,95],[0,7,108],[1,0,108],[1,1,113],[1,2,85],[1,3,71],[1,4,78],[1,5,79],[1,6,93],[1,7,100],[2,0,98],[2,1,119],[2,2,98],[2,3,71],[2,4,74],[2,5,81],[2,6,87],[2,7,113],[3,0,108],[3,1,114],[3,2,92],[3,3,71],[3,4,78],[3,5,84],[3,6,87],[3,7,111],[4,0,112],[4,1,126],[4,2,94],[4,3,90],[4,4,86],[4,5,85],[4,6,97],[4,7,122],[5,0,125],[5,1,142],[5,2,123],[5,3,92],[5,4,101],[5,5,91],[5,6,93],[5,7,111],[6,0,107],[6,1,132],[6,2,116],[6,3,93],[6,4,100],[6,5,101],[6,6,105],[6,7,112]],
|
|
dataLabels: {
|
|
enabled: true,
|
|
color: '#000000'
|
|
}
|
|
}],
|
|
|
|
responsive: {
|
|
rules: [{
|
|
condition: {
|
|
maxWidth: 500,
|
|
minHeight: 500
|
|
},
|
|
chartOptions: {
|
|
yAxis: {
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value.charAt(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|