Harsh-jain/codecollab-vs-code-meets-google-docs

1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>CodeCollab | Real-time Collaborative Coding</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <script src="https://unpkg.com/feather-icons"></script>11    <script src="https://unpkg.com/monaco-editor@0.36.1/min/vs/loader.js"></script>12    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>13    <script src="components/navbar.js"></script>14    <script src="components/sidebar.js"></script>15    <script src="components/collaborator-list.js"></script>16</head>17<body style="margin: 0; padding: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column;">18<collab-navbar></collab-navbar>19    20    <div class="flex flex-1 overflow-hidden">21        <collab-sidebar></collab-sidebar>22        23        <main class="flex-1 flex flex-col overflow-hidden">24            <div style="display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 35px; background-color: #1e1e1e; border-bottom: 1px solid #252526; color: #cccccc; font-size: 12px;">25<div class="flex items-center space-x-2">26                    <span class="text-sm text-gray-400">main.js</span>27                    <i data-feather="x" class="w-4 h-4 text-gray-500 hover:text-gray-300 cursor-pointer"></i>28                </div>29                <div class="flex items-center space-x-3">30                    <collab-cursor class="text-xs text-green-400">Jane (you)</collab-cursor>31                    <button class="text-xs bg-green-600 hover:bg-green-700 px-2 py-1 rounded">Share</button>32                </div>33            </div>34            <div id="editor-container" class="flex-1 overflow-hidden"></div>35            <div id="share-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">36                <div class="bg-gray-800 rounded-lg p-6 w-96">37                    <div class="flex justify-between items-center mb-4">38                        <h3 class="text-lg font-medium text-white">Share Project</h3>39                        <button id="close-share-modal" class="text-gray-400 hover:text-white">40                            <i data-feather="x"></i>41                        </button>42                    </div>43                    <div class="mb-4">44                        <label class="block text-sm font-medium text-gray-300 mb-2">Share Link</label>45                        <div class="flex">46                            <input id="share-link-input" type="text" readonly 47                                class="flex-1 bg-gray-700 text-white rounded-l px-3 py-2 text-sm" 48                                value="Generating link...">49                            <button id="copy-share-link" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r text-sm">50                                Copy51                            </button>52                        </div>53                    </div>54                    <div>55                        <label class="block text-sm font-medium text-gray-300 mb-2">Invite via Email</label>56                        <div class="flex">57                            <input type="email" placeholder="email@example.com" 58                                class="flex-1 bg-gray-700 text-white rounded-l px-3 py-2 text-sm">59                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r text-sm">60                                Send61                            </button>62                        </div>63                    </div>64                </div>65            </div>66<div style="display: flex; justify-content: space-between; align-items: center; padding: 0 10px; height: 22px; background-color: #007acc; color: white; font-size: 11px;">67<div class="text-xs text-gray-400">68                    <span>UTF-8</span>69                    <span class="mx-2">|</span>70                    <span>JavaScript</span>71                </div>72                <div class="flex items-center space-x-4">73                    <collaborator-list></collaborator-list>74                    <div class="flex items-center space-x-2">75                        <i data-feather="wifi" class="w-4 h-4 text-green-400"></i>76                        <span class="text-xs text-gray-300">Live</span>77                    </div>78                </div>79            </div>80        </main>81    </div>82    <script src="components/collaborator-list.js"></script>83    <script src="components/navbar.js"></script>84    <script src="components/sidebar.js"></script>85    <script src="script.js"></script>86<script>87        feather.replace();88        89        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.36.1/min/vs' }});90        require(['vs/editor/editor.main'], function() {91            const editor = monaco.editor.create(document.getElementById('editor-container'), {92                value: "// Welcome to CodeCollab!\n// Start coding together in real-time\n\nfunction helloWorld() {\n  console.log('Hello collaborators!');\n}",93                language: 'javascript',94                theme: 'vs-dark',95                automaticLayout: true,96                minimap: { enabled: true },97                fontSize: 14,98                lineNumbers: 'on',99                scrollBeyondLastLine: false100            });101            102            // Socket.io for real-time collaboration103            const socket = io();104            105            // Handle editor changes106            editor.onDidChangeModelContent(function(event) {107                const content = editor.getValue();108                socket.emit('code-change', content);109            });110            111            // Receive updates from other collaborators112            socket.on('code-update', function(content) {113                const currentPosition = editor.getPosition();114                editor.setValue(content);115                editor.setPosition(currentPosition);116            });117            118            // Handle cursor positions119            editor.onDidChangeCursorPosition(function(event) {120                socket.emit('cursor-position', {121                    position: event.position,122                    userId: 'user-' + Math.random().toString(36).substr(2, 9)123                });124            });125        });126    </script>127<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>128</body>129</html>