Schoolwiki:എഴുത്തുകളരി/geo

<!DOCTYPE html> <html lang="en"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom User Page Tabs</title>
   <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>

       <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">
           👤 എന്നെക്കുറിച്ച്
       </button>
       
       <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">
           🏫 നിരീക്ഷിക്കുന്ന വിദ്യാലയങ്ങൾ
       </button>
       
       <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">
           🪁 ലിറ്റിൽ കൈറ്റസ്
       </button>
       
       <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">
           📝 പരിശീലനങ്ങൾ
       </button>

വിവരങ്ങൾ: User:Geokurian

സ്കൂൾവിക്കിയിലെ എൻ്റെ പ്രവർത്തനങ്ങളെക്കുറിച്ചുള്ള വിവരങ്ങളാണ് ഈ പേജിൽ നൽകിയിരിക്കുന്നത്. പ്രാദേശിക ചരിത്രരചന, വിദ്യാലയങ്ങളുടെ വിവരങ്ങൾ കൃത്യമാക്കൽ, ഐ.ടി. അധിഷ്ഠിത വിദ്യാഭ്യാസത്തിനുള്ള പിന്തുണ നൽകൽ എന്നിവയിലാണ് ഞാൻ പ്രധാനമായും ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്.

   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>

Schoolwiki:എഴുത്തുകളരി/geo

ഉള്ളടക്കം

വിവരങ്ങൾ: User:Geokurian

നിരീക്ഷണത്തിലുള്ള വിദ്യാലയങ്ങളുടെ പട്ടിക

ലിറ്റിൽ കൈറ്റ്സ് പ്രവർത്തനങ്ങൾ

പങ്കെടുത്ത പരിശീലന പരിപാടികൾ