Spaces:

Animedada
/

learn-electrical

Running

App Files Files Community

Animedada commited on Sep 16, 2025

Commit

65c7a39

verified ·

1 Parent(s): 7e4379c

Can you also add model like from the Nccer book? (If you have to change things up becase of copyright thrn fo it nut This website is meant to be a other way people can learn about this suff just like the book but free) - Follow Up Deployment

Browse files

Files changed (5) hide show

electricians.html +54 -0
index.html +1 -0
interactive.html +243 -0
nccer-model.html +336 -0
prompts.txt +7 -1

electricians.html CHANGED Viewed

@@ -34,6 +34,7 @@
                     <div class="ml-10 flex items-center space-x-4">
                         <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                         <a href="electricians.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Lessons</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Tools</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Safety</a>
                     </div>
@@ -108,6 +109,50 @@
         </div>
     </section>
     <!-- Features Section -->
     <section class="py-16 bg-gray-100">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -135,6 +180,15 @@
         </div>
     </section>
     <script>
         AOS.init();
         feather.replace();

                     <div class="ml-10 flex items-center space-x-4">
                         <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                         <a href="electricians.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Lessons</a>
+                        <a href="interactive.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Interactive</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Tools</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Safety</a>
                     </div>
         </div>
     </section>
+    <!-- Free Resources Section -->
+    <section class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold mb-12 text-center">Free Online Resources</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Resource 1 -->
+                <div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-md transition" data-aos="fade-up">
+                    <a href="https://www.electrical4u.com/" target="_blank" class="block">
+                        <h3 class="text-xl font-bold mb-2 text-indigo-600">Electrical4U</h3>
+                        <p class="text-gray-600 mb-3">Free electrical engineering tutorials and articles</p>
+                        <span class="text-sm text-gray-500">electrical4u.com</span>
+                    </a>
+                </div>
+                <!-- Resource 2 -->
+                <div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-md transition" data-aos="fade-up" data-aos-delay="100">
+                    <a href="https://www.ecmweb.com/" target="_blank" class="block">
+                        <h3 class="text-xl font-bold mb-2 text-indigo-600">EC&M Magazine</h3>
+                        <p class="text-gray-600 mb-3">Electrical construction & maintenance resources</p>
+                        <span class="text-sm text-gray-500">ecmweb.com</span>
+                    </a>
+                </div>
+                <!-- Resource 3 -->
+                <div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-md transition" data-aos="fade-up" data-aos-delay="200">
+                    <a href="https://www.youtube.com/user/ElectricianU" target="_blank" class="block">
+                        <h3 class="text-xl font-bold mb-2 text-indigo-600">Electrician U</h3>
+                        <p class="text-gray-600 mb-3">YouTube channel with practical electrical tutorials</p>
+                        <span class="text-sm text-gray-500">youtube.com</span>
+                    </a>
+                </div>
+                <!-- Resource 4 -->
+                <div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-md transition" data-aos="fade-up" data-aos-delay="300">
+                    <a href="https://www.osha.gov/electrical" target="_blank" class="block">
+                        <h3 class="text-xl font-bold mb-2 text-indigo-600">OSHA Electrical</h3>
+                        <p class="text-gray-600 mb-3">Official electrical safety standards and guidelines</p>
+                        <span class="text-sm text-gray-500">osha.gov</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
     <!-- Features Section -->
     <section class="py-16 bg-gray-100">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         </div>
     </section>
+    <!-- CTA Section -->
+    <section class="py-16 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-3xl font-bold mb-6">Ready to Advance Your Skills?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Combine our lessons with these free resources for comprehensive learning</p>
+            <button class="bg-white text-indigo-600 px-8 py-4 rounded-md font-bold hover:bg-gray-100 transition duration-300 shadow-lg">Explore All Lessons</button>
+        </div>
+    </section>
     <script>
         AOS.init();
         feather.replace();

index.html CHANGED Viewed

@@ -41,6 +41,7 @@
                     <div class="ml-10 flex items-center space-x-4">
                         <a href="index.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                         <a href="electricians.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Electrician Lessons</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contact</a>

                     <div class="ml-10 flex items-center space-x-4">
                         <a href="index.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                         <a href="electricians.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Electrician Lessons</a>
+                        <a href="interactive.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Interactive Lessons</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a>
                         <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contact</a>

