Spaces:

Lashtw
/

Vibecodingex

Running

App Files Files Community

Lashtw commited on Jan 24

Commit

901982e

verified ·

1 Parent(s): 986dc10

Upload 7 files

Browse files

Files changed (7) hide show

index.html +34 -19
src/main.js +28 -0
src/services/classroom.js +127 -0
src/services/firebase.js +16 -0
src/views/InstructorView.js +117 -0
src/views/LandingView.js +68 -0
src/views/StudentView.js +211 -0

index.html CHANGED Viewed

@@ -1,19 +1,34 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vibecoding Workshop</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap"
+        rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-color: #0f172a;
+            /* Slate 900 */
+            color: #e2e8f0;
+            /* Slate 200 */
+        }
+        .font-mono {
+            font-family: 'JetBrains Mono', monospace;
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-slate-200 antialiased selection:bg-cyan-500 selection:text-white">
+    <div id="app" class="max-w-7xl mx-auto"></div>
+    <script type="module" src="./src/main.js"></script>
+</body>
+</html>

src/main.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import { renderLandingView, setupLandingEvents } from './views/LandingView.js';
+import { renderInstructorView, setupInstructorEvents } from './views/InstructorView.js';
+import { renderStudentView, setupStudentEvents } from './views/StudentView.js';
+const app = document.querySelector('#app');
+function navigateTo(view) {
+    switch (view) {
+        case 'landing':
+            app.innerHTML = renderLandingView();
+            setupLandingEvents(navigateTo);
+            break;
+        case 'instructor':
+            app.innerHTML = renderInstructorView();
+            setupInstructorEvents();
+            break;
+        case 'student':
+            app.innerHTML = renderStudentView();
+            setupStudentEvents();
+            break;
+        default:
+            app.innerHTML = renderLandingView();
+            setupLandingEvents(navigateTo);
+    }
+}
+// Initial Load
+navigateTo('landing');

src/services/classroom.js ADDED Viewed

	@@ -0,0 +1,127 @@

+import { db } from "./firebase.js";
+import {
+    collection,
+    doc,
+    setDoc,
+    getDoc,
+    addDoc,
+    onSnapshot,
+    serverTimestamp,
+    query,
+    where,
+    getDocs
+} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+// Collection references
+const ROOMS_COLLECTION = "classrooms";
+/**
+ * Creates a new classroom room
+ * @returns {Promise<string>} The room code
+ */
+export async function createRoom() {
+    const roomCode = Math.floor(1000 + Math.random() * 9000).toString(); // Simple 4-digit code
+    const roomRef = doc(db, ROOMS_COLLECTION, roomCode);
+    await setDoc(roomRef, {
+        createdAt: serverTimestamp(),
+        active: true
+    });
+    return roomCode;
+}
+/**
+ * Joins an existing room
+ * @param {string} roomCode
+ * @param {string} nickname
+ * @returns {Promise<string>} The student ID
+ */
+export async function joinRoom(roomCode, nickname) {
+    const roomRef = doc(db, ROOMS_COLLECTION, roomCode);
+    const roomSnap = await getDoc(roomRef);
+    if (!roomSnap.exists()) {
+        throw new Error("教室代碼不存在");
+    }
+    // Create student document within the room
+    const studentsRef = collection(roomRef, "students");
+    const studentDoc = await addDoc(studentsRef, {
+        nickname,
+        joinedAt: serverTimestamp(),
+        progress: {}
+    });
+    return studentDoc.id;
+}
+/**
+ * Submits a prompt for a specific level
+ * @param {string} roomCode
+ * @param {string} studentId
+ * @param {string} levelId
+ * @param {string} prompt
+ */
+export async function submitPrompt(roomCode, studentId, levelId, prompt) {
+    const text = prompt.trim();
+    if (!text) return;
+    const studentRef = doc(db, ROOMS_COLLECTION, roomCode, "students", studentId);
+    // Update using merge to preserve other progress
+    await setDoc(studentRef, {
+        progress: {
+            [levelId]: {
+                status: "completed",
+                prompt: text,
+                timestamp: serverTimestamp()
+            }
+        },
+        lastActive: serverTimestamp()
+    }, { merge: true });
+}
+/**
+ * Subscribes to room updates (for Instructor)
+ * @param {string} roomCode
+ * @param {Function} callback
+ * @returns {Function} Unsubscribe function
+ */
+export function subscribeToRoom(roomCode, callback) {
+    const studentsRef = collection(db, ROOMS_COLLECTION, roomCode, "students");
+    return onSnapshot(studentsRef, (snapshot) => {
+        const students = [];
+        snapshot.forEach((doc) => {
+            students.push({ id: doc.id, ...doc.data() });
+        });
+        callback(students);
+    });
+}
+/**
+ * Fetches prompts for a specific level from all students in the room
+ * @param {string} roomCode
+ * @param {string} levelId
+ * @returns {Promise<Array>} Array of { nickname, prompt }
+ */
+export async function getPeerPrompts(roomCode, levelId) {
+    const studentsRef = collection(db, ROOMS_COLLECTION, roomCode, "students");
+    const snapshot = await getDocs(studentsRef);
+    const prompts = [];
+    snapshot.forEach(doc => {
+        const data = doc.data();
+        const levelData = data.progress?.[levelId];
+        if (levelData && levelData.status === 'completed' && levelData.prompt) {
+            prompts.push({
+                nickname: data.nickname,
+                prompt: levelData.prompt,
+                timestamp: levelData.timestamp
+            });
+        }
+    });
+    return prompts;
+}

src/services/firebase.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
+import { getFirestore } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+const firebaseConfig = {
+    apiKey: "AIzaSyDq2a-yE6pbaeNf6KzkTcogh9oi-6nQbKk",
+    authDomain: "vibecodingex.firebaseapp.com",
+    projectId: "vibecodingex",
+    storageBucket: "vibecodingex.firebasestorage.app",
+    messagingSenderId: "831513336128",
+    appId: "1:831513336128:web:e31d2654fcfa19fb2642a5"
+};
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+export { db };

src/views/InstructorView.js ADDED Viewed

	@@ -0,0 +1,117 @@

+import { createRoom, subscribeToRoom } from "../services/classroom.js";
+export function renderInstructorView() {
+    return `
+    <div class="min-h-screen p-6">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm">
+            <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
+                講師儀表板 Instructor Dashboard
+            </h1>
+            <div id="room-info" class="hidden flex items-center space-x-4">
+                <span class="text-gray-400">教室代碼</span>
+                <span id="display-room-code" class="text-3xl font-mono font-bold text-cyan-400 tracking-widest bg-gray-900 px-4 py-2 rounded-lg border border-cyan-500/30 shadow-[0_0_15px_rgba(34,211,238,0.3)]"></span>
+            </div>
+            <div id="create-room-container">
+                <button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg shadow-purple-500/30">
+                    建立新教室
+                </button>
+            </div>
+        </header>
+        <!-- Student List -->
+        <div id="dashboard-content" class="hidden">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="students-grid">
+                <!-- Student Cards will go here -->
+                <div class="text-center text-gray-500 col-span-full py-20">
+                    等待學員加入...
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}
+export function setupInstructorEvents() {
+    const createBtn = document.getElementById('create-room-btn');
+    const roomInfo = document.getElementById('room-info');
+    const createContainer = document.getElementById('create-room-container');
+    const dashboardContent = document.getElementById('dashboard-content');
+    const displayRoomCode = document.getElementById('display-room-code');
+    const studentsGrid = document.getElementById('students-grid');
+    createBtn.addEventListener('click', async () => {
+        try {
+            createBtn.disabled = true;
+            createBtn.textContent = "建立中...";
+            const roomCode = await createRoom();
+            // UI Switch
+            createContainer.classList.add('hidden');
+            roomInfo.classList.remove('hidden');
+            dashboardContent.classList.remove('hidden');
+            displayRoomCode.textContent = roomCode;
+            // Subscribe to updates only after room is created
+            subscribeToRoom(roomCode, (students) => {
+                renderStudentCards(students, studentsGrid);
+            });
+        } catch (error) {
+            console.error(error);
+            alert("建立教室失敗");
+            createBtn.disabled = false;
+        }
+    });
+}
+function renderStudentCards(students, container) {
+    if (students.length === 0) {
+        container.innerHTML = '<div class="text-center text-gray-500 col-span-full py-20">尚無學員加入</div>';
+        return;
+    }
+    container.innerHTML = students.map(student => {
+        const progress = student.progress || {};
+        // Define levels we care about
+        const levels = [
+            { id: 'beginner', label: '初級', color: 'cyan' },
+            { id: 'intermediate', label: '中級', color: 'blue' },
+            { id: 'advanced', label: '高級', color: 'purple' }
+        ];
+        let badgesHtml = levels.map(level => {
+            const isCompleted = progress[level.id]?.status === 'completed';
+            const statusClass = isCompleted
+                ? `bg-${level.color}-500/20 text-${level.color}-300 border-${level.color}-500`
+                : 'bg-gray-700/50 text-gray-500 border-gray-700';
+            return `
+                <div class="flex items-center justify-between p-2 rounded border ${statusClass} transition-all">
+                    <span class="text-xs font-bold">${level.label}</span>
+                    <span class="text-xs">${isCompleted ? '✓' : '...'}</span>
+                </div>
+            `;
+        }).join('');
+        return `
+        <div class="bg-gray-800 bg-opacity-40 backdrop-blur rounded-xl border border-gray-700 p-4 hover:border-gray-500 transition-all">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-lg font-bold text-white">
+                        ${student.nickname[0]}
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-white">${student.nickname}</h3>
+                        <p class="text-xs text-gray-400">Online</p>
+                    </div>
+                </div>
+            </div>
+            <div class="space-y-2">
+                ${badgesHtml}
+            </div>
+        </div>
+        `;
+    }).join('');
+}

src/views/LandingView.js ADDED Viewed

	@@ -0,0 +1,68 @@

+import { createRoom, joinRoom } from "../services/classroom.js";
+export function renderLandingView() {
+    return `
+    <div class="min-h-screen flex flex-col items-center justify-center p-4">
+        <div class="max-w-md w-full bg-gray-600 bg-opacity-20 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-gray-700">
+            <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 text-center tracking-tighter">
+                VIBECODING
+            </h1>
+            <!-- Student Join Form -->
+            <div id="student-form" class="space-y-6">
+                <div>
+                    <label class="block text-gray-400 text-sm font-bold mb-2">教室代碼 (Room Code)</label>
+                    <input type="text" id="room-code-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-cyan-500 transition-colors" placeholder="1234">
+                </div>
+                <div>
+                    <label class="block text-gray-400 text-sm font-bold mb-2">您的暱稱 (Nickname)</label>
+                    <input type="text" id="nickname-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-purple-500 transition-colors" placeholder="小明">
+                </div>
+                <button id="join-btn" class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white font-bold py-3 px-4 rounded-lg transform transition hover:scale-105 active:scale-95 shadow-lg shadow-cyan-500/30">
+                    進入教室
+                </button>
+            </div>
+            <!-- Instructor Toggle -->
+            <div class="mt-8 pt-6 border-t border-gray-700 text-center">
+                <button id="instructor-mode-btn" class="text-gray-500 text-sm hover:text-cyan-400 transition-colors">
+                    我是講師 (Instructor Mode)
+                </button>
+            </div>
+        </div>
+    </div>
+    `;
+}
+export function setupLandingEvents(navigateTo) {
+    const joinBtn = document.getElementById('join-btn');
+    const instructorBtn = document.getElementById('instructor-mode-btn');
+    joinBtn.addEventListener('click', async () => {
+        const roomCode = document.getElementById('room-code-input').value.trim();
+        const nickname = document.getElementById('nickname-input').value.trim();
+        if (!roomCode || !nickname) {
+            alert('請輸入教室代碼和暱稱');
+            return;
+        }
+        try {
+            joinBtn.textContent = '加入中...';
+            joinBtn.disabled = true;
+            const studentId = await joinRoom(roomCode, nickname);
+            localStorage.setItem('vibecoding_student_id', studentId);
+            localStorage.setItem('vibecoding_room_code', roomCode);
+            localStorage.setItem('vibecoding_nickname', nickname);
+            navigateTo('student');
+        } catch (error) {
+            alert('加入失敗: ' + error.message);
+            joinBtn.textContent = '進入教室';
+            joinBtn.disabled = false;
+        }
+    });
+    instructorBtn.addEventListener('click', () => {
+        navigateTo('instructor');
+    });
+}

src/views/StudentView.js ADDED Viewed

	@@ -0,0 +1,211 @@

+import { submitPrompt } from "../services/classroom.js";
+const LEVELS = [
+    {
+        id: 'beginner',
+        name: '初級 (Beginner)',
+        desc: '基礎幾何圖形繪製',
+        link: 'https://geminicanvas.web.app/' // TODO: Replace with real link
+    },
+    {
+        id: 'intermediate',
+        name: '中級 (Intermediate)',
+        desc: '迴圈與重複結構',
+        link: 'https://geminicanvas.web.app/'
+    },
+    {
+        id: 'advanced',
+        name: '高級 (Advanced)',
+        desc: '函數與參數應用',
+        link: 'https://geminicanvas.web.app/'
+    }
+];
+export function renderStudentView() {
+    const nickname = localStorage.getItem('vibecoding_nickname') || 'Guest';
+    return `
+    <div class="min-h-screen p-6 pb-24">
+        <header class="flex justify-between items-center mb-8">
+            <div class="flex items-center space-x-2">
+                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                <span class="text-gray-400 text-sm">已連線: ${nickname}</span>
+            </div>
+            <div class="text-right">
+                <h1 class="text-xl font-bold italic text-white tracking-widest">VIBECODING</h1>
+            </div>
+        </header>
+        <div class="grid grid-cols-1 gap-6 max-w-2xl mx-auto">
+            ${LEVELS.map(level => `
+                <div class="group relative bg-gray-800 bg-opacity-50 border border-gray-700 rounded-2xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300">
+                    <div class="absolute top-0 left-0 w-1 h-full bg-gray-600 group-hover:bg-cyan-400 transition-colors"></div>
+                    <div class="p-6 pl-8">
+                        <div class="flex justify-between items-start mb-4">
+                            <div>
+                                <h2 class="text-2xl font-bold text-white mb-1">${level.name}</h2>
+                                <p class="text-gray-400 text-sm">${level.desc}</p>
+                            </div>
+                            <a href="${level.link}" target="_blank"
+                               class="bg-gray-700 hover:bg-cyan-600 text-white p-2 rounded-lg transition-colors"
+                               title="前往題目">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                                </svg>
+                            </a>
+                        </div>
+                        <div class="mt-6">
+                            <label class="block text-xs uppercase tracking-wider text-gray-500 mb-2">提交修復提示詞</label>
+                            <div class="flex space-x-2">
+                                <input type="text" id="input-${level.id}"
+                                    class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-cyan-500 focus:outline-none transition-colors"
+                                    placeholder="輸入你的 Prompt...">
+                                <button onclick="window.submitLevel('${level.id}')"
+                                    class="bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white px-6 py-2 rounded-lg font-bold transition-transform active:scale-95 shadow-lg shadow-cyan-900/50">
+                                    提交
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+        <!-- Peer Learning (Floating Action Button) -->
+        <button onclick="window.openPeerModal()" class="fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-4 shadow-xl shadow-purple-600/40 transition-transform hover:scale-110 active:scale-90"
+            title="查看同學作業">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+        </button>
+    </div>
+    `;
+}
+export function setupStudentEvents() {
+    window.submitLevel = async (levelId) => {
+        const input = document.getElementById(`input-${levelId}`);
+        const prompt = input.value;
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        const studentId = localStorage.getItem('vibecoding_student_id');
+        if (!participantDataCheck(roomCode, studentId)) return;
+        try {
+            await submitPrompt(roomCode, studentId, levelId, prompt);
+            // Visual feedback
+            const btn = input.nextElementSibling;
+            const originalText = btn.textContent;
+            btn.textContent = "✓ 已提交";
+            btn.classList.add("bg-green-600", "from-green-600", "to-green-600");
+            setTimeout(() => {
+                btn.textContent = originalText;
+                btn.classList.remove("bg-green-600", "from-green-600", "to-green-600");
+            }, 2000);
+        } catch (error) {
+            console.error(error);
+            alert("提交失敗");
+        }
+    };
+}
+function participantDataCheck(roomCode, studentId) {
+    if (!roomCode || !studentId) {
+        alert("連線資訊遺失，請重新登入");
+        window.location.reload();
+        return false;
+    }
+    return true;
+}
+// Peer Learning Modal Logic
+import { getPeerPrompts } from "../services/classroom.js";
+function renderPeerModal() {
+    return `
+    <div id="peer-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
+        <div class="bg-gray-800 rounded-2xl max-w-2xl w-full max-h-[80vh] flex flex-col border border-gray-700 shadow-2xl">
+            <div class="p-6 border-b border-gray-700 flex justify-between items-center">
+                <h3 class="text-xl font-bold text-white">同學的成功提示詞</h3>
+                <button onclick="closePeerModal()" class="text-gray-400 hover:text-white">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <div class="p-6 flex-1 overflow-y-auto space-y-4" id="peer-prompts-container">
+                <!-- Prompts loaded here -->
+            </div>
+            <div class="p-4 border-t border-gray-700 bg-gray-900/50 rounded-b-2xl">
+                <div class="flex space-x-2 overflow-x-auto pb-2" id="level-tabs">
+                    <!-- Tabs for switching levels -->
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}
+window.openPeerModal = async () => {
+    const modal = document.getElementById('peer-modal');
+    modal.classList.remove('hidden');
+    // Default to first level or currently working level? Let's just create tabs.
+    renderLevelTabs();
+    // Load first level by default
+    loadPeerPrompts('beginner');
+};
+window.closePeerModal = () => {
+    document.getElementById('peer-modal').classList.add('hidden');
+};
+function renderLevelTabs() {
+    const container = document.getElementById('level-tabs');
+    container.innerHTML = LEVELS.map(level => `
+        <button onclick="loadPeerPrompts('${level.id}')"
+            class="px-4 py-2 rounded-full bg-gray-700 text-sm hover:bg-cyan-600 hover:text-white transition-colors whitespace-nowrap">
+            ${level.name.split(' ')[0]}
+        </button>
+    `).join('');
+}
+window.loadPeerPrompts = async (levelId) => {
+    const container = document.getElementById('peer-prompts-container');
+    container.innerHTML = '<div class="text-center text-gray-400 py-10">載入中...</div>';
+    const roomCode = localStorage.getItem('vibecoding_room_code');
+    const prompts = await getPeerPrompts(roomCode, levelId);
+    if (prompts.length === 0) {
+        container.innerHTML = '<div class="text-center text-gray-500 py-10">尚無同學提交此關卡</div>';
+        return;
+    }
+    container.innerHTML = prompts.map(p => `
+        <div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600">
+            <div class="flex items-center space-x-2 mb-2">
+                <div class="w-6 h-6 rounded-full bg-cyan-600 flex items-center justify-center text-xs font-bold text-white">
+                    ${p.nickname[0]}
+                </div>
+                <span class="font-bold text-cyan-300 text-sm">${p.nickname}</span>
+            </div>
+            <p class="text-gray-300 font-mono text-sm bg-black/20 p-3 rounded-lg border border-gray-700/50">
+                ${p.prompt}
+            </p>
+        </div>
+    `).join('');
+};
+// Append modal to body only if not exists
+if (!document.getElementById('peer-modal')) {
+    const div = document.createElement('div');
+    div.innerHTML = renderPeerModal();
+    document.body.appendChild(div.firstElementChild);
+}