script.js

// Language Configuration
const translations = {
    en: {
        'home': 'Home',
        'about': 'About',
        'blog': 'Discord',
        'contact': 'Contact',
        'hero-title': 'Hiroke Ninky',
        'hero-subtitle': 'We are at present working on an awesome new site. Stay Tuned!',
        'explore-posts': 'Explore Posts',
        'about-me': 'About Me',
        'about-title': 'About Me',
        'about-description': 'Hiroke Ninky is a demon VTuber from indonesia who live and is born in Stars City.',
        'about-description-2': 'Hello my name Hiroke Ninky you call me Hiro/Ninky, I am a human reborn as a demon, because I broke my promise with the devil I ended up being half a demon and a human.',
        'featured-posts': 'Featured Posts',
        'post-1-title': 'Getting Started with Web Development',
        'post-1-desc': 'Learn the basics of HTML, CSS, and JavaScript...',
        'post-2-title': 'The Art of Photography',
        'post-2-desc': 'Discover tips and tricks for better photos...',
        'post-3-title': 'Travel Adventures',
        'post-3-desc': 'Exploring hidden gems around the world...',
        'read-more': 'Read More',
        'share': 'Share',
        'footer-about': 'About Me',
        'footer-about-desc': 'Hello my name Hiroke Ninky you call me Hiro/Ninky, I am a human reborn as a demon, because I broke my promise with the devil I ended up being half a demon and a human.',
        'footer-quick-links': 'Quick Links',
        'footer-connect': 'Connect With Me',
        'all-rights': 'All rights reserved.',
        'privacy-policy': 'Privacy Policy',
        'terms': 'Terms of Service',
        'elegant-title': 'JOIN US!',
        'buttons-title': 'More Link',
        'primary-btn': 'Support in BagiBagi',
        'outline-btn': 'Support in Saweria',
        'ghost-btn': 'Support in Sociabuzz',
        'social-title': 'Connect With Me',
        'cards-title': 'Elegant Cards',
        'connect-subtitle': 'Let\'s connect across platforms for collaboration and creative idea exchange',
        'card-1-title': 'Premium Design',
        'card-1-desc': 'Elegant and modern design elements',
        'card-2-title': 'Clean Code',
        'card-2-desc': 'Well-structured and maintainable',
        'card-3-title': 'Responsive',
        'card-3-desc': 'Perfect on all devices'
    },
    id: {
        'home': 'Beranda',
        'about': 'Tentang',
        'blog': 'Discord',
        'contact': 'Kontak',
        'hero-title': 'Hiroke Ninky',
        'hero-subtitle': 'Kami sedang mengerjakan situs baru yang luar biasa. Nantikan!',
        'explore-posts': 'Jelajahi Artikel',
        'about-me': 'Tentang Saya',
        'about-title': 'Tentang Saya',
        'about-description': 'Hiroke Ninky adalah VTuber iblis dari Indonesia yang tinggal dan lahir di Stars City.',
        'about-description-2': 'Halo nama saya Hiroke Ninky kamu bisa memanggil saya Hiro/Ninky, saya adalah manusia yang terlahir kembali sebagai iblis, karena saya melanggar janji dengan iblis saya akhirnya menjadi setengah iblis dan setengah manusia.',
        'featured-posts': 'Artikel Unggulan',
        'post-1-title': 'Memulai Pengembangan Web',
        'post-1-desc': 'Pelajari dasar-dasar HTML, CSS, dan JavaScript...',
        'post-2-title': 'Seni Fotografi',
        'post-2-desc': 'Temukan tips dan trik untuk foto yang lebih baik...',
        'post-3-title': 'Petualangan Perjalanan',
        'post-3-desc': 'Mengeksplorasi tempat-tempat tersembunyi di seluruh dunia...',
        'read-more': 'Baca Selengkapnya',
        'share': 'Bagikan',
        'footer-about': 'Tentang Saya',
        'footer-about-desc': 'Halo nama saya Hiroke Ninky kamu bisa memanggil saya Hiro/Ninky, saya adalah manusia yang terlahir kembali sebagai iblis, karena saya melanggar janji dengan iblis saya akhirnya menjadi setengah iblis dan setengah manusia.',
        'footer-quick-links': 'Tautan Cepat',
        'footer-connect': 'Hubungi Saya',
        'all-rights': 'Hak Cipta Dilindungi.',
        'privacy-policy': 'Kebijakan Privasi',
        'terms': 'Ketentuan Layanan',
        'elegant-title': 'BERGABUNGLAH!',
        'buttons-title': 'Link Lainnya',
        'primary-btn': 'Dukungan di Saweria',
        'outline-btn': 'Dukungan di BagiBagi',
        'ghost-btn': 'Dukungan di Sociabuzz',
        'cards-title': 'Kartu Elegan',
        'connect-subtitle': 'Mari terhubung di berbagai platform untuk kolaborasi dan pertukaran ide kreatif',
        'card-1-title': 'Desain Premium',
        'card-1-desc': 'Elemen desain yang elegan dan modern',
        'card-2-title': 'Kode Bersih',
        'card-2-desc': 'Terstruktur dan mudah dipelihara',
        'card-3-title': 'Responsif',
        'card-3-desc': 'Sempurna di semua perangkat'
    },
    ja: {
        'home': 'ホーム',
        'about': '概要',
        'blog': '不和',
        'contact': 'お問い合わせ',
        'hero-title': 'ヒロケ・ニンキー',
        'hero-subtitle': '現在、素晴らしい新しいサイトを制作中です。お楽しみに！',
        'explore-posts': '記事を探索',
        'about-me': '私について',
        'about-title': '私について',
        'about-description': 'ヒロケ・ニンキーはインドネシア出身の悪魔VTuberで、Stars Cityに住み、生まれました。',
        'about-description-2': 'こんにちは、私の名前はヒロケ・ニンキーです。ヒロ/ニンキーと呼んでください。私は人間として生まれ変わり、悪魔になりました。悪魔との約束を破ったため、半人半悪魔になってしまいました。.',
        'featured-posts': '注目の記事',
        'post-1-title': 'Web開発入門',
        'post-1-desc': 'HTML、CSS、JavaScriptの基礎を学ぶ...',
        'post-2-title': '写真の芸術',
        'post-2-desc': 'より良い写真のためのヒントとコツを発見...',
        'post-3-title': '旅行の冒険',
        'post-3-desc': '世界中の隠れた宝石を探索...',
        'read-more': '続きを読む',
        'share': '共有',
        'footer-about': '私について',
        'footer-about-desc': 'こんにちは、私の名前はヒロケ・ニンキーです。ヒロ/ニンキーと呼んでください。私は人間として生まれ変わり、悪魔になりました。悪魔との約束を破ったため、半人半悪魔になってしまいました。.',
        'footer-quick-links': 'クイックリンク',
        'footer-connect': '連絡先',
        'all-rights': '全著作権所有。',
        'privacy-policy': 'プライバシーポリシー',
        'terms': '利用規約',
        'elegant-title': '参加しよう！',
        'buttons-title': '詳細リンク',
        'primary-btn': 'サウェリアでのサポート',
        'outline-btn': 'BagiBagiでサポート',
        'ghost-btn': 'Sociabuzzでのサポート',
        'social-title': 'ソーシャルメディア',
        'cards-title': 'エレガントなカード',
        'connect-subtitle': 'さまざまなプラットフォームでつながり、コラボレーションやクリエイティブなアイデアを共有しましょう',
        'card-1-title': 'プレミアムデザイン',
        'card-1-desc': 'エレガントでモダンなデザイン要素',
        'card-2-title': 'クリーンコード',
        'card-2-desc': '構造化され、保守性の高いコード',
        'card-3-title': 'レスポンシブ',
        'card-3-desc': 'すべてのデバイスで完璧'
    }
};

