Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebScribe : Write, Edit, Create – All in Your Browser! #2619

Merged
merged 3 commits into from
Aug 9, 2024
+331 −0
Merged

WebScribe : Write, Edit, Create – All in Your Browser! #2619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5094d43
Added Web_Word_Processor Webpage
ankit071105 Aug 8, 2024
7e1d072
Delete Web_Word_Processor directory
ankit071105 Aug 9, 2024
4a22cf5
Add files via upload
ankit071105 Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .DS_Store
View file
Open in desktop
Binary file not shown.
105 changes: 105 additions & 0 deletions Web Word Processor/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}
Loading