Widget:CreatorReward

<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>

<script>

   (function () {
       function resolveFile(filename) {
           if (!filename) return ;
           if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
               return mw.util.getUrl('Especial:FilePath/' + filename);
           }
           return '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
       }

       function escapeHtml(str) {
           if (!str) return ;
           var div = document.createElement('div');
           div.appendChild(document.createTextNode(str));
           return div.innerHTML;
       }

       function buildCards() {
           var cards = document.querySelectorAll('.rc-card[data-title]');
           for (var i = 0; i < cards.length; i++) {
               var c = cards[i];
               var d = c.dataset;
               if (!d.title) continue;

               var html = ;

html += '

'; html += '

';

               if (d.sprite) {
                   html += '    <img src="' + resolveFile(d.sprite) + '" alt="' + escapeHtml(d.title) + '">';
               }

html += '

'; html += '

'; html += '

' + escapeHtml(d.title) + '

';

               if (d.desc) {

html += '

' + escapeHtml(d.desc) + '

';

               }

html += '

'; html += '

'; html += '

'; html += '

'; html += '

'; html += ' <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">'; html += ' <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"/>'; html += ' <path d="M7.2 9.1L11.88 6.38L7.2 3.66V9.1Z" fill="white"/>'; html += ' </svg>'; html += ' YouTube'; html += '

';

               if (d.yt_req) {

html += '

' + d.yt_req + '

';

               }
               if (d.yt_note) {

html += '

' + escapeHtml(d.yt_note) + '

';

               }

html += '

'; html += '

'; html += '

'; html += ' <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">'; html += ' <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"/>'; html += ' </svg>'; html += ' Twitch'; html += '

';

               if (d.tw_req) {

html += '

' + d.tw_req + '

';

               }
               if (d.tw_note) {

html += '

' + escapeHtml(d.tw_note) + '

';

               }

html += '

'; html += '

';

               if (d.gif) {

html += '

'; html += '

';

                   html += '    <img class="rc-showcase-img" src="' + resolveFile(d.gif) + '" alt="Preview">';
                   if (d.gif_caption) {

html += '

' + escapeHtml(d.gif_caption) + '

';

                   }

html += '

'; html += '

';

               }

               c.innerHTML = html;
           }
       }

       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', buildCards);
       } else {
           buildCards();
       }
   })();

</script>