Skip to content

Commit b9341ac

Browse files
Alvi24-hubAlvi24-hub
committed
Fix: Project modal loading and conflicts resolved
1 parent 3cedd4c commit b9341ac

2 files changed

Lines changed: 633 additions & 971 deletions

File tree

‎web-app/index.html‎

Lines changed: 1 addition & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -582,113 +582,7 @@ <h3>Stay Updated</h3>
582582
<script defer src="js/projects/number-sliding-puzzle.js"></script>
583583
<script defer src="js/projects/budget-tracker.js"></script>
584584
<script defer src="js/projects/minesweeper.js"></script>
585-
<!-- FIX: Project Modal Loading - DIRECT OVERRIDE -->
586-
<script>
587-
(function() {
588-
console.log('🔧 Applying DIRECT project modal fix...');
589585

590-
// Wait for project.js to be fully loaded
591-
function waitForProjectJS() {
592-
if (typeof getProjectHTML === 'function' && typeof initializeProject === 'function') {
593-
console.log('✅ project.js loaded, applying fix...');
594-
applyFix();
595-
} else {
596-
console.log('⏳ Waiting for project.js...');
597-
setTimeout(waitForProjectJS, 200);
598-
}
599-
}
600-
601-
function applyFix() {
602-
// Store original if exists
603-
const originalOpen = window.openProjectSafe;
604-
605-
// Override openProjectSafe
606-
window.openProjectSafe = function(projectName, element) {
607-
console.log(`📂 Opening project: ${projectName}`);
608-
609-
const modal = document.getElementById('projectModal');
610-
const modalBody = document.getElementById('modalBody');
611-
612-
if (!modal || !modalBody) {
613-
console.error('❌ Modal elements not found');
614-
return;
615-
}
616-
617-
// Show loading
618-
modalBody.innerHTML = `
619-
<div style="text-align:center;padding:60px 20px;">
620-
<div style="font-size:3rem;margin-bottom:20px;">⏳</div>
621-
<h3 style="color:#e2e8f0;">Loading ${projectName.replace(/-/g, ' ')}...</h3>
622-
<div style="margin:20px auto;width:40px;height:40px;border:4px solid #1e293b;border-top-color:#a78bfa;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
623-
</div>
624-
`;
625-
modal.style.display = 'flex';
626-
627-
// Add to recently viewed
628-
let recentlyViewed = JSON.parse(localStorage.getItem('recentlyViewed') || '[]');
629-
recentlyViewed = recentlyViewed.filter(name => name !== projectName);
630-
recentlyViewed.unshift(projectName);
631-
if (recentlyViewed.length > 10) recentlyViewed.pop();
632-
localStorage.setItem('recentlyViewed', JSON.stringify(recentlyViewed));
633-
634-
// Update counter
635-
setTimeout(() => {
636-
if (window.updateRecentlyViewedCounter) {
637-
window.updateRecentlyViewedCounter();
638-
}
639-
}, 100);
640-
641-
// Load the project - USE THE CORRECT FUNCTIONS FROM project.js
642-
setTimeout(() => {
643-
try {
644-
console.log(`🔄 Calling getProjectHTML for: ${projectName}`);
645-
646-
// Get HTML from project.js
647-
let htmlContent = getProjectHTML(projectName);
648-
649-
if (htmlContent && !htmlContent.includes('error-state')) {
650-
modalBody.innerHTML = htmlContent;
651-
console.log(`✅ HTML loaded for: ${projectName}`);
652-
653-
// Initialize the project using project.js
654-
setTimeout(() => {
655-
console.log(`🔄 Initializing: ${projectName}`);
656-
initializeProject(projectName);
657-
}, 100);
658-
} else {
659-
// Fallback: Try to find render function
660-
const renderFn = 'render' + projectName.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
661-
if (typeof window[renderFn] === 'function') {
662-
modalBody.innerHTML = window[renderFn]();
663-
console.log(`✅ Used fallback render function: ${renderFn}`);
664-
} else {
665-
throw new Error(`No render function found for ${projectName}`);
666-
}
667-
}
668-
} catch (error) {
669-
console.error(`❌ Error loading ${projectName}:`, error);
670-
modalBody.innerHTML = `
671-
<div style="text-align:center;padding:60px 20px;">
672-
<div style="font-size:3rem;margin-bottom:20px;">🚀</div>
673-
<h2 style="color:#e2e8f0;">${projectName.replace(/-/g, ' ').toUpperCase()}</h2>
674-
<p style="color:#94a3b8;margin:10px 0 20px;">This project is coming soon!</p>
675-
<button onclick="document.getElementById('projectModal').style.display='none'"
676-
style="background:#a78bfa;color:white;border:none;padding:12px 32px;border-radius:50px;cursor:pointer;font-size:1rem;">
677-
Close
678-
</button>
679-
</div>
680-
`;
681-
}
682-
}, 300);
683-
};
684-
685-
console.log('✅ openProjectSafe overridden successfully!');
686-
}
687-
688-
// Start waiting for project.js
689-
waitForProjectJS();
690-
})();
691-
</script>
692586
<script>
693587
window.addEventListener('DOMContentLoaded', () => {
694588
if (typeof lucide !== 'undefined') lucide.createIcons();
@@ -1541,143 +1435,7 @@ <h3>${project.title}</h3>
15411435
console.log('✅ Focus error fixed');
15421436
}, 100);
15431437
</script>
1544-
<!-- FIX: Project Modal Loading - Ensure project.js functions are available -->
1545-
<script>
1546-
(function() {
1547-
console.log('🔧 Applying modal fix...');
1548-
1549-
function ensureProjectFunctions() {
1550-
if (typeof getProjectHTML === 'function' && typeof initializeProject === 'function') {
1551-
console.log('✅ Project functions available');
1552-
return true;
1553-
}
1554-
return false;
1555-
}
1556-
1557-
function fixOpenProject() {
1558-
if (!ensureProjectFunctions()) {
1559-
console.log('⏳ Waiting for project functions...');
1560-
setTimeout(fixOpenProject, 100);
1561-
return;
1562-
}
1563-
1564-
// Store original if exists
1565-
const originalOpen = window.openProjectSafe;
1566-
1567-
// Create new openProjectSafe
1568-
window.openProjectSafe = function(projectName, trigger) {
1569-
console.log(`📂 Opening: ${projectName}`);
1570-
1571-
const modal = document.getElementById('projectModal');
1572-
const modalBody = document.getElementById('modalBody');
1573-
1574-
if (!modal || !modalBody) {
1575-
console.error('❌ Modal elements not found');
1576-
if (originalOpen) originalOpen(projectName, trigger);
1577-
return;
1578-
}
1579-
1580-
// Show loading
1581-
modalBody.innerHTML = `
1582-
<div style="text-align:center;padding:60px 20px;color:#e2e8f0;">
1583-
<div style="font-size:3rem;margin-bottom:20px;">⏳</div>
1584-
<h3>Loading ${projectName.replace(/-/g, ' ')}...</h3>
1585-
<div style="margin:20px auto;width:40px;height:40px;border:4px solid #1e293b;border-top-color:#a78bfa;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
1586-
</div>
1587-
`;
1588-
modal.style.display = 'flex';
1589-
modal.classList.add('active');
1590-
document.body.style.overflow = 'hidden';
1591-
1592-
// Add to recently viewed
1593-
let recentlyViewed = JSON.parse(localStorage.getItem('recentlyViewed') || '[]');
1594-
recentlyViewed = recentlyViewed.filter(name => name !== projectName);
1595-
recentlyViewed.unshift(projectName);
1596-
if (recentlyViewed.length > 10) recentlyViewed.pop();
1597-
localStorage.setItem('recentlyViewed', JSON.stringify(recentlyViewed));
1598-
1599-
// Update counter
1600-
setTimeout(() => {
1601-
if (window.updateRecentlyViewedCounter) {
1602-
window.updateRecentlyViewedCounter();
1603-
}
1604-
if (window.updateRecentlyViewed) {
1605-
window.updateRecentlyViewed();
1606-
}
1607-
}, 100);
1608-
1609-
// Load project using project.js functions
1610-
setTimeout(() => {
1611-
try {
1612-
console.log(`🔄 Calling getProjectHTML for: ${projectName}`);
1613-
1614-
// Get HTML from project.js
1615-
let htmlContent = getProjectHTML(projectName);
1616-
1617-
if (htmlContent && !htmlContent.includes('error-state')) {
1618-
modalBody.innerHTML = htmlContent;
1619-
console.log(`✅ HTML loaded for: ${projectName}`);
1620-
1621-
// Initialize the project
1622-
setTimeout(() => {
1623-
console.log(`🔄 Initializing: ${projectName}`);
1624-
if (typeof initializeProject === 'function') {
1625-
initializeProject(projectName);
1626-
}
1627-
1628-
// Try to find and setup info button
1629-
const infoBtn = modalBody.querySelector('.inline-info-btn');
1630-
if (infoBtn && typeof getProjectInstructions === 'function') {
1631-
const projectNameForInfo = modalBody.closest('.project-content')?.getAttribute('data-project') || projectName;
1632-
const info = getProjectInstructions(projectNameForInfo);
1633-
if (info && typeof showInfoModal === 'function') {
1634-
infoBtn.addEventListener('click', function(e) {
1635-
e.stopPropagation();
1636-
showInfoModal(info.title, info.steps);
1637-
});
1638-
}
1639-
}
1640-
}, 100);
1641-
1642-
} else {
1643-
throw new Error('Project content not available');
1644-
}
1645-
} catch (error) {
1646-
console.error(`❌ Error loading ${projectName}:`, error);
1647-
modalBody.innerHTML = `
1648-
<div style="text-align:center;padding:60px 20px;">
1649-
<div style="font-size:4rem;margin-bottom:1rem;">🚀</div>
1650-
<h2 style="color:#e2e8f0;margin-bottom:0.5rem;">${projectName.replace(/-/g, ' ').toUpperCase()}</h2>
1651-
<p style="color:#94a3b8;margin-bottom:1.5rem;">This project is coming soon!</p>
1652-
<button onclick="document.getElementById('projectModal').style.display='none';document.body.style.overflow='';"
1653-
style="background:#a78bfa;color:white;border:none;padding:12px 32px;border-radius:50px;cursor:pointer;font-size:1rem;">
1654-
Close
1655-
</button>
1656-
</div>
1657-
`;
1658-
}
1659-
}, 300);
1660-
};
1661-
1662-
console.log('✅ openProjectSafe fixed successfully!');
1663-
}
1664-
1665-
// Start fix
1666-
fixOpenProject();
1667-
1668-
// Add spin animation if missing
1669-
if (!document.getElementById('spinStyle')) {
1670-
const style = document.createElement('style');
1671-
style.id = 'spinStyle';
1672-
style.textContent = `
1673-
@keyframes spin {
1674-
to { transform: rotate(360deg); }
1675-
}
1676-
`;
1677-
document.head.appendChild(style);
1678-
}
1679-
})();
1680-
</script>
1438+
16811439
<!-- Info Modal Popup -->
16821440
<div id="infoModalOverlay" class="info-modal-overlay">
16831441
<div class="info-modal-content">

0 commit comments

Comments
 (0)