Skip to content

Commit 9dd5525

Browse files
SkvProgrammerSkvProgrammer
authored
updated
1 parent f1f309d commit 9dd5525

File tree

2 files changed

+220
-147
lines changed

2 files changed

+220
-147
lines changed

‎index.html‎

Lines changed: 40 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,100 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Advanced Whiteboard</title>
78
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
89
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
910
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
1012
<style>
11-
body {
12-
font-family: 'Poppins', sans-serif;
13-
margin: 0;
14-
padding: 0;
15-
background: #f9f9f9;
16-
}
17-
18-
nav.navbar {
19-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
20-
}
21-
22-
#side-menu {
23-
background-color: #ffffff;
24-
width: 100px;
25-
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
26-
padding: 20px 10px;
27-
}
28-
29-
#side-menu button {
30-
display: block;
31-
width: 60%;
32-
margin: 10px auto;
33-
padding: 12px 15px;
34-
border: 1px solid #ddd;
35-
background: #f8f9fa;
36-
border-radius: 5px;
37-
text-align: left;
38-
font-size: 16px;
39-
cursor: pointer;
40-
transition: all 0.3s ease;
41-
}
42-
43-
#side-menu button:hover {
44-
background-color: #e7eaf3;
45-
}
46-
47-
#side-menu button.active {
48-
background-color: #0d6efd;
49-
color: #fff;
50-
}
51-
52-
.tool-options {
53-
display: none;
54-
margin: 10px;
55-
}
56-
57-
.tool-options.active {
58-
display: block;
59-
}
60-
61-
#whiteboard {
62-
border: 2px solid #e9ecef;
63-
border-radius: 10px;
64-
background: #ffffff;
65-
max-width: 100%;
66-
max-height: 100%;
67-
cursor: crosshair;
68-
}
69-
70-
footer {
71-
background-color: #0d6efd;
72-
color: white;
73-
text-align: center;
74-
padding: 10px 0;
75-
}
76-
77-
/* Responsive Design */
78-
@media (max-width: 768px) {
79-
#side-menu {
80-
width: 100px;
81-
}
82-
83-
#side-menu button {
84-
font-size: 12px;
85-
padding: 8px 10px;
86-
}
87-
}
13+
/* Add your CSS from above */
8814
</style>
8915
</head>
16+
9017
<body>
91-
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
18+
<!-- Navbar -->
19+
<nav class="navbar navbar-expand-lg">
9220
<div class="container-fluid">
9321
<a class="navbar-brand" href="#">Whiteboard</a>
9422
</div>
9523
</nav>
9624

