|
<!DOCTYPE html> |
|
<html lang="ru"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>V-SPAN | VSteam Ultimate</title> |
|
<style> |
|
|
|
body { |
|
background: linear-gradient(135deg, #1b2838, #0e1a27); |
|
color: #c6d4df; |
|
font-family: 'Arial', sans-serif; |
|
margin: 0; |
|
min-height: 100vh; |
|
line-height: 1.6; |
|
} |
|
|
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
|
|
|
|
.nav { |
|
background: rgba(23, 26, 33, 0.9); |
|
padding: 15px; |
|
margin-bottom: 30px; |
|
display: flex; |
|
gap: 20px; |
|
border-bottom: 2px solid #67c1f5; |
|
backdrop-filter: blur(10px); |
|
border-radius: 10px; |
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.nav-button { |
|
background: none; |
|
border: none; |
|
color: #c6d4df; |
|
cursor: pointer; |
|
padding: 10px 20px; |
|
transition: all 0.3s ease; |
|
font-size: 16px; |
|
border-radius: 5px; |
|
} |
|
|
|
.nav-button:hover { |
|
color: #67c1f5; |
|
background: rgba(103, 193, 245, 0.1); |
|
transform: translateY(-2px); |
|
} |
|
|
|
|
|
.login-box { |
|
max-width: 400px; |
|
margin: 100px auto; |
|
padding: 40px; |
|
background: rgba(23, 26, 33, 0.9); |
|
border-radius: 15px; |
|
text-align: center; |
|
backdrop-filter: blur(10px); |
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
border: 1px solid rgba(103, 193, 245, 0.2); |
|
} |
|
|
|
.login-input { |
|
width: 100%; |
|
padding: 12px; |
|
margin: 10px 0; |
|
background: rgba(42, 71, 94, 0.5); |
|
border: 1px solid rgba(103, 193, 245, 0.3); |
|
color: white; |
|
border-radius: 5px; |
|
font-size: 16px; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.login-input:focus { |
|
border-color: #67c1f5; |
|
box-shadow: 0 0 8px rgba(103, 193, 245, 0.4); |
|
outline: none; |
|
} |
|
|
|
.error-message { |
|
color: #ff4444; |
|
margin: 10px 0; |
|
display: none; |
|
font-size: 14px; |
|
} |
|
|
|
|
|
.store-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
gap: 20px; |
|
margin-top: 30px; |
|
} |
|
|
|
.game-card { |
|
background: rgba(42, 71, 94, 0.7); |
|
border-radius: 10px; |
|
overflow: hidden; |
|
transition: all 0.3s ease; |
|
border: 1px solid transparent; |
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
.game-card:hover { |
|
border-color: #67c1f5; |
|
transform: translateY(-5px); |
|
box-shadow: 0 8px 25px rgba(103, 193, 245, 0.3); |
|
} |
|
|
|
.game-image { |
|
width: 100%; |
|
height: 150px; |
|
object-fit: cover; |
|
border-bottom: 2px solid rgba(103, 193, 245, 0.2); |
|
} |
|
|
|
.game-card h3 { |
|
margin: 15px; |
|
font-size: 18px; |
|
color: #67c1f5; |
|
} |
|
|
|
.game-card p { |
|
margin: 0 15px 15px; |
|
font-size: 14px; |
|
color: #a8b5c0; |
|
} |
|
|
|
|
|
.steam-button { |
|
background: linear-gradient(135deg, #67c1f5, #4da8d3); |
|
color: #1b2838; |
|
border: none; |
|
padding: 12px 25px; |
|
cursor: pointer; |
|
font-weight: bold; |
|
border-radius: 5px; |
|
transition: all 0.3s ease; |
|
margin: 15px; |
|
width: calc(100% - 30px); |
|
box-shadow: 0 4px 15px rgba(103, 193, 245, 0.3); |
|
} |
|
|
|
.steam-button:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 6px 20px rgba(103, 193, 245, 0.4); |
|
} |
|
|
|
.steam-button:disabled { |
|
background: #2a475e; |
|
color: #677a8a; |
|
cursor: not-allowed; |
|
box-shadow: none; |
|
} |
|
|
|
|
|
.profile-header { |
|
display: flex; |
|
align-items: center; |
|
gap: 20px; |
|
margin-bottom: 30px; |
|
background: rgba(23, 26, 33, 0.9); |
|
padding: 20px; |
|
border-radius: 10px; |
|
backdrop-filter: blur(10px); |
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.profile-avatar { |
|
width: 150px; |
|
height: 150px; |
|
border-radius: 50%; |
|
border: 3px solid #67c1f5; |
|
box-shadow: 0 4px 15px rgba(103, 193, 245, 0.3); |
|
} |
|
|
|
.profile-name { |
|
font-size: 24px; |
|
font-weight: bold; |
|
color: #67c1f5; |
|
} |
|
|
|
.profile-level { |
|
background: rgba(42, 71, 94, 0.7); |
|
padding: 5px 10px; |
|
border-radius: 5px; |
|
display: inline-block; |
|
margin-top: 5px; |
|
font-size: 14px; |
|
} |
|
|
|
.profile-progress { |
|
background: rgba(23, 26, 33, 0.7); |
|
height: 10px; |
|
border-radius: 5px; |
|
margin: 10px 0; |
|
overflow: hidden; |
|
} |
|
|
|
.profile-progress-bar { |
|
background: linear-gradient(135deg, #67c1f5, #4da8d3); |
|
height: 100%; |
|
width: 30%; |
|
border-radius: 5px; |
|
} |
|
|
|
|
|
.friends-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
gap: 15px; |
|
margin-top: 20px; |
|
} |
|
|
|
.friend-card { |
|
background: rgba(42, 71, 94, 0.7); |
|
padding: 15px; |
|
border-radius: 10px; |
|
text-align: center; |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
.friend-card:hover { |
|
transform: translateY(-3px); |
|
box-shadow: 0 6px 20px rgba(103, 193, 245, 0.3); |
|
} |
|
|
|
.friend-avatar { |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
margin-bottom: 10px; |
|
border: 2px solid #67c1f5; |
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(20px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
|
|
.fade-in { |
|
animation: fadeIn 0.5s ease-out; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div id="loginPage"> |
|
<div class="login-box"> |
|
<h2>Вход в VSteam</h2> |
|
<input type="text" id="loginInput" class="login-input" placeholder="Имя"> |
|
<input type="password" id="passwordInput" class="login-input" placeholder="Пароль"> |
|
<div class="error-message" id="loginError">Неверные данные!</div> |
|
<button class="steam-button" id="loginButton" style="width: 100%">Войти</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="mainPage" style="display: none"> |
|
<div class="container"> |
|
|
|
<div class="nav"> |
|
<button class="nav-button" onclick="showSection('profile')">Профиль</button> |
|
<button class="nav-button" onclick="showSection('store')">Магазин</button> |
|
<button class="nav-button" onclick="showSection('payment')">Пополнить баланс</button> |
|
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px"> |
|
Баланс: <span id="balance">0</span> ₴ |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="profileSection"> |
|
<div class="profile-header"> |
|
<img src="https://avatars.fastly.steamstatic.com/f5b6269689db341d0d3a7f9574fcc4714b47b055_full.jpg" |
|
alt="Аватар" class="profile-avatar"> |
|
<div class="profile-info"> |
|
<div class="profile-name">V-SPAN</div> |
|
<div>United States</div> |
|
<div class="profile-level">Уровень 19</div> |
|
<div class="profile-progress"> |
|
<div class="profile-progress-bar" style="width: 30%"></div> |
|
</div> |
|
<div>Rookie Miner</div> |
|
<div>100 ед. опыта</div> |
|
<button class="steam-button">Редактировать профиль</button> |
|
</div> |
|
</div> |
|
|
|
<div class="profile-section"> |
|
<h2>О себе</h2> |
|
<p>Для знакомых я просто Джонни. 24 Года Не женатый.<br> |
|
Пиши желательно по делу или для обычного приятного разговора.<br> |
|
𝐃𝐢𝐬𝐜𝐨𝐫𝐝: johnny_raspberry<br> |
|
уʙᴧᴇчᴇния: ᴩиᴄоʙᴀниᴇ, чᴛᴇниᴇ ᴋниᴦ, ᴄоздᴀниᴇ и ᴨᴩодᴀжᴀ ᴋниᴦ<br> |
|
инᴛᴇᴩᴇᴄы ʙ иᴦᴩᴀх: нᴀᴄᴛоᴧьныᴇ ᴩоᴧᴇʙыᴇ иᴦᴩы, оᴄобᴇнно ᴅᴜɴɢᴇᴏɴs ᴀɴᴅ ᴅʀᴀɢᴏɴs (ᴅɴᴅ)</p> |
|
<p>Соси письку, братан. - zakat</p> |
|
</div> |
|
|
|
<div class="profile-section"> |
|
<h2>Друзья</h2> |
|
<div class="friends-grid" id="friendsGrid"></div> |
|
</div> |
|
|
|
<div class="profile-section"> |
|
<h2>Библиотека игр</h2> |
|
<div id="userGames"></div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="storeSection" style="display: none"> |
|
<h2>Магазин ВSteam</h2> |
|
<div class="store-grid" id="storeGrid"></div> |
|
</div> |
|
|
|
|
|
<div id="paymentSection" style="display: none"> |
|
<div class="payment-box"> |
|
<h2 style="text-align: center">Пополнение баланса</h2> |
|
<input type="number" class="payment-input" id="amount" placeholder="Сумма в гривнах"> |
|
<button class="steam-button" style="width: 100%" id="addFundsButton"> |
|
Мгновенное пополнение ✨ |
|
</button> |
|
<div style="text-align: center; margin-top: 15px; color: #888"> |
|
(Функция в бета-тесте — деньги не списываются) |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const account = { |
|
login: 'V-SPAN', |
|
password: '11.08.2024 1:53', |
|
balance: 305, |
|
library: [], |
|
level: 19, |
|
experience: 301, |
|
friends: [ |
|
{ name: 'Aristople', status: 'В сети: 7 ч., 9 мин. назад' }, |
|
{ name: 'Rock MeN', status: 'В сети: 14 дн. назад' }, |
|
{ name: 'Zakati', status: 'В сети' } |
|
] |
|
} |
|
|
|
|
|
const games = [ |
|
{ id: 1, title: 'Dota 3', price: 499, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/570/header.jpg' }, |
|
{ id: 2, title: 'CS:GO Ultimate', price: 799, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/730/header.jpg' }, |
|
{ id: 3, title: 'The Witcher 4: Wild Dream', price: 1299, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/292030/header.jpg' }, |
|
{ id: 4, title: 'Cyberpunk 2078', price: 1599, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg' }, |
|
{ id: 5, title: 'Elden Ring: Shadow of the Moon', price: 1799, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg' }, |
|
{ id: 6, title: 'Starfield: Galactic Empire', price: 1999, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/header.jpg' }, |
|
{ id: 7, title: 'Baldur\'s Gate 4', price: 1499, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/header.jpg' }, |
|
{ id: 8, title: 'Half-Life 3', price: 999, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/220/header.jpg' }, |
|
{ id: 9, title: 'Portal 3', price: 899, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/400/header.jpg' }, |
|
{ id: 10, title: 'GTA VI', price: 2499, image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/271590/header.jpg' } |
|
] |
|
|
|
|
|
function init() { |
|
document.getElementById('loginButton').addEventListener('click', login) |
|
document.getElementById('addFundsButton').addEventListener('click', addFunds) |
|
} |
|
|
|
|
|
function login() { |
|
const login = document.getElementById('loginInput').value |
|
const password = document.getElementById('passwordInput').value |
|
|
|
if(login === account.login && password === account.password) { |
|
document.getElementById('loginPage').style.display = 'none' |
|
document.getElementById('mainPage').style.display = 'block' |
|
initApp() |
|
} else { |
|
document.getElementById('loginError').style.display = 'block' |
|
} |
|
} |
|
|
|
|
|
function initApp() { |
|
updateBalance() |
|
renderStore() |
|
renderLibrary() |
|
renderFriends() |
|
document.getElementById('amount').value = 500 |
|
showSection('profile') |
|
} |
|
|
|
|
|
function updateBalance() { |
|
const balanceElement = document.getElementById('balance') |
|
if(balanceElement) { |
|
balanceElement.textContent = account.balance |
|
} |
|
} |
|
|
|
|
|
function renderStore() { |
|
const storeGrid = document.getElementById('storeGrid') |
|
if(storeGrid) { |
|
storeGrid.innerHTML = games.map(game => ` |
|
<div class="game-card" ${account.library.some(g => g.id === game.id) ? 'data-owned="true"' : ''}> |
|
<img src="${game.image}" class="game-image"> |
|
<div style="padding: 15px"> |
|
<h3>${game.title}</h3> |
|
<div style="margin: 15px 0; color: #67c1f5">${game.price} ₴</div> |
|
<button class="steam-button" |
|
onclick="buyGame(${game.id})" |
|
${account.library.some(g => g.id === game.id) ? 'disabled' : ''}> |
|
${account.library.some(g => g.id === game.id) ? 'В библиотеке' : 'Купить'} |
|
</button> |
|
</div> |
|
</div> |
|
`).join('') |
|
} |
|
} |
|
|
|
|
|
function renderLibrary() { |
|
const library = document.getElementById('userGames') |
|
if(library) { |
|
library.innerHTML = account.library.length ? |
|
account.library.map(game => ` |
|
<div class="game-card"> |
|
<img src="${game.image}" class="game-image"> |
|
<div style="padding: 15px"> |
|
<h3>${game.title}</h3> |
|
<button class="steam-button" disabled>Установить</button> |
|
</div> |
|
</div> |
|
`).join('') : |
|
'<p>Ваша библиотека пуста. Купите игры в магазине!</p>' |
|
} |
|
} |
|
|
|
|
|
function renderFriends() { |
|
const friendsGrid = document.getElementById('friendsGrid') |
|
if(friendsGrid) { |
|
friendsGrid.innerHTML = account.friends.map(friend => ` |
|
<div class="friend-card"> |
|
<div>${friend.name}</div> |
|
<div class="friend-status">${friend.status}</div> |
|
</div> |
|
`).join('') |
|
} |
|
} |
|
|
|
|
|
function buyGame(gameId) { |
|
const game = games.find(g => g.id === gameId) |
|
if(!game) return alert('Игра не найдена!') |
|
|
|
if(account.balance >= game.price) { |
|
account.balance -= game.price |
|
account.library.push(game) |
|
updateBalance() |
|
renderStore() |
|
renderLibrary() |
|
alert(`🎉 Вы купили "${game.title}"!`) |
|
} else { |
|
alert('🚫 Недостаточно средств!') |
|
} |
|
} |
|
|
|
|
|
function addFunds() { |
|
const amount = Number(document.getElementById('amount').value) |
|
if(amount > 0 && amount <= 10000) { |
|
account.balance += amount |
|
updateBalance() |
|
alert(`✅ Баланс пополнен на ${amount} ₴!`) |
|
} else { |
|
alert('⚠ Введите сумму от 1 до 10 000 гривен') |
|
} |
|
} |
|
|
|
|
|
function showSection(section) { |
|
document.querySelectorAll('[id$="Section"]').forEach(el => el.style.display = 'none') |
|
const sectionElement = document.getElementById(section + 'Section') |
|
if(sectionElement) { |
|
sectionElement.style.display = 'block' |
|
} |
|
if(section === 'store') renderStore() |
|
if(section === 'profile') renderLibrary() |
|
} |
|
|
|
|
|
window.addEventListener('load', init) |
|
</script> |
|
<script> |
|
|
|
function playGame(gameId) { |
|
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank'); |
|
} |
|
|
|
|
|
function installGame(gameId) { |
|
try { |
|
const game = games.find(g => g.id === gameId); |
|
if (!game) throw new Error('Игра не найдена'); |
|
|
|
const installButton = document.querySelector(`.install-button[data-game-id="${gameId}"]`); |
|
const progressBar = document.querySelector(`.install-progress[data-game-id="${gameId}"] .install-progress-bar`); |
|
const message = document.querySelector(`.install-message[data-game-id="${gameId}"]`); |
|
|
|
if (installButton && progressBar && message) { |
|
installButton.disabled = true; |
|
installButton.textContent = 'Установка...'; |
|
progressBar.parentElement.style.display = 'block'; |
|
message.style.display = 'block'; |
|
progressBar.style.transition = 'width 0.3s ease'; |
|
|
|
let progress = 0; |
|
function updateProgress() { |
|
progress += 5; |
|
progressBar.style.width = `${progress}%`; |
|
if (progress < 100) { |
|
requestAnimationFrame(updateProgress); |
|
} else { |
|
installButton.textContent = 'Играть'; |
|
installButton.onclick = () => playGame(gameId); |
|
message.textContent = 'Игра успешно установлена!'; |
|
installButton.disabled = false; |
|
} |
|
} |
|
requestAnimationFrame(updateProgress); |
|
} |
|
} catch (error) { |
|
console.error('Ошибка установки:', error.message); |
|
} |
|
} |
|
|
|
|
|
function renderLibrary() { |
|
const library = document.getElementById('userGames'); |
|
if (library) { |
|
library.innerHTML = account.library.length ? |
|
account.library.map(game => ` |
|
<div class="game-card"> |
|
<img src="${game.image}" class="game-image"> |
|
<div style="padding: 15px"> |
|
<h3>${game.title}</h3> |
|
<button class="steam-button install-button" data-game-id="${game.id}" onclick="${game.installed ? `playGame(${game.id})` : `installGame(${game.id})`}"> |
|
${game.installed ? 'Играть' : 'Установить'} |
|
</button> |
|
<div class="install-progress" data-game-id="${game.id}"> |
|
<div class="install-progress-bar"></div> |
|
</div> |
|
<div class="install-message" data-game-id="${game.id}"></div> |
|
</div> |
|
</div> |
|
`).join('') : |
|
'<p>Ваша библиотека пуста. Купите игры в магазине!</p>'; |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
