[V0_FILE]html:file="index.html" isMerged="true" RTC IDE - Real-Time Collaborative Code Editor

RTCIDE

Code Together in Real-Time

A powerful collaborative code editor with real-time synchronization, multi-language support, and integrated terminal.

Get Started Learn More

Powerful Features

Multi-Language Support

Write and execute code in Java, Python, and C++ with syntax highlighting and error detection.

Real-Time Collaboration

Code together with your team in real-time with cursor tracking and instant updates.

Integrated Terminal

Run your code and see the output directly in the browser with our integrated terminal.

File Management

Create, edit, and organize your files and folders with our intuitive file explorer.

AI Assistant

Get help with your code from our integrated AI chatbot assistant.

Secure Rooms

Create password-protected rooms for private collaboration sessions.

About RTC IDE

RTC IDE is a powerful web-based collaborative code editor designed for teams and educators. Our platform enables real-time collaboration, making pair programming and code reviews seamless and efficient.

With support for multiple programming languages, integrated terminal, and AI assistance, RTC IDE provides everything you need for a productive coding environment.

[V0_FILE]html:file="dashboard.html" isMerged="true" Dashboard - RTC IDE

RTCIDE

Welcome, John!

Create a new room or join an existing one to start coding.

Create Room

Join Room

Recent Rooms

No recent rooms found

[V0_FILE]html:file="editor.html" isMerged="true" Code Editor - RTC IDE

RTCIDE

Room Name ID: ABC123

Files

No files yet

AI Assistant

Hello! I'm your coding assistant. How can I help you today?

