diff --git a/.DS_Store b/.DS_Store index 33bab1a6..d6fdee82 100644 Binary files a/.DS_Store and b/.DS_Store differ 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... +
+
+ + + + + + + + + + + + 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