<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Interactive Whiteboard</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f4f4;
overflow: hidden;
}
#whiteboard {
border: 2px solid #333;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
color: #fff;
padding: 15px;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.toolbar button, .toolbar select, .toolbar input {
margin: 0 5px;
padding: 8px;
border: none;
border-radius: 5px;
background: #555;
color: #fff;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.toolbar button:hover, .toolbar select:hover, .toolbar input:hover {
background: #666;
}
.toolbar button:active {
transform: scale(0.95);
}
#typingSection {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #444;
color: #fff;
padding: 15px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
}
#typingBox {
width: 100%;
height: 100px;
border-radius: 5px;
border: 1px solid #555;
padding: 10px;
font-size: 16px;
color: #333;
}
#textBoxContainer {
position: absolute;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
}
.text-box {
position: absolute;
background: rgba(255, 255, 255, 0.8);
color: #000;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
pointer-events: auto;
overflow: hidden;
min-width: 100px;
min-height: 30px;
padding: 5px;
}
#wikipediaModal, #calculatorModal, #liveCodeModal, #assistantModal, #financeModal, #macroNepalModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 3;
justify-content: center;
align-items: center;
}
#wikipediaContent, #calculatorContent, #liveCodeContent, #assistantContent, #financeContent, #macroNepalContent {
background: #fff;
padding: 20px;
border-radius: 10px;
position: relative;
max-width: 100%;
max-height: 900px;
overflow: auto;
animation: fadeIn 0.5s ease-out;
}
iframe {
width: 100%;
height: 900px;
border: none;
border-radius: 10px;
}
textarea {
width: 100%;
height: 200px;
border-radius: 5px;
border: 1px solid #555;
padding: 10px;
font-size: 16px;
color: #333;
resize: none;
}
button {
margin: 5px;
padding: 10px;
border: none;
border-radius: 5px;
background: #555;
color: #fff;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
button:hover {
background: #666;
}
button:active {
transform: scale(0.95);
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: “”;
height: 26px;
width: 26px;
border-radius: 50%;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<!– Login Modal –>
<div id=”loginModal”>
<div id=”loginContent”>
<h2>Login</h2>
<input type=”password” id=”password” placeholder=”Enter password”>
<button onclick=”login()”>Login</button>
</div>
</div>
<!– Toolbar –>
<div class=”toolbar”>
<button id=”pen” title=”Pen”>Pen</button>
<button id=”eraser” title=”Eraser”>Eraser</button>
<input type=”color” id=”colorPicker” title=”Select Pen Color”>
<select id=”penSize” title=”Select Pen Size”>
<option value=”5″>Small</option>
<option value=”10″>Medium</option>
<option value=”15″>Large</option>
</select>
<select id=”eraserSize” title=”Select Eraser Size”>
<option value=”15″>Small</option>
<option value=”30″>Medium</option>
<option value=”45″>Large</option>
</select>
<button id=”undo” title=”Undo”>Undo</button>
<button id=”redo” title=”Redo”>Redo</button>
<button id=”clear” title=”Clear”>Clear</button>
<button id=”save” title=”Save”>Save</button>
<button id=”load” title=”Load”>Load</button>
<button id=”wikipedia” title=”Wikipedia” onclick=”openWikipedia()”>Wikipedia</button>
<button id=”calculator” title=”Calculator” onclick=”openCalculator()”>Calculator</button>
<button id=”liveCode” title=”Live Code” onclick=”openLiveCode()”>Live Code</button>
<button id=”assistant” title=”Assistant” onclick=”openAssistant()”>Assistant</button>
<button id=”finance” title=”Finance” onclick=”openFinance()”>Finance</button>
<button id=”macroNepal” title=”Macro Nepal” onclick=”openMacroNepal()”>Macro Nepal</button>
<label class=”switch”>
<input type=”checkbox” id=”onOffSwitch” onchange=”toggleSwitch()”>
<span class=”slider”></span>
</label>
</div>
<!– Typing Section –>
<div id=”typingSection”>
<textarea id=”typingBox” placeholder=”Type your text here…”></textarea>
<button onclick=”addText()”>Add Text to Whiteboard</button>
<select id=”languageSelect”>
<option value=”en”>English</option>
<option value=”es”>Spanish</option>
<option value=”fr”>French</option>
<option value=”de”>German</option>
<option value=”ne”>Nepali</option>
</select>
<button onclick=”translateText()”>Translate</button>
</div>
<!– Whiteboard –>
<canvas id=”whiteboard”></canvas>
<!– Wikipedia Modal –>
<div id=”wikipediaModal”>
<div id=”wikipediaContent”>
<iframe src=”https://en.wikipedia.org” frameborder=”0″></iframe>
</div>
</div>
<!– Calculator Modal –>
<div id=”calculatorModal”>
<div id=”calculatorContent”>
<input type=”text” id=”calculatorDisplay” readonly>
<button onclick=”appendToCalculator(‘1’)”>1</button>
<button onclick=”appendToCalculator(‘2’)”>2</button>
<button onclick=”appendToCalculator(‘3’)”>3</button>
<button onclick=”appendToCalculator(‘/’)”>/</button>
<button onclick=”appendToCalculator(‘4’)”>4</button>
<button onclick=”appendToCalculator(‘5’)”>5</button>
<button onclick=”appendToCalculator(‘6’)”>6</button>
<button onclick=”appendToCalculator(‘*’)”>*</button>
<button onclick=”appendToCalculator(‘7’)”>7</button>
<button onclick=”appendToCalculator(‘8’)”>8</button>
<button onclick=”appendToCalculator(‘9’)”>9</button>
<button onclick=”appendToCalculator(‘-‘)”>-</button>
<button onclick=”appendToCalculator(‘0’)”>0</button>
<button onclick=”appendToCalculator(‘.’)”>.</button>
<button onclick=”calculateResult()”>=</button>
<button onclick=”appendToCalculator(‘+’)”>+</button>
<button onclick=”clearCalculator()”>C</button>
</div>
</div>
<!– Live Code Modal –>
<div id=”liveCodeModal”>
<div id=”liveCodeContent”>
<textarea id=”liveCodeEditor” placeholder=”Write your code here…”></textarea>
<button onclick=”runCode()”>Run Code</button>
</div>
</div>
<!– Assistant Modal –>
<div id=”assistantModal”>
<div id=”assistantContent”>
<input type=”text” id=”assistantInput” placeholder=”Ask the assistant…”>
<button onclick=”handleAssistantQuery()”>Submit</button>
</div>
</div>
<!– Finance Modal –>
<div id=”financeModal”>
<div id=”financeContent”>
<iframe src=”https://www.bloomberg.com” frameborder=”0″></iframe>
</div>
</div>
<!– Macro Nepal Modal –>
<div id=”macroNepalModal”>
<div id=”macroNepalContent”>
<iframe src=”https://www.macronepal.com/” frameborder=”0″></iframe>
</div>
</div>
<script>
const canvas = document.getElementById(‘whiteboard’);
const ctx = canvas.getContext(‘2d’);
let painting = false;
let eraserMode = false;
let penColor = ‘#000000’;
let penSize = 5;
let eraserSize = 15;
const history = [];
const redoStack = [];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener(‘mousedown’, (e) => {
painting = true;
ctx.beginPath();
ctx.moveTo(e.clientX – canvas.offsetLeft, e.clientY – canvas.offsetTop);
});
canvas.addEventListener(‘mouseup’, () => {
painting = false;
ctx.closePath();
history.push(canvas.toDataURL());
redoStack.length = 0; // Clear redo stack on new action
});
canvas.addEventListener(‘mousemove’, (e) => {
if (painting) {
ctx.lineWidth = eraserMode ? eraserSize : penSize;
ctx.lineCap = ’round’;
ctx.strokeStyle = eraserMode ? ‘white’ : penColor;
ctx.lineTo(e.clientX – canvas.offsetLeft, e.clientY – canvas.offsetTop);
ctx.stroke();
}
});
document.getElementById(‘pen’).addEventListener(‘click’, () => {
eraserMode = false;
});
document.getElementById(‘eraser’).addEventListener(‘click’, () => {
eraserMode = true;
});
document.getElementById(‘colorPicker’).addEventListener(‘input’, (e) => {
penColor = e.target.value;
});
document.getElementById(‘penSize’).addEventListener(‘change’, (e) => {
penSize = parseInt(e.target.value);
});
document.getElementById(‘eraserSize’).addEventListener(‘change’, (e) => {
eraserSize = parseInt(e.target.value);
});
function undo() {
if (history.length) {
redoStack.push(canvas.toDataURL());
const img = new Image();
img.src = history.pop();
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
};
}
}
function redo() {
if (redoStack.length) {
history.push(canvas.toDataURL());
const img = new Image();
img.src = redoStack.pop();
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
};
}
}
function clearBoard() {
if (confirm(‘Are you sure you want to clear the board?’)) {
history.push(canvas.toDataURL());
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
function saveBoard() {
const link = document.createElement(‘a’);
link.href = canvas.toDataURL();
link.download = ‘whiteboard.png’;
link.click();
}
function loadBoard() {
const input = document.createElement(‘input’);
input.type = ‘file’;
input.accept = ‘image/*’;
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = () => {
const img = new Image();
img.src = reader.result;
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
};
};
reader.readAsDataURL(file);
};
input.click();
}
document.getElementById(‘save’).addEventListener(‘click’, saveBoard);
document.getElementById(‘load’).addEventListener(‘click’, loadBoard);
document.getElementById(‘undo’).addEventListener(‘click’, undo);
document.getElementById(‘redo’).addEventListener(‘click’, redo);
document.getElementById(‘clear’).addEventListener(‘click’, clearBoard);
function login() {
const password = document.getElementById(‘password’).value;
if (password === ‘123’) {
document.getElementById(‘loginModal’).style.display = ‘none’;
document.getElementById(‘whiteboard’).style.display = ‘block’;
document.querySelector(‘.toolbar’).style.display = ‘flex’;
document.getElementById(‘typingSection’).style.display = ‘flex’;
document.getElementById(‘infoBar’).style.display = ‘block’;
} else {
alert(‘Invalid password’);
}
}
function openWikipedia() {
document.getElementById(‘wikipediaModal’).style.display = ‘flex’;
}
function openCalculator() {
document.getElementById(‘calculatorModal’).style.display = ‘flex’;
}
function openLiveCode() {
document.getElementById(‘liveCodeModal’).style.display = ‘flex’;
}
function openAssistant() {
document.getElementById(‘assistantModal’).style.display = ‘flex’;
}
function openFinance() {
document.getElementById(‘financeModal’).style.display = ‘flex’;
}
function openMacroNepal() {
document.getElementById(‘macroNepalModal’).style.display = ‘flex’;
}
function toggleSwitch() {
const switchInput = document.getElementById(‘onOffSwitch’);
if (switchInput.checked) {
document.getElementById(‘whiteboard’).style.display = ‘none’;
document.querySelector(‘.toolbar’).style.display = ‘none’;
document.getElementById(‘typingSection’).style.display = ‘none’;
} else {
document.getElementById(‘whiteboard’).style.display = ‘block’;
document.querySelector(‘.toolbar’).style.display = ‘flex’;
document.getElementById(‘typingSection’).style.display = ‘flex’;
}
}
window.onclick = function(event) {
if (event.target == document.getElementById(‘wikipediaModal’) ||
event.target == document.getElementById(‘calculatorModal’) ||
event.target == document.getElementById(‘liveCodeModal’) ||
event.target == document.getElementById(‘assistantModal’) ||
event.target == document.getElementById(‘financeModal’) ||
event.target == document.getElementById(‘macroNepalModal’)) {
event.target.style.display = ‘none’;
}
}
function appendToCalculator(value) {
const display = document.getElementById(‘calculatorDisplay’);
display.value += value;
}
function calculateResult() {
const display = document.getElementById(‘calculatorDisplay’);
try {
display.value = eval(display.value);
} catch {
display.value = ‘Error’;
}
}
function clearCalculator() {
document.getElementById(‘calculatorDisplay’).value = ”;
}
function runCode() {
const code = document.getElementById(‘liveCodeEditor’).value;
const iframe = document.createElement(‘iframe’);
iframe.style.width = ‘100%’;
iframe.style.height = ‘600px’;
iframe.style.border = ‘none’;
document.body.appendChild(iframe);
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(code);
doc.close();
}
function handleAssistantQuery() {
const query = document.getElementById(‘assistantInput’).value;
alert(‘Handling assistant query:\n’ + query);
}
function addText() {
const text = document.getElementById(‘typingBox’).value;
const x = 50;
const y = 50;
const textBox = document.createElement(‘textarea’);
textBox.className = ‘text-box’;
textBox.value = text;
textBox.style.left = `${x}px`;
textBox.style.top = `${y}px`;
document.getElementById(‘textBoxContainer’).appendChild(textBox);
document.getElementById(‘typingBox’).value = ”;
}
async function translateText() {
const text = document.getElementById(‘typingBox’).value;
const targetLang = document.getElementById(‘languageSelect’).value;
const response = await fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=en|${targetLang}`);
const data = await response.json();
document.getElementById(‘typingBox’).value = data.responseData.translatedText;
}
</script>
</body>
</html>