From d49fbcc18df97008165e5dfdf63fdcb968a97f3c Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Sat, 24 May 2025 02:34:38 +0000
Subject: [PATCH] Allow users to export screenshots as PNG files for better
 compatibility

Adds an HTML-based tool, svg-to-png.html, to convert SVG screenshots to PNG format for enhanced compatibility with documentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/83b3772f-6ea7-4e3a-8be8-a4837bd055d9.jpg
---
 docs/screenshots/README.md       |  18 +++-
 docs/screenshots/svg-to-png.html | 138 +++++++++++++++++++++++++++++++
 2 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 docs/screenshots/svg-to-png.html
diff --git a/docs/screenshots/README.md b/docs/screenshots/README.md
index d3c0143..66ceb41 100644
--- a/docs/screenshots/README.md
+++ b/docs/screenshots/README.md
@@ -1 +1,17 @@
-Creating screenshot files from the captured images...
+# DynamoDNS Screenshots
+
+This directory contains visual assets for the DynamoDNS application:
+
+## SVG Screenshots
+- `auth-page.svg` - Authentication page mockup
+- `dashboard.svg` - Dashboard overview mockup
+- `dns-records.svg` - DNS Records management mockup
+- `domains.svg` - Domains management mockup
+
+## Conversion Tool
+- `svg-to-png.html` - Browser-based tool to convert the SVG files to PNG format
+
+## Documentation
+- `screenshot-guide.md` - Guide explaining the purpose and content of each screenshot
+
+The SVG format provides sharp, scalable images that can be viewed in any modern browser. To convert to PNG format for broader compatibility, open the `svg-to-png.html` file in a web browser and use the download buttons.
diff --git a/docs/screenshots/svg-to-png.html b/docs/screenshots/svg-to-png.html
new file mode 100644
index 0000000..3dcd6ad
--- /dev/null
+++ b/docs/screenshots/svg-to-png.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SVG to PNG Converter</title>
+    <style>
+        body {
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .screenshots {
+            display: flex;
+            flex-direction: column;
+            gap: 40px;
+        }
+        .screenshot {
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 20px;
+        }
+        .screenshot h2 {
+            margin-top: 0;
+        }
+        .svg-container {
+            width: 100%;
+            margin-bottom: 20px;
+        }
+        .svg-container img, .svg-container object {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: 0 auto;
+        }
+        .download-btn {
+            background-color: #2563eb;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            margin-top: 10px;
+        }
+        .download-btn:hover {
+            background-color: #1d4ed8;
+        }
+    </style>
+</head>
+<body>
+    <h1>DynamoDNS Screenshots</h1>
+    
+    <div class="screenshots">
+        <div class="screenshot">
+            <h2>Authentication Page</h2>
+            <div class="svg-container">
+                <object id="auth-svg" data="auth-page.svg" type="image/svg+xml"></object>
+            </div>
+            <button class="download-btn" onclick="convertToPNG('auth-svg', 'auth-page.png')">Download as PNG</button>
+        </div>
+        
+        <div class="screenshot">
+            <h2>Dashboard</h2>
+            <div class="svg-container">
+                <object id="dashboard-svg" data="dashboard.svg" type="image/svg+xml"></object>
+            </div>
+            <button class="download-btn" onclick="convertToPNG('dashboard-svg', 'dashboard.png')">Download as PNG</button>
+        </div>
+        
+        <div class="screenshot">
+            <h2>DNS Records Management</h2>
+            <div class="svg-container">
+                <object id="dns-records-svg" data="dns-records.svg" type="image/svg+xml"></object>
+            </div>
+            <button class="download-btn" onclick="convertToPNG('dns-records-svg', 'dns-records.png')">Download as PNG</button>
+        </div>
+        
+        <div class="screenshot">
+            <h2>Domains Management</h2>
+            <div class="svg-container">
+                <object id="domains-svg" data="domains.svg" type="image/svg+xml"></object>
+            </div>
+            <button class="download-btn" onclick="convertToPNG('domains-svg', 'domains.png')">Download as PNG</button>
+        </div>
+    </div>
+
+    <script>
+        function convertToPNG(svgId, filename) {
+            const svgObject = document.getElementById(svgId);
+            const svgDocument = svgObject.contentDocument;
+            const svgElement = svgDocument.querySelector('svg');
+            
+            // Get SVG dimensions
+            const bbox = svgElement.getBBox();
+            const width = svgElement.getAttribute('width');
+            const height = svgElement.getAttribute('height');
+            
+            // Create a canvas element
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            
+            // Create image from SVG
+            const img = new Image();
+            const svgData = new XMLSerializer().serializeToString(svgElement);
+            const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
+            const url = URL.createObjectURL(svgBlob);
+            
+            img.onload = function() {
+                // Draw image on canvas
+                ctx.fillStyle = 'white';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                
+                // Convert to PNG and download
+                const pngUrl = canvas.toDataURL('image/png');
+                const a = document.createElement('a');
+                a.href = pngUrl;
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            };
+            
+            img.src = url;
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
