288 lines
12 KiB
HTML
288 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Player Statistics</title>
|
|
<link rel="stylesheet" href="src/styles/color-variables.css">
|
|
<link rel="stylesheet" href="src/styles/styles.css">
|
|
<script src="src/utils/themeManager.js"></script>
|
|
<style>
|
|
.stats-container {
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: var(--color-gradient);
|
|
border-radius: 15px;
|
|
color: white;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
position: relative;
|
|
}
|
|
|
|
.stats-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #FFD700;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.navigation {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
margin: 0 10px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.advanced-stats {
|
|
margin-top: 30px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Side Characters -->
|
|
<div class="character-side left" style="background-image: url('assets/hentai/1.png'); top: 10%;"></div>
|
|
<div class="character-side right" style="background-image: url('assets/hentai/11.png'); top: 15%;"></div>
|
|
<div class="character-side left" style="background-image: url('assets/hentai/3.png'); top: 30%;"></div>
|
|
<div class="character-side right" style="background-image: url('assets/hentai/4.png'); top: 35%;"></div>
|
|
<div class="character-side left" style="background-image: url('assets/hentai/5.png'); top: 50%;"></div>
|
|
<div class="character-side right" style="background-image: url('assets/hentai/6.png'); top: 55%;"></div>
|
|
<div class="character-side left" style="background-image: url('assets/hentai/7.png'); top: 70%;"></div>
|
|
<div class="character-side right" style="background-image: url('assets/hentai/8.png'); top: 75%;"></div>
|
|
<div class="character-side left" style="background-image: url('assets/hentai/9.png'); top: 90%;"></div>
|
|
<div class="character-side right" style="background-image: url('assets/hentai/10.png'); top: 95%;"></div>
|
|
<div class="character-side left" style="background-image: url('assets/hentai/12.png'); top: 110%;"></div>
|
|
<div class="character-side right" style="background-image: url('assets/hentai/13.png'); top: 115%;"></div>
|
|
|
|
<div class="stats-container">
|
|
<div id="theme-switcher-container" style="position: absolute; top: 20px; right: 20px;"></div>
|
|
<div class="stats-header">
|
|
<h1>📊 Player Statistics</h1>
|
|
<p>Your viewing and engagement metrics</p>
|
|
</div>
|
|
|
|
<div id="stats-content" class="loading">
|
|
Loading statistics...
|
|
</div>
|
|
|
|
<div class="navigation">
|
|
<a href="index.html" class="btn">🏠 Home</a>
|
|
<a href="user-profile.html" class="btn">👤 Profile</a>
|
|
<a href="porn-cinema.html" class="btn">🎬 Cinema</a>
|
|
<button id="reset-stats" class="btn" style="background: rgba(220, 53, 69, 0.3);">🗑️ Reset Stats</button>
|
|
<button id="export-stats" class="btn">📁 Export Data</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="src/features/stats/playerStats.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize theme switcher UI
|
|
if (window.themeManager) {
|
|
const themeSwitcher = window.themeManager.createThemeToggle();
|
|
const container = document.getElementById('theme-switcher-container');
|
|
if (container) {
|
|
container.appendChild(themeSwitcher);
|
|
console.log('✅ Theme switcher initialized');
|
|
}
|
|
}
|
|
|
|
// Initialize stats if not already done
|
|
if (!window.playerStats) {
|
|
window.playerStats = new PlayerStats();
|
|
}
|
|
|
|
displayStats();
|
|
|
|
// Event handlers
|
|
document.getElementById('reset-stats').addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to reset all statistics? This action cannot be undone.')) {
|
|
window.playerStats.resetStats();
|
|
displayStats();
|
|
}
|
|
});
|
|
|
|
document.getElementById('export-stats').addEventListener('click', () => {
|
|
exportStats();
|
|
});
|
|
});
|
|
|
|
function displayStats() {
|
|
const stats = window.playerStats.getFormattedStats();
|
|
const rawStats = window.playerStats.getRawStats();
|
|
|
|
const content = document.getElementById('stats-content');
|
|
content.innerHTML = `
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.totalWatchTime}</div>
|
|
<div class="stat-label">Total Watch Time</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.videosWatched}</div>
|
|
<div class="stat-label">Videos Watched</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.sessions}</div>
|
|
<div class="stat-label">Total Sessions</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.averageSessionLength}</div>
|
|
<div class="stat-label">Average Session</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.playlistsCreated}</div>
|
|
<div class="stat-label">Playlists Created</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.videosCompleted}</div>
|
|
<div class="stat-label">Videos Completed</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.longestSession}</div>
|
|
<div class="stat-label">Longest Session</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.daysActive}</div>
|
|
<div class="stat-label">Days Active</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.completionRate}</div>
|
|
<div class="stat-label">Completion Rate</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-value">${stats.longestStreak}</div>
|
|
<div class="stat-label">Longest Streak</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="advanced-stats">
|
|
<h3>📈 Advanced Statistics</h3>
|
|
<p><strong>Most Watched Video:</strong> ${stats.mostWatchedVideo}</p>
|
|
<p><strong>First Play Date:</strong> ${rawStats.firstPlayDate ? new Date(rawStats.firstPlayDate).toLocaleDateString() : 'N/A'}</p>
|
|
<p><strong>Last Activity:</strong> ${rawStats.lastPlayDate ? new Date(rawStats.lastPlayDate).toLocaleDateString() : 'N/A'}</p>
|
|
<p><strong>Videos Added to Playlists:</strong> ${rawStats.videosAddedToPlaylists}</p>
|
|
<p><strong>Videos Skipped:</strong> ${rawStats.videosSkipped}</p>
|
|
<p><strong>Binge Sessions (2+ hours):</strong> ${rawStats.bingeSessions}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function exportStats() {
|
|
const exportData = window.playerStats.exportStats();
|
|
const dataStr = JSON.stringify(exportData, null, 2);
|
|
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
|
|
|
const url = URL.createObjectURL(dataBlob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `player-stats-${new Date().toISOString().split('T')[0]}.json`;
|
|
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
alert('Statistics exported successfully!');
|
|
}
|
|
|
|
// Apply sidebar theme on page load
|
|
window.addEventListener('DOMContentLoaded', async function() {
|
|
const savedTheme = localStorage.getItem('selectedTheme') || 'hentai';
|
|
const characterSides = document.querySelectorAll('.character-side');
|
|
|
|
console.log('Applying sidebar theme:', savedTheme);
|
|
|
|
if (savedTheme === 'none') {
|
|
characterSides.forEach(element => {
|
|
element.style.display = 'none';
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Show all sides
|
|
characterSides.forEach(element => {
|
|
element.style.display = 'block';
|
|
});
|
|
|
|
if (savedTheme === 'library') {
|
|
// Use user library images if available
|
|
const libraryImages = JSON.parse(localStorage.getItem('userLibraryImages') || '[]');
|
|
if (libraryImages.length > 0) {
|
|
characterSides.forEach((element, index) => {
|
|
const randomImage = libraryImages[Math.floor(Math.random() * libraryImages.length)];
|
|
const imagePath = randomImage.path || randomImage;
|
|
element.style.backgroundImage = `url('file:///${imagePath.replace(/\\/g, '/')}')`;
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
// For asset themes (hentai, pornstars, BBC, feet)
|
|
const themePath = `assets/${savedTheme}`;
|
|
characterSides.forEach((element, index) => {
|
|
const imageNum = [1,11,3,4,5,6,7,8,9,10,12,13][index] || 1;
|
|
element.style.backgroundImage = `url('${themePath}/${imageNum}.png')`;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |