Mudanças entre as edições de "Widget:CreatorReward"
(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 { | |||
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> | </style> | ||
<div class="rc-card"> | <div class="rc-card"> | ||
<div class="rc-header"> | |||
<div class="rc-sprite-wrap"> | |||
<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> | |||
<div class="rc-platforms"> | |||
<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> | ||
{if $gif} | |||
<div class="rc-showcase"> | |||
<div> | |||
<img class="rc-showcase-img" src="https://wiki.gla.com.br/index.php/Arquivo:{$gif|escape:'html'}" | |||
alt="Preview"> | |||
{if $gif_caption}<p class="rc-showcase-caption">{$gif_caption|escape:'html'}</p>{/if} | |||
</div> | |||
</div> | </div> | ||
{/if} | |||
</div> | </div> | ||
<script> | <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> | </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>
<img src="https://wiki.gla.com.br/index.php/Arquivo:{$sprite%7Cescape:'html'}" alt="{$title|escape:'html'}">
{$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>