// Language Switching Functionality
const languageSelector = document.querySelector('.language-selector');
const langButtons = document.querySelectorAll('.lang-btn');

// Set initial language from localStorage or default to English
const currentLang = localStorage.getItem('language') || 'en';
document.documentElement.lang = currentLang;
updateLanguage(currentLang);

langButtons.forEach(button => {
    button.addEventListener('click', (e) => {
        e.preventDefault();
        const lang = button.getAttribute('data-lang');
        updateLanguage(lang);
        localStorage.setItem('language', lang);
    });
});

function updateLanguage(lang) {
    // Update active button
    langButtons.forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
    });

    // Update all translatable elements
    document.querySelectorAll('[data-lang]').forEach(element => {
        const key = element.getAttribute('data-lang');
        if (translations[lang] && translations[lang][key]) {
            element.textContent = translations[lang][key];
        }
    });
}

// Dark Mode Toggle
const themeToggle = document.querySelector('.theme-toggle');
const body = document.body;

// Language Switching
const elementsWithLang = document.querySelectorAll('[data-lang]');

// Typing Animation
const typingText = document.querySelector('.typing-text');
const text = "HIROKE";
let index = 0;

// Header Scroll Effect
const header = document.querySelector('.header');

// Check for saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
    updateThemeIcon();
}

// Theme toggle functionality
themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    const currentTheme = body.classList.contains('dark-mode') ? 'dark-mode' : '';
    localStorage.setItem('theme', currentTheme);
    updateThemeIcon();
});

function updateThemeIcon() {
    const icon = themeToggle.querySelector('i');
    if (body.classList.contains('dark-mode')) {
        icon.classList.remove('fa-moon');
        icon.classList.add('fa-sun');
    } else {
        icon.classList.remove('fa-sun');
        icon.classList.add('fa-moon');
    }
}

// Check for saved language preference
const savedLang = localStorage.getItem('language') || 'en';
setLanguage(savedLang);

// Language switching functionality
langButtons.forEach(button => {
    button.addEventListener('click', () => {
        const lang = button.dataset.lang;
        setLanguage(lang);
        localStorage.setItem('language', lang);
        
        // Update active button
        langButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
    });
});

