📤 Submit Leak
diff --git a/script.js b/script.js
index 5c89693..d716892 100644
--- a/script.js
+++ b/script.js
@@ -1298,7 +1298,6 @@ function updateUserStats(username, action, data = {}) {
// Chat System Functions
let chatMessages = [];
let onlineUsers = new Set();
-let currentUser = null;
function toggleChat() {
const chatPanel = document.getElementById('chatPanel');
@@ -1390,3 +1389,356 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
});
+
+// Production-Ready Features
+let userPreferences = JSON.parse(localStorage.getItem('userPreferences') || '{}');
+
+// Initialize production features
+function initializeProductionFeatures() {
+ updateUserInterface();
+ setupNavigation();
+ loadUserPreferences();
+ updateActiveUsers();
+
+ // Auto-save every 30 seconds
+ setInterval(autoSave, 30000);
+
+ // Update stats every 10 seconds
+ setInterval(updateRealTimeStats, 10000);
+}
+
+function updateUserInterface() {
+ document.getElementById('currentUserName').textContent = currentUser;
+ document.getElementById('profileName').textContent = currentUser;
+ document.getElementById('userNameInput').value = currentUser;
+
+ // Update active users count
+ const uniqueUsers = new Set(leakDatabase.map(sub => sub.source));
+ document.getElementById('activeUsers').textContent = uniqueUsers.size;
+}
+
+function setupNavigation() {
+ // Handle navigation links
+ document.querySelectorAll('.nav-link').forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ const target = e.target.getAttribute('href').substring(1);
+ scrollToSection(target);
+
+ // Update active state
+ document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
+ e.target.classList.add('active');
+ });
+ });
+}
+
+function scrollToSection(sectionId) {
+ const sections = {
+ 'submit': document.querySelector('.submission-form'),
+ 'library': document.querySelector('.submissions-list'),
+ 'compare': document.querySelector('.comparison-section'),
+ 'community': document.querySelector('.leaderboard-overlay'),
+ 'analytics': document.querySelector('.analytics-overlay')
+ };
+
+ if (sections[sectionId]) {
+ sections[sectionId].scrollIntoView({ behavior: 'smooth' });
+ }
+}
+
+// User Profile Functions
+function toggleUserProfile() {
+ const overlay = document.getElementById('userProfileOverlay');
+ if (overlay.style.display === 'none') {
+ loadUserProfile();
+ overlay.style.display = 'flex';
+ } else {
+ overlay.style.display = 'none';
+ }
+}
+
+function loadUserProfile() {
+ const stats = userStats[currentUser] || {};
+ const userAchievements = displayAchievements(currentUser);
+
+ // Update profile stats
+ document.getElementById('profileStats').innerHTML = `
+
+
${stats.submissions || 0}
+
Submissions
+
+
+
${stats.firstDiscoveries || 0}
+
First Discoveries
+
+
+
${stats.verifiedLeaks || 0}
+
Verified Leaks
+
+
+
${stats.totalScore || 0}
+
Total Score
+
+ `;
+
+ // Update achievements
+ document.getElementById('profileAchievements').innerHTML = userAchievements.length > 0
+ ? userAchievements.map(achievement => `
+
+
${achievement.icon}
+
${achievement.name}
+
+ `).join('')
+ : '
No achievements yet. Start submitting to earn badges!
';
+}
+
+// Settings Functions
+function toggleSettings() {
+ const overlay = document.getElementById('settingsOverlay');
+ if (overlay.style.display === 'none') {
+ overlay.style.display = 'flex';
+ } else {
+ overlay.style.display = 'none';
+ }
+}
+
+function loadUserPreferences() {
+ document.getElementById('userNameInput').value = currentUser;
+ document.getElementById('notificationsEnabled').checked = userPreferences.notifications !== false;
+ document.getElementById('autoSaveEnabled').checked = userPreferences.autoSave !== false;
+}
+
+function saveUserPreferences() {
+ currentUser = document.getElementById('userNameInput').value || 'Guest';
+ userPreferences.notifications = document.getElementById('notificationsEnabled').checked;
+ userPreferences.autoSave = document.getElementById('autoSaveEnabled').checked;
+
+ localStorage.setItem('currentUser', currentUser);
+ localStorage.setItem('userPreferences', JSON.stringify(userPreferences));
+
+ updateUserInterface();
+ showAlert('Settings saved successfully!');
+}
+
+// Analytics Functions
+function toggleAnalytics() {
+ const overlay = document.getElementById('analyticsOverlay');
+ if (overlay.style.display === 'none') {
+ loadAnalytics();
+ overlay.style.display = 'flex';
+ } else {
+ overlay.style.display = 'none';
+ }
+}
+
+function loadAnalytics() {
+ loadPlatformStats();
+ loadTargetDistribution();
+ loadGrowthTrends();
+ loadTopContributors();
+}
+
+function loadPlatformStats() {
+ const totalSubmissions = leakDatabase.length;
+ const verifiedCount = leakDatabase.filter(sub => sub.confidence >= 95).length;
+ const uniqueUsers = new Set(leakDatabase.map(sub => sub.source)).size;
+ const avgConfidence = leakDatabase.length > 0
+ ? Math.round(leakDatabase.reduce((sum, sub) => sum + sub.confidence, 0) / leakDatabase.length)
+ : 0;
+
+ document.getElementById('platformStats').innerHTML = `
+
+
${totalSubmissions}
+
Total Submissions
+
+
+
${verifiedCount}
+
Verified Prompts
+
+
+
${uniqueUsers}
+
Active Users
+
+
+
${avgConfidence}%
+
Avg Confidence
+
+ `;
+}
+
+function loadTargetDistribution() {
+ const distribution = {};
+ leakDatabase.forEach(sub => {
+ distribution[sub.targetType] = (distribution[sub.targetType] || 0) + 1;
+ });
+
+ const chartData = Object.entries(distribution).map(([type, count]) => `
+
+ `).join('');
+
+ document.getElementById('targetChart').innerHTML = chartData;
+}
+
+function loadGrowthTrends() {
+ const last7Days = Array.from({length: 7}, (_, i) => {
+ const date = new Date();
+ date.setDate(date.getDate() - i);
+ return date.toISOString().split('T')[0];
+ }).reverse();
+
+ const dailySubmissions = last7Days.map(date =>
+ leakDatabase.filter(sub => sub.timestamp.startsWith(date)).length
+ );
+
+ const trendData = last7Days.map((date, i) => `
+
+
${new Date(date).toLocaleDateString()}
+
${dailySubmissions[i]}
+
+ `).join('');
+
+ document.getElementById('growthTrends').innerHTML = trendData;
+}
+
+function loadTopContributors() {
+ const topUsers = Object.entries(userStats)
+ .sort((a, b) => b[1].totalScore - a[1].totalScore)
+ .slice(0, 5);
+
+ const contributorsData = topUsers.map((user, index) => `
+
+
#${index + 1}
+
${user[0]}
+
${user[1].totalScore} pts
+
+ `).join('');
+
+ document.getElementById('topContributors').innerHTML = contributorsData;
+}
+
+// Data Management Functions
+function exportData() {
+ const data = {
+ leakDatabase,
+ userStats,
+ leakRequests,
+ userVotes,
+ dailyChallenge,
+ userAchievements,
+ userPreferences,
+ exportDate: new Date().toISOString()
+ };
+
+ const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `leakhub-backup-${new Date().toISOString().split('T')[0]}.json`;
+ a.click();
+ URL.revokeObjectURL(url);
+
+ showAlert('Data exported successfully!');
+}
+
+function importData() {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '.json';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const data = JSON.parse(e.target.result);
+
+ if (confirm('This will replace all current data. Are you sure?')) {
+ leakDatabase = data.leakDatabase || [];
+ userStats = data.userStats || {};
+ leakRequests = data.leakRequests || [];
+ userVotes = data.userVotes || {};
+ dailyChallenge = data.dailyChallenge || null;
+ userAchievements = data.userAchievements || {};
+ userPreferences = data.userPreferences || {};
+
+ saveDatabase().then(() => {
+ updateUI();
+ showAlert('Data imported successfully!');
+ });
+ }
+ } catch (error) {
+ showAlert('Error importing data. Please check the file format.');
+ }
+ };
+ reader.readAsText(file);
+ }
+ };
+ input.click();
+}
+
+function clearAllData() {
+ if (confirm('This will permanently delete all data. Are you absolutely sure?')) {
+ leakDatabase = [];
+ userStats = {};
+ leakRequests = [];
+ userVotes = {};
+ dailyChallenge = null;
+ userAchievements = {};
+
+ localStorage.clear();
+ updateUI();
+ showAlert('All data cleared successfully!');
+ }
+}
+
+// Utility Functions
+function autoSave() {
+ if (userPreferences.autoSave !== false) {
+ saveDatabase();
+ console.log('Auto-saved at', new Date().toLocaleTimeString());
+ }
+}
+
+function updateRealTimeStats() {
+ updateActiveUsers();
+ updateUI();
+}
+
+function updateActiveUsers() {
+ const uniqueUsers = new Set(leakDatabase.map(sub => sub.source));
+ document.getElementById('activeUsers').textContent = uniqueUsers.size;
+}
+
+// Enhanced notification system
+function showNotification(title, message, type = 'info') {
+ if (userPreferences.notifications !== false) {
+ const notification = document.createElement('div');
+ notification.className = `notification ${type}`;
+ notification.innerHTML = `
+
+
${message}
+ `;
+
+ document.body.appendChild(notification);
+
+ setTimeout(() => {
+ if (notification.parentElement) {
+ notification.remove();
+ }
+ }, 5000);
+ }
+}
+
+// Initialize production features when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ initializeProductionFeatures();
+});
diff --git a/styles.css b/styles.css
index b323257..4bc7969 100644
--- a/styles.css
+++ b/styles.css
@@ -1267,3 +1267,844 @@ button.secondary:hover {
font-size: 0.9rem;
}
}
+
+/* Production Navigation */
+.production-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.95);
+ backdrop-filter: blur(10px);
+ border-bottom: 2px solid rgba(0, 255, 255, 0.3);
+ z-index: 1000;
+ padding: 0.5rem 0;
+}
+
+.nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 2rem;
+}
+
+.nav-brand {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: bold;
+ background: linear-gradient(135deg, #00ffff, #ff00ff);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin: 0;
+}
+
+.version {
+ background: rgba(0, 255, 255, 0.2);
+ color: #00ffff;
+ padding: 0.2rem 0.5rem;
+ border-radius: 10px;
+ font-size: 0.7rem;
+ font-weight: bold;
+}
+
+.nav-menu {
+ display: flex;
+ gap: 2rem;
+}
+
+.nav-link {
+ color: #fff;
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ font-weight: 500;
+}
+
+.nav-link:hover,
+.nav-link.active {
+ background: linear-gradient(135deg, #00ffff, #ff00ff);
+ color: #000;
+}
+
+.nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.user-profile-btn {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ padding: 0.5rem 1rem;
+ color: #fff;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.user-profile-btn:hover {
+ background: rgba(255, 255, 255, 0.2);
+ transform: translateY(-1px);
+}
+
+.user-avatar {
+ font-size: 1.2rem;
+}
+
+.settings-btn {
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1.2rem;
+}
+
+.settings-btn:hover {
+ background: rgba(255, 255, 255, 0.2);
+ transform: rotate(90deg);
+}
+
+/* Hero Section */
+.hero-section {
+ text-align: center;
+ padding: 4rem 2rem 2rem;
+ margin-top: 60px;
+}
+
+.hero-section h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, #00ffff, #ff00ff, #ffff00);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
+}
+
+.hero-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin: 3rem 0;
+ max-width: 1000px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.stat-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 15px;
+ padding: 1.5rem;
+ transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
+}
+
+.stat-icon {
+ font-size: 2.5rem;
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+}
+
+.stat-content {
+ text-align: left;
+}
+
+.stat-number {
+ font-size: 2rem;
+ font-weight: bold;
+ color: #00ffff;
+ margin-bottom: 0.5rem;
+}
+
+.stat-label {
+ color: #888;
+ font-size: 0.9rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.quick-actions {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 2rem;
+}
+
+.action-btn {
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 12px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 0.9rem;
+}
+
+.action-btn.primary {
+ background: linear-gradient(135deg, #ff00ff, #00ff88);
+ color: #000;
+}
+
+.action-btn.secondary {
+ background: linear-gradient(135deg, #ff6b6b, #ffd700);
+ color: #000;
+}
+
+.action-btn.tertiary {
+ background: linear-gradient(135deg, #00ffff, #ff00ff);
+ color: #000;
+}
+
+.action-btn.quaternary {
+ background: linear-gradient(135deg, #ffd700, #ff6b6b);
+ color: #000;
+}
+
+.action-btn:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+/* Overlay System */
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.8);
+ backdrop-filter: blur(10px);
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+}
+
+.overlay-content {
+ background: rgba(0, 0, 0, 0.95);
+ border: 2px solid #00ffff;
+ border-radius: 20px;
+ padding: 2rem;
+ max-width: 600px;
+ width: 100%;
+ max-height: 80vh;
+ overflow-y: auto;
+ position: relative;
+ box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
+}
+
+.overlay-content.wide {
+ max-width: 1000px;
+}
+
+.close-button {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ background: none;
+ border: none;
+ color: #fff;
+ font-size: 1.5rem;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: all 0.3s ease;
+}
+
+.close-button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ transform: rotate(90deg);
+}
+
+/* User Profile Styles */
+.profile-header {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.profile-avatar {
+ font-size: 4rem;
+ margin: 1rem 0;
+ filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
+}
+
+.profile-name {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #00ffff;
+ margin-bottom: 0.5rem;
+}
+
+.profile-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.profile-achievements {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+ gap: 1rem;
+}
+
+/* Settings Styles */
+.settings-section {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 10px;
+}
+
+.settings-section h3 {
+ color: #00ffff;
+ margin-bottom: 1rem;
+}
+
+.settings-section label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+ color: #fff;
+}
+
+.settings-section input[type="text"] {
+ background: rgba(0, 0, 0, 0.5);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 5px;
+ padding: 0.5rem;
+ color: #fff;
+ width: 100%;
+ margin-top: 0.5rem;
+}
+
+.settings-btn {
+ background: linear-gradient(135deg, #00ffff, #ff00ff);
+ border: none;
+ border-radius: 8px;
+ padding: 0.8rem 1.5rem;
+ color: #000;
+ cursor: pointer;
+ margin: 0.5rem;
+ font-weight: bold;
+ transition: all 0.3s ease;
+}
+
+.settings-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
+}
+
+.settings-btn.danger {
+ background: linear-gradient(135deg, #ff6b6b, #ff0000);
+ color: #fff;
+}
+
+/* Analytics Styles */
+.analytics-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+}
+
+.analytics-card {
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 15px;
+ padding: 1.5rem;
+}
+
+.analytics-card h3 {
+ color: #00ffff;
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .nav-container {
+ padding: 0 1rem;
+ }
+
+ .nav-menu {
+ display: none;
+ }
+
+ .hero-section h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-stats {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ }
+
+ .quick-actions {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .action-btn {
+ width: 100%;
+ max-width: 300px;
+ }
+
+ .overlay-content {
+ margin: 1rem;
+ padding: 1rem;
+ }
+
+ .analytics-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 480px) {
+ .hero-stats {
+ grid-template-columns: 1fr;
+ }
+
+ .stat-item {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .nav-brand .version {
+ display: none;
+ }
+}
+
+/* Analytics Components */
+.analytics-stat {
+ text-align: center;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ margin: 0.5rem;
+}
+
+.analytics-stat .stat-number {
+ font-size: 2rem;
+ font-weight: bold;
+ color: #00ffff;
+ margin-bottom: 0.5rem;
+}
+
+.analytics-stat .stat-label {
+ color: #888;
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.chart-bar {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.bar-label {
+ min-width: 80px;
+ color: #fff;
+ font-size: 0.9rem;
+}
+
+.bar-container {
+ flex: 1;
+ height: 20px;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+.bar-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #00ffff, #ff00ff);
+ transition: width 1s ease;
+}
+
+.bar-value {
+ min-width: 40px;
+ text-align: right;
+ color: #00ffff;
+ font-weight: bold;
+}
+
+.trend-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.5rem;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+ margin-bottom: 0.5rem;
+}
+
+.trend-date {
+ color: #888;
+ font-size: 0.9rem;
+}
+
+.trend-value {
+ color: #00ffff;
+ font-weight: bold;
+}
+
+.contributor-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.8rem;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 8px;
+ margin-bottom: 0.5rem;
+}
+
+.contributor-rank {
+ background: linear-gradient(135deg, #ffd700, #ff6b6b);
+ color: #000;
+ padding: 0.3rem 0.6rem;
+ border-radius: 15px;
+ font-weight: bold;
+ font-size: 0.8rem;
+}
+
+.contributor-name {
+ flex: 1;
+ color: #fff;
+ font-weight: 500;
+}
+
+.contributor-score {
+ color: #00ffff;
+ font-weight: bold;
+}
+
+/* Notification System */
+.notification {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ width: 350px;
+ background: rgba(0, 0, 0, 0.95);
+ border: 2px solid #00ffff;
+ border-radius: 15px;
+ padding: 1rem;
+ z-index: 3000;
+ transform: translateX(400px);
+ transition: transform 0.5s ease;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.notification.show {
+ transform: translateX(0);
+}
+
+.notification.info {
+ border-color: #00ffff;
+}
+
+.notification.success {
+ border-color: #00ff00;
+}
+
+.notification.warning {
+ border-color: #ffff00;
+}
+
+.notification.error {
+ border-color: #ff0000;
+}
+
+.notification-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.5rem;
+}
+
+.notification-header h4 {
+ margin: 0;
+ color: #00ffff;
+ font-size: 1rem;
+}
+
+.notification-header button {
+ background: none;
+ border: none;
+ color: #fff;
+ font-size: 1.2rem;
+ cursor: pointer;
+ padding: 0;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.notification p {
+ margin: 0;
+ color: #fff;
+ font-size: 0.9rem;
+ line-height: 1.4;
+}
+
+/* Achievement Badge */
+.achievement-badge {
+ text-align: center;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ transition: all 0.3s ease;
+}
+
+.achievement-badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
+}
+
+.achievement-badge .achievement-icon {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+}
+
+.achievement-badge .achievement-name {
+ color: #00ffff;
+ font-size: 0.8rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+/* Stat Card */
+.stat-card {
+ text-align: center;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
+}
+
+.stat-card .stat-number {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #00ffff;
+ margin-bottom: 0.5rem;
+}
+
+.stat-card .stat-label {
+ color: #888;
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+/* Enhanced Form Styles */
+.enhanced-form {
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 15px;
+ padding: 2rem;
+ margin-bottom: 2rem;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-group label {
+ display: block;
+ color: #00ffff;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+ width: 100%;
+ padding: 0.8rem;
+ background: rgba(0, 0, 0, 0.5);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ color: #fff;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: #00ffff;
+ box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.form-group textarea {
+ min-height: 120px;
+ resize: vertical;
+}
+
+/* Loading States */
+.loading {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border: 3px solid rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ border-top-color: #00ffff;
+ animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+/* Tooltip System */
+.tooltip {
+ position: relative;
+ display: inline-block;
+}
+
+.tooltip .tooltiptext {
+ visibility: hidden;
+ width: 200px;
+ background-color: rgba(0, 0, 0, 0.9);
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 0.5rem;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%;
+ left: 50%;
+ margin-left: -100px;
+ opacity: 0;
+ transition: opacity 0.3s;
+ font-size: 0.8rem;
+}
+
+.tooltip:hover .tooltiptext {
+ visibility: visible;
+ opacity: 1;
+}
+
+/* Progress Indicators */
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 4px;
+ overflow: hidden;
+ margin: 0.5rem 0;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #00ffff, #ff00ff);
+ transition: width 0.5s ease;
+}
+
+/* Status Indicators */
+.status-indicator {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 0.5rem;
+}
+
+.status-indicator.online {
+ background: #00ff00;
+ box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+}
+
+.status-indicator.offline {
+ background: #ff0000;
+}
+
+.status-indicator.busy {
+ background: #ffff00;
+ box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
+}
+
+/* Responsive Design for New Components */
+@media (max-width: 768px) {
+ .analytics-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .chart-bar {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+
+ .bar-container {
+ width: 100%;
+ }
+
+ .notification {
+ width: 90vw;
+ right: 5vw;
+ }
+
+ .achievement-badge {
+ padding: 0.8rem;
+ }
+
+ .achievement-badge .achievement-icon {
+ font-size: 1.5rem;
+ }
+
+ .stat-card {
+ padding: 0.8rem;
+ }
+
+ .stat-card .stat-number {
+ font-size: 1.2rem;
+ }
+}