Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
@@ -33,7 +33,8 @@ export default function LandingPage() {
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "PDF Editor", id: "pdf-editor" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -45,7 +46,7 @@ export default function LandingPage() {
|
||||
background={{ variant: "plain" }}
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-vector/digital-web-cloud-computing-background-online-data-transfer_1017-56177.jpg", alt: "pdf upload document icon illustration" }]}
|
||||
buttons={[
|
||||
{ text: "Upload PDF", href: "#features" },
|
||||
{ text: "Upload PDF", href: "/pdf-editor" },
|
||||
{ text: "Learn More", href: "#faq" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -112,7 +113,7 @@ export default function LandingPage() {
|
||||
text="अभी शुरू करें - अपना PDF संपादित करें"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "PDF अपलोड करें", href: "#hero" },
|
||||
{ text: "PDF अपलोड करें", href: "/pdf-editor" },
|
||||
{ text: "हमसे संपर्क करें", href: "mailto:support@pdfedit.in" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
|
||||
275
src/app/pdf-editor/page.tsx
Normal file
275
src/app/pdf-editor/page.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Bold, Italic, Underline, Download } from "lucide-react";
|
||||
|
||||
export default function PDFEditorPage() {
|
||||
const [pdfLoaded, setPdfLoaded] = useState(false);
|
||||
const [editingEnabled, setEditingEnabled] = useState(false);
|
||||
const [selectedText, setSelectedText] = useState<HTMLElement | null>(null);
|
||||
const [fontFamily, setFontFamily] = useState("Arial");
|
||||
const [fontSize, setFontSize] = useState("14");
|
||||
const [textColor, setTextColor] = useState("#000000");
|
||||
const [isBold, setIsBold] = useState(false);
|
||||
const [isItalic, setIsItalic] = useState(false);
|
||||
const [isUnderline, setIsUnderline] = useState(false);
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file && file.type === "application/pdf") {
|
||||
// Simulating PDF loading - in production, use PDF.js library
|
||||
setPdfLoaded(true);
|
||||
setEditingEnabled(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTextSelection = () => {
|
||||
const selection = window.getSelection();
|
||||
if (selection && selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
const container = document.createElement("span");
|
||||
range.surroundContents(container);
|
||||
setSelectedText(container);
|
||||
}
|
||||
};
|
||||
|
||||
const applyFormatting = () => {
|
||||
if (selectedText) {
|
||||
selectedText.style.fontFamily = fontFamily;
|
||||
selectedText.style.fontSize = `${fontSize}px`;
|
||||
selectedText.style.color = textColor;
|
||||
if (isBold) selectedText.style.fontWeight = "bold";
|
||||
if (isItalic) selectedText.style.fontStyle = "italic";
|
||||
if (isUnderline) selectedText.style.textDecoration = "underline";
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
// Simulating PDF download - in production, use PDF generation library
|
||||
const link = document.createElement("a");
|
||||
link.href = "#";
|
||||
link.download = "edited-document.pdf";
|
||||
link.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="PDFEdit India"
|
||||
bottomLeftText="Free PDF Editor"
|
||||
bottomRightText="support@pdfedit.in"
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-background p-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Upload Section */}
|
||||
{!pdfLoaded && (
|
||||
<div className="flex flex-col items-center justify-center gap-6 py-16">
|
||||
<h1 className="text-4xl font-bold text-foreground">Upload Your PDF</h1>
|
||||
<p className="text-lg text-foreground/70">Edit text while maintaining the original font</p>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition"
|
||||
>
|
||||
Choose PDF File
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PDF Editor Section */}
|
||||
{pdfLoaded && editingEnabled && (
|
||||
<div className="space-y-6">
|
||||
{/* Toolbar */}
|
||||
<div className="bg-card border border-accent rounded-lg p-4 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Font Family Selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Font Family
|
||||
</label>
|
||||
<select
|
||||
value={fontFamily}
|
||||
onChange={(e) => {
|
||||
setFontFamily(e.target.value);
|
||||
applyFormatting();
|
||||
}}
|
||||
className="w-full px-3 py-2 border border-accent rounded-md bg-background text-foreground"
|
||||
>
|
||||
<option>Arial</option>
|
||||
<option>Helvetica</option>
|
||||
<option>Times New Roman</option>
|
||||
<option>Georgia</option>
|
||||
<option>Courier New</option>
|
||||
<option>Verdana</option>
|
||||
<option>Comic Sans MS</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Font Size Dropdown */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Font Size
|
||||
</label>
|
||||
<select
|
||||
value={fontSize}
|
||||
onChange={(e) => {
|
||||
setFontSize(e.target.value);
|
||||
applyFormatting();
|
||||
}}
|
||||
className="w-full px-3 py-2 border border-accent rounded-md bg-background text-foreground"
|
||||
>
|
||||
<option>10</option>
|
||||
<option>12</option>
|
||||
<option>14</option>
|
||||
<option>16</option>
|
||||
<option>18</option>
|
||||
<option>20</option>
|
||||
<option>24</option>
|
||||
<option>28</option>
|
||||
<option>32</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Text Color Picker */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Text Color
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={textColor}
|
||||
onChange={(e) => {
|
||||
setTextColor(e.target.value);
|
||||
applyFormatting();
|
||||
}}
|
||||
className="w-full h-10 border border-accent rounded-md cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-foreground">{textColor}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text Formatting Buttons */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsBold(!isBold);
|
||||
applyFormatting();
|
||||
}}
|
||||
className={`p-2 rounded-md border transition flex items-center gap-1 ${
|
||||
isBold
|
||||
? "bg-primary-cta text-white border-primary-cta"
|
||||
: "border-accent hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
<Bold size={18} />
|
||||
<span>Bold</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsItalic(!isItalic);
|
||||
applyFormatting();
|
||||
}}
|
||||
className={`p-2 rounded-md border transition flex items-center gap-1 ${
|
||||
isItalic
|
||||
? "bg-primary-cta text-white border-primary-cta"
|
||||
: "border-accent hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
<Italic size={18} />
|
||||
<span>Italic</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsUnderline(!isUnderline);
|
||||
applyFormatting();
|
||||
}}
|
||||
className={`p-2 rounded-md border transition flex items-center gap-1 ${
|
||||
isUnderline
|
||||
? "bg-primary-cta text-white border-primary-cta"
|
||||
: "border-accent hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
<Underline size={18} />
|
||||
<span>Underline</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="p-2 rounded-md border border-accent hover:bg-accent transition flex items-center gap-1 ml-auto"
|
||||
>
|
||||
<Download size={18} />
|
||||
<span>Download PDF</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PDF Canvas Area */}
|
||||
<div
|
||||
ref={canvasRef}
|
||||
className="bg-white border-2 border-accent rounded-lg p-8 min-h-96 max-h-96 overflow-auto"
|
||||
onMouseUp={handleTextSelection}
|
||||
>
|
||||
<div className="text-foreground leading-relaxed">
|
||||
<p className="mb-4 text-base font-normal">Your PDF content will appear here for editing.</p>
|
||||
<p className="mb-4 text-base font-normal">Select any text to apply formatting changes.</p>
|
||||
<p className="text-base font-normal">The original font will be maintained while you edit the text.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-card border border-accent rounded-lg p-4">
|
||||
<h3 className="font-bold text-foreground mb-2">How to Edit:</h3>
|
||||
<ul className="text-foreground/70 space-y-1 text-sm">
|
||||
<li>✓ Select text in the PDF area above</li>
|
||||
<li>✓ Use the toolbar to change font, size, color, and formatting</li>
|
||||
<li>✓ Original font family is preserved for consistent appearance</li>
|
||||
<li>✓ Download your edited PDF when done</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="PDFEdit India"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user