InfinityWhiteboard/index.html at main · longtimeno-c/InfinityWhiteboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Whiteboard</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div id="toolbar">
        <button id="penTool" class="tool-button active" data-tooltip="Pen (P)" onclick="setTool('pen')">
            <i class="fas fa-pen"></i>
        </button>
        <input type="color" id="colorPicker" value="#000000" onchange="setColor(this.value)">
        <button id="eraserTool" class="tool-button" data-tooltip="Eraser (E)" onclick="setTool('eraser')">
            <i class="fas fa-eraser"></i>
        </button>
        <button id="panTool" class="tool-button" data-tooltip="Pan (Space)" onclick="setTool('pan')">
            <i class="fas fa-hand"></i>
        </button>
        <button class="tool-button" data-tooltip="Clear Board" onclick="clearBoardWithConfirm()">
            <i class="fas fa-trash"></i>
        </button>
        <button class="tool-button" data-tooltip="Undo (Ctrl+Z)" onclick="undo()">
            <i class="fas fa-undo"></i>
        </button>
        <button class="tool-button" data-tooltip="Redo (Ctrl+Y)" onclick="redo()">
            <i class="fas fa-redo"></i>
        </button>
        <input type="range" id="size" min="1" max="20" value="2" onchange="setSize(this.value)">
        <button class="tool-button" data-tooltip="Zoom In" onclick="zoom(1.2)">
            <i class="fas fa-search-plus"></i>
        </button>
        <button class="tool-button" data-tooltip="Zoom Out" onclick="zoom(0.8)">
            <i class="fas fa-search-minus"></i>
        </button>

        <!-- Username display in top right -->
        <div id="username-container">
            <span id="username-display"></span>
            <button id="change-username-btn" class="tool-button" data-tooltip="Change Username">
                <i class="fas fa-user-edit"></i>
            </button>
        </div>
    </div>

    <!-- Board selector panel -->
    <div id="board-panel">
        <div class="panel-header">
            <h3>Boards</h3>
        </div>
        <div id="board-selector">
            <!-- Board options will be added dynamically -->
        </div>
    </div>

    <!-- Board panel tab for reopening when collapsed -->
    <button id="board-panel-tab">Boards</button>
    <button id="admin-panel-tab">Admin</button>

    <canvas id="whiteboard"></canvas>
    <div id="status" class="disconnected">Disconnected</div>

    <!-- Username Modal -->
    <div id="username-modal" class="modal">
        <div class="modal-content">
            <h2>Welcome to Infinite Whiteboard</h2>
            <p>Please enter a username to continue:</p>
            <input type="text" id="username-input" placeholder="Username">
            <button id="save-username-btn">Save</button>
        </div>
    </div>

    <!-- Clear Options Modal -->
    <div id="clear-options-modal" class="modal">
        <div class="modal-content">
            <h2>Clear Options</h2>
            <p>What would you like to clear?</p>
            <div class="modal-buttons">
                <button id="clear-own-btn" class="primary-btn">Clear My Content</button>
                <button id="clear-all-btn" class="danger-btn">Clear All Content</button>
                <button id="cancel-clear-btn">Cancel</button>
            </div>
        </div>
    </div>

    <script src="utils.js"></script>
    <script src="whiteboard.js"></script>
</body>
</html>