
 <!-- ************************************************************************************************************* -->
<!-- Container cho các nút đăng nhập và đăng ký -->
<div class="button-container">
    <button id="signupButton" class="signup-button">Đăng Ký</button>
    <button id="loginButton" class="login-button">Đăng Nhập</button>
</div>


<!-- Nút Pricing bên cạnh avatar -->
 <!--
<div id="pricingContainer" class="pricing-container">
    <button id="pricingButton" class="pricing-button">My Plan</button>
</div>
-->


<!-- Modal Pricing -->
<div id="pricingModal" class="pricing-modal">
    <div class="pricing-modal-content">
        <span class="pricing-close">&times;</span>
        <h2 class="pricing-title">Bạn Chọn Cái Chi <img src="please.png" alt="please" class="please-img">
            <span id="subscriptionStatus">Đang kiểm tra...</span>
        </h2>

        <div class="pricing-plans">
        <!-- Free Plan -->
        <div class="pricing-card free">
            <h3 class="plan-title">Miễn Phí</h3>
            <ul class="plan-features">
                <li><i class="fa-solid fa-check"></i> Sử dụng công cụ dịch phiên âm và tiếng việt, dịch ngay từng chữ mà bạn gõ vào</li>
                <li><i class="fa-solid fa-check"></i> Cập nhật bài mới mỗi ngày</li>
                <li><i class="fa-solid fa-check"></i> <span style="color: #6A00FF;">ĐANG KHUYẾN MÃI / ngày</span></li>
            </ul>
            <div class="price-box free-price-box">
            <p class="price">0đ / mãi mãi</p>
            <button class="subscribe-button current-plan" disabled>Your current plan</button>
            </div>
        </div>

        <!-- Standard Plan -->
        <div class="pricing-card standard">
            <h3 class="plan-title">Cơ Bản</h3>
            <ul class="plan-features">
                <li><i class="fa-solid fa-check"></i> Sử dụng công cụ dịch phiên âm và tiếng việt, dịch ngay từng chữ mà bạn gõ vào</li>
                <li><i class="fa-solid fa-check"></i> Cập nhật bài mới mỗi ngày</li>
                <li><i class="fa-solid fa-check"></i> Lưu bài đã làm</li>
                <li><i class="fa-solid fa-check"></i> Xem ai đang tập luyện cùng bạn</li>
                <li><i class="fa-solid fa-check"></i> <span style="color: #6A00FF;">KHÔNG GIỚI HẠN SỐ CÂU / ngày</span></li>
            </ul>
            <div class="price-box standard-price-box">
            <p class="price">390.000đ / mãi mãi</p>
            <button class="subscribe-button standard-plan">Upgrade to Standard</button>
            </div>
            <!-- Container cho mã QR -->
            <div class="qr-container">
            <img src="/DICH-IPA/standard_qr_code.JPG" alt="QR Code for Standard Plan">
            <p id="transferInfoStandard">
                *** Quan Trọng *** <br><br>
                Nội dung chuyển khoản của bạn là: <br><br>
                id <?php echo $userId; ?>
            </p>
            </div>
        </div>

        <!-- Premium Plan -->
        <div class="pricing-card premium">
            <h3 class="plan-title">Siêu Cấp Vip Bờ Rồ</h3>
            <ul class="plan-features">
                <li><i class="fa-solid fa-check"></i> Sử dụng công cụ dịch phiên âm và tiếng việt, dịch ngay từng chữ mà bạn gõ vào</li>
                <li><i class="fa-solid fa-check"></i> Cập nhật bài mới mỗi ngày</li>
                <li><i class="fa-solid fa-check"></i> Lưu bài đã làm</li>
                <li><i class="fa-solid fa-check"></i> Xem ai đang tập luyện cùng bạn</li>
                <li><i class="fa-solid fa-check"></i> <span style="color: #6A00FF;">KHÔNG GIỚI HẠN SỐ CÂU / ngày</span></li>
                <li><i class="fa-solid fa-check"></i> <span style="color: #e51a61; font-size: 20px;">Được trừ 100% số tiền vào khoá học bất kì, dù là ngay ngày mai hay là nhiều năm sau, bất kì khi nào bạn có nhu cầu</span></li>
            </ul>
            <div class="price-box premium-price-box">
            <p class="price">490.000đ / mãi mãi</p>
            <button class="subscribe-button premium-plan">Upgrade to Premium</button>
            </div> 

            <!-- Container cho mã QR -->
            <div class="qr-container">
                <img src="/DICH-IPA/premium_qr_code.JPG" alt="QR Code for Standard Plan">
                <!-- Gắn id="transferInfo" để dễ thay đổi nội dung bằng JS -->
                <p id="transferInfoPremium">
                    *** Quan Trọng *** <br><br>
                    Nội dung chuyển khoản của bạn là: <br><br>
                    id <?php echo $userId; ?>
                </p>
            </div>
                
            </div>

        </div>
    </div>
</div>


<!-- Container để hiển thị avatar và menu sổ xuống -->
<div id="avatarContainer" class="avatar-container" style="display: none;">
    <img id="userAvatar" src="/DICH-IPA/sample_avatar.png" alt="User Avatar" class="user-avatar">
    <!-- Menu sổ xuống -->
    <div id="dropdownMenu" class="dropdown-menu">
        <button id="pricingButton" class="pricing-button">My Plan</button>
        <button id="logoutButton" class="logout-button">Đăng Xuất</button>
    </div>
</div>


