|
|
<!DOCTYPE html> |
|
|
<html lang="en" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Persian Video Chat | چت تصویری پارسی</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.rtl { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
.ltr { |
|
|
direction: ltr; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.video-container { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.video-container video { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { |
|
|
transform: translateY(10px); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
.message-animation { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<div class="fixed top-4 right-4 z-50"> |
|
|
<button id="languageToggle" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full shadow-lg flex items-center"> |
|
|
<i class="fas fa-language mr-2"></i> |
|
|
<span id="currentLanguage">English</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-7xl"> |
|
|
|
|
|
<header class="text-center mb-8"> |
|
|
<h1 id="mainTitle" class="text-4xl font-bold text-blue-800 mb-2">Persian Video Chat</h1> |
|
|
<p id="mainSubtitle" class="text-gray-600">Connect with people around the world</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<div class="lg:w-2/3 bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-4 bg-blue-700 text-white"> |
|
|
<h2 id="videoTitle" class="text-xl font-semibold"><i class="fas fa-video mr-2"></i>Video Chat</h2> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"> |
|
|
<div class="video-container bg-black rounded-lg"> |
|
|
<video id="localVideo" autoplay muted></video> |
|
|
<div id="localVideoLabel" class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">You</div> |
|
|
</div> |
|
|
<div class="video-container bg-black rounded-lg"> |
|
|
<video id="remoteVideo" autoplay></video> |
|
|
<div id="remoteVideoLabel" class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">Stranger</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 bg-gray-100 flex flex-wrap justify-center gap-4"> |
|
|
<button id="startChatBtn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> |
|
|
<span id="startChatText">Start Chat</span> |
|
|
</button> |
|
|
<button id="nextBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-random mr-2"></i> |
|
|
<span id="nextText">Next</span> |
|
|
</button> |
|
|
<button id="micToggle" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-microphone mr-2"></i> |
|
|
<span id="micText">Mic On</span> |
|
|
</button> |
|
|
<button id="camToggle" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-video mr-2"></i> |
|
|
<span id="camText">Cam On</span> |
|
|
</button> |
|
|
<button id="reportBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-flag mr-2"></i> |
|
|
<span id="reportText">Report</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-1/3 bg-white rounded-xl shadow-lg overflow-hidden flex flex-col"> |
|
|
<div class="p-4 bg-blue-700 text-white"> |
|
|
<h2 id="chatTitle" class="text-xl font-semibold"><i class="fas fa-comments mr-2"></i>Text Chat</h2> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="messagesContainer" class="flex-1 p-4 overflow-y-auto custom-scrollbar bg-gray-50"> |
|
|
<div class="text-center text-gray-500 py-4" id="welcomeMessage"> |
|
|
<i class="fas fa-comment-dots text-2xl mb-2"></i> |
|
|
<p id="welcomeText">Start chatting with your match!</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="messagesList"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 bg-gray-100 border-t"> |
|
|
<div class="flex gap-2"> |
|
|
<input id="messageInput" type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button id="sendMessageBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 flex justify-between text-sm text-gray-500"> |
|
|
<div id="typingIndicator" class="invisible"> |
|
|
<i class="fas fa-pencil-alt mr-1"></i> |
|
|
<span id="typingText">Stranger is typing...</span> |
|
|
</div> |
|
|
<div> |
|
|
<button id="translateToggle" class="text-blue-600 hover:underline"> |
|
|
<i class="fas fa-exchange-alt mr-1"></i> |
|
|
<span id="translateText">Translate</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="mt-12"> |
|
|
<h2 id="featuresTitle" class="text-2xl font-bold text-center mb-6 text-blue-800">Our Features</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</div> |
|
|
<h3 id="feature1Title" class="text-xl font-semibold mb-2">Global Connections</h3> |
|
|
<p id="feature1Desc" class="text-gray-600">Meet people from all around the world and make new friends.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<h3 id="feature2Title" class="text-xl font-semibold mb-2">Safe Environment</h3> |
|
|
<p id="feature2Desc" class="text-gray-600">Our moderation system keeps the platform safe for everyone.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<div class="text-blue-600 text-4xl mb-4"> |
|
|
<i class="fas fa-language"></i> |
|
|
</div> |
|
|
<h3 id="feature3Title" class="text-xl font-semibold mb-2">Language Support</h3> |
|
|
<p id="feature3Desc" class="text-gray-600">Chat in Persian or English with built-in translation.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8 mt-12"> |
|
|
<div class="container mx-auto px-4 max-w-7xl"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h3 id="footerTitle" class="text-xl font-bold mb-4">Persian Video Chat</h3> |
|
|
<p id="footerDesc" class="text-gray-400">Connecting people through video and text chat.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-3" id="linksTitle">Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white" id="homeLink">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white" id="aboutLink">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white" id="privacyLink">Privacy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white" id="termsLink">Terms</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-3" id="contactTitle">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="text-gray-400" id="emailText">Email: [email protected]</li> |
|
|
<li class="text-gray-400" id="supportText">Support: [email protected]</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-3" id="socialTitle">Social</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p id="copyrightText">© 2023 Persian Video Chat. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="reportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 id="reportModalTitle" class="text-xl font-semibold">Report User</h3> |
|
|
<button id="closeReportModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p id="reportReasonText" class="mb-2">Reason for reporting:</p> |
|
|
<select id="reportReason" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="inappropriate" id="reportOption1">Inappropriate behavior</option> |
|
|
<option value="spam" id="reportOption2">Spam or advertising</option> |
|
|
<option value="harassment" id="reportOption3">Harassment</option> |
|
|
<option value="other" id="reportOption4">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="reportDetailsContainer" class="mb-4 hidden"> |
|
|
<label for="reportDetails" id="reportDetailsLabel" class="block mb-2">Please provide details:</label> |
|
|
<textarea id="reportDetails" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end gap-3"> |
|
|
<button id="cancelReportBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">Cancel</button> |
|
|
<button id="submitReportBtn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Submit Report</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const translations = { |
|
|
en: { |
|
|
mainTitle: "Persian Video Chat", |
|
|
mainSubtitle: "Connect with people around the world", |
|
|
videoTitle: "Video Chat", |
|
|
localVideoLabel: "You", |
|
|
remoteVideoLabel: "Stranger", |
|
|
startChatText: "Start Chat", |
|
|
nextText: "Next", |
|
|
micText: "Mic On", |
|
|
camText: "Cam On", |
|
|
reportText: "Report", |
|
|
chatTitle: "Text Chat", |
|
|
welcomeText: "Start chatting with your match!", |
|
|
typingText: "Stranger is typing...", |
|
|
translateText: "Translate", |
|
|
featuresTitle: "Our Features", |
|
|
feature1Title: "Global Connections", |
|
|
feature1Desc: "Meet people from all around the world and make new friends.", |
|
|
feature2Title: "Safe Environment", |
|
|
feature2Desc: "Our moderation system keeps the platform safe for everyone.", |
|
|
feature3Title: "Language Support", |
|
|
feature3Desc: "Chat in Persian or English with built-in translation.", |
|
|
footerTitle: "Persian Video Chat", |
|
|
footerDesc: "Connecting people through video and text chat.", |
|
|
linksTitle: "Links", |
|
|
homeLink: "Home", |
|
|
aboutLink: "About", |
|
|
privacyLink: "Privacy", |
|
|
termsLink: "Terms", |
|
|
contactTitle: "Contact", |
|
|
emailText: "Email: [email protected]", |
|
|
supportText: "Support: [email protected]", |
|
|
socialTitle: "Social", |
|
|
copyrightText: "© 2023 Persian Video Chat. All rights reserved.", |
|
|
reportModalTitle: "Report User", |
|
|
reportReasonText: "Reason for reporting:", |
|
|
reportOption1: "Inappropriate behavior", |
|
|
reportOption2: "Spam or advertising", |
|
|
reportOption3: "Harassment", |
|
|
reportOption4: "Other", |
|
|
reportDetailsLabel: "Please provide details:", |
|
|
currentLanguage: "English" |
|
|
}, |
|
|
fa: { |
|
|
mainTitle: "چت تصویری پارسی", |
|
|
mainSubtitle: "با افراد از سراسر جهان ارتباط برقرار کنید", |
|
|
videoTitle: "چت تصویری", |
|
|
localVideoLabel: "شما", |
|
|
remoteVideoLabel: "فرد مقابل", |
|
|
startChatText: "شروع چت", |
|
|
nextText: "فرد بعدی", |
|
|
micText: "میکروفون روشن", |
|
|
camText: "دوربین روشن", |
|
|
reportText: "گزارش", |
|
|
chatTitle: "چت متنی", |
|
|
welcomeText: "گفتگو با فرد مقابل را شروع کنید!", |
|
|
typingText: "فرد مقابل در حال تایپ است...", |
|
|
translateText: "ترجمه", |
|
|
featuresTitle: "ویژگی های ما", |
|
|
feature1Title: "ارتباطات جهانی", |
|
|
feature1Desc: "با افراد از سراسر جهان ملاقات کنید و دوستان جدیدی پیدا کنید.", |
|
|
feature2Title: "محیط امن", |
|
|
feature2Desc: "سیستم نظارتی ما این پلتفرم را برای همه امن نگه می دارد.", |
|
|
feature3Title: "پشتیبانی از زبان", |
|
|
feature3Desc: "به فارسی یا انگلیسی چت کنید با قابلیت ترجمه داخلی.", |
|
|
footerTitle: "چت تصویری پارسی", |
|
|
footerDesc: "ارتباط افراد از طریق چت تصویری و متنی.", |
|
|
linksTitle: "لینک ها", |
|
|
homeLink: "خانه", |
|
|
aboutLink: "درباره ما", |
|
|
privacyLink: "حریم خصوصی", |
|
|
termsLink: "قوانین", |
|
|
contactTitle: "تماس", |
|
|
emailText: "ایمیل: [email protected]", |
|
|
supportText: "پشتیبانی: [email protected]", |
|
|
socialTitle: "شبکه های اجتماعی", |
|
|
copyrightText: "© 2023 چت تصویری پارسی. تمام حقوق محفوظ است.", |
|
|
reportModalTitle: "گزارش کاربر", |
|
|
reportReasonText: "دلیل گزارش:", |
|
|
reportOption1: "رفتار نامناسب", |
|
|
reportOption2: "اسپم یا تبلیغات", |
|
|
reportOption3: "آزار و اذیت", |
|
|
reportOption4: "سایر", |
|
|
reportDetailsLabel: "لطفاً جزئیات را ارائه دهید:", |
|
|
currentLanguage: "فارسی" |
|
|
} |
|
|
}; |
|
|
|
|
|
let currentLang = 'en'; |
|
|
|
|
|
|
|
|
document.getElementById('languageToggle').addEventListener('click', function() { |
|
|
currentLang = currentLang === 'en' ? 'fa' : 'en'; |
|
|
document.documentElement.dir = currentLang === 'fa' ? 'rtl' : 'ltr'; |
|
|
document.documentElement.lang = currentLang; |
|
|
updateLanguage(); |
|
|
}); |
|
|
|
|
|
function updateLanguage() { |
|
|
const elements = document.querySelectorAll('[id]'); |
|
|
elements.forEach(element => { |
|
|
const id = element.id; |
|
|
if (translations[currentLang][id]) { |
|
|
if (element.tagName === 'INPUT' && element.placeholder) { |
|
|
element.placeholder = translations[currentLang][id]; |
|
|
} else { |
|
|
element.textContent = translations[currentLang][id]; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('currentLanguage').textContent = translations[currentLang].currentLanguage; |
|
|
} |
|
|
|
|
|
|
|
|
const reportModal = document.getElementById('reportModal'); |
|
|
const openReportBtn = document.getElementById('reportBtn'); |
|
|
const closeReportModal = document.getElementById('closeReportModal'); |
|
|
const cancelReportBtn = document.getElementById('cancelReportBtn'); |
|
|
const reportReason = document.getElementById('reportReason'); |
|
|
const reportDetailsContainer = document.getElementById('reportDetailsContainer'); |
|
|
|
|
|
openReportBtn.addEventListener('click', () => { |
|
|
reportModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeReportModal.addEventListener('click', () => { |
|
|
reportModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
cancelReportBtn.addEventListener('click', () => { |
|
|
reportModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
reportReason.addEventListener('change', (e) => { |
|
|
if (e.target.value === 'other') { |
|
|
reportDetailsContainer.classList.remove('hidden'); |
|
|
} else { |
|
|
reportDetailsContainer.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('submitReportBtn').addEventListener('click', () => { |
|
|
alert(currentLang === 'en' ? 'Thank you for your report. We will review it shortly.' : 'از گزارش شما متشکریم. به زودی آن را بررسی خواهیم کرد.'); |
|
|
reportModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const messageInput = document.getElementById('messageInput'); |
|
|
const sendMessageBtn = document.getElementById('sendMessageBtn'); |
|
|
const messagesList = document.getElementById('messagesList'); |
|
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
|
|
|
let typingTimer; |
|
|
|
|
|
messageInput.addEventListener('input', () => { |
|
|
typingIndicator.classList.remove('invisible'); |
|
|
clearTimeout(typingTimer); |
|
|
typingTimer = setTimeout(() => { |
|
|
typingIndicator.classList.add('invisible'); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
function addMessage(text, isLocal) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.classList.add('mb-4', 'message-animation'); |
|
|
|
|
|
if (isLocal) { |
|
|
messageDiv.classList.add('text-right'); |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="inline-block bg-blue-100 text-blue-900 rounded-lg px-4 py-2 max-w-xs md:max-w-md"> |
|
|
${text} |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">${currentLang === 'en' ? 'You' : 'شما'}</div> |
|
|
`; |
|
|
} else { |
|
|
messageDiv.classList.add('text-left'); |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="inline-block bg-gray-200 text-gray-800 rounded-lg px-4 py-2 max-w-xs md:max-w-md"> |
|
|
${text} |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">${currentLang === 'en' ? 'Stranger' : 'فرد مقابل'}</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
messagesList.appendChild(messageDiv); |
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight; |
|
|
|
|
|
|
|
|
document.getElementById('welcomeMessage').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
sendMessageBtn.addEventListener('click', sendMessage); |
|
|
messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
const text = messageInput.value.trim(); |
|
|
if (text) { |
|
|
addMessage(text, true); |
|
|
messageInput.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responses = currentLang === 'en' ? [ |
|
|
"Hi there! How are you?", |
|
|
"Nice to meet you!", |
|
|
"Where are you from?", |
|
|
"What do you like to do for fun?" |
|
|
] : [ |
|
|
"سلام! حالتون چطوره؟", |
|
|
"خوشوقتم!", |
|
|
"اهل کجایید؟", |
|
|
"برای تفریح چه کارهایی دوست دارید انجام بدید؟" |
|
|
]; |
|
|
|
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
addMessage(randomResponse, false); |
|
|
}, 1000 + Math.random() * 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let micOn = true; |
|
|
let camOn = true; |
|
|
|
|
|
document.getElementById('micToggle').addEventListener('click', () => { |
|
|
micOn = !micOn; |
|
|
document.getElementById('micText').textContent = micOn ? |
|
|
(currentLang === 'en' ? 'Mic On' : 'میکروفون روشن') : |
|
|
(currentLang === 'en' ? 'Mic Off' : 'میکروفون خاموش'); |
|
|
document.getElementById('micToggle').classList.toggle('bg-gray-600'); |
|
|
document.getElementById('micToggle').classList.toggle('bg-red-600'); |
|
|
}); |
|
|
|
|
|
document.getElementById('camToggle').addEventListener('click', () => { |
|
|
camOn = !camOn; |
|
|
document.getElementById('camText').textContent = camOn ? |
|
|
(currentLang === 'en' ? 'Cam On' : 'دوربین روشن') : |
|
|
(currentLang === 'en' ? 'Cam Off' : 'دوربین خاموش'); |
|
|
document.getElementById('camToggle').classList.toggle('bg-gray-600'); |
|
|
document.getElementById('camToggle').classList.toggle('bg-red-600'); |
|
|
|
|
|
|
|
|
const video = document.getElementById('localVideo'); |
|
|
if (camOn) { |
|
|
video.style.opacity = '1'; |
|
|
} else { |
|
|
video.style.opacity = '0'; |
|
|
video.style.backgroundColor = '#000'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('startChatBtn').addEventListener('click', () => { |
|
|
|
|
|
document.getElementById('startChatBtn').classList.add('hidden'); |
|
|
document.getElementById('nextBtn').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('remoteVideo').style.backgroundColor = '#333'; |
|
|
document.getElementById('remoteVideo').style.opacity = '1'; |
|
|
|
|
|
|
|
|
addMessage(currentLang === 'en' ? |
|
|
"Hello! Nice to meet you. How are you today?" : |
|
|
"سلام! خوشوقتم. امروز حالتون چطوره؟", false); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('nextBtn').addEventListener('click', () => { |
|
|
|
|
|
document.getElementById('remoteVideo').style.opacity = '0'; |
|
|
document.getElementById('messagesList').innerHTML = ''; |
|
|
document.getElementById('welcomeMessage').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('startChatBtn').classList.remove('hidden'); |
|
|
document.getElementById('nextBtn').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
updateLanguage(); |
|
|
document.getElementById('nextBtn').classList.add('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('localVideo').style.backgroundColor = '#333'; |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MMD-Coder/chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
