MediaWiki:Test.js: различия между версиями

Страница интерфейса MediaWiki
Нет описания правки
Метка: отменено
Нет описания правки
 
(не показаны 32 промежуточные версии этого же участника)
Строка 1: Строка 1:
 
(function(){
 
var canvas=document.createElement('canvas');
 
canvas.style.position='fixed';
 
canvas.style.left='0';
 
canvas.style.top='0';
 
canvas.style.width='100%';
 
canvas.style.height='100%';
 
canvas.style.pointerEvents='none';
 
canvas.style.zIndex='9999';
 
document.documentElement.appendChild(canvas);
 
var ctx=canvas.getContext('2d');
 
var w=0,h=0,flakes=[];
 
function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight;initFlakes();}
 
function rand(a,b){return Math.random()*(b-a)+a;}
 
function initFlakes(){
 
flakes=[];
 
var count=Math.max(30,Math.floor(w/30));
 
for(var i=0;i<count;i++){
 
flakes.push({
 
x:rand(0,w),
 
y:rand(-h, h),
 
r:rand(0.8,2.6),
 
vx:rand(-0.3,0.3),
 
vy:rand(0.4,1.2),
 
o:rand(0.3,0.9)
 
});
 
}
 
}
 
var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){setTimeout(fn,16);};
 