function setLanguage(lang) {
    elementsWithLang.forEach(element => {
        const key = element.dataset.lang;
        if (translations[lang] && translations[lang][key]) {
            element.textContent = translations[lang][key];
        }
    });
}

// Typing animation functionality
function type() {
    if (index < text.length) {
        typingText.textContent += text.charAt(index);
        index++;
        setTimeout(type, 200);
    }
}

// Start typing animation when page loads
window.addEventListener('load', () => {
    typingText.textContent = '';
    index = 0;
    type();
});

// Header scroll effect
window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    // Set initial language button active state
    const savedLang = localStorage.getItem('language') || 'en';
    langButtons.forEach(button => {
        if (button.dataset.lang === savedLang) {
            button.classList.add('active');
        }
    });

    // Set initial theme
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
        updateThemeIcon();
    }
});

// Add animation to post cards on scroll
const observerOptions = {
    threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate');
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

document.querySelectorAll('.post-card').forEach(card => {
    observer.observe(card);
});

// Typing Animation
const roles = [
    'Content Creator',
    'Designer',
    'Freelancer'
];

let currentRoleIndex = 0;
let currentText = '';
let isDeleting = false;
let typingSpeed = 100;

function type() {
    const typingText = document.querySelector('.typing-text');
    const currentRole = roles[currentRoleIndex];

    if (isDeleting) {
        currentText = currentRole.substring(0, currentText.length - 1);
        typingText.textContent = currentText;
        if (currentText === '') {
            isDeleting = false;
            currentRoleIndex = (currentRoleIndex + 1) % roles.length;
        }
    } else {
        currentText = currentRole.substring(0, currentText.length + 1);
        typingText.textContent = currentText;
        if (currentText === currentRole) {
            isDeleting = true;
            typingSpeed = 2000; // Pause at the end of typing
        } else {
            typingSpeed = 100; // Normal typing speed
        }
    }

    setTimeout(type, typingSpeed);
}

// Start typing animation when the page loads
document.addEventListener('DOMContentLoaded', () => {
    type();
    // ... rest of existing DOMContentLoaded code ...
});

// User Menu Functionality
const userMenu = document.querySelector('.user-menu');
const userMenuBtn = document.querySelector('.user-menu-btn');
const userMenuText = document.querySelector('.user-menu-text');
const userInfo = document.querySelector('.user-info');
const userStats = document.querySelector('.user-stats');
const loginBtn = document.querySelector('.user-action-btn[data-lang="login"]');
const registerBtn = document.querySelector('.user-action-btn[data-lang="register"]');
const profileBtn = document.querySelector('.user-action-btn[data-lang="profile"]');
const logoutBtn = document.querySelector('.logout-btn');

// Check if user is logged in
function checkLoginState() {
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser) {
        // Update user info
        const userName = document.querySelector('.user-name');
        const userRole = document.querySelector('.user-role');
        const userAvatar = document.querySelector('.user-avatar i');
        
        userName.textContent = currentUser.displayName || currentUser.username;
        userRole.textContent = currentUser.role || 'User';
        userAvatar.style.color = currentUser.avatarColor || '#fff';
        
        // Show/hide appropriate buttons
        userInfo.style.display = 'flex';
        userStats.style.display = 'flex';
        loginBtn.style.display = 'none';
        registerBtn.style.display = 'none';
        profileBtn.style.display = 'flex';
        logoutBtn.style.display = 'flex';
        
        // Update menu text
        userMenuText.textContent = currentUser.displayName || currentUser.username;
        
        // Update stats
        updateUserStats(currentUser.username);
    } else {
        // Reset to guest state
        userInfo.style.display = 'none';
        userStats.style.display = 'none';
        loginBtn.style.display = 'flex';
        registerBtn.style.display = 'flex';
        profileBtn.style.display = 'none';
        logoutBtn.style.display = 'none';
        
        // Update menu text
        userMenuText.textContent = 'Login';
    }
}

// Update user statistics
function updateUserStats(username) {
    const posts = JSON.parse(localStorage.getItem('posts')) || [];
    const userPosts = posts.filter(post => post.username === username);
    const totalComments = userPosts.reduce((acc, post) => acc + (post.comments?.length || 0), 0);
    
    document.querySelector('.stat-value').textContent = userPosts.length;
    document.querySelector('.stat-value + .stat-value').textContent = totalComments;
}

// Handle logout
logoutBtn.addEventListener('click', () => {
    localStorage.removeItem('currentUser');
    checkLoginState();
    window.location.href = 'index.html';
});

// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
    if (!userMenu.contains(e.target)) {
        userMenu.querySelector('.user-dropdown').style.opacity = '0';
        userMenu.querySelector('.user-dropdown').style.visibility = 'hidden';
        userMenu.querySelector('.user-dropdown').style.transform = 'translateY(10px)';
    }
});

// Initialize user menu
checkLoginState();