mirror of
https://github.com/LightZirconite/Microsoft-Rewards-Bot.git
synced 2026-01-09 17:06:15 +00:00
354 lines
14 KiB
HTML
354 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Microsoft Rewards Bot Dashboard</title>
|
|
<link rel="icon" type="image/svg+xml"
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🎯%3C/text%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<h1>🎯 Microsoft Rewards Bot</h1>
|
|
<span class="version" id="version">v3.5.5</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
</svg>
|
|
</button>
|
|
<div id="statusBadge" class="status-badge status-stopped">
|
|
<svg class="icon icon-sm" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
</svg>
|
|
<span>STOPPED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">Total Accounts</div>
|
|
<div class="stat-value" id="totalAccounts">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-points">
|
|
<div class="stat-icon">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 6v6l4 2" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">Total Points</div>
|
|
<div class="stat-value" id="totalPoints">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-success">
|
|
<div class="stat-icon">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
|
<polyline points="22 4 12 14.01 9 11.01" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">Completed Today</div>
|
|
<div class="stat-value" id="completed">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-error">
|
|
<div class="stat-icon">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
|
<line x1="12" y1="9" x2="12" y2="13" />
|
|
<line x1="12" y1="17" x2="12.01" y2="17" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">Errors</div>
|
|
<div class="stat-value" id="errors">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">Uptime</div>
|
|
<div class="stat-value" id="uptime">00:00:00</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
|
|
<line x1="6" y1="6" x2="6.01" y2="6" />
|
|
<line x1="6" y1="18" x2="6.01" y2="18" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">Memory</div>
|
|
<div class="stat-value" id="memory">0 MB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Grid -->
|
|
<div class="main-grid">
|
|
<!-- Left Column -->
|
|
<div class="left-column">
|
|
<!-- Control Panel -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<rect x="2" y="10" width="20" height="12" rx="2" />
|
|
<circle cx="8" cy="16" r="2" />
|
|
<circle cx="16" cy="16" r="2" />
|
|
</svg>
|
|
Control Panel
|
|
</h2>
|
|
<div class="card-actions">
|
|
<button class="btn btn-sm btn-secondary" onclick="refreshData()" title="Refresh">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<polyline points="23 4 23 10 17 10" />
|
|
<polyline points="1 20 1 14 7 14" />
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="control-grid">
|
|
<button class="control-btn control-start" onclick="startBot()" id="btnStart">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<polygon points="5 3 19 12 5 21 5 3" />
|
|
</svg>
|
|
<span>Start Bot</span>
|
|
</button>
|
|
<button class="control-btn control-stop" onclick="stopBot()" id="btnStop" disabled>
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<rect x="6" y="4" width="4" height="16" />
|
|
<rect x="14" y="4" width="4" height="16" />
|
|
</svg>
|
|
<span>Stop Bot</span>
|
|
</button>
|
|
<button class="control-btn control-restart" onclick="restartBot()">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<polyline points="23 4 23 10 17 10" />
|
|
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
|
|
</svg>
|
|
<span>Restart</span>
|
|
</button>
|
|
<button class="control-btn control-reset" onclick="resetJobState()">
|
|
<svg class="icon icon-lg" viewBox="0 0 24 24">
|
|
<path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
|
|
<line x1="18" y1="9" x2="12" y2="15" />
|
|
<line x1="12" y1="9" x2="18" y2="15" />
|
|
</svg>
|
|
<span>Reset State</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accounts Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</svg>
|
|
Accounts
|
|
</h2>
|
|
<span class="badge" id="accountsBadge">0</span>
|
|
</div>
|
|
<div id="accountsList" class="accounts-list">
|
|
<div class="log-empty">Loading accounts...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
|
</svg>
|
|
Quick Actions
|
|
</h2>
|
|
</div>
|
|
<div class="quick-actions">
|
|
<button class="action-btn" onclick="runSingleAccount()">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
<span>Run Single</span>
|
|
</button>
|
|
<button class="action-btn" onclick="exportLogs()">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" y1="15" x2="12" y2="3" />
|
|
</svg>
|
|
<span>Export Logs</span>
|
|
</button>
|
|
<button class="action-btn" onclick="openConfig()">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</svg>
|
|
<span>Config</span>
|
|
</button>
|
|
<button class="action-btn" onclick="viewHistory()">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
<span>History</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="right-column">
|
|
<!-- Charts Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<line x1="18" y1="20" x2="18" y2="10" />
|
|
<line x1="12" y1="20" x2="12" y2="4" />
|
|
<line x1="6" y1="20" x2="6" y2="14" />
|
|
</svg>
|
|
Points History
|
|
</h2>
|
|
<div class="chart-period">
|
|
<button class="period-btn active" data-period="7d" onclick="setChartPeriod('7d', this)">7D</button>
|
|
<button class="period-btn" data-period="30d" onclick="setChartPeriod('30d', this)">30D</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="pointsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Chart -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
|
</svg>
|
|
Activity Breakdown
|
|
</h2>
|
|
</div>
|
|
<div class="chart-container chart-small">
|
|
<canvas id="activityChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<polyline points="4 17 10 11 4 5" />
|
|
<line x1="12" y1="19" x2="20" y2="19" />
|
|
</svg>
|
|
Live Logs
|
|
</h2>
|
|
<div class="card-actions">
|
|
<select id="logFilter" class="log-filter" onchange="filterLogs()">
|
|
<option value="all">All Levels</option>
|
|
<option value="error">Errors Only</option>
|
|
<option value="warn">Warnings</option>
|
|
<option value="log">Info</option>
|
|
</select>
|
|
<button class="btn btn-sm btn-secondary" onclick="toggleAutoScroll()" id="btnAutoScroll" title="Auto-scroll">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<polyline points="19 12 12 19 5 12" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-sm btn-danger" onclick="clearLogs()" title="Clear logs">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<polyline points="3 6 5 6 21 6" />
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="logs-container" id="logsContainer">
|
|
<div class="log-empty">Waiting for logs...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<span>Microsoft Rewards Bot Dashboard</span>
|
|
<span class="separator">•</span>
|
|
<a href="https://github.com/LightZirconite/Microsoft-Rewards-Bot" target="_blank">
|
|
<svg class="icon" viewBox="0 0 24 24">
|
|
<path
|
|
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
<span class="separator">•</span>
|
|
<span id="connectionStatus" class="connection-status disconnected">
|
|
<svg class="icon icon-sm" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
</svg>
|
|
Connecting...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Container -->
|
|
<div id="toastContainer"></div>
|
|
|
|
<!-- Modal -->
|
|
<div id="modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Modal Title</h3>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body" id="modalBody"></div>
|
|
<div class="modal-footer" id="modalFooter"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
|
|
</html> |