Sogni in Corso* {margin: 0;padding: 0;box-sizing: border-box;}body { font-family: 'Raleway', sans-serif; background: linear-gradient(135deg, #FAF9F6 0%, transparent;); min-height: 100vh; padding: 40px 20px; color: #2E2E2E;}.container { max-width: 1200px; margin: 0 auto;}h1 { text-align: center; font-size: 3rem; font-weight: bold; color: #2E2E2E; margin-bottom: 60px; letter-spacing: 2px; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);}.progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; justify-items: center;}.progress-item { display: flex; flex-direction: column; align-items: center; background: rgba(250, 249, 246, 0.95); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(46, 46, 46, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; min-width: 260px; border: 2px solid transparent; position: relative; overflow: hidden;}.progress-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(46, 46, 46, 0.15);}.progress-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--project-color), var(--project-accent));}.progress-circle { position: relative; width: 150px; height: 150px; margin-bottom: 20px;}.progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));}.progress-circle .bg-circle { fill: none; stroke: #e0e0e0; stroke-width: 10;}.progress-circle .progress-bar { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 2s ease-in-out; filter: url(#glow);}.progress-circle .percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; font-weight: bold; color: #2E2E2E;}.project-title { text-align: center; font-size: 1.1rem; font-weight: 600; color: #2E2E2E; line-height: 1.4; max-width: 240px;}.milestone-container { margin-top: 15px; width: 100%;}.milestone { display: flex; align-items: center; justify-content: space-between; background: rgba(200, 217, 192, 0.3); padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; font-size: 0.85rem; color: #6B6B6B; transition: all 0.3s ease;}.milestone.completed { background: var(--milestone-color-light); color: #2E2E2E;}.milestone.active { background: var(--milestone-color-light); color: #2E2E2E; font-weight: 600; animation: pulse 2s infinite;}.milestone-icon { width: 12px; height: 12px; border-radius: 50%; background: #6B6B6B; transition: all 0.3s ease;}.milestone.completed .milestone-icon { background: #C8D9C0;}.milestone.active .milestone-icon { background: var(--milestone-color); animation: glow 2s infinite;}/* Project-specific color schemes */.project-1 { --project-color: #F8D3A0; --project-accent: #F8D3A0; --project-color-light: rgba(248, 211, 160, 0.3); --milestone-color: #F8D3A0; --milestone-color-light: rgba(248, 211, 160, 0.4);}.project-2 { --project-color: #F2B3B3; --project-accent: #F2B3B3; --project-color-light: rgba(242, 179, 179, 0.3); --milestone-color: #F2B3B3; --milestone-color-light: rgba(242, 179, 179, 0.4);}.project-3 { --project-color: #BEB3DD; --project-accent: #BEB3DD; --project-color-light: rgba(190, 179, 221, 0.3); --milestone-color: #BEB3DD; --milestone-color-light: rgba(190, 179, 221, 0.4);}.project-1 .progress-bar { stroke: #F8D3A0;}.project-2 .progress-bar { stroke: #F2B3B3;}.project-3 .progress-bar { stroke: #BEB3DD;}/* Pulsing animation for active projects */.active-project .progress-circle { animation: breathe 3s infinite;}/* Enhanced animations */@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); }}@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); }}@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; }}@keyframes glow { 0%, 100% { box-shadow: 0 0 5px var(--milestone-color); } 50% { box-shadow: 0 0 15px var(--milestone-color), 0 0 25px var(--milestone-color); }}@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); }}.progress-item { animation: fadeInUp 0.8s ease-out;}.progress-item:nth-child(2) { animation-delay: 0.2s;}.progress-item:nth-child(3) { animation-delay: 0.4s;}.sparkle { position: absolute; width: 6px; height: 6px; background: var(--project-color); border-radius: 50%; animation: sparkle 3s infinite;}.sparkle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }.sparkle:nth-child(2) { top: 30%; right: 25%; animation-delay: 1s; }.sparkle:nth-child(3) { bottom: 25%; left: 30%; animation-delay: 2s; }.sparkle:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 0.5s; }@media (max-width: 768px) { h1 { font-size: 2rem; margin-bottom: 40px; } .progress-grid { grid-template-columns: 1fr; gap: 30px; } .progress-circle { width: 120px; height: 120px; } .progress-circle .percentage { font-size: 1.4rem; } .progress-item { min-width: 240px; }}SOGNI IN CORSO 60% Prima stesura di DARK GHOST N.3 - Burning Atto 1 Atto 2 Atto 3 20% Nuova serie del podcast: "Umani e AI: convivenza, conflitto, trasformazione" Concept e ricerche Prime registrazioni Episodi programmati 5% Progetto top secret e internazionale Setup tecnico/logistico Top secret Top secret // Configuration - UPDATE THESE VALUES TO CHANGE PROGRESSconst projectData = [ { percentage: 60, title: "Prima stesura di DARK GHOST N.3 - Burning", milestones: [ { text: "Atto 1", completed: true }, { text: "Atto 2", active: true }, { text: "Atto 3", active: false } ] }, { percentage: 20, title: "Nuova serie del podcast: \"Umani e AI: convivenza, conflitto, trasformazione\"", milestones: [ { text: "Concept e ricerche", completed: true }, { text: "Prime registrazioni", active: false }, { text: "Episodi programmati", active: false } ] }, { percentage: 5, title: "Progetto top secret e internazionale", milestones: [ { text: "Setup tecnico/logistico", completed: false }, { text: "Top secret", active: false }, { text: "Top secret", active: false } ] }];function animateProgress() { const circles = document.querySelectorAll('.progress-bar'); const radius = 40; const circumference = 2 * Math.PI * radius; circles.forEach((circle, index) => { const percentage = projectData[index].percentage; const offset = circumference - (percentage / 100) * circumference; // Set initial state - fully hidden circle.style.strokeDasharray = `${circumference} ${circumference}`; circle.style.strokeDashoffset = circumference; // Animate to final state after a delay setTimeout(() => { circle.style.strokeDashoffset = offset; // Add sparkle effect for high progress projects if (percentage > 50) { const item = circle.closest('.progress-item'); item.classList.add('active-project'); } }, 800 + index * 300); });}// Initialize when page loadswindow.addEventListener('load', () => { setTimeout(animateProgress, 500);});// Function to update progressfunction updateProgress(index, newPercentage, newTitle = null, newMilestones = null) { if (index >= 0 && index < projectData.length) { projectData[index].percentage = newPercentage; if (newTitle) projectData[index].title = newTitle; if (newMilestones) projectData[index].milestones = newMilestones; // Update display const percentageElement = document.querySelectorAll('.percentage')[index]; const titleElement = document.querySelectorAll('.project-title')[index]; const circle = document.querySelectorAll('.progress-bar')[index]; percentageElement.textContent = newPercentage + '%'; if (newTitle) titleElement.innerHTML = newTitle; // Update circle const radius = 40; const circumference = 2 * Math.PI * radius; const offset = circumference - (newPercentage / 100) * circumference; circle.style.strokeDashoffset = offset; // Update milestones if provided if (newMilestones) { const milestoneContainer = document.querySelectorAll('.milestone-container')[index]; milestoneContainer.innerHTML = newMilestones.map(milestone => ` <div class="milestone ${milestone.completed ? 'completed' : ''} ${milestone.active ? 'active' : ''}"> <span>${milestone.text}</span> <div class="milestone-icon"></div> </div> `).join(''); } // Update active project class const item = circle.closest('.progress-item'); if (newPercentage > 50) { item.classList.add('active-project'); } else { item.classList.remove('active-project'); } }}// Function to add milestonefunction addMilestone(projectIndex, milestoneText, isActive = false, isCompleted = false) { if (projectData[projectIndex]) { projectData[projectIndex].milestones.push({ text: milestoneText, active: isActive, completed: isCompleted }); updateProgress(projectIndex, projectData[projectIndex].percentage, null, projectData[projectIndex].milestones); }}