Skip to content

Instantly share code, notes, and snippets.

@primaryobjects

primaryobjects/index.html

Last active September 29, 2024 13:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save primaryobjects/9ad8ab493caba784ab4fd4b0e0f41a55 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save primaryobjects/9ad8ab493caba784ab4fd4b0e0f41a55 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body onload="countRefreshes()">
<div class="container mt-5">
<div class="card">
<div class="card-body">
<h2 class="card-title">Refresh Count: <span id="refreshCount"></span></h2>
<h3 class="card-subtitle mb-2 text-muted">Last Refresh Time: <span id="lastRefreshTime"></span> <i onclick="toggleTimeFormat()" class="fas fa-exchange-alt" style="cursor:pointer;"></i></h3>
<button onclick="resetStats()" class="btn btn-primary mt-3">Reset Stats</button>
<button onclick="toggleHistory()" class="btn btn-secondary mt-3">History</button>
<table id="historyTable" class="table table-striped mt-3" style="display:none;">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Refresh Time</th>
<th scope="col">Difference (s)</th>
</tr>
</thead>
<tbody id="historyBody">
</tbody>
</table>
</div>
</div>
<canvas id="historyChart" class="mt-3"></canvas>
</div>
<div class="container mt-1">
Theme
<select id="themeSelect" onchange="changeTheme()" class="custom-select mt-3">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="colorful">Colorful</option>
<option value="monochrome">Monochrome</option>
<option value="sunset">Sunset</option>
<option value="ocean">Ocean</option>
<option value="forest">Forest</option>
<option value="sand">Sand</option>
<option value="rose">Rose</option>
<option value="sky">Sky</option>
</select>
</div>
<script>
let is24HourFormat = localStorage.getItem('is24HourFormat') !== 'false';
let refreshHistory = JSON.parse(localStorage.getItem('refreshHistory')) || [];
let isHistoryVisible = localStorage.getItem('isHistoryVisible') === 'true';
let historyChart;
let chartColor;
let theme = localStorage.getItem('theme');
if (theme) {
document.getElementById('themeSelect').value = theme;
changeTheme();
}
function countRefreshes() {
if (localStorage.getItem('refreshCount')) {
localStorage.setItem('refreshCount', Number(localStorage.getItem('refreshCount')) + 1);
} else {
localStorage.setItem('refreshCount', 1);
}
document.getElementById('refreshCount').innerHTML = localStorage.getItem('refreshCount');
let date = new Date();
let refreshTime = is24HourFormat ? date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() : date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
document.getElementById('lastRefreshTime').innerHTML = refreshTime;
let diff = refreshHistory.length > 0 ? Math.round((date.getTime() - refreshHistory[refreshHistory.length - 1].time) / 1000) : 'N/A';
refreshHistory.push({time: date.getTime(), diff: diff});
localStorage.setItem('refreshHistory', JSON.stringify(refreshHistory));
updateHistoryTable();
}
function updateTime() {
let date = new Date();
let refreshTime = is24HourFormat ? date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() : date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
document.getElementById('lastRefreshTime').innerHTML = refreshTime;
}
function resetStats() {
localStorage.removeItem('refreshCount');
localStorage.removeItem('refreshHistory');
document.getElementById('refreshCount').innerHTML = 0;
document.getElementById('lastRefreshTime').innerHTML = 'N/A';
refreshHistory = [];
updateHistoryTable();
}
function toggleTimeFormat() {
is24HourFormat = !is24HourFormat;
localStorage.setItem('is24HourFormat', is24HourFormat);
updateTime();
updateHistoryTable();
}
function toggleHistory() {
isHistoryVisible = !isHistoryVisible;
localStorage.setItem('isHistoryVisible', isHistoryVisible);
updateHistoryTable();
}
function updateHistoryTable() {
let historyTable = document.getElementById('historyTable');
historyTable.style.display = isHistoryVisible ? 'table' : 'none';
let historyBody = document.getElementById('historyBody');
historyBody.innerHTML = '';
for (let i = 0; i < refreshHistory.length; i++) {
let row = historyBody.insertRow();
row.insertCell().innerHTML = i + 1;
let date = new Date(refreshHistory[i].time);
let formattedTime = is24HourFormat ? date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() : date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
row.insertCell().innerHTML = formattedTime;
row.insertCell().innerHTML = refreshHistory[i].diff;
}
updateChart();
}
function updateChart() {
let ctx = document.getElementById('historyChart').getContext('2d');
if (historyChart) {
historyChart.destroy();
}
historyChart = new Chart(ctx, {
type: 'line',
data: {
labels: refreshHistory.map((_, i) => i + 1),
datasets: [{
label: 'Time Difference (s)',
data: refreshHistory.map(entry => entry.diff),
fill: false,
borderColor: chartColor,
tension: 0.1
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Refresh Count',
color: chartColor
},
grid: {
color: ''
}
},
y: {
title: {
display: true,
text: 'Time Difference (s)',
color: chartColor
},
grid: {
color: ''
}
}
}
}
});
}
function changeTheme() {
theme = document.getElementById('themeSelect').value;
let textColor, backgroundColor;
switch (theme) {
case 'dark':
document.body.style.backgroundColor = '#333';
document.body.style.color = 'royalblue';
chartColor = 'dodgerblue';
break;
case 'light':
document.body.style.backgroundColor = '#fff';
document.body.style.color = '#000';
chartColor = '#606060';
break;
case 'colorful':
document.body.style.backgroundColor = '#ff6347';
document.body.style.color = '#1e90ff';
break;
case 'monochrome':
document.body.style.backgroundColor = '#f0f0f0';
document.body.style.color = '#666';
chartColor = '#404040';
break;
case 'sunset':
document.body.style.backgroundColor = '#FF7F50';
document.body.style.color = '#2F4F4F';
chartColor = 'rgb(47, 79, 79)';
break;
case 'ocean':
document.body.style.backgroundColor = '#1E90FF';
document.body.style.color = '#191970';
chartColor = 'rgb(25, 25, 112)';
break;
case 'forest':
document.body.style.backgroundColor = '#228B22';
document.body.style.color = '#556B2F';
chartColor = 'goldenrod';
break;
case 'sand':
document.body.style.backgroundColor = '#F4A460';
document.body.style.color = '#8B4513';
chartColor = 'rgb(139, 69, 19)';
break;
case 'rose':
document.body.style.backgroundColor = '#FFB6C1';
document.body.style.color = '#8B008B';
chartColor = 'rgb(139, 0, 139)';
break;
case 'sky':
document.body.style.backgroundColor = '#87CEEB';
document.body.style.color = '#4682B4';
chartColor = 'rgb(70, 130, 180)';
break;
default:
document.body.style.backgroundColor = '';
document.body.style.color = '';
chartColor = '';
}
updateChart();
localStorage.setItem('theme', theme);
}
</script>
</body>
</html>
Raw
zversions.txt
https://jsfiddle.net/w7tcnrub/
https://jsfiddle.net/9gjdo6qe/1/
https://jsfiddle.net/x9dk745r/3/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment