Widget:Teste

<script> (function() {

   // Seletores das skills
   const skillIcons = document.querySelectorAll('.character-skillicon');
   const descDiv = document.querySelector('.character-skilldesc');
   const videoDiv = document.querySelector('.character-skillvideo');

   function showSkill(el) {
       descDiv.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 playsinline></video>';
       } else {

videoDiv.innerHTML = '

SEM VÍDEO

';

       }
   }

   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>

<style> .character-box {

   max-width: 1080px;
   margin: 36px auto 0 auto;
   font-family: 'Noto Sans', Arial, sans-serif;
   color: #222;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 2px 8px rgba(80,80,80,0.07);
   padding: 0 20px 28px 20px;
   box-sizing: border-box;

}

.character-header {

   display: flex;
   align-items: flex-start;
   gap: 18px;
   margin-bottom: 12px;
   padding-top: 18px;

}

.character-icon {

   width: 94px;
   height: 94px;
   border-radius: 10px;
   object-fit: cover;
   border: 2px solid #e2e8f0;
   background: #fff;

}

.character-header-main {

   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 3px;

}

.character-name {

   font-size: 2.6em;
   font-weight: 900;
   margin: 0 0 2px 0;
   letter-spacing: 0.01em;
   line-height: 1;

}

.character-classes {

   display: flex;
   align-items: center;
   gap: 11px;
   margin-bottom: 3px;
   flex-wrap: wrap;

}

.character-class {

   display: inline-block;
   font-size: 1em;
   font-weight: 600;
   background: #f5f6fa;
   border-radius: 5px;
   padding: 3px 13px;
   border: 1.1px solid #d8e0f0;
   color: #184e73;
   margin-right: 2px;

}

.character-desc {

   font-size: 1.09em;
   margin: 10px 0 0 0;
   color: #454545;
   line-height: 1.35;
   font-weight: 500;
   background: #f0f7fb;
   border-radius: 6px;
   padding: 7px 12px;
   display: inline-block;

}

.character-skillbar {

   display: flex;
   gap: 13px;
   margin: 30px 0 15px 0;
   overflow-x: auto;
   padding-bottom: 7px;
   border-bottom: 2.5px solid #e5e7eb;
   scrollbar-width: thin;

}

.character-skillicon {

   width: 49px;
   height: 49px;
   border-radius: 8px;
   border: 1.7px solid #e5e7eb;
   background: #f9f9f9;
   cursor: pointer;
   transition: border-color 0.14s, box-shadow 0.15s;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   flex-shrink: 0;
   box-shadow: 0 0 0 0 #fff0;

} .character-skillicon.active, .character-skillicon:focus, .character-skillicon:hover {

   border-color: #3ec8ff;
   box-shadow: 0 0 0 2px #c8eafd;

}

.character-skillicon img {

   width: 43px;
   height: 43px;
   border-radius: 6px;
   object-fit: cover;
   box-shadow: 0 1px 5px #0001;
   pointer-events: none;

}

.character-content {

   display: flex;
   gap: 34px;
   align-items: flex-start;
   min-height: 270px;
   margin-top: 15px;

}

.character-skilldesc {

   flex: 1.3;
   background: #f8fafb;
   border-radius: 10px;
   padding: 16px 18px 12px 18px;
   min-width: 240px;
   min-height: 155px;
   color: #223;
   box-shadow: 0 0 0 1px #e3e7eb;

}

.character-skilldesc h3 {

   font-size: 1.22em;
   font-weight: 700;
   margin: 0 0 6px 0;
   color: #2175c2;

}

.character-skilldesc .character-attr {

   font-size: 1.01em;
   margin-bottom: 7px;
   color: #2a72af;
   font-weight: 600;

}

.character-skilldesc .character-skilltext {

   font-size: 1.09em;
   margin-top: 7px;
   color: #21262b;
   line-height: 1.36;

}

.character-skillvideo {

   flex: 1;
   min-width: 220px;
   max-width: 390px;
   min-height: 115px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   background: #fafcff;
   border-radius: 10px;
   box-shadow: 0 0 0 1px #e3e7eb;
   padding: 12px;

}

.character-skillvideo video {

   width: 100%;
   max-width: 370px;
   border-radius: 7px;
   background: #222;

}

@media (max-width: 860px) {

   .character-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 13px;
   }
   .character-content {
       flex-direction: column;
       gap: 18px;
   }
   .character-skillvideo {
       max-width: 100%;
   }
   .character-name {
       font-size: 2.1em;
   }

}

@media (max-width: 570px) {

   .character-box {
       padding: 0 5px 18px 5px;
   }
   .character-skillbar {
       gap: 8px;
   }
   .character-header {
       gap: 7px;
   }
   .character-skilldesc {
       padding: 9px 6px 7px 9px;
   }
   .character-name {
       font-size: 1.5em;
   }

} </style>