mirror of
https://github.com/freedbygrace/DynamoDNS.git
synced 2026-08-19 22:26:17 +00:00
alphaeusmote
d49fbcc18d
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
138 lines
4.7 KiB
HTML
138 lines
4.7 KiB
HTML
<!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> |