update translations & styles

about.html

@@ -152,6 +152,11 @@
     </footer>
 
     <!-- Add translations script -->
+    <script src="js/translations/home-translations.js"></script>
+    <script src="js/translations/about-translations.js"></script>
+    <script src="js/translations/work-translations.js"></script>
+    <script src="js/translations/support-translations.js"></script>
+    <script src="js/translations/contact-translations.js"></script>
     <script src="js/translations.js"></script>
 </body>
 </html>

contact.html

@@ -218,7 +218,7 @@
                     <li><a href="support.html">Support Us</a></li>
                     <li><a href="contact.html" class="active">Contact</a></li>
                 </ul>
-                <div class="language-toggle">
+                <div class="language-toggle" onclick="toggleLanguage()">
                     <i class="fas fa-globe"></i>
                     <span>EN / عربي</span>
                 </div>
@@ -424,40 +424,11 @@
     </footer>
 
     <!-- Scripts -->
+    <script src="js/translations/home-translations.js"></script>
+    <script src="js/translations/about-translations.js"></script>
+    <script src="js/translations/work-translations.js"></script>
+    <script src="js/translations/support-translations.js"></script>
     <script src="js/translations/contact-translations.js"></script>
     <script src="js/translations.js"></script>
-    <script>
-        // FAQ accordion functionality
-        document.addEventListener('DOMContentLoaded', function() {
-            // Populate FAQ items
-            const faqContainer = document.querySelector('.faq-container');
-            const currentLang = document.documentElement.lang;
-            const faqs = translations[currentLang].faqQuestions;
-            
-            for (let i = 1; i <= 5; i++) {
-                const faqItem = document.createElement('div');
-                faqItem.className = 'faq-item';
-                faqItem.innerHTML = `
-                    <div class="faq-question">
-                        <h3>${faqs['q' + i]}</h3>
-                        <i class="fas fa-chevron-down"></i>
-                    </div>
-                    <div class="faq-answer">
-                        <p>${faqs['a' + i]}</p>
-                    </div>
-                `;
-                faqContainer.appendChild(faqItem);
-            }
-
-            // Add click handlers
-            const faqItems = document.querySelectorAll('.faq-item');
-            faqItems.forEach(item => {
-                const question = item.querySelector('.faq-question');
-                question.addEventListener('click', () => {
-                    item.classList.toggle('active');
-                });
-            });
-        });
-    </script>
 </body>
 </html>

css/styles.css

