<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playdough LLC - Innovative VR Experiences</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #121212, #0088cc);
            color: #f1f1f1;
            line-height: 1.6;
        }

        h1, h2, h3 {
            font-weight: 700;
        }

        #language-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        #popup-content {
            background: linear-gradient(135deg, #121212, #00bcd4);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            color: #fff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
        }

        #popup-content h2 {
            margin-bottom: 20px;
        }

        .language-btn {
            display: inline-block;
            margin: 10px;
            padding: 15px 30px;
            font-size: 1.2rem;
            background: rgba(0, 188, 212, 0.9);
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }

        .language-btn:hover {
            background: rgba(0, 150, 167, 0.9);
        }

        header, nav, section, footer {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.content-visible header,
        body.content-visible nav,
        body.content-visible section,
        body.content-visible footer {
            opacity: 1;
        }

        nav {
            display: flex;
            justify-content: center;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px 0;
            position: sticky;
            top: 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 20px;
            font-size: 1.2rem;
            font-weight: 600;
            padding: 10px 20px;
            border-radius: 30px;
        }

        nav a:hover {
            background: rgba(0, 188, 212, 0.8);
        }

        section {
            padding: 60px 10%;
            margin: 30px auto;
            background: rgba(18, 18, 18, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        footer {
            background: #121212;
            color: #aaa;
            padding: 30px 20px;
            text-align: center;
        }

        footer a {
            color: #00bcd4;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="language-popup">
        <div id="popup-content">
            <h2 id="popup-title">请选择您的语言</h2>
            <button class="language-btn" data-lang="zh">中文</button>
            <button class="language-btn" data-lang="en">English</button>
        </div>
    </div>

    <header>
        <h1 id="title">Playdough LLC</h1>
        <p id="subtitle">Innovative VR Experiences for the Future</p>
    </header>

    <nav>
        <a href="#about" id="about-link">About Us</a>
        <a href="#vision" id="vision-link">Our Vision</a>
        <a href="#terms" id="terms-link">Terms of Service</a>
        <a href="#contact" id="contact-link">Contact Us</a>
    </nav>

    <section id="about">
        <h2 id="about-heading">About Us</h2>
        <p id="about-content">Playdough LLC is dedicated to pushing the boundaries of virtual reality. Our team focuses on creating games and experiences for the Pico 4, blending cutting-edge technology with immersive storytelling to bring new worlds to life.</p>
    </section>

    <section id="vision">
        <h2 id="vision-heading">Our Vision</h2>
        <p id="vision-content">Our mission is to create virtual reality experiences that challenge traditional gameplay and storytelling, offering players new dimensions of engagement and interaction.</p>
    </section>

    <section id="terms">
        <h2 id="terms-heading">Terms of Service</h2>
        <p id="terms-content">By accessing or using our applications, you agree to the following terms: You may use our apps only for lawful purposes, and all content is protected under copyright law.</p>
    </section>

    <section id="contact">
        <h2 id="contact-heading">Contact Us</h2>
        <p id="contact-content">We’d love to hear from you! Reach out via email at <a href="mailto:playdough1122@gmail.com">playdough1122@gmail.com</a>.</p>
    </section>

    <footer>
        <p>&copy; 2024 Playdough LLC. All rights reserved.</p>
        <p>Email: <a href="mailto:playdough1122@gmail.com">playdough1122@gmail.com</a></p>
    </footer>

    <script>
        const translations = {
            en: {
                title: "Playdough LLC",
                subtitle: "Innovative VR Experiences for the Future",
                "about-heading": "About Us",
                "about-content": "Playdough LLC is dedicated to pushing the boundaries of virtual reality. Our team focuses on creating games and experiences for the Pico 4, blending cutting-edge technology with immersive storytelling to bring new worlds to life.",
                "vision-heading": "Our Vision",
                "vision-content": "Our mission is to create virtual reality experiences that challenge traditional gameplay and storytelling, offering players new dimensions of engagement and interaction.",
                "terms-heading": "Terms of Service",
                "terms-content": "By accessing or using our applications, you agree to the following terms: You may use our apps only for lawful purposes, and all content is protected under copyright law.",
                "contact-heading": "Contact Us",
                "contact-content": "We’d love to hear from you! Reach out via email at",
                "popup-title": "Please Select Your Language",
                "about-link": "About Us",
                "vision-link": "Our Vision",
                "terms-link": "Terms of Service",
                "contact-link": "Contact Us"
            },
            zh: {
                title: "Playdough LLC",
                subtitle: "创新的VR体验",
                "about-heading": "关于我们",
                "about-content": "Playdough LLC致力于推动虚拟现实的边界。我们的团队专注于为Pico 4创建游戏和体验，将尖端技术与沉浸式叙事相结合，为玩家带来新的世界。",
                "vision-heading": "我们的愿景",
                "vision-content": "我们的使命是创建具有挑战性的虚拟现实体验，为玩家提供新的互动和参与维度。",
                "terms-heading": "服务条款",
                "terms-content": "通过访问或使用我们的应用程序，您同意以下条款：您只能将我们的应用程序用于合法目的，所有内容均受版权法保护。",
                "contact-heading": "联系我们",
                "contact-content": "我们很高兴听到您的意见！通过电子邮件与我们联系",
                "popup-title": "请选择您的语言",
                "about-link": "关于我们",
                "vision-link": "我们的愿景",
                "terms-link": "服务条款",
                "contact-link": "联系我们"
            }
        };

        const languageButtons = document.querySelectorAll('.language-btn');
        const body = document.body;
        const languagePopup = document.getElementById('language-popup');
        
        languageButtons.forEach(button => {
            button.addEventListener('click', () => {
                const selectedLanguage = button.getAttribute('data-lang');
                
                for (const key in translations[selectedLanguage]) {
                    const element = document.getElementById(key);
                    if (element) {
                        element.textContent = translations[selectedLanguage][key];
                    }
                }

                languagePopup.style.display = 'none';
                body.classList.add('content-visible');
            });
        });
    </script>
</body>
</html>
