/
index.html
117 lines (116 loc) · 4.73 KB
/
index.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Notely</title>
</head>
<body>
<div class="container mt-1">
<div class="row">
<div class="col-7">
<input type="file" id="pdfInput" class="form-control mb-3" onchange="loadPDF()">
<div id="pdfViewer">
<iframe id="pdfFrame" width="100%" frameborder="0"></iframe>
</div>
</div>
<div class="col-5">
<div id="editor-container" style="height: 300px;"></div>
<div class="mt-1 mb-1" role="group" aria-label="Drawing Tools">
<button type="button" class="btn btn-outline-info btn-sm" onclick="setDrawingMode('pencil')">Pencil</button>
<button type="button" class="btn btn-outline-warning btn-sm" onclick="setDrawingMode('eraser')">Eraser</button>
<button type="button" class="btn btn-outline-danger btn-sm" onclick="downloadCanvas()">Download</button>
</div>
<div id="canvasContainer" style="overflow: auto; width: 100%;">
<canvas id="drawingCanvas" style="border: 1px solid #ddd; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
<script>
function adjustIFrameHeight() {
var windowHeight = window.innerHeight;
var pdfViewer = document.getElementById('pdfViewer');
var pdfFrame = document.getElementById('pdfFrame');
var pdfViewerRect = pdfViewer.getBoundingClientRect();
// Set the iframe height to the remaining window height
pdfFrame.style.height = (windowHeight - 10 - pdfViewerRect.top) + 'px';
}
// Initial adjustments on page load
window.addEventListener('load', function () {
adjustIFrameHeight();
});
// Adjustments on window resize
window.addEventListener('resize', function () {
adjustIFrameHeight();
});
</script>
<script src="renderer.js"></script>
<script>
const quill = new Quill('#editor-container', {
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': ['#FFFF00','#85E085','#ADD8E6','#FFC0CB','#FF0000'] }], // text color and background color
['bold', 'italic', 'underline', 'strike'], // basic formatting options
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
],
},
});
</script>
<script>
// Initialize fabric.js canvas
var canvas = new fabric.Canvas('drawingCanvas', {
isDrawingMode: true
});
// Function to set drawing mode (pencil or eraser or downloader)
function setDrawingMode(mode) {
if (mode === 'pencil') {
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = 'black'; // Set pencil color
canvas.freeDrawingBrush.width = 1; // Set pencil width
} else if (mode === 'eraser') {
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = 'white'; // Set eraser color (white to erase)
canvas.freeDrawingBrush.width = 40; // Set eraser width
} else {
canvas.isDrawingMode = false; // Disable drawing mode
}
}
// Function to download the canvas as an image
function downloadCanvas() {
var dataURL = canvas.toDataURL({ format: 'png', quality: 1.0 });
var link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas_image.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
<script>
// toggle Dark Mode function
// function toggleDarkMode() {
// document.body.classList.toggle('dark-mode');
// var icon = document.getElementById('modeSwitchIcon');
// icon.classList.toggle('dark-mode');
// if (document.body.classList.contains('dark-mode')) {
// icon.classList.replace('fa-sun', 'fa-moon'); // Change to moon icon in dark mode
// } else {
// icon.classList.replace('fa-moon', 'fa-sun'); // Change back to sun icon in light mode
// }
// }
// function toggleTheme() {
// $('body').toggleClass('dark-mode');
// }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>