VSteam

Running

App Files Files Community

VSPAN commited on 22 days ago

Commit

9cd9b33

verified ·

1 Parent(s): 216bc8b

Update index.html

Browse files

Files changed (1) hide show

index.html +413 -518

index.html CHANGED Viewed

@@ -2,568 +2,463 @@
 <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>

 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Изменение времени по голосу</title>
     <style>
         body {
             margin: 0;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+        }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            transition: background-color 0.5s ease;
+        }
+        #sky {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 70%;
+            transition: background-color 0.5s ease;
         }
+        #ground {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 30%;
+            background-color: #4a7c59;
+            transition: background-color 0.5s ease;
+        }
+        #sun-moon {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            transition: all 0.5s ease;
         }
+        #buildings {
+            position: absolute;
+            bottom: 30%;
+            left: 0;
+            width: 100%;
+            height: 20%;
+        }
+        .building {
+            position: absolute;
+            bottom: 0;
+            background-color: #555;
+            transition: background-color 0.5s ease;
+        }
+        .window {
+            position: absolute;
+            background-color: #333;
+            transition: background-color 0.5s ease;
+        }
+        #controls {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: rgba(255, 255, 255, 0.8);
             padding: 15px;
             border-radius: 10px;
+            z-index: 100;
         }
+        #time-display {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 10px;
         }
+        #pitch-display, #volume-display {
             font-size: 16px;
+            margin-bottom: 5px;
         }
+        button {
+            padding: 10px 15px;
+            margin-right: 5px;
+            background-color: #4CAF50;
+            color: white;
             border: none;
             border-radius: 5px;
+            cursor: pointer;
         }
+        button:hover {
+            background-color: #45a049;
         }
+        #stars {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 70%;
+            transition: opacity 0.5s ease;
+            opacity: 0;
         }
+        .star {
+            position: absolute;
+            background-color: white;
             border-radius: 50%;
         }
+        #instructions {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background-color: rgba(255, 255, 255, 0.8);
             padding: 15px;
             border-radius: 10px;
+            max-width: 300px;
         }
     </style>
 </head>
 <body>
+    <div id="game-container">
+        <div id="sky"></div>
+        <div id="stars"></div>
+        <div id="sun-moon"></div>
+        <div id="buildings"></div>
+        <div id="ground"></div>
+        <div id="controls">
+            <div id="time-display">12:00</div>
+            <div id="pitch-display">Тембр: 0</div>
+            <div id="volume-display">Громкость: 0</div>
+            <button id="start-btn">Начать запись голоса</button>
+            <button id="stop-btn" disabled>Остановить</button>
         </div>
+        <div id="instructions">
+            <h3>Инструкция:</h3>
+            <p>1. Нажмите "Начать запись голоса" и разрешите доступ к микрофону</p>
+            <p>2. Говорите с разным тембром голоса:</p>
+            <p>- Низкий тембр = ночь/раннее утро</p>
+            <p>- Средний тембр = день</p>
+            <p>- Высокий тембр = вечер/закат</p>
+            <p>3. Громкость голоса влияет на яркость сцены</p>
         </div>
     </div>
     <script>
+        // Создаем элементы сцены
+        function setupScene() {
+            // Создаем здания
+            const buildingsContainer = document.getElementById('buildings');
+            const buildingCount = 8;
+            for (let i = 0; i < buildingCount; i++) {
+                const building = document.createElement('div');
+                building.classList.add('building');
+                const height = 50 + Math.random() * 100;
+                const width = 40 + Math.random() * 60;
+                building.style.height = height + 'px';
+                building.style.width = width + 'px';
+                building.style.left = (i * (100 / buildingCount)) + '%';
+                // Добавляем окна
+                const windowRows = Math.floor(height / 20);
+                const windowCols = Math.floor(width / 15);
+                for (let r = 0; r < windowRows; r++) {
+                    for (let c = 0; c < windowCols; c++) {
+                        const windowEl = document.createElement('div');
+                        windowEl.classList.add('window');
+                        windowEl.style.width = '10px';
+                        windowEl.style.height = '15px';
+                        windowEl.style.left = (c * 15 + 5) + 'px';
+                        windowEl.style.top = (r * 20 + 5) + 'px';
+                        building.appendChild(windowEl);
+                    }
+                }
+                buildingsContainer.appendChild(building);
             }
+            // Создаем звезды
+            const starsContainer = document.getElementById('stars');
+            for (let i = 0; i < 100; i++) {
+                const star = document.createElement('div');
+                star.classList.add('star');
+                const size = 1 + Math.random() * 2;
+                star.style.width = size + 'px';
+                star.style.height = size + 'px';
+                star.style.left = Math.random() * 100 + '%';
+                star.style.top = Math.random() * 100 + '%';
+                starsContainer.appendChild(star);
             }
         }
+        // Изменение времени суток
+        function updateTimeOfDay(hour, minute, pitch, volume) {
+            const gameContainer = document.getElementById('game-container');
+            const sky = document.getElementById('sky');
+            const ground = document.getElementById('ground');
+            const sunMoon = document.getElementById('sun-moon');
+            const buildings = document.querySelectorAll('.building');
+            const windows = document.querySelectorAll('.window');
+            const stars = document.getElementById('stars');
+            // Нормализуем время (0-24)
+            const time = hour + minute / 60;
+            // Положение солнца/луны
+            const angle = (time / 24) * 2 * Math.PI - Math.PI / 2;
+            const radius = Math.min(window.innerWidth, window.innerHeight) * 0.4;
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight * 0.7;
+            const x = centerX + radius * Math.cos(angle);
+            const y = centerY + radius * Math.sin(angle);
+            sunMoon.style.left = (x - 40) + 'px';
+            sunMoon.style.top = (y - 40) + 'px';
+            // Цвета в зависимости от времени суток
+            let skyColor, groundColor, sunMoonColor, buildingColor, windowColor;
+            let starsOpacity = 0;
+            // Раннее утро (5-7)
+            if (time >= 5 && time < 7) {
+                skyColor = `rgb(${Math.floor(59 + (158-59) * (time-5)/2)}, ${Math.floor(88 + (206-88) * (time-5)/2)}, ${Math.floor(128 + (235-128) * (time-5)/2)})`;
+                groundColor = '#385c46';
+                sunMoonColor = '#ff9e4f';
+                buildingColor = '#555';
+                windowColor = '#333';
             }
+            // День (7-17)
+            else if (time >= 7 && time < 17) {
+                skyColor = '#9eceff';
+                groundColor = '#4a7c59';
+                sunMoonColor = '#ffee00';
+                buildingColor = '#666';
+                windowColor = '#444';
             }
+            // Закат (17-19)
+            else if (time >= 17 && time < 19) {
+                const factor = (time - 17) / 2;
+                skyColor = `rgb(${Math.floor(158 + (255-158) * factor)}, ${Math.floor(206 + (107-206) * factor)}, ${Math.floor(235 + (62-235) * factor)})`;
+                groundColor = '#3d5d49';
+                sunMoonColor = '#ff6700';
+                buildingColor = '#555';
+                windowColor = '#b3721f';
             }
+            // Вечер (19-21)
+            else if (time >= 19 && time < 21) {
+                const factor = (time - 19) / 2;
+                skyColor = `rgb(${Math.floor(255 - (255-20) * factor)}, ${Math.floor(107 - (107-42) * factor)}, ${Math.floor(62 - (62-87) * factor)})`;
+                groundColor = '#2e463a';
+                sunMoonColor = `rgb(${Math.floor(255 - 200 * factor)}, ${Math.floor(103 - 43 * factor)}, ${Math.floor(0 + 230 * factor)})`;
+                buildingColor = '#444';
+                windowColor = '#ffdb70';
+                starsOpacity = factor;
             }
+            // Ночь (21-5)
+            else {
+                skyColor = '#14283b';
+                groundColor = '#1e2e26';
+                sunMoonColor = '#e0e0e0';
+                buildingColor = '#333';
+                windowColor = '#ffdb70';
+                starsOpacity = 1;
             }
+            // Применяем цвета с учетом громкости (яркости)
+            const brightnessMultiplier = 0.7 + volume * 0.3;
+            // Функция для увеличения яркости цвета
+            function adjustBrightness(hexOrRgb, multiplier) {
+                // Для RGB формата
+                if (hexOrRgb.startsWith('rgb')) {
+                    const rgbValues = hexOrRgb.match(/\d+/g).map(Number);
+                    return `rgb(${Math.min(255, Math.floor(rgbValues[0] * multiplier))}, ${Math.min(255, Math.floor(rgbValues[1] * multiplier))}, ${Math.min(255, Math.floor(rgbValues[2] * multiplier))})`;
+                }
+                // Для HEX формата
+                const hex = hexOrRgb.replace('#', '');
+                let r = parseInt(hex.substring(0, 2), 16);
+                let g = parseInt(hex.substring(2, 4), 16);
+                let b = parseInt(hex.substring(4, 6), 16);
+                r = Math.min(255, Math.floor(r * multiplier));
+                g = Math.min(255, Math.floor(g * multiplier));
+                b = Math.min(255, Math.floor(b * multiplier));
+                return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
             }
+            // Применяем подстроенные цвета
+            sky.style.backgroundColor = skyColor;
+            ground.style.backgroundColor = adjustBrightness(groundColor, brightnessMultiplier);
+            sunMoon.style.backgroundColor = adjustBrightness(sunMoonColor, brightnessMultiplier);
+            buildings.forEach(building => {
+                building.style.backgroundColor = adjustBrightness(buildingColor, brightnessMultiplier);
+            });
+            windows.forEach(window => {
+                // Ночью окна горят
+                if (time >= 19 || time < 7) {
+                    // Случайно определяем, горит ли окно
+                    if (window.dataset.lit === undefined) {
+                        window.dataset.lit = Math.random() > 0.3 ? 'true' : 'false';
+                    }
+                    if (window.dataset.lit === 'true') {
+                        window.style.backgroundColor = adjustBrightness(windowColor, brightnessMultiplier);
                     } else {
+                        window.style.backgroundColor = '#333';
                     }
+                } else {
+                    // Днем окна темные
+                    window.style.backgroundColor = '#444';
+                    delete window.dataset.lit;
                 }
+            });
+            stars.style.opacity = starsOpacity;
+        }
+        // Обработка аудио
+        let audioContext;
+        let analyser;
+        let microphone;
+        let javascriptNode;
+        let hours = 12;
+        let minutes = 0;
+        let lastPitch = 0;
+        let lastVolume = 0;
+        function startAudioProcessing() {
+            const startBtn = document.getElementById('start-btn');
+            const stopBtn = document.getElementById('stop-btn');
+            startBtn.disabled = true;
+            stopBtn.disabled = false;
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            analyser = audioContext.createAnalyser();
+            analyser.fftSize = 2048;
+            // Запрашиваем доступ к микрофону
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(function(stream) {
+                    microphone = audioContext.createMediaStreamSource(stream);
+                    microphone.connect(analyser);
+                    // Создаем обработчик для анализа звука
+                    javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
+                    analyser.connect(javascriptNode);
+                    javascriptNode.connect(audioContext.destination);
+                    // Устанавливаем обработчик для анализа звука
+                    javascriptNode.onaudioprocess = processAudio;
+                })
+                .catch(function(err) {
+                    console.error('Ошибка доступа к микрофону:', err);
+                    alert('Не удалось получить доступ к микрофону. Проверьте настройки браузера.');
+                    startBtn.disabled = false;
+                    stopBtn.disabled = true;
+                });
+        }
+        function stopAudioProcessing() {
+            const startBtn = document.getElementById('start-btn');
+            const stopBtn = document.getElementById('stop-btn');
+            startBtn.disabled = false;
+            stopBtn.disabled = true;
+            if (javascriptNode) {
+                javascriptNode.onaudioprocess = null;
+                javascriptNode.disconnect();
+            }
+            if (microphone) {
+                microphone.disconnect();
+            }
+            if (analyser) {
+                analyser.disconnect();
+            }
+            if (audioContext) {
+                audioContext.close();
             }
         }
+        function processAudio(event) {
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            analyser.getByteFrequencyData(dataArray);
+            // Вычисляем среднюю частоту (тембр)
+            let sum = 0;
+            let count = 0;
+            // Используем только значимую часть спектра
+            for (let i = 5; i < bufferLength / 4; i++) {
+                if (dataArray[i] > 10) { // Игнорируем шум
+                    sum += i * dataArray[i];
+                    count += dataArray[i];
+                }
+            }
+            // Вычисляем среднюю громкость
+            let volumeSum = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                volumeSum += dataArray[i];
+            }
+            let volumeAvg = volumeSum / bufferLength / 255;
+            if (count > 0) {
+                const normalizedPitch = sum / count / (bufferLength / 8);
+                // Сглаживаем значения для более плавного перехода
+                lastPitch = lastPitch * 0.7 + normalizedPitch * 0.3;
+                lastVolume = lastVolume * 0.7 + volumeAvg * 0.3;
+                // Обновляем отображение текущих значений
+                document.getElementById('pitch-display').textContent = `Тембр: ${lastPitch.toFixed(2)}`;
+                document.getElementById('volume-display').textContent = `Громкость: ${lastVolume.toFixed(2)}`;
+                // Меняем время суток в зависимости от тембра
+                hours = Math.floor(lastPitch * 24);
+                minutes = Math.floor((lastPitch * 24 - hours) * 60);
+                // Обновляем отображение времени
+                document.getElementById('time-display').textContent =
+                    `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+                // Обновляем сцену
+                updateTimeOfDay(hours, minutes, lastPitch, lastVolume);
+            }
         }
+        // Инициализация
+        window.onload = function() {
+            setupScene();
+            updateTimeOfDay(hours, minutes, 0.5, 0.5);
+            // Устанавливаем обработчики событий для кнопок
+            document.getElementById('start-btn').addEventListener('click', startAudioProcessing);
+            document.getElementById('stop-btn').addEventListener('click', stopAudioProcessing);
+            // Устанавливаем интервал для обновления времени даже без звука
+            setInterval(function() {
+                if (!audioContext) {
+                    minutes++;
+                    if (minutes >= 60) {
+                        minutes = 0;
+                        hours++;
+                        if (hours >= 24) {
+                            hours = 0;
+                        }
+                    }
+                    document.getElementById('time-display').textContent =
+                        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+                    updateTimeOfDay(hours, minutes, hours / 24, 0.5);
+                }
+            }, 1000);
+        };
+    </script>
 </body>
 </html>