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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<style> .rc-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 1.25rem; max-width: 720px; margin: 0 auto 16px auto;...')
 
m
Linha 1: Linha 1:
<style>
<style>
  .rc-card {
    .rc-card {
    background: #fff;
        background: #fff;
    border: 1px solid #e0e0e0;
        border: 1px solid #e0e0e0;
    border-radius: 12px;
        border-radius: 12px;
    padding: 1.25rem;
        padding: 1.25rem;
    max-width: 720px;
        max-width: 720px;
    margin: 0 auto 16px auto;
        margin: 0 auto 16px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a1a1a;
        color: #1a1a1a;
    box-sizing: border-box;
        box-sizing: border-box;
  }
    }


  .rc-header {
    .rc-header {
    display: flex;
        display: flex;
    align-items: center;
        align-items: center;
    gap: 14px;
        gap: 14px;
    margin-bottom: 16px;
        margin-bottom: 16px;
  }
    }


  .rc-sprite-wrap {
    .rc-sprite-wrap {
    width: 56px;
        width: 56px;
    height: 56px;
        height: 56px;
    border-radius: 8px;
        border-radius: 8px;
    background: #f5f5f5;
        background: #f5f5f5;
    display: flex;
        display: flex;
    align-items: center;
        align-items: center;
    justify-content: center;
        justify-content: center;
    flex-shrink: 0;
        flex-shrink: 0;
  }
    }


  .rc-sprite-wrap img {
    .rc-sprite-wrap img {
    width: 32px;
        width: 32px;
    height: 32px;
        height: 32px;
    image-rendering: pixelated;
        image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
        image-rendering: -moz-crisp-edges;
  }
    }


  .rc-title {
    .rc-title {
    font-weight: 600;
        font-weight: 600;
    font-size: 16px;
        font-size: 16px;
    margin: 0;
        margin: 0;
    color: #1a1a1a;
        color: #1a1a1a;
  }
    }


  .rc-desc {
    .rc-desc {
    font-size: 13px;
        font-size: 13px;
    color: #666;
        color: #666;
    margin: 4px 0 0 0;
        margin: 4px 0 0 0;
    line-height: 1.4;
        line-height: 1.4;
  }
    }


  .rc-platforms {
    .rc-platforms {
    display: grid;
        display: grid;
    grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    gap: 12px;
        gap: 12px;
  }
    }


  .rc-platform {
    .rc-platform {
    background: #f8f8f8;
        background: #f8f8f8;
    border-radius: 8px;
        border-radius: 8px;
    padding: 12px 14px;
        padding: 12px 14px;
  }
    }


  .rc-platform-label {
    .rc-platform-label {
    display: flex;
        display: flex;
    align-items: center;
        align-items: center;
    gap: 6px;
        gap: 6px;
    margin: 0 0 8px 0;
        margin: 0 0 8px 0;
    font-size: 12px;
        font-size: 12px;
    font-weight: 600;
        font-weight: 600;
    letter-spacing: 0.3px;
        letter-spacing: 0.3px;
  }
    }


  .rc-platform-label.yt {
    .rc-platform-label.yt {
    color: #cc0000;
        color: #cc0000;
  }
    }


  .rc-platform-label.tw {
    .rc-platform-label.tw {
    color: #9146ff;
        color: #9146ff;
  }
    }


  .rc-platform-label svg {
    .rc-platform-label svg {
    flex-shrink: 0;
        flex-shrink: 0;
  }
    }


  .rc-reqs {
    .rc-reqs {
    font-size: 13px;
        font-size: 13px;
    color: #333;
        color: #333;
    margin: 0;
        margin: 0;
    line-height: 1.7;
        line-height: 1.7;
  }
    }


  .rc-note {
    .rc-note {
    font-size: 12px;
        font-size: 12px;
    color: #888;
        color: #888;
    margin: 4px 0 0 0;
        margin: 4px 0 0 0;
    line-height: 1.4;
        line-height: 1.4;
  }
    }


  .rc-showcase {
    .rc-showcase {
    margin-top: 16px;
        margin-top: 16px;
    display: grid;
        display: grid;
    grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    gap: 12px;
        gap: 12px;
  }
    }


  .rc-showcase-img {
    .rc-showcase-img {
    width: 100%;
        width: 100%;
    border-radius: 8px;
        border-radius: 8px;
    background: #f5f5f5;
        background: #f5f5f5;
    display: block;
        display: block;
  }
    }


  .rc-showcase-caption {
    .rc-showcase-caption {
    font-size: 12px;
        font-size: 12px;
    color: #888;
        color: #888;
    text-align: center;
        text-align: center;
    margin: 4px 0 0 0;
        margin: 4px 0 0 0;
  }
    }


  @media (max-width: 520px) {
    @media (max-width: 520px) {
    .rc-platforms {
        .rc-platforms {
      grid-template-columns: 1fr;
            grid-template-columns: 1fr;
        }
     }
     }
  }
