Spaces:

humphuk
/

eco-quest

Running

App Files Files Community

humphuk commited on Mar 31, 2025

Commit

34f5300

verified ·

1 Parent(s): 7242c8f

Add 1 files

Browse files

Files changed (1) hide show

index.html +365 -593

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Eco Quest: Saint-Gobain Sustainability Challenge</title>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -14,6 +14,8 @@
             --sg-yellow: #FFD700;
             --sg-white: #F5F5F5;
             --sg-gray: #555555;
         }
         * {
@@ -38,7 +40,7 @@
             backdrop-filter: blur(5px);
             min-height: 100vh;
             width: 100%;
-            background-color: rgba(255, 255, 255, 0.85);
         }
         .container {
@@ -159,6 +161,46 @@
             font-family: 'Montserrat', sans-serif;
         }
         .start-btn {
             background-color: var(--sg-green);
             color: white;
@@ -201,7 +243,7 @@
         .scenario-content {
             display: flex;
             flex-direction: column;
-            gap: 1rem;
         }
         .scenario-text {
@@ -209,10 +251,23 @@
             font-size: 1.1rem;
         }
         .options-container {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1rem;
             margin-top: 1rem;
         }
@@ -225,7 +280,7 @@
             transition: all 0.3s ease;
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
         }
         .option-card:hover {
@@ -250,6 +305,41 @@
         .option-description {
             font-size: 0.9rem;
             color: var(--sg-gray);
         }
         /* Result Screen */
@@ -272,11 +362,11 @@
         }
         .negative-result {
-            border-left: 5px solid #d9534f;
         }
         .neutral-result {
-            border-left: 5px solid #f0ad4e;
         }
         .result-title {
@@ -292,33 +382,108 @@
             font-size: 1.2rem;
         }
-        .impact-meter {
-            margin-top: 1rem;
         }
-        .impact-label {
             display: flex;
-            justify-content: space-between;
-            margin-bottom: 0.5rem;
-            font-size: 0.9rem;
-            color: var(--sg-gray);
         }
-        .impact-bar {
-            height: 10px;
-            background: linear-gradient(to right, #4CAF50, #FFC107, #F44336);
-            border-radius: 5px;
             position: relative;
-            overflow: hidden;
         }
-        .impact-pointer {
             position: absolute;
-            width: 2px;
-            height: 15px;
-            background-color: var(--sg-blue);
-            top: -2.5px;
-            transform: translateX(-50%);
         }
         .next-btn {
@@ -331,6 +496,9 @@
             cursor: pointer;
             transition: all 0.3s ease;
             font-weight: 500;
         }
         .next-btn:hover {
@@ -353,6 +521,45 @@
             animation: bounce 2s infinite;
         }
         .certificate-btn {
             background-color: var(--sg-green);
             color: white;
@@ -374,6 +581,72 @@
             transform: translateY(-3px);
         }
         /* Animations */
         @keyframes fadeIn {
             from { opacity: 0; }
@@ -403,6 +676,11 @@
             60% { transform: translateY(-15px); }
         }
         /* Responsive */
         @media (max-width: 768px) {
             .container {
@@ -424,12 +702,45 @@
                 justify-content: center;
             }
             .options-container {
                 grid-template-columns: 1fr;
             }
-            .game-content {
-                padding: 1.5rem;
             }
         }
@@ -524,6 +835,29 @@
             border-bottom: 2px solid var(--sg-blue);
         }
         .certificate-details {
             display: flex;
             justify-content: space-between;
@@ -552,44 +886,6 @@
             text-align: center;
             font-weight: 600;
         }
-        .badge-collection {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            justify-content: center;
-            margin: 2rem 0;
-        }
-        .badge {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            background-color: var(--sg-white);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            position: relative;
-            transition: all 0.3s ease;
-        }
-        .badge i {
-            font-size: 2.5rem;
-            color: var(--sg-green);
-        }
-        .badge:hover {
-            transform: scale(1.1);
-        }
-        .badge-completed {
-            background-color: var(--sg-yellow);
-        }
-        .badge-completed i {
-            color: white;
-        }
     </style>
 </head>
 <body>
