-
-
×
-
-
About Synapse
-
Synapse is an ambitious project created by Sumit Kumar Das , a sophomore engineering student with a vision to revolutionize no-code development.
-
This AI-powered development assistant helps break down project requirements into actionable tasks, generates code, and even integrates with GitHub for seamless project management.
-
Sumit's dedication to making development more accessible has resulted in this amazing application that bridges the gap between ideas and implementation.
-
The project leverages cutting-edge AI technology to understand requirements and generate appropriate code structures, making software development faster and more efficient for everyone.
-
+
+
×
+
+
About Synapse
+
+ Synapse is an ambitious project created by
+ Sumit Kumar Das , a sophomore
+ engineering student with a vision to revolutionize no-code
+ development.
+
+
+ This AI-powered development assistant helps break down project
+ requirements into actionable tasks, generates code, and even
+ integrates with GitHub for seamless project management.
+
+
+ Sumit's dedication to making development more accessible has
+ resulted in this amazing application that bridges the gap between
+ ideas and implementation.
+
+
+ The project leverages cutting-edge AI technology to understand
+ requirements and generate appropriate code structures, making
+ software development faster and more efficient for everyone.
+
+
-
+
diff --git a/script.js b/script.js
index 239efab..2eb9b56 100644
--- a/script.js
+++ b/script.js
@@ -1,65 +1,67 @@
// API endpoints
-const API_URL = ''; // Use relative paths for API calls
+const API_URL = ""; // Use relative paths for API calls
const ENDPOINTS = {
- PROCESS_REQUIREMENT: `${API_URL}/api/process-requirement`,
- GENERATE_CODE: `${API_URL}/api/generate-code`,
- PUSH_GITHUB: `${API_URL}/api/push-to-github`,
- UPDATE_GITHUB_TOKEN: `${API_URL}/api/update-github-token`
+ PROCESS_REQUIREMENT: `${API_URL}/api/process-requirement`,
+ GENERATE_CODE: `${API_URL}/api/generate-code`,
+ PUSH_GITHUB: `${API_URL}/api/push-to-github`,
+ UPDATE_GITHUB_TOKEN: `${API_URL}/api/update-github-token`,
};
// DOM Elements
-const initialLoading = document.querySelector('.initial-loading');
-const warpStars = document.getElementById('warpStars');
-const requirementInput = document.querySelector('.requirement-input');
-const submitBtn = document.querySelector('.submit-btn');
-const outputSection = document.querySelector('.output-section');
-const developmentGoals = document.querySelector('.development-goals');
-const loadingIndicator = document.getElementById('loadingIndicator');
-const downloadMdBtn = document.querySelector('.download-md');
-const generateCodeBtn = document.querySelector('.generate-code');
-const pushGithubBtn = document.querySelector('.push-github');
-const historyList = document.querySelector('.history-list');
-const sidebarToggle = document.getElementById('sidebarToggle');
-const sidebar = document.querySelector('.sidebar');
-const clearHistory = document.getElementById('clearHistory');
-const settingsBtn = document.querySelector('.settings-btn');
-const aboutBtn = document.querySelector('.about-btn');
-const settingsModal = document.getElementById('settingsModal');
-const aboutModal = document.getElementById('aboutModal');
-const closeModalBtns = document.querySelectorAll('.close-modal');
-const githubBtn = document.querySelector('.github-btn');
-const saveSettingsBtn = document.getElementById('saveSettings');
-const githubTokenInput = document.getElementById('githubTokenInput');
+const initialLoading = document.querySelector(".initial-loading");
+const warpStars = document.getElementById("warpStars");
+const requirementInput = document.querySelector(".requirement-input");
+const submitBtn = document.querySelector(".submit-btn");
+const outputSection = document.querySelector(".output-section");
+const developmentGoals = document.querySelector(".development-goals");
+const loadingIndicator = document.getElementById("loadingIndicator");
+const downloadMdBtn = document.querySelector(".download-md");
+const generateCodeBtn = document.querySelector(".generate-code");
+const pushGithubBtn = document.querySelector(".push-github");
+const historyList = document.querySelector(".history-list");
+const sidebarToggle = document.getElementById("sidebarToggle");
+const sidebar = document.querySelector(".sidebar");
+const hamburgerBtn = document.getElementById("hamburgerBtn");
+const navMenu = document.getElementById("navMenu");
+const clearHistory = document.getElementById("clearHistory");
+const settingsBtn = document.querySelector(".settings-btn");
+const aboutBtn = document.querySelector(".about-btn");
+const settingsModal = document.getElementById("settingsModal");
+const aboutModal = document.getElementById("aboutModal");
+const closeModalBtns = document.querySelectorAll(".close-modal");
+const githubBtn = document.querySelector(".github-btn");
+const saveSettingsBtn = document.getElementById("saveSettings");
+const githubTokenInput = document.getElementById("githubTokenInput");
// State management
let currentTasks = [];
-let currentLanguage = 'generic'; // Add variable to store detected language
+let currentLanguage = "generic"; // Add variable to store detected language
let sidebarCollapsed = false;
-let githubToken = localStorage.getItem('githubToken') || '';
+let githubToken = localStorage.getItem("githubToken") || "";
// Initialize GitHub token from storage
if (githubToken) {
- githubTokenInput.value = githubToken;
+ githubTokenInput.value = githubToken;
}
// Initial loading animation
function createWarpStars() {
- for (let i = 0; i < 100; i++) {
- const star = document.createElement('div');
- star.classList.add('warp-star');
- star.style.left = `${Math.random() * 100}%`;
- star.style.top = `${Math.random() * 100}%`;
- star.style.animationDuration = `${1 + Math.random() * 2}s`;
- star.style.animationDelay = `${Math.random() * 2}s`;
- warpStars.appendChild(star);
- }
+ for (let i = 0; i < 100; i++) {
+ const star = document.createElement("div");
+ star.classList.add("warp-star");
+ star.style.left = `${Math.random() * 100}%`;
+ star.style.top = `${Math.random() * 100}%`;
+ star.style.animationDuration = `${1 + Math.random() * 2}s`;
+ star.style.animationDelay = `${Math.random() * 2}s`;
+ warpStars.appendChild(star);
+ }
}
function hideInitialLoading() {
- initialLoading.style.opacity = '0';
- setTimeout(() => {
- initialLoading.style.display = 'none';
- }, 500);
+ initialLoading.style.opacity = "0";
+ setTimeout(() => {
+ initialLoading.style.display = "none";
+ }, 500);
}
// Initialize loading animation
@@ -67,248 +69,262 @@ createWarpStars();
setTimeout(hideInitialLoading, 3000);
// Sidebar toggle
-sidebarToggle.addEventListener('click', () => {
- sidebarCollapsed = !sidebarCollapsed;
- sidebar.classList.toggle('collapsed', sidebarCollapsed);
- sidebarToggle.innerHTML = sidebarCollapsed ?
- '
' :
- '
';
+sidebarToggle.addEventListener("click", () => {
+ sidebarCollapsed = !sidebarCollapsed;
+ sidebar.classList.toggle("collapsed", sidebarCollapsed);
+ sidebarToggle.innerHTML = sidebarCollapsed
+ ? '
'
+ : '
';
+});
+
+hamburgerBtn.addEventListener("click", () => {
+ navMenu.classList.toggle("show");
});
// Modal functionality
function openModal(modal) {
- modal.style.display = 'flex';
+ modal.style.display = "flex";
}
function closeModal(modal) {
- modal.style.display = 'none';
+ modal.style.display = "none";
}
-settingsBtn.addEventListener('click', () => openModal(settingsModal));
-aboutBtn.addEventListener('click', () => openModal(aboutModal));
+settingsBtn.addEventListener("click", () => openModal(settingsModal));
+aboutBtn.addEventListener("click", () => openModal(aboutModal));
-closeModalBtns.forEach(btn => {
- btn.addEventListener('click', () => {
- const modal = btn.closest('.modal');
- closeModal(modal);
- });
+closeModalBtns.forEach((btn) => {
+ btn.addEventListener("click", () => {
+ const modal = btn.closest(".modal");
+ closeModal(modal);
+ });
});
-window.addEventListener('click', (e) => {
- if (e.target.classList.contains('modal')) {
- closeModal(e.target);
- }
+window.addEventListener("click", (e) => {
+ if (e.target.classList.contains("modal")) {
+ closeModal(e.target);
+ }
});
// Settings handling
-saveSettingsBtn.addEventListener('click', async () => {
- const newToken = githubTokenInput.value.trim();
-
- try {
- const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({ token: newToken })
- });
-
- const data = await response.json();
- if (data.success) {
- localStorage.setItem('githubToken', newToken);
- alert('Settings saved successfully!');
- closeModal(settingsModal);
- } else {
- throw new Error(data.error || 'Failed to save settings');
- }
- } catch (error) {
- alert('Error saving settings: ' + error.message);
+saveSettingsBtn.addEventListener("click", async () => {
+ const newToken = githubTokenInput.value.trim();
+
+ try {
+ const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ token: newToken }),
+ });
+
+ const data = await response.json();
+ if (data.success) {
+ localStorage.setItem("githubToken", newToken);
+ alert("Settings saved successfully!");
+ closeModal(settingsModal);
+ } else {
+ throw new Error(data.error || "Failed to save settings");
}
+ } catch (error) {
+ alert("Error saving settings: " + error.message);
+ }
});
// Clear history
-clearHistory.addEventListener('click', () => {
- historyList.innerHTML = '';
+clearHistory.addEventListener("click", () => {
+ historyList.innerHTML = "";
});
// Removed redundant submitBtn listener that called Gemini directly from frontend.
// The listener below correctly calls the backend API.
// GitHub button handling
-githubBtn.addEventListener('click', async () => {
- const githubToken = localStorage.getItem('githubToken');
- if (!githubToken) {
- alert('Please set your GitHub Access Token in Settings first');
- openModal(settingsModal);
- return;
- }
+githubBtn.addEventListener("click", async () => {
+ const githubToken = localStorage.getItem("githubToken");
+ if (!githubToken) {
+ alert("Please set your GitHub Access Token in Settings first");
+ openModal(settingsModal);
+ return;
+ }
+
+ try {
+ // Verify token is still valid
+ const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ token: githubToken }),
+ });
- try {
- // Verify token is still valid
- const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({ token: githubToken })
- });
-
- const data = await response.json();
- if (data.success) {
- // Token is valid, redirect to GitHub repositories
- window.open('https://github.com?tab=repositories', '_blank');
- } else {
- // Token is invalid
- alert('Your GitHub token appears to be invalid. Please update it in Settings.');
- openModal(settingsModal);
- }
- } catch (error) {
- alert('Error connecting to GitHub. Please check your token in Settings.');
- openModal(settingsModal);
+ const data = await response.json();
+ if (data.success) {
+ // Token is valid, redirect to GitHub repositories
+ window.open("https://github.com?tab=repositories", "_blank");
+ } else {
+ // Token is invalid
+ alert(
+ "Your GitHub token appears to be invalid. Please update it in Settings."
+ );
+ openModal(settingsModal);
}
+ } catch (error) {
+ alert("Error connecting to GitHub. Please check your token in Settings.");
+ openModal(settingsModal);
+ }
});
// Event Listeners
-submitBtn.addEventListener('click', async () => {
- const requirement = requirementInput.value.trim();
- if (!requirement) return;
-
- try {
- submitBtn.disabled = true;
- submitBtn.textContent = 'Processing...';
-
- // Show output section with loading indicator
- outputSection.classList.remove('hidden');
- loadingIndicator.style.display = 'flex';
- developmentGoals.innerHTML = '';
-
- const response = await fetch(ENDPOINTS.PROCESS_REQUIREMENT, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({ requirement })
- });
-
- const data = await response.json();
- if (!data.success) throw new Error(data.error || 'Failed to process requirement');
-
- if (!data.tasks || !Array.isArray(data.tasks)) {
- throw new Error('Invalid response format: tasks array is missing');
- }
+submitBtn.addEventListener("click", async () => {
+ const requirement = requirementInput.value.trim();
+ if (!requirement) return;
+
+ try {
+ submitBtn.disabled = true;
+ submitBtn.textContent = "Processing...";
+
+ // Show output section with loading indicator
+ outputSection.classList.remove("hidden");
+ loadingIndicator.style.display = "flex";
+ developmentGoals.innerHTML = "";
+
+ const response = await fetch(ENDPOINTS.PROCESS_REQUIREMENT, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ requirement }),
+ });
- currentTasks = data.tasks;
- currentLanguage = data.techStack?.language || 'generic'; // Store the language
-
- // Hide loading indicator and display analysis
- loadingIndicator.style.display = 'none';
- displayAnalysis(data);
- saveToHistory(requirement, currentTasks);
- } catch (error) {
- console.error('Error processing requirement:', error);
- alert('Error processing requirement: ' + error.message);
- loadingIndicator.style.display = 'none';
- } finally {
- submitBtn.disabled = false;
- submitBtn.textContent = 'Generate Plan';
+ const data = await response.json();
+ if (!data.success)
+ throw new Error(data.error || "Failed to process requirement");
+
+ if (!data.tasks || !Array.isArray(data.tasks)) {
+ throw new Error("Invalid response format: tasks array is missing");
}
+
+ currentTasks = data.tasks;
+ currentLanguage = data.techStack?.language || "generic"; // Store the language
+
+ // Hide loading indicator and display analysis
+ loadingIndicator.style.display = "none";
+ displayAnalysis(data);
+ saveToHistory(requirement, currentTasks);
+ } catch (error) {
+ console.error("Error processing requirement:", error);
+ alert("Error processing requirement: " + error.message);
+ loadingIndicator.style.display = "none";
+ } finally {
+ submitBtn.disabled = false;
+ submitBtn.textContent = "Generate Plan";
+ }
});
-downloadMdBtn.addEventListener('click', () => {
- const content = currentTasks.join('\n');
- const blob = new Blob([content], { type: 'text/markdown' });
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = 'development-goals.md';
- a.click();
- URL.revokeObjectURL(url);
+downloadMdBtn.addEventListener("click", () => {
+ const content = currentTasks.join("\n");
+ const blob = new Blob([content], { type: "text/markdown" });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "development-goals.md";
+ a.click();
+ URL.revokeObjectURL(url);
});
-generateCodeBtn.addEventListener('click', async () => {
- if (!currentTasks.length) return;
-
- try {
- generateCodeBtn.disabled = true;
- generateCodeBtn.innerHTML = '
Generating...'; // Use innerHTML for icon
-
- const response = await fetch(ENDPOINTS.GENERATE_CODE, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- // Send tasks and the stored language as project_type
- body: JSON.stringify({ tasks: currentTasks, project_type: currentLanguage })
- });
-
- if (response.ok && response.headers.get('Content-Type')?.includes('application/zip')) {
- // Success: Handle the ZIP file download
- const blob = await response.blob();
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.style.display = 'none';
- a.href = url;
- a.download = 'generated_project.zip'; // Fixed filename
- document.body.appendChild(a);
- a.click();
- window.URL.revokeObjectURL(url);
- a.remove();
- pushGithubBtn.classList.remove('hidden'); // Show GitHub button on success
+generateCodeBtn.addEventListener("click", async () => {
+ if (!currentTasks.length) return;
+
+ try {
+ generateCodeBtn.disabled = true;
+ generateCodeBtn.innerHTML =
+ '
Generating...'; // Use innerHTML for icon
+
+ const response = await fetch(ENDPOINTS.GENERATE_CODE, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ // Send tasks and the stored language as project_type
+ body: JSON.stringify({
+ tasks: currentTasks,
+ project_type: currentLanguage,
+ }),
+ });
+
+ if (
+ response.ok &&
+ response.headers.get("Content-Type")?.includes("application/zip")
+ ) {
+ // Success: Handle the ZIP file download
+ const blob = await response.blob();
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.style.display = "none";
+ a.href = url;
+ a.download = "generated_project.zip"; // Fixed filename
+ document.body.appendChild(a);
+ a.click();
+ window.URL.revokeObjectURL(url);
+ a.remove();
+ pushGithubBtn.classList.remove("hidden"); // Show GitHub button on success
+ } else {
+ // Error: Try to parse JSON error message from backend
+ let errorMsg = "Failed to generate project files. Unknown error.";
+ try {
+ const errorData = await response.json();
+ if (errorData && errorData.error) {
+ errorMsg = errorData.error;
} else {
- // Error: Try to parse JSON error message from backend
- let errorMsg = 'Failed to generate project files. Unknown error.';
- try {
- const errorData = await response.json();
- if (errorData && errorData.error) {
- errorMsg = errorData.error;
- } else {
- errorMsg = `Server responded with status ${response.status}: ${response.statusText}`;
- }
- } catch (jsonError) {
- errorMsg = `Server responded with status ${response.status}. Failed to parse error message.`;
- console.error("Failed to parse error JSON:", jsonError);
- console.error("Response status:", response.status);
- console.error("Response status text:", response.statusText);
- }
- throw new Error(errorMsg); // Throw the extracted or generated error message
+ errorMsg = `Server responded with status ${response.status}: ${response.statusText}`;
}
-
- } catch (error) {
- // Use the specific alert message format
- alert('Error generating code: ' + error.message);
- console.error('Error in generateCodeBtn:', error);
- } finally {
- generateCodeBtn.disabled = false;
- generateCodeBtn.innerHTML = '
Generate Codebase'; // Restore button
+ } catch (jsonError) {
+ errorMsg = `Server responded with status ${response.status}. Failed to parse error message.`;
+ console.error("Failed to parse error JSON:", jsonError);
+ console.error("Response status:", response.status);
+ console.error("Response status text:", response.statusText);
+ }
+ throw new Error(errorMsg); // Throw the extracted or generated error message
}
+ } catch (error) {
+ // Use the specific alert message format
+ alert("Error generating code: " + error.message);
+ console.error("Error in generateCodeBtn:", error);
+ } finally {
+ generateCodeBtn.disabled = false;
+ generateCodeBtn.innerHTML = '
Generate Codebase'; // Restore button
+ }
});
-pushGithubBtn.addEventListener('click', async () => {
- const repoName = prompt('Enter repository name:');
- if (!repoName) return;
-
- try {
- pushGithubBtn.disabled = true;
- pushGithubBtn.innerHTML = '
Pushing...';
-
- const response = await fetch(ENDPOINTS.PUSH_GITHUB, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- repoName,
- tasks: currentTasks
- })
- });
-
- const data = await response.json();
- if (!data.success) throw new Error(data.error);
-
- // Create a custom success modal instead of alert
- const successModal = document.createElement('div');
- successModal.className = 'modal';
- successModal.style.display = 'flex';
- successModal.innerHTML = `
+pushGithubBtn.addEventListener("click", async () => {
+ const repoName = prompt("Enter repository name:");
+ if (!repoName) return;
+
+ try {
+ pushGithubBtn.disabled = true;
+ pushGithubBtn.innerHTML =
+ '
Pushing...';
+
+ const response = await fetch(ENDPOINTS.PUSH_GITHUB, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ repoName,
+ tasks: currentTasks,
+ }),
+ });
+
+ const data = await response.json();
+ if (!data.success) throw new Error(data.error);
+
+ // Create a custom success modal instead of alert
+ const successModal = document.createElement("div");
+ successModal.className = "modal";
+ successModal.style.display = "flex";
+ successModal.innerHTML = `
×
@@ -316,98 +332,100 @@ pushGithubBtn.addEventListener('click', async () => {
Repository URL: ${data.repoUrl}
`;
- document.body.appendChild(successModal);
-
- // Add event listeners to close the modal
- const closeBtn = successModal.querySelector('.close-modal');
- closeBtn.addEventListener('click', () => {
- document.body.removeChild(successModal);
- });
-
- successModal.addEventListener('click', (e) => {
- if (e.target === successModal) {
- document.body.removeChild(successModal);
- }
- });
- } catch (error) {
- alert('Error pushing to GitHub: ' + error.message);
- } finally {
- pushGithubBtn.disabled = false;
- pushGithubBtn.innerHTML = '
Push to GitHub';
- }
+ document.body.appendChild(successModal);
+
+ // Add event listeners to close the modal
+ const closeBtn = successModal.querySelector(".close-modal");
+ closeBtn.addEventListener("click", () => {
+ document.body.removeChild(successModal);
+ });
+
+ successModal.addEventListener("click", (e) => {
+ if (e.target === successModal) {
+ document.body.removeChild(successModal);
+ }
+ });
+ } catch (error) {
+ alert("Error pushing to GitHub: " + error.message);
+ } finally {
+ pushGithubBtn.disabled = false;
+ pushGithubBtn.innerHTML = '
Push to GitHub';
+ }
});
// Helper Functions
function displayTasks(tasks) {
- developmentGoals.innerHTML = '';
-
- // Add tasks with staggered animation
- tasks.forEach((task, index) => {
- const taskElement = document.createElement('div');
- taskElement.className = 'task';
- taskElement.textContent = `${index + 1}. ${task}`;
- taskElement.style.animationDelay = `${0.1 * index}s`;
- developmentGoals.appendChild(taskElement);
- });
-
- outputSection.classList.remove('hidden');
+ developmentGoals.innerHTML = "";
+
+ // Add tasks with staggered animation
+ tasks.forEach((task, index) => {
+ const taskElement = document.createElement("div");
+ taskElement.className = "task";
+ taskElement.textContent = `${index + 1}. ${task}`;
+ taskElement.style.animationDelay = `${0.1 * index}s`;
+ developmentGoals.appendChild(taskElement);
+ });
+
+ outputSection.classList.remove("hidden");
}
function saveToHistory(requirement, tasks) {
- const historyItem = document.createElement('div');
- historyItem.className = 'history-item';
- historyItem.textContent = requirement.substring(0, 50) + '...';
- historyItem.addEventListener('click', () => {
- requirementInput.value = requirement;
- currentTasks = tasks;
- displayTasks(tasks);
- });
- historyList.insertBefore(historyItem, historyList.firstChild);
+ const historyItem = document.createElement("div");
+ historyItem.className = "history-item";
+ historyItem.textContent = requirement.substring(0, 50) + "...";
+ historyItem.addEventListener("click", () => {
+ requirementInput.value = requirement;
+ currentTasks = tasks;
+ displayTasks(tasks);
+ });
+ historyList.insertBefore(historyItem, historyList.firstChild);
}
// Removed downloadFiles function as it's handled directly in the event listener now.
function displayAnalysis(data) {
- developmentGoals.innerHTML = '';
-
- // Display tech stack
- if (data.techStack) {
- const techStackSection = document.createElement('div');
- techStackSection.className = 'analysis-section';
- techStackSection.innerHTML = `
+ developmentGoals.innerHTML = "";
+
+ // Display tech stack
+ if (data.techStack) {
+ const techStackSection = document.createElement("div");
+ techStackSection.className = "analysis-section";
+ techStackSection.innerHTML = `
Tech Stack
Language: ${data.techStack.language}
-
Frameworks: ${data.techStack.frameworks.join(', ') || 'None'}
+
Frameworks: ${
+ data.techStack.frameworks.join(", ") || "None"
+ }
`;
- developmentGoals.appendChild(techStackSection);
- }
-
- // Display project structure
- if (data.projectStructure) {
- const structureSection = document.createElement('div');
- structureSection.className = 'analysis-section';
- structureSection.innerHTML = `
+ developmentGoals.appendChild(techStackSection);
+ }
+
+ // Display project structure
+ if (data.projectStructure) {
+ const structureSection = document.createElement("div");
+ structureSection.className = "analysis-section";
+ structureSection.innerHTML = `
Project Structure
${data.projectStructure}
`;
- developmentGoals.appendChild(structureSection);
- }
-
- // Display tasks with staggered animation
- const tasksSection = document.createElement('div');
- tasksSection.className = 'analysis-section';
- tasksSection.innerHTML = '
Development Tasks ';
-
- data.tasks.forEach((task, index) => {
- const taskElement = document.createElement('div');
- taskElement.className = 'task';
- taskElement.textContent = task;
- taskElement.style.animationDelay = `${0.1 * index}s`;
- tasksSection.appendChild(taskElement);
- });
-
- developmentGoals.appendChild(tasksSection);
- outputSection.classList.remove('hidden');
+ developmentGoals.appendChild(structureSection);
+ }
+
+ // Display tasks with staggered animation
+ const tasksSection = document.createElement("div");
+ tasksSection.className = "analysis-section";
+ tasksSection.innerHTML = "
Development Tasks ";
+
+ data.tasks.forEach((task, index) => {
+ const taskElement = document.createElement("div");
+ taskElement.className = "task";
+ taskElement.textContent = task;
+ taskElement.style.animationDelay = `${0.1 * index}s`;
+ tasksSection.appendChild(taskElement);
+ });
+
+ developmentGoals.appendChild(tasksSection);
+ outputSection.classList.remove("hidden");
}
diff --git a/styles.css b/styles.css
index b66e677..dbb48b2 100644
--- a/styles.css
+++ b/styles.css
@@ -1,925 +1,1089 @@
:root {
- --deep-blue: #020d1f;
- --accent-blue: #0a4c95;
- --text-color: #ffffff;
+ --deep-blue: #020d1f;
+ --accent-blue: #0a4c95;
+ --text-color: #ffffff;
}
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- cursor: url('data:image/svg+xml;utf8,
') 12 12, auto;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ cursor: url('data:image/svg+xml;utf8,
')
+ 12 12,
+ auto;
}
@keyframes fadeIn {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
@keyframes warpSpeed {
- 0% { transform: scale(0.1); opacity: 0; }
- 50% { opacity: 1; }
- 100% { transform: scale(1.5); opacity: 0; }
+ 0% {
+ transform: scale(0.1);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1.5);
+ opacity: 0;
+ }
}
.initial-loading {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: var(--deep-blue);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- transition: opacity 0.5s ease-out;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--deep-blue);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ transition: opacity 0.5s ease-out;
}
.loading-logo {
- font-size: 5em;
- font-weight: bold;
- background: linear-gradient(45deg, #4facfe, #00f2fe);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
- animation: pulse 2s infinite;
+ font-size: 5em;
+ font-weight: bold;
+ background: linear-gradient(45deg, #4facfe, #00f2fe);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: pulse 2s infinite;
}
.warp-stars {
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
}
.warp-star {
- position: absolute;
- background-color: white;
- width: 2px;
- height: 2px;
- border-radius: 50%;
- animation: warpSpeed 1.5s linear infinite;
+ position: absolute;
+ background-color: white;
+ width: 2px;
+ height: 2px;
+ border-radius: 50%;
+ animation: warpSpeed 1.5s linear infinite;
}
@keyframes pulse {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.1); }
- 100% { transform: scale(1); }
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
}
body {
- background-color: var(--deep-blue);
- color: var(--text-color);
- font-family: 'Arial', sans-serif;
- min-height: 100vh;
- overflow-x: hidden;
+ background-color: var(--deep-blue);
+ color: var(--text-color);
+ font-family: "Arial", sans-serif;
+ min-height: 100vh;
+ overflow-x: hidden;
}
.stars {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
- background-size: 50px 50px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ background: radial-gradient(
+ circle at 50% 50%,
+ rgba(255, 255, 255, 0.1) 1px,
+ transparent 1px
+ );
+ background-size: 50px 50px;
}
.stars::before {
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- animation: stars-rise 15s linear infinite;
- background:
- radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
- radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
- background-size: 30px 30px, 40px 40px;
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ animation: stars-rise 15s linear infinite;
+ background: radial-gradient(
+ circle at 50% 50%,
+ rgba(255, 255, 255, 0.2) 1px,
+ transparent 1px
+ ),
+ radial-gradient(
+ circle at 30% 70%,
+ rgba(255, 255, 255, 0.15) 1px,
+ transparent 1px
+ );
+ background-size: 30px 30px, 40px 40px;
}
@keyframes stars-rise {
- 0% { transform: translateY(100%); }
- 100% { transform: translateY(-100%); }
+ 0% {
+ transform: translateY(100%);
+ }
+ 100% {
+ transform: translateY(-100%);
+ }
}
.container {
- display: flex;
- min-height: 100vh;
- padding: 80px 20px 20px 20px; /* Added top padding to account for fixed header */
- position: relative;
- animation: fadeIn 1s ease-out;
+ display: flex;
+ min-height: 100vh;
+ padding: 80px 20px 20px 20px; /* Added top padding to account for fixed header */
+ position: relative;
+ animation: fadeIn 1s ease-out;
}
.top-nav {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 20px;
- z-index: 10;
- background: rgba(2, 13, 31, 0.8);
- backdrop-filter: blur(10px);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 20px;
+ z-index: 10;
+ background: rgba(2, 13, 31, 0.8);
+ backdrop-filter: blur(10px);
}
.synapse-text {
- position: absolute;
- left: 20px;
- font-size: 1.5em;
- font-weight: bold;
- background: linear-gradient(45deg, #4facfe, #00f2fe);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
+ position: absolute;
+ left: 20px;
+ font-size: 1.5em;
+ font-weight: bold;
+ background: linear-gradient(45deg, #4facfe, #00f2fe);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+.hamburger {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 1.5em;
+ padding: 8px;
+ display: none; /* Hidden by default on desktop */
+ margin-left: auto;
+}
+.nav-menu {
+ display: flex;
}
-
.nav-btn {
- background: rgba(255, 255, 255, 0.1);
- border: none;
- color: var(--text-color);
- padding: 12px;
- border-radius: 8px;
- transition: all 0.3s ease;
- display: flex;
- align-items: center;
- gap: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ color: var(--text-color);
+ padding: 12px;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
}
.nav-btn i {
- font-size: 1.2em;
+ font-size: 1.2em;
}
.nav-btn:hover {
- background: rgba(255, 255, 255, 0.2);
- transform: translateY(-2px);
- box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
+ background: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
}
.sidebar {
- width: 280px;
- background: rgba(10, 76, 149, 0.1);
- backdrop-filter: blur(10px);
- padding: 20px;
- border-radius: 15px;
- margin-right: 20px;
- margin-top: 20px; /* Added margin to align with the fixed header */
- display: flex;
- flex-direction: column;
- height: calc(100vh - 40px);
- position: relative;
- transition: width 0.3s ease;
+ width: 280px;
+ background: rgba(10, 76, 149, 0.1);
+ backdrop-filter: blur(10px);
+ padding: 20px;
+ border-radius: 15px;
+ margin-right: 20px;
+ margin-top: 20px; /* Added margin to align with the fixed header */
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 40px);
+ position: relative;
+ transition: width 0.3s ease;
}
.sidebar.collapsed {
- width: 60px;
+ width: 102px;
+ background: none;
}
.sidebar-toggle {
- position: absolute;
- top: 20px;
- right: -15px;
- background: var(--accent-blue);
- border: none;
- color: white;
- width: 30px;
- height: 30px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- z-index: 5;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: 20px;
+ right: -15px;
+ background: var(--accent-blue);
+ border: none;
+ color: white;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 5;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.history-pane {
- flex-grow: 1;
- margin-bottom: 20px;
- overflow: hidden;
- display: flex;
- flex-direction: column;
+ flex-grow: 1;
+ margin-bottom: 20px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
}
.history-pane h3 {
- margin-bottom: 15px;
- color: var(--text-color);
- display: flex;
- justify-content: space-between;
- align-items: center;
+ margin-bottom: 15px;
+ color: var(--text-color);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.history-list {
- overflow-y: auto;
- flex-grow: 1;
- max-height: calc(100vh - 200px);
- scrollbar-width: thin;
- scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
+ overflow-y: auto;
+ flex-grow: 1;
+ max-height: calc(100vh - 200px);
+ scrollbar-width: thin;
+ scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
}
.history-list::-webkit-scrollbar {
- width: 6px;
+ width: 6px;
}
.history-list::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 10px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
}
.history-list::-webkit-scrollbar-thumb {
- background-color: var(--accent-blue);
- border-radius: 10px;
+ background-color: var(--accent-blue);
+ border-radius: 10px;
}
.clear-history {
- background: none;
- border: none;
- color: var(--text-color);
- opacity: 0.7;
- cursor: pointer;
- font-size: 0.8em;
+ background: none;
+ border: none;
+ color: var(--text-color);
+ opacity: 0.7;
+ cursor: pointer;
+ font-size: 0.8em;
}
.clear-history:hover {
- opacity: 1;
+ opacity: 1;
}
.main-content {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
.logo-container {
- position: relative;
- margin-bottom: 40px;
- width: 300px;
- height: 300px;
- overflow: hidden;
- border-radius: 15px;
- box-shadow: 0 0 30px rgba(79, 172, 254, 0.3);
+ position: relative;
+ margin-bottom: 40px;
+ width: 300px;
+ height: 300px;
+ overflow: hidden;
+ border-radius: 15px;
+ box-shadow: 0 0 30px rgba(79, 172, 254, 0.3);
}
.synapse-logo-img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: relative;
- z-index: 1;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: relative;
+ z-index: 1;
}
.synapse-logo {
- font-size: 4em;
- font-weight: bold;
- background: linear-gradient(45deg, #4facfe, #00f2fe);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
- position: relative;
- z-index: 1;
+ font-size: 4em;
+ font-weight: bold;
+ background: linear-gradient(45deg, #4facfe, #00f2fe);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ position: relative;
+ z-index: 1;
}
.water-effect {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: linear-gradient(
- 180deg,
- rgba(255, 255, 255, 0.1) 0%,
- rgba(255, 255, 255, 0.2) 50%,
- rgba(255, 255, 255, 0.1) 100%
- );
- filter: blur(8px);
- animation: water-move 3s ease-in-out infinite;
- z-index: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0.1) 0%,
+ rgba(255, 255, 255, 0.2) 50%,
+ rgba(255, 255, 255, 0.1) 100%
+ );
+ filter: blur(8px);
+ animation: water-move 3s ease-in-out infinite;
+ z-index: 0;
}
@keyframes water-move {
- 0%, 100% { transform: translateY(-5px); }
- 50% { transform: translateY(5px); }
+ 0%,
+ 100% {
+ transform: translateY(-5px);
+ }
+ 50% {
+ transform: translateY(5px);
+ }
}
.input-section {
- width: 80%;
- max-width: 800px;
+ width: 80%;
+ max-width: 800px;
}
.requirement-input {
- width: 100%;
- height: 150px;
- background: rgba(255, 255, 255, 0.1);
- border: 2px solid var(--accent-blue);
- border-radius: 10px;
- padding: 15px;
- color: var(--text-color);
- resize: vertical;
- margin-bottom: 20px;
-}
-
-.submit-btn, .action-buttons button {
- background: var(--accent-blue);
- color: var(--text-color);
- border: none;
- padding: 12px 25px;
- border-radius: 8px;
- font-weight: bold;
- transition: all 0.3s ease;
+ width: 100%;
+ height: 150px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid var(--accent-blue);
+ border-radius: 10px;
+ padding: 15px;
+ color: var(--text-color);
+ resize: vertical;
+ margin-bottom: 20px;
+}
+
+.submit-btn,
+.action-buttons button {
+ background: var(--accent-blue);
+ color: var(--text-color);
+ border: none;
+ padding: 12px 25px;
+ border-radius: 8px;
+ font-weight: bold;
+ transition: all 0.3s ease;
}
-.submit-btn:hover, .action-buttons button:hover {
- transform: translateY(-2px);
- box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
+.submit-btn:hover,
+.action-buttons button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
}
.output-section {
- width: 80%;
- max-width: 800px;
- margin-top: 30px;
- margin-bottom: 80px; /* Space for footer */
+ width: 80%;
+ max-width: 800px;
+ margin-top: 30px;
+ margin-bottom: 80px; /* Space for footer */
}
.output-section.hidden {
- display: none;
+ display: none;
}
.development-goals {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 10px;
- padding: 20px;
- margin-bottom: 20px;
- min-height: 100px;
- position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+ padding: 20px;
+ margin-bottom: 20px;
+ min-height: 100px;
+ position: relative;
}
.loading-indicator {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgba(2, 13, 31, 0.7);
- border-radius: 10px;
- z-index: 5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(2, 13, 31, 0.7);
+ border-radius: 10px;
+ z-index: 5;
}
.loading-indicator::after {
- content: 'Processing your request...';
- position: absolute;
- bottom: -30px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.9em;
- color: var(--text-color);
- animation: loadingPulse 2s infinite;
+ content: "Processing your request...";
+ position: absolute;
+ bottom: -30px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 0.9em;
+ color: var(--text-color);
+ animation: loadingPulse 2s infinite;
}
@keyframes loadingPulse {
- 0%, 100% { opacity: 0.4; }
- 50% { opacity: 1; }
+ 0%,
+ 100% {
+ opacity: 0.4;
+ }
+ 50% {
+ opacity: 1;
+ }
}
.action-buttons {
- display: flex;
- gap: 15px;
- justify-content: center;
- margin-top: 20px;
- flex-wrap: wrap;
+ display: flex;
+ gap: 15px;
+ justify-content: center;
+ margin-top: 20px;
+ flex-wrap: wrap;
}
.action-buttons button {
- margin: 0 10px;
- display: flex;
- align-items: center;
- gap: 8px;
+ margin: 0 10px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
}
.action-buttons button i {
- font-size: 1.2em;
+ font-size: 1.2em;
}
.action-buttons button:disabled {
- background: rgba(10, 76, 149, 0.5);
- cursor: not-allowed;
- transform: none;
+ background: rgba(10, 76, 149, 0.5);
+ cursor: not-allowed;
+ transform: none;
}
.action-buttons button:disabled:hover {
- transform: none;
- box-shadow: none;
+ transform: none;
+ box-shadow: none;
}
footer {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- text-align: center;
- padding: 15px;
- background: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(5px);
- z-index: 10;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ padding: 15px;
+ background: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(5px);
+ z-index: 10;
}
.task {
- background: rgba(255, 255, 255, 0.05);
- padding: 12px;
- margin: 8px 0;
- border-radius: 8px;
- border-left: 3px solid var(--accent-blue);
- transition: all 0.3s ease;
- animation: fadeIn 0.5s ease-out;
- animation-fill-mode: both;
-}
-
-.task:nth-child(1) { animation-delay: 0.1s; }
-.task:nth-child(2) { animation-delay: 0.2s; }
-.task:nth-child(3) { animation-delay: 0.3s; }
-.task:nth-child(4) { animation-delay: 0.4s; }
-.task:nth-child(5) { animation-delay: 0.5s; }
-.task:nth-child(6) { animation-delay: 0.6s; }
-.task:nth-child(7) { animation-delay: 0.7s; }
-.task:nth-child(8) { animation-delay: 0.8s; }
+ background: rgba(255, 255, 255, 0.05);
+ padding: 12px;
+ margin: 8px 0;
+ border-radius: 8px;
+ border-left: 3px solid var(--accent-blue);
+ transition: all 0.3s ease;
+ animation: fadeIn 0.5s ease-out;
+ animation-fill-mode: both;
+}
+
+.task:nth-child(1) {
+ animation-delay: 0.1s;
+}
+.task:nth-child(2) {
+ animation-delay: 0.2s;
+}
+.task:nth-child(3) {
+ animation-delay: 0.3s;
+}
+.task:nth-child(4) {
+ animation-delay: 0.4s;
+}
+.task:nth-child(5) {
+ animation-delay: 0.5s;
+}
+.task:nth-child(6) {
+ animation-delay: 0.6s;
+}
+.task:nth-child(7) {
+ animation-delay: 0.7s;
+}
+.task:nth-child(8) {
+ animation-delay: 0.8s;
+}
.task:hover {
- background: rgba(255, 255, 255, 0.1);
- transform: translateX(5px);
+ background: rgba(255, 255, 255, 0.1);
+ transform: translateX(5px);
}
.history-item {
- padding: 10px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- cursor: pointer;
- transition: all 0.3s ease;
+ padding: 10px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ cursor: pointer;
+ transition: all 0.3s ease;
}
.history-item:hover {
- background: rgba(255, 255, 255, 0.05);
+ background: rgba(255, 255, 255, 0.05);
}
/* Modal styles */
.modal {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.7);
- z-index: 100;
- justify-content: center;
- align-items: center;
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ z-index: 100;
+ justify-content: center;
+ align-items: center;
}
.modal-content {
- background: linear-gradient(135deg, rgba(10, 76, 149, 0.9), rgba(2, 13, 31, 0.9));
- padding: 30px;
- border-radius: 15px;
- width: 80%;
- max-width: 600px;
- max-height: 80vh;
- overflow-y: auto;
- position: relative;
- box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
- animation: modalFadeIn 0.3s ease-out;
+ background: linear-gradient(
+ 135deg,
+ rgba(10, 76, 149, 0.9),
+ rgba(2, 13, 31, 0.9)
+ );
+ padding: 30px;
+ border-radius: 15px;
+ width: 80%;
+ max-width: 600px;
+ max-height: 80vh;
+ overflow-y: auto;
+ position: relative;
+ box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
+ animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
- from { opacity: 0; transform: translateY(-50px); }
- to { opacity: 1; transform: translateY(0); }
+ from {
+ opacity: 0;
+ transform: translateY(-50px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
.close-modal {
- position: absolute;
- top: 15px;
- right: 15px;
- background: none;
- border: none;
- color: var(--text-color);
- font-size: 1.5em;
- cursor: pointer;
- opacity: 0.7;
- transition: opacity 0.3s;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: none;
+ border: none;
+ color: var(--text-color);
+ font-size: 1.5em;
+ cursor: pointer;
+ opacity: 0.7;
+ transition: opacity 0.3s;
}
.close-modal:hover {
- opacity: 1;
+ opacity: 1;
}
.settings-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 20px;
- margin-top: 20px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ margin-top: 20px;
}
.settings-item {
- display: flex;
- flex-direction: column;
- gap: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
.settings-item label {
- font-weight: bold;
+ font-weight: bold;
}
-.settings-item select,
+.settings-item select,
.settings-item input {
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- padding: 10px;
- border-radius: 5px;
- color: var(--text-color);
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ padding: 10px;
+ border-radius: 5px;
+ color: var(--text-color);
}
.toggle-switch {
- position: relative;
- display: inline-block;
- width: 60px;
- height: 34px;
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
}
.toggle-switch input {
- opacity: 0;
- width: 0;
- height: 0;
+ opacity: 0;
+ width: 0;
+ height: 0;
}
.slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(255, 255, 255, 0.1);
- transition: .4s;
- border-radius: 34px;
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(255, 255, 255, 0.1);
+ transition: 0.4s;
+ border-radius: 34px;
}
.slider:before {
- position: absolute;
- content: "";
- height: 26px;
- width: 26px;
- left: 4px;
- bottom: 4px;
- background-color: white;
- transition: .4s;
- border-radius: 50%;
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ transition: 0.4s;
+ border-radius: 50%;
}
input:checked + .slider {
- background-color: var(--accent-blue);
+ background-color: var(--accent-blue);
}
input:checked + .slider:before {
- transform: translateX(26px);
+ transform: translateX(26px);
}
.about-content {
- line-height: 1.8;
+ line-height: 1.8;
}
.about-content h2 {
- margin-bottom: 20px;
- color: var(--text-color);
- font-size: 2em;
+ margin-bottom: 20px;
+ color: var(--text-color);
+ font-size: 2em;
}
.about-content p {
- margin-bottom: 15px;
+ margin-bottom: 15px;
}
.about-content .highlight {
- color: #4facfe;
- font-weight: bold;
+ color: #4facfe;
+ font-weight: bold;
}
.analysis-section {
- background: rgba(255, 255, 255, 0.05);
- padding: 20px;
- margin-bottom: 20px;
- border-radius: 10px;
- border-left: 3px solid var(--accent-blue);
+ background: rgba(255, 255, 255, 0.05);
+ padding: 20px;
+ margin-bottom: 20px;
+ border-radius: 10px;
+ border-left: 3px solid var(--accent-blue);
}
.analysis-section h3 {
- color: #4facfe;
- margin-bottom: 15px;
- font-size: 1.2em;
+ color: #4facfe;
+ margin-bottom: 15px;
+ font-size: 1.2em;
}
.tech-info {
- display: flex;
- gap: 20px;
+ display: flex;
+ gap: 20px;
}
.tech-info p {
- background: rgba(255, 255, 255, 0.05);
- padding: 8px 15px;
- border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ padding: 8px 15px;
+ border-radius: 5px;
}
.project-tree {
- background: rgba(0, 0, 0, 0.2);
- padding: 15px;
- border-radius: 5px;
- font-family: monospace;
- white-space: pre;
- overflow-x: auto;
+ background: rgba(0, 0, 0, 0.2);
+ padding: 15px;
+ border-radius: 5px;
+ font-family: monospace;
+ white-space: pre;
+ overflow-x: auto;
}
.save-settings-btn {
- background: var(--accent-blue);
- color: var(--text-color);
- border: none;
- padding: 12px 25px;
- border-radius: 8px;
- font-weight: bold;
- transition: all 0.3s ease;
- width: 100%;
- margin-top: 20px;
+ background: var(--accent-blue);
+ color: var(--text-color);
+ border: none;
+ padding: 12px 25px;
+ border-radius: 8px;
+ font-weight: bold;
+ transition: all 0.3s ease;
+ width: 100%;
+ margin-top: 20px;
}
.save-settings-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
}
/* Enhanced responsive design */
@media (max-width: 768px) {
- .container {
- flex-direction: column;
- padding: 60px 10px 10px 10px;
- }
-
- .sidebar {
- width: 100%;
- margin-right: 0;
- margin-bottom: 20px;
- height: auto;
- }
-
- .sidebar.collapsed {
- height: 60px;
- overflow: hidden;
- }
-
- .main-content {
- width: 100%;
- }
-
- .logo-container {
- width: 200px;
- height: 200px;
- }
-
- .input-section {
- width: 95%;
- }
-
- .output-section {
- width: 95%;
- }
-
- .synapse-text {
- font-size: 1.2em;
- }
-
- .nav-btn {
- padding: 8px;
- font-size: 0.9em;
- }
-
- .nav-btn i {
- font-size: 1em;
- }
-
- .action-buttons {
- flex-direction: column;
- gap: 10px;
- }
+ .top-nav {
+ padding: 15px 10px;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+ .synapse-text {
+ position: relative;
+ left: 0;
+ margin-bottom: 5px;
+ width: 30%;
+ text-align: center;
+ font-size: 17px;
+ }
+
+ .container {
+ flex-direction: column;
+ padding: 60px 10px 10px 10px;
+ }
+
+ .nav-menu {
+ display: none;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+ }
+
+ .nav-menu.show {
+ display: flex;
+ }
+
+ .sidebar {
+ width: 100%;
+ margin-right: 0;
+ margin-bottom: 20px;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ padding: 4px 6px;
+ transition: height 0.3s ease;
+ }
+
+ .sidebar.collapsed {
+ background: none;
+ width: 0;
+ }
+ .sidebar.collapsed .history-pane {
+ display: none;
+ }
+
+ .sidebar-toggle {
+ display: block;
+ position: absolute;
+ top: 26px;
- .action-buttons button {
- width: 100%;
- margin: 0;
- }
+ background-color: var(--accent-blue);
+ border: none;
+ color: white;
+ padding: 10px;
+ border-radius: 6px;
+ z-index: 100;
+ }
+ .hamburger {
+ display: block;
+ }
+
+ .history-pane {
+ display: block;
+ }
+ .main-content {
+ width: 100%;
+ }
+
+ .logo-container {
+ width: 200px;
+ height: 200px;
+ }
+
+ .input-section {
+ width: 95%;
+ }
+
+ .output-section {
+ width: 95%;
+ }
+
+ .synapse-text {
+ font-size: 1.2em;
+ }
+
+ .nav-btn {
+ padding: 8px;
+ font-size: 0.9em;
+ }
+
+ .nav-btn i {
+ font-size: 1em;
+ }
+
+ .action-buttons {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .action-buttons button {
+ width: 100%;
+ margin: 0;
+ }
}
@media (max-width: 480px) {
- .top-nav {
- padding: 15px 10px;
- flex-wrap: wrap;
- gap: 10px;
- }
-
- .synapse-text {
- position: relative;
- left: 0;
- margin-bottom: 10px;
- width: 100%;
- text-align: center;
- }
-
- .logo-container {
- width: 150px;
- height: 150px;
- }
-
- .requirement-input {
- height: 120px;
- font-size: 14px;
- }
-
- .modal-content {
- width: 95%;
- padding: 20px;
- margin: 10px;
- }
-
- .settings-grid {
- grid-template-columns: 1fr;
- gap: 15px;
- }
+ .top-nav {
+ padding: 15px 10px;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+
+ .synapse-text {
+ position: relative;
+ left: 0;
+ margin-bottom: 5px;
+ width: 30%;
+ text-align: center;
+ font-size: 17px;
+ }
+
+ .logo-container {
+ width: 150px;
+ height: 150px;
+ }
+
+ .requirement-input {
+ height: 120px;
+ font-size: 14px;
+ }
+
+ .modal-content {
+ width: 95%;
+ padding: 20px;
+ margin: 10px;
+ }
+
+ .settings-grid {
+ grid-template-columns: 1fr;
+ gap: 15px;
+ }
}
/* Improved loading animations */
@keyframes loadingPulse {
- 0%, 100% { opacity: 0.4; }
- 50% { opacity: 1; }
+ 0%,
+ 100% {
+ opacity: 0.4;
+ }
+ 50% {
+ opacity: 1;
+ }
}
.loading-indicator::after {
- content: 'Processing your request...';
- position: absolute;
- bottom: -30px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.9em;
- color: var(--text-color);
- animation: loadingPulse 2s infinite;
+ content: "Processing your request...";
+ position: absolute;
+ bottom: -30px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 0.9em;
+ color: var(--text-color);
+ animation: loadingPulse 2s infinite;
}
/* Enhanced button styles */
-.submit-btn:disabled, .action-buttons button:disabled {
- background: rgba(10, 76, 149, 0.5);
- cursor: not-allowed;
- transform: none;
+.submit-btn:disabled,
+.action-buttons button:disabled {
+ background: rgba(10, 76, 149, 0.5);
+ cursor: not-allowed;
+ transform: none;
}
-.submit-btn:disabled:hover, .action-buttons button:disabled:hover {
- transform: none;
- box-shadow: none;
+.submit-btn:disabled:hover,
+.action-buttons button:disabled:hover {
+ transform: none;
+ box-shadow: none;
}
/* Better scrollbar for all elements */
* {
- scrollbar-width: thin;
- scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
+ scrollbar-width: thin;
+ scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
}
*::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+ width: 8px;
+ height: 8px;
}
*::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 10px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
- background-color: var(--accent-blue);
- border-radius: 10px;
- border: 2px solid rgba(255, 255, 255, 0.1);
+ background-color: var(--accent-blue);
+ border-radius: 10px;
+ border: 2px solid rgba(255, 255, 255, 0.1);
}
*::-webkit-scrollbar-thumb:hover {
- background-color: #4facfe;
+ background-color: #4facfe;
}
/* Improved focus states for accessibility */
-button:focus, input:focus, textarea:focus, select:focus {
- outline: 2px solid #4facfe;
- outline-offset: 2px;
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+ outline: 2px solid #4facfe;
+ outline-offset: 2px;
}
/* Enhanced error states */
.error-message {
- background: rgba(217, 63, 11, 0.1);
- border: 1px solid #d93f0b;
- color: #ff6b6b;
- padding: 10px;
- border-radius: 5px;
- margin: 10px 0;
- animation: fadeIn 0.3s ease-out;
+ background: rgba(217, 63, 11, 0.1);
+ border: 1px solid #d93f0b;
+ color: #ff6b6b;
+ padding: 10px;
+ border-radius: 5px;
+ margin: 10px 0;
+ animation: fadeIn 0.3s ease-out;
}
.success-message {
- background: rgba(14, 138, 22, 0.1);
- border: 1px solid #0e8a16;
- color: #40c057;
- padding: 10px;
- border-radius: 5px;
- margin: 10px 0;
- animation: fadeIn 0.3s ease-out;
+ background: rgba(14, 138, 22, 0.1);
+ border: 1px solid #0e8a16;
+ color: #40c057;
+ padding: 10px;
+ border-radius: 5px;
+ margin: 10px 0;
+ animation: fadeIn 0.3s ease-out;
}
/* Loading skeleton for better UX */
.skeleton {
- background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
- background-size: 200% 100%;
- animation: loading 1.5s infinite;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.1) 25%,
+ rgba(255, 255, 255, 0.2) 50%,
+ rgba(255, 255, 255, 0.1) 75%
+ );
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
}
@keyframes loading {
- 0% { background-position: 200% 0; }
- 100% { background-position: -200% 0; }
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
}
/* Enhanced task styling */
.task.completed {
- opacity: 0.7;
- text-decoration: line-through;
- border-left-color: #40c057;
+ opacity: 0.7;
+ text-decoration: line-through;
+ border-left-color: #40c057;
}
.task.in-progress {
- border-left-color: #fab005;
+ border-left-color: #fab005;
}
.task.blocked {
- border-left-color: #fa5252;
+ border-left-color: #fa5252;
}
/* Improved modal animations */
@keyframes modalSlideIn {
- from {
- opacity: 0;
- transform: translateY(-50px) scale(0.9);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
+ from {
+ opacity: 0;
+ transform: translateY(-50px) scale(0.9);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
}
.modal.show .modal-content {
- animation: modalSlideIn 0.3s ease-out;
+ animation: modalSlideIn 0.3s ease-out;
}
/* Better visual hierarchy */
-h1, h2, h3, h4, h5, h6 {
- margin-bottom: 0.5em;
- line-height: 1.2;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-bottom: 0.5em;
+ line-height: 1.2;
}
p {
- line-height: 1.6;
- margin-bottom: 1em;
+ line-height: 1.6;
+ margin-bottom: 1em;
}
/* Enhanced code styling for generated content */
.code-block {
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 5px;
- padding: 15px;
- font-family: 'Courier New', monospace;
- overflow-x: auto;
- margin: 10px 0;
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 5px;
+ padding: 15px;
+ font-family: "Courier New", monospace;
+ overflow-x: auto;
+ margin: 10px 0;
}
.code-block::-webkit-scrollbar {
- height: 6px;
+ height: 6px;
}
/* Print styles */
@media print {
- .stars, .warp-stars, .water-effect {
- display: none;
- }
-
- .container {
- background: white;
- color: black;
- }
-
- .sidebar {
- display: none;
- }
-
- .main-content {
- width: 100%;
- }
+ .stars,
+ .warp-stars,
+ .water-effect {
+ display: none;
+ }
+
+ .container {
+ background: white;
+ color: black;
+ }
+
+ .sidebar {
+ display: none;
+ }
+
+ .main-content {
+ width: 100%;
+ }
}
-
-