98 lines
4.3 KiB
HTML
98 lines
4.3 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 - RetroAchievements Overlay</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>RetroPulse</h1>
|
|
<p>RetroAchievements Overlay for OBS</p>
|
|
</header>
|
|
<main>
|
|
<section class="user-input">
|
|
<h2>Enter RetroAchievements Username</h2>
|
|
<form id="userForm">
|
|
<input type="text" id="username" placeholder="Enter your RA username..." required
|
|
autocomplete="off">
|
|
<button type="submit">Get Info</button>
|
|
</form>
|
|
</section>
|
|
<section class="loading hidden" id="loading">
|
|
<p>Loading user data...</p>
|
|
</section>
|
|
<section class="error hidden" id="error">
|
|
<p class="error-message"></p>
|
|
<button onclick="clearError()">Try Again</button>
|
|
</section>
|
|
<section class="user-info hidden" id="userInfo">
|
|
<h2>User Profile</h2>
|
|
<div class="profile-card">
|
|
<div class="profile-header">
|
|
<img id="userAvatar" src="" alt="User Avatar" class="avatar">
|
|
<div class="profile-details">
|
|
<h3 id="userName"></h3>
|
|
<p id="userMotto" class="motto"></p>
|
|
<div class="stats">
|
|
<span class="stat">
|
|
<strong id="totalPoints"></strong> Points
|
|
</span>
|
|
<span class="stat">
|
|
<strong id="truePoints"></strong> True Points
|
|
</span>
|
|
</div>
|
|
<p class="member-since">Member since: <span id="memberSince"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="last-game" id="lastGameSection">
|
|
<h3>Currently Playing</h3>
|
|
<div class="game-card">
|
|
<img id="gameIcon" src="" alt="Game Icon" class="game-icon">
|
|
<div class="game-details">
|
|
<h4 id="gameTitle"></h4>
|
|
<p id="consoleName" class="console"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="last-achievement" id="lastAchievementSection">
|
|
<h3>Latest Achievement</h3>
|
|
<div class="achievement-card">
|
|
<img id="achievementBadge" src="" alt="Achievement Badge" class="achievement-badge">
|
|
<div class="achievement-details">
|
|
<h4 id="achievementTitle"></h4>
|
|
<p id="achievementDescription" class="description"></p>
|
|
<div class="achievement-stats">
|
|
<span class="points">
|
|
<strong id="achievementPoints"></strong> pts
|
|
</span>
|
|
<span class="true-ratio">
|
|
(True: <strong id="achievementTrueRatio"></strong> pts)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="overlay-controls">
|
|
<h3>Overlay for OBS</h3>
|
|
<p>Use this URL as a Browser Source in OBS Studio:</p>
|
|
<div class="overlay-url">
|
|
<input type="text" id="overlayUrl" readonly>
|
|
<button onclick="copyOverlayUrl()">Copy URL</button>
|
|
</div>
|
|
<a id="overlayLink" href="#" target="_blank" class="overlay-button">
|
|
Open Overlay
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script src="/js/main.js"></script>
|
|
</body>
|
|
|
|
</html> |