Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('dropZone');
+ const fileInput = document.getElementById('fileInput');
+ const metadataPanel = document.getElementById('metadataPanel');
+ const effectsPanel = document.getElementById('effectsPanel');
+ const metadataContent = document.getElementById('metadataContent');
+ const exportXmp = document.getElementById('exportXmp');
+
+ // Handle drag and drop
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = 'var(--accent-color)';
+ });
+
+ dropZone.addEventListener('dragleave', () => {
+ dropZone.style.borderColor = 'var(--primary-color)';
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = 'var(--primary-color)';
+ handleFile(e.dataTransfer.files[0]);
+ });
+
+ // Handle click upload
+ dropZone.addEventListener('click', () => {
+ fileInput.click();
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ handleFile(e.target.files[0]);
+ });
+
+ function handleFile(file) {
+ if (!file || !file.type.startsWith('image/')) {
+ alert('Please upload an image file');
+ return;
+ }
+
+ // Read image metadata
+ const reader = new FileReader();
+ reader.onload = async (e) => {
+ try {
+ // Extract basic image metadata
+ const img = new Image();
+ img.src = e.target.result;
+ await img.decode();
+
+ const metadata = {
+ 'File Name': file.name,
+ 'File Size': formatFileSize(file.size),
+ 'Image Width': img.naturalWidth + 'px',
+ 'Image Height': img.naturalHeight + 'px',
+ 'File Type': file.type
+ };
+
+ displayMetadata(metadata);
+ metadataPanel.classList.remove('hidden');
+ effectsPanel.classList.remove('hidden');
+ } catch (error) {
+ console.error('Error processing image:', error);
+ alert('Error processing image');
+ }
+ };
+ reader.readAsDataURL(file);
+ }
+
+ function formatFileSize(bytes) {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+ }
+
+ function displayMetadata(metadata) {
+ metadataContent.innerHTML = Object.entries(metadata)
+ .map(([key, value]) => `
${key}: ${value}
`)
+ .join('');
+ }
+
+ // Handle XMP export
+ exportXmp.addEventListener('click', () => {
+ const xmpData = generateXmpData();
+ downloadXmp(xmpData);
+ });
+
+ function generateXmpData() {
+ const exposure = document.getElementById('exposure').value;
+ const contrast = document.getElementById('contrast').value;
+ const highlights = document.getElementById('highlights').value;
+ const shadows = document.getElementById('shadows').value;
+
+ return `
+
+
+
+ xmlns:crs="http://ns.adobe.com/camera-raw-settings/1.0/">
+ ${exposure}
+ ${contrast}
+ ${highlights}
+ ${shadows}
+
+
+
+ `;
+ }
+
+ function downloadXmp(xmpContent) {
+ const blob = new Blob([xmpContent], { type: 'application/xml' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'lightroom-effects.xmp';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+ });
Changed around line 1
+ :root {
+ --primary-color: #2d5ff3;
+ --secondary-color: #17153a;
+ --accent-color: #8b3dff;
+ --background-color: #f8f9fd;
+ --text-color: #2c3e50;
+ --border-radius: 12px;
+ --transition: all 0.3s ease;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+ min-height: 100vh;
+ padding: 2rem;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 3rem;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ color: var(--secondary-color);
+ margin-bottom: 0.5rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .tagline {
+ color: var(--text-color);
+ opacity: 0.8;
+ }
+
+ .drop-zone {
+ background: white;
+ border: 3px dashed var(--primary-color);
+ border-radius: var(--border-radius);
+ padding: 3rem;
+ text-align: center;
+ cursor: pointer;
+ transition: var(--transition);
+ margin-bottom: 2rem;
+ }
+
+ .drop-zone:hover {
+ background: rgba(45, 95, 243, 0.05);
+ transform: translateY(-2px);
+ }
+
+ .drop-content img {
+ margin-bottom: 1rem;
+ opacity: 0.6;
+ }
+
+ .file-input {
+ display: none;
+ }
+
+ .metadata-panel, .effects-panel {
+ background: white;
+ border-radius: var(--border-radius);
+ padding: 2rem;
+ margin-bottom: 2rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+ }
+
+ .effects-controls {
+ display: grid;
+ gap: 1.5rem;
+ margin: 2rem 0;
+ }
+
+ .effect-group {
+ display: grid;
+ gap: 0.5rem;
+ }
+
+ input[type="range"] {
+ width: 100%;
+ height: 6px;
+ background: var(--background-color);
+ border-radius: 3px;
+ outline: none;
+ -webkit-appearance: none;
+ }
+
+ input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 18px;
+ height: 18px;
+ background: var(--primary-color);
+ border-radius: 50%;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ input[type="range"]::-webkit-slider-thumb:hover {
+ transform: scale(1.1);
+ }
+
+ .export-button {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ font-weight: 600;
+ transition: var(--transition);
+ }
+
+ .export-button:hover {
+ background: var(--accent-color);
+ transform: translateY(-2px);
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ footer {
+ text-align: center;
+ margin-top: 3rem;
+ color: var(--text-color);
+ opacity: 0.8;
+ }
+
+ @media (max-width: 768px) {
+ body {
+ padding: 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .drop-zone {
+ padding: 2rem;
+ }
+ }
