Fix CSS and asset paths for local viewing

Author: Archith

app.html

@@ -6,23 +6,23 @@
     <meta name="author" content="Bernie Perez">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenCollab - Collaborative Code Editor</title>
-    <link rel="apple-touch-icon" sizes="57x57" href="/images/favicon/apple-touch-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/images/favicon/apple-touch-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/apple-touch-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/apple-touch-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/apple-touch-icon-152x152.png">
-    <link rel="icon" type="image/png" sizes="196x196" href="/images/favicon/favicon-196x196.png">
-    <link rel="icon" type="image/png" sizes="128x128" href="/images/favicon/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/images/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="images/favicon/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-touch-icon-152x152.png">
+    <link rel="icon" type="image/png" sizes="196x196" href="images/favicon/favicon-196x196.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="images/favicon/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
 
     <!-- styling -->
     <!-- Custom style -->
-    <link rel="stylesheet" href="/styles/main.css?v=5">
+    <link rel="stylesheet" href="styles/main.css?v=5">
     <!-- Firepad -->
     <link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
 
@@ -35,16 +35,16 @@
     <!-- scripts -->
     <!-- Firebase -->
     <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
-    <script src="/lib/firebase-sdk.js"></script>
+    <script src="lib/firebase-sdk.js"></script>
     <!-- ACE and its JavaScript mode and theme files - Updated to latest -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.2/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.2/ext-language_tools.js"></script>
     <!-- Firepad -->
     <script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>
     <!-- Code Executor -->
-    <script src="/scripts/code-executor.js?v=2"></script>
+    <script src="scripts/code-executor.js?v=2"></script>
     <!-- Authentication -->
-    <script src="/scripts/auth-api.js"></script>
+    <script src="scripts/auth-api.js"></script>
 
     <!-- Analytics (Optional - Replace with your analytics service) -->
     <!-- 
@@ -66,7 +66,7 @@
       <div class="modal-content landing-content atom-card">
         <div class="atom-logo-section">
           <div class="atom-logo">
-            <img src="/images/favicon/apple-touch-icon-120x120.png" alt="Atom Tickets" width="80" height="80" style="display: block; margin: 0 auto;">
+            <img src="images/favicon/apple-touch-icon-120x120.png" alt="Atom Tickets" width="80" height="80" style="display: block; margin: 0 auto;">
           </div>
           <h1 class="atom-title">OpenCollab Platform</h1>
           <p class="atom-subtitle">Real-time Collaborative Coding</p>
@@ -136,7 +136,7 @@ <h3>Login as Interviewer</h3>
       <footer class="atom-footer">
         <div class="footer-content">
           <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px;">
-            <img src="/images/favicon/apple-touch-icon-60x60.png" alt="Atom Tickets" width="30" height="30" style="margin-right: 10px;">
+            <img src="images/favicon/apple-touch-icon-60x60.png" alt="Atom Tickets" width="30" height="30" style="margin-right: 10px;">
             <p style="margin: 0;">Made with ❤️ by <a href="https://www.humancto.com" target="_blank" class="atom-link">HumanCTO</a></p>
           </div>
           <div class="footer-links">
@@ -706,14 +706,14 @@ <h3 class="custom-modal-title"></h3>
     </div>
 
     <!-- Simple Templates (must load before firepad.js) -->
-    <script src="/scripts/simple-templates.js?v=2"></script>
-    <script src="/scripts/custom-dialogs.js?v=2"></script>
-    <script src="/scripts/firepad.js?v=3"></script>
-    <script src="/scripts/interview-notes.js?v=3"></script>
-    <script src="/scripts/slack-integration.js?v=4"></script>
-    <script src="/scripts/posthog-tracking.js?v=2"></script>
-    <script src="/scripts/session-tracking.js?v=1"></script>
-    <script src="/scripts/activity-monitor.js?v=1"></script>
-    <script src="/scripts/app.js?v=3"></script>
+    <script src="scripts/simple-templates.js?v=2"></script>
+    <script src="scripts/custom-dialogs.js?v=2"></script>
+    <script src="scripts/firepad.js?v=3"></script>
+    <script src="scripts/interview-notes.js?v=3"></script>
+    <script src="scripts/slack-integration.js?v=4"></script>
+    <script src="scripts/posthog-tracking.js?v=2"></script>
+    <script src="scripts/session-tracking.js?v=1"></script>
+    <script src="scripts/activity-monitor.js?v=1"></script>
+    <script src="scripts/app.js?v=3"></script>
   </body>
 </html>

index.html

@@ -7,8 +7,8 @@
     <meta name="description" content="A secure, real-time collaborative coding platform for technical interviews and pair programming. Open source and self-hostable.">
 
     <!-- Favicons -->
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
 
     <style>
         * {

package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "start": "node server.js",
     "dev": "nodemon server.js",
+    "serve": "node serve.js",
+    "preview": "node serve.js",
     "build": "npm run build:client",
     "build:client": "echo 'Client is static, no build needed'",
     "deploy": "npm run build && npm start"

serve.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+/**
+ * Simple HTTP server for local development
+ * This helps view the app with proper CSS and assets loading
+ */
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+
+const PORT = 8080;
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'text/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon'
+};
+
+const server = http.createServer((req, res) => {
+  const parsedUrl = url.parse(req.url);
+  let pathname = parsedUrl.pathname;
+  
+  // Default to index.html
+  if (pathname === '/') {
+    pathname = '/index.html';
+  }
+  
+  const filePath = path.join(__dirname, pathname);
+  const extname = path.extname(filePath);
+  const contentType = MIME_TYPES[extname] || 'text/plain';
+  
+  fs.readFile(filePath, (err, content) => {
+    if (err) {
+      if (err.code === 'ENOENT') {
+        res.writeHead(404);
+        res.end('File not found');
+      } else {
+        res.writeHead(500);
+        res.end('Server error');
+      }
+    } else {
+      res.writeHead(200, { 'Content-Type': contentType });
+      res.end(content);
+    }
+  });
+});
+
+server.listen(PORT, () => {
+  console.log(`
+╔════════════════════════════════════════════════════╗
+║                                                    ║
+║   🚀 OpenCollab Development Server                 ║
+║                                                    ║
+║   Server running at:                              ║
+║   http://localhost:${PORT}                            ║
+║                                                    ║
+║   Pages:                                          ║
+║   • Landing Page: http://localhost:${PORT}/           ║
+║   • Application:  http://localhost:${PORT}/app.html   ║
+║                                                    ║
+║   Press Ctrl+C to stop                            ║
+║                                                    ║
+╚════════════════════════════════════════════════════╝
+  `);
+});