Take-Notes/index.html at main · Nishantishere/Take-Notes · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whiteboard App - Enhanced</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="toolbar">
        <div class="tool-group">
            <button class="tool-btn active" data-tool="pen" title="Pen (P)">✏️</button>
            <button class="tool-btn" data-tool="eraser" title="Eraser (E)">🧽</button>
            <button class="tool-btn" data-tool="select" title="Select (V)">👆</button>
        </div>

        <div class="tool-group">
            <button class="tool-btn" data-tool="rectangle" title="Rectangle (R)">⬜</button>
            <button class="tool-btn" data-tool="circle" title="Circle (C)">⭕</button>
            <button class="tool-btn" data-tool="line" title="Line (L)">📏</button>
            <button class="tool-btn" data-tool="arrow" title="Arrow (A)">➡️</button>
            <button class="tool-btn" data-tool="text" title="Text (T)">📝</button>
        </div>

        <div class="tool-group">
            <input type="color" id="colorPicker" class="color-input" value="#000000" title="Stroke Color">
            <input type="color" id="bgPicker" class="color-input" value="#ffffff" title="Background Color">
        </div>

        <div class="tool-group">
            <div class="slider-container">
                <span>🖊️</span>
                <input type="range" id="strokeWidth" class="slider" min="1" max="20" value="2">
                <span id="widthValue">2</span>
            </div>
        </div>

        <div class="tool-group" id="textControls" style="display: none;">
            <select id="fontSelector">
                <option value="Arial">Arial</option>
                <option value="Helvetica">Helvetica</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Courier New">Courier New</option>
                <option value="Verdana">Verdana</option>
                <option value="Georgia">Georgia</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
                <option value="Impact">Impact</option>
            </select>
            <input type="number" id="fontSizeInput" value="16" min="8" max="72">
        </div>

        <div class="tool-group">
            <button class="theme-btn active" data-theme="light" title="Light Theme">☀️</button>
            <button class="theme-btn" data-theme="dark" title="Dark Theme">🌙</button>
        </div>
    </div>

    <div id="canvasContainer">
        <canvas id="canvas"></canvas>
    </div>

    <div class="controls">
        <button id="saveBtn" class="save-btn">💾 Save</button>
        <div class="zoom-controls">
            <button id="zoomOutBtn" class="zoom-btn" title="Zoom Out">−</button>
            <button id="zoomInBtn" class="zoom-btn" title="Zoom In">+</button>
        </div>
    </div>

    <div class="zoom-info" id="zoomInfo">100%</div>

    <!-- SVG filter for smooth rendering -->
    <svg style="position: absolute; width: 0; height: 0;">
        <defs>
            <filter id="smooth">
                <feGaussianBlur stdDeviation="0.5"/>
            </filter>
        </defs>
    </svg>

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