Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(548 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="language-switch">
  <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
  <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
  <a data-lang="en"><img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24"></a>
  <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
</div>
<style>
.language-switch {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  justify-content: center;
}
.language-switch img {
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.language-switch img:hover {
  transform: scale(1.1);
  border-color: #333;
}
.language-switch img.active {
  border-color: #000;
}
</style>
<script>
(function () {
  let currentLang = 'pt'; // idioma por defecto


  const langSwitch = document.querySelector('.language-switch');
  if (langSwitch) {
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
      btn.addEventListener('click', () => {
        currentLang = btn.dataset.lang;
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
        btn.querySelector('img').classList.add('active');


<div>
        const active = document.querySelector('.skill-icon.active');
    <h2>Calculadora</h2>
        if (active) active.click();
    <input type="text" id="display" disabled />
      });
    <br>
     });
    <button onclick="addToDisplay('1')">1</button>
 
    <button onclick="addToDisplay('2')">2</button>
     // Activar la bandera por defecto
    <button onclick="addToDisplay('3')">3</button>
     const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
    <button onclick="addToDisplay('+')">+</button>
     if (defaultBtn) defaultBtn.classList.add('active');
     <br>
  }
    <button onclick="addToDisplay('4')">4</button>
     <button onclick="addToDisplay('5')">5</button>
    <button onclick="addToDisplay('6')">6</button>
     <button onclick="addToDisplay('-')">-</button>
    <br>
    <button onclick="addToDisplay('7')">7</button>
    <button onclick="addToDisplay('8')">8</button>
     <button onclick="addToDisplay('9')">9</button>
    <button onclick="addToDisplay('*')">*</button>
    <br>
    <button onclick="addToDisplay('0')">0</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="calculateResult()">=</button>
    <button onclick="addToDisplay('/')">/</button>
</div>


<script>
  const oldClicks = document.querySelectorAll('.skill-icon');
     function addToDisplay(value) {
  oldClicks.forEach(el => {
        document.getElementById('display').value += value;
     el.addEventListener('click', () => {
    }
      const name = el.dataset.nome || '';
      const rawDesc = el.dataset.desc || '';
      let descText = '';


    function clearDisplay() {
      try {
         document.getElementById('display').value = '';
         const obj = JSON.parse(rawDesc);
    }
        descText = obj[currentLang] || obj['pt'] || '';
      } catch (e) {
        descText = rawDesc; // fallback si no es un JSON
      }


    function calculateResult() {
      const attrs = el.dataset.atr || '';
        let result = eval(document.getElementById('display').value);
      const descBox = document.querySelector('.desc-box');
         document.getElementById('display').value = result;
      if (descBox) {
     }
         descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
      }
     });
  });
})();
</script>
</script>

Edição atual tal como às 06h05min de 31 de agosto de 2025

 <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
 <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
 <a data-lang="en"><img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24"></a>
 <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>

<style> .language-switch { 

 display: flex;
 gap: 6px;
 margin: 8px 0;
 justify-content: center;

} .language-switch img { 

 border: 1px solid #ccc;
 border-radius: 6px;
 cursor: pointer;
 transition: transform 0.2s ease, border-color 0.2s ease;

} .language-switch img:hover { 

 transform: scale(1.1);
 border-color: #333;

} .language-switch img.active { 

 border-color: #000;

} </style>

<script> (function () { 

 let currentLang = 'pt'; // idioma por defecto

 const langSwitch = document.querySelector('.language-switch');
 if (langSwitch) {
   langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
     btn.addEventListener('click', () => {
       currentLang = btn.dataset.lang;
       langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
       btn.querySelector('img').classList.add('active');

       const active = document.querySelector('.skill-icon.active');
       if (active) active.click();
     });
   });

   // Activar la bandera por defecto
   const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
   if (defaultBtn) defaultBtn.classList.add('active');
 }

 const oldClicks = document.querySelectorAll('.skill-icon');
 oldClicks.forEach(el => {
   el.addEventListener('click', () => {
     const name = el.dataset.nome || ;
     const rawDesc = el.dataset.desc || ;
     let descText = ;

     try {
       const obj = JSON.parse(rawDesc);
       descText = obj[currentLang] || obj['pt'] || ;
     } catch (e) {
       descText = rawDesc; // fallback si no es un JSON
     }

     const attrs = el.dataset.atr || ;
     const descBox = document.querySelector('.desc-box');
     if (descBox) {

descBox.innerHTML = `

${name}

${renderAttributes(attrs)}

${descText}

`; 

     }
   });
 });

})(); </script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=38373”