151 lines
5.5 KiB
HTML
151 lines
5.5 KiB
HTML
<!--
|
|
Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space
|
|
|
|
Permission to use, copy, modify, and/or distribute this software for any purpose with or without
|
|
fee is hereby granted.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS
|
|
SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
|
|
AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
|
|
NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE
|
|
OF THIS SOFTWARE.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lutris Playtime Report</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
/* Theme-specific CSS injected here */
|
|
__THEME_CSS__
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Scroll to Top Button -->
|
|
<button class="scroll-top" id="scroll-top" title="Scroll to top">
|
|
<div class="scroll-top-arrow"></div>
|
|
</button>
|
|
|
|
<!-- Theme Toggle Button -->
|
|
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
|
|
<span class="icon" id="theme-icon"></span>
|
|
</button>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h1 class="card-title">Lutris Playtime Report</h1>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="filters" id="filters"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Statistics</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value" id="total-library">__TOTAL_LIBRARY__</div>
|
|
<div class="stat-label">Games in Library</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="total-games">0</div>
|
|
<div class="stat-label">Games Played</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="total-time">0h</div>
|
|
<div class="stat-label">Total Playtime</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Playtime Distribution</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="charts-wrapper">
|
|
<div class="chart-container">
|
|
<div class="chart-title">Top Games</div>
|
|
<canvas id="playtime-chart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">By Category</div>
|
|
<canvas id="categories-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Summaries</h2>
|
|
</div>
|
|
<div class="card-content summaries-content">
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="games">Top Games</div>
|
|
<div class="tab" data-tab="categories">By Category</div>
|
|
<div class="tab" data-tab="runners">By Runner</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-panel active" id="tab-games">
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Game</th>
|
|
<th>Playtime</th>
|
|
<th style="text-align: right">%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="games-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-panel" id="tab-categories">
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Category</th>
|
|
<th>Playtime</th>
|
|
<th style="text-align: right">%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="categories-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-panel" id="tab-runners">
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Runner</th>
|
|
<th>Playtime</th>
|
|
<th style="text-align: right">%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="runners-table"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
__SCRIPT__
|
|
</script>
|
|
</body>
|
|
</html>
|