From 5094d4330a512ddd51b62cf92fdbafdbc97ef254 Mon Sep 17 00:00:00 2001 From: Ankit Kumar <139707943+Kumar-Ankit07@users.noreply.github.com> Date: Thu, 8 Aug 2024 08:58:05 +0530 Subject: [PATCH 1/3] Added Web_Word_Processor Webpage --- .DS_Store | Bin 51204 -> 57348 bytes Web_Word_Processor/index.html | 305 ++++++++++++++++++++++++++++++++++ Web_Word_Processor/script.js | 116 +++++++++++++ Web_Word_Processor/style.css | 0 4 files changed, 421 insertions(+) create mode 100644 Web_Word_Processor/index.html create mode 100644 Web_Word_Processor/script.js create mode 100644 Web_Word_Processor/style.css diff --git a/.DS_Store b/.DS_Store index 33bab1a64292fe807c7399f9a2d13d70958d9b8b..d6fdee822ce7e9776aa916c89f255c4da4a98b97 100644 GIT binary patch delta 4257 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 Gukyc94P4~_ diff --git a/Web_Word_Processor/index.html b/Web_Word_Processor/index.html new file mode 100644 index 00000000..57f2349c --- /dev/null +++ b/Web_Word_Processor/index.html @@ -0,0 +1,305 @@ + + + + + + WebScribe : Write, Edit, Create – All in Your Browser! + + + + + + + + +
+

Font Family : + +

+

Font Size : + +

+

Text Align : + +

+ +

List Type : + +

+ + + + +

Text Color: + +

+

Background Color: + +

+ + + + + + +
+ +
+
+ Start typing here... +
+
+ + + +
+

Designed by Ankit

+
+ + + + + + + + diff --git a/Web_Word_Processor/script.js b/Web_Word_Processor/script.js new file mode 100644 index 00000000..9c469219 --- /dev/null +++ b/Web_Word_Processor/script.js @@ -0,0 +1,116 @@ +// Initialize Quill editor +function initializeEditor(selector) { + return new Quill(selector, { + theme: 'snow', + modules: { + toolbar: [ + [{ 'font': [] }], + ['bold', 'italic', 'underline'], + [{ 'color': [] }, { 'background': [] }], + [{ 'align': [] }], + ['image'] + ] + } + }); +} + +let editors = []; +editors.push(initializeEditor('#editor-container')); + +// Handle Font Family Change +document.getElementById('font-family').addEventListener('change', function () { + const font = this.value; + const editor = editors[editors.length - 1]; + editor.format('font', font); +}); + +// Handle Background Color Change +document.getElementById('background-color').addEventListener('input', function () { + document.getElementById('editor-container').style.backgroundColor = this.value; +}); + +// Handle Font Color Change +document.getElementById('font-color').addEventListener('input', function () { + const color = this.value; + const editor = editors[editors.length - 1]; + editor.format('color', color); +}); + +// Handle Page Size Change +document.getElementById('page-width').addEventListener('input', function () { + document.getElementById('editor-container').style.width = `${this.value}px`; +}); +document.getElementById('page-height').addEventListener('input', function () { + document.getElementById('editor-container').style.height = `${this.value}px`; +}); + +// Insert Image Functionality +function insertImage() { + const imageUrl = prompt("Enter the URL of the image:"); + if (imageUrl) { + const width = prompt("Enter the image width (px):", "200"); + const height = prompt("Enter the image height (px):", "200"); + + if (width && height) { + const editor = editors[editors.length - 1]; + const range = editor.getSelection(); + const imgHtml = ``; + editor.clipboard.dangerouslyPasteHTML(range.index, imgHtml); + + // Add event listener to resize the image on click + setTimeout(() => { + const imgs = document.querySelectorAll('img'); + imgs.forEach(img => { + img.addEventListener('click', function () { + const newWidth = prompt("Enter new image width (px):", img.width); + const newHeight = prompt("Enter new image height (px):", img.height); + if (newWidth && newHeight) { + img.width = newWidth; + img.height = newHeight; + } + }); + }); + }, 10); // Delay to allow the image to be inserted first + } else { + alert("Image insertion canceled. Please provide valid dimensions."); + } + } +} + +// Export as PDF +function exportPDF() { + editors.forEach((editor, index) => { + const content = editor.root; + html2pdf().from(content).set({ + margin: 1, + filename: `document_sheet_${index + 1}.pdf`, + image: { type: 'jpeg', quality: 0.98 }, + html2canvas: { scale: 2 }, + jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } + }).save(); + }); +} + +// Export as PPT +function exportPPT() { + let pptx = new PptxGenJS(); + editors.forEach((editor, index) => { + let slide = pptx.addSlide(); + slide.addText(editor.root.innerHTML, { x: 0.5, y: 0.5, w: '90%', h: '90%' }); + }); + pptx.writeFile('document.pptx'); +} + +// Add New Sheet Functionality +function addSheet() { + const pageWidth = prompt("Enter the width of the new sheet (px):", 800); + const pageHeight = prompt("Enter the height of the new sheet (px):", 600); + + const newSheet = document.createElement('div'); + newSheet.className = 'editor-container'; + newSheet.style.width = `${pageWidth}px`; + newSheet.style.height = `${pageHeight}px`; + + document.body.appendChild(newSheet); + editors.push(initializeEditor(newSheet)); +} diff --git a/Web_Word_Processor/style.css b/Web_Word_Processor/style.css new file mode 100644 index 00000000..e69de29b From 7e1d072136ce3f40b34dfb6064bfd481247200e4 Mon Sep 17 00:00:00 2001 From: Ankit Kumar <139707943+ankit071105@users.noreply.github.com> Date: Fri, 9 Aug 2024 13:38:41 +0530 Subject: [PATCH 2/3] Delete Web_Word_Processor directory --- Web_Word_Processor/index.html | 305 ---------------------------------- Web_Word_Processor/script.js | 116 ------------- Web_Word_Processor/style.css | 0 3 files changed, 421 deletions(-) delete mode 100644 Web_Word_Processor/index.html delete mode 100644 Web_Word_Processor/script.js delete mode 100644 Web_Word_Processor/style.css diff --git a/Web_Word_Processor/index.html b/Web_Word_Processor/index.html deleted file mode 100644 index 57f2349c..00000000 --- a/Web_Word_Processor/index.html +++ /dev/null @@ -1,305 +0,0 @@ - - - - - - WebScribe : Write, Edit, Create – All in Your Browser! - - - - - - - - -
-

