You will have access to a brand new Drawaria Interface and Nintendo 3DS Games!
// ==UserScript==
// @name Drawaria Nintendo 3DS™
// @namespace http://tampermonkey.net/
// @version 2024-10-25
// @description You will have access to a brand new Drawaria Interface and Nintendo 3DS Games!
// @author YouTubeDrawaria
// @match https://drawaria.online/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function () {
'use strict';
let css = `
/* === 3DS Background Replacement === */
body {
background: url('https://i.ytimg.com/vi/XLxmdRxLtyY/hq720.jpg') center fixed no-repeat !important;
background-size: cover;
font-family: 'Helvetica', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* === Fixed Transparent 3DS Screen Overlay === */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://i.ibb.co/Q9RsJzX/ezgif-6-c6f4d7655e.png') center no-repeat;
background-size: cover;
pointer-events: none; /* Makes the overlay non-interactive */
z-index: 1000;
}
/* === Header Bar (Top Screen) === */
.header-bar {
background: linear-gradient(180deg, #f0f0f0, #c9d4e0);
width: 100%;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #b0b0b0;
}
.header-bar img {
width: 32px;
height: 32px;
}
/* === Icon Grid (Main UI) === */
.icon-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
padding: 20px;
}
.icon {
background: linear-gradient(145deg, #ffffff, #d1d1d1);
border-radius: 12px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
.icon img {
width: 48px;
height: 48px;
margin-bottom: 5px;
}
.icon:hover {
transform: scale(1.05);
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
background: linear-gradient(145deg, #e0e0e0, #b0b0b0);
}
/* === Login Box Adjustments === */
@media (max-width: 1500px) {
#login-rightcol .loginbox {
position: inherit;
border-radius: 1px;
background: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 !important;
}
}
#login-midcol {
padding: 0;
background: rgba(0, 0, 0, 0);
max-width: 260px;
}
/* === Button Styles === */
.btn, button {
background: linear-gradient(145deg, #ffffff, #b3b3b3);
color: #000000;
border: 2px solid #3d3d3d;
border-radius: 15px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.btn:hover, button:hover {
background: linear-gradient(145deg, #b3b3b3, #6c757d);
color: white;
transform: scale(1.05);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.btn:active, button:active {
background: linear-gradient(145deg,#b3b3b3, #6c757d);
color: white;
box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.5);
}
/* === Input Fields === */
input, select, textarea {
background: #f0f0f0;
border: 2px solid #008eff;
border-radius: 8px;
padding: 10px;
font-size: 16px;
transition: box-shadow 0.2s ease-in-out;
}
input:focus, select:focus, textarea:focus {
outline: none;
box-shadow: 0 0 10px rgba(0, 162, 255, 0.75);
}
/* === Footer (Bottom Screen) === */
.footer {
width: 100%;
background: linear-gradient(180deg, #c9d4e0, #e6eef5);
padding: 10px;
text-align: center;
border-top: 2px solid #b0b0b0;
color: #222; /* Dark text color */
}
.footer a {
color: #333; /* Darker color for links */
text-decoration: none;
font-weight: bold;
}
.footer a:hover {
text-decoration: underline;
}
/* === Centered Text Content (Optional) === */
.content-container {
color: #222; /* Dark text */
max-width: 1000px;
margin: auto;
text-align: center;
}
/* === Modal Styles === */
.modal {
display: none;
position: fixed;
z-index: 1050;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
border-radius: 15px;
padding: 20px;
width: 600px;
max-width: 80%;
text-align: center;
position: relative;
}
.close {
background: #000000;
border: none;
color: white;
border-radius: 50%;
width: 30px;
height: 30px;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
`;
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(css);
} else {
let styleNode = document.createElement('style');
styleNode.appendChild(document.createTextNode(css));
(document.querySelector('head') || document.documentElement).appendChild(styleNode);
}
// URLs of the images for the grid icons
const imageUrls = [
"https://cdn.icon-icons.com/icons2/993/PNG/96/Nintendo_3DS_icon-icons.com_75289.png",
"https://cdn.icon-icons.com/icons2/58/PNG/96/nintendoNES_11834.png",
"https://cdn.icon-icons.com/icons2/382/PNG/96/Nintendo_DS_37530.png",
"https://cdn.icon-icons.com/icons2/1603/PNG/96/video-game-play-pad-boy-gameboy-nintendo_108539.png",
"https://cdn.icon-icons.com/icons2/41/PNG/96/n64_nintendo_64_7167.png",
"https://cdn.icon-icons.com/icons2/2429/PNG/96/nintendo_logo_icon_147258.png",
"https://cdn.icon-icons.com/icons2/2622/PNG/96/brand_nintendo_gamecube_icon_157861.png",
"https://cdn.icon-icons.com/icons2/58/PNG/96/nintendosnesgamepad_snesnintendo_jueg_11835.png"
];
// Game data
const games = [
{ name: "Super Mario Bros", iframe: '<iframe src="https://scratch.mit.edu/projects/196684240/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "The Legend of Zelda", iframe: '<iframe src="https://scratch.mit.edu/projects/121662453/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "Mario Kart", iframe: '<iframe src="https://scratch.mit.edu/projects/36711178/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "GTA Chinatown Wars", iframe: '<iframe src="https://scratch.mit.edu/projects/486808355/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "Mario And Luigi", iframe: '<iframe src="https://scratch.mit.edu/projects/444391631/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "Sonic The Hedgehog", iframe: '<iframe src="https://scratch.mit.edu/projects/277391857/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "Pokemon", iframe: '<iframe src="https://scratch.mit.edu/projects/181714/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' },
{ name: "Minecraft", iframe: '<iframe src="https://scratch.mit.edu/projects/50029544/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>' }
];
// Create 3DS UI elements
// Reemplazar el logo del juego en el div correspondiente
const logoContainer = document.querySelector('.sitelogo img');
if (logoContainer) {
logoContainer.src = 'https://i.ibb.co/rGY0jH6/3DS.png';
// Ajustar la posición del logo hacia abajo
logoContainer.style.position = 'relative';
logoContainer.style.paddingTop = '10px';
logoContainer.style.marginTop = '10px';
logoContainer.style.top = '20px'; // Ajusta este valor según cuánto quieras mover el logo hacia abajo
}
const overlay = document.createElement('div');
overlay.className = 'overlay';
const header = document.createElement('header');
header.className = 'header-bar';
header.innerHTML = `
<div class="header-content">
<img src="https://drawaria.online/apple-touch-icon.png" alt="Game Logo" class="game-logo">
<span class="header-text">Nintendo Drawaria 3DS - YoutubeDrawaria</span>
</div>
`;
var elements = document.querySelectorAll("#howtoplaybox, #howtoplaybox a, #howtoplaybox span");
elements.forEach(function(element) {
element.style.color = "black";
});
// Añadir el encabezado al cuerpo del documento
document.body.appendChild(header);
const elements5 = document.querySelectorAll('a[href="/scoreboards/"], a[href="/gallery/"], button#continueautosaved-run');
elements5.forEach(element => {
element.style.color = 'black';
});
// Estilos CSS para centrar el contenido
header.style.display = 'flex';
header.style.justifyContent = 'center';
header.style.alignItems = 'center';
header.style.textAlign = 'center';
const headerContent = header.querySelector('.header-content');
headerContent.style.display = 'flex';
headerContent.style.alignItems = 'center';
const gameLogo = header.querySelector('.game-logo');
gameLogo.style.marginRight = '10px'; // Espacio entre la imagen y el texto
const headerText = header.querySelector('.header-text');
headerText.style.fontSize = '16px'; // Tamaño de fuente del texto
headerText.style.fontWeight = 'bold'; // Peso de la fuente
const grid = document.createElement('div');
grid.className = 'icon-grid';
// Create the icon grid
const iconGrid = document.createElement('div');
iconGrid.classList.add('icon-grid');
// Create icons dynamically
games.forEach((game, index) => {
const icon = document.createElement('div');
icon.classList.add('icon');
icon.innerHTML = `
<img src="${imageUrls[index % imageUrls.length]}" alt="${game.name}">
<span>${game.name}</span>
`;
// Add click event to open the modal
icon.onclick = () => openModal(game.iframe, game.name);
iconGrid.appendChild(icon);
});
document.body.appendChild(iconGrid);
// Create modal
const modal = document.createElement('div');
modal.classList.add('modal');
modal.innerHTML = `
<div class="modal-content">
<button class="close">×</button>
<h2 id="modal-title">Game Title</h2>
<div id="modal-iframe" style="margin-top: 15px;"></div>
</div>
`;
document.body.appendChild(modal);
// Function to open modal
function openModal(iframe, title) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-iframe').innerHTML = iframe;
modal.style.display = 'flex';
}
// Close modal functionality
modal.querySelector('.close').onclick = () => {
modal.style.display = 'none';
document.getElementById('modal-iframe').innerHTML = ''; // Clear iframe content
};
// Close modal on outside click
window.onclick = (event) => {
if (event.target === modal) {
modal.style.display = 'none';
document.getElementById('modal-iframe').innerHTML = ''; // Clear iframe content
}
};
const footer = document.createElement('div');
footer.className = 'footer';
footer.innerHTML = `© 2024 - Nintendo 3DS YoutubeDrawaria`;
document.body.appendChild(overlay);
document.body.appendChild(header);
document.body.appendChild(grid);
document.body.appendChild(footer);
// Remove unwanted elements from the page
const elementsToRemove = [
'.extimages',
'#socbuttons',
'.col text-center',
'.loginbox'
];
// Selecciona el elemento por su ID
var elemento = document.getElementById('ytlink');
// Oculta el elemento
if (elemento) {
elemento.style.display = 'none';
}
// Función para ocultar y eliminar el botón de Discord
function removeDiscordButton() {
var discordButton = document.getElementById('discordprombox');
if (discordButton) {
// Oculta el botón de Discord
discordButton.style.display = 'none';
// Elimina el botón de Discord del DOM
discordButton.parentNode.removeChild(discordButton);
}
}
const element5 = document.querySelector('div[style="border-top: #00b7ff solid 1px; margin-top: 1em; padding: 0.5em; padding-bottom: 0;"]');
if (element5) {
element5.remove();
}
// Ejecuta la función inmediatamente después de que se cargue el DOM
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', removeDiscordButton);
} else {
removeDiscordButton();
}
elementsToRemove.forEach(selector => {
const element = document.querySelector(selector);
if (element) {
element.remove();
}
});
})();