diff --git a/index.html b/index.html new file mode 100644 index 0000000000..3a43fe69ec --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + Note Scanner & Digitizer + + + +
+

Handwritten Note Scanner

+ + + + +
+ + + +
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000000..6ab7d38d51 --- /dev/null +++ b/script.js @@ -0,0 +1,126 @@ +document.getElementById("imageUpload").addEventListener("change", function(event) { + let file = event.target.files[0]; + if (file) { + let reader = new FileReader(); + reader.onload = function(e) { + processImage(e.target.result); + }; + reader.readAsDataURL(file); + } +}); + +// Process image on button click +document.getElementById("processButton").addEventListener("click", function() { + if (uploadedImage) { + processImage(uploadedImage); + } else { + alert("Please upload an image first!"); + } + }); + +function processImage(imageData) { + let img = new Image(); + img.src = imageData; + img.onload = function() { + let canvas = document.getElementById("canvas"); + let ctx = canvas.getContext("2d"); + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0); + + Tesseract.recognize( + canvas, + 'eng', + { + logger: m => console.log(m) + } + ).then(({ data: { text } }) => { + document.getElementById("outputText").value = text; + }); + }; +} + +// Download PDF +function downloadPDF() { + const { jsPDF } = window.jspdf; + let doc = new jsPDF(); + let text = document.getElementById("outputText").value; + doc.text(text, 10, 10); + doc.save("digitized_notes.pdf"); +} + +// Download Image +function downloadImage() { + let text = document.getElementById("outputText").value; + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + canvas.width = 500; + canvas.height = 200; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.font = "16px Arial"; + ctx.fillText(text, 10, 30); + let link = document.createElement("a"); + link.download = "digitized_notes.png"; + link.href = canvas.toDataURL(); + link.click(); +} + +// Download EPUB +function downloadEPUB() { + let text = document.getElementById("outputText").value; + let blob = new Blob([text], { type: "application/epub+zip" }); + let link = document.createElement("a"); + link.href = URL.createObjectURL(blob); + link.download = "digitized_notes.epub"; + link.click(); +} + +// Bouncing Ball Animation +const canvas = document.getElementById("backgroundCanvas"); +const ctx = canvas.getContext("2d"); +let balls = []; + +function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + } + + window.addEventListener("resize", resizeCanvas); + resizeCanvas(); + +// Create Random Balls +for (let i = 0; i < 10; i++) { + balls.push({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + vx: (Math.random() - 0.5) * 4, + vy: (Math.random() - 0.5) * 4, + radius: Math.random() * 15 + 5, + color: `hsl(${Math.random() * 360}, 100%, 60%)` + }); + } +// Animate Balls +function animate() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + balls.forEach(ball => { + ball.x += ball.vx; + ball.y += ball.vy; + + // Bounce off walls + if (ball.x < 0 || ball.x > canvas.width) ball.vx *= -1; + if (ball.y < 0 || ball.y > canvas.height) ball.vy *= -1; + +// Draw ball + ctx.beginPath(); + ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); + ctx.fillStyle = ball.color; + ctx.fill(); + ctx.closePath(); + }); + + requestAnimationFrame(animate); + } + animate(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000000..62c23f36c3 --- /dev/null +++ b/styles.css @@ -0,0 +1,88 @@ +@font-face { + font-family: 'Aeonik'; + src: url('Aeonik.woff2') format('woff2'), + url('Aeonik.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + } + +/* Dark Mode Background */ +body { + font-family: 'Aeonik', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: #121212; + color: white; + overflow: hidden; + position: relative; +} + +/* Background Canvas for Animation */ +#backgroundCanvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + } + + + .container { + width: 90%; + max-width: 500px; + background: white; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + border-radius: 8px; + } + + h1 { + font-size: 1.5em; + + } + + input { + margin-bottom: 10px; + } + + textarea { + width: 100%; + height: 150px; + margin-top: 10px; + } + + .buttons { + margin-top: 10px; + } + + button { + margin: 5px; + padding: 10px; + border: none; + background: #007BFF; + color: white; + cursor: pointer; + } + + button:hover { + background: #0056b3; + } + + + + + + + + + + + + + +