Widget:Teste

<style> .character-box {

   max-width: 720px; margin: 24px auto; border: 2px solid #222; border-radius: 12px;
   background: #1e2327; box-shadow: 0 2px 12px #0007; padding: 24px 32px; color: #f3f3f3;
   font-family: 'Noto Sans', Arial, sans-serif;

} .character-header { display: flex; align-items: center; gap: 20px; } .character-img { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; border: 2px solid #555; background: #111; box-shadow: 0 2px 6px #0007; } .character-header-main { flex: 1; } .character-name { font-size: 2.3em; font-weight: 900; margin: 0 0 2px 0; } .character-tier { font-size: 1.1em; color: #85d6ff; font-weight: 700; margin-bottom: 6px; } .character-class { font-size: 1em; color: #b8bac1; margin-bottom: 6px; } .character-desc { font-size: 1.05em; margin-bottom: 16px; color: #f5e9c6; background: #24282d; border-radius: 6px; padding: 7px 14px; } .tabs-bar { display: flex; gap: 8px; margin-bottom: 20px; } .tab-btn { padding: 7px 24px; border: none; border-radius: 6px 6px 0 0; background: #23272d; color: #fff; font-size: 1.15em; font-weight: 600; cursor: pointer; transition: background 0.15s; } .tab-btn.active { background: #4a92e6; color: #fff; } .tab-content { display: none; padding: 18px 0; border-top: 2px solid #333; } .tab-content.active { display: flex; gap: 32px; } .skills-bar { display: flex; gap: 10px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 6px; } .skill-icon { width: 56px; height: 56px; background: #202429; border: 2px solid #363b45; border-radius: 8px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; } .skill-icon.active, .skill-icon:hover { border-color: #71e4fa; box-shadow: 0 0 8px #58e1ff60; } .skill-detail { flex: 1.3; background: #23272d; border-radius: 8px; padding: 16px 18px; margin-bottom: 8px; min-height: 180px; } .skill-detail h3 { font-size: 1.4em; margin: 0 0 10px 0; color: #58bfff; } .skill-detail p { margin: 7px 0 0 0; font-size: 1.05em; } .skill-video { flex: 1; display: flex; align-items: center; justify-content: center; background: #181a1d; border-radius: 8px; padding: 8px; min-width: 220px; max-width: 350px; min-height: 120px; } .skin-bar { display: flex; gap: 18px; margin: 8px 0; overflow-x: auto; padding-bottom: 10px; } .skin-card { min-width: 110px; max-width: 140px; border-radius: 8px; background: #24282d; border: 2px solid #474e58; padding: 4px; text-align: center; display: flex; flex-direction: column; align-items: center; } .skin-banner { width: 100%; height: 54px; border-radius: 5px; object-fit: cover; margin-bottom: 5px; background: #111; box-shadow: 0 1px 5px #0005; } .skin-card img { border-radius: 5px; max-width: 98px; max-height: 92px; background: #232323; } .skin-card[title] { cursor: pointer; } @media (max-width: 650px) {

   .character-box { padding: 8px; }
   .character-header { flex-direction: column; gap: 8px; }
   .tab-content.active { flex-direction: column; gap: 12px; }
   .skin-bar { gap: 8px; }

} </style> <script> (function() {

   // Tabs
   var tabs = document.querySelectorAll('.tab-btn');
   var contents = document.querySelectorAll('.tab-content');
   tabs.forEach(function(tab){
       tab.addEventListener('click', function(){
           tabs.forEach(t => t.classList.remove('active'));
           contents.forEach(c => c.classList.remove('active'));
           tab.classList.add('active');
           document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
       });
   });

   // Skills
   var skillIcons = document.querySelectorAll('.skills-bar .skill-icon');
   var details = document.querySelector('.skill-detail');
   var videoDiv = document.querySelector('.skill-video');
   function showSkill(el){
       details.innerHTML =

'

' + (el.dataset.nome || ) + '

' + (el.dataset.atr ? '

Atributos: ' + el.dataset.atr + '

' : ) + '

' + (el.dataset.desc || ) + '

';

       if(el.dataset.video){
           videoDiv.innerHTML = '<video src="' + el.dataset.video + '" controls width="300" style="margin-top:10px"></video>';
       } else {
           videoDiv.innerHTML = ;
       }
   }
   skillIcons.forEach(function(el, idx){
       el.addEventListener('click', function(){
           skillIcons.forEach(e => e.classList.remove('active'));
           el.classList.add('active');
           showSkill(el);
       });
       if(idx === 0) {
           el.classList.add('active');
           showSkill(el);
       }
   });

})(); </script>