Skip to content

Commit

Permalink
Merge pull request #2619 from ankit071105/master
Browse files Browse the repository at this point in the history 
WebScribe : Write, Edit, Create – All in Your Browser!
  • Loading branch information
@Sulagna-Dutta-Roy
Sulagna-Dutta-Roy authored Aug 9, 2024
2 parents fe2181a + 4a22cf5 commit f2f5b68
Show file tree
Hide file tree
Showing 5 changed files with 331 additions and 0 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
105 changes: 105 additions & 0 deletions Web Word Processor/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Word Processor : Write, Edit, Create – All in Your Browser!</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&family=Roboto:wght@300;400;700&family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="https://ideogram.ai/assets/progressive-image/balanced/response/EX_ckMruS6aULr-KIK0fNA" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<h1><img src="https://ideogram.ai/assets/progressive-image/balanced/response/RUcWFKmdSiyYVKIBJOYnGg" alt="" style="width: 100%; height: 20%;"> Write, Edit, Create – All in Your Browser!</h1>
</nav>

<div id="toolbar">
<h3> Font Family :
<select id="font-family" class="tool">
<option value="Poppins">Poppins</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Roboto">Roboto</option>
<option value="Montserrat">Montserrat</option>
<option value="Times New Roman">Times New Roman</option>
<option value="cursive">Cursive</option>
<option value="monospace">Monospace</option>
<option value="serif">Serif</option>
<option value="'Courier New', Courier, monospace">'Courier New', Courier, monospace</option>
<option value="'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif</option>
<option value="Georgia, 'Times New Roman', Times, serif">Georgia, 'Times New Roman', Times, serif</option>
<option value="fantasy">Fantasy</option>
<option value="Verdana, Geneva, Tahoma, sans-serif">Verdana, Geneva, Tahoma, sans-serif</option>
<option value="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif">System UI, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif</option>
</select>
</h3>
<h3> Font Size :
<select id="font-size" class="tool">
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
<option value="28px">28px</option>
<option value="32px">32px</option>
<option value="36px">36px</option>
<option value="40px">40px</option>
<option value="42px">42px</option>
<option value="48px">48px</option>
</select>
</h3>
<h3> Text Align :
<select id="text-align" class="tool">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</h3>

<h3> List Type :
<select id="list-type" class="tool">
<option value="">None</option>
<option value="ul">Bullet Points</option>
<option value="ol">Numbered List</option>
<option value="star">Star List</option>
</select>
</h3>
<button class="tool" onclick="document.execCommand('bold')">Bold</button>
<button class="tool" onclick="document.execCommand('italic')">Italic</button>
<button class="tool" onclick="document.execCommand('underline')">Underline</button>

<h3>Text Color:
<input type="color" id="text-color" class="tool" title="Text Color" style="height: 40px;">
</h3>
<h3>Background Color:
<input type="color" id="background-color" class="tool" title="Background Color" style="height: 40px;">
</h3>

<button class="tool" onclick="addImage()">Add Image</button>
<button class="tool" onclick="addSheet()">Add Sheet</button>
<button class="tool" onclick="exportPDF()">Export as PDF</button>
<button class="tool" onclick="exportImage('jpeg')">Export as JPEG</button>
<button class="tool" onclick="exportImage('png')">Export as PNG</button>
</div>

<div id="editor-container">
<div id="editor" class="editor" contenteditable="true">
Start typing here...
</div>
</div>

<input type="file" id="fileInput" style="display:none" accept="image/*" onchange="handleFileSelect(event)">

<footer>
<p>Designed by Ankit</p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.6.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions Web Word Processor/mainfest.json
View file
Original file line number Diff line number Diff line change
@@ -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"
]
}

125 changes: 125 additions & 0 deletions Web Word Processor/script.js
View file
Original file line number Diff line number Diff line change
@@ -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();
});
}
74 changes: 74 additions & 0 deletions Web Word Processor/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit f2f5b68

Please sign in to comment.