Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ILITHA FTTH Training - Ward 14, Mdantsane</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); | |
| } | |
| .network-diagram { | |
| transition: all 0.3s ease; | |
| } | |
| .network-diagram:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h1 class="text-2xl md:text-3xl font-bold">ILITHA FTTH Training</h1> | |
| <p class="text-blue-100">Ward 14, Mdantsane</p> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-4 font-medium"> | |
| <li><a href="#overview" class="hover:text-blue-100 transition">Overview</a></li> | |
| <li><a href="#infrastructure" class="hover:text-blue-100 transition">Infrastructure</a></li> | |
| <li><a href="#guide" class="hover:text-blue-100 transition">Guide</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Fibre Optic Internet in Ward 14</h2> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">Fast, stable, and future-proof FTTH (Fibre-to-the-Home) technology</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#guide" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">Get Started</a> | |
| <a href="#infrastructure" class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">View Infrastructure</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Overview Section --> | |
| <section id="overview" class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Understanding Fibre Optic Networks</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Think of fibre like a road system connecting your home to the internet superhighway</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-md feature-card transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-road text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Main Feeder Cable</h3> | |
| <p class="text-gray-600">The highway of the network - carries large amounts of data over long distances</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md feature-card transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-code-branch text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Distribution Routes</h3> | |
| <p class="text-gray-600">The main roads - branch into neighborhoods to deliver data closer to homes</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md feature-card transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-lightbulb text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Poles & Splitters</h3> | |
| <p class="text-gray-600">Streetlights and intersections - carry fibre overhead and divide it into smaller lines</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden network-diagram"> | |
| <div class="p-6 bg-blue-50 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">FTTH Network Diagram</h3> | |
| </div> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Passive_optical_network.svg/800px-Passive_optical_network.svg.png" | |
| alt="FTTH Network Diagram" | |
| class="w-full object-contain p-4"> | |
| </div> | |
| </section> | |
| <!-- Infrastructure Section --> | |
| <section id="infrastructure" class="mb-20"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Network Infrastructure Details</h2> | |
| <div class="bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl p-1 mb-8"> | |
| <div class="bg-white rounded-lg p-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Fibre Cable Specifications</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm text-blue-800 font-medium">Main Cable</p> | |
| <p class="text-lg font-bold">1x 48F aerial fibre</p> | |
| <p class="text-sm text-gray-600">2800 meters</p> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm text-blue-800 font-medium">Distribution Cables</p> | |
| <p class="text-lg font-bold">24F aerial cables</p> | |
| <p class="text-sm text-gray-600">Multiple lengths (180-1150m)</p> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm text-blue-800 font-medium">Splitter Ratio</p> | |
| <p class="text-lg font-bold">1:8</p> | |
| <p class="text-sm text-gray-600">1 cable serves 8 homes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Aggregation Zones</h3> | |
| <!-- Tabs Navigation --> | |
| <div class="flex overflow-x-auto mb-6 pb-2"> | |
| <button onclick="openTab(event, 'ag36')" class="tab-button flex-shrink-0 px-4 py-2 mr-2 rounded-lg bg-blue-600 text-white font-medium"> | |
| AG36 Zone | |
| </button> | |
| <button onclick="openTab(event, 'ag45')" class="tab-button flex-shrink-0 px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-medium hover:bg-gray-300"> | |
| AG45 Zone | |
| </button> | |
| </div> | |
| <!-- Tabs Content --> | |
| <div id="ag36" class="tab-content active"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="grid grid-cols-5 bg-gray-100 font-medium p-4"> | |
| <div>AG Zone</div> | |
| <div>Joint</div> | |
| <div>Distribution Cables</div> | |
| <div>Poles</div> | |
| <div>Notes</div> | |
| </div> | |
| <div class="grid grid-cols-5 p-4 border-b border-gray-200"> | |
| <div class="font-medium">AG36</div> | |
| <div>Joint-36</div> | |
| <div>3x cables (1230m each)</div> | |
| <div>9</div> | |
| <div>Serves P98–P99</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="ag45" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="grid grid-cols-5 bg-gray-100 font-medium p-4"> | |
| <div>AG Zone</div> | |
| <div>Joint</div> | |
| <div>Distribution Cables</div> | |
| <div>Poles</div> | |
| <div>Notes</div> | |
| </div> | |
| <div class="grid grid-cols-5 p-4 border-b border-gray-200"> | |
| <div class="font-medium">AG45</div> | |
| <div>Joint-45</div> | |
| <div>7x cables (60–660m)</div> | |
| <div>14</div> | |
| <div>Serves P122–P125</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-semibold mb-4">Poles Distribution</h3> | |
| <div class="flex items-center justify-center bg-gray-100 rounded-lg p-6"> | |
| <div class="text-center text-gray-500"> | |
| <i class="fas fa-chart-bar text-4xl mb-3"></i> | |
| <p>Visual representation coming soon</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-600">The diagram illustrates how fibre flows from the Feeder to Aggregation Zones (AG36–AG45), then to Poles, and finally into Homes.</p> | |
| </div> | |
| </section> | |
| <!-- Guide Section --> | |
| <section id="guide" class="mb-20"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Team Guidelines</h2> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Sales Team Card --> | |
| <div class="bg-blue-50 rounded-xl p-6 shadow-md border-l-4 border-blue-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Sales Teams</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Confirm coverage in specific areas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Explain that fibre is already in the street</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Highlight benefits of the available packages</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Technicians Card --> | |
| <div class="bg-green-50 rounded-xl p-6 shadow-md border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-tools text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Technicians</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Check the nearest pole to the customer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Monitor splitter capacity (1:8 rule)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Maintain joints and report issues</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Troubleshooting Section --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 bg-gray-800 text-white"> | |
| <h3 class="text-xl font-semibold">Troubleshooting Guide</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-red-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-plug text-red-500"></i> | |
| </div> | |
| <h4 class="font-medium text-lg">No Connection</h4> | |
| </div> | |
| <p class="ml-14 mt-2 text-gray-600">Check DP on nearest pole → trace to Joint</p> | |
| </div> | |
| <div class="p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-tachometer-alt text-yellow-500"></i> | |
| </div> | |
| <h4 class="font-medium text-lg">Slow Speeds</h4> | |
| </div> | |
| <p class="ml-14 mt-2 text-gray-600">Check splitter load (1:8 ratio rule)</p> | |
| </div> | |
| <div class="p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-orange-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-cable-car text-orange-500"></i> | |
| </div> | |
| <h4 class="font-medium text-lg">Broken Cable</h4> | |
| </div> | |
| <p class="ml-14 mt-2 text-gray-600">Replace aerial fibre between poles</p> | |
| </div> | |
| <div class="p-6 hover:bg-gray-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-purple-500"></i> | |
| </div> | |
| <h4 class="font-medium text-lg">Power Issue</h4> | |
| </div> | |
| <p class="ml-14 mt-2 text-gray-600">Ensure ONT at customer premises has power</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- FAQ Section --> | |
| <section class="bg-gray-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Frequently Asked Questions</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-md mb-4 overflow-hidden"> | |
| <button onclick="toggleFAQ(1)" class="w-full text-left p-6 focus:outline-none flex justify-between items-center"> | |
| <span class="font-medium text-lg">What is the splitter ratio?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i> | |
| </button> | |
| <div id="faq-answer-1" class="px-6 pb-6 hidden text-gray-600"> | |
| The splitter ratio is 1:8, meaning one fibre cable can be split to serve up to 8 homes. This ensures optimal network performance while maximizing coverage. | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md mb-4 overflow-hidden"> | |
| <button onclick="toggleFAQ(2)" class="w-full text-left p-6 focus:outline-none flex justify-between items-center"> | |
| <span class="font-medium text-lg">How long does installation take?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i> | |
| </button> | |
| <div id="faq-answer-2" class="px-6 pb-6 hidden text-gray-600"> | |
| Standard installations typically take 2-4 hours, depending on the distance from the nearest distribution point and the complexity of the home setup. | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button onclick="toggleFAQ(3)" class="w-full text-left p-6 focus:outline-none flex justify-between items-center"> | |
| <span class="font-medium text-lg">How do I check for service coverage?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i> | |
| </button> | |
| <div id="faq-answer-3" class="px-6 pb-6 hidden text-gray-600"> | |
| Contact our sales team with your exact address. They can check our network maps to confirm if fibre is available on your street and which pole would serve your home. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">ILITHA FTTH</h3> | |
| <p class="text-gray-400">Bringing high-speed fibre optic internet to Ward 14, Mdantsane through FTTH technology.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#overview" class="text-gray-400 hover:text-white transition">Overview</a></li> | |
| <li><a href="#infrastructure" class="text-gray-400 hover:text-white transition">Infrastructure</a></li> | |
| <li><a href="#guide" class="text-gray-400 hover:text-white transition">Team Guide</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Contact</h3> | |
| <p class="text-gray-400 mb-2">Ward 14, Mdantsane</p> | |
| <p class="text-gray-400">Eastern Cape, South Africa</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-gray-400 text-center"> | |
| <p>© 2025 ILITHA FTTH Training. All rights reserved</p>Designed by Raznet Solutions ([email protected])</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab functionality | |
| function openTab(evt, tabName) { | |
| const tabContents = document.getElementsByClassName("tab-content"); | |
| for (let i = 0; i < tabContents.length; i++) { | |
| tabContents[i].classList.remove("active"); | |
| } | |
| const tabButtons = document.getElementsByClassName("tab-button"); | |
| for (let i = 0; i < tabButtons.length; i++) { | |
| tabButtons[i].classList.remove("bg-blue-600", "text-white"); | |
| tabButtons[i].classList.add("bg-gray-200", "text-gray-700"); | |
| } | |
| document.getElementById(tabName).classList.add("active"); | |
| evt.currentTarget.classList.remove("bg-gray-200", "text-gray-700"); | |
| evt.currentTarget.classList.add("bg-blue-600", "text-white"); | |
| } | |
| // FAQ toggle functionality | |
| function toggleFAQ(num) { | |
| const answer = document.getElementById(`faq-answer-${num}`); | |
| const icon = document.getElementById(`faq-icon-${num}`); | |
| if (answer.classList.contains('hidden')) { | |
| answer.classList.remove('hidden'); | |
| icon.classList.add('transform', 'rotate-180'); | |
| } else { | |
| answer.classList.add('hidden'); | |
| icon.classList.remove('transform', 'rotate-180'); | |
| } | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RazNT/ilitha-ftth-training" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |