<script src="https://telegram.org/js/telegram-web-app.js"></script> <style> body { background: var(--tg-theme-bg-color); color: var(--tg-theme-text-color); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; padding: 20px; margin: 0; } .container { max-width: 600px; margin: 0 auto; } h1 { font-size: 24px; margin-bottom: 20px; text-align: center; } .btn { background: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border: none; padding: 12px 20px; border-radius: 10px; font-size: 16px; cursor: pointer; margin: 5px; width: 100%; transition: opacity 0.3s; } .btn:disabled { opacity: 0.7; cursor: not-allowed; } .file-list { margin-top: 20px; } .file-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--tg-theme-hint-color); } .file-name { flex-grow: 1; margin-right: 10px; word-break: break-all; } .loading { text-align: center; padding: 20px; color: var(--tg-theme-hint-color); } .error { color: #e53935; padding: 10px; text-align: center; background: rgba(229, 57, 53, 0.1); border-radius: 8px; margin: 10px 0; } </style> </head> <body> <div class="container"> <h1>📁 Мой Яндекс.Диск</h1> <div id="auth-section"> <button class="btn" onclick="requestYandexAuth()">🔐 Авторизация Яндекс</button> </div> <div id="main-section" style="display: none;"> <button class="btn" onclick="listFiles('/')">🔄 Обновить список файлов</button> <button class="btn" onclick="uploadFile()">📤 Загрузить файл</button> <div class="file-list" id="file-list"> <div class="loading">Загрузка списка файлов...</div> </div> </div> <div id="error-container"></div> </div> <script> // Инициализация WebApp Telegram Telegram.WebApp.ready(); Telegram.WebApp.expand(); // Раскрываем приложение на весь экран const user = Telegram.WebApp.initDataUnsafe.user; // Данные пользователя Telegram const backendUrl = 'https://your-backend.com'; // Замените на URL вашего бэкенда // Проверяем статус авторизации при загрузке checkAuthStatus(); // Функция проверки статуса авторизации function checkAuthStatus() { fetch(`${backendUrl}/api/auth/status`, { method: 'GET', headers: { 'X-Telegram-Init-Data': Telegram.WebApp.initData } }) .then(response => response.json()) .then(data => { if (data.authenticated) { document.getElementById('auth-section').style.display = 'none'; document.getElementById('main-section').style.display = 'block'; listFiles('/'); } else { document.getElementById('auth-section').style.display = 'block'; document.getElementById('main-section').style.display = 'none'; } }) .catch(error => { showError('Ошибка проверки авторизации: ' + error.message); }); } // Функция для авторизации через Яндекс function requestYandexAuth() { // Открываем окно авторизации Яндекс Telegram.WebApp.openLink(`${backendUrl}/api/auth/yandex`); } // Функция для получения списка файлов function listFiles(path) { document.getElementById('file-list').innerHTML = '<div class="loading">Загрузка списка файлов...</div>'; fetch(`${backendUrl}/api/files?path=${encodeURIComponent(path)}`, { method: 'GET', headers: { 'X-Telegram-Init-Data': Telegram.WebApp.initData } }) .then(response => response.json()) .then(files => { let filesHtml = ''; if (files.items && files.items.length > 0) { files.items.forEach(item => { filesHtml += ` <div class="file-item"> <span class="file-name">${item.type === 'dir' ? '📁' : '📄'} ${item.name}</span> ${item.type !== 'dir' ? `<button class="btn" onclick="downloadFile('${item.path}', '${item.name}')" style="width: auto;">📥</button>` : `<button class="btn" onclick="listFiles('${item.path}')" style="width: auto;">📂</button>` } </div> `; }); } else { filesHtml = '<div class="loading">Папка пуста</div>'; } document.getElementById('file-list').innerHTML = filesHtml; }) .catch(error => { showError('Ошибка загрузки списка файлов: ' + error.message); }); } // Функция для загрузки файла function uploadFile() { // Создаем input для выбора файла const input = document.createElement('input'); input.type = 'file'; input.style.display = 'none'; document.body.appendChild(input); input.addEventListener('change', function() { if (this.files && this.files[0]) { const formData = new FormData(); formData.append('file', this.files[0]); fetch(`${backendUrl}/api/upload`, { method: 'POST', headers: { 'X-Telegram-Init-Data': Telegram.WebApp.initData }, body: formData }) .then(response => response.json()) .then(result => { if (result.success) { Telegram.WebApp.showPopup({ title: 'Успех', message: 'Файл успешно загружен', buttons: [{ type: 'ok' }] }); listFiles('/'); // Обновляем список файлов } else { showError('Ошибка загрузки файла: ' + result.error); } }) .catch(error => { showError('Ошибка загрузки файла: ' + error.message); }); } document.body.removeChild(input); }); input.click(); } // Функция для скачивания файла function downloadFile(path, name) { fetch(`${backendUrl}/api/download?path=${encodeURIComponent(path)}`, { method: 'GET', headers: { 'X-Telegram-Init-Data': Telegram.WebApp.initData } }) .then(response => response.blob()) .then(blob => { // Создаем ссылку для скачивания const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = name; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); Telegram.WebApp.showPopup({ title: 'Успех', message: 'Файл успешно скачан', buttons: [{ type: 'ok' }] }); }) .catch(error => { showError('Ошибка скачивания файла: ' + error.message); }); } // Функция для отображения ошибок function showError(message) { const errorContainer = document.getElementById('error-container'); errorContainer.innerHTML = `<div class="error">${message}</div>`; setTimeout(() => { errorContainer.innerHTML = ''; }, 5000); } // Обработчик сообщений от бэкенда (для OAuth callback) window.addEventListener('message', function(event) { if (event.origin === backendUrl) { if (event.data === 'auth_success') { checkAuthStatus(); } } }); </script> </body> </html>