@@ -90,7 +90,7 @@ ul {
 
 /* Header styles */
 header {
-    background-color: white;
+    background-color: var(--navy-blue);
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     position: fixed;
     top: 0;
@@ -112,11 +112,17 @@ header {
 }
 
 .logo img {
-    height: 60px;
+    height: 120px;
     margin-right: 10px;
     border-radius: 50%;
 }
 
+.logo span {
+    color: white;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
 .nav-links {
     display: flex;
 }
@@ -127,7 +133,7 @@ header {
 
 .nav-links a {
     font-weight: 600;
-    color: var(--navy-blue);
+    color: white;
     transition: color 0.3s ease;
 }
 
@@ -140,6 +146,7 @@ header {
     align-items: center;
     font-weight: 600;
     cursor: pointer;
+    color: white;
 }
 
 .language-toggle i {
@@ -800,4 +807,223 @@ textarea.form-control {
     .contact-info {
         flex: 100%;
     }
+}
+
+/* Work page specific styles */
+.achievements {
+    padding: 5rem 0;
+}
+
+.achievements-content {
+    max-width: 800px;
+    margin: 0 auto 3rem;
+    text-align: center;
+}
+
+.achievements-stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+}
+
+.stat-box {
+    flex: 1;
+    min-width: 200px;
+    max-width: 250px;
+    padding: 2rem;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--orange);
+    margin-bottom: 1rem;
+}
+
+/* Programs section */
+.programs {
+    padding: 5rem 0;
+    background-color: var(--gray-bg);
+}
+
+.programs-intro {
+    max-width: 800px;
+    margin: 0 auto 3rem;
+    text-align: center;
+}
+
+.program-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.program-card {
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+}
+
+.program-image {
+    height: 200px;
+    overflow: hidden;
+}
+
+.program-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.program-content {
+    padding: 1.5rem;
+}
+
+/* Gallery section */
+.gallery {
+    padding: 5rem 0;
+}
+
+.gallery-intro {
+    max-width: 800px;
+    margin: 0 auto 3rem;
+    text-align: center;
+}
+
+.gallery-items {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+}
+
+.gallery-item {
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+}
+
+.gallery-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.gallery-item:hover img {
+    transform: scale(1.05);
+}
+
+/* Stories section */
+.stories {
+    padding: 5rem 0;
+}
+
+.stories-intro {
+    max-width: 800px;
+    margin: 0 auto 3rem;
+    text-align: center;
+}
+
+.stories-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.story-card {
+    flex: 1;
+    min-width: 300px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+
+.story-card:hover {
+    transform: translateY(-5px);
+}
+
+.story-header {
+    padding: 1.5rem;
+    background-color: var(--dark-blue);
+    color: white;
+}
+
+.story-header h3 {
+    color: white;
+    margin-bottom: 0.5rem;
+}
+
+.story-content {
+    padding: 1.5rem;
+}
+
+.story-quote {
+    padding: 1rem;
+    background-color: rgba(242, 145, 0, 0.1);
+    border-left: 4px solid var(--orange);
+    margin: 1rem 0;
+    font-style: italic;
+}
+
+/* Future aspirations */
+.future-aspirations {
+    padding: 5rem 0;
+    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/future-vision.jpg') center/cover no-repeat;
+    color: white;
+    text-align: center;
+}
+
+.future-aspirations h2 {
+    color: white;
+    margin-bottom: 1.5rem;
+}
+
+.future-aspirations p {
+    max-width: 800px;
+    margin: 0 auto 2rem;
+}
+
+/* Get involved */
+.get-involved {
+    padding: 5rem 0;
+    text-align: center;
+}
+
+.get-involved h2 {
+    margin-bottom: 1.5rem;
+}
+
+.get-involved p {
+    max-width: 700px;
+    margin: 0 auto 2rem;
+}
+
+.cta-buttons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+    .stat-box {
+        width: 100%;
+    }
+    
+    .program-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .gallery-items {
+        grid-template-columns: 1fr;
+    }
 }

index.html

@@ -41,7 +41,7 @@
             <div class="hero-content">
                 <h1>Our Children<br>Our Future</h1>
                 <p>Bringing Education Where Schools Cannot Reach</p>
-                <a href="#" class="btn btn-primary">Support Our Mission</a>
+                <a href="support.html" class="btn btn-primary">Support Our Mission</a>
             </div>
         </div>
     </section>
@@ -192,7 +192,12 @@
             </div>
         </div>
     </footer>
-    <script src="js/translations.js"></script> 
+    <script src="js/translations/home-translations.js"></script>
+    <script src="js/translations/about-translations.js"></script>
+    <script src="js/translations/work-translations.js"></script>
+    <script src="js/translations/support-translations.js"></script>
+    <script src="js/translations/contact-translations.js"></script>
+    <script src="js/translations.js"></script>
     
 </body>
 </html>

js/translations.js

@@ -14,9 +14,12 @@ const translations = {
         contactUs: "Contact Us",
         copyright: "© 2025 Schools Without Borders. All Rights Reserved.",
         
-        // Import page-specific translations from your arabic_translations.txt
+        // Import page-specific translations
-        ...homeTranslations.en,
+        ...homeTranslations?.en,
-        ...aboutTranslations.en
+        ...aboutTranslations?.en,
+        ...workTranslations?.en,
+        ...supportTranslations?.en,
+        ...contactTranslations?.en
     },
     ar: {
         // Navigation
@@ -52,6 +55,18 @@ function toggleLanguage() {
     document.body.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
     document.body.classList.toggle('rtl', currentLang === 'ar');
     
+    // Update all translatable elements
+    document.querySelectorAll('[data-translate]').forEach(element => {
+        const key = element.getAttribute('data-translate');
+        if (translations[currentLang][key]) {
+            if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+                element.placeholder = translations[currentLang][key];
+            } else {
+                element.innerHTML = translations[currentLang][key];
+            }
+        }
+    });
+    
     // Update navigation
     updateNavigation();
     

support.html

@@ -308,7 +308,7 @@
                     <li><a href="support.html" class="active">Support Us</a></li>
                     <li><a href="contact.html">Contact</a></li>
                 </ul>
-                <div class="language-toggle">
+                <div class="language-toggle" onclick="toggleLanguage()">
                     <i class="fas fa-globe"></i>
                     <span>EN / عربي</span>
                 </div>
@@ -595,6 +595,11 @@
             </div>
         </div>
     </footer>
-    <script src="js/translations.js"></script> 
+    <script src="js/translations/home-translations.js"></script>
+    <script src="js/translations/about-translations.js"></script>
+    <script src="js/translations/work-translations.js"></script>
+    <script src="js/translations/support-translations.js"></script>
+    <script src="js/translations/contact-translations.js"></script>
+    <script src="js/translations.js"></script>
 </body>
 </html>

work.html

@@ -6,274 +6,6 @@
     <title>Our Work - Schools Without Borders</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link href="css/styles.css" rel="stylesheet">
-    <style>
-        /* Our Work page specific styles */
-        .achievements {
-            padding: 5rem 0;
-            background-color: var(--gray-bg);
-        }
-        
-        .achievements-stats {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 2rem;
-            margin-top: 3rem;
-        }
-        
-        .stat-box {
-            background-color: white;
-            padding: 2rem;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
-            text-align: center;
-            width: 220px;
-            transition: transform 0.3s ease;
-        }
-        
-        .stat-box:hover {
-            transform: translateY(-5px);
-        }
-        
-        .stat-number {
-            font-size: 3rem;
-            font-weight: 700;
-            color: var(--orange);
-            margin-bottom: 1rem;
-        }
-        
-        .achievements-content {
-            max-width: 800px;
-            margin: 2rem auto 0;
-            text-align: center;
-        }
-        
-        /* Programs section */
-        .programs {
-            padding: 5rem 0;
-        }
-        
-        .programs-intro {
-            max-width: 800px;
-            margin: 0 auto 3rem;
-            text-align: center;
-        }
-        
-        .program-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-        
-        .program-card {
-            background-color: white;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
-            transition: transform 0.3s ease;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .program-card:hover {
-            transform: translateY(-5px);
-        }
-        
-        .program-image {
-            height: 200px;
-            overflow: hidden;
-        }
-        
-        .program-image img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.3s ease;
-        }
-        
-        .program-card:hover .program-image img {
-            transform: scale(1.05);
-        }
-        
-        .program-content {
-            padding: 1.5rem;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .program-content h3 {
-            margin-bottom: 1rem;
-            color: var(--dark-blue);
-        }
-        
-        .program-content p {
-            margin-bottom: 1.5rem;
-            flex-grow: 1;
-        }
-        
-        .program-link {
-            align-self: flex-start;
-            font-weight: 600;
-            color: var(--orange);
-            display: inline-flex;
-            align-items: center;
-        }
-        
-        .program-link i {
-            margin-left: 0.5rem;
-            transition: transform 0.3s ease;
-        }
-        
-        .program-link:hover i {
-            transform: translateX(3px);
-        }
-        
-        /* Gallery section */
-        .gallery {
-            padding: 5rem 0;
-            background-color: var(--gray-bg);
-        }
-        
-        .gallery-intro {
-            max-width: 800px;
-            margin: 0 auto 3rem;
-            text-align: center;
-        }
-        
-        .gallery-items {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1.5rem;
-        }
-        
-        .gallery-item {
-            height: 250px;
-            border-radius: 10px;
-            overflow: hidden;
-            transition: transform 0.3s ease;
-        }
-        
-        .gallery-item:hover {
-            transform: scale(1.03);
-        }
-        
-        .gallery-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        
-        /* Impact stories */
-        .impact-stories {
-            padding: 5rem 0;
-        }
-        
-        .stories-intro {
-            max-width: 800px;
-            margin: 0 auto 3rem;
-            text-align: center;
-        }
-        
-        .stories-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 2rem;
-        }
-        
-        .story-card {
-            flex: 1;
-            min-width: 300px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
-            overflow: hidden;
-            transition: transform 0.3s ease;
-        }
-        
-        .story-card:hover {
-            transform: translateY(-5px);
-        }
-        
-        .story-header {
-            padding: 1.5rem;
-            background-color: var(--dark-blue);
-            color: white;
-        }
-        
-        .story-header h3 {
-            color: white;
-            margin-bottom: 0.5rem;
-        }
-        
-        .story-content {
-            padding: 1.5rem;
-        }
-        
-        .story-quote {
-            padding: 1rem;
-            background-color: rgba(242, 145, 0, 0.1);
-            border-left: 4px solid var(--orange);
-            margin: 1rem 0;
-            font-style: italic;
-        }
-        
-        /* Future aspirations */
-        .future-aspirations {
-            padding: 5rem 0;
-            background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/future-vision.jpg') center/cover no-repeat;
-            color: white;
-            text-align: center;
-        }
-        
-        .future-aspirations h2 {
-            color: white;
-            margin-bottom: 1.5rem;
-        }
-        
-        .future-aspirations p {
-            max-width: 800px;
-            margin: 0 auto 2rem;
-        }
-        
-        /* Get involved */
-        .get-involved {
-            padding: 5rem 0;
-            text-align: center;
-        }
-        
-        .get-involved h2 {
-            margin-bottom: 1.5rem;
-        }
-        
-        .get-involved p {
-            max-width: 700px;
-            margin: 0 auto 2rem;
-        }
-        
-        .cta-buttons {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-        
-        /* Responsive styles */
-        @media (max-width: 768px) {
-            .stat-box {
-                width: 100%;
-            }
-            
-            .program-grid {
-                grid-template-columns: 1fr;
-            }
-            
-            .gallery-items {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
 </head>
 <body>
     <!-- Header -->
@@ -291,7 +23,7 @@
                     <li><a href="support.html">Support Us</a></li>
                     <li><a href="contact.html">Contact</a></li>
                 </ul>
-                <div class="language-toggle">
+                <div class="language-toggle" onclick="toggleLanguage()">
                     <i class="fas fa-globe"></i>
                     <span>EN / عربي</span>
                 </div>
@@ -532,6 +264,11 @@
             </div>
         </div>
     </footer>
-    <script src="js/translations.js"></script> 
+    <script src="js/translations/home-translations.js"></script>
+    <script src="js/translations/about-translations.js"></script>
+    <script src="js/translations/work-translations.js"></script>
+    <script src="js/translations/support-translations.js"></script>
+    <script src="js/translations/contact-translations.js"></script>
+    <script src="js/translations.js"></script>
 </body>
 </html>