@@ -597,13 +893,13 @@
         <div class="container">
             <header>
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Saint-Gobain-Logo.svg/2560px-Saint-Gobain-Logo.svg.png" alt="Saint-Gobain Logo" class="logo">
-                <h1>Eco Quest</h1>
-                <p class="subtitle">Saint-Gobain Sustainability Challenge</p>
             </header>
             <div class="game-container">
                 <div class="game-header">
-                    <div class="game-title">Sustainability Journey</div>
                     <div class="progress-container">
                         <div class="progress-text">Progress: <span id="progress-text">0</span>%</div>
                         <div class="progress-bar">
@@ -617,529 +913,5 @@
                     <div class="welcome-screen" id="welcome-screen">
                         <i class="fas fa-leaf welcome-icon"></i>
                         <div class="welcome-text">
-                            <h2>Welcome to Saint-Gobain's Sustainability Challenge</h2>
-                            <p>As a global leader in sustainable construction, Saint-Gobain is committed to reducing our environmental footprint. This interactive game will help you understand our impact and learn how you can contribute to our sustainability goals in your daily work.</p>
-                            <p>Complete the challenges to earn badges and discover how small actions can make a big difference!</p>
-                        </div>
-                        <button class="start-btn" id="start-btn">
-                            <i class="fas fa-play"></i> Begin the Journey
-                        </button>
-                    </div>
-                    <!-- Scenario Screen -->
-                    <div class="scenario-screen" id="scenario-screen">
-                        <div class="scenario-header">
-                            <i class="fas fa-question-circle scenario-icon"></i>
-                            <h2 id="scenario-title">Scenario Title</h2>
-                        </div>
-                        <div class="scenario-content">
-                            <p class="scenario-text" id="scenario-text">Scenario description goes here...</p>
-                            <div class="options-container" id="options-container">
-                                <!-- Options will be inserted here by JavaScript -->
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Result Screen -->
-                    <div class="result-screen" id="result-screen">
-                        <div class="scenario-header">
-                            <i class="fas fa-chart-line scenario-icon"></i>
-                            <h2>Impact Analysis</h2>
-                        </div>
-                        <div class="result-content">
-                            <div class="result-card" id="result-card">
-                                <h3 class="result-title">
-                                    <i class="fas fa-check-circle result-icon"></i>
-                                    <span id="result-title">Result Title</span>
-                                </h3>
-                                <p id="result-description">Result description goes here...</p>
-                                <div class="impact-meter">
-                                    <div class="impact-label">
-                                        <span>Positive</span>
-                                        <span>Neutral</span>
-                                        <span>Negative</span>
-                                    </div>
-                                    <div class="impact-bar">
-                                        <div class="impact-pointer" id="impact-pointer"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="result-card" id="saint-gobain-info">
-                                <h3 class="result-title">
-                                    <i class="fas fa-building result-icon"></i>
-                                    Saint-Gobain's Commitment
-                                </h3>
-                                <p id="saint-gobain-text">Information about Saint-Gobain's initiatives related to this scenario...</p>
-                            </div>
-                            <div class="result-card" id="learn-more">
-                                <h3 class="result-title">
-                                    <i class="fas fa-lightbulb result-icon"></i>
-                                    How You Can Make a Difference
-                                </h3>
-                                <ul id="action-items">
-                                    <!-- Action items will be inserted here -->
-                                </ul>
-                            </div>
-                            <button class="next-btn" id="next-btn">
-                                Continue <i class="fas fa-arrow-right"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <!-- Game Complete Screen -->
-                    <div class="game-complete-screen" id="game-complete-screen">
-                        <div class="game-complete-content">
-                            <i class="fas fa-trophy trophy-icon"></i>
-                            <h2>Congratulations!</h2>
-                            <p>You've completed the Saint-Gobain Sustainability Challenge. Your knowledge and commitment to sustainable practices will help us achieve our environmental goals.</p>
-                            <div class="badge-collection" id="badge-collection">
-                                <!-- Badges will be added here -->
-                            </div>
-                            <button class="certificate-btn" id="certificate-btn">
-                                <i class="fas fa-certificate"></i> View Your Certificate
-                            </button>
-                            <p>Share your achievement with colleagues and continue making sustainable choices in your daily work.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Certificate Modal -->
-        <div class="modal" id="certificate-modal">
-            <div class="modal-content">
-                <button class="close-modal" id="close-modal">&times;</button>
-                <div class="certificate">
-                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Saint-Gobain-Logo.svg/2560px-Saint-Gobain-Logo.svg.png" alt="Saint-Gobain Logo" class="certificate-logo">
-                    <h3 class="certificate-title">Certificate of Completion</h3>
-                    <p class="certificate-subtitle">Saint-Gobain Sustainability Challenge</p>
-                    <p class="certificate-text">This certificate is awarded to recognize successful completion of the Eco Quest training program and commitment to sustainable practices at Saint-Gobain.</p>
-                    <div class="certificate-name" id="certificate-name">Employee Name</div>
-                    <p class="certificate-text">By completing this training, you've demonstrated understanding of Saint-Gobain's environmental initiatives and learned practical ways to reduce our ecological footprint in daily operations.</p>
-                    <div class="certificate-details">
-                        <div>Completion Date: <span id="certificate-date"></span></div>
-                        <div>Score: <span id="certificate-score">100%</span></div>
-                    </div>
-                    <div class="certificate-signature">
-                        <div>
-                            <div class="signature-line"></div>
-                            <div class="signature-name">Benoît Bazin</div>
-                            <div>CEO, Saint-Gobain</div>
-                        </div>
-                        <div>
-                            <div class="signature-line"></div>
-                            <div class="signature-name">Claire Pedini</div>
-                            <div>Senior VP Human Resources</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Game Data
-        const scenarios = [
-            {
-                id: 1,
-                title: "Energy Efficiency in Manufacturing",
-                description: "You're overseeing operations at one of Saint-Gobain's manufacturing plants. The plant currently uses conventional energy sources and equipment with average efficiency ratings. What approach will you take to improve energy efficiency?",
-                options: [
-                    {
-                        title: "Immediate Full Upgrade",
-                        icon: "fas fa-bolt",
-                        description: "Invest in complete replacement of all equipment with the most energy-efficient models available",
-                        result: {
-                            title: "High Initial Impact",
-                            description: "While this approach maximizes long-term energy savings, the immediate environmental cost of manufacturing and installing all new equipment is substantial. Saint-Gobain typically favors phased approaches that balance financial and environmental considerations.",
-                            impact: 30,
-                            saintGobainInfo: "Saint-Gobain's approach is to set 'Net Zero Carbon' targets with realistic timelines. The company plans to reduce energy consumption by 25% per unit produced by 2030 through phased investments in energy-efficient technologies.",
-                            actions: [
-                                "Consider LIFE program guidelines which recommend staged investments",
-                                "Evaluate return on investment for each equipment category",
-                                "Explore co-processing opportunities with renewable energy providers",
-                                "Check SG's internal sustainability assessment tools before large purchases"
-                            ]
-                        }
-                    },
-                    {
-                        title: "Phased Smart Upgrades",
-                        icon: "fas fa-calendar-check",
-                        description: "Implement a staged replacement program focusing first on the least efficient equipment and adding smart controls",
-                        result: {
-                            title: "Balanced Sustainable Approach",
-                            description: "This aligns well with Saint-Gobain's LIFE program methodology. The phased approach allows for optimal capital allocation and minimizes environmental impact from equipment replacement while achieving steady efficiency gains.",
-                            impact: 80,
-                            saintGobainInfo: "Saint-Gobain's LIFE (Lean, Inclusive, Green, and Fast) program encourages exactly this approach. Several plants have reduced energy use by 15-20% through careful equipment upgrades combined with operational excellence initiatives.",
-                            actions: [
-                                "Use Saint-Gobain's internal energy assessment tools",
-                                "Participate in the company's energy efficiency workshops",
-                                "Implement ISO 50001 energy management standards",
-                                "Engage with the Saint-Gobain Eco-Innovation team for best practices"
-                            ]
-                        }
-                    },
-                    {
-                        title: "Operational Improvements Only",
-                        icon: "fas fa-cogs",
-                        description: "Focus only on optimizing existing operations without new equipment investments",
-                        result: {
-                            title: "Limited Long-Term Impact",
-                            description: "While operational improvements are valuable, they alone won't achieve the transformational energy reductions needed to meet Saint-Gobain's ambitious sustainability targets. Combined approaches yield better results.",
-                            impact: 50,
-                            saintGobainInfo: "Saint-Gobain's PERFORM+ operational excellence program has demonstrated that while operational improvements can yield 5-10% energy savings, they're most effective when combined with technological upgrades.",
-                            actions: [
-                                "Start with an energy audit through SG's internal programs",
-                                "Train staff on energy-efficient operational practices",
-                                "Implement real-time energy monitoring dashboards",
-                                "Consider small pilot projects for equipment upgrades"
-                            ]
-                        }
-                    }
-                ]
-            },
-            {
-                id: 2,
-                title: "Sustainable Construction Materials",
-                description: "Your project team is selecting materials for a new commercial construction project. How will you leverage Saint-Gobain's innovation in sustainable materials to minimize environmental impact?",
-                options: [
-                    {
-                        title: "Traditional Materials",
-                        icon: "fas fa-hammer",
-                        description: "Stick with conventional materials that have predictable performance characteristics",
-                        result: {
-                            title: "Missed Opportunities",
-                            description: "This conservative approach misses significant opportunities to reduce the building's lifetime carbon footprint. Saint-Gobain's R&D has developed numerous sustainable alternatives that maintain performance while reducing environmental impact.",
-                            impact: 20,
-                            saintGobainInfo: "Saint-Gobain has invested heavily in developing sustainable solutions like low-carbon glass, recycled insulation materials, and energy-efficient gypsum products. The company aims to have 100% of its solutions contributing to sustainability by 2025.",
-                            actions: [
-                                "Review the Saint-Gobain Sustainable Construction catalog",
-                                "Attend product innovation webinars",
-                                "Consult with SG technical sales specialists",
-                                "Request lifecycle assessment data for materials"
-                            ]
-                        }
-                    },
-                    {
-                        title: "Innovative Solutions",
-                        icon: "fas fa-lightbulb",
-                        description: "Specify cutting-edge Saint-Gobain materials like carbon-reduced glass and recycled-content insulation",
-                        result: {
-                            title: "Leading-Edge Sustainability",
-                            description: "This approach maximizes the sustainability benefits of the project while supporting Saint-Gobain's innovation ecosystem. Many of these materials qualify for green building certification credits.",
-                            impact: 90,
-                            saintGobainInfo: "Saint-Gobain's research centers worldwide focus on developing materials that contribute to low-carbon and circular construction. Recent innovations include Glass PRISM for daylight optimization and CertainTeed AirRenew insulation with formaldehyde reduction.",
-                            actions: [
-                                "Use Saint-Gobain's Building Life Cycle Analysis tools",
-                                "Include EPDs (Environmental Product Declarations) in specifications",
-                                "Explore material reuse programs",
-                                "Participate in SG customer sustainability training"
-                            ]
-                        }
-                    },
-                    {
-                        title: "Mix of Both",
-                        icon: "fas fa-balance-scale",
-                        description: "Combine some innovative materials in visible areas with traditional materials elsewhere to balance cost and sustainability",
-                        result: {
-                            title: "Moderate Impact Approach",
-                            description: "This pragmatic approach makes progress on sustainability while managing project constraints. The key is ensuring that the sustainability benefits are realized where they matter most in the building's lifecycle.",
-                            impact: 60,
-                            saintGobainInfo: "Saint-Gobain's multicriteria analysis tools can help identify which material substitutions deliver the greatest sustainability benefits for specific project types. Many successful projects have taken a targeted approach to material innovation.",
-                            actions: [
-                                "Use SG's material substitution impact calculator",
-                                "Prioritize high-impact material changes first",
-                                "Document sustainable choices for certification",
-                                "Benchmark against similar successful projects"
-                            ]
-                        }
-                    }
-                ]
-            },
-            {
-                id: 3,
-                title: "Circular Economy in Operations",
-                description: "You're managing waste streams at a production facility. How will you implement Saint-Gobain's circular economy principles to reduce waste and maximize resource efficiency?",
-                options: [
-                    {
-                        title: "Standard Recycling",
-                        icon: "fas fa-recycle",
-                        description: "Implement basic recycling of major waste streams as required by regulations",
-                        result: {
-                            title: "Minimum Compliance",
-                            description: "While this meets basic requirements, it doesn't leverage the full potential of Saint-Gobain's circular economy initiatives. The company has set much more ambitious targets for industrial waste recovery.",
-                            impact: 40,
-                            saintGobainInfo: "Saint-Gobain's target is to achieve 100% recovery rate for industrial waste by 2025, going beyond basic recycling. The company has developed specialized processes for gypsum, glass, and insulation recycling.",
-                            actions: [
-                                "Review site waste streams with the SG sustainability team",
-                                "Explore industrial symbiosis opportunities",
-                                "Investigate closed-loop recycling programs",
-                                "Benchmark against best-performing SG plants"
-                            ]
-                        }
-                    },
-                    {
-                        title: "Closed-Loop System",
-                        icon: "fas fa-infinity",
-                        description: "Develop a comprehensive closed-loop system that processes and reuses materials throughout the production cycle",
-                        result: {
-                            title: "Exemplary Circular Approach",
-                            description: "This ambitious but achievable approach aligns perfectly with Saint-Gobain's circular economy goals. It may qualify for external recognition and internal excellence awards while delivering cost savings.",
-                            impact: 95,
-                            saintGobainInfo: "Several Saint-Gobain plants now operate near-zero-waste facilities through innovative closed-loop systems. The Gypsum business has achieved over 90% waste recovery in some plants by recycling plaster waste directly back into production.",
-                            actions: [
-                                "Consult with SG Circular Economy experts",
-                                "Apply for SG innovation funding",
-                                "Document cost savings from waste reduction",
-                                "Train staff in circular economy principles"
-                            ]
-                        }
-                    },
-                    {
-                        title: "Partial Optimization",
-                        icon: "fas fa-project-diagram",
-                        description: "Focus on recycling high-volume waste streams while improving overall material efficiency",
-                        result: {
-                            title: "Incremental Improvement",
-                            description: "This practical approach makes meaningful progress toward circular economy goals while being easier to implement than comprehensive closed-loop systems. It provides a foundation for more advanced initiatives later.",
-                            impact: 70,
-                            saintGobainInfo: "Saint-Gobain's circular economy roadmap includes both immediate actions and longer-term transformational projects. Many success stories begin with optimizing major waste streams before expanding to complete material loop closure.",
-                            actions: [
-                                "Conduct a detailed waste audit",
-                                "Identify the 20% of waste streams causing 80% of impact",
-                                "Implement visual management for waste reduction",
-                                "Set measurable improvement targets"
-                            ]
-                        }
-                    }
-                ]
-            }
-        ];
-        // Game State
-        let currentScenario = 0;
-        let score = 0;
-        let badgesEarned = [];
-        const employeeName = "Saint-Gobain Employee"; // In a real app, this would come from user input or auth system
-        // DOM Elements
-        const welcomeScreen = document.getElementById('welcome-screen');
-        const scenarioScreen = document.getElementById('scenario-screen');
-        const resultScreen = document.getElementById('result-screen');
-        const gameCompleteScreen = document.getElementById('game-complete-screen');
-        const scenarioTitle = document.getElementById('scenario-title');
-        const scenarioText = document.getElementById('scenario-text');
-        const optionsContainer = document.getElementById('options-container');
-        const resultTitle = document.getElementById('result-title');
-        const resultDescription = document.getElementById('result-description');
-        const saintGobainText = document.getElementById('saint-gobain-text');
-        const actionItems = document.getElementById('action-items');
-        const impactPointer = document.getElementById('impact-pointer');
-        const progressText = document.getElementById('progress-text');
-        const progressBar = document.getElementById('progress-bar');
-        const badgeCollection = document.getElementById('badge-collection');
-        const certificateBtn = document.getElementById('certificate-btn');
-        const certificateModal = document.getElementById('certificate-modal');
-        const closeModal = document.getElementById('close-modal');
-        const certificateName = document.getElementById('certificate-name');
-        const certificateDate = document.getElementById('certificate-date');
-        // Initialize the game
-        document.addEventListener('DOMContentLoaded', () => {
-            // Set current date for certificate
-            const today = new Date();
-            certificateDate.textContent = today.toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-            });
-            // Set employee name
-            certificateName.textContent = employeeName;
-            // Event listeners
-            document.getElementById('start-btn').addEventListener('click', startGame);
-            document.getElementById('next-btn').addEventListener('click', nextScenario);
-            certificateBtn.addEventListener('click', showCertificate);
-            closeModal.addEventListener('click', () => {
-                certificateModal.style.display = 'none';
-            });
-            // Close modal when clicking outside
-            window.addEventListener('click', (e) => {
-                if (e.target === certificateModal) {
-                    certificateModal.style.display = 'none';
-                }
-            });
-        });
-        function startGame() {
-            welcomeScreen.style.display = 'none';
-            loadScenario(currentScenario);
-            scenarioScreen.style.display = 'flex';
-            updateProgress();
-        }
-        function loadScenario(index) {
-            const scenario = scenarios[index];
-            scenarioTitle.textContent = scenario.title;
-            scenarioText.textContent = scenario.description;
-            // Clear previous options
-            optionsContainer.innerHTML = '';
-            // Add new options
-            scenario.options.forEach((option, i) => {
-                const optionCard = document.createElement('div');
-                optionCard.className = 'option-card';
-                optionCard.innerHTML = `
-                    <i class="${option.icon} option-icon"></i>
-                    <h3 class="option-title">${option.title}</h3>
-                    <p class="option-description">${option.description}</p>
-                `;
-                optionCard.addEventListener('click', () => selectOption(i));
-                optionsContainer.appendChild(optionCard);
-            });
-        }
-        function selectOption(optionIndex) {
-            const scenario = scenarios[currentScenario];
-            const option = scenario.options[optionIndex];
-            // Calculate score adjustment based on impact
-            score += option.result.impact;
-            // Display results
-            resultTitle.textContent = option.result.title;
-            resultDescription.textContent = option.result.description;
-            saintGobainText.textContent = option.result.saintGobainInfo;
-            // Set impact pointer position (0-100%)
-            const impactPosition = option.result.impact;
-            impactPointer.style.left = `${impactPosition}%`;
-            // Add action items
-            actionItems.innerHTML = '';
-            option.result.actions.forEach(action => {
-                const li = document.createElement('li');
-                li.textContent = action;
-                actionItems.appendChild(li);
-            });
-            // Set result card class based on impact
-            const resultCard = document.getElementById('result-card');
-            resultCard.className = 'result-card';
-            if (impactPosition > 70) {
-                resultCard.classList.add('positive-result');
-            } else if (impactPosition < 40) {
-                resultCard.classList.add('negative-result');
-            } else {
-                resultCard.classList.add('neutral-result');
-            }
-            // Show result screen
-            scenarioScreen.style.display = 'none';
-            resultScreen.style.display = 'flex';
-            // Check if this scenario earns a badge
-            if (impactPosition > 70) {
-                const badge = {
-                    scenarioId: scenario.id,
-                    title: scenario.title,
-                    impact: impactPosition
-                };
-                badgesEarned.push(badge);
-            }
-        }
-        function nextScenario() {
-            currentScenario++;
-            if (currentScenario < scenarios.length) {
-                // Load next scenario
-                loadScenario(currentScenario);
-                resultScreen.style.display = 'none';
-                scenarioScreen.style.display = 'flex';
-                updateProgress();
-            } else {
-                // Game complete
-                showGameComplete();
-            }
-        }
-        function showGameComplete() {
-            resultScreen.style.display = 'none';
-            gameCompleteScreen.style.display = 'flex';
-            updateProgress();
-            // Display earned badges
-            badgeCollection.innerHTML = '';
-            // Add all possible badges (showing which were earned)
-            scenarios.forEach((scenario, i) => {
-                const badge = document.createElement('div');
-                badge.className = 'badge';
-                // Check if this badge was earned
-                const earnedBadge = badgesEarned.find(b => b.scenarioId === scenario.id);
-                if (earnedBadge) {
-                    badge.classList.add('badge-completed');
-                }
-                // Placeholder for badge icons matching scenario topics
-                let badgeIcon;
-                switch (i) {
-                    case 0:
-                        badgeIcon = 'fas fa-bolt';
-                        break;
-                    case 1:
-                        badgeIcon = 'fas fa-leaf';
-                        break;
-                    case 2:
-                        badgeIcon = 'fas fa-recycle';
-                        break;
-                    default:
-                        badgeIcon = 'fas fa-star';
-                }
-                badge.innerHTML = `<i class="${badgeIcon}"></i>`;
-                badgeCollection.appendChild(badge);
-            });
-        }
-        function updateProgress() {
-            const progress = ((currentScenario) / scenarios.length) * 100;
-            progressText.textContent = Math.round(progress);
-            progressBar.style.width = `${progress}%`;
-        }
-        function showCertificate() {
-            // Set certificate score based on average impact
-            const avgScore = score / scenarios.length;
-            document.getElementById('certificate-score').textContent = `${Math.round(avgScore)}%`;
-            // Show modal
-            certificateModal.style.display = 'flex';
-        }
-    </script>
-</body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EcoQuest: Saint-Gobain Advanced Sustainability Challenge</title>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             --sg-yellow: #FFD700;
             --sg-white: #F5F5F5;
             --sg-gray: #555555;
