mirror of
https://github.com/statbate/layout.git
synced 2026-08-11 03:12:42 +00:00
update
This commit is contained in:
poiuty
parent
54fa7db94a
commit
4831ad34b8
5 changed files with 978 additions and 121 deletions
289
index.html
289
index.html
|
|
@ -3,7 +3,7 @@
|
|||
<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="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" href="favicon.ico">
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
|
||||
<div class="content_nav_mobile">
|
||||
<div class="dropdown select-tab">
|
||||
<button class="col btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<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">
|
||||
|
|
@ -148,75 +148,99 @@
|
|||
</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>
|
||||
|
||||
<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" width="100%" role="grid" aria-describedby="supportList_info"
|
||||
style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="d-none d-sm-table-cell" style="width:1px;"></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>
|
||||
|
||||
|
||||
<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" style="width:1px;"></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">
|
||||
Dons
|
||||
</div>
|
||||
<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="" width="770" height="94.77" class="banner" src="./img/strip.webp"></a>
|
||||
<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">
|
||||
|
|
@ -237,7 +261,6 @@
|
|||
</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">
|
||||
|
|
@ -253,18 +276,15 @@
|
|||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<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 -->
|
||||
<script src="./js/jquery-3.7.0.min.js"></script>
|
||||
|
|
@ -273,10 +293,147 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue