VSteam

Running

App Files Files Community

VSPAN commited on Feb 16

Commit

50fd41d

verified ·

1 Parent(s): a45b393

Update index.html

Browse files

Files changed (1) hide show

index.html +565 -18

index.html CHANGED Viewed

@@ -1,19 +1,566 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!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 installGame(gameId) {
+            const game = games.find(g => g.id === gameId);
+            if (!game) return;
+            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';
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += 10;
+                    progressBar.style.width = `${progress}%`;
+                    if (progress >= 100) {
+                        clearInterval(interval);
+                        installButton.textContent = 'Установлено';
+                        message.textContent = 'Игра успешно установлена!';
+                        // Шутка после установки
+                        setTimeout(() => {
+                            window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+                            // Здесь можно добавить ссылку или что-то ещё
+                        }, 1000);
+                    }
+                }, 300);
+            }
+        }
+        // Отрисовка библиотеки с кнопкой установки
+        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="installGame(${game.id})">
+                                    Установить
+                                </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>