index.html - master - k18/alta

index.html
557 строк20 KB
Николай Мартынов
create index.html
22 янв 2026, 11:27
22 янв 2026, 11:2725b7ce4
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Поддержка приложения Альта: Цели - планировщик целей для iOS">
    <link rel="icon" type="image/png" href="app.png">
    <link rel="apple-touch-icon" href="app.png">
    <meta property="og:title" content="Альта: Цели Support">
    <meta property="og:description" content="Goal planner with calendar and HealthKit for iOS">
    <meta property="og:image" content="https://k18.gitverse.site/planner/app.png">
    <meta property="og:url" content="https://k18.gitverse.site/planner/">
    <title>Поддержка Альта: Цели</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #c8363a 0%, #e74c50 50%, #ff6b6b 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 700px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
            position: relative;
        }
        
        .language-switcher {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 100;
        }
        
        .lang-btn {
            background: rgba(255,255,255,0.3);
            border: 2px solid rgba(255,255,255,0.5);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .lang-btn:hover {
            background: rgba(255,255,255,0.5);
            transform: scale(1.05);
        }
        
        .header {
            background: linear-gradient(135deg, #c8363a 0%, #e74c50 50%, #ff6b6b 100%);
            padding: 40px 30px;
            text-align: center;
            color: white;
        }
        
        .app-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            border-radius: 22px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .app-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .header h1 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 16px;
            opacity: 0.95;
            line-height: 1.5;
        }
        
        .tabs {
            display: flex;
            background: #f5f5f7;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            background: none;
            border: none;
            font-size: 16px;
            font-weight: 500;
            color: #666;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            background: white;
            color: #c8363a;
            border-bottom: 3px solid #c8363a;
        }
        
        .content {
            padding: 40px 30px;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            padding: 20px;
            background: #f9f9fb;
            border-radius: 12px;
            margin-bottom: 15px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .contact-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #c8363a 0%, #e74c50 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            font-size: 24px;
            overflow: hidden;
        }
        
        .contact-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 8px;
        }
        
        .contact-icon.email {
            font-size: 28px;
        }
        
        .contact-info {
            flex: 1;
        }
        
        .contact-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .contact-link {
            font-size: 18px;
            color: #c8363a;
            text-decoration: none;
            font-weight: 500;
        }
        
        .contact-link:hover {
            text-decoration: underline;
        }
        
        .privacy-section {
            margin-bottom: 25px;
        }
        
        .privacy-section h3 {
            font-size: 18px;
            color: #c8363a;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .privacy-list {
            list-style: none;
            padding: 0;
        }
        
        .privacy-list li {
            padding: 12px 0 12px 30px;
            position: relative;
            line-height: 1.6;
            color: #555;
        }
        
        .privacy-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #c8363a;
            font-weight: bold;
            font-size: 18px;
        }
        
        .description {
            background: #f9f9fb;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
            line-height: 1.6;
            color: #555;
        }
        
        .lang-content {
            display: none;
        }
        
        .lang-content.active {
            display: block;
        }
        
        @media (max-width: 600px) {
            .header {
                padding: 30px 20px;
            }
            
            .header h1 {
                font-size: 26px;
            }
            
            .content {
                padding: 30px 20px;
            }
            
            .tab {
                font-size: 14px;
                padding: 12px;
            }
            
            .contact-item {
                flex-direction: column;
                text-align: center;
            }
            
            .contact-icon {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .language-switcher {
                top: 15px;
                right: 15px;
            }
            
            .lang-btn {
                padding: 6px 12px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="language-switcher">
            <button class="lang-btn" onclick="toggleLanguage()">EN</button>
        </div>
        
        <!-- Русская версия -->
        <div class="lang-content active" id="ru">
            <div class="header">
                <div class="app-icon">
                    <img src="app.png" alt="Альта: Цели">
                </div>
                <h1>Альта: Цели</h1>
                <p>Планировщик целей с календарем и HealthKit для iOS</p>
            </div>
            
            <div class="tabs">
                <button class="tab active" onclick="showTabWithUrl('support')">Поддержка</button>
                <button class="tab" onclick="showTabWithUrl('privacy')">Конфиденциальность</button>
            </div>
            
            <div class="content">
                <div id="support-ru" class="tab-content active">
                    <h2>Связаться с нами</h2>
                    <p class="description">
                        Возникли вопросы или нужна помощь? Мы всегда рады помочь! 
                        Выберите удобный способ связи, и мы ответим вам в рабочее время.
                    </p>
                    
                    <div class="contact-item">
                        <div class="contact-icon email">✉️</div>
                        <div class="contact-info">
                            <div class="contact-label">Email поддержка</div>
                            <a href="mailto:kolyapusya@me.com" class="contact-link">kolyapusya@me.com</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <img src="tg.png" alt="Telegram">
                        </div>
                        <div class="contact-info">
                            <div class="contact-label">Telegram</div>
                            <a href="https://t.me/km018" target="_blank" class="contact-link">@km018</a>
                        </div>
                    </div>
                </div>
                
                <div id="privacy-ru" class="tab-content">
                    <h2>Политика конфиденциальности</h2>
                    <p class="description">
                        Мы серьезно относимся к защите ваших данных и обеспечиваем 
                        прозрачность в том, как используем информацию.
                    </p>
                    
                    <div class="privacy-section">
                        <h3>Что мы используем</h3>
                        <ul class="privacy-list">
                            <li>Аналитику для оптимизации функций и улучшения пользовательского опыта</li>
                            <li>Рекламу для поддержки разработки и предоставления бесплатных функций</li>
                            <li>Защищенное хранение ваших данных с использованием современных технологий шифрования</li>
                        </ul>
                    </div>
                    
                    <div class="privacy-section">
                        <h3>Ваши данные в безопасности</h3>
                        <ul class="privacy-list">
                            <li>Данные HealthKit хранятся только на вашем устройстве</li>
                            <li>Мы не передаем личную информацию третьим лицам</li>
                            <li>Все цели и планы синхронизируются через защищенное соединение</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Английская версия -->
        <div class="lang-content" id="en">
            <div class="header">
                <div class="app-icon">
                    <img src="app.png" alt="Alta: Goals">
                </div>
                <h1>Alta: Goals</h1>
                <p>Goal planner with calendar and HealthKit for iOS</p>
            </div>
            
            <div class="tabs">
                <button class="tab active" onclick="showTabWithUrl('support')">Support</button>
                <button class="tab" onclick="showTabWithUrl('privacy')">Privacy</button>
            </div>
            
            <div class="content">
                <div id="support-en" class="tab-content active">
                    <h2>Contact Us</h2>
                    <p class="description">
                        Have questions or need help? We're always happy to assist! 
                        Choose a convenient way to contact us, and we'll respond during business hours.
                    </p>
                    
                    <div class="contact-item">
                        <div class="contact-icon email">✉️</div>
                        <div class="contact-info">
                            <div class="contact-label">Email Support</div>
                            <a href="mailto:kolyapusya@me.com" class="contact-link">kolyapusya@me.com</a>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <img src="tg.png" alt="Telegram">
                        </div>
                        <div class="contact-info">
                            <div class="contact-label">Telegram</div>
                            <a href="https://t.me/km018" target="_blank" class="contact-link">@km018</a>
                        </div>
                    </div>
                </div>
                
                <div id="privacy-en" class="tab-content">
                    <h2>Privacy Policy</h2>
                    <p class="description">
                        We take your data protection seriously and provide 
                        transparency about how we use your information.
                    </p>
                    
                    <div class="privacy-section">
                        <h3>What We Use</h3>
                        <ul class="privacy-list">
                            <li>Analytics to optimize features and improve user experience</li>
                            <li>Advertising to support development and provide free features</li>
                            <li>Secure storage of your data using modern encryption technologies</li>
                        </ul>
                    </div>
                    
                    <div class="privacy-section">
                        <h3>Your Data is Safe</h3>
                        <ul class="privacy-list">
                            <li>HealthKit data is stored only on your device</li>
                            <li>We do not share personal information with third parties</li>
                            <li>All goals and plans sync through a secure connection</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let currentLang = 'ru';
        let currentPage = 'support';
        
        function showTabWithUrl(page) {
            currentPage = page;
            const lang = currentLang;
            
            // Показываем нужную вкладку
            const tabContents = document.querySelectorAll(`#${lang} .tab-content`);
            tabContents.forEach(content => content.classList.remove('active'));
            
            const tabs = document.querySelectorAll(`#${lang} .tab`);
            tabs.forEach(tab => tab.classList.remove('active'));
            
            document.getElementById(page + '-' + lang).classList.add('active');
            event.target.classList.add('active');
            
            // Обновляем meta теги
            updateMetaTags(page, lang);
            
            // Плавная прокрутка вверх
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        
        function toggleLanguage() {
            const ruContent = document.getElementById('ru');
            const enContent = document.getElementById('en');
            const langBtn = document.querySelector('.lang-btn');
            
            if (currentLang === 'ru') {
                ruContent.classList.remove('active');
                enContent.classList.add('active');
                langBtn.textContent = 'RU';
                currentLang = 'en';
            } else {
                enContent.classList.remove('active');
                ruContent.classList.add('active');
                langBtn.textContent = 'EN';
                currentLang = 'ru';
            }
            
            // Обновляем meta теги при смене языка
            updateMetaTags(currentPage, currentLang);
        }
        
        function updateMetaTags(page, lang) {
            const titles = {
                'support': {
                    'ru': 'Поддержка Альта: Цели',
                    'en': 'Alta: Goals Support'
                },
                'privacy': {
                    'ru': 'Политика конфиденциальности - Альта: Цели',
                    'en': 'Privacy Policy - Alta: Goals'
                }
            };
            
            const descriptions = {
                'support': {
                    'ru': 'Свяжитесь с поддержкой Альта: Цели через email или Telegram',
                    'en': 'Contact Alta: Goals support via email or Telegram'
                },
                'privacy': {
                    'ru': 'Политика конфиденциальности приложения Альта: Цели',
                    'en': 'Alta: Goals app privacy policy'
                }
            };
            
            document.title = titles[page][lang];
            const metaDesc = document.querySelector('meta[name="description"]');
            if (metaDesc) {
                metaDesc.setAttribute('content', descriptions[page][lang]);
            }
        }
        
        // Определяем начальную страницу из URL
        window.addEventListener('DOMContentLoaded', function() {
            const path = window.location.pathname;
            
            // Определяем какую страницу показать
            if (path.includes('/privacy')) {
                currentPage = 'privacy';
                
                // Скрываем все вкладки
                const allTabContents = document.querySelectorAll('.tab-content');
                allTabContents.forEach(content => content.classList.remove('active'));
                
                const allTabs = document.querySelectorAll('.tab');
                allTabs.forEach(tab => tab.classList.remove('active'));
                
                // Показываем privacy
                document.getElementById('privacy-ru').classList.add('active');
                document.getElementById('privacy-en').classList.add('active');
                
                // Активируем вторую вкладку
                const ruTabs = document.querySelectorAll('#ru .tab');
                const enTabs = document.querySelectorAll('#en .tab');
                ruTabs[1].classList.add('active');
                enTabs[1].classList.add('active');
            } else {
                // По умолчанию support уже активен
                currentPage = 'support';
            }
            
            updateMetaTags(currentPage, currentLang);
        });
    </script>
</body>
</html>