Apply Material Design Lite to Roblox interface
当前为
// ==UserScript==
// @name Roblox - Material Design Lite
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Apply Material Design Lite to Roblox interface
// @author YourName
// @match *://www.roblox.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Load Material Design Lite CSS and Google Icons
const mdlCSS = document.createElement('link');
mdlCSS.rel = 'stylesheet';
mdlCSS.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
document.head.appendChild(mdlCSS);
const googleIconsCSS = document.createElement('link');
googleIconsCSS.rel = 'stylesheet';
googleIconsCSS.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
document.head.appendChild(googleIconsCSS);
// Load Material Design Lite JavaScript
const mdlScript = document.createElement('script');
mdlScript.src = 'https://code.getmdl.io/1.3.0/material.min.js';
mdlScript.defer = true;
document.head.appendChild(mdlScript);
// Inject custom styling for the layout
GM_addStyle(`
.roblox-banner {
background-color: #f44336;
color: white;
padding: 40px 0;
text-align: center;
}
.roblox-content {
margin: 20px;
}
.game-card {
padding: 20px;
margin: 10px;
border-radius: 8px;
}
.mdl-grid {
justify-content: center;
}
.game-title {
font-weight: bold;
}
.roblox-footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
border-radius: 0 0 8px 8px;
}
`);
// Create the new HTML layout
const newLayout = `
<!-- Header -->
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Roblox</span>
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#home">Home</a>
<a class="mdl-navigation__link" href="#games">Games</a>
<a class="mdl-navigation__link" href="#store">Store</a>
<a class="mdl-navigation__link" href="#about">About</a>
</nav>
</div>
</header>
<!-- Banner -->
<div class="roblox-banner">
<h2>Welcome to Roblox</h2>
<p>Play, create, and be anything you want.</p>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Start Playing</button>
</div>
<!-- Content Section -->
<div class="roblox-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp game-card">
<div class="mdl-card__title mdl-card--expand mdl-color--red-500 mdl-color-text--white">
<h2 class="mdl-card__title-text game-title">Game 1</h2>
</div>
<div class="mdl-card__supporting-text">
Explore a thrilling adventure.
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Play Now</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp game-card">
<div class="mdl-card__title mdl-card--expand mdl-color--blue-500 mdl-color-text--white">
<h2 class="mdl-card__title-text game-title">Game 2</h2>
</div>
<div class="mdl-card__supporting-text">
Build your empire today.
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Play Now</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp game-card">
<div class="mdl-card__title mdl-card--expand mdl-color--green-500 mdl-color-text--white">
<h2 class="mdl-card__title-text game-title">Game 3</h2>
</div>
<div class="mdl-card__supporting-text">
Survive the ultimate challenge.
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Play Now</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="roblox-footer">
<p>© 2024 Roblox Corporation. All rights reserved.</p>
</footer>
`;
// Insert the new layout into the body
document.body.innerHTML = newLayout;
})();