</style>
</style>


<div class="rc-card">
<div class="rc-card">
  <div class="rc-header">
    <div class="rc-header">
    <div class="rc-sprite-wrap">
        <div class="rc-sprite-wrap">
      <img src="https://wiki.gla.com.br/index.php/Arquivo:{{{sprite}}}" alt="{{{title}}}">
            <img src="https://wiki.gla.com.br/index.php/Arquivo:{$sprite|escape:'html'}" alt="{$title|escape:'html'}">
        </div>
        <div>
            <p class="rc-title">{$title|escape:'html'}</p>
            <p class="rc-desc">{$desc|escape:'html'}</p>
        </div>
     </div>
     </div>
     <div>
 
      <p class="rc-title">{{{title}}}</p>
     <div class="rc-platforms">
      <p class="rc-desc">{{{desc}}}</p>
        <div class="rc-platform">
            <p class="rc-platform-label yt">
                <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M17.6 2.03C17.39 1.24 16.77 0.62 15.98 0.4C14.56 0 9 0 9 0S3.44 0 2.02 0.4C1.23 0.62 0.61 1.24 0.4 2.03C0 3.45 0 6.38 0 6.38S0 9.31 0.4 10.73C0.61 11.52 1.23 12.14 2.02 12.36C3.44 12.76 9 12.76 9 12.76S14.56 12.76 15.98 12.36C16.77 12.14 17.39 11.52 17.6 10.73C18 9.31 18 6.38 18 6.38S18 3.45 17.6 2.03Z"
                        fill="#CC0000" />
                    <path d="M7.2 9.1L11.88 6.38L7.2 3.66V9.1Z" fill="white" />
                </svg>
                YouTube
            </p>
            <p class="rc-reqs">{$yt_req|escape:'html'}</p>
            {if $yt_note}<p class="rc-note">{$yt_note|escape:'html'}</p>{/if}
        </div>
        <div class="rc-platform">
            <p class="rc-platform-label tw">
                <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M1.18 0L0 3.39V14.84H4.06V17H6.12L8.17 14.84H11.29L16 10.02V0H1.18ZM2.35 1.41H14.82V9.32L12.47 11.73H8.76L6.71 13.89V11.73H2.35V1.41ZM6.71 4.24V8.47H8.18V4.24H6.71ZM10.71 4.24V8.47H12.18V4.24H10.71Z"
                        fill="#9146FF" />
                </svg>
                Twitch
            </p>
            <p class="rc-reqs">{$tw_req|escape:'html'}</p>
            {if $tw_note}<p class="rc-note">{$tw_note|escape:'html'}</p>{/if}
        </div>
     </div>
     </div>
  </div>


  <div class="rc-platforms">
    {if $gif}
    <div class="rc-platform">
    <div class="rc-showcase">
      <p class="rc-platform-label yt">
        <div>
        <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <img class="rc-showcase-img" src="https://wiki.gla.com.br/index.php/Arquivo:{$gif|escape:'html'}"
          <path
                alt="Preview">
            d="M17.6 2.03C17.39 1.24 16.77 0.62 15.98 0.4C14.56 0 9 0 9 0S3.44 0 2.02 0.4C1.23 0.62 0.61 1.24 0.4 2.03C0 3.45 0 6.38 0 6.38S0 9.31 0.4 10.73C0.61 11.52 1.23 12.14 2.02 12.36C3.44 12.76 9 12.76 9 12.76S14.56 12.76 15.98 12.36C16.77 12.14 17.39 11.52 17.6 10.73C18 9.31 18 6.38 18 6.38S18 3.45 17.6 2.03Z"
            {if $gif_caption}<p class="rc-showcase-caption">{$gif_caption|escape:'html'}</p>{/if}
            fill="#CC0000" />
         </div>
          <path d="M7.2 9.1L11.88 6.38L7.2 3.66V9.1Z" fill="white" />
        </svg>
        YouTube
      </p>
      <p class="rc-reqs">{{{yt_req}}}</p>
      <!--{{{yt_note|}}}-->
    </div>
    <div class="rc-platform">
      <p class="rc-platform-label tw">
        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1.18 0L0 3.39V14.84H4.06V17H6.12L8.17 14.84H11.29L16 10.02V0H1.18ZM2.35 1.41H14.82V9.32L12.47 11.73H8.76L6.71 13.89V11.73H2.35V1.41ZM6.71 4.24V8.47H8.18V4.24H6.71ZM10.71 4.24V8.47H12.18V4.24H10.71Z"
            fill="#9146FF" />
        </svg>
         Twitch
      </p>
      <p class="rc-reqs">{{{tw_req}}}</p>
      <!--{{{tw_note|}}}-->
     </div>
     </div>
  </div>
    {/if}
 
  <!--rc-gif-placeholder-->
