Roblox Item Shop

Roblox Item Shop

Portfel: 0.00zł

Przedmioty

Super Czapka

Cena: 100 Robux

Epicki Miecz

Cena: 500 Robux

Złota Zbroja

Cena: 1000 Robux

Doładowania

100 Robux

Cena: 10zł

500 Robux

Cena: 45zł

1000 Robux

Cena: 80zł

body { font-family: sans-serif; margin: 0; background-color: #f0f0f0; color: #333; } header { background-color: #007bff; color: white; padding: 1rem; text-align: center; display: flex; justify-content: space-between; align-items: center; } header h1 { margin: 0; } .wallet { font-size: 1.2rem; font-weight: bold; } nav button { background-color: #fff; color: #007bff; border: none; padding: 0.5rem 1rem; margin-left: 0.5rem; cursor: pointer; border-radius: 4px; font-size: 1rem; } nav button:hover { background-color: #e9ecef; } main { padding: 2rem; max-width: 1200px; margin: 0 auto; } section { background-color: #fff; padding: 1.5rem; margin-bottom: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h2 { color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 0.5rem; margin-top: 0; } .items-grid, .top-up-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .item, .top-up { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; text-align: center; background-color: #f9f9f9; display: flex; flex-direction: column; justify-content: space-between; } .item img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 1rem; } .item h3, .top-up h3 { margin-top: 0; margin-bottom: 0.5rem; color: #333; } .item p, .top-up p { margin-bottom: 1rem; color: #555; } .item button, .top-up button { background-color: #28a745; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease; } .item button:hover, .top-up button:hover { background-color: #218838; } footer { text-align: center; padding: 1rem; margin-top: 2rem; background-color: #333; color: white; } /* Modal Styles */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } .modal-content { background-color: #fefefe; margin: 5% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ max-width: 500px; border-radius: 8px; position: relative; } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } .auth-form h2 { text-align: center; margin-bottom: 1.5rem; } .auth-form form label { display: block; margin-bottom: 0.5rem; font-weight: bold; } .auth-form form input[type="text"], .auth-form form input[type="password"], .auth-form form input[type="email"] { width: calc(100% - 22px); /* Adjust for padding and border */ padding: 10px; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; } .auth-form form button[type="submit"] { width: 100%; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-size: 1.1rem; transition: background-color 0.3s ease; } .auth-form form button[type="submit"]:hover { background-color: #0056b3; } document.addEventListener('DOMContentLoaded', () => { const modal = document.getElementById('auth-modal'); const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); const showLoginButton = document.getElementById('show-login'); const showRegisterButton = document.getElementById('show-register'); const closeButton = document.querySelector('.modal .close-button'); // Function to open the modal function openModal() { modal.style.display = 'block'; } // Function to close the modal function closeModal() { modal.style.display = 'none'; } // Function to show login form and hide register form function showLoginForm() { loginForm.style.display = 'block'; registerForm.style.display = 'none'; } // Function to show register form and hide login form function showRegisterForm() { loginForm.style.display = 'none'; registerForm.style.display = 'block'; } // Event listeners for buttons showLoginButton.addEventListener('click', () => { showLoginForm(); openModal(); }); showRegisterButton.addEventListener('click', () => { showRegisterForm(); openModal(); }); // Event listener for close button closeButton.addEventListener('click', closeModal); // Close the modal when clicking outside of the modal content window.addEventListener('click', (event) => { if (event.target == modal) { closeModal(); } }); // --- Placeholder Form Submission Handlers --- // These functions prevent default form submission and log data // Actual login/registration requires a backend server const loginFormElement = loginForm.querySelector('form'); loginFormElement.addEventListener('submit', (event) => { event.preventDefault(); // Prevent actual form submission const username = document.getElementById('login-username').value; const password = document.getElementById('login-password').value; console.log('Login Attempt:', { username, password }); alert('Login form submitted (placeholder)'); // In a real app, you would send this data to your server // closeModal(); // Close modal on successful (simulated) login }); const registerFormElement = registerForm.querySelector('form'); registerFormElement.addEventListener('submit', (event) => { event.preventDefault(); // Prevent actual form submission const username = document.getElementById('register-username').value; const email = document.getElementById('register-email').value; const password = document.getElementById('register-password').value; const confirmPassword = document.getElementById('register-confirm-password').value; if (password !== confirmPassword) { alert('Passwords do not match!'); return; } console.log('Register Attempt:', { username, email, password }); alert('Register form submitted (placeholder)'); // In a real app, you would send this data to your server // closeModal(); // Close modal on successful (simulated) registration }); // --- Placeholder Buy/Top-up Button Handlers --- // These functions prevent default button actions and log data // Actual purchases/top-ups require a backend server document.querySelectorAll('.item button').forEach(button => { button.addEventListener('click', (event) => { const itemElement = event.target.closest('.item'); const itemName = itemElement.querySelector('h3').innerText; const itemPrice = itemElement.querySelector('p').innerText; console.log('Buy Item Attempt:', { itemName, itemPrice }); alert(`Attempted to buy: ${itemName} (${itemPrice}) (placeholder)`); }); }); document.querySelectorAll('.top-up button').forEach(button => { button.addEventListener('click', (event) => { const topUpElement = event.target.closest('.top-up'); const robuxAmount = topUpElement.querySelector('h3').innerText; const price = topUpElement.querySelector('p').innerText; console.log('Top-up Attempt:', { robuxAmount, price }); alert(`Attempted to top up: ${robuxAmount} for ${price} (placeholder)`); }); }); });