GITVIEW

Your GitHub contributions, visualized By Masterofnone

v1.0

🌍 Language Universe

📈 Activity Trends

Your Code Beat - Last 7 days

Profile & Actions

Alex Rodriguez

@devmaster_42

1,776

commits

streak

Not signed in

if (gapValue) gapValue.textContent = config.gap + 'px'; renderGraph(); }); } } function setColorScheme(id) { config.colorScheme = id; const schemeToTheme = { github: 'emerald', teal: 'cyan', purple: 'violet', pink: 'rose', gold: 'amber' }; // Refresh inline buttons for visual active state renderInlineColorSchemes(); // Drive the global theme so the whole page (CSS vars) updates const targetTheme = schemeToTheme[id] || 'emerald'; setGlobalTheme(targetTheme); } function setShape(id) { config.shape = id; // Update all shape buttons (both sidebar and inline) document.querySelectorAll('.shape-btn').forEach(btn => { btn.classList.remove('active'); }); // Re-render inline buttons to show correct active state renderInlineShapeButtons(); renderGraph(); } // ═══════════════════════════════════════════════════════════════════ // TOGGLE FUNCTIONS // ═══════════════════════════════════════════════════════════════════ function togglePanel() { toggleLogoSettings(); } function toggleLogoSettings() { const logoCard = document.getElementById('logo-card'); const isShowingSettings = logoCard.classList.toggle('show-settings'); // Populate inline settings controls if showing if (isShowingSettings) { renderInlineColorSchemes(); renderInlineShapeButtons(); syncInlineRanges(); } } function renderInlineColorSchemes() { const container = document.getElementById('inline-color-schemes'); if (!container) return; container.innerHTML = COLOR_SCHEMES.map(scheme => ` `).join(''); } function renderInlineShapeButtons() { const container = document.getElementById('inline-shape-buttons'); if (!container) return; const shapeIcons = { square: '', rounded: '', circle: '' }; container.innerHTML = SHAPES.map(shape => ` `).join(''); } function syncInlineRanges() { const gapRange = document.getElementById('inline-gap-range'); if (gapRange) { gapRange.value = config.gap; // Remove existing listeners to avoid duplicates const newGapRange = gapRange.cloneNode(true); gapRange.parentNode.replaceChild(newGapRange, gapRange); newGapRange.addEventListener('input', (e) => { config.gap = parseInt(e.target.value); renderGraph(); }); } } // ═══════════════════════════════════════════════════════════════════ // FEEDBACK MODAL // ═══════════════════════════════════════════════════════════════════ let feedbackMood = null; window.openFeedbackModal = function() { const modal = document.getElementById('feedback-modal'); if (modal) { modal.classList.add('active'); // Reset state feedbackMood = null; const textArea = document.getElementById('feedback-text'); if (textArea) textArea.value = ''; document.querySelectorAll('.feedback-emoji-btn').forEach(btn => btn.classList.remove('active')); } } window.closeFeedbackModal = function() { const modal = document.getElementById('feedback-modal'); if (modal) { modal.classList.remove('active'); } } window.setFeedbackMood = function(mood) { feedbackMood = mood; document.querySelectorAll('.feedback-emoji-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.mood === mood); }); } window.submitFeedback = async function() { const text = document.getElementById('feedback-text').value.trim(); if (!text) { alert('Please enter some feedback'); return; } try { // Send feedback to server const response = await fetch('/api/feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ mood: feedbackMood || 'neutral', message: text }) }); const data = await response.json(); if (response.ok) { alert('Thank you for your feedback! 🎉'); closeFeedbackModal(); } else { alert('Failed to submit feedback: ' + (data.error || 'Unknown error')); } } catch (err) { console.error('Feedback submission error:', err); alert('Failed to submit feedback. Please try again.'); } } // Close modal when clicking outside document.addEventListener('click', (e) => { const modal = document.getElementById('feedback-modal'); if (e.target === modal) { closeFeedbackModal(); } }); // Check if user is admin and show admin button async function checkAndShowAdminButton(username) { try { const res = await fetch('/api/admin/check-status'); const data = await res.json(); if (data.isAdmin) { const adminBtn = document.getElementById('admin-dashboard-btn'); if (adminBtn) { adminBtn.style.display = 'flex'; console.log('✅ Admin button shown for:', username); } } } catch (err) { console.debug('Admin check failed:', err); } } // Close settings island when clicking outside // ═══════════════════════════════════════════════════════════════════ // SLIDE-IN PROFILE PANEL // ═══════════════════════════════════════════════════════════════════ function toggleSlidePanel() { const panel = document.getElementById('slide-panel'); if (panel) panel.classList.toggle('open'); } // Close slide panel when clicking outside document.addEventListener('click', (e) => { const panel = document.getElementById('slide-panel'); const trigger = document.getElementById('slide-panel-trigger'); if (panel && panel.classList.contains('open') && !panel.contains(e.target) && e.target !== trigger && !trigger.contains(e.target)) { panel.classList.remove('open'); } }); // ═══════════════════════════════════════════════════════════════════ // GLOBAL COLOR THEME // ═══════════════════════════════════════════════════════════════════ let currentGlobalTheme = 'emerald'; function toggleThemeDropdown(e) { if (e) e.stopPropagation(); const dropdown = document.getElementById('panel-theme-dropdown'); if (dropdown) dropdown.classList.toggle('open'); } // Close dropdown when clicking outside document.addEventListener('click', (e) => { const dropdown = document.getElementById('panel-theme-dropdown'); if (dropdown && !dropdown.contains(e.target)) { dropdown.classList.remove('open'); } }); function setGlobalTheme(theme) { currentGlobalTheme = theme; // Remove all theme classes document.body.classList.remove('theme-emerald', 'theme-cyan', 'theme-violet', 'theme-rose', 'theme-amber'); // Add the selected theme class document.body.classList.add('theme-' + theme); // Update dropdown button active states document.querySelectorAll('.theme-option').forEach(opt => { opt.classList.toggle('active', opt.dataset.theme === theme); }); // Close dropdown const themeDropdown = document.getElementById('panel-theme-dropdown'); if (themeDropdown) themeDropdown.classList.remove('open'); // Update graph color scheme to match global theme const themeToScheme = { 'emerald': 'github', 'cyan': 'teal', 'violet': 'purple', 'rose': 'pink', 'amber': 'gold' }; // Also update the sidebar color scheme buttons document.querySelectorAll('.color-scheme-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.scheme === themeToScheme[theme]); }); config.colorScheme = themeToScheme[theme] || 'github'; // Re-render visualizations with new colors if (contributionData) { renderGraph(); if (typeof setChartType === 'function') { setChartType(currentChartType); } else { renderActivityChart(currentChartType); } renderSolarSystem(); } // Update SVG logo color if (typeof updateLogoColor === 'function') { updateLogoColor(); } // Update color bubbles active state if (typeof updateActiveBubble === 'function') { updateActiveBubble(); } // Re-init EKG if available /* if (typeof initEKG === 'function') { initEKG(); } */ // Save preference localStorage.setItem('gitview-global-theme', theme); } // Expose setGlobalTheme to window for external modules window.setGlobalTheme = setGlobalTheme; function updateLogoColor() { const accent = getComputedStyle(document.body).getPropertyValue('--accent').trim(); if (accent) { document.documentElement.style.setProperty('--logo-svg-accent', accent); } } function loadSavedTheme() { const saved = localStorage.getItem('gitview-global-theme'); if (saved && ['emerald', 'cyan', 'violet', 'rose', 'amber'].includes(saved)) { setGlobalTheme(saved); } else { setGlobalTheme('emerald'); } } // ═══════════════════════════════════════════════════════════════════ // LOGO GLITCH COLOR PICKER // ═══════════════════════════════════════════════════════════════════ let isGlitching = false; let colorBubblesVisible = false; function toggleColorPalette() { if (isGlitching) return; const logo = document.getElementById('logo-svg'); const logoCard = document.getElementById('logo-card'); const colorBubbles = document.getElementById('color-bubbles'); if (!logo || !colorBubbles) return; if (colorBubblesVisible) { hideColorBubbles(); return; } isGlitching = true; logo.classList.add('glitch'); logoCard.classList.add('glitch-active'); setTimeout(() => { logo.classList.remove('glitch'); logoCard.classList.remove('glitch-active'); logoCard.classList.add('showing-colors'); colorBubbles.classList.add('visible'); colorBubblesVisible = true; isGlitching = false; updateActiveBubble(); }, 800); } function hideColorBubbles() { const logoCard = document.getElementById('logo-card'); const colorBubbles = document.getElementById('color-bubbles'); if (logoCard) logoCard.classList.remove('showing-colors'); if (colorBubbles) colorBubbles.classList.remove('visible'); colorBubblesVisible = false; } function selectColorScheme(schemeId) { // Apply the color scheme setColorScheme(schemeId); // Update active state on bubbles updateActiveBubble(); // Hide bubbles after a short delay setTimeout(hideColorBubbles, 300); } function updateActiveBubble() { const bubbles = document.querySelectorAll('.color-bubble'); const schemeMap = { 'github': 0, 'teal': 1, 'purple': 2, 'pink': 3, 'gold': 4 }; bubbles.forEach((bubble, index) => { bubble.classList.toggle('active', index === schemeMap[config.colorScheme]); }); } // Close color bubbles when clicking outside document.addEventListener('click', (e) => { if (colorBubblesVisible) { const logoCard = document.getElementById('logo-card'); if (logoCard && !logoCard.contains(e.target)) { hideColorBubbles(); } } }); function loadDemo() { isDemoMode = true; contributionData = generateFakeContributions(); startCreativeAnimation(); // Update panel elements const panelDemoText = document.getElementById('panel-demo-text'); const panelDemoBtn = document.getElementById('panel-demo-btn'); const panelStatus = document.getElementById('panel-status'); if (panelDemoText) panelDemoText.textContent = 'Exit Demo'; if (panelDemoBtn) panelDemoBtn.classList.add('active'); if (panelStatus) panelStatus.textContent = 'Demo Mode'; setupUI(); renderGraph(); if (typeof setChartType === 'function') { setChartType(currentChartType); } else { renderActivityChart(currentChartType); } renderSolarSystem(); } function exitDemo() { isDemoMode = false; contributionData = null; const demoBadge = document.getElementById('demo-badge'); if (demoBadge) demoBadge.classList.remove('visible'); const demoBtnText = document.getElementById('demo-btn-text'); if (demoBtnText) demoBtnText.textContent = 'Try Demo'; const demoBtn = document.getElementById('demo-btn'); if (demoBtn) demoBtn.classList.remove('active'); const statusText = document.getElementById('status-text'); if (statusText) statusText.textContent = 'Not signed in'; const graphContainer = document.getElementById('graph-container'); if (graphContainer) graphContainer.innerHTML = '

'; } function exportImage() { const canvas = document.getElementById('contribution-canvas'); if (canvas) { const link = document.createElement('a'); link.download = 'gitview-contributions.png'; link.href = canvas.toDataURL(); link.click(); } } function resetConfig() { config = { colorScheme: 'teal', shape: 'rounded', size: 12, gap: 2, bgColor: '#0d1117' }; const sizeRange = document.getElementById('size-range'); if (sizeRange) sizeRange.value = 14; const gapRange = document.getElementById('gap-range'); if (gapRange) gapRange.value = 3; const sizeValue = document.getElementById('size-value'); if (sizeValue) sizeValue.textContent = '14px'; const gapValue = document.getElementById('gap-value'); if (gapValue) gapValue.textContent = '3px'; setupUI(); renderGraph(); } // ═══════════════════════════════════════════════════════════════════ // INIT // ═══════════════════════════════════════════════════════════════════ async function init() { // Load saved color theme loadSavedTheme(); try { const res = await fetch('/api/auth/status'); const data = await res.json(); if (data.authenticated) { // Show real user data const userName = document.getElementById('user-name'); if (userName) userName.textContent = data.user.name || data.user.login; const userHandle = document.getElementById('user-handle'); if (userHandle) userHandle.textContent = '@' + data.user.login; const userAvatar = document.getElementById('user-avatar'); if (userAvatar) userAvatar.src = data.user.avatar_url; const signinBtn = document.getElementById('signin-btn'); if (signinBtn) signinBtn.style.display = 'none'; const profileSignin = document.getElementById('profile-signin'); if (profileSignin) profileSignin.style.display = 'none'; const profileBadge = document.getElementById('profile-badge'); if (profileBadge) profileBadge.textContent = 'LIVE'; const statusText = document.getElementById('status-text'); if (statusText) statusText.textContent = 'Signed in as ' + data.user.login; // Load real contributions const contribRes = await fetch('/api/contributions'); contributionData = await contribRes.json(); setupUI(); renderGraph(); if (typeof setChartType === 'function') { setChartType('heartbeat'); } else { renderActivityChart('heartbeat'); } renderSolarSystem(); } else { // Auto-load demo for preview loadDemo(); } } catch (error) { console.error('Init error:', error); loadDemo(); } } // ═══════════════════════════════════════════════════════════════════ // Random glitch loop is handled by triggerLogoGlitch defined above // Start init();

Connect GitHub

Send Feedback