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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(14 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<includeonly>
<div style="background:#22232a; border-radius:12px; padding:12px; width:330px; max-width:95%; border:2px solid #383946; font-family: 'Segoe UI', sans-serif; color:white; box-shadow:0 0 10px #19191f;">
  <div style="display:flex; flex-direction:row; align-items:flex-start; gap:12px;">
    <div style="flex-shrink:0;">
      <div style="position:relative; width:94px; height:132px;">
        <img src="{{{imagem|https://via.placeholder.com/94x132?text=Criatura}}}" style="width:94px; height:132px; border-radius:8px; object-fit:cover; border: 2px solid #383946;" alt="Imagem da criatura">
        <div style="position:absolute; top:6px; right:6px;">
          {{#if:{{{favorita|}}}|<span style="font-size:20px; color:#e14658;">&#10084;</span>|}}
        </div>
      </div>
    </div>
    <div style="flex:1">
      <div style="font-size:1.2em; font-weight:bold; margin-bottom:3px;">
        {{{nome|Nome da Criatura}}}
      </div>
      <div style="font-size:0.97em; color:#aad2fa; margin-bottom:6px;">
        <span style="font-size:0.9em;">{{{tipo|Tipo}}}</span>
      </div>
      <div>
        '''Habitat:''' {{{habitat|Desconhecido}}}<br />
        '''Perigo:''' {{{perigo|?}}}
      </div>
    </div>
  </div>
  <div style="margin-top:10px;">
    <div style="background:#171821; border-radius:8px; padding:8px 10px; margin-bottom:6px;">
      <span style="font-weight:bold; color:#f7de72;">Descrição</span><br />
      <span style="font-size:0.98em;">{{{descricao|Sem descrição.}}}</span>
    </div>
    {{#if:{{{ultima_vista|}}}|
    <div style="background:#171821; border-radius:8px; padding:7px 10px; margin-bottom:2px;">
      <span style="font-weight:bold; color:#f7de72;">Última Vista:</span>
      <span style="margin-left:4px; font-size:0.97em;">
        <span style="color:gold;">&#9679;</span> {{{ultima_vista}}}
      </span>
    </div>
    |}}
    {{#if:{{{primeira_aparicao|}}}|
    <div style="background:#171821; border-radius:8px; padding:7px 10px;">
      <span style="font-weight:bold; color:#f7de72;">Primeira Aparição:</span>
      <span style="margin-left:4px; font-size:0.97em;">
        <span style="color:gold;">&#9679;</span> {{{primeira_aparicao}}}
      </span>
    </div>
    |}}
  </div>
</div>
</includeonly>
<noinclude>
<noinclude>
{{Predefinição usada para fichas de criaturas do bestiário.}}
Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.


'''Uso:'''
=== Parâmetros ===
{| class="wikitable"
! Parâmetro !! Descrição !! Padrão
|-
| normal_nivel = Nível mínimo para o modo Normal || 140
|-
| normal_equip || Equipamento recomendado (Normal) || Set +8
|-
| hard_personagem || Requisito de personagem (Hard) || personagem 4 ou 5 estrelas (Diamante)
|-
| hard_equip || Equipamento recomendado (Hard) || Set +16
|-
| normal_extra || Linha extra de requisito Normal (opcional) || (vazio)
|-
| hard_extra || Linha extra de requisito Hard (opcional) || (vazio)
|}
 
=== Exemplo de uso ===
<pre>
<pre>
{{Bestiario
{{#widget:Gb
|nome = Grifinório
| normal_nivel = 140
|imagem = Example.jpg
| normal_equip = Set +8
|tipo = Ave Lendária
| hard_personagem = personagem 4 ou 5 estrelas (Diamante)
|habitat = Montanhas rochosas
| hard_equip = Set +16
|perigo = Alto
|descricao = Um pássaro colossal com garras afiadas e bico dourado, sabe voar longas distâncias e proteger tesouros.
|ultima_vista = há 2 dias
|primeira_aparicao = Capítulo 7
|favorita = 1
}}
}}
</pre>
</pre>
 
</noinclude><includeonly><html>
'''Parâmetros:'''
<style>
* <code>nome</code> — Nome da criatura.
.rtab-wrap{font-family:sans-serif;max-width:600px;margin:0 auto}
* <code>imagem</code> — Imagem da criatura (URL ou wiki-arquivo).
.rtab-btns{display:flex;border-bottom:2px solid #a2a9b1;margin-bottom:0}
* <code>tipo</code> — Tipo/Espécie da criatura.
.rtab-btn{padding:8px 22px;font-size:14px;font-weight:bold;color:#54595d;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;display:flex;align-items:center;gap:6px}
* <code>habitat</code> — Onde é encontrada.
.rtab-btn:hover{color:#202122}
* <code>perigo</code> — Nível de perigo (baixo, médio, alto, etc.)
.rtab-btn.active{color:#202122;border-bottom-color:#3680b0}
* <code>descricao</code> — Texto descritivo.
.rtab-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:bold}
.badge-n{background:#ddeeff;color:#185FA5}
.badge-h{background:#fce8e8;color:#a32d2d}
.rtab-panel{display:none;padding:14px 2px}
.rtab-panel.active{display:block}
.rtab-title{font-size:11px;font-weight:bold;color:#72777d;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.rtab-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rtab-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#202122;line-height:1.5}
.rtab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.dot-n{background:#3680b0}
.dot-h{background:#e24b4a}
@media(max-width:480px){.rtab-btn{padding:8px 14px;font-size:13px}}
</style>
<div class="rtab-wrap">
  <div class="rtab-btns">
    <button class="rtab-btn active" onclick="rtSwitch('n',this)">
      Normal <span class="rtab-badge badge-n">Nível {{{normal_nivel|140}}}</span>
    </button>
    <button class="rtab-btn" onclick="rtSwitch('h',this)">
      Hard <span class="rtab-badge badge-h">{{{hard_equip|Set +16}}}</span>
    </button>
  </div>
  <div id="rtpanel-n" class="rtab-panel active">
    <div class="rtab-title">Requisitos — Normal</div>
    <ul class="rtab-list">
      <li><span class="rtab-dot dot-n"></span><span>Nível mínimo: <b>{{{normal_nivel|140}}}</b></span></li>
      <li><span class="rtab-dot dot-n"></span><span>Equipamento recomendado: <b>{{{normal_equip|Set +8}}}</b></span></li>
      {{{normal_extra|}}}
    </ul>
  </div>
  <div id="rtpanel-h" class="rtab-panel">
    <div class="rtab-title">Requisitos — Hard</div>
    <ul class="rtab-list">
      <li><span class="rtab-dot dot-h"></span><span>Recomendado utilizar um <b>{{{hard_personagem|personagem 4 ou 5 estrelas (Diamante)}}}</b></span></li>
      <li><span class="rtab-dot dot-h"></span><span>Equipamento recomendado: <b>{{{hard_equip|Set +16}}}</b></span></li>
      {{{hard_extra|}}}
    </ul>
  </div>
</div>
<script>
function rtSwitch(tab,btn){
  ['n','h'].forEach(function(t){
    document.getElementById('rtpanel-'+t).classList.remove('active');
  });
  document.querySelectorAll('.rtab-btn').forEach(function(b){b.classList.remove('active');});
  document.getElementById('rtpanel-'+tab).classList.add('active');
  btn.classList.add('active');
}
</script>
</html></includeonly>

Edição atual tal como às 05h06min de 17 de março de 2026

Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.

Parâmetros

Parâmetro Descrição Padrão
normal_nivel = Nível mínimo para o modo Normal 140
normal_equip Equipamento recomendado (Normal) Set +8
hard_personagem Requisito de personagem (Hard) personagem 4 ou 5 estrelas (Diamante)
hard_equip Equipamento recomendado (Hard) Set +16
normal_extra Linha extra de requisito Normal (opcional) (vazio)
hard_extra Linha extra de requisito Hard (opcional) (vazio)

Exemplo de uso

{{#widget:Gb
 | normal_nivel = 140
 | normal_equip = Set +8
 | hard_personagem = personagem 4 ou 5 estrelas (Diamante)
 | hard_equip = Set +16
}}
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Gb&oldid=45067”