function loop(){
 
ctx.clearRect(0,0,w,h);
 
ctx.beginPath();
/* Галерея бета тест. 24 08 25 Dante/popoi
for(var i=0;i<flakes.length;i++){
js
var f=flakes[i];
(function(){var root=document.getElementById('ss-art-gallery');if(!root)return;function q(a,b){return a.querySelector(b)}function qa(a,b){return Array.prototype.slice.call(a.querySelectorAll(b))}
f.x+=f.vx;
var chips=qa(root,'.ss-chip');function setFilter(val){chips.forEach(function(c){c.classList.toggle('ss-chip-active',c.getAttribute('data-filter')===val||val==='all'&&c.getAttribute('data-filter')==='all')});qa(root,'.ss-card').forEach(function(card){var who=card.getAttribute('data-artist');card.classList.toggle('ss-hidden',!(val==='all'||val===who))})}
f.y+=f.vy;
chips.forEach(function(ch){ch.addEventListener('click',function(){setFilter(ch.getAttribute('data-filter'))})});setFilter('all');
f.vx+=Math.sin((Date.now()+i*100)%6000/6000*Math.PI*2)*0.005;
var modal=document.createElement('div');modal.className='ss-modal';modal.innerHTML='<div class="ss-modal-inner"><img class="ss-modal-img" alt=""/></div><div class="ss-modal-close" role="button">✖ Закрыть</div>';root.appendChild(modal);var modalImg=q(modal,'.ss-modal-img');function originalFromThumb(u){if(!u)return u;if(u.indexOf('/thumb/')>-1){var s=u.replace('/thumb/','/');s=s.replace(/\/[^\/]*$/,'');return s}return u}
if(f.y>h+10||f.x<-50||f.x>w+50){
qa(root,'.ss-card img').forEach(function(img){img.style.cursor='zoom-in';img.addEventListener('click',function(){var src=originalFromThumb(img.getAttribute('src'));modalImg.setAttribute('src',src||img.getAttribute('src'));modal.classList.add('open')})});
f.x=rand(0,w);
function closeModal(){modal.classList.remove('open')}modal.addEventListener('click',function(e){if(e.target===modal||e.target.classList.contains('ss-modal-close')){closeModal()}});document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeModal()}})
f.y=-10;
f.vx=rand(-0.3,0.3);
f.vy=rand(0.4,1.2);
}
ctx.moveTo(f.x,f.y);
ctx.arc(f.x,f.y,f.r,0,Math.PI*2);
}
ctx.fillStyle='rgba(255,255,255,0.9)';
ctx.fill();
raf(loop);
}
window.addEventListener('resize',resize);
resize();
loop();
})();
})();
css
#ss-art-gallery.ss-wrap{--ss-bg:#0e0f14;--ss-fg:#e9e9e9;--ss-muted:#a9b0bd;--ss-accent:#dca01b;--ss-card:#171a21;--ss-ring:#2b3241;--ss-chip:#1e2330;--ss-shadow:0 10px 28px rgba(0,0,0,.4);background:var(--ss-bg);color:var(--ss-fg);padding:20px;border-radius:18px;font-family:"Segoe UI",sans-serif}
#ss-art-gallery .ss-header{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;text-align:center}
#ss-art-gallery .ss-title{font-size:30px;line-height:1.2;font-weight:700;color:var(--ss-accent)}
#ss-art-gallery .ss-sub{font-size:15px;color:var(--ss-muted)}
#ss-art-gallery .ss-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
#ss-art-gallery .ss-chip{user-select:none;cursor:pointer;background:var(--ss-chip);padding:8px 14px;border-radius:999px;border:1px solid var(--ss-ring);box-shadow:var(--ss-shadow);font-size:13px;transition:all .2s ease}
#ss-art-gallery .ss-chip:hover{background:var(--ss-accent);color:#000}
#ss-art-gallery .ss-chip-active{border-color:var(--ss-accent);background:var(--ss-accent);color:#000}
#ss-art-gallery .ss-section{margin:24px 0}
#ss-art-gallery .ss-section-title{font-size:22px;font-weight:700;margin:10px 0 14px;text-align:left;color:var(--ss-accent)}
#ss-art-gallery .ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
#ss-art-gallery .ss-card{background:var(--ss-card);border:1px solid var(--ss-ring);border-radius:16px;box-shadow:var(--ss-shadow);padding:12px;display:flex;flex-direction:column;gap:10px;transform:translateZ(0);transition:transform .2s ease,border-color .2s ease}
#ss-art-gallery .ss-card:hover{transform:translateY(-4px);border-color:var(--ss-accent)}
#ss-art-gallery .ss-card-title{font-size:15px;color:var(--ss-muted);text-align:center}
#ss-art-gallery .ss-card img{width:100%!important;height:auto!important;border-radius:12px;display:block}
#ss-art-gallery .ss-hidden{display:none!important}
#ss-art-gallery .ss-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}
#ss-art-gallery .ss-modal.open{display:flex}
#ss-art-gallery .ss-modal-inner{max-width:92vw;max-height:92vh;animation:ss-fade .25s ease}
#ss-art-gallery .ss-modal-img{max-width:92vw;max-height:92vh;border-radius:14px;box-shadow:0 0 24px rgba(0,0,0,.7)}
#ss-art-gallery .ss-modal-close{position:fixed;top:16px;right:18px;background:var(--ss-chip);border:1px solid var(--ss-ring);padding:8px 14px;border-radius:10px;cursor:pointer;transition:all .2s ease}
#ss-art-gallery .ss-modal-close:hover{background:var(--ss-accent);color:#000}
@keyframes ss-fade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
Html
<div id="ss-art-gallery" class="ss-wrap">
<div class="ss-header">
<div class="ss-title">🎨 Арт-галерея Space Stories</div>
<div class="ss-sub">Приветствуем! Здесь собраны <span style="color:#f8d860;font-weight:700">все</span> арты, связанные с сервером <b>«Space stories»</b>.</div>
<div class="ss-filters" aria-label="Фильтр авторов">
<div class="ss-chip ss-chip-active" data-filter="all">Все авторы</div>
<div class="ss-chip" data-filter="Doner">Doner</div>
<div class="ss-chip" data-filter="Vi_Launcher">Vi_Launcher</div>
</div>
</div>
<div class="ss-section">
<div class="ss-section-title"><span style="color:#dca01b">Doner</span></div>
<div class="ss-grid">
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #1">
<div class="ss-card-title">Фон в лобби #1</div>
[[Файл:Doner fisrt art.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #2">
<div class="ss-card-title">Фон в лобби #2</div>
[[Файл:Doner two.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #3">
<div class="ss-card-title">Фон в лобби #3</div>
[[Файл:Doner three.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #4">
<div class="ss-card-title">Фон в лобби #4</div>
[[Файл:Doner four.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #5">
<div class="ss-card-title">Фон в лобби #5</div>
[[Файл:Doner five.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #6">
<div class="ss-card-title">Фон в лобби #6</div>
[[Файл:Doner six.png|400px]]
</div>
<div class="ss-card" data-artist="Doner" data-title="Фон в лобби #7">
<div class="ss-card-title">Фон в лобби #7</div>
[[Файл:Doner seven.png|400px]]
</div>
</div>
</div>
<div class="ss-section">
<div class="ss-section-title"><span style="color:#dca01b">Vi_Launcher</span></div>
<div class="ss-grid">
<div class="ss-card" data-artist="Vi_Launcher" data-title="История одного детектива">
<div class="ss-card-title">История одного детектива</div>
[[Файл:Vi-Launcher one.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="Иван Петрович">
<div class="ss-card-title">Иван Петрович</div>
[[Файл:Vl Launcher two.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="S.P.A.F.">
<div class="ss-card-title">S.P.A.F.</div>
[[Файл:Vi Launcher three.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="Прибой Яков">
<div class="ss-card-title">Прибой Яков</div>
[[Файл:Vi Launcher four.png|400px]]
</div>
<div class="ss-card" data-artist="Vi_Launcher" data-title="Жупт Игоревич">
<div class="ss-card-title">Жупт Игоревич</div>
[[Файл:Vi Launcher five.png|400px]]
</div>
</div>
</div>
</div>
*/

Текущая версия от 23:41, 22 ноября 2025

(function(){
var canvas=document.createElement('canvas');
canvas.style.position='fixed';
canvas.style.left='0';
canvas.style.top='0';
canvas.style.width='100%';
canvas.style.height='100%';
canvas.style.pointerEvents='none';
canvas.style.zIndex='9999';
document.documentElement.appendChild(canvas);
var ctx=canvas.getContext('2d');
var w=0,h=0,flakes=[];
function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight;initFlakes();}
function rand(a,b){return Math.random()*(b-a)+a;}
function initFlakes(){
flakes=[];
var count=Math.max(30,Math.floor(w/30));
for(var i=0;i<count;i++){
flakes.push({
x:rand(0,w),
y:rand(-h, h),
r:rand(0.8,2.6),
vx:rand(-0.3,0.3),
vy:rand(0.4,1.2),
o:rand(0.3,0.9)
});
}
}
var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(fn){setTimeout(fn,16);};
function loop(){
ctx.clearRect(0,0,w,h);
ctx.beginPath();
for(var i=0;i<flakes.length;i++){
var f=flakes[i];
f.x+=f.vx;
f.y+=f.vy;
f.vx+=Math.sin((Date.now()+i*100)%6000/6000*Math.PI*2)*0.005;
if(f.y>h+10||f.x<-50||f.x>w+50){
f.x=rand(0,w);
f.y=-10;
f.vx=rand(-0.3,0.3);
f.vy=rand(0.4,1.2);
}
ctx.moveTo(f.x,f.y);
ctx.arc(f.x,f.y,f.r,0,Math.PI*2);
}
ctx.fillStyle='rgba(255,255,255,0.9)';
ctx.fill();
raf(loop);
}
window.addEventListener('resize',resize);
resize();
loop();
})();