commit 1427e674a7b2c4fb63b4a38fb4b3ade1f422cc9c parent e11a37be8e1da615b3b79e0e10480ab1d277723b Author: Amit Dutta <amitdutta4255@gmail.com> Date: Wed, 3 Sep 2025 21:16:55 +0530 Create index.html Diffstat:
| A | index.html | | | 308 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 308 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html @@ -0,0 +1,308 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>B.Sc. CS Hons - Practice Programs</title> + <script src="https://cdn.tailwindcss.com"></script> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> + <style> + body { + font-family: 'Inter', sans-serif; + background-color: #f0f4f8; + color: #1e293b; + transition: background-color 0.5s ease; + } + + /* Custom scrollbar styles */ + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: #e2e8f0; + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb { + background: #94a3b8; + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb:hover { + background: #64748b; + } + + .custom-scrollbar { + overflow-y: auto; + } + + /* New animated card gradient for light theme */ + .card-bg-gradient { + background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); + } + + .card-animation { + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .card-hover-effect:hover { + transform: translateY(-5px) scale(1.02); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 40px rgba(59, 130, 246, 0.2); + } + + /* Spinner */ + .spinner { + border: 4px solid rgba(0, 0, 0, 0.1); + width: 36px; + height: 36px; + border-radius: 50%; + border-top-color: #3b82f6; + animation: spin 1s linear infinite; + } + + @keyframes spin { + to { transform: rotate(360deg); } + } + + /* Backdrop filter for sticky header */ + .sticky-header { + backdrop-filter: blur(10px); + background-color: rgba(240, 244, 248, 0.8); + } + + /* Modal animation */ + .modal-enter { + opacity: 0; + transform: scale(0.95); + } + .modal-enter-active { + opacity: 1; + transform: scale(1); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + } + .modal-exit { + opacity: 1; + transform: scale(1); + } + .modal-exit-active { + opacity: 0; + transform: scale(0.95); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + } + </style> +</head> +<body class="bg-gray-100 min-h-screen flex flex-col items-center p-6 text-gray-800"> + + <!-- Header --> + <header class="sticky-header fixed top-0 w-full z-10 p-6 flex justify-center items-center shadow-md"> + <div class="text-center"> + <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 tracking-tight">B.Sc. CS Hons - Practice Programs</h1> + <p class="mt-2 text-md sm:text-lg text-gray-600">Explore C programs, executables, and snapshots from the WBSU syllabus.</p> + </div> + </header> + + <!-- Main Content Grid --> + <main id="main-content" class="container mx-auto px-4 w-full flex-grow custom-scrollbar mt-40"> + <div id="project-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> + <!-- Project cards will be dynamically inserted here --> + </div> + + <!-- Loading Spinner --> + <div id="loading" class="flex flex-col justify-center items-center mt-24"> + <div class="spinner"></div> + <span class="mt-4 text-gray-600 text-lg">Loading programs...</span> + </div> + + <!-- Error Message --> + <div id="error-message" class="hidden flex flex-col items-center justify-center mt-24 p-8 bg-red-50 bg-opacity-80 text-red-700 rounded-xl shadow-lg max-w-lg mx-auto border border-red-200"> + <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-red-500" viewBox="0 0 20 20" fill="currentColor"> + <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v5a1 1 0 102 0V6zm-1 8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" /> + </svg> + <h3 class="mt-4 text-2xl font-semibold">Failed to Load Programs</h3> + <p class="mt-2 text-center text-red-600" id="error-text">There was an issue fetching the project data. Please try again later.</p> + </div> + </main> + + <!-- Modal for viewing code --> + <div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 modal-exit"> + <div class="bg-white rounded-xl shadow-2xl overflow-hidden w-full max-w-4xl max-h-[90vh] flex flex-col border border-gray-200"> + <!-- Modal Header --> + <div class="flex justify-between items-center p-4 sm:p-6 bg-gray-50 border-b border-gray-200"> + <h2 id="modal-title" class="text-xl sm:text-2xl font-bold text-gray-800"></h2> + <div class="flex items-center space-x-2 sm:space-x-4"> + <a id="github-link" href="#" target="_blank" class="px-3 py-1 text-sm text-blue-600 bg-blue-100 rounded-full font-semibold hover:bg-blue-200 transition-colors duration-200"> + View on GitHub + </a> + <button id="close-modal" class="text-gray-500 hover:text-gray-700 transition-colors duration-200"> + <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> + </button> + </div> + </div> + <!-- Modal Body with Code --> + <div class="p-4 sm:p-6 flex flex-col flex-grow custom-scrollbar"> + <div id="code-content" class="tab-content flex-grow overflow-y-auto p-4 bg-gray-900 rounded-lg border border-gray-800"> + <pre class="text-sm text-gray-300 whitespace-pre-wrap"><code id="modal-code"></code></pre> + </div> + <div id="modal-loading" class="hidden flex justify-center items-center h-48"> + <div class="spinner"></div> + </div> + <div id="modal-error" class="hidden text-center text-red-400 mt-4">Failed to load content.</div> + </div> + </div> + </div> + + <script> + document.addEventListener('DOMContentLoaded', () => { + const projectContainer = document.getElementById('project-container'); + const loading = document.getElementById('loading'); + const errorMessage = document.getElementById('error-message'); + + const modal = document.getElementById('modal'); + const closeModalBtn = document.getElementById('close-modal'); + const modalTitle = document.getElementById('modal-title'); + const githubLink = document.getElementById('github-link'); + const modalCode = document.getElementById('modal-code'); + const modalLoading = document.getElementById('modal-loading'); + const modalError = document.getElementById('modal-error'); + + const API_URL = 'https://bsc-uf69.onrender.com/api/programs'; + const RAW_API_URL = 'https://bsc-uf69.onrender.com/api/raw'; + const GITHUB_REPO_URL = 'https://github.com/notamitgamer/bsc'; + + let programsData = []; + + // Fetch programs from the backend + async function fetchPrograms() { + try { + const response = await fetch(API_URL); + if (!response.ok) { + throw new Error(`HTTP Status: ${response.status}`); + } + const data = await response.json(); + programsData = data; + renderPrograms(data); + } catch (error) { + console.error('Error fetching programs:', error); + showError('Failed to fetch programs from the backend. The API might be offline or rate-limited. Please try again later.'); + } finally { + loading.classList.add('hidden'); + } + } + + // Render program cards + function renderPrograms(data) { + if (data.cFiles.length === 0) { + showError('No C programs found in the repository.'); + return; + } + + projectContainer.innerHTML = ''; // Clear previous content + + // Create a map for quick lookup + const exeAssetsMap = new Map(data.exeAssets.map(a => [a.name, a.url])); + const codeAssetsMap = new Map(data.codeAssets.map(a => [a.name, a.url])); + + data.cFiles.forEach(file => { + const programName = file.name.replace('.c', ''); + const exeName = programName + '.exe'; + + const card = document.createElement('div'); + card.className = `bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden card-animation card-hover-effect border border-gray-200 card-bg-gradient`; + + let buttonsHtml = ''; + + // Check for executable asset + const exeDownloadUrl = exeAssetsMap.get(exeName); + if (exeDownloadUrl) { + buttonsHtml += ` + <a href="${exeDownloadUrl}" download class="inline-block bg-emerald-500 text-white font-bold py-2 px-4 rounded-full text-xs hover:bg-emerald-600 transition-colors duration-200"> + Download EXE + </a> + `; + } + + // Check for code download asset + const codeDownloadUrl = codeAssetsMap.get(file.name); + if (codeDownloadUrl) { + buttonsHtml += ` + <a href="${codeDownloadUrl}" download class="inline-block bg-gray-500 text-white font-bold py-2 px-4 rounded-full text-xs hover:bg-gray-600 transition-colors duration-200 ml-2"> + Download Code + </a> + `; + } + + card.innerHTML = ` + <div class="p-6"> + <h2 class="text-2xl font-semibold text-gray-800 mb-2">${programName.replace(/[-_]/g, ' ').toUpperCase()}</h2> + <p class="text-sm text-gray-500 mb-4">File: ${file.name}</p> + <div class="flex flex-wrap items-center space-x-2"> + <button data-file-name="${file.name}" data-content-type="code" class="view-button inline-block bg-sky-500 text-white font-bold py-2 px-4 rounded-full text-xs hover:bg-sky-600 transition-colors duration-200"> + View Code + </button> + ${buttonsHtml} + </div> + </div> + `; + projectContainer.appendChild(card); + }); + + document.querySelectorAll('.view-button').forEach(button => { + button.addEventListener('click', (e) => { + const fileName = e.currentTarget.dataset.fileName; + const contentType = e.currentTarget.dataset.contentType; + showModal(fileName, contentType); + }); + }); + } + + // Show modal and fetch content + async function showModal(fileName, contentType) { + modal.classList.remove('hidden', 'modal-exit-active'); + modal.classList.add('modal-enter-active'); + modalTitle.textContent = fileName; + modalCode.textContent = ''; + modalLoading.classList.remove('hidden'); + modalError.classList.add('hidden'); + + try { + const response = await fetch(`${RAW_API_URL}?fileName=${fileName}&type=${contentType}`); + if (!response.ok) { + throw new Error(`Failed to fetch content from backend. Status: ${response.status}`); + } + const content = await response.text(); + modalCode.textContent = content; + + // Set GitHub link + const githubLinkUrl = `${GITHUB_REPO_URL}/tree/main/c/${fileName}`; + githubLink.href = githubLinkUrl; + + } catch (error) { + console.error('Error fetching modal content:', error); + modalError.classList.remove('hidden'); + modalError.textContent = 'Failed to load content.'; + } finally { + modalLoading.classList.add('hidden'); + } + } + + // Close modal functionality + closeModalBtn.addEventListener('click', () => { + modal.classList.remove('modal-enter-active'); + modal.classList.add('modal-exit-active'); + setTimeout(() => { + modal.classList.add('hidden'); + }, 300); // Match CSS transition duration + }); + + function showError(message) { + errorMessage.classList.remove('hidden'); + document.getElementById('error-text').textContent = message; + projectContainer.innerHTML = ''; + } + + fetchPrograms(); + }); + </script> +</body> +</html>