|
|
| Linha 1: |
Linha 1: |
| <div class="habilidades-container">
| | {{#invoke:Gb|bossInfo |
| <div class="habilidades-botoes">
| | | img = {{{img|}}} |
| <button onclick="mostrarHabilidade(1)">1</button>
| | | nome = {{{nome|}}} |
| <button onclick="mostrarHabilidade(2)">2</button>
| | | frase = {{{frase|}}} |
| <button onclick="mostrarHabilidade(3)">3</button>
| | | hp = {{{hp|}}} |
| <button onclick="mostrarHabilidade(4)">4</button>
| | | exp = {{{exp|}}} |
| <button onclick="mostrarHabilidade(5)">5</button>
| | | nivel = {{{nivel|}}} |
| <button onclick="mostrarHabilidade(6)">6</button>
| | | necessario = {{{necessario|}}} |
| </div> | | | conteudo = {{{conteudo|}}} |
|
| |
|
| <h2 id="habilidade-titulo">{{{titulo1}}}</h2>
| | }} |
| | |
| <div id="habilidade-descricao">
| |
| {{{descricao1}}}
| |
| </div>
| |
| | |
| <div class="habilidade-video">
| |
| <iframe id="habilidade-video"
| |
| src="{{{video1}}}"
| |
| frameborder="0"
| |
| allowfullscreen>
| |
| </iframe>
| |
| </div>
| |
| </div>
| |
| | |
| <script>
| |
| const habilidades = {
| |
| 1: {
| |
| titulo: `{{{titulo1}}}`,
| |
| descricao: `{{{descricao1}}}`,
| |
| video: `{{{video1}}}`
| |
| },
| |
| 2: {
| |
| titulo: `{{{titulo2}}}`,
| |
| descricao: `{{{descricao2}}}`,
| |
| video: `{{{video2}}}`
| |
| },
| |
| 3: {
| |
| titulo: `{{{titulo3}}}`,
| |
| descricao: `{{{descricao3}}}`,
| |
| video: `{{{video3}}}`
| |
| },
| |
| 4: {
| |
| titulo: `{{{titulo4}}}`,
| |
| descricao: `{{{descricao4}}}`,
| |
| video: `{{{video4}}}`
| |
| },
| |
| 5: {
| |
| titulo: `{{{titulo5}}}`,
| |
| descricao: `{{{descricao5}}}`,
| |
| video: `{{{video5}}}`
| |
| },
| |
| 6: {
| |
| titulo: `{{{titulo6}}}`,
| |
| descricao: `{{{descricao6}}}`,
| |
| video: `{{{video6}}}`
| |
| }
| |
| };
| |
| | |
| function mostrarHabilidade(num) {
| |
| document.getElementById('habilidade-titulo').innerHTML = habilidades[num].titulo;
| |
| document.getElementById('habilidade-descricao').innerHTML = habilidades[num].descricao;
| |
| document.getElementById('habilidade-video').src = habilidades[num].video;
| |
| }
| |
| </script>
| |
| | |
| <style>
| |
| .habilidades-container {
| |
| max-width: 900px;
| |
| margin: auto;
| |
| text-align: center;
| |
| padding: 20px;
| |
| }
| |
| | |
| .habilidades-botoes {
| |
| display: flex;
| |
| justify-content: center;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| margin-bottom: 20px;
| |
| }
| |
| | |
| .habilidades-botoes button {
| |
| width: 45px;
| |
| height: 45px;
| |
| border: none;
| |
| background: #1c1c1c;
| |
| color: #fff;
| |
| font-size: 18px;
| |
| font-weight: bold;
| |
| border-radius: 6px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .habilidades-botoes button:hover {
| |
| background: #444;
| |
| }
| |
| | |
| #habilidade-descricao {
| |
| max-width: 700px;
| |
| margin: 10px auto 20px;
| |
| font-size: 16px;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| .habilidade-video {
| |
| position: relative;
| |
| padding-bottom: 56.25%;
| |
| height: 0;
| |
| overflow: hidden;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .habilidade-video iframe {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
| | |
| @media (max-width: 600px) {
| |
| .habilidades-botoes button {
| |
| width: 40px;
| |
| height: 40px;
| |
| font-size: 16px;
| |
| }
| |
| }
| |
| </style>
| |
