MediaWiki:Common.js: Difference between revisions

Line 104:

/* ~~Botão~~ Voltar ao Topo */

/* Botões Flutuantes: Website + Voltar ao Topo */

var ~~backToTop~~ = $('<div id="~~back~~-to-~~top~~" style="display:none; position:fixed; bottom:40px; right:40px; ~~width~~:~~50px~~; ~~height~~:~~50px; background-color:#BFFF00; color:#000000; border-radius:50%; text-align:center; line-height:50px; font-size:24px; cursor:pointer~~; z-index:9999; ~~box~~-~~shadow~~: ~~0 4px 12px rgba(0,0,0,0.3); transition: all 0.3s ease~~;">↑</div>');

// Criamos o contentor para os dois botões

var floatingNav = $('<div id="atronia-floating-nav" style="display:none; position:fixed; bottom:40px; right:40px; display:flex; gap:12px; z-index:9999; align-items:center;"></div>');

$('~~body~~').~~append(backToTop~~);

// 1. Botão do Website (Estilo Pílula)

var siteBtn = $('<a href="https://atronia.eu/" target="_blank" style="text-decoration:none;">' +

'<div style="height:50px; padding:0 25px; background-color:#BFFF00; color:#000000; border-radius:25px; line-height:50px; font-weight:bold; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,0.3); cursor:pointer; transition:all 0.3s ease; font-family:\'Rubik\', sans-serif;">' +

'atronia.eu' +

'</div>' +

'</a>');

// 2. Botão de Topo (O que tu já tinhas, mas integrado)

var backToTop = $('<div id="back-to-top" style="width:50px; height:50px; background-color:#BFFF00; color:#000000; border-radius:50%; text-align:center; line-height:50px; font-size:24px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:all 0.3s ease;">↑</div>');

// Montagem e Inserção

floatingNav.append(siteBtn).append(backToTop);

$('body').append(floatingNav);

// Lógica de Scroll (Aparecer/Desaparecer)

$(window).scroll(function() {

if ($(window).scrollTop() > 300) {

~~backToTop~~.fadeIn();

floatingNav.fadeIn().css('display', 'flex');

} else {

~~backToTop~~.fadeOut();

floatingNav.fadeOut();

}

});

// Ação de Clique para o Topo

backToTop.click(function() {

$('html, body').animate({scrollTop: 0}, 600);

});

// Efeito de ~~hover~~ (~~opcional~~, ~~para ficar mais profissional~~)

// Efeito de Hover em ambos (usando as tuas cores #BFFF00 -> #A0D500)

~~backToTop~~.hover(

$('#atronia-floating-nav > a > div, #back-to-top').hover(

function() { $(this).css({ 'transform': 'scale(1.1)', 'background-color': '#A0D500' }); },

function() {

function() { $(this).css({ 'transform': 'scale(1.0)', 'background-color': '#BFFF00' }); }

$(this).css({ 'transform': 'scale(1.1)', 'background-color': '#A0D500' });

},

function() {

$(this).css({ 'transform': 'scale(1.0)', 'background-color': '#BFFF00' });

}

);