<!doctype html>
<html lang=vi>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>The Practice House</title>
<link rel=stylesheet href=styles.css>
<link rel=stylesheet href=styles-small.css media="screen and (max-width:768px)">
<link rel=stylesheet href=masonry.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css>
<script src=https://accounts.google.com/gsi/client async defer></script>
<script async defer crossorigin=anonymous src=https://connect.facebook.net/en_US/sdk.js></script>
</head>
<body>
<div class=logo-container>
<img src=Logo.png alt="The Practice House Logo" class=logo>
</div>
<div class=tab>
<button class=tablinks onclick='openTab(event,"DichPhienAm")' id=defaultOpen>Dịch Phiên Âm</button>
<button class=tablinks onclick='openTab(event,"KhoaPhatAm")'>Khoá Phát Âm</button>
<button class=tablinks onclick='openTab(event,"KhoaGiaoTiep")'>Khoá Giao Tiếp</button>
<button class=tablinks onclick='openTab(event,"4KiNang")'>4 Kĩ Năng</button>
<button class=tablinks onclick='openTab(event,"BaiTapLuyen")'>Bài tập luyện</button>
</div>
<div id=DichPhienAm class=tabcontent>
<div class="container small-screen-hide">
<div class=editable id=editableDiv contenteditable=true></div>
<button class="clear-btn hidden" id=clearEditable>
<img src=clear-icon.png alt=Clear>
</button>
<div class=note>
<p>(*) bạn muốn nghe chữ nào, hãy nhấp vào chữ đó,<br>bạn muốn nghe đoạn nào, hãy quét chọn đoạn đó</p>
</div>
<button id=playAudio class=audio-button>
<img src=play-icon.png alt="Play Audio">
</button>
<button id=stopAudio class="audio-button hidden">
<img src=speaking-icon.png alt="Stop Audio">
</button>
<div id=ipaResult>
<button class="copy-button ipa-copy" onclick=copyIPAToClipboard()>
<img id=ipa-copy-icon src=file-OHmcKVxPhS1eZ1OisXdc7mKM.png alt="Copy Icon">
<span id=ipa-copy-text>Copy</span>
</button>
</div>
<div id=translationResult>
<button class="copy-button translation-copy" onclick=copyToClipboard()>
<img id=translation-copy-icon src=file-OHmcKVxPhS1eZ1OisXdc7mKM.png alt="Copy Icon">
<span id=translation-copy-text>Copy</span>
</button>
</div>
</div>
</div>
<div id=KhoaPhatAm class=tabcontent>
<img src=cover.jpg alt="Hình ảnh mô tả" class=cover-image>
<img src=welcome.png alt="Xin chào mừng" class=welcome-image>
<img src=me.png alt=Tôi class=me-image>
<img src=infor1.png class=infor1-image>
<img src=infor2.png class=infor2-image>
<img src=infor3.png class=infor3-image>
<img src=phu-am.png class=phu-am-image>
<img src=nguyen-am.png class=nguyen-am-image>
<img src=at-home.png class=at-home-image>
<img src=result.png class=result-image>
<div class=video-container1>
<iframe class=centered-video1 src=https://www.youtube.com/embed/7cedTEXETMg frameborder=0 allowfullscreen></iframe>
</div>
<div class=video-container2>
<video class=centered-video2 controls poster=thao.png>
<source src=thao.mp4 type=video/mp4>
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>
</div>
<img src=zoom.png class=zoom-image>
<img src=khoan.png class=khoan-image>
<img src=say1.png class=say1-image>
<img src=say2.png class=say2-image>
<img src=schedule.png class=schedule-image>
</div>
<div id=KhoaGiaoTiep class=tabcontent>
<img src=cover.jpg alt="Hình ảnh mô tả" class=cover-image>
<img src=welcome.png alt="Xin chào mừng" class=welcome-image>
<img src=me.png alt=Tôi class=me-image>
<img src=gt1.png alt="giao tiếp 1" class=gt1-image>
<img src=gt2.png alt="giao tiếp 2" class=gt2-image>
<img src=gt3.png alt="giao tiếp 3" class=gt3-image>
<div class=videos-wrapper>
<div class=video-container>
<video class=centered-video controls poster=01.png>
<source src=01.mp4 type=video/mp4>
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>
</div>
<div class=video-container>
<video class=centered-video controls poster=02.png>
<source src=02.mp4 type=video/mp4>
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>
</div>
<div class=video-container>
<video class=centered-video controls poster=03.png>
<source src=03.mp4 type=video/mp4>
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>
</div>
</div>
<div class=video-container6>
<video class=centered-video6 controls poster=thao.png>
<source src=thao2.mp4 type=video/mp4>
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>
</div>
<img src=nxgiaotiep.png alt="nhận xét giao tiếp" class=nx-image>
</div>
<div id=4KiNang class=tabcontent>
<div id=filterBar class=filter-bar>
<div class=filter-wrapper>
<img id=filterToggleButton src=filter-icon.png alt="Filters Icon" class=filter-icon>
<div id=difficultyFilter class=difficulty-filter>
<div id=slider class=slider></div>
</div>
</div>
<div id=topicFilter class=filter-icons-container>
</div>
</div>
<div id=masonryGrid class=masonry-grid>
</div>
</div>
<div class=button-container>
<button id=signupButton class=signup-button>Đăng Ký</button>
<button id=loginButton class=login-button>Đăng Nhập</button>
</div>
<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>
<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>
<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>
<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>
<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>
<div class=qr-container>
<img src=/DICH-IPA/premium_qr_code.JPG alt="QR Code for Standard Plan">
<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>
<div id=avatarContainer class=avatar-container style=display:none>
<img id=userAvatar src=/DICH-IPA/sample_avatar.png alt="User Avatar" class=user-avatar>
<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>
<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>
<div id=signInContent class=modal-content-section>
<h2 class=login-title>Welcome back to <br>THE PRACTICE HOUSE</h2>
<div class=login-divider>Xin Chào</div>
<div class=social-login>
<div class=social-buttons>
<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>
</div>
</div>
<p class=any-account>Don't have an account? <a href=# id=showSignup>Đăng Ký</a></p>
</div>
<div id=signUpContent class=modal-content-section style=display:none>
<h2 class=login-title>Welcome to <br>THE PRACTICE HOUSE</h2>
<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>
<div class=login-divider>Xin Chào</div>
<div class=social-login>
<div class=social-buttons>
<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>
</div>
</div>
<p class=any-account>Already have an account? <a href=# id=showSignin>Đăng Nhập</a></p>
</div>
</div>
</div>
</div>
<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>
</div>
</div>
<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>
<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>
<div id=repeatIcon style=display:none;position:absolute;cursor:pointer>
<img src=repeat-icon.png alt=Repeat width=24 height=24>
</div>
<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>
<script src=script.js></script>
<script src=masonry.js></script>
</body>
</html>