<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aizoid - Romantic Video Calls</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
:root { --pink: #ff7e9f; --purple: #9a7eff; --red: #ff6b6b; --white: #ffffff; --light-gray: rgba(255, 255, 255, 0.1); --glass-blur: blur(10px); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; height: 100vh; background: linear-gradient(135deg, var(--pink), var(--purple), var(--red)); background-size: 400% 400%; animation: gradientBG 15s ease infinite; display: flex; justify-content: center; align-items: center; overflow: hidden; color: var(--white); }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { width: 100%; max-width: 400px; padding: 20px; text-align: center; position: relative; z-index: 2; }
.screen { display: none; } .screen.active { display: block; }
.login-box, .room-selection { background: var(--light-gray); backdrop-filter: var(--glass-blur); padding: 30px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); }
h1, h2 { margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
input[type="text"] { width: 100%; padding: 15px; margin-bottom: 20px; border: none; background: rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--white); font-size: 1rem; outline: none; }
input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.7); }
.btn { background: var(--light-gray); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50px; padding: 15px 25px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; margin: 5px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.btn:hover { background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }
.btn i { margin-right: 8px; }
.profile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; }
.avatar-circle { width: 50px; height: 50px; background-color: var(--purple); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 600; color: var(--white); box-shadow: 0 0 10px var(--purple); }
#username-display { font-size: 1.2rem; font-weight: 300; }
.room-info { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; margin-top: 20px; }
#generated-room-id { font-size: 1.5rem; font-weight: 600; letter-spacing: 2px; margin: 10px 0; color: #ffc107; text-shadow: 0 0 5px #ffc107; }
#call-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; }
#call-container { width: 100%; height: 100%; }
.special-feature-overlay { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 110; background: rgba(0,0,0,0.4); color: white; padding: 10px 20px; border-radius: 15px; font-size: 1.1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); pointer-events: none; }
.hearts-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.heart { position: absolute; bottom: -50px; font-size: 2rem; animation: floatUp 10s infinite; opacity: 0; }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } }
.hidden { display: none !important; }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="hearts-container" id="hearts-container"></div>
<div id="ui-container">
<div id="login-screen" class="screen active">
<div class="container">
<div class="login-box">
<h1>Aizoid</h1>
<p style="margin-bottom: 20px;">Connect with your special one ❤️</p>
<input type="text" id="name-input" placeholder="Enter your name...">
<button class="btn" id="login-btn"><i class="fas fa-heart"></i> Continue</button>
</div>
</div>
</div>
<div id="room-screen" class="screen">
<div class="container">
<div class="profile-header">
<span id="username-display">Connected as Guest</span>
<div class="avatar-circle" id="avatar">G</div>
</div>
<div class="room-selection">
<h2>Choose an Option</h2>
<button class="btn" id="create-room-btn"><i class="fas fa-plus-circle"></i> Create Room</button>
<button class="btn" id="join-room-btn"><i class="fas fa-sign-in-alt"></i> Join Room</button>
<div id="join-room-section" class="hidden">
<input type="text" id="room-id-input" placeholder="Enter Room ID...">
<button class="btn" id="join-with-id-btn"><i class="fas fa-arrow-right"></i> Join Now</button>
</div>
<div id="create-room-section" class="hidden">
<div class="room-info">
<p>Share this Room ID with your partner:</p>
<h3 id="generated-room-id"></h3>
<button class="btn" id="copy-room-id-btn"><i class="fas fa-copy"></i> Copy ID</button>
<button class="btn" id="start-created-call-btn"><i class="fas fa-video"></i> Start Call</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="call-screen" class="screen">
<div class="special-feature-overlay hidden" id="call-message">
<p>Connected with your special one 💕 Enjoy your call!</p>
</div>
<div id="call-container"></div>
<div class="hearts-container" id="call-hearts-container"></div>
</div>
<!-- ZEGOCLOUD SDKs loaded from CDN -->
<script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
if (typeof ZegoToken === 'undefined') {
alert('Script load hone mein problem aa rahi hai. Page ko refresh karke dekhein.');
return;
}
// --- ZEGOCLOUD Config (Aapki Details Yahan Daal Di Gayi Hain) ---
const appID = 1894962823;
const serverSecret = "bb417bf4d4c7df7d779ac9a30a2563ee";
// --- Baaki saara code neeche hai ---
const uiContainer = document.getElementById('ui-container');
const screens = { login: document.getElementById('login-screen'), room: document.getElementById('room-screen'), call: document.getElementById('call-screen'), };
const loginBtn = document.getElementById('login-btn');
const nameInput = document.getElementById('name-input');
const usernameDisplay = document.getElementById('username-display');
const avatar = document.getElementById('avatar');
const createRoomBtn = document.getElementById('create-room-btn');
const joinRoomBtn = document.getElementById('join-room-btn');
const createRoomSection = document.getElementById('create-room-section');
const joinRoomSection = document.getElementById('join-room-section');
const generatedRoomIdEl = document.getElementById('generated-room-id');
const copyRoomIdBtn = document.getElementById('copy-room-id-btn');
const startCreatedCallBtn = document.getElementById('start-created-call-btn');
const roomIdInput = document.getElementById('room-id-input');
const joinWithIdBtn = document.getElementById('join-with-id-btn');
const callContainer = document.getElementById('call-container');
const callMessage = document.getElementById('call-message');
const callHeartsContainer = document.getElementById('call-hearts-container');
const heartsContainer = document.getElementById('hearts-container');
let username = '';
let userID = '';
let roomID = '';
const switchScreen = (screenName) => {
for (let key in screens) { screens[key].classList.remove('active'); }
screens[screenName].classList.add('active');
uiContainer.style.display = (screenName === 'call') ? 'none' : 'block';
};
const generateHearts = (container, count) => {
if (!container) return;
container.innerHTML = '';
const emojis = ['🌸', '💖', '💕', '❤️', '✨'];
for (let i = 0; i < count; i++) {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
heart.style.left = `${Math.random() * 100}vw`;
heart.style.animationDuration = `${Math.random() * 5 + 7}s`;
heart.style.animationDelay = `${Math.random() * 5}s`;
heart.style.fontSize = `${Math.random() * 1.5 + 0.75}rem`;
container.appendChild(heart);
}
};
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => {
copyRoomIdBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
setTimeout(() => { copyRoomIdBtn.innerHTML = '<i class="fas fa-copy"></i> Copy ID'; }, 2000);
}).catch(() => alert("Could not copy Room ID."));
};
const init = () => {
generateHearts(heartsContainer, 30);
const savedName = localStorage.getItem('aizoid_username');
if (savedName) {
username = savedName;
userID = savedName.replace(/\s+/g, '_') + '_' + Math.floor(Math.random() * 10000);
setupRoomScreen();
} else { switchScreen('login'); }
};
const setupRoomScreen = () => {
usernameDisplay.textContent = `Connected as ${username}`;
avatar.textContent = username.charAt(0).toUpperCase();
switchScreen('room');
};
loginBtn.addEventListener('click', () => {
const name = nameInput.value.trim();
if (name) {
username = name;
localStorage.setItem('aizoid_username', username);
userID = name.replace(/\s+/g, '_') + '_' + Math.floor(Math.random() * 10000);
setupRoomScreen();
} else { alert('Please enter your name.'); }
});
createRoomBtn.addEventListener('click', () => {
roomID = Math.floor(100000 + Math.random() * 900000).toString();
generatedRoomIdEl.textContent = roomID;
createRoomSection.classList.remove('hidden');
joinRoomSection.classList.add('hidden');
});
joinRoomBtn.addEventListener('click', () => {
joinRoomSection.classList.remove('hidden');
createRoomSection.classList.add('hidden');
});
copyRoomIdBtn.addEventListener('click', () => copyToClipboard(roomID));
startCreatedCallBtn.addEventListener('click', () => startCall(roomID));
joinWithIdBtn.addEventListener('click', () => {
const enteredRoomId = roomIdInput.value.trim();
if (enteredRoomId) { startCall(enteredRoomId); } else { alert('Please enter a Room ID.'); }
});
const startCall = (currentRoomID) => {
roomID = currentRoomID;
switchScreen('call');
const token = ZegoToken.generateToken(appID, serverSecret, roomID, userID, username, 3600).token;
const zp = ZegoUIKitPrebuilt.create(token);
zp.joinRoom({
container: callContainer,
sharedLinks: [{ name: 'Copy Invite Link', url: `${window.location.protocol}//${window.location.host}${window.location.pathname}?roomID=${roomID}`, }],
scenario: { mode: ZegoUIKitPrebuilt.OneONoneCall, },
showPreJoinView: false,
onLeaveRoom: () => {
callMessage.classList.add('hidden');
callHeartsContainer.innerHTML = '';
switchScreen('room');
window.location.reload();
},
onUserJoin: () => {
callMessage.classList.remove('hidden');
generateHearts(callHeartsContainer, 25);
},
onUserLeave: () => {
callMessage.classList.add('hidden');
callHeartsContainer.innerHTML = '';
}
});
};
init();
});
</script>
</body>
</html>