</div>
</div>


<script>
<script>
  (function () {
    (function () {
    function initRewardCards() {
        function initRewardCards() {
      // Handle optional notes
            // Fix image paths - convert wiki Arquivo: paths to actual file paths
      document.querySelectorAll('.rc-platform').forEach(function (el) {
            document.querySelectorAll('.rc-card img').forEach(function (img) {
        var html = el.innerHTML;
                var src = img.getAttribute('src');
        // Find yt_note or tw_note comments and replace with actual note element if content exists
                if (src && src.indexOf('Arquivo:') !== -1) {
        html = html.replace(/<!--(.+?)-->/, function(match, content) {
                    var filename = src.split('Arquivo:').pop();
          content = content.trim();
                    img.setAttribute('src', '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename));
        if (content && content !== '' && !content.startsWith('{{{')) {
                }
          return '<p class="rc-note">' + content + '</p>';
            });
         }
         }
        return '';
      });
      el.innerHTML = html;
    });


    // Handle optional gif showcase
        if (document.readyState === 'loading') {
    document.querySelectorAll('.rc-card').forEach(function (card) {
            document.addEventListener('DOMContentLoaded', initRewardCards);
      var html = card.innerHTML;
        } else {
      html = html.replace(/<!--rc-gif-placeholder-->/, function () {
            initRewardCards();
        var gif = '{{{gif|}}}';
        if (gif && gif !== '' && !gif.startsWith('{{{')) {
          var caption = '{{{gif_caption|}}}';
          var captionHtml = '';
          if (caption && caption !== '' && !caption.startsWith('{{{')) {
            captionHtml = '<p class="rc-showcase-caption">' + caption + '</p>';
          }
          var imgUrl = 'https://wiki.gla.com.br/index.php/Arquivo:' + gif;
          return '<div class="rc-showcase"><div><img class="rc-showcase-img" src="' + imgUrl + '" alt="Preview">' + captionHtml + '</div></div>';
         }
         }
        return '';
     })();
      });
      card.innerHTML = html;
     });
 
    // Fix image paths - convert wiki Arquivo: paths to actual file paths
    document.querySelectorAll('.rc-card img').forEach(function (img) {
      var src = img.getAttribute('src');
      if (src && src.indexOf('Arquivo:') !== -1) {
        var filename = src.split('Arquivo:').pop();
        img.setAttribute('src', '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename));
      }
    });
  }
 
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initRewardCards);
  } else {
    initRewardCards();
  }
}) ();
</script>
</script>

Edição das 13h26min de 14 de março de 2026

