Skip to content

Commit f1f309d

Browse files
SkvProgrammerSkvProgrammer
authored
updated
1 parent 12b5d98 commit f1f309d

File tree

2 files changed

+283
-291
lines changed

2 files changed

+283
-291
lines changed

‎index.html‎

Lines changed: 146 additions & 189 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +1,164 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Enhanced Whiteboard</title>
7-
<link
8-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
9-
rel="stylesheet"
10-
/>
11-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
12-
13-
<link
14-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
15-
rel="stylesheet"
16-
/>
17-
<link rel="stylesheet" href="style.css" />
18-
<style>
19-
body {
20-
/*font-family: 'Poppins', sans-serif;
21-
*/background: linear-gradient(135deg, #f3f4f6, #ffffff);
22-
margin: 0;
23-
padding: 0;
24-
}
25-
nav.navbar {
26-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
27-
}
28-
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Advanced Whiteboard</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
10+
<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) {
2979
#side-menu {
30-
/* background-color: #f8f9fa;
31-
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);*/
32-
}
33-
34-
.btn {
35-
transition: background-color 0.3s ease, transform 0.2s ease;
36-
}
37-
38-
.btn:hover {
39-
background-color: #eeff01;
40-
border:none!important;
41-
transform: scale(1.1);
42-
}
43-
44-
.selected {
45-
background-color: #0d6efd;
46-
color: #ffffff;
47-
}
48-
49-
#controls {
50-
border-bottom: 1px solid #dee2e6;
51-
}
52-
53-
#whiteboard {
54-
border: 2px solid #e9ecef;
55-
border-radius: 10px;
56-
max-width: 100%;
57-
max-height: 100%;
58-
background: #ffffff;
80+
width: 100px;
5981
}
6082

61-
footer {
62-
background-color: #0d6efd;
63-
color: white;
64-
text-align: center;
65-
padding: 10px 0;
66-
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
83+
#side-menu button {
84+
font-size: 12px;
85+
padding: 8px 10px;
6786
}
87+
}
88+
</style>
89+
</head>
90+
<body>
91+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
92+
<div class="container-fluid">
93+
<a class="navbar-brand" href="#">Whiteboard</a>
94+
</div>
95+
</nav>
96+
97+
<div class="d-flex vh-100">
98+
<!-- Sidebar -->
99+
<div id="side-menu">
100+
<button id="pointer-tool" class="active" data-tool="pointer" title="Pointer Tool" onclick="setTool('pointer')">
101+
<i class="fas fa-mouse-pointer"></i>
102+
</button>
103+
<button id="pen-tool" data-tool="pen" title="Pen Tool" onclick="setTool('pen')">
104+
<i class="fas fa-pen"></i>
105+
</button>
106+
<button id="eraser-tool" data-tool="eraser" title="Eraser Tool" onclick="setTool('eraser')">
107+
<i class="fas fa-eraser"></i>
108+
</button>
109+
<button id="text-tool" data-tool="text" title="Add Text" onclick="setTool('text')">
110+
<i class="fas fa-font"></i>
111+
</button>
112+
<button id="line-tool" data-tool="line" title="Draw Line" onclick="setTool('line')">
113+
<i class="fas fa-minus"></i>
114+
</button>
115+
<button id="rectangle-tool" data-tool="rectangle" title="Draw Rectangle" onclick="setTool('rectangle')">
116+
<i class="far fa-square"></i>
117+
</button>
118+
<button id="circle-tool" data-tool="circle" title="Draw Circle" onclick="setTool('circle')">
119+
<i class="far fa-circle"></i>
120+
</button>
121+
<button id="save-button" title="Save Your Work" onclick="saveWork()">
122+
<i class="fas fa-save"></i>
123+
</button>
124+
<button id="upload-button" title="Upload Image" onclick="uploadImage()">
125+
<i class="fas fa-upload"></i>
126+
</button>
127+
<button id="fullscreen-button" title="Toggle Fullscreen" onclick="toggleFullscreen()">
128+
<i class="fas fa-expand"></i>
129+
</button>
130+
131+
</div>
68132

