PNG Editor
- - - -
-
-
-
-
-
-
-
-
- {#if fit === "cover"}
+
+
+
- {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ if (!ctx) {
+ reject(new Error('Canvas context not available'));
+ return;
+ }
+
+ img.onload = () => {
+ try {
+ const { width, height } = calculateDimensions(img, options);
+
+ canvas.width = width;
+ canvas.height = height;
+
+ if (options.fit === 'cover' && options.width && options.height) {
+ drawCover(ctx, img, options.width, options.height, options.position || 'center');
+ } else {
+ ctx.drawImage(img, 0, 0, width, height);
+ }
+
+ // Convert to data URL with quality
+ const quality = options.quality / 100;
+ const mimeType = `image/${options.format === 'jpeg' ? 'jpeg' : 'png'}`;
+ const dataUrl = canvas.toDataURL(mimeType, quality);
+
+ resolve(dataUrl);
+ } catch (error) {
+ reject(error);
+ }
+ };
+
+ img.onerror = () => {
+ reject(new Error('Failed to load image'));
+ };
+
+ img.src = URL.createObjectURL(file);
+ });
+}
+
+/**
+ * Calculate dimensions for resize operation
+ */
+function calculateDimensions(
+ img: HTMLImageElement,
+ options: TransformOptions
+): { width: number; height: number } {
+ const originalWidth = img.naturalWidth;
+ const originalHeight = img.naturalHeight;
+ const originalAspect = originalWidth / originalHeight;
+
+ // If no dimensions specified, return original
+ if (!options.width && !options.height) {
+ return { width: originalWidth, height: originalHeight };
+ }
+
+ // If only width specified
+ if (options.width && !options.height) {
+ return {
+ width: options.width,
+ height: Math.round(options.width / originalAspect)
+ };
+ }
+
+ // If only height specified
+ if (options.height && !options.width) {
+ return {
+ width: Math.round(options.height * originalAspect),
+ height: options.height
+ };
+ }
+
+ // Both dimensions specified
+ const targetWidth = options.width!;
+ const targetHeight = options.height!;
+ const targetAspect = targetWidth / targetHeight;
+
+ if (options.fit === 'cover') {
+ // Fill the box, crop excess
+ return { width: targetWidth, height: targetHeight };
+ } else {
+ // Fit inside box, maintain aspect ratio
+ if (originalAspect > targetAspect) {
+ // Image is wider
+ return {
+ width: targetWidth,
+ height: Math.round(targetWidth / originalAspect)
+ };
+ } else {
+ // Image is taller
+ return {
+ width: Math.round(targetHeight * originalAspect),
+ height: targetHeight
+ };
+ }
+ }
+}
+
+/**
+ * Draw image with cover fit (crop to fill)
+ */
+function drawCover(
+ ctx: CanvasRenderingContext2D,
+ img: HTMLImageElement,
+ targetWidth: number,
+ targetHeight: number,
+ position: string
+) {
+ const imgWidth = img.naturalWidth;
+ const imgHeight = img.naturalHeight;
+ const imgAspect = imgWidth / imgHeight;
+ const targetAspect = targetWidth / targetHeight;
+
+ let sourceWidth: number;
+ let sourceHeight: number;
+ let sourceX = 0;
+ let sourceY = 0;
+
+ if (imgAspect > targetAspect) {
+ // Image is wider, crop sides
+ sourceHeight = imgHeight;
+ sourceWidth = imgHeight * targetAspect;
+ sourceX = getPositionOffset(imgWidth - sourceWidth, position, 'horizontal');
+ } else {
+ // Image is taller, crop top/bottom
+ sourceWidth = imgWidth;
+ sourceHeight = imgWidth / targetAspect;
+ sourceY = getPositionOffset(imgHeight - sourceHeight, position, 'vertical');
+ }
+
+ ctx.drawImage(
+ img,
+ sourceX,
+ sourceY,
+ sourceWidth,
+ sourceHeight,
+ 0,
+ 0,
+ targetWidth,
+ targetHeight
+ );
+}
+
+/**
+ * Calculate crop offset based on position
+ */
+function getPositionOffset(
+ availableSpace: number,
+ position: string,
+ axis: 'horizontal' | 'vertical'
+): number {
+ const pos = position.toLowerCase();
+
+ if (axis === 'horizontal') {
+ if (pos.includes('left')) return 0;
+ if (pos.includes('right')) return availableSpace;
+ return availableSpace / 2; // center
+ } else {
+ if (pos.includes('top')) return 0;
+ if (pos.includes('bottom')) return availableSpace;
+ return availableSpace / 2; // center
+ }
+}
+
+/**
+ * Estimate file size from data URL
+ */
+export function estimateSize(dataUrl: string): number {
+ const base64 = dataUrl.split(',')[1];
+ if (!base64) return 0;
+ // Base64 is ~33% larger than binary, so divide by 1.33
+ return Math.ceil((base64.length * 3) / 4);
+}
+
+/**
+ * Format bytes to human-readable size
+ */
+export function formatFileSize(bytes: number): string {
+ if (bytes === 0) return '0 B';
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+/**
+ * Calculate savings/increase
+ */
+export function calculateSavings(original: number, modified: number): {
+ amount: number;
+ percent: number;
+ isReduction: boolean;
+ formatted: string;
+} {
+ const diff = original - modified;
+ const percent = (Math.abs(diff) / original) * 100;
+ const isReduction = diff > 0;
+
+ let formatted: string;
+ if (diff > 0) {
+ formatted = `β ${formatFileSize(diff)} saved (${percent.toFixed(1)}%)`;
+ } else if (diff < 0) {
+ formatted = `β ${formatFileSize(Math.abs(diff))} larger (${percent.toFixed(1)}%)`;
+ } else {
+ formatted = 'Same size';
+ }
+
+ return {
+ amount: Math.abs(diff),
+ percent,
+ isReduction,
+ formatted
+ };
+}
+
+/**
+ * Debounce function for performance
+ */
+export function debounce any>(
+ func: T,
+ wait: number
+): (...args: Parameters) => void {
+ let timeout: ReturnType;
+ return (...args: Parameters) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func(...args), wait);
+ };
+}
\ No newline at end of file
diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts
new file mode 100644
index 0000000..b7b3cb8
--- /dev/null
+++ b/frontend/src/lib/theme.ts
@@ -0,0 +1,60 @@
+import { writable } from 'svelte/store';
+
+export type Theme = 'light' | 'dark';
+
+// Get initial theme from localStorage or system preference
+function getInitialTheme(): Theme {
+ if (typeof window === 'undefined') return 'light';
+
+ const stored = localStorage.getItem('theme') as Theme;
+ if (stored === 'light' || stored === 'dark') {
+ return stored;
+ }
+
+ // Check system preference
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ return 'dark';
+ }
+
+ return 'light';
+}
+
+// Create the theme store
+function createThemeStore() {
+ const { subscribe, set, update } = writable(getInitialTheme());
+
+ return {
+ subscribe,
+ set: (theme: Theme) => {
+ if (typeof window !== 'undefined') {
+ localStorage.setItem('theme', theme);
+ document.documentElement.setAttribute('data-theme', theme);
+ }
+ set(theme);
+ },
+ toggle: () => {
+ update(current => {
+ const newTheme = current === 'light' ? 'dark' : 'light';
+ if (typeof window !== 'undefined') {
+ localStorage.setItem('theme', newTheme);
+ document.documentElement.setAttribute('data-theme', newTheme);
+ }
+ return newTheme;
+ });
+ },
+ init: () => {
+ const theme = getInitialTheme();
+ if (typeof window !== 'undefined') {
+ document.documentElement.setAttribute('data-theme', theme);
+ }
+ set(theme);
+ }
+ };
+}
+
+export const theme = createThemeStore();
+
+// Initialize theme on module load
+if (typeof window !== 'undefined') {
+ theme.init();
+}
\ No newline at end of file
-
+
- {/if}
+
+ PNGer
+Modern PNG Editor & Resizer
-
- {quality}
+
\ No newline at end of file
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 6d52dfc..4cff306 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,16 +1,59 @@
:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
+ /* Light mode colors (white with dark gold) */
+ --color-bg-primary: #ffffff;
+ --color-bg-secondary: #f8f9fa;
+ --color-bg-tertiary: #e9ecef;
+ --color-text-primary: #1a1a1a;
+ --color-text-secondary: #6c757d;
+ --color-border: #dee2e6;
+ --color-accent: #b8860b; /* Dark gold */
+ --color-accent-hover: #8b6914;
+ --color-accent-light: #daa520;
+ --color-success: #28a745;
+ --color-error: #dc3545;
+ --color-warning: #ffc107;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+ /* Spacing */
+ --space-xs: 0.25rem;
+ --space-sm: 0.5rem;
+ --space-md: 1rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2rem;
+ --space-2xl: 3rem;
+
+ /* Border radius */
+ --radius-sm: 0.25rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-full: 9999px;
+
+ /* Transitions */
+ --transition-fast: 150ms ease;
+ --transition-base: 250ms ease;
+ --transition-slow: 350ms ease;
+}
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+/* Dark mode (black with light gold) */
+[data-theme="dark"] {
+ --color-bg-primary: #0a0a0a;
+ --color-bg-secondary: #1a1a1a;
+ --color-bg-tertiary: #2a2a2a;
+ --color-text-primary: #e9ecef;
+ --color-text-secondary: #adb5bd;
+ --color-border: #3a3a3a;
+ --color-accent: #daa520; /* Light gold */
+ --color-accent-hover: #ffd700;
+ --color-accent-light: #f0e68c;
+ --color-success: #4caf50;
+ --color-error: #f44336;
+ --color-warning: #ff9800;
}
* {
@@ -19,49 +62,323 @@
box-sizing: border-box;
}
+html {
+ font-size: 16px;
+}
+
body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ line-height: 1.6;
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-primary);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ transition: background-color var(--transition-base), color var(--transition-base);
}
#app {
+ min-height: 100vh;
+}
+
+/* Typography */
+h1 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-lg);
+}
+
+h2 {
+ font-size: 1.75rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-md);
+}
+
+h3 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-sm);
+}
+
+p {
+ color: var(--color-text-secondary);
+ margin-bottom: var(--space-md);
+}
+
+/* Buttons */
+button, .btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-lg);
+ font-size: 1rem;
+ font-weight: 500;
+ font-family: inherit;
+ color: var(--color-bg-primary);
+ background-color: var(--color-accent);
+ border: 2px solid transparent;
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ transition: all var(--transition-fast);
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+button:hover:not(:disabled), .btn:hover:not(:disabled) {
+ background-color: var(--color-accent-hover);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
+}
+
+button:active:not(:disabled), .btn:active:not(:disabled) {
+ transform: translateY(0);
+}
+
+button:disabled, .btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+button.btn-secondary {
+ background-color: var(--color-bg-tertiary);
+ color: var(--color-text-primary);
+ border-color: var(--color-border);
+}
+
+button.btn-secondary:hover:not(:disabled) {
+ background-color: var(--color-bg-secondary);
+ border-color: var(--color-accent);
+}
+
+button.btn-outline {
+ background-color: transparent;
+ color: var(--color-accent);
+ border-color: var(--color-accent);
+}
+
+button.btn-outline:hover:not(:disabled) {
+ background-color: var(--color-accent);
+ color: var(--color-bg-primary);
+}
+
+/* Inputs */
+input[type="text"],
+input[type="number"],
+input[type="file"],
+select {
width: 100%;
- max-width: 1280px;
+ padding: var(--space-sm) var(--space-md);
+ font-size: 1rem;
+ font-family: inherit;
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-secondary);
+ border: 2px solid var(--color-border);
+ border-radius: var(--radius-md);
+ transition: all var(--transition-fast);
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="file"]:focus,
+select:focus {
+ outline: none;
+ border-color: var(--color-accent);
+ box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.1);
+}
+
+input[type="range"] {
+ width: 100%;
+ height: 6px;
+ -webkit-appearance: none;
+ appearance: none;
+ background: var(--color-bg-tertiary);
+ border-radius: var(--radius-full);
+ outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ background: var(--color-accent);
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.1);
+}
+
+input[type="range"]::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ background: var(--color-accent);
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+ background: var(--color-accent-hover);
+ transform: scale(1.1);
+}
+
+/* Cards */
+.card {
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ padding: var(--space-xl);
+ box-shadow: var(--shadow-sm);
+ transition: all var(--transition-base);
+}
+
+.card:hover {
+ box-shadow: var(--shadow-md);
+}
+
+/* Utility classes */
+.container {
+ width: 100%;
+ max-width: 1400px;
margin: 0 auto;
- padding: 2rem;
+ padding: var(--space-xl);
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.gap-sm {
+ gap: var(--space-sm);
+}
+
+.gap-md {
+ gap: var(--space-md);
+}
+
+.gap-lg {
+ gap: var(--space-lg);
+}
+
+.grid {
+ display: grid;
+}
+
+.grid-cols-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.text-center {
text-align: center;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
+.text-sm {
+ font-size: 0.875rem;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+}
+
+.font-medium {
font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
}
-button:hover {
- border-color: #646cff;
+.font-semibold {
+ font-weight: 600;
}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+.mb-0 {
+ margin-bottom: 0;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
+.mt-auto {
+ margin-top: auto;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--color-border);
+ border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--color-accent);
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
}
- button {
- background-color: #f9f9f9;
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.fade-in {
+ animation: fadeIn var(--transition-base) ease-out;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.spinner {
+ animation: spin 1s linear infinite;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ html {
+ font-size: 14px;
+ }
+
+ .container {
+ padding: var(--space-md);
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .grid-cols-2 {
+ grid-template-columns: 1fr;
}
}
\ No newline at end of file
diff --git a/frontend/src/lib/preview.ts b/frontend/src/lib/preview.ts
new file mode 100644
index 0000000..5c4fb6e
--- /dev/null
+++ b/frontend/src/lib/preview.ts
@@ -0,0 +1,246 @@
+export interface TransformOptions {
+ width?: number;
+ height?: number;
+ quality: number;
+ format: 'png' | 'webp' | 'jpeg';
+ fit: 'inside' | 'cover';
+ position?: string;
+}
+
+/**
+ * Generate a client-side preview using Canvas API
+ * This provides instant feedback without server round-trip
+ */
+export async function generateClientPreview(
+ file: File,
+ options: TransformOptions
+): Promise
+
+
-
-
+
+
+
+ Upload & Transform
+ + +
+
+
+ {#if file}
+
+
+
+
+ {file.name}
+
+ ({formatFileSize(file.size)})
+
+
+
+ {/if}
+
+
+
+
+ Dimensions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if fit === "cover"}
+
+
+
+
+ {/if}
+
+
+
+
+
+
+
+
+ {quality}%
+
+
+
+
+
+
+
+
+ {#if error}
+ + {error} +
+ {/if} + + + +
+
Live Preview
+ + {#if !file} +
+
+ {:else if showPreview}
+
+
+ πΌοΈ
+Upload an image to see live preview
+
+
+
+ {:else}
+
+
+
+
+
+ {#if savings}
+
+
+
+
+ Original
+ +
+
+ + {formatFileSize(originalSize)} +
+
+
+ Preview
+ +
+
+ + {formatFileSize(previewSize)} +
+
+
+ {/if}
+ + {savings.formatted} +
+
+
+
+ {/if}
+
-
-
-
- {#if error}
- {error}
- {/if} - - - - - \ No newline at end of file +