Font Family : - -

-

Font Size : - -

-

Text Align : - -

- -

List Type : - -

- - - - -

Text Color: - -

-

Background Color: - -

- - - - - - -
- -
-
- Start typing here... -
-
- - - -
-

Designed by Ankit

-
- - - - - - - - diff --git a/Web_Word_Processor/script.js b/Web_Word_Processor/script.js deleted file mode 100644 index 9c469219..00000000 --- a/Web_Word_Processor/script.js +++ /dev/null @@ -1,116 +0,0 @@ -// Initialize Quill editor -function initializeEditor(selector) { - return new Quill(selector, { - theme: 'snow', - modules: { - toolbar: [ - [{ 'font': [] }], - ['bold', 'italic', 'underline'], - [{ 'color': [] }, { 'background': [] }], - [{ 'align': [] }], - ['image'] - ] - } - }); -} - -let editors = []; -editors.push(initializeEditor('#editor-container')); - -// Handle Font Family Change -document.getElementById('font-family').addEventListener('change', function () { - const font = this.value; - const editor = editors[editors.length - 1]; - editor.format('font', font); -}); - -// Handle Background Color Change -document.getElementById('background-color').addEventListener('input', function () { - document.getElementById('editor-container').style.backgroundColor = this.value; -}); - -// Handle Font Color Change -document.getElementById('font-color').addEventListener('input', function () { - const color = this.value; - const editor = editors[editors.length - 1]; - editor.format('color', color); -}); - -// Handle Page Size Change -document.getElementById('page-width').addEventListener('input', function () { - document.getElementById('editor-container').style.width = `${this.value}px`; -}); -document.getElementById('page-height').addEventListener('input', function () { - document.getElementById('editor-container').style.height = `${this.value}px`; -}); - -// Insert Image Functionality -function insertImage() { - const imageUrl = prompt("Enter the URL of the image:"); - if (imageUrl) { - const width = prompt("Enter the image width (px):", "200"); - const height = prompt("Enter the image height (px):", "200"); - - if (width && height) { - const editor = editors[editors.length - 1]; - const range = editor.getSelection(); - const imgHtml = ``; - editor.clipboard.dangerouslyPasteHTML(range.index, imgHtml); - - // Add event listener to resize the image on click - setTimeout(() => { - const imgs = document.querySelectorAll('img'); - imgs.forEach(img => { - img.addEventListener('click', function () { - const newWidth = prompt("Enter new image width (px):", img.width); - const newHeight = prompt("Enter new image height (px):", img.height); - if (newWidth && newHeight) { - img.width = newWidth; - img.height = newHeight; - } - }); - }); - }, 10); // Delay to allow the image to be inserted first - } else { - alert("Image insertion canceled. Please provide valid dimensions."); - } - } -} - -// Export as PDF -function exportPDF() { - editors.forEach((editor, index) => { - const content = editor.root; - html2pdf().from(content).set({ - margin: 1, - filename: `document_sheet_${index + 1}.pdf`, - image: { type: 'jpeg', quality: 0.98 }, - html2canvas: { scale: 2 }, - jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } - }).save(); - }); -} - -// Export as PPT -function exportPPT() { - let pptx = new PptxGenJS(); - editors.forEach((editor, index) => { - let slide = pptx.addSlide(); - slide.addText(editor.root.innerHTML, { x: 0.5, y: 0.5, w: '90%', h: '90%' }); - }); - pptx.writeFile('document.pptx'); -} - -// Add New Sheet Functionality -function addSheet() { - const pageWidth = prompt("Enter the width of the new sheet (px):", 800); - const pageHeight = prompt("Enter the height of the new sheet (px):", 600); - - const newSheet = document.createElement('div'); - newSheet.className = 'editor-container'; - newSheet.style.width = `${pageWidth}px`; - newSheet.style.height = `${pageHeight}px`; - - document.body.appendChild(newSheet); - editors.push(initializeEditor(newSheet)); -} diff --git a/Web_Word_Processor/style.css b/Web_Word_Processor/style.css deleted file mode 100644 index e69de29b..00000000 From 4a22cf56f0bb121165e9fbcb17385fc5b57237ce Mon Sep 17 00:00:00 2001 From: Ankit Kumar <139707943+ankit071105@users.noreply.github.com> Date: Fri, 9 Aug 2024 13:43:45 +0530 Subject: [PATCH 3/3] Add files via upload --- Web Word Processor/index.html | 105 ++++++++++++++++++++++++++ Web Word Processor/mainfest.json | 27 +++++++ Web Word Processor/script.js | 125 +++++++++++++++++++++++++++++++ Web Word Processor/style.css | 74 ++++++++++++++++++ 4 files changed, 331 insertions(+) create mode 100644 Web Word Processor/index.html create mode 100644 Web Word Processor/mainfest.json create mode 100644 Web Word Processor/script.js create mode 100644 Web Word Processor/style.css diff --git a/Web Word Processor/index.html b/Web Word Processor/index.html new file mode 100644 index 00000000..e5a9c22c --- /dev/null +++ b/Web Word Processor/index.html @@ -0,0 +1,105 @@ + + + + + + Web Word Processor : Write, Edit, Create – All in Your Browser! + + + + + + + + +
+