25+
<!-- Layout -->
9726
<div class="d-flex vh-100">
9827
<!-- Sidebar -->
99-
<div id="side-menu">
100-
<button id="pointer-tool" class="active" data-tool="pointer" title="Pointer Tool" onclick="setTool('pointer')">
28+
<aside id="side-menu">
29+
<button id="pointer-tool" class="active" data-tool="pointer" aria-label="Pointer Tool" onclick="setTool('pointer')">
10130
<i class="fas fa-mouse-pointer"></i>
10231
</button>
103-
<button id="pen-tool" data-tool="pen" title="Pen Tool" onclick="setTool('pen')">
32+
<button id="pen-tool" data-tool="pen" aria-label="Pen Tool" onclick="setTool('pen')">
10433
<i class="fas fa-pen"></i>
10534
</button>
106-
<button id="eraser-tool" data-tool="eraser" title="Eraser Tool" onclick="setTool('eraser')">
35+
<button id="eraser-tool" data-tool="eraser" aria-label="Eraser Tool" onclick="setTool('eraser')">
10736
<i class="fas fa-eraser"></i>
10837
</button>
109-
<button id="text-tool" data-tool="text" title="Add Text" onclick="setTool('text')">
38+
<button id="text-tool" data-tool="text" aria-label="Text Tool" onclick="setTool('text')">
11039
<i class="fas fa-font"></i>
11140
</button>
112-
<button id="line-tool" data-tool="line" title="Draw Line" onclick="setTool('line')">
41+
<button id="line-tool" data-tool="line" aria-label="Line Tool" onclick="setTool('line')">
11342
<i class="fas fa-minus"></i>
11443
</button>
115-
<button id="rectangle-tool" data-tool="rectangle" title="Draw Rectangle" onclick="setTool('rectangle')">
44+
<button id="rectangle-tool" data-tool="rectangle" aria-label="Rectangle Tool" onclick="setTool('rectangle')">
11645
<i class="far fa-square"></i>
11746
</button>
118-
<button id="circle-tool" data-tool="circle" title="Draw Circle" onclick="setTool('circle')">
47+
<button id="circle-tool" data-tool="circle" aria-label="Circle Tool" onclick="setTool('circle')">
11948
<i class="far fa-circle"></i>
12049
</button>
121-
<button id="save-button" title="Save Your Work" onclick="saveWork()">
50+
<button id="save-button" aria-label="Save Work" onclick="saveWork()">
12251
<i class="fas fa-save"></i>
12352
</button>
124-
<button id="upload-button" title="Upload Image" onclick="uploadImage()">
53+
<button id="upload-button" aria-label="Upload Image" onclick="uploadImage()">
12554
<i class="fas fa-upload"></i>
12655
</button>
127-
<button id="fullscreen-button" title="Toggle Fullscreen" onclick="toggleFullscreen()">
56+
<button id="fullscreen-button" aria-label="Toggle Fullscreen" onclick="toggleFullscreen()">
12857
<i class="fas fa-expand"></i>
12958
</button>
130-
131-
</div>
59+
</aside>
13260

13361
<!-- Main Content -->
134-
<div class="flex-grow-1 d-flex flex-column">
135-
<!-- Dynamic Options -->
136-
<div id="tool-options-container" class="p-3 bg-light">
62+
<main class="flex-grow-1 d-flex flex-column">
63+
<!-- Dynamic Tool Options -->
64+
<section id="tool-options-container" class="p-3 bg-light">
13765
<div id="pen-options" class="tool-options active">
138-
<label>Pen Size: <input type="range" id="pen-size" min="2" max="50" value="10"></label>
139-
<label>Pen Color: <input type="color" id="pen-color" value="#000000"></label>
66+
<label for="pen-size">Pen Size:</label>
67+
<input type="range" id="pen-size" min="2" max="50" value="10">
68+
<label for="pen-color">Pen Color:</label>
69+
<input type="color" id="pen-color" value="#000000">
14070
</div>
14171

14272
<div id="eraser-options" class="tool-options">
143-
<label>Eraser Size: <input type="range" id="eraser-size" min="2" max="50" value="20"></label>
73+
<label for="eraser-size">Eraser Size:</label>
74+
<input type="range" id="eraser-size" min="2" max="50" value="20">
14475
</div>
14576

14677
<div id="text-options" class="tool-options">
147-
<label>Font Size: <input type="number" id="font-size" value="20" min="10" max="100"></label>
78+
<label for="font-size">Font Size:</label>
79+
<input type="number" id="font-size" value="20" min="10" max="100">
14880
</div>
149-
</div>
81+
</section>
15082

15183
<!-- Whiteboard Canvas -->
152-
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
84+
<section class="flex-grow-1 d-flex justify-content-center align-items-center">
15385
<canvas id="whiteboard"></canvas>
154-
</div>
155-
</div>
86+
</section>
87+
</main>
15688
</div>
15789

158-
<footer>
159-
<h6>Whiteboard | Made with ❤️ by <a href="https://github.com/skvprogrammer" style="color:black!important;">SKV</a></h6>
90+
<!-- Footer -->
91+
<footer class="mt-auto">
92+
<div class="container text-center py-2">
93+
<h6>Whiteboard | Made with ❤️ by <a href="https://github.com/skvprogrammer" class="text-light">SKV</a></h6>
94+
</div>
16095
</footer>
16196

16297
<script src="script.js"></script>
16398
</body>
99+
164100
</html>

0 commit comments

Comments
 (0)