69-
footer i {
70-
color: #ff5252;
71-
margin: 0 5px;
72-
}
73-
</style>
74-
</head>
75-
<body>
76-
<!-- Navigation Bar -->
77-
<nav class="navbar navbar-expand-lg navbar-dark bg-primary p-4">
78-
<div class="container-fluid">
79-
<a class="navbar-brand" href="#">Whiteboard</a>
80-
<button
81-
class="navbar-toggler"
82-
type="button"
83-
data-bs-toggle="collapse"
84-
data-bs-target="#navbarNav"
85-
>
86-
<span class="navbar-toggler-icon"></span>
87-
</button>
88-
<div class="collapse navbar-collapse" id="navbarNav">
89-
<ul class="navbar-nav ms-auto">
90-
<li class="nav-item">
91-
<a href="#" id="fullscreen" class="nav-link" title="Fullscreen">
92-
<i class="fas fa-expand"></i>
93-
</a>
94-
</li>
95-
</ul>
96-
</div>
97-
</div>
98-
</nav>
99-
100-
<!-- Main Layout -->
101-
<div class="container-fluid vh-100 d-flex flex-row">
102-
<!-- Side Menu -->
103-
<div id="side-menu" class="bg-light p-3 h-100">
104-
<!-- Tools Menu -->
105-
<div class="mb-3">
106-
<button id="select-tool" class="btn btn-light w-100 mb-3" title="Select">
107-
<i class="fas fa-mouse-pointer"></i>
108-
</button>
109-
<button id="pen-tool" class="btn btn-light w-100 mb-3" title="Pen">
110-
<i class="fas fa-pen"></i>
111-
</button>
112-
<button id="eraser-tool" class="btn btn-light w-100 mb-3" title="Eraser">
113-
<i class="fas fa-eraser"></i>
114-
</button>
115-
<button id="text-tool" class="btn btn-light w-100 mb-3" title="Add Text">
116-
<i class="fas fa-font"></i>
117-
</button>
133+
<!-- 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">
137+
<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>
118140
</div>
119141

120-
<!-- Shapes Menu -->
121-
<div class="mb-3">
122-
<button id="draw-line" class="btn btn-light w-100 mb-3" title="Draw Line">
123-
<i class="fas fa-minus"></i>
124-
</button>
125-
<button id="draw-rect" class="btn btn-light w-100 mb-3" title="Draw Rectangle">
126-
<i class="far fa-square"></i>
127-
</button>
128-
<button id="draw-circle" class="btn btn-light w-100 mb-3" title="Draw Circle">
129-
<i class="far fa-circle"></i>
130-
</button>
142+
<div id="eraser-options" class="tool-options">
143+
<label>Eraser Size: <input type="range" id="eraser-size" min="2" max="50" value="20"></label>
131144
</div>
132-
</div>
133145

134-
<!-- Content Area -->
135-
<div class="flex-grow-1 d-flex flex-column">
136-
<!-- Controls Section -->
137-
<div id="controls" class="d-flex justify-content-around align-items-center bg-light p-3">
138-
<div>
139-
<label for="color" class="form-label">Brush Color</label>
140-
<input
141-
type="color"
142-
id="color"
143-
class="form-control form-control-color"
144-
value="#000000"
145-
/>
146-
</div>
147-
<div>
148-
<label for="size" class="form-label">Brush Size</label>
149-
<input
150-
type="number"
151-
id="size"
152-
class="form-control"
153-
min="2"
154-
max="50"
155-
value="10"
156-
step="1"
157-
/>
158-
</div>
159-
<button id="clear" class="btn btn-danger">Clear</button>
160-
<button id="save" class="btn btn-success">Save Image</button>
161-
<div>
162-
<label for="upload" class="form-label">Upload Image</label>
163-
<input
164-
type="file"
165-
id="upload"
166-
class="form-control"
167-
accept="image/*"
168-
/>
169-
</div>
146+
<div id="text-options" class="tool-options">
147+
<label>Font Size: <input type="number" id="font-size" value="20" min="10" max="100"></label>
170148
</div>
149+
</div>
171150

172-
<!-- Canvas Section -->
173-
<div class="flex-grow-1 d-flex justify-content-center align-items-center bg-white">
174-
<canvas id="whiteboard"></canvas>
175-
</div>
151+
<!-- Whiteboard Canvas -->
152+
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
153+
<canvas id="whiteboard"></canvas>
176154
</div>
177155
</div>
156+
</div>
178157

179-
<!-- Footer -->
180-
<footer class="mt-5 p-4">
181-
<h5>©<span id="current-year"></span> Whiteboard | Made with
182-
<i class="fas fa-heart"></i> by <a href="https://github.com/skvprogrammer" style="color: black!important;">SKV</a>
183-
</h5></footer>
158+
<footer>
159+
<h6>Whiteboard | Made with ❤️ by <a href="https://github.com/skvprogrammer" style="color:black!important;">SKV</a></h6>
160+
</footer>
184161

185-
<script>
186-
// Set current year in footer
187-
document.getElementById('current-year').textContent = new Date().getFullYear();
188-
189-
// JavaScript to handle tool selection and update background color
190-
const tools = document.querySelectorAll('#select-tool, #pen-tool, #eraser-tool, #draw-line, #draw-rect, #draw-circle, #text-tool');
191-
192-
tools.forEach(tool => {
193-
tool.addEventListener('click', () => {
194-
// Remove the 'selected' class from all buttons
195-
tools.forEach(button => button.classList.remove('selected'));
196-
197-
// Add the 'selected' class to the clicked button
198-
tool.classList.add('selected');
199-
});
200-
});
201-
202-
203-
</script>
204-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
205-
<script src="script.js"></script>
206-
</body>
162+
<script src="script.js"></script>
163+
</body>
207164
</html>

0 commit comments

Comments
 (0)