+            --sg-red: #D9534F;
+            --sg-orange: #F0AD4E;
         }
         * {
             backdrop-filter: blur(5px);
             min-height: 100vh;
             width: 100%;
+            background-color: rgba(255, 255, 255, 0.9);
         }
         .container {
             font-family: 'Montserrat', sans-serif;
         }
+        .welcome-text p {
+            margin-bottom: 1rem;
+            text-align: left;
+        }
+        .employee-details {
+            background-color: #f5f5f5;
+            padding: 1.5rem;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 500px;
+            text-align: left;
+            margin-bottom: 1rem;
+        }
+        .employee-details h3 {
+            color: var(--sg-blue);
+            margin-bottom: 0.5rem;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 1.1rem;
+        }
+        .form-group {
+            margin-bottom: 1rem;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 0.3rem;
+            font-weight: 500;
+        }
+        .form-group input, .form-group select {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-family: inherit;
+        }
         .start-btn {
             background-color: var(--sg-green);
             color: white;
         .scenario-content {
             display: flex;
             flex-direction: column;
+            gap: 1.5rem;
         }
         .scenario-text {
             font-size: 1.1rem;
         }
+        .scenario-card {
+            background-color: #f9f9f9;
+            border-radius: 10px;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .scenario-card h3 {
+            color: var(--sg-blue);
+            margin-bottom: 0.5rem;
+            font-family: 'Montserrat', sans-serif;
+        }
         .options-container {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
             margin-top: 1rem;
         }
             transition: all 0.3s ease;
             display: flex;
             flex-direction: column;
+            gap: 0.8rem;
         }
         .option-card:hover {
         .option-description {
             font-size: 0.9rem;
             color: var(--sg-gray);
+            margin-bottom: 0.5rem;
+        }
+        .option-details {
+            font-size: 0.85rem;
+            margin-top: 0.5rem;
+            padding-top: 0.5rem;
+            border-top: 1px dashed #ccc;
+        }
+        .details-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.3rem;
+        }
+        .details-label {
+            font-weight: 500;
+            color: var(--sg-gray);
+        }
+        .details-value {
+            font-weight: 500;
+        }
+        .cost-value {
+            color: var(--sg-blue);
+        }
+        .co2-value {
+            color: var(--sg-green);
+        }
+        .roi-value {
+            color: var(--sg-light-blue);
         }
         /* Result Screen */
         }
         .negative-result {
+            border-left: 5px solid var(--sg-red);
         }
         .neutral-result {
+            border-left: 5px solid var(--sg-orange);
         }
         .result-title {
             font-size: 1.2rem;
         }
