Spaces:

developerwoodstudios
/

index-html

Running

App Files Files Community

developerwoodstudios commited on Jul 6

Commit

d65e611

verified ·

1 Parent(s): 08f7bae

Act as if you are a world class #1 AI application creating software engineer that can perfectly integrate with the worlds best Ai Agent and software applications builder which is DeepSite v2? Then can you create a Figma/Miro-like real-time whiteboard application, that is optimized through the industries top performing pipelines and websites - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +389 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Index Html
-emoji: 🐠
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: index-html
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,389 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepBoard - Collaborative Whiteboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 120px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            margin-left: -60px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        .canvas-container {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .color-option {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin: 2px;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        .color-option:hover, .color-option.active {
+            border-color: #000;
+        }
+        .user-cursor {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 1000;
+        }
+        .user-label {
+            position: absolute;
+            font-size: 12px;
+            padding: 2px 5px;
+            border-radius: 3px;
+            pointer-events: none;
+            z-index: 1000;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 h-screen flex flex-col">
+    <!-- Top Navigation Bar -->
+    <header class="bg-white shadow-sm py-2 px-4 flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+                <i class="fas fa-palette text-blue-600 text-2xl mr-2"></i>
+                <h1 class="text-xl font-bold text-gray-800">DeepBoard</h1>
+            </div>
+            <div class="hidden md:flex items-center space-x-2">
+                <button id="save-btn" class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm">
+                    <i class="fas fa-save mr-1"></i> Save
+                </button>
+                <button id="export-btn" class="px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 text-sm">
+                    <i class="fas fa-download mr-1"></i> Export
+                </button>
+                <button id="share-btn" class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
+                    <i class="fas fa-user-plus mr-1"></i> Share
+                </button>
+            </div>
+        </div>
+        <div class="flex items-center space-x-4">
+            <div class="relative">
+                <input type="text" placeholder="Search boards..." class="pl-8 pr-4 py-1 border rounded-full text-sm w-40 md:w-64 focus:outline-none focus:ring-1 focus:ring-blue-500">
+                <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
+            </div>
+            <div class="flex items-center space-x-2">
+                <div class="relative">
+                    <button id="notifications-btn" class="p-1 rounded-full hover:bg-gray-100">
+                        <i class="fas fa-bell text-gray-600"></i>
+                        <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
+                    </button>
+                </div>
+                <div class="relative">
+                    <button id="user-menu-btn" class="flex items-center space-x-1">
+                        <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">U</div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content Area -->
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Left Toolbar -->
+        <div class="w-14 bg-white shadow-sm flex flex-col items-center py-4 space-y-4">
+            <div class="tooltip">
+                <button id="select-tool" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-mouse-pointer text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Select (V)</span>
+            </div>
+            <div class="tooltip">
+                <button id="pen-tool" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-pen text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Pen (P)</span>
+            </div>
+            <div class="tooltip">
+                <button id="text-tool" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-font text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Text (T)</span>
+            </div>
+            <div class="tooltip">
+                <button id="shape-tool" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-square text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Shapes (S)</span>
+            </div>
+            <div class="tooltip">
+                <button id="sticky-tool" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-sticky-note text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Sticky (N)</span>
+            </div>
+            <div class="border-t border-gray-200 w-8 mx-auto my-2"></div>
+            <div class="tooltip">
+                <button id="zoom-in" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-search-plus text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Zoom In (+)</span>
+            </div>
+            <div class="tooltip">
+                <button id="zoom-out" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-search-minus text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Zoom Out (-)</span>
+            </div>
+            <div class="tooltip">
+                <button id="zoom-fit" class="p-2 rounded hover:bg-gray-100 active:bg-gray-200">
+                    <i class="fas fa-expand text-gray-700"></i>
+                </button>
+                <span class="tooltiptext">Fit to Screen (0)</span>
+            </div>
+        </div>
+        <!-- Canvas Area -->
+        <div class="flex-1 relative overflow-auto bg-gray-200 flex items-center justify-center p-4">
+            <div id="canvas-container" class="canvas-container bg-white">
+                <canvas id="whiteboard" width="2000" height="2000"></canvas>
+            </div>
+            <!-- Right Toolbar (Color/Properties) -->
+            <div class="absolute right-4 top-4 bg-white rounded-lg shadow-md p-3 w-48">
+                <div class="mb-3">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Stroke Color</label>
+                    <div class="flex flex-wrap">
+                        <div class="color-option bg-black active" data-color="#000000"></div>
+                        <div class="color-option bg-red-500" data-color="#ef4444"></div>
+                        <div class="color-option bg-blue-500" data-color="#3b82f6"></div>
+                        <div class="color-option bg-green-500" data-color="#10b981"></div>
+                        <div class="color-option bg-yellow-500" data-color="#f59e0b"></div>
+                        <div class="color-option bg-purple-500" data-color="#8b5cf6"></div>
+                        <div class="color-option bg-pink-500" data-color="#ec4899"></div>
+                        <div class="color-option bg-gray-500" data-color="#6b7280"></div>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Fill Color</label>
+                    <div class="flex flex-wrap">
+                        <div class="color-option bg-transparent border border-gray-300 active" data-color="transparent"></div>
+                        <div class="color-option bg-red-100" data-color="#fee2e2"></div>
+                        <div class="color-option bg-blue-100" data-color="#dbeafe"></div>
+                        <div class="color-option bg-green-100" data-color="#d1fae5"></div>
+                        <div class="color-option bg-yellow-100" data-color="#fef3c7"></div>
+                        <div class="color-option bg-purple-100" data-color="#ede9fe"></div>
+                        <div class="color-option bg-pink-100" data-color="#fce7f3"></div>
+                        <div class="color-option bg-gray-100" data-color="#f3f4f6"></div>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Stroke Width</label>
+                    <input id="stroke-width" type="range" min="1" max="20" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                </div>
+                <div class="mb-3">
+                    <label class="block text-xs font-medium text-gray-500 mb-1">Opacity</label>
+                    <input id="opacity" type="range" min="10" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                </div>
+            </div>
+            <!-- Bottom Status Bar -->
+            <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white rounded-full shadow-md px-4 py-1 flex items-center space-x-4 text-sm">
+                <div class="flex items-center">
+                    <span class="text-gray-500">Zoom:</span>
+                    <span id="zoom-level" class="ml-1 font-medium">100%</span>
+                </div>
+                <div class="h-4 border-l border-gray-300"></div>
+                <div class="flex items-center">
+                    <span class="text-gray-500">Tool:</span>
+                    <span id="current-tool" class="ml-1 font-medium">Select</span>
+                </div>
+                <div class="h-4 border-l border-gray-300"></div>
+                <div class="flex items-center">
+                    <span class="text-gray-500">Users:</span>
+                    <div id="user-count" class="ml-1 font-medium">1</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Shape Selection Modal -->
+    <div id="shape-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg shadow-xl p-4 w-64">
+            <div class="flex justify-between items-center mb-3">
+                <h3 class="font-medium text-gray-800">Add Shape</h3>
+                <button id="close-shape-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="grid grid-cols-3 gap-3">
+                <button class="shape-option p-3 border rounded hover:bg-gray-50 flex flex-col items-center" data-shape="rect">
+                    <i class="fas fa-square text-xl mb-1 text-blue-500"></i>
+                    <span class="text-xs">Rectangle</span>
+                </button>
+                <button class="shape-option p-3 border rounded hover:bg-gray-50 flex flex-col items-center" data-shape="circle">
+                    <i class="fas fa-circle text-xl mb-1 text-blue-500"></i>
+                    <span class="text-xs">Circle</span>
+                </button>
+                <button class="shape-option p-3 border rounded hover:bg-gray-50 flex flex-col items-center" data-shape="triangle">
+                    <i class="fas fa-play text-xl mb-1 text-blue-500 transform rotate-90"></i>
+                    <span class="text-xs">Triangle</span>
+                </button>
+                <button class="shape-option p-3 border rounded hover:bg-gray-50 flex flex-col items-center" data-shape="line">
+                    <i class="fas fa-minus text-xl mb-1 text-blue-500"></i>
+                    <span class="text-xs">Line</span>
+                </button>
+                <button class="shape-option p-3 border rounded hover:bg-gray-50 flex flex-col items-center" data-shape="arrow">
+                    <i class="fas fa-arrow-right text-xl mb-1 text-blue-500"></i>
+                    <span class="text-xs">Arrow</span>
+                </button>
+                <button class="shape-option p-3 border rounded hover:bg-gray-50 flex flex-col items-center" data-shape="star">
+                    <i class="fas fa-star text-xl mb-1 text-blue-500"></i>
+                    <span class="text-xs">Star</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Share Modal -->
+    <div id="share-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg shadow-xl p-6 w-96">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium text-gray-800">Share Board</h3>
+                <button id="close-share-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Invite by email</label>
+                <div class="flex">
+                    <input type="email" placeholder="[email protected]" class="flex-1 border rounded-l px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500">
+                    <button class="bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-700">Invite</button>
+                </div>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Shareable link</label>
+                <div class="flex">
+                    <input type="text" value="https://deepboard.app/board/abc123" readonly class="flex-1 border rounded-l px-3 py-2 bg-gray-100 text-gray-700">
+                    <button class="bg-gray-200 text-gray-700 px-3 py-2 border-t border-r border-b border-gray-300 hover:bg-gray-300">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                </div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">Access level</label>
+                <div class="flex space-x-4">
+                    <label class="inline-flex items-center">
+                        <input type="radio" name="access" checked class="h-4 w-4 text-blue-600">
+                        <span class="ml-2 text-gray-700">Can edit</span>
+                    </label>
+                    <label class="inline-flex items-center">
+                        <input type="radio" name="access" class="h-4 w-4 text-blue-600">
+                        <span class="ml-2 text-gray-700">Can view</span>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize Fabric.js canvas
+        const canvas = new fabric.Canvas('whiteboard', {
+            isDrawingMode: false,
+            selection: true,
+            preserveObjectStacking: true
+        });
+        // Set canvas background
+        canvas.setBackgroundColor('#ffffff', canvas.renderAll.bind(canvas));
+        // Socket.io for real-time collaboration
+        const socket = io('https://deepsite-socket-server.example.com');
+        const roomId = window.location.pathname.split('/').pop() || 'default-room';
+        const userId = 'user-' + Math.random().toString(36).substr(2, 9);
+        const userColor = `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
+        // Join the room
+        socket.emit('join-room', roomId, userId);
+        // Track active users
+        const activeUsers = {};
+        // Current tool state
+        let currentTool = 'select';
+        let currentColor = '#000000';
+        let currentFill = 'transparent';
+        let currentStrokeWidth = 3;
+        let currentOpacity = 1;
+        // Zoom state
+        let zoomLevel = 1;
+        // DOM Elements
+        const canvasContainer = document.getElementById('canvas-container');
+        const zoomLevelDisplay = document.getElementById('zoom-level');
+        const currentToolDisplay = document.getElementById('current-tool');
+        const userCountDisplay = document.getElementById('user-count');
+        // Tool buttons
+        document.getElementById('select-tool').addEventListener('click', () => setTool('select'));
+        document.getElementById('pen-tool').addEventListener('click', () => setTool('pen'));
+        document.getElementById('text-tool').addEventListener('click', () => setTool('text'));
+        document.getElementById('shape-tool').addEventListener('click', () => showShapeModal());
+        document.getElementById('sticky-tool').addEventListener('click', () => addStickyNote());
+        // Zoom buttons
+        document.getElementById('zoom-in').addEventListener('click', () => zoomCanvas(0.1));
+        document.getElementById('zoom-out').addEventListener('click', () => zoomCanvas(-0.1));
+        document.getElementById('zoom-fit').addEventListener('click', () => fitCanvasToScreen());
+        // Color pickers
+        document.querySelectorAll('.color-option[data-color]').forEach(option => {
+            option.addEventListener('click', function() {
+                const color = this.getAttribute('data-color');
+                // Remove active class from all options in this group
+                this.parentNode.querySelectorAll('.color-option').forEach(opt => {
+                    opt.classList.remove('active');
+                });
+                // Add active class to clicked option
+                this.classList.add('active');
+                // Determine if this is stroke or fill color
+                if (this.parentNode.previousElementSibling.textContent.includes('Stroke')) {
+                    currentColor = color;
+                    canvas.freeDrawingBrush.color = color;
+                } else {
+                    currentFill = color;
+                }
+                // Update selected object if exists
+                const activeObject = canvas.getActiveObject();
+                if (activeObject) {
+                    if (this.parentNode.previousElementSibling.textContent.includes('Stroke')) {
+                        activeObject.set('stroke', color);
+                    } else {
+                        activeObject.set('fill', color === 'transparent' ? ''
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=developerwoodstudios/index-html" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>