[V0_FILE]css:file="css/tech-wallpaper.css" isMerged="true" .tech-wallpaper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; pointer-events: none; background-image: linear-gradient(to right, rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 0.1) 1px, transparent 1px), radial-gradient(circle, rgba(99, 102, 241, 0.2) 2px, transparent 2px); background-size: 50px 50px, 50px 50px, 200px 200px; background-position: center; } .dark-theme .tech-wallpaper { opacity: 0.05; } .light-theme .tech-wallpaper { opacity: 0.1; } .editor-wallpaper { opacity: 0.03; } [V0_FILE]css:file="css/particles.css" isMerged="true" #particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } [V0_FILE]javascript:file="js/theme.js" isMerged="true" document.addEventListener("DOMContentLoaded", () => { // Check for saved theme preference or use device preference const savedTheme = localStorage.getItem("theme") const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches if (savedTheme === "light") { document.body.classList.remove("dark-theme") document.body.classList.add("light-theme") document.getElementById("theme-toggle-checkbox").checked = false } else if (savedTheme === "dark" || prefersDark) { document.body.classList.add("dark-theme") document.body.classList.remove("light-theme") document.getElementById("theme-toggle-checkbox").checked = true } // Theme toggle functionality const themeToggle = document.getElementById("theme-toggle-checkbox") themeToggle.addEventListener("change", function () { if (this.checked) { document.body.classList.add("dark-theme") document.body.classList.remove("light-theme") localStorage.setItem("theme", "dark") } else { document.body.classList.remove("dark-theme") document.body.classList.add("light-theme") localStorage.setItem("theme", "light") } }) // Password toggle functionality const passwordToggles = document.querySelectorAll(".password-toggle") passwordToggles.forEach((toggle) => { toggle.addEventListener("click", function () { const passwordInput = this.parentElement.querySelector("input") const icon = this.querySelector("i") if (passwordInput.type === "password") { passwordInput.type = "text" icon.classList.remove("fa-eye") icon.classList.add("fa-eye-slash") } else { passwordInput.type = "password" icon.classList.remove("fa-eye-slash") icon.classList.add("fa-eye") } }) }) }) [V0_FILE]javascript:file="js/particles.js" isFixed="true" isQuickEdit="true" isMerged="true" document.addEventListener("DOMContentLoaded", () => { if (document.getElementById("particles-js")) { // Check if particlesJS is defined before using it if (typeof particlesJS !== "undefined") { particlesJS("particles-js", { particles: { number: { value: 80, density: { enable: true, value_area: 800, }, }, color: { value: "#6366f1", }, shape: { type: "circle", stroke: { width: 0, color: "#000000", }, polygon: { nb_sides: 5, }, }, opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false, }, }, size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false, }, }, line_linked: { enable: true, distance: 150, color: "#6366f1", opacity: 0.4, width: 1, }, move: { enable: true, speed: 2, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200, }, }, }, interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "grab", }, onclick: { enable: true, mode: "push", }, resize: true, }, modes: { grab: { distance: 140, line_linked: { opacity: 1, }, }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3, }, repulse: { distance: 200, duration: 0.4, }, push: { particles_nb: 4, }, remove: { particles_nb: 2, }, }, }, retina_detect: true, }) } else { console.error("particlesJS is not defined. Make sure the particles.js library is included.") } } }) [V0_FILE]javascript:file="js/terminal.js" isMerged="true" function displayOutput(result) { const terminalOutput = document.getElementById("terminal-output") // Create output container const outputContainer = document.createElement("div") outputContainer.className = "terminal-output-container" // Add timestamp const timestamp = document.createElement("div") timestamp.className = "terminal-timestamp" timestamp.textContent = new Date().toLocaleTimeString() outputContainer.appendChild(timestamp) // Add compilation output if any if (result.compile_output) { const compileOutput = document.createElement("div") compileOutput.className = "terminal-compile-output" compileOutput.innerHTML = `Compilation: ${formatOutput(result.compile_output)}` outputContainer.appendChild(compileOutput) } // Add stdout if any if (result.stdout) { const stdout = document.createElement("div") stdout.className = "terminal-stdout" stdout.innerHTML = `Output: ${formatOutput(result.stdout)}` outputContainer.appendChild(stdout) } // Add stderr if any if (result.stderr) { const stderr = document.createElement("div") stderr.className = "terminal-stderr" stderr.innerHTML = `Error: ${formatOutput(result.stderr)}` outputContainer.appendChild(stderr) } // Add execution time if (result.time) { const time = document.createElement("div") time.className = "terminal-time" time.textContent = `Execution Time: ${result.time}s` outputContainer.appendChild(time) } // Add memory usage if (result.memory) { const memory = document.createElement("div") memory.className = "terminal-memory" memory.textContent = `Memory Usage: ${result.memory} KB` outputContainer.appendChild(memory) } // Add status const status = document.createElement("div") status.className = "terminal-status" if (result.status) { if (result.status.id === 3) { // Accepted status.innerHTML = '✓ Program executed successfully' } else if (result.status.id === 6) { // Compilation Error status.innerHTML = '✗ Compilation Error' } else if (result.status.id === 5) { // Time Limit Exceeded status.innerHTML = '⚠ Time Limit Exceeded' } else if (result.status.id === 4) { // Runtime Error status.innerHTML = '✗ Runtime Error' } else { status.innerHTML = `Status: ${result.status.description}` } } else { status.innerHTML = 'Status: Unknown' } outputContainer.appendChild(status) // Add separator const separator = document.createElement("div") separator.className = "terminal-separator" outputContainer.appendChild(separator) // Add to terminal terminalOutput.appendChild(outputContainer) // Scroll to bottom terminalOutput.scrollTop = terminalOutput.scrollHeight } function displayError(error) { const terminalOutput = document.getElementById("terminal-output") // Create output container const outputContainer = document.createElement("div") outputContainer.className = "terminal-output-container" // Add timestamp const timestamp = document.createElement("div") timestamp.className = "terminal-timestamp" timestamp.textContent = new Date().toLocaleTimeString() outputContainer.appendChild(timestamp) // Add error message const errorMessage = document.createElement("div") errorMessage.className = "terminal-error" errorMessage.innerHTML = `Error: ${error.message || "An error occurred while executing the code."}` outputContainer.appendChild(errorMessage) // Add separator const separator = document.createElement("div") separator.className = "terminal-separator" outputContainer.appendChild(separator) // Add to terminal terminalOutput.appendChild(outputContainer) // Scroll to bottom terminalOutput.scrollTop = terminalOutput.scrollHeight } function formatOutput(output) { if (!output) return "" // Replace newlines with
output = output.replace(/\n/g, "
") // Replace tabs with spaces output = output.replace(/\t/g, " ") // Replace multiple spaces with output = output.replace(/ {2}/g, " ") return output } [V0_FILE]html:file="forgot-password.html" isMerged="true" Forgot Password - RTC IDE

RTCIDE

Reset Password

Enter your email address and we'll send you a link to reset your password.

[V0_FILE]html:file="settings.html" isMerged="true" Settings - RTC IDE

RTCIDE

[V0_FILE]javascript:file="js/settings.js" isMerged="true" document.addEventListener("DOMContentLoaded", () => { // Settings navigation const settingsNavLinks = document.querySelectorAll(".settings-nav a") const settingsSections = document.querySelectorAll(".settings-section") settingsNavLinks.forEach((link) => { link.addEventListener("click", function (e) { e.preventDefault() const targetId = this.getAttribute("href").substring(1) // Update active nav link settingsNavLinks.forEach((navLink) => { navLink.classList.remove("active") }) this.classList.add("active") // Show target section settingsSections.forEach((section) => { section.classList.remove("active") }) document.getElementById(targetId).classList.add("active") }) }) // Profile form submission const profileForm = document.getElementById("profile-form") if (profileForm) { profileForm.addEventListener("submit", (e) => { e.preventDefault() // Get form data const name = document.getElementById("profile-name").value const email = document.getElementById("profile-email").value const bio = document.getElementById("profile-bio").value // Update user in local storage const user = JSON.parse(localStorage.getItem("user")) || {} user.name = name user.email = email user.bio = bio localStorage.setItem("user", JSON.stringify(user)) // Show success message showToast("Profile updated successfully", "success") }) } // Account form submission const accountForm = document.getElementById("account-form") if (accountForm) { accountForm.addEventListener("submit", (e) => { e.preventDefault() const currentPassword = document.getElementById("current-password").value const newPassword = document.getElementById("new-password").value const confirmNewPassword = document.getElementById("confirm-new-password").value // Validate passwords if (!currentPassword) { showToast("Current password is required", "error") return } if (!newPassword) { showToast("New password is required", "error") return } if (newPassword !== confirmNewPassword) { showToast("New passwords do not match", "error") return } // For demo purposes, we'll just show a success message showToast("Password updated successfully", "success") // Clear form accountForm.reset() }) } // Editor form submission const editorForm = document.getElementById("editor-form") if (editorForm) { editorForm.addEventListener("submit", (e) => { e.preventDefault() // Get form data const fontSize = document.getElementById("font-size").value const tabSize = document.getElementById("tab-size").value const wordWrap = document.getElementById("word-wrap").value const minimap = document.getElementById("minimap").value const keybinding = document.querySelector('input[name="keybinding"]:checked').value // Save editor settings to local storage const editorSettings = { fontSize, tabSize, wordWrap, minimap, keybinding, } localStorage.setItem("editor_settings", JSON.stringify(editorSettings)) // Show success message showToast("Editor settings updated successfully", "success") }) } // Appearance form submission const appearanceForm = document.getElementById("appearance-form") if (appearanceForm) { appearanceForm.addEventListener("submit", (e) => { e.preventDefault() // Get form data const theme = document.querySelector('input[name="theme"]:checked').value const accentColor = document.getElementById("accent-color").value // Update theme if (theme === "dark") { document.body.classList.add("dark-theme") document.body.classList.remove("light-theme") document.getElementById("theme-toggle-checkbox").checked = true localStorage.setItem("theme", "dark") } else if (theme === "light") { document.body.classList.remove("dark-theme") document.body.classList.add("light-theme") document.getElementById("theme-toggle-checkbox").checked = false localStorage.setItem("theme", "light") } else { // System preference const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches if (prefersDark) { document.body.classList.add("dark-theme") document.body.classList.remove("light-theme") document.getElementById("theme-toggle-checkbox").checked = true } else { document.body.classList.remove("dark-theme") document.body.classList.add("light-theme") document.getElementById("theme-toggle-checkbox").checked = false } localStorage.removeItem("theme") } // Save appearance settings to local storage const appearanceSettings = { theme, accentColor, } localStorage.setItem("appearance_settings", JSON.stringify(appearanceSettings)) // Show success message showToast("Appearance settings updated successfully", "success") }) } // Notifications form submission const notificationsForm = document.getElementById("notifications-form") if (notificationsForm) { notificationsForm.addEventListener("submit", (e) => { e.preventDefault() // Get form data const emailRoomInvites = document.getElementById("email-room-invites").checked const emailUpdates = document.getElementById("email-updates").checked const emailMarketing = document.getElementById("email-marketing").checked const inappRoomInvites = document.getElementById("inapp-room-invites").checked const inappUserJoins = document.getElementById("inapp-user-joins").checked const inappFileChanges = document.getElementById("inapp-file-changes").checked // Save notification settings to local storage const notificationSettings = { email: { roomInvites: emailRoomInvites, updates: emailUpdates, marketing: emailMarketing, }, inapp: { roomInvites: inappRoomInvites, userJoins: inappUserJoins, fileChanges: inappFileChanges, }, } localStorage.setItem("notification_settings", JSON.stringify(notificationSettings)) // Show success message showToast("Notification settings updated successfully", "success") }) } // Load saved settings function loadSavedSettings() { // Load editor settings const editorSettings = JSON.parse(localStorage.getItem("editor_settings")) if (editorSettings) { document.getElementById("font-size").value = editorSettings.fontSize document.getElementById("tab-size").value = editorSettings.tabSize document.getElementById("word-wrap").value = editorSettings.wordWrap document.getElementById("minimap").value = editorSettings.minimap const keybindingRadio = document.querySelector(`input[name="keybinding"][value="${editorSettings.keybinding}"]`) if (keybindingRadio) { keybindingRadio.checked = true } } // Load appearance settings const appearanceSettings = JSON.parse(localStorage.getItem("appearance_settings")) if (appearanceSettings) { const themeRadio = document.querySelector(`input[name="theme"][value="${appearanceSettings.theme}"]`) if (themeRadio) { themeRadio.checked = true } document.getElementById("accent-color").value = appearanceSettings.accentColor } // Load notification settings const notificationSettings = JSON.parse(localStorage.getItem("notification_settings")) if (notificationSettings) { document.getElementById("email-room-invites").checked = notificationSettings.email.roomInvites document.getElementById("email-updates").checked = notificationSettings.email.updates document.getElementById("email-marketing").checked = notificationSettings.email.marketing document.getElementById("inapp-room-invites").checked = notificationSettings.inapp.roomInvites document.getElementById("inapp-user-joins").checked = notificationSettings.inapp.userJoins document.getElementById("inapp-file-changes").checked = notificationSettings.inapp.fileChanges } // Load user profile const user = JSON.parse(localStorage.getItem("user")) if (user) { document.getElementById("profile-name").value = user.name || "" document.getElementById("profile-email").value = user.email || "" document.getElementById("profile-bio").value = user.bio || "" } } loadSavedSettings() // Show toast message function showToast(message, type = "info") { const toast = document.createElement("div") toast.className = `toast toast-${type}` toast.innerHTML = message document.body.appendChild(toast) setTimeout(() => { toast.classList.add("show") }, 10) setTimeout(() => { toast.classList.remove("show") setTimeout(() => { document.body.removeChild(toast) }, 300) }, 3000) } }) [V0_FILE]javascript:file="js/main.js" isMerged="true" document.addEventListener("DOMContentLoaded", () => { // Add animations to elements animateElements() // Handle scroll events window.addEventListener("scroll", () => { const header = document.querySelector(".main-header") if (window.scrollY > 50) { header.classList.add("scrolled") } else { header.classList.remove("scrolled") } }) // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener("click", function (e) { const targetId = this.getAttribute("href") if (targetId === "#") return e.preventDefault() const targetElement = document.querySelector(targetId) if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: "smooth", }) } }) }) }) function animateElements() { // Add animation classes to elements const animatedElements = document.querySelectorAll(".feature-card, .hero-content, .hero-image") animatedElements.forEach((element, index) => { // Add animation with delay based on index setTimeout(() => { element.classList.add("animated") }, index * 100) }) } [V0_FILE]javascript:file="js/firebase-config.js" // Firebase configuration and initialization import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js" import { getAuth } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js" import { getFirestore } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" import { getDatabase } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js" const firebaseConfig = { apiKey: "AIzaSyD1u7gTmgvuFiKnhvNkaJSjpivkGb7WhOA", authDomain: "registeration-form-b1488.firebaseapp.com", projectId: "registeration-form-b1488", storageBucket: "registeration-form-b1488.firebasestorage.app", messagingSenderId: "163135538859", appId: "1:163135538859:web:0af9f3bcdb7c36ce5bd9ee", databaseURL: "https://registeration-form-b1488-default-rtdb.firebaseio.com", } // Initialize Firebase const app = initializeApp(firebaseConfig) const auth = getAuth(app) const db = getFirestore(app) const rtdb = getDatabase(app) export { app, auth, db, rtdb } [V0_FILE]javascript:file="js/auth.js" isEdit="true" import { auth, db } from "./firebase-config.js" import { signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js" import { doc, getDoc } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" document.addEventListener("DOMContentLoaded", () => { // Check if user is logged in function checkAuth() { onAuthStateChanged(auth, async (user) => { if (user) { // User is signed in try { // Get user data from Firestore const userDoc = await getDoc(doc(db, "users", user.uid)) if (userDoc.exists()) { const userData = userDoc.data() // Store user data in localStorage for easy access localStorage.setItem( "user", JSON.stringify({ id: user.uid, name: userData.firstName + " " + userData.lastName, email: userData.email, avatar: userData.avatar || "https://via.placeholder.com/40", }), ) // If on auth pages and logged in, redirect to dashboard if ( window.location.pathname.includes("login") || window.location.pathname.includes("signup") || window.location.pathname.includes("forgot-password") ) { window.location.href = "dashboard.html" } // Update UI with user info updateUserUI(userData) } } catch (error) { console.error("Error getting user data:", error) } } else { // User is signed out localStorage.removeItem("user") // If on protected pages and not logged in, redirect to login if ( window.location.pathname.includes("dashboard") || window.location.pathname.includes("editor") || window.location.pathname.includes("settings") ) { window.location.href = "login.html" } } }) } function updateUserUI(userData) { const userNameElements = document.querySelectorAll(".user-name") const userAvatarElements = document.querySelectorAll(".user-avatar img") userNameElements.forEach((el) => { el.textContent = userData.firstName + " " + userData.lastName }) userAvatarElements.forEach((el) => { if (userData.avatar) { el.src = userData.avatar } }) } // Logout functionality const logoutBtn = document.getElementById("logout-btn") if (logoutBtn) { logoutBtn.addEventListener("click", (e) => { e.preventDefault() signOut(auth) .then(() => { localStorage.removeItem("user") localStorage.removeItem("current_room") localStorage.removeItem("current_file") window.location.href = "login.html" }) .catch((error) => { console.error("Error signing out:", error) }) }) } // Initialize auth check checkAuth() }) // Function to show toast messages export function showToast(message, type = "info") { const toast = document.createElement("div") toast.className = `toast toast-${type}` toast.innerHTML = message document.body.appendChild(toast) setTimeout(() => { toast.classList.add("show") }, 10) setTimeout(() => { toast.classList.remove("show") setTimeout(() => { document.body.removeChild(toast) }, 300) }, 3000) } [V0_FILE]html:file="login.html" isEdit="true" Login - RTC IDE

RTCIDE

Login

[V0_FILE]html:file="signup.html" isEdit="true" Sign Up - RTC IDE

RTCIDE

Create an Account

First Name

Last Name

Password

Confirm Password

I agree to the Terms of Service and Privacy Policy

[V0_FILE]javascript:file="js/firebase-auth.js" import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js" import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js" import { getFirestore, setDoc, doc } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" const firebaseConfig = { apiKey: "AIzaSyD1u7gTmgvuFiKnhvNkaJSjpivkGb7WhOA", authDomain: "registeration-form-b1488.firebaseapp.com", projectId: "registeration-form-b1488", storageBucket: "registeration-form-b1488.firebasestorage.app", messagingSenderId: "163135538859", appId: "1:163135538859:web:0af9f3bcdb7c36ce5bd9ee", } // Initialize Firebase const app = initializeApp(firebaseConfig) function showMessage(message, divId) { var messageDiv = document.getElementById(divId) if (messageDiv) { messageDiv.style.display = "block" messageDiv.innerHTML = message messageDiv.style.opacity = 1 setTimeout(() => { messageDiv.style.opacity = 0 }, 5000) } } const signUp = document.getElementById("submitSignUp") if (signUp) { signUp.addEventListener("click", (event) => { event.preventDefault() const email = document.getElementById("rEmail").value const password = document.getElementById("rPassword").value const firstName = document.getElementById("fName").value const lastName = document.getElementById("lName").value const confirmPassword = document.getElementById("confirm-password").value const termsChecked = document.getElementById("terms").checked // Validation if (!email || !password || !firstName || !lastName) { showMessage("All fields are required", "signUpMessage") return } if (password !== confirmPassword) { showMessage("Passwords do not match", "signUpMessage") return } if (!termsChecked) { showMessage("You must agree to the terms", "signUpMessage") return } const auth = getAuth() const db = getFirestore(app) createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { const user = userCredential.user const userData = { email: email, firstName: firstName, lastName: lastName, createdAt: new Date().toISOString(), avatar: "https://via.placeholder.com/40", } showMessage("Account Created Successfully", "signUpMessage") const docRef = doc(db, "users", user.uid) setDoc(docRef, userData) .then(() => { window.location.href = "login.html" }) .catch((error) => { console.error("Error Writing document", error) }) }) .catch((error) => { const errorCode = error.code if (errorCode == "auth/email-already-in-use") { showMessage("Email Address Already Exists !!!", "signUpMessage") } else { showMessage("Unable to create User: " + error.message, "signUpMessage") } }) }) } const signIn = document.getElementById("submitSignIn") if (signIn) { signIn.addEventListener("click", (event) => { event.preventDefault() const email = document.getElementById("email").value const password = document.getElementById("password").value const auth = getAuth() if (!email || !password) { showMessage("Email and password are required", "signInMessage") return } signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { showMessage("Login Successfully", "signInMessage") const user = userCredential.user localStorage.setItem("loggedInUserId", user.uid) window.location.href = "dashboard.html" }) .catch((error) => { const errorCode = error.code if (errorCode == "auth/invalid-credential") { showMessage("Incorrect Email or password !!!", "signInMessage") } else { showMessage("Account does not Exist", "signInMessage") } }) }) } [V0_FILE]javascript:file="js/dashboard.js" isFixed="true" isEdit="true" isQuickEdit="true" import { db, rtdb } from "./firebase-config.js" import { collection, addDoc, getDocs, query, where, orderBy, Timestamp, onSnapshot, updateDoc, doc, limit, } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" import { ref, set } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js" import { showToast } from "./auth.js" document.addEventListener("DOMContentLoaded", () => { // Get current user const user = JSON.parse(localStorage.getItem("user")) if (!user) { window.location.href = "login.html" return } // Create room form submission const createRoomForm = document.getElementById("create-room-form") if (createRoomForm) { createRoomForm.addEventListener("submit", async (e) => { e.preventDefault() const roomName = document.getElementById("room-name").value const roomLanguage = document.getElementById("room-language").value const roomPassword = document.getElementById("room-password").value try { // Create room in Firestore const roomData = { name: roomName, language: roomLanguage, password: roomPassword, createdBy: user.id, createdAt: Timestamp.now(), lastActive: Timestamp.now(), members: [user.id], } const roomRef = await addDoc(collection(db, "rooms"), roomData) const roomId = roomRef.id // Create initial file in the room const fileData = { name: "main." + getFileExtension(roomLanguage), content: getDefaultCode(roomLanguage), language: roomLanguage, createdBy: user.id, createdAt: Timestamp.now(), updatedAt: Timestamp.now(), roomId: roomId, } const fileRef = await addDoc(collection(db, "files"), fileData) // Set up real-time data in RTDB await set(ref(rtdb, `rooms/${roomId}/code`), { content: getDefaultCode(roomLanguage), language: roomLanguage, lastUpdatedBy: user.id, lastUpdatedAt: Timestamp.now().toMillis(), }) // Set current room in localStorage const room = { id: roomId, name: roomName, language: roomLanguage, password: roomPassword, createdAt: roomData.createdAt.toMillis(), lastActive: roomData.lastActive.toMillis(), } localStorage.setItem("current_room", JSON.stringify(room)) // Set current file in localStorage const file = { id: fileRef.id, name: fileData.name, content: fileData.content, language: fileData.language, createdAt: fileData.createdAt.toMillis(), updatedAt: fileData.updatedAt.toMillis(), roomId: roomId, } localStorage.setItem("current_file", JSON.stringify(file)) // Redirect to editor window.location.href = "editor.html" } catch (error) { console.error("Error creating room:", error) showToast("Error creating room: " + error.message, "error") } }) } // Join room form submission const joinRoomForm = document.getElementById("join-room-form") if (joinRoomForm) { joinRoomForm.addEventListener("submit", async (e) => { e.preventDefault() const roomId = document.getElementById("room-id").value const roomPassword = document.getElementById("join-room-password").value try { // Get room from Firestore const roomQuery = query(collection(db, "rooms"), where("__name__", "==", roomId)) const roomSnapshot = await getDocs(roomQuery) if (roomSnapshot.empty) { showToast("Room not found", "error") return } const roomDoc = roomSnapshot.docs[0] const roomData = roomDoc.data() // Check password if required if (roomData.password && roomData.password !== roomPassword) { showToast("Incorrect password", "error") return } // Add user to room members if not already a member if (!roomData.members.includes(user.id)) { await updateDoc(doc(db, "rooms", roomId), { members: [...roomData.members, user.id], lastActive: Timestamp.now(), }) } else { // Just update last active time await updateDoc(doc(db, "rooms", roomId), { lastActive: Timestamp.now(), }) } // Set current room in localStorage const room = { id: roomId, name: roomData.name, language: roomData.language, password: roomData.password, createdAt: roomData.createdAt.toMillis(), lastActive: Timestamp.now().toMillis(), } localStorage.setItem("current_room", JSON.stringify(room)) // Get the first file in the room const filesQuery = query( collection(db, "files"), where("roomId", "==", roomId), orderBy("createdAt", "asc"), limit(1), ) const filesSnapshot = await getDocs(filesQuery) if (!filesSnapshot.empty) { const fileDoc = filesSnapshot.docs[0] const fileData = fileDoc.data() // Set current file in localStorage const file = { id: fileDoc.id, name: fileData.name, content: fileData.content, language: fileData.language, createdAt: fileData.createdAt.toMillis(), updatedAt: fileData.updatedAt.toMillis(), roomId: roomId, } localStorage.setItem("current_file", JSON.stringify(file)) } // Redirect to editor window.location.href = "editor.html" } catch (error) { console.error("Error joining room:", error) showToast("Error joining room: " + error.message, "error") } }) } // Load recent rooms function loadRecentRooms() { const recentRoomsList = document.getElementById("recent-rooms-list") if (recentRoomsList) { // Query rooms where user is a member const roomsQuery = query( collection(db, "rooms"), where("members", "array-contains", user.id), orderBy("lastActive", "desc"), ) // Set up real-time listener onSnapshot(roomsQuery, (snapshot) => { if (snapshot.empty) { recentRoomsList.innerHTML = `

No recent rooms found

` return } // Clear the list recentRoomsList.innerHTML = "" // Add rooms to the list snapshot.forEach((doc) => { const roomData = doc.data() const roomCard = document.createElement("div") roomCard.className = "room-card" roomCard.innerHTML = `

${roomData.name}

${roomData.language}

ID: ${doc.id}

Last active: ${formatDate(roomData.lastActive.toMillis())}

` roomCard.addEventListener("click", async () => { try { // Update last active time await updateDoc(doc(db, "rooms", doc.id), { lastActive: Timestamp.now(), }) // Set current room in localStorage const room = { id: doc.id, name: roomData.name, language: roomData.language, password: roomData.password, createdAt: roomData.createdAt.toMillis(), lastActive: Timestamp.now().toMillis(), } localStorage.setItem("current_room", JSON.stringify(room)) // Get the first file in the room const filesQuery = query( collection(db, "files"), where("roomId", "==", doc.id), orderBy("createdAt", "asc"), limit(1), ) const filesSnapshot = await getDocs(filesQuery) if (!filesSnapshot.empty) { const fileDoc = filesSnapshot.docs[0] const fileData = fileDoc.data() // Set current file in localStorage const file = { id: fileDoc.id, name: fileData.name, content: fileData.content, language: fileData.language, createdAt: fileData.createdAt.toMillis(), updatedAt: fileData.updatedAt.toMillis(), roomId: doc.id, } localStorage.setItem("current_file", JSON.stringify(file)) } // Redirect to editor window.location.href = "editor.html" } catch (error) { console.error("Error opening room:", error) showToast("Error opening room: " + error.message, "error") } }) recentRoomsList.appendChild(roomCard) }) }) } } // Format date helper function formatDate(timestamp) { const date = new Date(timestamp) const now = new Date() const diff = now - date // Less than a minute if (diff < 60000) { return "Just now" } // Less than an hour if (diff < 3600000) { const minutes = Math.floor(diff / 60000) return `${minutes} minute${minutes !== 1 ? "s" : ""} ago` } // Less than a day if (diff < 86400000) { const hours = Math.floor(diff / 3600000) return `${hours} hour${hours !== 1 ? "s" : ""} ago` } // Less than a week if (diff < 604800000) { const days = Math.floor(diff / 86400000) return `${days} day${days !== 1 ? "s" : ""} ago` } // Format as date return date.toLocaleDateString() } function getFileExtension(language) { switch (language) { case "java": return "java" case "python": return "py" case "cpp": return "cpp" default: return "txt" } } function getDefaultCode(language) { switch (language) { case "java": return `public class Main {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}` case "python": return `def main():\n print("Hello, World!")\n\nif __name__ == "__main__":\n main()` case "cpp": return `#include \n\nint main() {\n std::cout << "Hello, World!" << std::endl;\n return 0;\n}` default: return "" } } loadRecentRooms() }) [V0_FILE]javascript:file="js/websocket.js" isFixed="true" isEdit="true" isQuickEdit="true" import { db, rtdb } from "./firebase-config.js" import { doc, getDoc, updateDoc } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" import { ref, onValue, set, onDisconnect } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js" import { showToast } from "./auth.js" let editor const collaborators = {} let currentRoom let currentUser const isInitialLoad = true let lastUpdateTime = 0 const DEBOUNCE_TIME = 500 // ms function initWebSocket() { currentRoom = JSON.parse(localStorage.getItem("current_room")) currentUser = JSON.parse(localStorage.getItem("user")) if (!currentRoom || !currentUser) return // Initialize editor reference editor = monaco.editor.getModels()[0] if (!editor) { console.error("Editor not initialized") return } // Connect to Firebase Realtime Database for code sync connectToRoom(currentRoom.id, currentUser) // Set up editor change listener with debounce editor.onDidChangeContent((event) => { const now = Date.now() if (now - lastUpdateTime > DEBOUNCE_TIME) { lastUpdateTime = now sendCodeUpdate() } }) // Handle language changes const languageSelector = document.getElementById("language-selector") if (languageSelector) { languageSelector.addEventListener("change", function () { const language = this.value sendLanguageUpdate(language) }) } // Update collaborators list initially updateCollaboratorsList() } function connectToRoom(roomId, user) { try { // Listen for code changes const codeRef = ref(rtdb, `rooms/${roomId}/code`) onValue(codeRef, (snapshot) => { const data = snapshot.val() if (data && data.lastUpdatedBy !== user.id) { // Only update if change was made by another user updateEditorContent(data.content, data.language) // Update language selector if needed const languageSelector = document.getElementById("language-selector") if (languageSelector && languageSelector.value !== data.language) { languageSelector.value = data.language } } }) // Track presence of users in the room const presenceRef = ref(rtdb, `rooms/${roomId}/presence/${user.id}`) const userPresence = { id: user.id, name: user.name, avatar: user.avatar, status: "online", lastActive: Date.now(), } // Set user as online set(presenceRef, userPresence) // Remove user when disconnected onDisconnect(presenceRef).remove() // Listen for presence changes const roomPresenceRef = ref(rtdb, `rooms/${roomId}/presence`) onValue(roomPresenceRef, (snapshot) => { const data = snapshot.val() || {} // Update collaborators object Object.keys(collaborators).forEach((userId) => { if (!data[userId]) { delete collaborators[userId] } }) Object.keys(data).forEach((userId) => { collaborators[userId] = data[userId] }) // Update UI updateCollaboratorsList() }) // Get room details from Firestore getDoc(doc(db, "rooms", roomId)).then((roomDoc) => { if (roomDoc.exists()) { const roomData = roomDoc.data() // Check if user is the host if (roomData.createdBy === user.id) { collaborators[user.id].isHost = true } // Update UI updateCollaboratorsList() } }) showToast("Connected to room", "success") } catch (error) { console.error("Error connecting to room:", error) showToast("Error connecting to room: " + error.message, "error") } } function sendCodeUpdate() { if (!currentRoom || !currentUser || !editor) return try { const content = editor.getValue() const language = document.getElementById("language-selector").value // Update code in RTDB set(ref(rtdb, `rooms/${currentRoom.id}/code`), { content: content, language: language, lastUpdatedBy: currentUser.id, lastUpdatedAt: Date.now(), }) // Update file in Firestore if this is the current file const currentFile = JSON.parse(localStorage.getItem("current_file")) if (currentFile) { updateDoc(doc(db, "files", currentFile.id), { content: content, language: language, updatedAt: new Date(), }) } } catch (error) { console.error("Error sending code update:", error) } } function sendLanguageUpdate(language) { if (!currentRoom || !currentUser) return try { // Get current code const content = editor.getValue() // Update code in RTDB with new language set(ref(rtdb, `rooms/${currentRoom.id}/code`), { content: content, language: language, lastUpdatedBy: currentUser.id, lastUpdatedAt: Date.now(), }) // Update room language in Firestore updateDoc(doc(db, "rooms", currentRoom.id), { language: language, }) // Update current room in localStorage const room = JSON.parse(localStorage.getItem("current_room")) room.language = language localStorage.setItem("current_room", JSON.stringify(room)) // Update current file language if this is the current file const currentFile = JSON.parse(localStorage.getItem("current_file")) if (currentFile) { updateDoc(doc(db, "files", currentFile.id), { language: language, updatedAt: new Date(), }) // Update current file in localStorage currentFile.language = language localStorage.setItem("current_file", JSON.stringify(currentFile)) } } catch (error) { console.error("Error sending language update:", error) } } function updateEditorContent(content, language) { if (!editor) return // Update content if (content !== editor.getValue()) { editor.setValue(content) } // Update language monaco.editor.setModelLanguage(editor, getMonacoLanguage(language)) } function updateCollaboratorsList() { const collaboratorsList = document.getElementById("collaborators-list") const collaboratorsCount = document.getElementById("collaborators-count") if (!collaboratorsList || !collaboratorsCount) return // Clear list collaboratorsList.innerHTML = "" // Update count const count = Object.keys(collaborators).length collaboratorsCount.textContent = count // Add collaborators to list Object.values(collaborators).forEach((user) => { const collaboratorItem = document.createElement("div") collaboratorItem.className = "collaborator" collaboratorItem.innerHTML = `

${user.name} ${user.isHost ? "(Host)" : ""}

${user.status}

` collaboratorsList.appendChild(collaboratorItem) }) } function getMonacoLanguage(language) { switch (language) { case "java": return "java" case "python": return "python" case "cpp": return "cpp" default: return "plaintext" } } // Export the initWebSocket function to be used in editor.js export { initWebSocket } [V0_FILE]javascript:file="js/file-explorer.js" isFixed="true" isEdit="true" isQuickEdit="true" import { db } from "./firebase-config.js" import { collection, addDoc, deleteDoc, query, where, orderBy, onSnapshot, } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" import { showToast } from "./auth.js" function initFileExplorer() { const newFileBtn = document.getElementById("new-file-btn") const newFolderBtn = document.getElementById("new-folder-btn") const uploadFileBtn = document.getElementById("upload-file-btn") const currentRoom = getCurrentRoom() const currentUser = JSON.parse(localStorage.getItem("user")) if (!currentRoom || !currentUser) return // New file button if (newFileBtn) { newFileBtn.addEventListener("click", () => { const modal = document.getElementById("new-file-modal") modal.style.display = "flex" const form = document.getElementById("new-file-form") form.reset() // Set default file extension based on current language const language = document.getElementById("language-selector").value const fileTypeSelect = document.getElementById("new-file-type") switch (language) { case "java": fileTypeSelect.value = ".java" break case "python": fileTypeSelect.value = ".py" break case "cpp": fileTypeSelect.value = ".cpp" break } // Handle form submission form.onsubmit = async (e) => { e.preventDefault() const fileName = document.getElementById("new-file-name").value const fileType = fileTypeSelect.value const fullFileName = fileName + fileType // Get language based on file type let fileLanguage switch (fileType) { case ".java": fileLanguage = "java" break case ".py": fileLanguage = "python" break case ".cpp": fileLanguage = "cpp" break default: fileLanguage = "plaintext" } try { // Create file in Firestore const fileData = { name: fullFileName, content: getDefaultCode(fileLanguage), language: fileLanguage, createdBy: currentUser.id, createdAt: new Date(), updatedAt: new Date(), roomId: currentRoom.id, isFolder: false, } const fileRef = await addDoc(collection(db, "files"), fileData) // Set as current file const file = { id: fileRef.id, name: fullFileName, content: fileData.content, language: fileLanguage, createdAt: fileData.createdAt.getTime(), updatedAt: fileData.updatedAt.getTime(), roomId: currentRoom.id, } localStorage.setItem("current_file", JSON.stringify(file)) // Update editor updateEditor(file) // Close modal modal.style.display = "none" // Show success message showToast("File created successfully", "success") } catch (error) { console.error("Error creating file:", error) showToast("Error creating file: " + error.message, "error") } } }) } // New folder button if (newFolderBtn) { newFolderBtn.addEventListener("click", () => { const modal = document.getElementById("new-folder-modal") modal.style.display = "flex" const form = document.getElementById("new-folder-form") form.reset() // Handle form submission form.onsubmit = async (e) => { e.preventDefault() const folderName = document.getElementById("new-folder-name").value try { // Create folder in Firestore const folderData = { name: folderName, createdBy: currentUser.id, createdAt: new Date(), roomId: currentRoom.id, isFolder: true, } await addDoc(collection(db, "files"), folderData) // Close modal modal.style.display = "none" // Show success message showToast("Folder created successfully", "success") } catch (error) { console.error("Error creating folder:", error) showToast("Error creating folder: " + error.message, "error") } } }) } // Upload file button if (uploadFileBtn) { uploadFileBtn.addEventListener("click", () => { const input = document.createElement("input") input.type = "file" input.onchange = async (e) => { const file = e.target.files[0] if (!file) return const reader = new FileReader() reader.onload = async (e) => { const content = e.target.result // Determine language from file extension const extension = file.name.split(".").pop().toLowerCase() let language switch (extension) { case "java": language = "java" break case "py": language = "python" break case "cpp": case "c": case "h": language = "cpp" break default: language = "plaintext" } try { // Create file in Firestore const fileData = { name: file.name, content: content, language: language, createdBy: currentUser.id, createdAt: new Date(), updatedAt: new Date(), roomId: currentRoom.id, isFolder: false, } const fileRef = await addDoc(collection(db, "files"), fileData) // Set as current file const fileObj = { id: fileRef.id, name: file.name, content: content, language: language, createdAt: fileData.createdAt.getTime(), updatedAt: fileData.updatedAt.getTime(), roomId: currentRoom.id, } localStorage.setItem("current_file", JSON.stringify(fileObj)) // Update editor updateEditor(fileObj) // Show success message showToast("File uploaded successfully", "success") } catch (error) { console.error("Error uploading file:", error) showToast("Error uploading file: " + error.message, "error") } } reader.readAsText(file) } input.click() }) } // Set up real-time listener for files updateFileExplorer() } function updateFileExplorer() { const fileExplorerContent = document.getElementById("file-explorer-content") const currentRoom = getCurrentRoom() const currentUser = JSON.parse(localStorage.getItem("user")) if (!fileExplorerContent || !currentRoom || !currentUser) return // Query files for current room const filesQuery = query( collection(db, "files"), where("roomId", "==", currentRoom.id), orderBy("isFolder", "desc"), orderBy("name", "asc"), ) // Set up real-time listener onSnapshot(filesQuery, (snapshot) => { // Clear content fileExplorerContent.innerHTML = "" // Show empty state if no files or folders if (snapshot.empty) { fileExplorerContent.innerHTML = `

No files yet

` return } // Process folders and files snapshot.forEach((doc) => { const fileData = doc.data() const fileItem = document.createElement("div") fileItem.className = "file-item" // Check if this is the current file const currentFile = JSON.parse(localStorage.getItem("current_file")) if (currentFile && currentFile.id === doc.id) { fileItem.classList.add("active") } // Get icon based on file type or folder let icon if (fileData.isFolder) { icon = "fa-folder" } else if (fileData.name.endsWith(".java")) { icon = "fa-java" } else if (fileData.name.endsWith(".py")) { icon = "fa-python" } else if (fileData.name.endsWith(".cpp") || fileData.name.endsWith(".c") || fileData.name.endsWith(".h")) { icon = "fa-file-code" } else { icon = "fa-file" } fileItem.innerHTML = ` ${fileData.name}

` // Open file or folder fileItem.addEventListener("click", async function () { if (fileData.isFolder) { // TODO: Implement folder navigation if needed return } try { // Set as current file const file = { id: doc.id, name: fileData.name, content: fileData.content, language: fileData.language, createdAt: fileData.createdAt.toMillis ? fileData.createdAt.toMillis() : fileData.createdAt.getTime(), updatedAt: fileData.updatedAt.toMillis ? fileData.updatedAt.toMillis() : fileData.updatedAt.getTime(), roomId: currentRoom.id, } localStorage.setItem("current_file", JSON.stringify(file)) // Update active state document.querySelectorAll(".file-item").forEach((item) => { item.classList.remove("active") }) this.classList.add("active") // Update editor updateEditor(file) } catch (error) { console.error("Error opening file:", error) showToast("Error opening file: " + error.message, "error") } }) // Delete file or folder const deleteBtn = fileItem.querySelector(".file-item-action") deleteBtn.addEventListener("click", async (e) => { e.stopPropagation() if (confirm(`Are you sure you want to delete ${fileData.isFolder ? "folder" : "file"} "${fileData.name}"?`)) { try { // Delete from Firestore await deleteDoc(doc(db, "files", doc.id)) // If this was the current file, clear it const currentFile = JSON.parse(localStorage.getItem("current_file")) if (currentFile && currentFile.id === doc.id) { localStorage.removeItem("current_file") // Reset editor to default const language = document.getElementById("language-selector").value updateEditorContent(getDefaultCode(language), language) } // Show success message showToast(`${fileData.isFolder ? "Folder" : "File"} deleted successfully`, "success") } catch (error) { console.error("Error deleting file:", error) showToast("Error deleting file: " + error.message, "error") } } }) fileExplorerContent.appendChild(fileItem) }) }) } function updateEditor(file) { // Update language selector const languageSelector = document.getElementById("language-selector") if (languageSelector) { languageSelector.value = file.language } // Update editor content updateEditorContent(file.content, file.language) } function updateEditorContent(content, language) { // Get Monaco editor instance const editor = monaco.editor.getModels()[0] if (!editor) return // Update content editor.setValue(content) // Update language monaco.editor.setModelLanguage(editor, getMonacoLanguage(language)) } function getCurrentRoom() { return JSON.parse(localStorage.getItem("current_room")) } function getMonacoLanguage(language) { switch (language) { case "java": return "java" case "python": return "python" case "cpp": return "cpp" default: return "plaintext" } } function getDefaultCode(language) { switch (language) { case "java": return `public class Main {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}` case "python": return `def main():\n print("Hello, World!")\n\nif __name__ == "__main__":\n main()` case "cpp": return `#include \n\nint main() {\n std::cout << "Hello, World!" << std::endl;\n return 0;\n}` default: return "" } } // Export the initFileExplorer function to be used in editor.js export { initFileExplorer } [V0_FILE]javascript:file="js/editor.js" isFixed="true" isEdit="true" isQuickEdit="true" import { db } from "./firebase-config.js" import { doc, updateDoc, addDoc, collection } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" import { initWebSocket } from "./websocket.js" import { initFileExplorer } from "./file-explorer.js" import { showToast } from "./auth.js" import { compileAndRun, displayOutput, displayError } from "./compiler.js" document.addEventListener("DOMContentLoaded", async () => { // Load current room const currentRoom = JSON.parse(localStorage.getItem("current_room")) if (!currentRoom) { window.location.href = "dashboard.html" return } // Update room info in UI document.getElementById("room-name").textContent = currentRoom.name document.getElementById("room-id").textContent = `ID: ${currentRoom.id}` // Set initial language document.getElementById("language-selector").value = currentRoom.language // Initialize Monaco Editor let editor require(["vs/editor/editor.main"], () => { // Define themes monaco.editor.defineTheme("rtc-dark", { base: "vs-dark", inherit: true, rules: [], colors: { "editor.background": "#1e293b", "editor.foreground": "#f8fafc", "editor.lineHighlightBackground": "#334155", "editorCursor.foreground": "#6366f1", "editorWhitespace.foreground": "#334155", }, }) monaco.editor.defineTheme("rtc-light", { base: "vs", inherit: true, rules: [], colors: { "editor.background": "#ffffff", "editor.foreground": "#1e293b", "editor.lineHighlightBackground": "#f1f5f9", "editorCursor.foreground": "#6366f1", "editorWhitespace.foreground": "#e2e8f0", }, }) // Set theme based on current site theme const isDarkTheme = document.body.classList.contains("dark-theme") const editorTheme = isDarkTheme ? "rtc-dark" : "rtc-light" // Get initial content let initialContent = getDefaultCode(currentRoom.language) const currentFile = JSON.parse(localStorage.getItem("current_file")) if (currentFile) { initialContent = currentFile.content } // Create editor editor = monaco.editor.create(document.getElementById("monaco-editor"), { value: initialContent, language: getMonacoLanguage(currentRoom.language), theme: editorTheme, automaticLayout: true, minimap: { enabled: true, }, scrollBeyondLastLine: false, fontSize: 14, tabSize: 4, insertSpaces: true, wordWrap: "on", lineNumbers: "on", glyphMargin: true, folding: true, lineDecorationsWidth: 10, lineNumbersMinChars: 3, }) // Handle theme changes const themeToggle = document.getElementById("theme-toggle-checkbox") themeToggle.addEventListener("change", function () { const newTheme = this.checked ? "rtc-dark" : "rtc-light" monaco.editor.setTheme(newTheme) }) // Handle run button const runBtn = document.getElementById("run-btn") runBtn.addEventListener("click", function () { const code = editor.getValue() const language = document.getElementById("language-selector").value const input = document.getElementById("terminal-input").value // Show loading state this.disabled = true this.innerHTML = ' Running...' // Clear previous output document.getElementById("terminal-output").innerHTML = "" // Switch to output tab document.querySelector('.terminal-tab[data-tab="output"]').click() // Compile and run code compileAndRun(code, language, input) .then((result) => { displayOutput(result) }) .catch((error) => { displayError(error) }) .finally(() => { // Reset button state this.disabled = false this.innerHTML = ' Run' }) }) // Handle save button const saveBtn = document.getElementById("save-btn") saveBtn.addEventListener("click", async () => { const code = editor.getValue() const language = document.getElementById("language-selector").value // Save code to current file const currentFile = JSON.parse(localStorage.getItem("current_file")) if (currentFile) { try { // Update file in Firestore await updateDoc(doc(db, "files", currentFile.id), { content: code, language: language, updatedAt: new Date(), }) // Update file in localStorage currentFile.content = code currentFile.language = language currentFile.updatedAt = Date.now() localStorage.setItem("current_file", JSON.stringify(currentFile)) // Show success message showToast("File saved successfully", "success") } catch (error) { console.error("Error saving file:", error) showToast("Error saving file: " + error.message, "error") } } else { // Create a new file showNewFileModal(code, language) } }) // Handle keyboard shortcuts editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => { saveBtn.click() }) editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => { runBtn.click() }) // Initialize terminal resizer initTerminalResizer() // Initialize file explorer initFileExplorer() // Initialize modals initModals() // Initialize WebSocket connection initWebSocket() }) // Helper function to get Monaco language ID function getMonacoLanguage(language) { switch (language) { case "java": return "java" case "python": return "python" case "cpp": return "cpp" default: return "plaintext" } } // Helper function to get default code for a language function getDefaultCode(language) { switch (language) { case "java": return `public class Main {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}` case "python": return `def main():\n print("Hello, World!")\n\nif __name__ == "__main__":\n main()` case "cpp": return `#include \n\nint main() {\n std::cout << "Hello, World!" << std::endl;\n return 0;\n}` default: return "" } } // Initialize terminal resizer function initTerminalResizer() { const resizer = document.getElementById("terminal-resizer") const terminal = document.getElementById("terminal-container") let startY, startHeight resizer.addEventListener("mousedown", (e) => { startY = e.clientY startHeight = Number.parseInt(document.defaultView.getComputedStyle(terminal).height, 10) document.documentElement.addEventListener("mousemove", doDrag, false) document.documentElement.addEventListener("mouseup", stopDrag, false) }) function doDrag(e) { terminal.style.height = startHeight - (e.clientY - startY) + "px" } function stopDrag() { document.documentElement.removeEventListener("mousemove", doDrag, false) document.documentElement.removeEventListener("mouseup", stopDrag, false) } // Terminal tab switching const terminalTabs = document.querySelectorAll(".terminal-tab") const terminalTabContents = document.querySelectorAll(".terminal-tab-content") terminalTabs.forEach((tab) => { tab.addEventListener("click", function () { const tabName = this.getAttribute("data-tab") // Update active tab terminalTabs.forEach((t) => t.classList.remove("active")) this.classList.add("active") // Update active content terminalTabContents.forEach((c) => c.classList.remove("active")) document.getElementById(`${tabName}-tab`).classList.add("active") }) }) // Terminal minimize/maximize const minimizeTerminalBtn = document.getElementById("minimize-terminal-btn") let terminalHeight = "200px" minimizeTerminalBtn.addEventListener("click", function () { const icon = this.querySelector("i") if (terminal.style.height === "30px") { terminal.style.height = terminalHeight icon.classList.remove("fa-chevron-up") icon.classList.add("fa-chevron-down") } else { terminalHeight = terminal.style.height || "200px" terminal.style.height = "30px" icon.classList.remove("fa-chevron-down") icon.classList.add("fa-chevron-up") } }) // Clear terminal const clearTerminalBtn = document.getElementById("clear-terminal-btn") clearTerminalBtn.addEventListener("click", () => { document.getElementById("terminal-output").innerHTML = "" }) } // Initialize modals function initModals() { const modals = document.querySelectorAll(".modal") const modalCloseButtons = document.querySelectorAll(".modal-close") modalCloseButtons.forEach((button) => { button.addEventListener("click", function () { const modal = this.closest(".modal") modal.style.display = "none" }) }) window.addEventListener("click", (e) => { modals.forEach((modal) => { if (e.target === modal) { modal.style.display = "none" } }) }) } // Show new file modal function showNewFileModal(code, language) { const modal = document.getElementById("new-file-modal") const form = document.getElementById("new-file-form") const fileTypeSelect = document.getElementById("new-file-type") // Set default file extension based on language switch (language) { case "java": fileTypeSelect.value = ".java" break case "python": fileTypeSelect.value = ".py" break case "cpp": fileTypeSelect.value = ".cpp" break } // Show modal modal.style.display = "flex" // Handle form submission form.onsubmit = async (e) => { e.preventDefault() const fileName = document.getElementById("new-file-name").value const fileType = fileTypeSelect.value const fullFileName = fileName + fileType try { // Create file in Firestore const fileData = { name: fullFileName, content: code, language: language, createdBy: JSON.parse(localStorage.getItem("user")).id, createdAt: new Date(), updatedAt: new Date(), roomId: currentRoom.id, isFolder: false, } const fileRef = await addDoc(collection(db, "files"), fileData) // Set as current file const file = { id: fileRef.id, name: fullFileName, content: code, language: language, createdAt: fileData.createdAt.getTime(), updatedAt: fileData.updatedAt.getTime(), roomId: currentRoom.id, } localStorage.setItem("current_file", JSON.stringify(file)) // Close modal modal.style.display = "none" // Show success message showToast("File created successfully", "success") } catch (error) { console.error("Error creating file:", error) showToast("Error creating file: " + error.message, "error") } } } // Copy room ID to clipboard const copyRoomIdBtn = document.getElementById("copy-room-id") copyRoomIdBtn.addEventListener("click", () => { const roomId = currentRoom.id navigator.clipboard .writeText(roomId) .then(() => { showToast("Room ID copied to clipboard", "success") }) .catch(() => { showToast("Failed to copy Room ID", "error") }) }) // Leave room const leaveRoomBtn = document.getElementById("leave-room") leaveRoomBtn.addEventListener("click", () => { localStorage.removeItem("current_room") localStorage.removeItem("current_file") window.location.href = "dashboard.html" }) }) [V0_FILE]javascript:file="js/chatbot.js" isFixed="true" isEdit="true" isQuickEdit="true" document.addEventListener("DOMContentLoaded", () => { const chatbotMessages = document.getElementById("chatbot-messages") const chatbotInput = document.getElementById("chatbot-input-field") const sendButton = document.getElementById("send-chatbot-message-btn") const minimizeButton = document.getElementById("minimize-chatbot-btn") const chatbotContainer = document.getElementById("chatbot-container") // API key for the chatbot const API_KEY = "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" // Initialize chatbot initChatbot() function initChatbot() { // Handle send button click sendButton.addEventListener("click", sendMessage) // Handle enter key press chatbotInput.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() sendMessage() } }) // Handle minimize button let chatbotWidth = "300px" minimizeButton.addEventListener("click", function () { const icon = this.querySelector("i") if (chatbotContainer.style.width === "30px") { chatbotContainer.style.width = chatbotWidth icon.classList.remove("fa-chevron-left") icon.classList.add("fa-chevron-right") } else { chatbotWidth = chatbotContainer.style.width || "300px" chatbotContainer.style.width = "30px" icon.classList.remove("fa-chevron-right") icon.classList.add("fa-chevron-left") } }) } async function sendMessage() { const message = chatbotInput.value.trim() if (!message) return // Clear input chatbotInput.value = "" // Add user message to chat addMessage(message, "user") // Show typing indicator const typingIndicator = addTypingIndicator() try { // Get response from API const response = await getChatbotResponse(message) // Remove typing indicator chatbotMessages.removeChild(typingIndicator) // Add bot response to chat addMessage(response, "bot") } catch (error) { // Remove typing indicator chatbotMessages.removeChild(typingIndicator) // Add error message addMessage("Sorry, I encountered an error. Please try again later.", "bot") console.error("Chatbot error:", error) } // Scroll to bottom chatbotMessages.scrollTop = chatbotMessages.scrollHeight } function addMessage(text, sender) { const messageDiv = document.createElement("div") messageDiv.className = `chatbot-message ${sender}` const avatar = document.createElement("div") avatar.className = "chatbot-message-avatar" if (sender === "bot") { avatar.innerHTML = '' } else { avatar.innerHTML = '' } const content = document.createElement("div") content.className = "chatbot-message-content" // Process text for code blocks const formattedText = formatMessageText(text) content.innerHTML = formattedText messageDiv.appendChild(avatar) messageDiv.appendChild(content) chatbotMessages.appendChild(messageDiv) // Scroll to bottom chatbotMessages.scrollTop = chatbotMessages.scrollHeight } function addTypingIndicator() { const typingDiv = document.createElement("div") typingDiv.className = "chatbot-message bot" const avatar = document.createElement("div") avatar.className = "chatbot-message-avatar" avatar.innerHTML = '' const content = document.createElement("div") content.className = "chatbot-message-content" content.innerHTML = '

' typingDiv.appendChild(avatar) typingDiv.appendChild(content) chatbotMessages.appendChild(typingDiv) // Scroll to bottom chatbotMessages.scrollTop = chatbotMessages.scrollHeight return typingDiv } function formatMessageText(text) { // Replace code blocks (\`\`\`code\`\`\`) text = text.replace( /```([\s\S]*?)```/g, (match, code) => `

${escapeHtml(code)}

`, ) // Replace inline code (`code`) text = text.replace(/`([^`]+)`/g, (match, code) => `${escapeHtml(code)}`) // Replace newlines with
text = text.replace(/\n/g, "
") return text } function escapeHtml(text) { return text .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'") } async function getChatbotResponse(message) { try { // Get the current code from the editor let currentCode = "" try { const editor = typeof monaco !== "undefined" && monaco.editor.getModels()[0] if (editor) { currentCode = editor.getValue() } } catch (e) { console.error("Error getting code from editor:", e) } // Get the current language let currentLanguage = "" try { const languageSelector = document.getElementById("language-selector") if (languageSelector) { currentLanguage = languageSelector.value } } catch (e) { console.error("Error getting language:", e) } // Prepare context for the API const context = `The user is working with a code editor. Current language: ${currentLanguage}. Current code: ${currentCode}` // Make API request to OpenAI const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${API_KEY}`, }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a helpful coding assistant. You provide concise, accurate answers to programming questions. When providing code examples, use markdown code blocks with the appropriate language syntax highlighting.", }, { role: "user", content: `${context}\n\nUser question: ${message}`, }, ], max_tokens: 1000, temperature: 0.7, }), }) if (!response.ok) { const errorData = await response.json() throw new Error(`API error: ${errorData.error?.message || response.statusText}`) } const data = await response.json() return data.choices[0].message.content } catch (error) { console.error("Error getting chatbot response:", error) throw error } } }) [V0_FILE]css:file="css/style.css" isFixed="true" isEdit="true" isQuickEdit="true" /* Base Styles */ :root { --primary-color: #6366f1; --primary-hover: #4f46e5; --secondary-color: #10b981; --background-dark: #0f172a; --background-light: #f8fafc; --text-dark: #1e293b; --text-light: #f8fafc; --card-dark: #1e293b; --card-light: #ffffff; --border-dark: #334155; --border-light: #e2e8f0; --success-color: #10b981; --error-color: #ef4444; --warning-color: #f59e0b; --info-color: #3b82f6; --transition-speed: 0.3s; --shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; line-height: 1.6; position: relative; min-height: 100vh; overflow-x: hidden; transition: background-color var(--transition-speed), color var(--transition-speed); } body.dark-theme { background-color: var(--background-dark); color: var(--text-light); } body.light-theme { background-color: var(--background-light); color: var(--text-dark); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } a { text-decoration: none; color: var(--primary-color); transition: color var(--transition-speed); } a:hover { color: var(--primary-hover); } ul { list-style: none; } img { max-width: 100%; height: auto; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; line-height: 1.2; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { margin-bottom: 1rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: all var(--transition-speed); border: none; font-size: 0.875rem; } .btn i { margin-right: 0.5rem; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-primary:hover { background-color: var(--primary-hover); color: white; } .btn-outline { background-color: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } .btn-outline:hover { background-color: var(--primary-color); color: white; } .btn-danger { background-color: var(--error-color); color: white; } .btn-danger:hover { background-color: #dc2626; color: white; } .btn-large { padding: 0.75rem 1.5rem; font-size: 1rem; } .btn-block { display: block; width: 100%; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* Forms */ .form-group { margin-bottom: 1rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 500; } input, select, textarea { width: 100%; padding: 0.5rem; border-radius: 0.375rem; border: 1px solid; font-size: 0.875rem; transition: border-color var(--transition-speed), background-color var(--transition-speed); } .dark-theme input, .dark-theme select, .dark-theme textarea { background-color: var(--card-dark); border-color: var(--border-dark); color: var(--text-light); } .light-theme input, .light-theme select, .light-theme textarea { background-color: var(--card-light); border-color: var(--border-light); color: var(--text-dark); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-color); } .password-input { position: relative; } .password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: inherit; } /* Header */ .main-header { padding: 1rem 0; position: relative; z-index: 10; transition: background-color 0.3s, box-shadow 0.3s; } .main-header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; } .logo-text { color: inherit; } .highlight { color: var(--primary-color); } nav ul { display: flex; gap: 1.5rem; } nav a { color: inherit; font-weight: 500; } nav a.active { color: var(--primary-color); } /* Theme Toggle */ .theme-toggle { position: relative; margin-left: 1rem; } .theme-toggle-checkbox { opacity: 0; position: absolute; } .theme-toggle-label { background-color: var(--card-dark); border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 5px; position: relative; height: 26px; width: 50px; transform: scale(1); } .theme-toggle-label .fa-sun { color: #f59e0b; } .theme-toggle-label .fa-moon { color: #6366f1; } .theme-toggle-label .ball { background-color: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; height: 22px; width: 22px; transform: translateX(0px); transition: transform 0.2s linear; } .theme-toggle-checkbox:checked + .theme-toggle-label .ball { transform: translateX(24px); } /* Hero Section */ .hero { padding: 4rem 0; position: relative; z-index: 1; } .hero .container { display: flex; align-items: center; gap: 2rem; } .hero-content { flex: 1; opacity: 0; } .hero-image { flex: 1; display: flex; justify-content: center; opacity: 0; } .cta-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; } /* Features Section */ .features { padding: 4rem 0; text-align: center; position: relative; z-index: 1; } .features h2 { margin-bottom: 2rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .feature-card { padding: 2rem; border-radius: 0.5rem; transition: transform var(--transition-speed), box-shadow var(--transition-speed); opacity: 0; } .dark-theme .feature-card { background-color: var(--card-dark); box-shadow: var(--shadow-dark); } .light-theme .feature-card { background-color: var(--card-light); box-shadow: var(--shadow-light); } .feature-card:hover { transform: translateY(-5px); } .feature-icon { font-size: 2rem; margin-bottom: 1rem; color: var(--primary-color); } /* About Section */ .about { padding: 4rem 0; position: relative; z-index: 1; } /* Footer */ footer { padding: 3rem 0 1.5rem; position: relative; z-index: 1; } .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } .footer-logo { flex: 1; min-width: 200px; } .footer-links, .footer-contact { flex: 1; min-width: 200px; } .footer-links ul { display: flex; flex-direction: column; gap: 0.5rem; } .social-icons { display: flex; gap: 1rem; margin-top: 1rem; } .social-icons a { font-size: 1.25rem; } .footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid; } .dark-theme .footer-bottom { border-color: var(--border-dark); } .light-theme .footer-bottom { border-color: var(--border-light); } /* Auth Pages */ .auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem; } .auth-card { width: 100%; max-width: 400px; padding: 2rem; border-radius: 0.5rem; position: relative; z-index: 1; } .dark-theme .auth-card { background-color: var(--card-dark); box-shadow: var(--shadow-dark); } .light-theme .auth-card { background-color: var(--card-light); box-shadow: var(--shadow-light); } .auth-header { text-align: center; margin-bottom: 2rem; } .logo-link { display: inline-block; margin-bottom: 1rem; } .auth-form { margin-bottom: 1.5rem; } .remember-forgot { display: flex; justify-content: space-between; align-items: center; } .remember-me { display: flex; align-items: center; gap: 0.5rem; } .remember-me input { width: auto; } .auth-divider { display: flex; align-items: center; margin: 1.5rem 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; } .dark-theme .auth-divider::before, .dark-theme .auth-divider::after { background-color: var(--border-dark); } .light-theme .auth-divider::before, .light-theme .auth-divider::after { background-color: var(--border-light); } .auth-divider span { padding: 0 1rem; } .social-btn { margin-bottom: 0.75rem; } .auth-footer { text-align: center; } .auth-theme-toggle { position: fixed; top: 1rem; right: 1rem; } .terms { display: flex; align-items: flex-start; gap: 0.5rem; } .terms input { width: auto; margin-top: 0.25rem; } .auth-message { display: none; margin-top: 1rem; padding: 0.5rem; border-radius: 0.375rem; text-align: center; background-color: rgba(239, 68, 68, 0.1); color: var(--error-color); transition: opacity 0.3s ease; } /* Dashboard */ .dashboard-header { padding: 1rem 0; position: relative; z-index: 10; } .dashboard-header .container { display: flex; justify-content: space-between; align-items: center; } .user-menu { display: flex; align-items: center; gap: 1rem; } .user-dropdown { position: relative; } .user-dropdown-btn { display: flex; align-items: center; gap: 0.5rem; background: none; border: none; cursor: pointer; color: inherit; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } .user-dropdown-content { position: absolute; right: 0; top: 100%; width: 200px; padding: 0.5rem 0; border-radius: 0.375rem; z-index: 100; display: none; } .dark-theme .user-dropdown-content { background-color: var(--card-dark); box-shadow: var(--shadow-dark); } .light-theme .user-dropdown-content { background-color: var(--card-light); box-shadow: var(--shadow-light); } .user-dropdown-content a { display: block; padding: 0.5rem 1rem; color: inherit; } .user-dropdown-content a:hover { background-color: rgba(99, 102, 241, 0.1); } .user-dropdown:hover .user-dropdown-content { display: block; } .dashboard-main { padding: 2rem 0; } .dashboard-header-content { text-align: center; margin-bottom: 2rem; } .dashboard-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .action-card { padding: 1.5rem; border-radius: 0.5rem; } .dark-theme .action-card { background-color: var(--card-dark); box-shadow: var(--shadow-dark); } .light-theme .action-card { background-color: var(--card-light); box-shadow: var(--shadow-light); } .action-card h2 { margin-bottom: 1.5rem; text-align: center; } .recent-rooms h2 { margin-bottom: 1.5rem; } .rooms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .room-card { padding: 1.5rem; border-radius: 0.5rem; cursor: pointer; transition: transform var(--transition-speed), box-shadow var(--transition-speed); } .dark-theme .room-card { background-color: var(--card-dark); box-shadow: var(--shadow-dark); } .light-theme .room-card { background-color: var(--card-light); box-shadow: var(--shadow-light); } .room-card:hover { transform: translateY(-5px); } .room-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .room-language { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: var(--primary-color); color: white; } .room-card-content { margin-bottom: 1rem; } .room-id-display { font-family: monospace; font-size: 0.875rem; margin-bottom: 0.5rem; } .room-last-active { font-size: 0.75rem; opacity: 0.7; } .empty-state { text-align: center; padding: 3rem; grid-column: 1 / -1; } .empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } /* Editor Page */ .editor-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .editor-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; z-index: 10; } .dark-theme .editor-header { background-color: var(--card-dark); border-bottom: 1px solid var(--border-dark); } .light-theme .editor-header { background-color: var(--card-light); border-bottom: 1px solid var(--border-light); } .editor-header-left, .editor-header-center, .editor-header-right { display: flex; align-items: center; gap: 1rem; } .back-to-dashboard { color: inherit; font-size: 1.25rem; } .room-info { display: flex; flex-direction: column; } .room-name { font-weight: 500; } .room-id { font-size: 0.75rem; opacity: 0.7; } .language-selector select { width: auto; } .collaborators-btn { display: flex; align-items: center; gap: 0.5rem; background: none; border: none; cursor: pointer; color: inherit; position: relative; } .collaborators-count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: var(--primary-color); color: white; font-size: 0.75rem; } .collaborators-dropdown { position: absolute; right: 0; top: 100%; width: 250px; padding: 1rem; border-radius: 0.375rem; z-index: 100; display: none; } .dark-theme .collaborators-dropdown { background-color: var(--card-dark); box-shadow: var(--shadow-dark); } .light-theme .collaborators-dropdown { background-color: var(--card-light); box-shadow: var(--shadow-light); } .collaborators:hover .collaborators-dropdown { display: block; } .collaborators-list { margin-bottom: 1rem; } .collaborator { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; } .collaborator-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .collaborator-info { flex: 1; } .collaborator-name { font-weight: 500; font-size: 0.875rem; } .collaborator-status { font-size: 0.75rem; opacity: 0.7; } .room-actions { display: flex; gap: 0.5rem; } .editor-main { display: flex; flex: 1; overflow: hidden; } .file-explorer { width: 250px; display: flex; flex-direction: column; overflow: hidden; } .dark-theme .file-explorer { background-color: var(--card-dark); border-right: 1px solid var(--border-dark); } .light-theme .file-explorer { background-color: var(--card-light); border-right: 1px solid var(--border-light); } .file-explorer-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; } .file-actions { display: flex; gap: 0.5rem; } .file-action-btn { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.875rem; } .file-explorer-content { flex: 1; overflow-y: auto; padding: 0.5rem 0; } .file-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; transition: background-color var(--transition-speed); } .file-item:hover { background-color: rgba(99, 102, 241, 0.1); } .file-item.active { background-color: rgba(99, 102, 241, 0.2); } .file-item i { width: 20px; text-align: center; } .file-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item-actions { display: none; gap: 0.5rem; } .file-item:hover .file-item-actions { display: flex; } .file-item-action { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.75rem; } .folder-contents { margin-left: 1.5rem; } .editor-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .monaco-editor { flex: 1; overflow: hidden; } .resizer { height: 5px; cursor: ns-resize; } .dark-theme .resizer { background-color: var(--border-dark); } .light-theme .resizer { background-color: var(--border-light); } .terminal-container { height: 200px; display: flex; flex-direction: column; overflow: hidden; } .dark-theme .terminal-container { background-color: var(--card-dark); border-top: 1px solid var(--border-dark); } .light-theme .terminal-container { background-color: var(--card-light); border-top: 1px solid var(--border-light); } .terminal-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; } .terminal-tabs { display: flex; gap: 0.5rem; } .terminal-tab { background: none; border: none; cursor: pointer; color: inherit; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; opacity: 0.7; transition: opacity var(--transition-speed), background-color var(--transition-speed); } .terminal-tab:hover { opacity: 1; background-color: rgba(99, 102, 241, 0.1); } .terminal-tab.active { opacity: 1; background-color: rgba(99, 102, 241, 0.2); } .terminal-actions { display: flex; gap: 0.5rem; } .terminal-action-btn { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.875rem; } .terminal-content { flex: 1; overflow: hidden; } .terminal-tab-content { display: none; height: 100%; } .terminal-tab-content.active { display: block; } .terminal-output { height: 100%; overflow-y: auto; padding: 0.5rem 1rem; font-family: monospace; white-space: pre-wrap; } .terminal-input { height: 100%; resize: none; border: none; padding: 0.5rem 1rem; font-family: monospace; } .terminal-input:focus { outline: none; } /* Chatbot */ .chatbot-container { width: 300px; display: flex; flex-direction: column; overflow: hidden; } .dark-theme .chatbot-container { background-color: var(--card-dark); border-left: 1px solid var(--border-dark); } .light-theme .chatbot-container { background-color: var(--card-light); border-left: 1px solid var(--border-light); } .chatbot-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; } .chatbot-action-btn { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.875rem; } .chatbot-messages { flex: 1; overflow-y: auto; padding: 0.5rem 1rem; } .chatbot-message { display: flex; gap: 0.75rem; margin-bottom: 1rem; } .chatbot-message-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chatbot-message.bot .chatbot-message-avatar { background-color: var(--primary-color); color: white; } .chatbot-message.user .chatbot-message-avatar { background-color: var(--secondary-color); color: white; } .chatbot-message-content { flex: 1; padding: 0.75rem; border-radius: 0.5rem; } .dark-theme .chatbot-message-content { background-color: var(--background-dark); } .light-theme .chatbot-message-content { background-color: var(--background-light); } .chatbot-message-content p { margin-bottom: 0.5rem; } .chatbot-message-content p:last-child { margin-bottom: 0; } .chatbot-input { display: flex; padding: 0.75rem 1rem; } .chatbot-input textarea { flex: 1; resize: none; height: 40px; padding: 0.5rem; border-radius: 0.375rem 0 0 0.375rem; } .chatbot-input button { width: 40px; border: none; border-radius: 0 0.375rem 0.375rem 0; background-color: var(--primary-color); color: white; cursor: pointer; transition: background-color var(--transition-speed); } .chatbot-input button:hover { background-color: var(--primary-hover); } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; } .modal-content { width: 100%; max-width: 400px; border-radius: 0.5rem; overflow: hidden; } .dark-theme .modal-content { background-color: var(--card-dark); } .light-theme .modal-content { background-color: var(--card-light); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .dark-theme .modal-header { border-bottom: 1px solid var(--border-dark); } .light-theme .modal-header { border-bottom: 1px solid var(--border-light); } .modal-header h3 { margin-bottom: 0; } .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: inherit; } .modal-body { padding: 1rem; } /* Toast Notifications */ .toast { position: fixed; bottom: 20px; right: 20px; padding: 0.75rem 1.25rem; border-radius: 0.375rem; color: white; max-width: 350px; z-index: 1000; opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; } .toast.show { opacity: 1; transform: translateY(0); } .toast-success { background-color: var(--success-color); } .toast-error { background-color: var(--error-color); } .toast-warning { background-color: var(--warning-color); } .toast-info { background-color: var(--info-color); } /* Code Blocks in Chat */ .code-block { background-color: rgba(0, 0, 0, 0.1); padding: 0.75rem; border-radius: 0.375rem; font-family: monospace; white-space: pre-wrap; margin: 0.5rem 0; overflow-x: auto; } .inline-code { background-color: rgba(0, 0, 0, 0.1); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-family: monospace; } /* Typing Indicator */ .typing-indicator { display: flex; align-items: center; gap: 0.25rem; } .typing-indicator span { width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary-color); display: inline-block; animation: typing 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: 0s; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; } 40% { transform: scale(1); opacity: 1; } } /* Terminal Styling */ .terminal-output-container { margin-bottom: 1rem; font-size: 0.875rem; } .terminal-timestamp { font-size: 0.75rem; opacity: 0.7; margin-bottom: 0.25rem; } .terminal-label { font-weight: bold; } .terminal-compile-output, .terminal-stdout, .terminal-stderr { margin-bottom: 0.5rem; } .terminal-stderr { color: var(--error-color); } .terminal-time, .terminal-memory { font-size: 0.75rem; opacity: 0.7; margin-bottom: 0.25rem; } .terminal-status { margin-bottom: 0.5rem; } .terminal-status-success { color: var(--success-color); } .terminal-status-error { color: var(--error-color); } .terminal-status-warning { color: var(--warning-color); } .terminal-status-info { color: var(--info-color); } .terminal-separator { height: 1px; margin: 0.5rem 0; } .dark-theme .terminal-separator { background-color: var(--border-dark); } .light-theme .terminal-separator { background-color: var(--border-light); } /* Responsive Styles */ @media (max-width: 768px) { .hero .container { flex-direction: column; } .editor-main { flex-direction: column; } .file-explorer { width: 100%; height: 200px; } .chatbot-container { width: 100%; height: 300px; } } @media (max-width: 576px) { .dashboard-actions { grid-template-columns: 1fr; } .editor-header { flex-direction: column; gap: 0.5rem; } .editor-header-left, .editor-header-center, .editor-header-right { width: 100%; justify-content: space-between; } } /* Settings Page */ .settings-main { padding: 2rem 0; } .settings-header { text-align: center; margin-bottom: 2rem; } .settings-content { display: flex; gap: 2rem; } .settings-sidebar { width: 200px; flex-shrink: 0; } .settings-nav { position: sticky; top: 2rem; } .settings-nav a { display: block; padding: 0.75rem 1rem; border-radius: 0.375rem; color: inherit; transition: background-color var(--transition-speed); } .settings-nav a:hover { background-color: rgba(99, 102, 241, 0.1); } .settings-nav a.active { background-color: rgba(99, 102, 241, 0.2); color: var(--primary-color); } .settings-main-content { flex: 1; } .settings-section { display: none; margin-bottom: 2rem; } .settings-section.active { display: block; } .settings-section h2 { margin-bottom: 1.5rem; } .settings-form { max-width: 600px; } .profile-picture-upload { display: flex; align-items: center; gap: 1.5rem; } .profile-picture-preview { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; } .profile-picture-actions { display: flex; flex-direction: column; gap: 0.5rem; } .danger-zone { margin-top: 3rem; padding: 1.5rem; border-radius: 0.375rem; border: 1px solid var(--error-color); } .radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; } .radio-option, .checkbox-option { display: flex; align-items: center; gap: 0.5rem; } .radio-option input, .checkbox-option input { width: auto; } @media (max-width: 768px) { .settings-content { flex-direction: column; } .settings-sidebar { width: 100%; } .settings-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; position: static; } .settings-nav a { padding: 0.5rem 0.75rem; font-size: 0.875rem; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .hero-content.animated { animation: fadeIn 0.8s ease-out forwards; } .hero-image.animated { animation: scaleIn 0.8s ease-out forwards; } .feature-card.animated { animation: fadeIn 0.6s ease-out forwards; } /* Header scroll effect */ .main-header.scrolled { background-color: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .light-theme .main-header.scrolled { background-color: rgba(248, 250, 252, 0.9); } /* Add this to make sure type="module" scripts work properly */ script[type="module"] { display: none; } [V0_FILE]javascript:file="js/compiler.js" isEdit="true" isQuickEdit="true" async function compileAndRun(code, language, input) { try { // Get language ID for Judge0 API const languageId = getLanguageId(language) // Prepare request body const body = { source_code: code, language_id: languageId, stdin: input, } // Make API request to Judge0 const response = await fetch("https://judge0-ce.p.rapidapi.com/submissions", { method: "POST", headers: { "Content-Type": "application/json", "X-RapidAPI-Key": "22475ffabdmsh3095de71ac1c4a4p1c3e7ajsn3aad405ef97c", "X-RapidAPI-Host": "judge0-ce.p.rapidapi.com", }, body: JSON.stringify(body), }) if (!response.ok) { throw new Error(`API request failed with status ${response.status}`) } const submissionData = await response.json() const token = submissionData.token // Poll for results return await pollSubmissionResult(token) } catch (error) { console.error("Error compiling and running code:", error) throw error } } async function pollSubmissionResult(token) { const maxAttempts = 10 const delayMs = 1000 for (let attempt = 0; attempt < maxAttempts; attempt++) { try { const response = await fetch(`https://judge0-ce.p.rapidapi.com/submissions/${token}?base64_encoded=false`, { method: "GET", headers: { "X-RapidAPI-Key": "22475ffabdmsh3095de71ac1c4a4p1c3e7ajsn3aad405ef97c", "X-RapidAPI-Host": "judge0-ce.p.rapidapi.com", }, }) if (!response.ok) { throw new Error(`API request failed with status ${response.status}`) } const result = await response.json() // If status is not "Processing" or "In Queue", return the result if (result.status && result.status.id !== 1 && result.status.id !== 2) { return result } // Wait before next attempt await new Promise((resolve) => setTimeout(resolve, delayMs)) } catch (error) { console.error("Error polling submission result:", error) throw error } } throw new Error("Timed out waiting for code execution result") } function getLanguageId(language) { switch (language) { case "java": return 62 // Java (OpenJDK 13.0.1) case "python": return 71 // Python (3.8.1) case "cpp": return 54 // C++ (GCC 9.2.0) default: throw new Error(`Unsupported language: ${language}`) } } function displayOutput(result) { const terminalOutput = document.getElementById("terminal-output") // Create output container const outputContainer = document.createElement("div") outputContainer.className = "terminal-output-container" // Add timestamp const timestamp = document.createElement("div") timestamp.className = "terminal-timestamp" timestamp.textContent = new Date().toLocaleTimeString() outputContainer.appendChild(timestamp) // Add compilation output if any if (result.compile_output) { const compileOutput = document.createElement("div") compileOutput.className = "terminal-compile-output" compileOutput.innerHTML = `Compilation: ${formatOutput(result.compile_output)}` outputContainer.appendChild(compileOutput) } // Add stdout if any if (result.stdout) { const stdout = document.createElement("div") stdout.className = "terminal-stdout" stdout.innerHTML = `Output: ${formatOutput(result.stdout)}` outputContainer.appendChild(stdout) } // Add stderr if any if (result.stderr) { const stderr = document.createElement("div") stderr.className = "terminal-stderr" stderr.innerHTML = `Error: ${formatOutput(result.stderr)}` outputContainer.appendChild(stderr) } // Add execution time if (result.time) { const time = document.createElement("div") time.className = "terminal-time" time.textContent = `Execution Time: ${result.time}s` outputContainer.appendChild(time) } // Add memory usage if (result.memory) { const memory = document.createElement("div") memory.className = "terminal-memory" memory.textContent = `Memory Usage: ${result.memory} KB` outputContainer.appendChild(memory) } // Add status const status = document.createElement("div") status.className = "terminal-status" if (result.status) { if (result.status.id === 3) { // Accepted status.innerHTML = '✓ Program executed successfully' } else if (result.status.id === 6) { // Compilation Error status.innerHTML = '✗ Compilation Error' } else if (result.status.id === 5) { // Time Limit Exceeded status.innerHTML = '⚠ Time Limit Exceeded' } else if (result.status.id === 4) { // Runtime Error status.innerHTML = '✗ Runtime Error' } else { status.innerHTML = `Status: ${result.status.description}` } } else { status.innerHTML = 'Status: Unknown' } outputContainer.appendChild(status) // Add separator const separator = document.createElement("div") separator.className = "terminal-separator" outputContainer.appendChild(separator) // Add to terminal terminalOutput.appendChild(outputContainer) // Scroll to bottom terminalOutput.scrollTop = terminalOutput.scrollHeight } function displayError(error) { const terminalOutput = document.getElementById("terminal-output") // Create output container const outputContainer = document.createElement("div") outputContainer.className = "terminal-output-container" // Add timestamp const timestamp = document.createElement("div") timestamp.className = "terminal-timestamp" timestamp.textContent = new Date().toLocaleTimeString() outputContainer.appendChild(timestamp) // Add error message const errorMessage = document.createElement("div") errorMessage.className = "terminal-error" errorMessage.innerHTML = `Error: ${ error.message || "An error occurred while executing the code." }` outputContainer.appendChild(errorMessage) // Add separator const separator = document.createElement("div") separator.className = "terminal-separator" outputContainer.appendChild(separator) // Add to terminal terminalOutput.appendChild(outputContainer) // Scroll to bottom terminalOutput.scrollTop = terminalOutput.scrollHeight } function formatOutput(output) { if (!output) return "" // Replace newlines with
output = output.replace(/\n/g, "
") // Replace tabs with spaces output = output.replace(/\t/g, " ") // Replace multiple spaces with output = output.replace(/ {2}/g, " ") return output } export { compileAndRun, displayOutput, displayError }

Code Together in Real-Time

Powerful Features

Multi-Language Support

Real-Time Collaboration

Integrated Terminal

File Management

AI Assistant

Secure Rooms

About RTC IDE

Welcome, John!

Create Room

Join Room

Recent Rooms

Files

AI Assistant

Reset Password

Settings

Profile Settings

Account Settings

Danger Zone

Editor Settings

Appearance Settings

Notification Settings

Login

Create an Account

${roomData.name}

Code Together in Real-Time

Powerful Features

Multi-Language Support

Real-Time Collaboration

Integrated Terminal

File Management

AI Assistant

Secure Rooms

About RTC IDE

Welcome, John!

Create Room

Join Room

Recent Rooms

Files

AI Assistant

Create New File

Create New Folder

Reset Password

Settings

Profile Settings

Account Settings

Danger Zone

Editor Settings

Appearance Settings

Notification Settings

Login

Create an Account

${roomData.name}