Font Family : + +

+

Font Size : + +

+

Text Align : + +

+ +

List Type : + +

+ + + + +

Text Color: + +

+

Background Color: + +

+ + + + + + +
+ +
+
+ Start typing here... +
+
+ + + +
+

Designed by Ankit

+
+ + + + + + + + diff --git a/Web Word Processor/mainfest.json b/Web Word Processor/mainfest.json new file mode 100644 index 00000000..47d5e91c --- /dev/null +++ b/Web Word Processor/mainfest.json @@ -0,0 +1,27 @@ +{ + "name": "Web Word Processor", + "short_name": "Word Processor", + "description": "Write, Edit, Create – All in Your Browser!", + "start_url": "/", + "display": "standalone", + "background_color": "#dffefb", + "theme_color": "#032541", + "orientation": "portrait", + "icons": [ + { + "src": "icons/icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icons/icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "permissions": [ + "image-capture", + "clipboard-write" + ] + } + \ No newline at end of file diff --git a/Web Word Processor/script.js b/Web Word Processor/script.js new file mode 100644 index 00000000..ffd19fb4 --- /dev/null +++ b/Web Word Processor/script.js @@ -0,0 +1,125 @@ + + const editor = document.getElementById('editor'); + + document.getElementById('font-family').addEventListener('change', function() { + document.execCommand('fontName', false, this.value); + }); + + document.getElementById('font-size').addEventListener('change', function() { + document.execCommand('fontSize', false, '7'); + editor.style.fontSize = this.value; + }); + + document.getElementById('text-color').addEventListener('input', function() { + document.execCommand('foreColor', false, this.value); + }); + + document.getElementById('background-color').addEventListener('input', function() { + editor.style.backgroundColor = this.value; + }); + + function addImage() { + document.getElementById('fileInput').click(); + } + + function addSheet() { + const width = prompt("Enter the width of the new sheet in pixels:", "800"); + const height = prompt("Enter the height of the new sheet in pixels:", "1200"); + + if (width && height) { + const newSheet = document.createElement('div'); + newSheet.className = 'editor'; + newSheet.contentEditable = true; + newSheet.innerText = 'Start typing here...'; + newSheet.style.width = width + 'px'; + newSheet.style.height = height + 'px'; + + document.getElementById('editor-container').appendChild(newSheet); + } else { + alert("Invalid input. Please enter numeric values for width and height."); + } + } + document.getElementById('text-align').addEventListener('change', function() { + document.execCommand('justify' + this.value.charAt(0).toUpperCase() + this.value.slice(1)); +}); + +document.getElementById('list-type').addEventListener('change', function() { + const selectedValue = this.value; + if (selectedValue === 'ul') { + document.execCommand('insertUnorderedList'); + } else if (selectedValue === 'ol') { + document.execCommand('insertOrderedList'); + } else if (selectedValue === 'star') { + insertStarList(); + } else { + // Remove any lists + document.execCommand('insertUnorderedList'); + document.execCommand('insertOrderedList'); + } +}); + +function insertStarList() { + // Custom function to insert a star list + const selection = window.getSelection(); + const range = selection.getRangeAt(0); + const ul = document.createElement('ul'); + ul.style.listStyleType = 'none'; // Remove default list styling + + const items = ['★ Item 1', '★ Item 2', '★ Item 3']; // Example star list items + items.forEach(text => { + const li = document.createElement('li'); + li.innerText = text; + ul.appendChild(li); + }); + + range.deleteContents(); // Remove selected text if any + range.insertNode(ul); // Insert the new list +} + + function handleFileSelect(event) { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = function(e) { + const img = document.createElement('img'); + img.src = e.target.result; + img.style.maxWidth = '100%'; + editor.appendChild(img); + } + reader.readAsDataURL(file); + } + } + + function exportPDF() { + const { jsPDF } = window.jspdf; + const doc = new jsPDF({ + orientation: 'portrait', + unit: 'pt', + format: [800, 1200] + }); + + doc.html(editor, { + callback: function(doc) { + doc.save('document.pdf'); + }, + x: 0, + y: 0, + html2canvas: { scale: 1 } + }); + } + + function exportImage(format) { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + canvas.width = editor.offsetWidth; + canvas.height = editor.offsetHeight; + ctx.fillStyle = getComputedStyle(editor).backgroundColor; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + html2canvas(editor).then(canvas => { + const link = document.createElement('a'); + link.href = canvas.toDataURL('image/' + format); + link.download = 'document.' + format; + link.click(); + }); + } diff --git a/Web Word Processor/style.css b/Web Word Processor/style.css new file mode 100644 index 00000000..c3c896e4 --- /dev/null +++ b/Web Word Processor/style.css @@ -0,0 +1,74 @@ +h1{ + text-align: center; + background-image: url('https://ideogram.ai/assets/progressive-image/balanced/response/QX_ULN1yRi6Y38LgVobpPw'); + background-size: contain; -webkit-background-clip: text; -webkit-text-fill-color: transparent; + font-size: 3rem !important; +} + body { + font-family: serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #dffefb; + color: #333; + } + nav { + background-color: #032541; + color: #fff; + padding: 10px 20px; + text-align: center; + } + nav h1 { + margin: 0; + font-size: 24px; + } + #toolbar { + display: flex; + justify-content: center; + flex-wrap: wrap; + background-color: #e4f0fb; + padding: 30px; + margin-bottom: 30px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + .tool { + margin-bottom: 30px; + margin-right: 20px; + padding: 10px; + } + #editor-container { + display: flex; + flex-direction: column; /* Stack sheets vertically */ + align-items: center; /* Center align sheets horizontally */ + margin: 20px auto; + } + .editor { + width: 800px; + height: 1200px; + border: 1px solid #ccc; + padding: 20px; + background-color: #fff; /* Default white background for new sheets */ + color: #000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + margin: 10px 0; /* Space between sheets */ + font-family: 'Poppins', sans-serif; + box-sizing: border-box; /* Ensure padding and border are included in width and height */ + } + footer { + background-color: #0a2848; + color: #fff; + padding: 20px; + text-align: center; + } + footer p { + margin: 0; + font-size: 14px; + } + h3 { + color: #21558d; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + margin-right: 10px; + } + h1 { + padding: 30px; + } \ No newline at end of file