Greasy Fork is available in English.
Display each mod in a card layout with miniature covers in the top right corner, with modal preview.
// ==UserScript==
// @name mc百科页面焕新
// @namespace http://tampermonkey.net/
// @version 0.7
// @description Display each mod in a card layout with miniature covers in the top right corner, with modal preview.
// @author klnon
// @match https://www.mcmod.cn/modlist.html*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
window.addEventListener('load', function() {
const blocks = document.querySelectorAll('.modlist-block');
const listContainer = document.createElement('div');
listContainer.style.margin = '20px auto';
listContainer.style.display = 'flex';
listContainer.style.flexWrap = 'wrap';
listContainer.style.justifyContent = 'center';
// Create a modal to display mod details
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.left = '0';
modal.style.top = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
modal.style.display = 'none';
modal.style.alignItems = 'center';
modal.style.justifyContent = 'center';
modal.style.zIndex = '1000';
const modalContent = document.createElement('iframe');
modalContent.style.width = '80%';
modalContent.style.height = '80%';
modalContent.style.borderRadius = '10px';
modalContent.style.border = 'none';
modal.appendChild(modalContent);
document.body.appendChild(modal);
// Function to open modal
function openModal(url) {
modalContent.src = url;
modal.style.display = 'flex';
}
// Function to close modal
modal.addEventListener('click', function() {
modal.style.display = 'none';
modalContent.src = '';
});
blocks.forEach(block => {
const modCard = document.createElement('div');
modCard.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
modCard.style.border = '1px solid #ccc';
modCard.style.borderRadius = '10px';
modCard.style.transition = '0.3s';
modCard.style.width = '300px';
modCard.style.margin = '10px';
modCard.style.padding = '10px';
modCard.style.backgroundColor = '#fff';
modCard.style.textAlign = 'left';
modCard.style.position = 'relative';
modCard.style.cursor = 'pointer';
modCard.onmouseover = function() {
this.style.boxShadow = '0 8px 16px rgba(0,0,0,0.6)';
};
modCard.onmouseout = function() {
this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
};
const title = block.querySelector('.title').innerHTML;
const description = block.querySelector('.intro-content span') ? block.querySelector('.intro-content span').textContent.trim() : '无描述';
const link = block.querySelector('.title a').getAttribute('href');
const coverImage = block.querySelector('.cover img');
coverImage.style.width = '100%';
coverImage.style.height = 'auto';
const coverDiv = document.createElement('div');
coverDiv.style.position = 'absolute';
coverDiv.style.top = '10px';
coverDiv.style.right = '10px';
coverDiv.style.width = '60px';
coverDiv.style.height = '40px';
coverDiv.style.overflow = 'hidden';
coverDiv.appendChild(coverImage);
const contentDiv = document.createElement('div');
contentDiv.style.paddingRight = '70px';
contentDiv.innerHTML = `<div class="title"><strong>${title}</strong></div><hr style="margin: 10px 0;"><p>${description}</p>`;
modCard.appendChild(contentDiv);
modCard.appendChild(coverDiv);
modCard.addEventListener('click', () => openModal(link));
listContainer.appendChild(modCard);
});
const contentArea = document.querySelector('.modlist-list-frame');
contentArea.innerHTML = '';
contentArea.appendChild(listContainer);
document.body.style.visibility = 'visible';
});
})();