Hugging Face's logo

Spaces:
Zapresh
/
zooonmlnk
Running

App Files Community
zooonmlnk / index.html
Zapresh's picture
Zapresh
undefined - Initial Deployment
0b2e389 verified
raw
history blame contribute delete
18.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Zoom Meeting Simulation</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>
 @keyframes pulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.05); }
 }
 .ringing-animation {
 animation: pulse 1.5s infinite;
 }
 .video-container {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 aspect ratio */
 height: 0;
 overflow: hidden;
 }
 .video-feed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 .blur-effect {
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 }
 .zoom-modal {
 transition: all 0.3s ease;
 }
 .zoom-modal.show {
 opacity: 1;
 transform: translateY(0);
 }
 .zoom-modal.hide {
 opacity: 0;
 transform: translateY(20px);
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <div id="app" class="min-h-screen flex flex-col">
 <!-- Incoming Call Screen -->
 <div id="incomingCall" class="fixed inset-0 bg-gray-900 flex items-center justify-center z-50 transition-opacity duration-500">
 <div class="bg-white rounded-xl overflow-hidden shadow-2xl w-full max-w-md mx-4">
 <div class="bg-blue-600 p-6 text-center">
 <div class="ringing-animation inline-block mb-4">
 <i class="fas fa-phone-alt text-white text-4xl"></i>
 </div>
 <h2 class="text-2xl font-bold text-white">Incoming Zoom Meeting</h2>
 </div>
 <div class="p-6 text-center">
 <div class="flex justify-center mb-6">
 <div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-user text-blue-600 text-3xl"></i>
 </div>
 </div>
 <h3 class="text-xl font-semibold text-gray-800">Meeting Host</h3>
 <p class="text-gray-600 mt-1">Daily Standup Meeting</p>
 <p class="text-gray-500 text-sm mt-2">Meeting ID: 123 456 7890</p>
<div class="mt-8 flex justify-center space-x-4">
 <button id="declineBtn" class="px-6 py-3 bg-red-500 text-white rounded-full hover:bg-red-600 transition flex items-center">
 <i class="fas fa-times mr-2"></i> Decline
 </button>
 <button id="acceptBtn" class="px-6 py-3 bg-green-500 text-white rounded-full hover:bg-green-600 transition flex items-center">
 <i class="fas fa-phone-alt mr-2"></i> Accept
 </button>
 </div>
 </div>
 <audio id="ringtone" loop>
 <source src="https://assets.mixkit.co/sfx/preview/mixkit-classic-phone-ring-1129.mp3" type="audio/mpeg">
 </audio>
 </div>
 </div>
<!-- Meeting Screen -->
 <div id="meetingScreen" class="hidden fixed inset-0 bg-gray-900 flex flex-col z-40">
 <!-- Meeting Header -->
 <div class="bg-gray-800 text-white p-3 flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-shield-alt text-green-400 mr-2"></i>
 <span class="text-sm">Zoom Meeting</span>
 </div>
 <div class="flex items-center space-x-4">
 <button class="text-white hover:text-gray-300">
 <i class="fas fa-microphone"></i>
 </button>
 <button class="text-white hover:text-gray-300">
 <i class="fas fa-video"></i>
 </button>
 <button class="text-white hover:text-gray-300">
 <i class="fas fa-cog"></i>
 </button>
 </div>
 </div>
<!-- Video Feed -->
 <div class="flex-1 relative">
 <div class="video-container">
 <video id="userVideo" class="video-feed bg-gray-800" autoplay playsinline></video>
 </div>
<!-- Authentication Modal -->
 <div id="authModal" class="zoom-modal hide absolute inset-0 flex items-center justify-center p-4">
 <div class="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
 <div class="bg-blue-600 p-4 text-white">
 <h3 class="text-lg font-semibold">Sign in to Zoom</h3>
 <p class="text-sm opacity-90">To join this meeting</p>
 </div>
 <div class="p-6">
 <div class="mb-4">
 <label class="block text-gray-700 text-sm font-medium mb-2" for="email">
 Email
 </label>
 <input id="email" type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="email@example.com">
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 text-sm font-medium mb-2" for="password">
 Password
 </label>
 <input id="password" type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="••••••••">
 </div>
 <button id="signInBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition flex items-center justify-center">
 <i class="fas fa-sign-in-alt mr-2"></i> Sign In
 </button>
 <p class="text-xs text-gray-500 mt-4 text-center">
 This is a simulation. No data will be collected.
 </p>
 </div>
 </div>
 </div>
<!-- Error Modal -->
 <div id="errorModal" class="zoom-modal hide absolute inset-0 flex items-center justify-center p-4">
 <div class="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
 <div class="bg-red-500 p-4 text-white">
 <h3 class="text-lg font-semibold">Sign In Failed</h3>
 </div>
 <div class="p-6 text-center">
 <div class="mb-4 text-red-500">
 <i class="fas fa-exclamation-circle text-4xl"></i>
 </div>
 <p class="text-gray-700 mb-6">
 Invalid email or password. Please try again.
 </p>
 <button id="tryAgainBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">
 Try Again
 </button>
 <p class="text-xs text-gray-500 mt-4 text-center">
 This is a simulation. No data will be collected.
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Meeting Controls -->
 <div class="bg-gray-800 text-white p-3 flex justify-center space-x-6">
 <button class="p-2 rounded-full hover:bg-gray-700">
 <i class="fas fa-microphone text-xl"></i>
 </button>
 <button class="p-2 rounded-full hover:bg-gray-700">
 <i class="fas fa-video text-xl"></i>
 </button>
 <button class="p-2 rounded-full hover:bg-gray-700">
 <i class="fas fa-desktop text-xl"></i>
 </button>
 <button class="p-2 rounded-full bg-red-500 hover:bg-red-600">
 <i class="fas fa-phone-slash text-xl"></i>
 </button>
 <button class="p-2 rounded-full hover:bg-gray-700">
 <i class="fas fa-ellipsis-h text-xl"></i>
 </button>
 </div>
 </div>
<!-- Simulation Complete -->
 <div id="completeScreen" class="hidden fixed inset-0 bg-gray-900 flex items-center justify-center z-50">
 <div class="bg-white rounded-xl p-8 max-w-md mx-4 text-center">
 <div class="text-green-500 mb-4">
 <i class="fas fa-check-circle text-5xl"></i>
 </div>
 <h2 class="text-2xl font-bold text-gray-800 mb-2">Simulation Complete</h2>
 <p class="text-gray-600 mb-6">
 This was a demonstration of how phishing attempts might appear in video conferencing apps.
 </p>
 <div class="bg-blue-50 p-4 rounded-lg mb-6">
 <h4 class="font-semibold text-blue-800 mb-2">Security Tips:</h4>
 <ul class="text-sm text-blue-700 text-left space-y-1">
 <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> Always verify meeting links</li>
 <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> Never enter credentials on unexpected prompts</li>
 <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> Use multi-factor authentication</li>
 </ul>
 </div>
 <button id="restartBtn" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition">
 <i class="fas fa-redo mr-2"></i> Run Again
 </button>
 </div>
 </div>
<!-- Info Panel -->
 <div class="fixed bottom-4 right-4 z-50">
 <button id="infoBtn" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition">
 <i class="fas fa-info"></i>
 </button>
 <div id="infoPanel" class="hidden absolute bottom-full right-0 mb-2 w-64 bg-white rounded-lg shadow-xl p-4">
 <h3 class="font-bold text-gray-800 mb-2">Zoom Simulation</h3>
 <p class="text-sm text-gray-600">
 This is an educational simulation demonstrating how phishing attempts might appear in video conferencing apps.
 </p>
 <p class="text-xs text-gray-500 mt-2">
 No data is collected. This is for awareness purposes only.
 </p>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // DOM Elements
 const incomingCall = document.getElementById('incomingCall');
 const meetingScreen = document.getElementById('meetingScreen');
 const completeScreen = document.getElementById('completeScreen');
 const acceptBtn = document.getElementById('acceptBtn');
 const declineBtn = document.getElementById('declineBtn');
 const authModal = document.getElementById('authModal');
 const errorModal = document.getElementById('errorModal');
 const signInBtn = document.getElementById('signInBtn');
 const tryAgainBtn = document.getElementById('tryAgainBtn');
 const restartBtn = document.getElementById('restartBtn');
 const userVideo = document.getElementById('userVideo');
 const ringtone = document.getElementById('ringtone');
 const infoBtn = document.getElementById('infoBtn');
 const infoPanel = document.getElementById('infoPanel');
 // Play ringtone
 ringtone.play().catch(e => console.log("Auto-play prevented:", e));
 // Accept call
 acceptBtn.addEventListener('click', function() {
 incomingCall.classList.add('hidden');
 ringtone.pause();
// Start camera
 if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 navigator.mediaDevices.getUserMedia({ video: true })
 .then(function(stream) {
 userVideo.srcObject = stream;
 meetingScreen.classList.remove('hidden');
// Show auth modal after a delay
 setTimeout(() => {
 authModal.classList.remove('hide');
 authModal.classList.add('show');
 }, 1500);
 })
 .catch(function(error) {
 console.error("Camera error:", error);
 // Fallback to black screen if camera fails
 meetingScreen.classList.remove('hidden');
 setTimeout(() => {
 authModal.classList.remove('hide');
 authModal.classList.add('show');
 }, 1500);
 });
 } else {
 // Fallback if no camera access
 meetingScreen.classList.remove('hidden');
 setTimeout(() => {
 authModal.classList.remove('hide');
 authModal.classList.add('show');
 }, 1500);
 }
 });
 // Decline call
 declineBtn.addEventListener('click', function() {
 incomingCall.classList.add('opacity-0');
 ringtone.pause();
 setTimeout(() => {
 incomingCall.classList.add('hidden');
 completeScreen.classList.remove('hidden');
 }, 500);
 });
 // Sign in button
 signInBtn.addEventListener('click', function() {
 // Show loading state
 signInBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Signing In...';
 signInBtn.disabled = true;
// Simulate network request
 setTimeout(() => {
 // Show error
 authModal.classList.remove('show');
 authModal.classList.add('hide');
setTimeout(() => {
 errorModal.classList.remove('hide');
 errorModal.classList.add('show');
 }, 300);
// Reset sign in button
 setTimeout(() => {
 signInBtn.innerHTML = '<i class="fas fa-sign-in-alt mr-2"></i> Sign In';
 signInBtn.disabled = false;
 }, 1000);
 }, 2000);
 });
 // Try again button
 tryAgainBtn.addEventListener('click', function() {
 errorModal.classList.remove('show');
 errorModal.classList.add('hide');
setTimeout(() => {
 authModal.classList.remove('hide');
 authModal.classList.add('show');
 }, 300);
 });
 // Restart simulation
 restartBtn.addEventListener('click', function() {
 completeScreen.classList.add('hidden');
 incomingCall.classList.remove('hidden', 'opacity-0');
 meetingScreen.classList.add('hidden');
// Reset modals
 authModal.classList.remove('show');
 authModal.classList.add('hide');
 errorModal.classList.remove('show');
 errorModal.classList.add('hide');
// Stop camera if active
 if(userVideo.srcObject) {
 userVideo.srcObject.getTracks().forEach(track => track.stop());
 }
// Restart ringtone
 ringtone.currentTime = 0;
 ringtone.play().catch(e => console.log("Auto-play prevented:", e));
 });
 // Info button toggle
 infoBtn.addEventListener('click', function() {
 infoPanel.classList.toggle('hidden');
 });
 // Close info panel when clicking outside
 document.addEventListener('click', function(e) {
 if(!infoBtn.contains(e.target) && !infoPanel.contains(e.target)) {
 infoPanel.classList.add('hidden');
 }
 });
 });
 </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=Zapresh/zooonmlnk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>