<style>

   .rc-card {
       background: #fff;
       border: 1px solid #e0e0e0;
       border-radius: 12px;
       padding: 1.25rem;
       max-width: 720px;
       margin: 0 auto 16px auto;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color: #1a1a1a;
       box-sizing: border-box;
   }
   .rc-header {
       display: flex;
       align-items: center;
       gap: 14px;
       margin-bottom: 16px;
   }
   .rc-sprite-wrap {
       width: 56px;
       height: 56px;
       border-radius: 8px;
       background: #f5f5f5;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   .rc-sprite-wrap img {
       width: 32px;
       height: 32px;
       image-rendering: pixelated;
       image-rendering: -moz-crisp-edges;
   }
   .rc-title {
       font-weight: 600;
       font-size: 16px;
       margin: 0;
       color: #1a1a1a;
   }
   .rc-desc {
       font-size: 13px;
       color: #666;
       margin: 4px 0 0 0;
       line-height: 1.4;
   }
   .rc-platforms {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
   }
   .rc-platform {
       background: #f8f8f8;
       border-radius: 8px;
       padding: 12px 14px;
   }
   .rc-platform-label {
       display: flex;
       align-items: center;
       gap: 6px;
       margin: 0 0 8px 0;
       font-size: 12px;
       font-weight: 600;
       letter-spacing: 0.3px;
   }
   .rc-platform-label.yt {
       color: #cc0000;
   }
   .rc-platform-label.tw {
       color: #9146ff;
   }
   .rc-platform-label svg {
       flex-shrink: 0;
   }
   .rc-reqs {
       font-size: 13px;
       color: #333;
       margin: 0;
       line-height: 1.7;
   }
   .rc-note {
       font-size: 12px;
       color: #888;
       margin: 4px 0 0 0;
       line-height: 1.4;
   }
   .rc-showcase {
       margin-top: 16px;
       display: grid;
       grid-template-columns: 1fr;
       gap: 12px;
   }
   .rc-showcase-img {
       width: 100%;
       border-radius: 8px;
       background: #f5f5f5;
       display: block;
   }
   .rc-showcase-caption {
       font-size: 12px;
       color: #888;
       text-align: center;
       margin: 4px 0 0 0;
   }
   @media (max-width: 520px) {
       .rc-platforms {
           grid-template-columns: 1fr;
       }
   }

</style>

{$title|escape:'html'}

{$desc|escape:'html'}

<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.6 2.03C17.39 1.24 16.77 0.62 15.98 0.4C14.56 0 9 0 9 0S3.44 0 2.02 0.4C1.23 0.62 0.61 1.24 0.4 2.03C0 3.45 0 6.38 0 6.38S0 9.31 0.4 10.73C0.61 11.52 1.23 12.14 2.02 12.36C3.44 12.76 9 12.76 9 12.76S14.56 12.76 15.98 12.36C16.77 12.14 17.39 11.52 17.6 10.73C18 9.31 18 6.38 18 6.38S18 3.45 17.6 2.03Z" fill="#CC0000" /> <path d="M7.2 9.1L11.88 6.38L7.2 3.66V9.1Z" fill="white" /> </svg> YouTube

{$yt_req|escape:'html'}

{if $yt_note}

{$yt_note|escape:'html'}

{/if}

<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.18 0L0 3.39V14.84H4.06V17H6.12L8.17 14.84H11.29L16 10.02V0H1.18ZM2.35 1.41H14.82V9.32L12.47 11.73H8.76L6.71 13.89V11.73H2.35V1.41ZM6.71 4.24V8.47H8.18V4.24H6.71ZM10.71 4.24V8.47H12.18V4.24H10.71Z" fill="#9146FF" /> </svg> Twitch

{$tw_req|escape:'html'}

{if $tw_note}

{$tw_note|escape:'html'}

{/if}
   {if $gif}
           <img class="rc-showcase-img" src="https://wiki.gla.com.br/index.php/Arquivo:{$gif%7Cescape:'html'}"
               alt="Preview">
{if $gif_caption}

{$gif_caption|escape:'html'}

{/if}
   {/if}

<script>

   (function () {
       function initRewardCards() {
           // Fix image paths - convert wiki Arquivo: paths to actual file paths
           document.querySelectorAll('.rc-card img').forEach(function (img) {
               var src = img.getAttribute('src');
               if (src && src.indexOf('Arquivo:') !== -1) {
                   var filename = src.split('Arquivo:').pop();
                   img.setAttribute('src', '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename));
               }
           });
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', initRewardCards);
       } else {
           initRewardCards();
       }
   })();

</script>