51 lines
2 KiB
HTML
51 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RetroPulse Overlay</title>
|
|
<link rel="stylesheet" href="/css/overlay.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="overlay-container" class="overlay-container">
|
|
<section id="waiting-for-activity" class="waiting-display hidden">
|
|
<h2>Waiting for Game Activity</h2>
|
|
<p>Start playing a game with RetroAchievements enabled. New achievements will appear here automatically.</p>
|
|
</section>
|
|
<section id="current-game" class="current-game hidden">
|
|
<div class="game-header">
|
|
<img id="game-icon" src="" alt="Game Icon" class="game-icon">
|
|
<div class="game-info">
|
|
<h2 id="game-title">Loading Game...</h2>
|
|
<p id="console-name" class="console-name"></p>
|
|
</div>
|
|
</div>
|
|
<div id="game-progress-section" class="game-progress hidden">
|
|
<div class="progress-stats">
|
|
<span id="progress-text">Completion: 0/0</span>
|
|
<span id="progress-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar-container">
|
|
<div id="progress-bar" class="progress-bar-fill"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="achievements-container" class="achievements-container hidden">
|
|
<h3>Recent Achievements</h3>
|
|
<ul id="achievements-list" class="achievements-list">
|
|
</ul>
|
|
</section>
|
|
<div id="error-display" class="error-display hidden">
|
|
<div class="error-content">
|
|
<h3>Error</h3>
|
|
<p id="error-message">An error occurred.</p>
|
|
<button onclick="location.reload()">Reload</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/overlay.js"></script>
|
|
</body>
|
|
|
|
</html> |