From a14e62d2a7ed77c9b8440a0eb3ecb513a135c87d Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 18:26:56 +0300 Subject: [PATCH 01/10] initial commit --- index.html | 25 ++++++++++++++++++++ script.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 158 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000000..7ff30e3bc4 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + Note Scanner & Digitizer + + + +
+

Handwritten Note Scanner

+ + + +
+ + + +
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000000..abd0021a0f --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +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); + } +}); + +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(); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000000..d57256b031 --- /dev/null +++ b/styles.css @@ -0,0 +1,64 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: #f4f4f4; + } + + .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; + } + + + + + + + + + + + + + + From 5cd1e4d9e683136bf9d8b50f7c10b73845f9f692 Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 19:06:20 +0300 Subject: [PATCH 02/10] added process image button --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 7ff30e3bc4..3a43fe69ec 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@

Handwritten Note Scanner

+
From 2e07748c29e89342ea59cca174385ab4cf8a5ec6 Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 19:12:23 +0300 Subject: [PATCH 03/10] Changed background to darkmode --- styles.css | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/styles.css b/styles.css index d57256b031..5c10fde38b 100644 --- a/styles.css +++ b/styles.css @@ -1,12 +1,26 @@ +/* Dark Mode Background */ body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - background: #f4f4f4; - } + font-family: Arial, 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%; From 5918f08d71929220abc11aa02d4a2abe52ee3240 Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 19:14:29 +0300 Subject: [PATCH 04/10] bug fix --- styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 5c10fde38b..c1db0a2055 100644 --- a/styles.css +++ b/styles.css @@ -10,6 +10,7 @@ body { color: white; overflow: hidden; position: relative; +} /* Background Canvas for Animation */ #backgroundCanvas { @@ -20,7 +21,7 @@ body { height: 100%; z-index: -1; } - + .container { width: 90%; From 9cc6cd31b90b062d71957667a1c075eef016114d Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 19:57:59 +0300 Subject: [PATCH 05/10] bug fix --- script.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 5 ++++- 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index abd0021a0f..6ab7d38d51 100644 --- a/script.js +++ b/script.js @@ -9,6 +9,15 @@ document.getElementById("imageUpload").addEventListener("change", function(event } }); +// 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; @@ -67,3 +76,51 @@ function downloadEPUB() { 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 index c1db0a2055..b015c86d54 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,8 @@ +@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap'); + /* Dark Mode Background */ body { - font-family: Arial, sans-serif; + font-family: 'Caveat', cursive; display: flex; justify-content: center; align-items: center; @@ -35,6 +37,7 @@ body { h1 { font-size: 1.5em; + color:white; } input { From 267bd0ecb9e05e9f41c02033be44a70130fb71d0 Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 20:00:27 +0300 Subject: [PATCH 06/10] update --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index b015c86d54..64448adfab 100644 --- a/styles.css +++ b/styles.css @@ -8,7 +8,7 @@ body { align-items: center; height: 100vh; margin: 0; - background: #121212; + background: #fff; color: white; overflow: hidden; position: relative; From 54a42869234ab6b9dc1c5b18047f106418ab39f6 Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 20:02:44 +0300 Subject: [PATCH 07/10] update --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 64448adfab..b015c86d54 100644 --- a/styles.css +++ b/styles.css @@ -8,7 +8,7 @@ body { align-items: center; height: 100vh; margin: 0; - background: #fff; + background: #121212; color: white; overflow: hidden; position: relative; From 703bf015c32ba3d61a8319bcf6dd3ef5bb32dd3f Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 20:14:01 +0300 Subject: [PATCH 08/10] fix --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index b015c86d54..0f6afa7808 100644 --- a/styles.css +++ b/styles.css @@ -37,7 +37,7 @@ body { h1 { font-size: 1.5em; - color:white; + } input { From 87ec71127039c36a40ac9186db3e3b8c91d70393 Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 20:56:08 +0300 Subject: [PATCH 09/10] font updatw --- styles.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 0f6afa7808..62c23f36c3 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,14 @@ -@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap'); +@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: 'Caveat', cursive; + font-family: 'Aeonik', sans-serif; display: flex; justify-content: center; align-items: center; From 1ef0afd5daa458813a085fb146b63d45e362bebb Mon Sep 17 00:00:00 2001 From: Cdr_Stone <32543950+StoneRigha@users.noreply.github.com> Date: Tue, 11 Feb 2025 20:56:15 +0300 Subject: [PATCH 10/10] font updatw