<!-- Cửa sổ đăng nhập/đăng ký (Modal) -->
<div id="loginModal" class="login-modal">
    <div class="login-modal-content">

        <div class="login-left-section" id="modalImageSection">
            <img src="/DICH-IPA/tranh_mau.jpg" alt="Property Image" class="login-image">
        </div>

        <div class="login-right-section">
            <span class="login-close">&times;</span>

            <!-- Nội dung Đăng Nhập -->
            <div id="signInContent" class="modal-content-section">
                <h2 class="login-title">Welcome back to <br>THE PRACTICE HOUSE</h2>

                <!--
                <form id="loginForm">
                    <label for="email">Your Email</label>
                    <input type="email" id="email" name="email" placeholder="Enter your email" required>
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
                    <a href="#" class="forgot-password">Forgot Password?</a>
                    <button type="submit" class="login-submit">Đăng Nhập</button>
                </form>
                -->

                <div class="login-divider">Xin Chào</div>

                <div class="social-login">
                    <div class="social-buttons">

                        <!-- Nút Google Login trong phần Đăng Nhập -->
                        <button id="googleLoginButtonSignin" class="google-login">
                        <img src="/DICH-IPA/google-icon.png" alt="Google Icon" class="icon">
                        <span>Sign in with Google</span>
                        </button>

                        <!--
                        <button class="facebook-login">
                            <img src="/DICH-IPA/facebook-icon.png" alt="Facebook Icon" class="icon">
                            <span>Sign in with Facebook</span>
                        </button>
                        -->

                    </div>
                </div>

                <p class="any-account">Don't have an account? <a href="#" id="showSignup">Đăng Ký</a></p>

            </div>

            <!-- Nội dung Đăng Ký -->
            <div id="signUpContent" class="modal-content-section" style="display:none;">
                <h2 class="login-title">Welcome to <br>THE PRACTICE HOUSE</h2>

                <!-- Ô tròn để tải ảnh đại diện -->
                <div class="avatar-upload">
                <label for="avatarInput" class="avatar-label">
                <img id="avatarPreview" src="default-avatar.jpg" alt="Avatar Preview" class="avatar-img">
                </label>
                <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display:none;">
                </div>

                <!--
                <form id="signupForm">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" placeholder="Enter your username" required>
                    <label for="email">Your Email</label>
                    <input type="email" id="signupEmail" name="email" placeholder="Enter your email" required>
                    <label for="password">Password</label>
                    <input type="password" id="signupPassword" name="password" placeholder="Enter your password" required>
                    <button type="submit" class="signup-submit">Đăng Ký</button>
                </form>
                -->

                <div class="login-divider">Xin Chào</div>

                <div class="social-login">
                    <div class="social-buttons">

                        <!-- Nút Google Login trong phần Đăng Ký -->
                        <button id="googleLoginButtonSignup" class="google-login">
                        <img src="/DICH-IPA/google-icon.png" alt="Google Icon" class="icon">
                        <span>Sign up with Google</span>
                        </button>

                        <!--
                        <button class="facebook-login">
                            <img src="/DICH-IPA/facebook-icon.png" alt="Facebook Icon" class="icon">
                            <span>Sign in with Facebook</span>
                        </button>
                        -->

                    </div>
                </div>
                
                <p class="any-account">Already have an account? <a href="#" id="showSignin">Đăng Nhập</a></p>
            </div>


        </div>
    </div>
</div>

 <!-- ************************************************************************************************************* -->






    <!-- Nội dung tab Bài Tập Luyện -->
    <!-- Nội dung tab Bài Tập Luyện -->
    <!-- Nội dung tab Bài Tập Luyện -->
    <div id="BaiTapLuyen" class="tabcontent">
        <div class="iframe-wrapper">
            <iframe id="milanote-iframe" src="https://app.milanote.com/1QWEwb1n4CAt1s/the-practice-house?p=g7YxboI9fpP" width="100%" height="100%" style="border:none;" tabindex="-1"></iframe>
            <div class="overlay"></div> <!-- Phần tử overlay để che chữ "Open in Milanote" -->
        </div>
    </div>
    
    

    <!-- Footer -->
    <div class="footer">
        <div class="footer-top">
            <div class="footer-content">
                <h2>The Practice House</h2>
                <p>thepracticehouse.vn@gmail.com</p>
                <p>Số điện thoại/ Zalo: 0939899411</p>
                <div class="social-icons">
                    <a href="https://www.youtube.com/@THEPRACTICEHOUSE/featured" target="_blank">
                        <img src="youtube_icon.png" alt="YouTube">
                    </a>
                    <a href="https://www.facebook.com/thepracticehouse" target="_blank">
                        <img src="facebook_icon.png" alt="Facebook">
                    </a>
                    <a href="https://www.tiktok.com/@thepracticehouse?lang=en" target="_blank">
                        <img src="tiktok_icon.png" alt="TikTok">
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            ©2021 by the practice house
        </div>
    </div>

    <!-- Zalo Chat Widget cho cá nhân -->
    <div class="zalo-chat-widget">
        <a href="https://zalo.me/0939899411" target="_blank">
            <img src="zalo.png" alt="Chat với tôi trên Zalo" class="zalo-qr">
        </a>
    </div>

<!-- Icon Repeat -->
<div id="repeatIcon" style="display: none; position: absolute; cursor: pointer;">
    <img src="repeat-icon.png" alt="Repeat" width="24" height="24">
</div>



<!-- Div chứa modal -->
<div id="lessonModal" class="modal">
    <div class="modal-content">
        <button class="close-btn">&times;</button>
        <iframe id="modal-iframe" style="width: 100%; height: 100%; border: none;"></iframe>
    </div>
</div>



<!-- Chèn tệp JavaScript -->
<script src="script.js"></script>
<script src="masonry.js"></script>

</body>
</html>
