mirror of
https://github.com/rangermix/TwitchDropsMiner.git
synced 2026-05-26 07:08:04 +00:00
6e6d9dbf17
* All games will be linked * feat: Add 'Add Game' button to Settings tab - Added 'Add Game' button to Games to Watch section in Settings - Implemented logic to add custom games via search input - Fixed alignment issue with games filter search bar - Added English translations for new UI elements * fix PR 33 review issues --------- Co-authored-by: ethanblazkowicz <wow990922@outlook.com> Co-authored-by: LeonSparta <46887992+LeonSparta@users.noreply.github.com> Co-authored-by: Fengqing Liu <fq_aaron@hotmail.com>
330 lines
16 KiB
HTML
330 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Twitch Drops Miner</title>
|
|
<link rel="icon" type="image/png" href="/static/favicon.png">
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div class="header-top">
|
|
<h1>🎮 Twitch Drops Miner</h1>
|
|
<div class="header-controls">
|
|
<label for="language" class="language-selector">
|
|
<span>Language:</span>
|
|
<select id="language">
|
|
<option value="en">English</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="status-bar">
|
|
<span id="status-text">Initializing...</span>
|
|
<span id="manual-mode-badge" class="mode-badge hidden"
|
|
title="Manual mode active - watching specific game">
|
|
🎯 MANUAL: <span id="manual-game-name"></span>
|
|
</span>
|
|
<span id="auto-mode-badge" class="mode-badge" title="Automatic mode - following game priority">
|
|
🤖 AUTO
|
|
</span>
|
|
<span id="proxy-indicator" class="proxy-badge" style="display: none;" title="Proxy connection active">
|
|
🔒 PROXY
|
|
</span>
|
|
<span id="connection-indicator" class="connected">● Connected</span>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="tabs">
|
|
<button class="tab-button active" data-tab="main">Main</button>
|
|
<button class="tab-button" data-tab="inventory">Inventory</button>
|
|
<button class="tab-button" data-tab="settings">Settings</button>
|
|
<button class="tab-button" data-tab="help">Help</button>
|
|
</nav>
|
|
|
|
<!-- Main Tab -->
|
|
<div id="main-tab" class="tab-content active">
|
|
<div class="main-grid">
|
|
<!-- Login Section -->
|
|
<section class="panel login-panel">
|
|
<h2>Login</h2>
|
|
<div id="login-status" class="login-status"></div>
|
|
<div id="login-form" style="display: none;">
|
|
<input type="text" id="username" placeholder="Username" />
|
|
<input type="password" id="password" placeholder="Password" />
|
|
<input type="text" id="2fa-token" placeholder="2FA Token (optional)" />
|
|
<button id="login-button">Login</button>
|
|
</div>
|
|
<div id="oauth-code-display" style="display: none;">
|
|
<p>Enter this code at: <a id="oauth-url" href="#" target="_blank">Twitch Activate</a></p>
|
|
<div class="oauth-code" id="oauth-code"></div>
|
|
<button id="oauth-confirm">I've entered the code</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Current Drop Progress -->
|
|
<section class="panel progress-panel">
|
|
<h2 id="progress-header">Campaign Progress</h2>
|
|
<div id="progress-container">
|
|
<div id="no-drop-message">No active drop</div>
|
|
<div id="drop-info" style="display: none;">
|
|
<div id="manual-mode-controls" class="manual-mode-controls hidden">
|
|
<div class="manual-mode-info">
|
|
🎯 Manual Mode: Mining <strong id="manual-mode-game"></strong>
|
|
</div>
|
|
<button id="exit-manual-btn" class="exit-manual-btn">Return to Auto Mode</button>
|
|
</div>
|
|
<div class="drop-name" id="drop-name"></div>
|
|
<div class="drop-game" id="drop-game"></div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-text" id="progress-text"></div>
|
|
<div class="progress-time" id="progress-time"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Console Output -->
|
|
<section class="panel console-panel">
|
|
<h2 id="console-header">Logs</h2>
|
|
<div id="console-output" class="console-output"></div>
|
|
</section>
|
|
|
|
<!-- Channels List -->
|
|
<section class="panel channels-panel">
|
|
<h2 id="channels-header">Channels</h2>
|
|
<div id="channels-list" class="channels-list"></div>
|
|
</section>
|
|
|
|
<!-- Wanted Items (New Panel) -->
|
|
<section class="panel wanted-panel">
|
|
<h2 id="wanted-header">Wanted Drop Queue</h2>
|
|
<div id="wanted-items-list" class="wanted-items-list">
|
|
<p class="empty-message-small">No wanted drops queued...</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inventory Tab -->
|
|
<div id="inventory-tab" class="tab-content">
|
|
<div class="inventory-filters">
|
|
<div class="filter-controls">
|
|
<div class="filter-checkboxes">
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-active" />
|
|
<span>Active</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-not-linked" checked />
|
|
<span>Not Linked</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-upcoming" checked />
|
|
<span>Upcoming</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-expired" />
|
|
<span>Expired</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-finished" />
|
|
<span>Finished</span>
|
|
</label>
|
|
<div class="filter-separator"
|
|
style="width: 1px; height: 24px; background: var(--border-color); margin: 0 10px;">
|
|
</div>
|
|
<label class="filter-checkbox" title="Direct Entitlement (Game Item)">
|
|
<input type="checkbox" id="filter-benefit-item" checked />
|
|
<span>Item</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-benefit-badge" checked />
|
|
<span>Badge</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-benefit-emote" checked />
|
|
<span>Emote</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="filter-benefit-other" checked />
|
|
<span>Other</span>
|
|
</label>
|
|
</div>
|
|
<div class="filter-search">
|
|
<div class="game-dropdown-container">
|
|
<div class="game-tags-display" id="selected-game-tags">
|
|
<!-- Selected game tags will appear here -->
|
|
</div>
|
|
<input type="text" id="inventory-game-search" placeholder="Type to search games..."
|
|
autocomplete="off" />
|
|
<div class="game-dropdown-list" id="game-dropdown-list">
|
|
<!-- Dropdown options will appear here -->
|
|
</div>
|
|
</div>
|
|
<button id="clear-filters-btn" class="small-btn">Clear Filters</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-grid" id="inventory-grid">
|
|
<p class="empty-message">No campaigns loaded yet...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings-tab" class="tab-content">
|
|
<div class="settings-container">
|
|
<section class="settings-section">
|
|
<h2 id="settings-general-header">General</h2>
|
|
<label>
|
|
<input type="checkbox" id="dark-mode"> Dark Mode
|
|
</label>
|
|
<label>
|
|
Connection Quality:
|
|
<input type="number" id="connection-quality" min="1" max="6" value="1">
|
|
</label>
|
|
<label>
|
|
Minimum Refresh Interval (minutes):
|
|
<input type="number" id="minimum-refresh-interval" min="1" max="1440" value="30">
|
|
</label>
|
|
<label>
|
|
Proxy URL:
|
|
<input type="text" id="proxy-url" placeholder="http://user:pass@host:port">
|
|
<button id="set-proxy-btn" class="secondary-btn" title="Set and verify proxy">Set
|
|
Proxy</button>
|
|
<button id="verify-proxy-btn" class="secondary-btn"
|
|
title="Test proxy connection">Verify</button>
|
|
</label>
|
|
<small class="help-text-inline" style="margin-top: 5px;">Leave empty to disable. Supports
|
|
HTTP/HTTPS/SOCKS.</small>
|
|
<div id="proxy-verify-result" class="verify-result" style="display: none;"></div>
|
|
</section>
|
|
|
|
<section class="settings-section">
|
|
<h2 id="settings-benefits-header">Mining Benefits</h2>
|
|
<p id="settings-benefits-help" class="help-text">Select which types of drops you want to
|
|
mine.</p>
|
|
<div class="benefits-filter filter-checkboxes">
|
|
<label class="filter-checkbox" title="Detailed description: Direct Entitlement (Game Item)">
|
|
<input type="checkbox" id="mining-benefit-item" checked />
|
|
<span>Item</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="mining-benefit-badge" checked />
|
|
<span>Badge</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="mining-benefit-emote" checked />
|
|
<span>Emote</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="mining-benefit-unknown" checked />
|
|
<span>Other</span>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-section">
|
|
<h2 id="settings-games-header">Games to Watch</h2>
|
|
<p id="settings-games-help" class="help-text">Select games to watch. Order matters - drag to
|
|
reorder
|
|
priority (top = highest
|
|
priority).</p>
|
|
|
|
<div class="games-filter">
|
|
<input type="text" id="games-filter" placeholder="Search games..." />
|
|
<div class="filter-actions">
|
|
<button id="select-all-btn" class="small-btn">Select All</button>
|
|
<button id="deselect-all-btn" class="small-btn">Deselect All</button>
|
|
<button id="add-game-btn" class="small-btn">Add Game</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="games-container">
|
|
<div class="selected-games">
|
|
<h3>Selected Games (drag to reorder)</h3>
|
|
<div id="selected-games-list" class="sortable-list"></div>
|
|
</div>
|
|
|
|
<div class="available-games">
|
|
<h3>Available Games</h3>
|
|
<div id="available-games-list" class="checkbox-list"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-section">
|
|
<h2 id="settings-actions-header">Actions</h2>
|
|
<div class="settings-actions">
|
|
<button id="reload-btn" class="action-button">Reload</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Tab -->
|
|
<div id="help-tab" class="tab-content">
|
|
<div class="help-content">
|
|
<h2 id="help-about-header">About Twitch Drops Miner</h2>
|
|
<p>This application automatically mines timed Twitch drops without downloading stream data.</p>
|
|
|
|
<h3 id="help-howto-header">How to Use</h3>
|
|
<ol>
|
|
<li>Login using your Twitch account (OAuth device code flow)</li>
|
|
<li>Link your accounts at <a href="https://www.twitch.tv/drops/campaigns"
|
|
target="_blank">twitch.tv/drops/campaigns</a></li>
|
|
<li>The miner will automatically discover campaigns and start mining</li>
|
|
<li>Configure priority games in Settings to focus on what you want</li>
|
|
<li>Monitor progress in the Main and Inventory tabs</li>
|
|
</ol>
|
|
|
|
<h3 id="help-features-header">Features</h3>
|
|
<ul>
|
|
<li>Stream-less drop mining - saves bandwidth</li>
|
|
<li>Game priority and exclusion lists</li>
|
|
<li>Tracks up to 199 channels simultaneously</li>
|
|
<li>Automatic channel switching</li>
|
|
<li>Real-time progress tracking</li>
|
|
</ul>
|
|
|
|
<h3 id="help-notes-header">Important Notes</h3>
|
|
<ul>
|
|
<li>Do not watch streams on the same account while mining</li>
|
|
<li>Keep your cookies.jar file secure</li>
|
|
<li>Requires linked game accounts for drops</li>
|
|
</ul>
|
|
|
|
<div class="help-links">
|
|
<a href="https://github.com/rangermix/TwitchDropsMiner" target="_blank">GitHub
|
|
Repository</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-version">
|
|
<span id="footer-version-text">Version: <span id="current-version">Loading...</span></span>
|
|
<span id="footer-update-indicator" style="display: none;" class="update-indicator">
|
|
<a href="#" id="footer-update-link" target="_blank" title="Click to download update">
|
|
⚠ Update Available: <span id="latest-version"></span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="https://github.com/rangermix/TwitchDropsMiner" target="_blank">GitHub</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
|
|
</html> |