mirror of
https://github.com/freedbygrace/DynamoDNS.git
synced 2026-07-26 11:38:13 +00:00
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
This commit is contained in:
alphaeusmote
@@ -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.
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user