Last 10 Commits for imagemeta.scroll.pub

commit 1fac5b3050f18275fa8afb720b9bd7a78240860a Author: root <root@hub.scroll.pub> Date: 2024-12-28 15:06:05 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..60918a0 --- /dev/null +++ b/body.html @@ -0,0 +1,47 @@ +<header> + <h1>Image Meta & XMP Editor</h1> + <p class="tagline">Extract metadata & apply Lightroom effects</p> +</header> + +<main> + <section class="drop-zone" id="dropZone"> + <div class="drop-content"> + <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='48' height='48'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2' d='M12 4v16m-8-8h16'/%3E%3C/svg%3E" alt="Upload icon"> + <h2>Drop image here or click to upload</h2> + <p>Supports JPG, PNG, TIFF formats</p> + </div> + <input type="file" id="fileInput" accept="image/*" class="file-input"> + </section> + + <section class="metadata-panel hidden" id="metadataPanel"> + <h2>Image Metadata</h2> + <div class="metadata-content" id="metadataContent"></div> + </section> + + <section class="effects-panel hidden" id="effectsPanel"> + <h2>Lightroom Effects</h2> + <div class="effects-controls"> + <div class="effect-group"> + <label for="exposure">Exposure</label> + <input type="range" id="exposure" min="-5" max="5" step="0.1" value="0"> + </div> + <div class="effect-group"> + <label for="contrast">Contrast</label> + <input type="range" id="contrast" min="-100" max="100" step="1" value="0"> + </div> + <div class="effect-group"> + <label for="highlights">Highlights</label> + <input type="range" id="highlights" min="-100" max="100" step="1" value="0"> + </div> + <div class="effect-group"> + <label for="shadows">Shadows</label> + <input type="range" id="shadows" min="-100" max="100" step="1" value="0"> + </div> + </div> + <button id="exportXmp" class="export-button">Export XMP</button> + </section> +</main> + +<footer> + <p>Built with care by Image Meta & XMP Editor</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..f8b99fb --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://imagemeta.scroll.pub +metaTags +editButton /edit.html +title Image Metadata & XMP Effects Editor +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..c96ce18 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_016558nBTHvQPVfrNwZ5eXCq", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "Here's my solution for an image metadata and Lightroom XMP effects web app:\n\n---domain---\nimagemeta.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://imagemeta.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Image Metadata & XMP Effects Editor\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Image Meta & XMP Editor</h1>\n <p class=\"tagline\">Extract metadata & apply Lightroom effects</p>\n</header>\n\n<main>\n <section class=\"drop-zone\" id=\"dropZone\">\n <div class=\"drop-content\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='48' height='48'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='2' d='M12 4v16m-8-8h16'/%3E%3C/svg%3E\" alt=\"Upload icon\">\n <h2>Drop image here or click to upload</h2>\n <p>Supports JPG, PNG, TIFF formats</p>\n </div>\n <input type=\"file\" id=\"fileInput\" accept=\"image/*\" class=\"file-input\">\n </section>\n\n <section class=\"metadata-panel hidden\" id=\"metadataPanel\">\n <h2>Image Metadata</h2>\n <div class=\"metadata-content\" id=\"metadataContent\"></div>\n </section>\n\n <section class=\"effects-panel hidden\" id=\"effectsPanel\">\n <h2>Lightroom Effects</h2>\n <div class=\"effects-controls\">\n <div class=\"effect-group\">\n <label for=\"exposure\">Exposure</label>\n <input type=\"range\" id=\"exposure\" min=\"-5\" max=\"5\" step=\"0.1\" value=\"0\">\n </div>\n <div class=\"effect-group\">\n <label for=\"contrast\">Contrast</label>\n <input type=\"range\" id=\"contrast\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n </div>\n <div class=\"effect-group\">\n <label for=\"highlights\">Highlights</label>\n <input type=\"range\" id=\"highlights\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n </div>\n <div class=\"effect-group\">\n <label for=\"shadows\">Shadows</label>\n <input type=\"range\" id=\"shadows\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n </div>\n </div>\n <button id=\"exportXmp\" class=\"export-button\">Export XMP</button>\n </section>\n</main>\n\n<footer>\n <p>Built with care by Image Meta & XMP Editor</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2d5ff3;\n --secondary-color: #17153a;\n --accent-color: #8b3dff;\n --background-color: #f8f9fd;\n --text-color: #2c3e50;\n --border-radius: 12px;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n min-height: 100vh;\n padding: 2rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 3rem;\n}\n\nh1 {\n font-size: 2.5rem;\n color: var(--secondary-color);\n margin-bottom: 0.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.tagline {\n color: var(--text-color);\n opacity: 0.8;\n}\n\n.drop-zone {\n background: white;\n border: 3px dashed var(--primary-color);\n border-radius: var(--border-radius);\n padding: 3rem;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n margin-bottom: 2rem;\n}\n\n.drop-zone:hover {\n background: rgba(45, 95, 243, 0.05);\n transform: translateY(-2px);\n}\n\n.drop-content img {\n margin-bottom: 1rem;\n opacity: 0.6;\n}\n\n.file-input {\n display: none;\n}\n\n.metadata-panel, .effects-panel {\n background: white;\n border-radius: var(--border-radius);\n padding: 2rem;\n margin-bottom: 2rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.effects-controls {\n display: grid;\n gap: 1.5rem;\n margin: 2rem 0;\n}\n\n.effect-group {\n display: grid;\n gap: 0.5rem;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--background-color);\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n background: var(--primary-color);\n border-radius: 50%;\n cursor: pointer;\n transition: var(--transition);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n}\n\n.export-button {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 600;\n transition: var(--transition);\n}\n\n.export-button:hover {\n background: var(--accent-color);\n transform: translateY(-2px);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n margin-top: 3rem;\n color: var(--text-color);\n opacity: 0.8;\n}\n\n@media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n .drop-zone {\n padding: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const dropZone = document.getElementById('dropZone');\n const fileInput = document.getElementById('fileInput');\n const metadataPanel = document.getElementById('metadataPanel');\n const effectsPanel = document.getElementById('effectsPanel');\n const metadataContent = document.getElementById('metadataContent');\n const exportXmp = document.getElementById('exportXmp');\n\n // Handle drag and drop\n dropZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n dropZone.style.borderColor = 'var(--accent-color)';\n });\n\n dropZone.addEventListener('dragleave', () => {\n dropZone.style.borderColor = 'var(--primary-color)';\n });\n\n dropZone.addEventListener('drop', (e) => {\n e.preventDefault();\n dropZone.style.borderColor = 'var(--primary-color)';\n handleFile(e.dataTransfer.files[0]);\n });\n\n // Handle click upload\n dropZone.addEventListener('click', () => {\n fileInput.click();\n });\n\n fileInput.addEventListener('change', (e) => {\n handleFile(e.target.files[0]);\n });\n\n function handleFile(file) {\n if (!file || !file.type.startsWith('image/')) {\n alert('Please upload an image file');\n return;\n }\n\n // Read image metadata\n const reader = new FileReader();\n reader.onload = async (e) => {\n try {\n // Extract basic image metadata\n const img = new Image();\n img.src = e.target.result;\n await img.decode();\n\n const metadata = {\n 'File Name': file.name,\n 'File Size': formatFileSize(file.size),\n 'Image Width': img.naturalWidth + 'px',\n 'Image Height': img.naturalHeight + 'px',\n 'File Type': file.type\n };\n\n displayMetadata(metadata);\n metadataPanel.classList.remove('hidden');\n effectsPanel.classList.remove('hidden');\n } catch (error) {\n console.error('Error processing image:', error);\n alert('Error processing image');\n }\n };\n reader.readAsDataURL(file);\n }\n\n function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n\n function displayMetadata(metadata) {\n metadataContent.innerHTML = Object.entries(metadata)\n .map(([key, value]) => `<p><strong>${key}:</strong> ${value}</p>`)\n .join('');\n }\n\n // Handle XMP export\n exportXmp.addEventListener('click', () => {\n const xmpData = generateXmpData();\n downloadXmp(xmpData);\n });\n\n function generateXmpData() {\n const exposure = document.getElementById('exposure').value;\n const contrast = document.getElementById('contrast').value;\n const highlights = document.getElementById('highlights').value;\n const shadows = document.getElementById('shadows').value;\n\n return `<?xpacket begin=\"?\" id=\"W5M0MpCehiHzreSzNTczkc9d\"?>\n<x:xmpmeta xmlns:x=\"adobe:ns:meta/\">\n <rdf:RDF xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\">\n <rdf:Description rdf:about=\"\"\n xmlns:crs=\"http://ns.adobe.com/camera-raw-settings/1.0/\">\n <crs:Exposure>${exposure}</crs:Exposure>\n <crs:Contrast>${contrast}</crs:Contrast>\n <crs:Highlights>${highlights}</crs:Highlights>\n <crs:Shadows>${shadows}</crs:Shadows>\n </rdf:Description>\n </rdf:RDF>\n</x:xmpmeta>\n<?xpacket end=\"w\"?>`;\n }\n\n function downloadXmp(xmpContent) {\n const blob = new Blob([xmpContent], { type: 'application/xml' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'lightroom-effects.xmp';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n});\n\n---end---" + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 289, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3034 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..91fb8a3 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# imagemeta.scroll.pub +Website generated by Claude from prompt: Web app for extracting metadata from images and applying the lightroom effects into an xmp file \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..3a5e77a --- /dev/null +++ b/script.js @@ -0,0 +1,120 @@ +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]) => `<p><strong>${key}:</strong> ${value}</p>`) + .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 `<?xpacket begin="?" id="W5M0MpCehiHzreSzNTczkc9d"?> +<x:xmpmeta xmlns:x="adobe:ns:meta/"> + <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> + <rdf:Description rdf:about="" + xmlns:crs="http://ns.adobe.com/camera-raw-settings/1.0/"> + <crs:Exposure>${exposure}</crs:Exposure> + <crs:Contrast>${contrast}</crs:Contrast> + <crs:Highlights>${highlights}</crs:Highlights> + <crs:Shadows>${shadows}</crs:Shadows> + </rdf:Description> + </rdf:RDF> +</x:xmpmeta> +<?xpacket end="w"?>`; + } + + 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); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..dc42426 --- /dev/null +++ b/style.css @@ -0,0 +1,151 @@ +: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; + } +}