training-academy/reset.html

304 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reset to Fresh Install - Gooner Training Academy</title>
<link rel="stylesheet" href="src/styles/color-variables.css">
<link rel="stylesheet" href="src/styles/styles.css">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg-primary);
color: var(--text-primary);
padding: 20px;
}
.reset-container {
max-width: 600px;
background: var(--bg-secondary);
border: 2px solid var(--color-primary);
border-radius: 10px;
padding: 40px;
text-align: center;
}
.reset-container h1 {
color: var(--color-primary);
margin-bottom: 20px;
}
.warning {
background: rgba(255, 59, 48, 0.1);
border: 2px solid #ff3b30;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
color: #ff3b30;
font-weight: bold;
}
.data-list {
text-align: left;
background: var(--bg-primary);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.data-list ul {
margin: 10px 0;
padding-left: 20px;
}
.data-list li {
margin: 8px 0;
}
.button-group {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
.btn {
padding: 15px 30px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.btn-danger {
background: #ff3b30;
color: white;
}
.btn-danger:hover {
background: #ff1f14;
transform: scale(1.05);
}
.btn-secondary {
background: var(--bg-primary);
color: var(--text-primary);
border: 2px solid var(--color-primary);
}
.btn-secondary:hover {
background: var(--bg-primary-overlay-10);
transform: scale(1.05);
}
.status-message {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
display: none;
}
.status-message.success {
background: rgba(52, 199, 89, 0.1);
border: 2px solid #34c759;
color: #34c759;
display: block;
}
.status-message.error {
background: rgba(255, 59, 48, 0.1);
border: 2px solid #ff3b30;
color: #ff3b30;
display: block;
}
.countdown {
font-size: 48px;
color: var(--color-primary);
margin: 20px 0;
}
</style>
</head>
<body>
<div class="reset-container">
<h1>🔄 Reset to Fresh Install</h1>
<div class="warning">
⚠️ IMPORTANT: You must use the script files to reset!
</div>
<div class="data-list">
<p><strong>Electron stores data persistently - clearing it here won't work!</strong></p>
<p style="margin-top: 15px;">To properly reset the application:</p>
<ol style="text-align: left; margin-top: 10px;">
<li><strong>Close this application completely</strong></li>
<li><strong>Windows:</strong> Run <code>reset-to-fresh.bat</code></li>
<li><strong>Mac/Linux:</strong> Run <code>./reset-to-fresh.sh</code></li>
</ol>
<hr style="margin: 20px 0; border-color: var(--color-primary);">
<p><strong>The script will delete ALL of the following:</strong></p>
<ul>
<li>Player stats and progress</li>
<li>Custom tasks and consequences</li>
<li>Saved Quick Play settings and presets</li>
<li>Flash messages and popup image settings</li>
<li>Theme preferences</li>
<li>Linked image directories</li>
<li>Linked video directories</li>
<li>Linked audio directories</li>
<li>Captured photos</li>
<li>Verification photos</li>
<li>All localStorage data</li>
<li>All IndexedDB data</li>
</ul>
<p style="color: var(--color-primary); margin-top: 15px;">
<strong>NOTE:</strong> Your actual media files will NOT be deleted.
Only the links to them will be cleared.
</p>
</div>
<div class="button-group">
<button id="reset-btn" class="btn btn-danger">Reset to Fresh Install</button>
<button id="cancel-btn" class="btn btn-secondary">Cancel</button>
</div>
<div id="status-message" class="status-message"></div>
<div id="countdown" class="countdown" style="display: none;"></div>
</div>
<script>
const resetBtn = document.getElementById('reset-btn');
const cancelBtn = document.getElementById('cancel-btn');
const statusMessage = document.getElementById('status-message');
const countdownElement = document.getElementById('countdown');
cancelBtn.addEventListener('click', () => {
window.location.href = 'index.html';
});
resetBtn.addEventListener('click', async () => {
// Double confirmation
const confirmed = confirm('Are you absolutely sure you want to delete ALL your data?\n\nThis action CANNOT be undone!');
if (!confirmed) return;
try {
resetBtn.disabled = true;
cancelBtn.disabled = true;
// Clear all localStorage
console.log('Clearing localStorage...');
const itemsCleared = [];
// List of known localStorage keys to clear
const keysToRemove = [
'playerStats',
'gameProgress',
'quickPlaySettings',
'linkedImageDirectories',
'linkedVideoDirectories',
'linkedIndividualVideos',
'linkedIndividualImages',
'linkedAudioDirectories',
'capturedPhotos',
'verificationPhotos',
'unifiedVideoLibrary',
'videoLibrary',
'videoFiles',
'customTasks',
'disabledTasks',
'flashMessages',
'flashMessageConfig',
'popupImageConfig',
'themePreference',
'audioSettings',
'webcamRecordingDirectory',
'webcamDirectoryHandleId',
'taskData',
'consequenceData',
'customTags',
'sessionHistory',
'achievements'
];
// Remove specific keys
keysToRemove.forEach(key => {
if (localStorage.getItem(key) !== null) {
localStorage.removeItem(key);
itemsCleared.push(key);
}
});
// Also clear any remaining keys (in case there are others)
const allKeys = Object.keys(localStorage);
allKeys.forEach(key => {
if (!itemsCleared.includes(key)) {
localStorage.removeItem(key);
itemsCleared.push(key);
}
});
console.log(`Cleared ${itemsCleared.length} localStorage items:`, itemsCleared);
// Clear all IndexedDB databases
console.log('Clearing IndexedDB...');
const databases = await indexedDB.databases();
const dbPromises = databases.map(db => {
return new Promise((resolve) => {
console.log(`Deleting IndexedDB: ${db.name}`);
const request = indexedDB.deleteDatabase(db.name);
request.onsuccess = () => {
console.log(`✅ Deleted IndexedDB: ${db.name}`);
resolve();
};
request.onerror = () => {
console.warn(`Failed to delete IndexedDB: ${db.name}`);
resolve();
};
});
});
await Promise.all(dbPromises);
// Clear sessionStorage too
console.log('Clearing sessionStorage...');
sessionStorage.clear();
// Show success message
statusMessage.className = 'status-message success';
statusMessage.textContent = `✅ Success! Cleared ${itemsCleared.length} localStorage items and ${databases.length} databases.`;
// Show countdown and redirect
countdownElement.style.display = 'block';
let countdown = 3;
countdownElement.textContent = countdown;
const countdownInterval = setInterval(() => {
countdown--;
if (countdown > 0) {
countdownElement.textContent = countdown;
} else {
clearInterval(countdownInterval);
countdownElement.textContent = 'Redirecting...';
setTimeout(() => {
window.location.href = 'index.html';
}, 500);
}
}, 1000);
} catch (error) {
console.error('Error during reset:', error);
statusMessage.className = 'status-message error';
statusMessage.textContent = `❌ Error: ${error.message}`;
resetBtn.disabled = false;
cancelBtn.disabled = false;
}
});
</script>
</body>
</html>