|
|
| (ഒരേ ഉപയോക്താവ് ചെയ്ത ഇടയ്ക്കുള്ള 2 നാൾപ്പതിപ്പുകൾ പ്രദർശിപ്പിക്കുന്നില്ല) |
| വരി 1: |
വരി 1: |
| <!DOCTYPE html>
| | {| style="width:100%; border-collapse:collapse; margin-bottom:0; font-size:105%;" |
| <html lang="en">
| | | style="width:50%; border:1px solid #AAB; background-color:#EFF; padding:8px 0; text-align:center; border-bottom:none; border-radius:6px 6px 0 0;" | '''[[User:{{{1}}}/{{{2|പരിശീലനങ്ങൾ/2025-26}}}|{{{3|2025-'26}}}]]''' |
| <head>
| | | style="width:50%; border:1px solid #CCC; background-color:#F8F8F8; padding:8px 0; text-align:center; border-bottom:none; border-radius:6px 6px 0 0;" | [[User:{{{1}}}/{{{4|പരിശീലനങ്ങൾ/2026-27}}}|{{{5|2026-'27}}}]] |
| <meta charset="UTF-8">
| | |} |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Custom User Page Tabs</title>
| |
| <!-- Load Tailwind CSS -->
| |
| <script src="https://cdn.tailwindcss.com"></script>
| |
| <style>
| |
| /* Custom font for a clean, modern look */
| |
| body {
| |
| font-family: 'Inter', sans-serif;
| |
| background-color: #f3f4f6; /* Light gray background */
| |
| }
| |
| /* Custom styling for the active tab look */
| |
| .tab-button {
| |
| transition: all 0.2s ease-in-out;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| flex-shrink: 0; /* Prevent buttons from shrinking on wrap */
| |
| }
| |
| /* Style for the container to mimic a card or frame */
| |
| .tab-container {
| |
| max-width: 1000px;
| |
| margin: 40px auto;
| |
| padding: 20px;
| |
| background-color: white;
| |
| border-radius: 12px;
| |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| | |
| <div class="tab-container">
| |
| <!-- Tab Navigation Bar - Now contains 4 tabs in Malayalam -->
| |
| <div id="tab-nav" class="flex flex-wrap gap-2 md:gap-4 p-2 border-b-2 border-gray-100 mb-6">
| |
| <!--
| |
| ടാബ് 1: എന്നെക്കുറിച്ച് (About Me)
| |
| നിങ്ങളുടെ യൂസർ പേജിന് അനുയോജ്യമായ നാല് ടാബുകളാണ് ഇവിടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നത്.
| |
| 'data-tab-target' ഉം 'id' ഉം മാച്ച് ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
| |
| -->
| |
| <button class="tab-button is-active bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg text-sm md:text-base" data-tab-target="content-about-me">
| |
| <span class="mr-1">👤</span> എന്നെക്കുറിച്ച്
| |
| </button>
| |
|
| |
| <!-- ടാബ് 2: നിരീക്ഷിക്കുന്ന വിദ്യാലയങ്ങൾ (Observed Schools) -->
| |
| <button class="tab-button text-gray-700 hover:bg-gray-100 font-semibold py-2 px-4 rounded-lg text-sm md:text-base" data-tab-target="content-schools">
| |
| <span class="mr-1">🏫</span> നിരീക്ഷിക്കുന്ന വിദ്യാലയങ്ങൾ
| |
| </button>
| |
|
| |
| <!-- ടാബ് 3: ലിറ്റിൽ കൈറ്റസ് (Little Kites) -->
| |
| <button class="tab-button text-gray-700 hover:bg-gray-100 font-semibold py-2 px-4 rounded-lg text-sm md:text-base" data-tab-target="content-little-kites">
| |
| <span class="mr-1">🪁</span> ലിറ്റിൽ കൈറ്റസ്
| |
| </button>
| |
|
| |
| <!-- ടാബ് 4: പരിശീലനങ്ങൾ (Trainings/Workshops) -->
| |
| <button class="tab-button text-gray-700 hover:bg-gray-100 font-semibold py-2 px-4 rounded-lg text-sm md:text-base" data-tab-target="content-trainings">
| |
| <span class="mr-1">📝</span> പരിശീലനങ്ങൾ
| |
| </button>
| |
| </div>
| |
|
| |
| <!-- Tab Content Sections -->
| |
| <div id="tab-content">
| |
| <!-- Content 1: എന്നെക്കുറിച്ച് (About Me) -->
| |
| <div id="content-about-me" class="tab-content-block p-4 border border-gray-100 rounded-xl bg-gray-50">
| |
| <h2 class="text-2xl font-bold text-blue-700 mb-3">വിവരങ്ങൾ: User:Geokurian</h2>
| |
| <p class="text-gray-700 leading-relaxed">
| |
| സ്കൂൾവിക്കിയിലെ എൻ്റെ പ്രവർത്തനങ്ങളെക്കുറിച്ചുള്ള വിവരങ്ങളാണ് ഈ പേജിൽ നൽകിയിരിക്കുന്നത്. പ്രാദേശിക ചരിത്രരചന, വിദ്യാലയങ്ങളുടെ വിവരങ്ങൾ കൃത്യമാക്കൽ, ഐ.ടി. അധിഷ്ഠിത വിദ്യാഭ്യാസത്തിനുള്ള പിന്തുണ നൽകൽ എന്നിവയിലാണ് ഞാൻ പ്രധാനമായും ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്.
| |
| </p>
| |
| </div>
| |
| | |
| <!-- Content 2: നിരീക്ഷിക്കുന്ന വിദ്യാലയങ്ങൾ (Observed Schools) -->
| |
| <div id="content-schools" class="tab-content-block hidden p-4 border border-gray-100 rounded-xl bg-gray-50">
| |
| <h2 class="text-2xl font-bold text-blue-700 mb-3">നിരീക്ഷണത്തിലുള്ള വിദ്യാലയങ്ങളുടെ പട്ടിക</h2>
| |
| <ul class="list-disc list-inside space-y-1 text-gray-700">
| |
| <li>ഹൈസ്കൂൾ വിഭാഗം: സ്കൂൾവിക്കി പേജുകളുടെ സ്ഥിരമായ അപ്ഡേറ്റ് ഉറപ്പാക്കുന്നു.</li>
| |
| <li>എൽ.പി. വിഭാഗം: പുതിയ ഐ.ടി. സാധ്യതകൾ കണ്ടെത്താനും നടപ്പിലാക്കാനും സഹായിക്കുന്നു.</li>
| |
| <li>പൂർവവിദ്യാർത്ഥി കൂട്ടായ്മകൾ: പേജുകൾ സംയോജിപ്പിക്കുന്നതിൽ സഹായം നൽകുന്നു.</li>
| |
| </ul>
| |
| </div>
| |
| | |
| <!-- Content 3: ലിറ്റിൽ കൈറ്റസ് (Little Kites) -->
| |
| <div id="content-little-kites" class="tab-content-block hidden p-4 border border-gray-100 rounded-xl bg-gray-50">
| |
| <h2 class="text-2xl font-bold text-blue-700 mb-3">ലിറ്റിൽ കൈറ്റ്സ് പ്രവർത്തനങ്ങൾ</h2>
| |
| <p class="text-gray-700 leading-relaxed">
| |
| ലിറ്റിൽ കൈറ്റ്സ് യൂണിറ്റുകൾക്ക് ആവശ്യമായ സാങ്കേതിക സഹായം നൽകുന്നു. ക്ലബ്ബ് പ്രവർത്തനങ്ങൾ, വെബ്സൈറ്റ് നിർമ്മാണം, ഡിജിറ്റൽ ഉള്ളടക്ക സൃഷ്ടി എന്നിവയിൽ കുട്ടികളെ പരിശീലിപ്പിക്കുന്നു.
| |
| </p>
| |
| </div>
| |
| | |
| <!-- Content 4: പരിശീലനങ്ങൾ (Trainings/Workshops) -->
| |
| <div id="content-trainings" class="tab-content-block hidden p-4 border border-gray-100 rounded-xl bg-gray-50">
| |
| <h2 class="text-2xl font-bold text-blue-700 mb-3">പങ്കെടുത്ത പരിശീലന പരിപാടികൾ</h2>
| |
| <p class="text-gray-700 leading-relaxed">
| |
| വിവിധ വിദ്യാഭ്യാസ സോഫ്റ്റ്വെയറുകൾ, സ്കൂൾവിക്കി എഡിറ്റിംഗ്, സൈബർ സുരക്ഷ എന്നിവയുമായി ബന്ധപ്പെട്ട് ലഭിച്ച പരിശീലനങ്ങളുടെ വിവരങ്ങൾ ഈ വിഭാഗത്തിൽ ചേർക്കാം.
| |
| </p>
| |
| </div>
| |
| | |
| </div>
| |
| </div>
| |
| | |
| <script>
| |
| document.addEventListener('DOMContentLoaded', () => {
| |
| const tabNav = document.getElementById('tab-nav');
| |
| const contentBlocks = document.querySelectorAll('.tab-content-block');
| |
| const activeClass = 'is-active';
| |
| const activeStyles = 'bg-blue-600 text-white';
| |
| const inactiveStyles = 'text-gray-700 hover:bg-gray-100';
| |
| | |
| // Function to set the active tab and content
| |
| function setActiveTab(targetId) {
| |
| // 1. Deactivate all buttons and hide all content
| |
| document.querySelectorAll('.tab-button').forEach(button => {
| |
| button.classList.remove(activeClass, ...activeStyles.split(' '));
| |
| button.classList.add(...inactiveStyles.split(' '));
| |
| });
| |
| | |
| contentBlocks.forEach(content => {
| |
| content.classList.add('hidden');
| |
| });
| |
| | |
| // 2. Activate the selected button
| |
| const selectedButton = document.querySelector(`[data-tab-target="${targetId}"]`);
| |
| if (selectedButton) {
| |
| selectedButton.classList.add(activeClass, ...activeStyles.split(' '));
| |
| selectedButton.classList.remove(...inactiveStyles.split(' '));
| |
| }
| |
|
| |
| // 3. Show the target content
| |
| const targetContent = document.getElementById(targetId);
| |
| if (targetContent) {
| |
| targetContent.classList.remove('hidden');
| |
| }
| |
| }
| |
| | |
| // Add click listener to the navigation bar
| |
| tabNav.addEventListener('click', (event) => {
| |
| const button = event.target.closest('.tab-button');
| |
| if (button) {
| |
| const targetId = button.getAttribute('data-tab-target');
| |
| if (targetId) {
| |
| setActiveTab(targetId);
| |
| }
| |
| }
| |
| });
| |
| | |
| // Ensure the initial active state is applied correctly on load
| |
| const initialActiveButton = document.querySelector('.tab-button.is-active');
| |
| if (initialActiveButton) {
| |
| setActiveTab(initialActiveButton.getAttribute('data-tab-target'));
| |
| }
| |
| });
| |
| </script>
| |
| | |
| </body>
| |
| </html>
| |