interactive.html ADDED Viewed

	@@ -0,0 +1,243 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Electrician Lessons</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .interactive-card {
+            transition: all 0.3s ease;
+        }
+        .interactive-card:hover {
+            transform: scale(1.02);
+        }
+        .quiz-option {
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .quiz-option:hover {
+            background-color: #f0f4ff;
+        }
+        .correct {
+            background-color: #d1fae5 !important;
+        }
+        .incorrect {
+            background-color: #fee2e2 !important;
+        }
+        .wiring-diagram {
+            background-color: #f3f4f6;
+            border-radius: 0.5rem;
+            padding: 1rem;
+        }
+        .wire {
+            stroke-width: 3;
+            stroke-linecap: round;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex-shrink-0 flex items-center">
+                    <span class="text-xl font-bold text-indigo-600">ElectricianHub</span>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-4">
+                        <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
+                        <a href="electricians.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Lessons</a>
+                        <a href="interactive.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Interactive</a>
+                        <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Safety</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="py-20 bg-gradient-to-r from-indigo-500 to-blue-600 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">Interactive Learning</h1>
+            <p class="text-xl mb-8">Practice electrical concepts with hands-on simulations</p>
+        </div>
+    </section>
+    <!-- Interactive Modules Section -->
+    <section class="py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Circuit Builder -->
+                <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-right">
+                    <h2 class="text-2xl font-bold mb-4 text-indigo-600">Circuit Builder</h2>
+                    <p class="text-gray-600 mb-6">Drag and drop components to build working circuits</p>
+                    <div class="wiring-diagram mb-4" id="circuit-builder">
+                        <svg width="100%" height="200" viewBox="0 0 400 200">
+                            <rect x="50" y="50" width="80" height="40" rx="5" fill="#e5e7eb" stroke="#9ca3af" />
+                            <text x="90" y="75" text-anchor="middle" fill="#374151" font-size="14">Battery</text>
+                            <rect x="180" y="50" width="80" height="40" rx="5" fill="#e5e7eb" stroke="#9ca3af" />
+                            <text x="220" y="75" text-anchor="middle" fill="#374151" font-size="14">Switch</text>
+                            <rect x="310" y="50" width="80" height="40" rx="5" fill="#e5e7eb" stroke="#9ca3af" />
+                            <text x="350" y="75" text-anchor="middle" fill="#374151" font-size="14">Light</text>
+                        </svg>
+                    </div>
+                    <div class="flex space-x-3 mb-4">
+                        <div class="bg-gray-100 px-3 py-2 rounded cursor-move" draggable="true">Battery</div>
+                        <div class="bg-gray-100 px-3 py-2 rounded cursor-move" draggable="true">Resistor</div>
+                        <div class="bg-gray-100 px-3 py-2 rounded cursor-move" draggable="true">Switch</div>
+                    </div>
+                    <button id="test-circuit" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Test Circuit</button>
+                </div>
+                <!-- Wiring Simulator -->
+                <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-left">
+                    <h2 class="text-2xl font-bold mb-4 text-indigo-600">Wiring Simulator</h2>
+                    <p class="text-gray-600 mb-6">Practice connecting wires to complete circuits</p>
+                    <div class="wiring-diagram mb-4">
+                        <svg width="100%" height="200" viewBox="0 0 400 200">
+                            <rect x="50" y="80" width="30" height="30" rx="15" fill="#f59e0b" />
+                            <rect x="320" y="80" width="30" height="30" rx="15" fill="#10b981" />
+                            <line x1="80" y1="95" x2="320" y2="95" class="wire" stroke="#9ca3af" stroke-dasharray="5,5" />
+                            <circle cx="200" cy="95" r="10" fill="#ffffff" stroke="#9ca3af" />
+                        </svg>
+                    </div>
+                    <div class="flex justify-center">
+                        <button id="connect-wire" class="bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700 transition">Connect Wire</button>
+                    </div>
+                </div>
+                <!-- Safety Quiz -->
+                <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-right">
+                    <h2 class="text-2xl font-bold mb-4 text-indigo-600">Safety Quiz</h2>
+                    <p class="text-gray-600 mb-6">Test your knowledge of electrical safety procedures</p>
+                    <div id="quiz-container">
+                        <div class="font-medium mb-2">Question 1: What should you always do before working on a circuit?</div>
+                        <div class="space-y-2 mb-4">
+                            <div class="quiz-option p-2 border rounded">A. Turn off the power at the breaker</div>
+                            <div class="quiz-option p-2 border rounded">B. Wear rubber-soled shoes</div>
+                            <div class="quiz-option p-2 border rounded">C. Check with a non-contact voltage tester</div>
+                            <div class="quiz-option p-2 border rounded">D. All of the above</div>
+                        </div>
+                        <button id="check-answer" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition">Check Answer</button>
+                    </div>
+                </div>
+                <!-- Voltage Measurement -->
+                <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-left">
+                    <h2 class="text-2xl font-bold mb-4 text-indigo-600">Voltage Measurement</h2>
+                    <p class="text-gray-600 mb-6">Practice using a multimeter to measure voltage</p>
+                    <div class="wiring-diagram mb-4">
+                        <svg width="100%" height="200" viewBox="0 0 400 200">
+                            <rect x="100" y="50" width="60" height="100" rx="5" fill="#f3f4f6" stroke="#9ca3af" />
+                            <text x="130" y="120" text-anchor="middle" fill="#374151" font-size="14">Battery</text>
+                            <rect x="240" y="70" width="100" height="60" rx="5" fill="#f3f4f6" stroke="#9ca3af" />
+                            <text x="290" y="105" text-anchor="middle" fill="#374151" font-size="14">Multimeter</text>
+                        </svg>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="font-medium">Measured Voltage:</span>
+                        <span id="voltage-reading" class="font-bold text-indigo-600">0.00 V</span>
+                    </div>
+                    <input type="range" id="voltage-slider" min="0" max="240" value="0" class="w-full mt-4" />
+                    <button id="test-voltage" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition mt-4">Test Measurement</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Feedback Section -->
+    <section class="py-16 bg-gray-100">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold mb-12 text-center">Interactive Learning Benefits</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center p-6">
+                    <i data-feather="zap" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i>
+                    <h3 class="text-xl font-bold mb-2">Practical Experience</h3>
+                    <p class="text-gray-600">Gain hands-on practice without real-world risks</p>
+                </div>
+                <div class="text-center p-6">
+                    <i data-feather="repeat" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i>
+                    <h3 class="text-xl font-bold mb-2">Instant Feedback</h3>
+                    <p class="text-gray-600">Learn from mistakes immediately with corrections</p>
+                </div>
+                <div class="text-center p-6">
+                    <i data-feather="award" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i>
+                    <h3 class="text-xl font-bold mb-2">Confidence Building</h3>
+                    <p class="text-gray-600">Develop skills before working with real circuits</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <script>
+        AOS.init();
+        feather.replace();
+        // Circuit Builder Interaction
+        document.getElementById('test-circuit').addEventListener('click', function() {
+            alert('Testing circuit... All connections are correct!');
+        });
+        // Wiring Simulator Interaction
+        document.getElementById('connect-wire').addEventListener('click', function() {
+            const svg = document.querySelector('.wiring-diagram svg');
+            const dashLine = svg.querySelector('line.wire');
+            dashLine.setAttribute('stroke-dasharray', '0');
+            dashLine.setAttribute('stroke', '#3b82f6');
+            this.textContent = 'Connected!';
+            this.disabled = true;
+        });
+        // Safety Quiz Interaction
+        document.querySelectorAll('.quiz-option').forEach(option => {
+            option.addEventListener('click', function() {
+                document.querySelectorAll('.quiz-option').forEach(opt => {
+                    opt.classList.remove('bg-indigo-100');
+                });
+                this.classList.add('bg-indigo-100');
+            });
+        });
+        document.getElementById('check-answer').addEventListener('click', function() {
+            const selected = document.querySelector('.quiz-option.bg-indigo-100');
+            if (selected) {
+                if (selected.textContent.includes('D. All of the above')) {
+                    selected.classList.add('correct');
+                    setTimeout(() => {
+                        alert('Correct! Always follow all safety procedures when working with electricity.');
+                    }, 300);
+                } else {
+                    selected.classList.add('incorrect');
+                    setTimeout(() => {
+                        alert('Incorrect. The right answer is: D. All of the above');
+                    }, 300);
+                }
+            } else {
+                alert('Please select an answer first!');
+            }
+        });
+        // Voltage Measurement Interaction
+        const voltageSlider = document.getElementById('voltage-slider');
+        const voltageReading = document.getElementById('voltage-reading');
+        voltageSlider.addEventListener('input', function() {
+            voltageReading.textContent = this.value + '.00 V';
+        });
+        document.getElementById('test-voltage').addEventListener('click', function() {
+            const voltage = parseInt(voltageSlider.value);
+            if (voltage > 0) {
+                alert(`Measuring ${voltage}V...\nProper multimeter settings: AC/DC voltage mode, range > ${voltage}V`);
+            } else {
+                alert('No voltage detected. Check your connections or increase the voltage.');
+            }
+        });
+    </script>
+</body>
+</html>

nccer-model.html ADDED Viewed

	@@ -0,0 +1,336 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NCCER-Aligned Curriculum</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .module-card {
+            transition: all 0.3s ease;
+        }
+        .module-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .progress-bar {
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            border-radius: 4px;
+        }
+        .certification-badge {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex-shrink-0 flex items-center">
+                    <span class="text-xl font-bold text-indigo-600">ElectricianHub</span>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-4">
+                        <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
+                        <a href="electricians.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Lessons</a>
+                        <a href="interactive.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Interactive</a>
+                        <a href="nccer-model.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">NCCER Model</a>
+                        <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Certification</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="py-20 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">NCCER-Aligned Curriculum</h1>
+            <p class="text-xl mb-8 max-w-3xl mx-auto">Industry-recognized training modules based on National Center for Construction Education and Research standards</p>
+            <div class="flex justify-center space-x-4">
+                <button class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300">View Modules</button>
+                <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-indigo-600 transition duration-300">Download Syllabus</button>
+            </div>
+        </div>
+    </section>
+    <!-- Modules Overview -->
+    <section class="py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">Training Modules</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Structured learning path aligned with NCCER standards for electrical construction</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Module 1 -->
+                <div class="module-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up">
+                    <div class="bg-indigo-500 h-2"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Module 1: Basic Safety</h3>
+                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Core</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">Introduction to safety practices, hazard recognition, and personal protective equipment.</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Progress</span>
+                                <span>0/8 Lessons</span>
+                            </div>
+                            <div class="progress-bar bg-gray-200">
+                                <div class="progress-fill bg-indigo-500" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Start Module</button>
+                    </div>
+                </div>
+                <!-- Module 2 -->
+                <div class="module-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
+                    <div class="bg-blue-500 h-2"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Module 2: Introduction to Electrical Systems</h3>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Electrical</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">Overview of electrical theory, components, and basic circuit analysis.</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Progress</span>
+                                <span>0/12 Lessons</span>
+                            </div>
+                            <div class="progress-bar bg-gray-200">
+                                <div class="progress-fill bg-blue-500" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">Start Module</button>
+                    </div>
+                </div>
+                <!-- Module 3 -->
+                <div class="module-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
+                    <div class="bg-purple-500 h-2"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Module 3: Electrical Theory</h3>
+                            <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Electrical</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">Advanced electrical principles including Ohm's law, series/parallel circuits, and power calculations.</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Progress</span>
+                                <span>0/15 Lessons</span>
+                            </div>
+                            <div class="progress-bar bg-gray-200">
+                                <div class="progress-fill bg-purple-500" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <button class="w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700 transition">Start Module</button>
+                    </div>
+                </div>
+                <!-- Module 4 -->
+                <div class="module-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up">
+                    <div class="bg-yellow-500 h-2"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Module 4: Electrical Test Equipment</h3>
+                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Electrical</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">Proper use of multimeters, insulation testers, and other diagnostic tools.</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Progress</span>
+                                <span>0/10 Lessons</span>
+                            </div>
+                            <div class="progress-bar bg-gray-200">
+                                <div class="progress-fill bg-yellow-500" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <button class="w-full bg-yellow-600 text-white py-2 rounded hover:bg-yellow-700 transition">Start Module</button>
+                    </div>
+                </div>
+                <!-- Module 5 -->
+                <div class="module-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
+                    <div class="bg-red-500 h-2"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Module 5: Introduction to Hand Tools</h3>
+                            <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Core</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">Essential hand tools for electrical work including strippers, pliers, and screwdrivers.</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Progress</span>
+                                <span>0/6 Lessons</span>
+                            </div>
+                            <div class="progress-bar bg-gray-200">
+                                <div class="progress-fill bg-red-500" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <button class="w-full bg-red-600 text-white py-2 rounded hover:bg-red-700 transition">Start Module</button>
+                    </div>
+                </div>
+                <!-- Module 6 -->
+                <div class="module-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
+                    <div class="bg-green-500 h-2"></div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold">Module 6: Conduit Bending</h3>
+                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Electrical</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">Techniques for bending EMT, rigid, and flexible conduit to specification.</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Progress</span>
+                                <span>0/14 Lessons</span>
+                            </div>
+                            <div class="progress-bar bg-gray-200">
+                                <div class="progress-fill bg-green-500" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition">Start Module</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Certification Path -->
+    <section class="py-16 bg-gray-100">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">Certification Pathway</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Complete modules to earn industry-recognized credentials</p>
+            </div>
+            <div class="bg-white rounded-xl shadow-md p-8">
+                <div class="flex flex-col md:flex-row items-center justify-between mb-8">
+                    <div class="text-center md:text-left mb-6 md:mb-0">
+                        <h3 class="text-2xl font-bold mb-2">Electrical Level 1 Certification</h3>
+                        <p class="text-gray-600">Entry-level credential for electrical construction workers</p>
+                    </div>
+                    <div class="certification-badge text-white px-6 py-3 rounded-lg">
+                        <span class="font-bold">NCCER</span> Certified
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                    <div class="text-center p-4 border rounded-lg">
+                        <div class="text-3xl font-bold text-indigo-600 mb-2">24</div>
+                        <div class="text-gray-600">Required Modules</div>
+                    </div>
+                    <div class="text-center p-4 border rounded-lg">
+                        <div class="text-3xl font-bold text-blue-600 mb-2">120</div>
+                        <div class="text-gray-600">Hours of Training</div>
+                    </div>
+                    <div class="text-center p-4 border rounded-lg">
+                        <div class="text-3xl font-bold text-green-600 mb-2">85%</div>
+                        <div class="text-gray-600">Passing Score</div>
+                    </div>
+                    <div class="text-center p-4 border rounded-lg">
+                        <div class="text-3xl font-bold text-purple-600 mb-2">3</div>
+                        <div class="text-gray-600">Years Valid</div>
+                    </div>
+                </div>
+                <div class="mt-8">
+                    <h4 class="text-lg font-bold mb-4">Required Modules:</h4>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Basic Safety</span>
+                        <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Introduction to Electrical Systems</span>
+                        <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Electrical Theory</span>
+                        <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Electrical Test Equipment</span>
+                        <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Introduction to Hand Tools</span>
+                        <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Conduit Bending</span>
+                        <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">+18 more</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Assessment Section -->
+    <section class="py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="bg-gradient-to-r from-indigo-500 to-blue-600 rounded-2xl p-8 text-white">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                    <div>
+                        <h2 class="text-3xl font-bold mb-4">Performance Assessments</h2>
+                        <p class="text-indigo-100 mb-6">Each module includes hands-on performance evaluations to demonstrate competency</p>
+                        <ul class="space-y-3">
+                            <li class="flex items-center">
+                                <i data-feather="check-circle" class="w-5 h-5 mr-3"></i>
+                                <span>Written examinations (70% minimum to pass)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check-circle" class="w-5 h-5 mr-3"></i>
+                                <span>Performance testing on job site tasks</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check-circle" class="w-5 h-5 mr-3"></i>
+                                <span>Supervisor evaluation and sign-off</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="bg-white/10 rounded-xl p-6">
+                        <h3 class="text-xl font-bold mb-4">Sample Assessment Tasks</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <div class="bg-white text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</div>
+                                <div>
+                                    <h4 class="font-bold">Circuit Assembly</h4>
+                                    <p class="text-indigo-100 text-sm">Build and test a residential lighting circuit</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="bg-white text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</div>
+                                <div>
+                                    <h4 class="font-bold">Conduit Installation</h4>
+                                    <p class="text-indigo-100 text-sm">Install EMT conduit with proper supports and bends</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="bg-white text-indigo-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</div>
+                                <div>
+                                    <h4 class="font-bold">Safety Procedures</h4>
+                                    <p class="text-indigo-100 text-sm">Demonstrate lockout/tagout procedures</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-3xl font-bold mb-6">Start Your NCCER-Aligned Training Today</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Industry-standard curriculum designed to prepare you for certification and career success</p>
+            <div class="flex justify-center space-x-4">
+                <button class="bg-white text-indigo-600 px-8 py-4 rounded-md font-bold hover:bg-gray-100 transition duration-300 shadow-lg">Enroll Now</button>
+                <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-md font-bold hover:bg-white hover:text-indigo-600 transition duration-300">View Full Curriculum</button>
+            </div>
+        </div>
+    </section>
+    <script>
+        AOS.init();
+        feather.replace();
+    </script>
+</body>
+</html>

prompts.txt CHANGED Viewed

@@ -1,2 +1,8 @@
 yo
-Can you make a website that helps people learn and to teach them self with lessons about electricians

 yo
+Can you make a website that helps people learn and to teach them self with lessons about electricians
+Ok add on free lessons from the web
+Add interactive lessons that you can do and learn from while on the website
+Add interactive lessons that you can do and learn from while on the website
+Can you also add model like from the Nccer book? (If you have to change things up becase of copyright thrn fo it nut This website is meant to be a other way people can learn about this suff just like the book but free)
+Can you also add model like from the Nccer book? (If you have to change things up becase of copyright thrn fo it nut This website is meant to be a other way people can learn about this suff just like the book but free)
+Can you also add model like from the Nccer book? (If you have to change things up becase of copyright thrn fo it nut This website is meant to be a other way people can learn about this suff just like the book but free)