+        .impact-chart {
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+            margin-top: 1.5rem;
         }
+        .chart-container {
             display: flex;
+            height: 200px;
+            gap: 0.5rem;
+            align-items: flex-end;
         }
+        .chart-bar {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+        }
+        .chart-bar-fill {
+            height: 0%;
+            background-color: var(--sg-green);
+            border-radius: 4px 4px 0 0;
+            transition: height 1s ease-in-out;
             position: relative;
         }
+        .chart-bar-label {
+            text-align: center;
+            padding: 0.3rem;
+            font-size: 0.8rem;
+            font-weight: 500;
+        }
+        .chart-bar-value {
             position: absolute;
+            top: -25px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        .chart-legend {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-top: 0.5rem;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+            font-size: 0.8rem;
+        }
+        .legend-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 2px;
+        }
+        .impact-analysis {
+            margin-top: 1.5rem;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+        .impact-metric {
+            background-color: white;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            text-align: center;
+        }
+        .metric-value {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin: 0.5rem 0;
+        }
+        .metric-label {
+            font-size: 0.8rem;
+            color: var(--sg-gray);
+        }
+        .metric-positive {
+            color: var(--sg-green);
+        }
+        .metric-negative {
+            color: var(--sg-red);
+        }
+        .metric-neutral {
+            color: var(--sg-orange);
         }
         .next-btn {
             cursor: pointer;
             transition: all 0.3s ease;
             font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
         .next-btn:hover {
             animation: bounce 2s infinite;
         }
+        .score-summary {
+            background-color: #f5f5f5;
+            padding: 1.5rem;
+            border-radius: 10px;
+            width: 100%;
+            max-width: 600px;
+            margin-bottom: 1rem;
+        }
+        .score-metric {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.8rem;
+            padding-bottom: 0.8rem;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .score-metric:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        .score-label {
+            font-weight: 500;
+        }
+        .score-value {
+            font-weight: 600;
+        }
+        .total-score {
+            font-size: 1.3rem;
+            color: var(--sg-blue);
+            margin-top: 1rem;
+            padding-top: 1rem;
+            border-top: 2px solid var(--sg-blue);
+        }
         .certificate-btn {
             background-color: var(--sg-green);
             color: white;
             transform: translateY(-3px);
         }
+        .badge-collection {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+            justify-content: center;
+            margin: 2rem 0;
+            max-width: 800px;
+        }
+        .badge {
+            width: 100px;
+            height: 120px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding: 1rem;
+            border-radius: 10px;
+            background-color: var(--sg-white);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .badge i {
+            font-size: 2.5rem;
+            color: var(--sg-green);
+        }
+        .badge:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        }
+        .badge-completed {
+            background-color: var(--sg-yellow);
+        }
+        .badge-completed i {
+            color: white;
+        }
+        .badge-title {
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-align: center;
+            color: var(--sg-gray);
+        }
+        .badge-score {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background-color: var(--sg-blue);
+            color: white;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.7rem;
+            font-weight: 600;
+        }
         /* Animations */
         @keyframes fadeIn {
             from { opacity: 0; }
             60% { transform: translateY(-15px); }
         }
+        @keyframes grow {
+            from { height: 0%; }
+            to { height: var(--target-height); }
+        }
         /* Responsive */
         @media (max-width: 768px) {
             .container {
                 justify-content: center;
             }
+            .game-content {
+                padding: 1.5rem;
+            }
             .options-container {
                 grid-template-columns: 1fr;
             }
+            .impact-analysis {
+                grid-template-columns: 1fr 1fr;
+            }
+            .badge {
+                width: 80px;
+                height: 100px;
+            }
+            .badge i {
+                font-size: 2rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .impact-analysis {
+                grid-template-columns: 1fr;
+            }
+            .badge-collection {
+                gap: 1rem;
+            }
+            .badge {
+                width: 70px;
+                height: 90px;
+                padding: 0.5rem;
+            }
+            .badge i {
+                font-size: 1.5rem;
             }
         }
             border-bottom: 2px solid var(--sg-blue);
         }
+        .performance-metrics {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+            margin: 2rem 0;
+        }
+        .certificate-metric {
+            padding: 1rem;
+        }
+        .metric-number {
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: var(--sg-blue);
+            margin-bottom: 0.3rem;
+        }
+        .metric-description {
+            font-size: 0.9rem;
+            color: var(--sg-gray);
+        }
         .certificate-details {
             display: flex;
             justify-content: space-between;
             text-align: center;
             font-weight: 600;
         }
     </style>
 </head>
 <body>
         <div class="container">
             <header>
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Saint-Gobain-Logo.svg/2560px-Saint-Gobain-Logo.svg.png" alt="Saint-Gobain Logo" class="logo">
+                <h1>EcoQuest</h1>
+                <p class="subtitle">Saint-Gobain Advanced Sustainability Challenge</p>
             </header>
             <div class="game-container">
                 <div class="game-header">
+                    <div class="game-title">Sustainability Decision Simulator</div>
                     <div class="progress-container">
                         <div class="progress-text">Progress: <span id="progress-text">0</span>%</div>
                         <div class="progress-bar">
                     <div class="welcome-screen" id="welcome-screen">
                         <i class="fas fa-leaf welcome-icon"></i>
                         <div class="welcome-text">
+                            <
 </html>