diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 869b170..be524a0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { Toolbar } from './components/Toolbar';
import { InspectorPanel } from './components/InspectorPanel';
import type { InspectorTab } from './components/InspectorPanel';
import { SignatureModal } from './components/SignatureModal';
+import { AboutModal } from './components/AboutModal';
import { ToastViewport } from './components/ui';
import { CustomConfirmationModal } from './components/custom/CustomConfirmationModal';
import type { CustomConfirmationOptions } from './components/custom/CustomConfirmationModal';
@@ -55,6 +56,7 @@ function App() {
// Tool aux state
const [pendingSignature, setPendingSignature] = useState<{ url: string; aspect: number } | null>(null);
const [signatureModalOpen, setSignatureModalOpen] = useState(false);
+ const [aboutModalOpen, setAboutModalOpen] = useState(false);
const [activeStamp, setActiveStamp] = useState<{ label: string; color: string } | null>(null);
const [confirmState, setConfirmState] = useState<(CustomConfirmationOptions & { onConfirm: () => void }) | null>(null);
@@ -439,6 +441,7 @@ function App() {
onToolChange={setActiveTool}
hasSignature={!!pendingSignature}
onOpenSignature={() => setSignatureModalOpen(true)}
+ onOpenAbout={() => setAboutModalOpen(true)}
/>
@@ -542,6 +545,11 @@ function App() {
toast('Signature ready — click on the page to place it', 'info');
}}
/>
+
+
setAboutModalOpen(false)}
+ />
setConfirmState(null)} />
diff --git a/frontend/src/components/AboutModal.tsx b/frontend/src/components/AboutModal.tsx
new file mode 100644
index 0000000..77f39a7
--- /dev/null
+++ b/frontend/src/components/AboutModal.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from 'react';
+import { XIcon } from './icons';
+
+interface AboutModalProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+export const AboutModal: React.FC = ({ open, onClose }) => {
+ const modalRef = useRef(null);
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && open) onClose();
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [open, onClose]);
+
+ useEffect(() => {
+ if (open) {
+ modalRef.current?.focus();
+ }
+ }, [open]);
+
+ if (!open) return null;
+
+ return (
+
+
+
+
+
+
+
+ PDF EDITOR
+
+
+ Version 1.0.0
+
+
+
+
+
+ Maskan Technologies
+
+
+
+
address: Bangalore, Karnataka, India
+
email: contact@maskantechnologies.com
+
tel.: +91 000-000-0000
+
+
+
+ www.maskantechnologies.com
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/ToolRail.tsx b/frontend/src/components/ToolRail.tsx
index f23e973..f157f20 100644
--- a/frontend/src/components/ToolRail.tsx
+++ b/frontend/src/components/ToolRail.tsx
@@ -4,7 +4,7 @@ import type { ToolId } from '../lib/tools';
import { Popover } from './ui';
import {
SelectIcon, PanIcon, HighlightIcon, DrawIcon, CommentIcon, TextBoxIcon,
- SignatureIcon, StampIcon, RedactIcon, InfoIcon,
+ SignatureIcon, StampIcon, RedactIcon, InfoIcon, HelpIcon,
} from './icons';
interface ToolDef { id: ToolId; label: string; shortcut: string; icon: React.ReactNode; danger?: boolean }
@@ -28,6 +28,7 @@ interface ToolRailProps {
onToolChange: (t: ToolId) => void;
hasSignature: boolean;
onOpenSignature: () => void;
+ onOpenAbout: () => void;
}
const RailButton: React.FC<{ t: ToolDef; active: boolean; onClick: () => void }> = ({ t, active, onClick }) => (
@@ -48,7 +49,7 @@ const RailButton: React.FC<{ t: ToolDef; active: boolean; onClick: () => void }>
);
-export const ToolRail: React.FC = ({ activeTool, onToolChange, hasSignature, onOpenSignature }) => {
+export const ToolRail: React.FC = ({ activeTool, onToolChange, hasSignature, onOpenSignature, onOpenAbout }) => {
const pickTool = (id: ToolId) => {
onToolChange(id);
if (id === 'signature' && !hasSignature) onOpenSignature();
@@ -64,12 +65,16 @@ export const ToolRail: React.FC = ({ activeTool, onToolChange, ha
+
+
+
+
(
-
+
)}
>
diff --git a/frontend/src/components/icons.tsx b/frontend/src/components/icons.tsx
index 66bf1f0..68160f5 100644
--- a/frontend/src/components/icons.tsx
+++ b/frontend/src/components/icons.tsx
@@ -75,5 +75,6 @@ export const CopyIcon: IC = mk(<>);
export const UploadIcon: IC = mk();
export const InfoIcon: IC = mk(<>>);
+export const HelpIcon: IC = mk(<>>);
export const SpinnerIcon: IC = ({ size = 18, className }) =>
base(size, `${className ?? ''} animate-spin`, 2, <>>);