gsadmin/DynamoDNS
1
0
Fork 0
mirror of https://github.com/freedbygrace/DynamoDNS.git synced 2026-07-26 11:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show how the application interface looks and the functions it provides

Browse Source 
Add SVG screenshots and a guide to the DynamoDNS 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
2025-05-24 02:28:49 +00:00
parent 500dd982f7
commit ac9b4989fe
6 changed files with 397 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/screenshots/README.md
+1
View File
@@ -0,0 +1 @@
Creating screenshot files from the captured images...
docs/screenshots/auth-page.svg
+43
View File
@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
<!-- Auth Card -->
<rect x="150" y="50" width="500" height="350" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<!-- Left Side - Login Form -->
<rect x="150" y="50" width="250" height="350" rx="8" fill="#ffffff" />
<!-- Logo and Title -->
<text x="200" y="100" font-family="Arial" font-size="24" font-weight="bold" fill="#1e293b">DynamoDNS</text>
<text x="200" y="130" font-family="Arial" font-size="16" fill="#64748b">Sign in to your account</text>
<!-- Username Field -->
<rect x="175" y="160" width="200" height="40" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
<text x="185" y="185" font-family="Arial" font-size="14" fill="#94a3b8">Username</text>
<!-- Password Field -->
<rect x="175" y="220" width="200" height="40" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
<text x="185" y="245" font-family="Arial" font-size="14" fill="#94a3b8">Password</text>
<!-- Sign In Button -->
<rect x="175" y="280" width="200" height="40" rx="4" fill="#2563eb" />
<text x="255" y="305" font-family="Arial" font-size="14" fill="#ffffff" text-anchor="middle">Sign In</text>
<!-- Forgot Password Link -->
<text x="275" y="340" font-family="Arial" font-size="12" fill="#2563eb" text-anchor="middle">Forgot password?</text>
<!-- Right Side - Hero Section -->
<rect x="400" y="50" width="250" height="350" rx="0" fill="#1e293b" />
<!-- Hero Content -->
<text x="525" y="150" font-family="Arial" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">Welcome to DynamoDNS</text>
<text x="525" y="180" font-family="Arial" font-size="14" fill="#94a3b8" text-anchor="middle">Advanced DNS Management</text>
<!-- Hero Features List -->
<text x="450" y="220" font-family="Arial" font-size="14" fill="#ffffff">✓ Multi-provider support</text>
<text x="450" y="250" font-family="Arial" font-size="14" fill="#ffffff">✓ Historical tracking</text>
<text x="450" y="280" font-family="Arial" font-size="14" fill="#ffffff">✓ Dynamic DNS updates</text>
<text x="450" y="310" font-family="Arial" font-size="14" fill="#ffffff">✓ Advanced metrics</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

docs/screenshots/dashboard.svg
+69
View File
@@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<!-- Dashboard Background -->
<rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
<!-- Header Bar -->
<rect x="0" y="0" width="800" height="60" fill="#1e293b" />
<text x="30" y="38" font-family="Arial" font-size="24" font-weight="bold" fill="white">DynamoDNS</text>
<!-- User Menu -->
<text x="750" y="38" font-family="Arial" font-size="14" fill="white" text-anchor="end">Admin ▼</text>
<!-- Customer Selector -->
<rect x="300" y="15" width="200" height="30" rx="4" fill="#334155" />
<text x="320" y="35" font-family="Arial" font-size="14" fill="white">Acme Corporation ▼</text>
<!-- Navigation Sidebar -->
<rect x="0" y="60" width="200" height="390" fill="#f1f5f9" />
<!-- Navigation Items -->
<rect x="10" y="80" width="180" height="40" rx="4" fill="#e2e8f0" />
<text x="45" y="105" font-family="Arial" font-size="14" fill="#334155">Dashboard</text>
<text x="45" y="155" font-family="Arial" font-size="14" fill="#64748b">Domains</text>
<text x="45" y="195" font-family="Arial" font-size="14" fill="#64748b">DNS Records</text>
<text x="45" y="235" font-family="Arial" font-size="14" fill="#64748b">History</text>
<text x="45" y="275" font-family="Arial" font-size="14" fill="#64748b">Metrics</text>
<text x="45" y="315" font-family="Arial" font-size="14" fill="#64748b">Webhooks</text>
<text x="45" y="355" font-family="Arial" font-size="14" fill="#64748b">API Tokens</text>
<text x="45" y="395" font-family="Arial" font-size="14" fill="#64748b">Settings</text>
<!-- Main Content Area -->
<rect x="220" y="80" width="560" height="50" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="110" font-family="Arial" font-size="16" font-weight="bold" fill="#0f172a">DNS Overview</text>
<!-- Statistics Cards -->
<rect x="220" y="150" width="170" height="100" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="180" font-family="Arial" font-size="14" fill="#64748b">Total Domains</text>
<text x="240" y="215" font-family="Arial" font-size="24" font-weight="bold" fill="#0f172a">24</text>
<rect x="410" y="150" width="170" height="100" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="430" y="180" font-family="Arial" font-size="14" fill="#64748b">DNS Records</text>
<text x="430" y="215" font-family="Arial" font-size="24" font-weight="bold" fill="#0f172a">186</text>
<rect x="600" y="150" width="170" height="100" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="620" y="180" font-family="Arial" font-size="14" fill="#64748b">Updates Today</text>
<text x="620" y="215" font-family="Arial" font-size="24" font-weight="bold" fill="#0f172a">42</text>
<!-- Charts -->
<rect x="220" y="270" width="350" height="160" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="300" font-family="Arial" font-size="14" font-weight="bold" fill="#0f172a">DNS Updates Over Time</text>
<!-- Simple line chart -->
<polyline points="240,380 270,360 300,370 330,350 360,330 390,345 420,320 450,310 480,330 510,290 540,300"
fill="none" stroke="#3b82f6" stroke-width="2" />
<!-- X and Y axis -->
<line x1="240" y1="380" x2="540" y2="380" stroke="#94a3b8" stroke-width="1" />
<line x1="240" y1="380" x2="240" y2="300" stroke="#94a3b8" stroke-width="1" />
<!-- Recent Activity -->
<rect x="590" y="270" width="180" height="160" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="610" y="300" font-family="Arial" font-size="14" font-weight="bold" fill="#0f172a">Recent Activity</text>
<text x="610" y="330" font-family="Arial" font-size="12" fill="#64748b">example.com: A record updated</text>
<text x="610" y="350" font-family="Arial" font-size="12" fill="#64748b">dev.site.io: MX record added</text>
<text x="610" y="370" font-family="Arial" font-size="12" fill="#64748b">api.example.org: CNAME updated</text>
<text x="610" y="390" font-family="Arial" font-size="12" fill="#64748b">myapp.com: TXT record added</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

docs/screenshots/dns-records.svg
+126
View File
@@ -0,0 +1,126 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
<!-- Header Bar -->
<rect x="0" y="0" width="800" height="60" fill="#1e293b" />
<text x="30" y="38" font-family="Arial" font-size="24" font-weight="bold" fill="white">DynamoDNS</text>
<!-- User Menu -->
<text x="750" y="38" font-family="Arial" font-size="14" fill="white" text-anchor="end">Admin ▼</text>
<!-- Customer Selector -->
<rect x="300" y="15" width="200" height="30" rx="4" fill="#334155" />
<text x="320" y="35" font-family="Arial" font-size="14" fill="white">Acme Corporation ▼</text>
<!-- Navigation Sidebar -->
<rect x="0" y="60" width="200" height="390" fill="#f1f5f9" />
<!-- Navigation Items -->
<text x="45" y="105" font-family="Arial" font-size="14" fill="#64748b">Dashboard</text>
<text x="45" y="155" font-family="Arial" font-size="14" fill="#64748b">Domains</text>
<rect x="10" y="170" width="180" height="40" rx="4" fill="#e2e8f0" />
<text x="45" y="195" font-family="Arial" font-size="14" fill="#334155">DNS Records</text>
<text x="45" y="235" font-family="Arial" font-size="14" fill="#64748b">History</text>
<text x="45" y="275" font-family="Arial" font-size="14" fill="#64748b">Metrics</text>
<text x="45" y="315" font-family="Arial" font-size="14" fill="#64748b">Webhooks</text>
<text x="45" y="355" font-family="Arial" font-size="14" fill="#64748b">API Tokens</text>
<text x="45" y="395" font-family="Arial" font-size="14" fill="#64748b">Settings</text>
<!-- Main Content Area - Page Header -->
<rect x="220" y="80" width="560" height="50" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="110" font-family="Arial" font-size="16" font-weight="bold" fill="#0f172a">DNS Records</text>
<!-- Filter Controls -->
<rect x="500" y="90" width="140" height="30" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
<text x="515" y="110" font-family="Arial" font-size="12" fill="#64748b">Domain: example.com ▼</text>
<rect x="650" y="90" width="110" height="30" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
<text x="665" y="110" font-family="Arial" font-size="12" fill="#64748b">Type: All ▼</text>
<!-- Add Record Button -->
<rect x="650" y="150" width="130" height="30" rx="4" fill="#2563eb" />
<text x="680" y="170" font-family="Arial" font-size="12" fill="white">+ Add Record</text>
<!-- Records Table -->
<rect x="220" y="150" width="560" height="280" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<!-- Table Header -->
<rect x="220" y="150" width="560" height="40" rx="6" fill="#f8fafc" />
<text x="240" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Name</text>
<text x="340" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Type</text>
<text x="390" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Content</text>
<text x="550" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">TTL</text>
<text x="600" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Status</text>
<text x="700" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Actions</text>
<!-- Table Rows -->
<!-- Row 1 -->
<line x1="220" y1="190" x2="780" y2="190" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="215" font-family="Arial" font-size="12" fill="#0f172a">@</text>
<text x="340" y="215" font-family="Arial" font-size="12" fill="#0f172a">A</text>
<text x="390" y="215" font-family="Arial" font-size="12" fill="#0f172a">34.105.45.38</text>
<text x="550" y="215" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
<circle cx="600" cy="210" r="5" fill="#22c55e" />
<text x="615" y="215" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="700" y="215" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
<text x="730" y="215" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
<!-- Row 2 -->
<line x1="220" y1="230" x2="780" y2="230" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="255" font-family="Arial" font-size="12" fill="#0f172a">www</text>
<text x="340" y="255" font-family="Arial" font-size="12" fill="#0f172a">CNAME</text>
<text x="390" y="255" font-family="Arial" font-size="12" fill="#0f172a">example.com</text>
<text x="550" y="255" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
<circle cx="600" cy="250" r="5" fill="#22c55e" />
<text x="615" y="255" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="700" y="255" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
<text x="730" y="255" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
<!-- Row 3 -->
<line x1="220" y1="270" x2="780" y2="270" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="295" font-family="Arial" font-size="12" fill="#0f172a">api</text>
<text x="340" y="295" font-family="Arial" font-size="12" fill="#0f172a">A</text>
<text x="390" y="295" font-family="Arial" font-size="12" fill="#0f172a">34.107.43.22</text>
<text x="550" y="295" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
<circle cx="600" cy="290" r="5" fill="#22c55e" />
<text x="615" y="295" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="700" y="295" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
<text x="730" y="295" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
<!-- Row 4 -->
<line x1="220" y1="310" x2="780" y2="310" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="335" font-family="Arial" font-size="12" fill="#0f172a">@</text>
<text x="340" y="335" font-family="Arial" font-size="12" fill="#0f172a">MX</text>
<text x="390" y="335" font-family="Arial" font-size="12" fill="#0f172a">mail.example.com</text>
<text x="550" y="335" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
<circle cx="600" cy="330" r="5" fill="#22c55e" />
<text x="615" y="335" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="700" y="335" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
<text x="730" y="335" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
<!-- Row 5 -->
<line x1="220" y1="350" x2="780" y2="350" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="375" font-family="Arial" font-size="12" fill="#0f172a">_dmarc</text>
<text x="340" y="375" font-family="Arial" font-size="12" fill="#0f172a">TXT</text>
<text x="390" y="375" font-family="Arial" font-size="12" fill="#0f172a">v=DMARC1; p=reject; ...</text>
<text x="550" y="375" font-family="Arial" font-size="12" fill="#0f172a">3600</text>
<circle cx="600" cy="370" r="5" fill="#f97316" />
<text x="615" y="375" font-family="Arial" font-size="12" fill="#0f172a">Updating</text>
<text x="700" y="375" font-family="Arial" font-size="12" fill="#3b82f6">Edit</text>
<text x="730" y="375" font-family="Arial" font-size="12" fill="#ef4444">Delete</text>
<!-- Pagination -->
<text x="240" y="415" font-family="Arial" font-size="12" fill="#64748b">Showing 1-5 of 12 records</text>
<rect x="650" y="400" width="30" height="25" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
<text x="665" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">1</text>
<rect x="685" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="700" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">2</text>
<rect x="720" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="735" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">3</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

docs/screenshots/domains.svg
+114
View File
@@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect x="0" y="0" width="800" height="450" fill="#f8fafc" />
<!-- Header Bar -->
<rect x="0" y="0" width="800" height="60" fill="#1e293b" />
<text x="30" y="38" font-family="Arial" font-size="24" font-weight="bold" fill="white">DynamoDNS</text>
<!-- User Menu -->
<text x="750" y="38" font-family="Arial" font-size="14" fill="white" text-anchor="end">Admin ▼</text>
<!-- Customer Selector -->
<rect x="300" y="15" width="200" height="30" rx="4" fill="#334155" />
<text x="320" y="35" font-family="Arial" font-size="14" fill="white">Acme Corporation ▼</text>
<!-- Navigation Sidebar -->
<rect x="0" y="60" width="200" height="390" fill="#f1f5f9" />
<!-- Navigation Items -->
<text x="45" y="105" font-family="Arial" font-size="14" fill="#64748b">Dashboard</text>
<rect x="10" y="130" width="180" height="40" rx="4" fill="#e2e8f0" />
<text x="45" y="155" font-family="Arial" font-size="14" fill="#334155">Domains</text>
<text x="45" y="195" font-family="Arial" font-size="14" fill="#64748b">DNS Records</text>
<text x="45" y="235" font-family="Arial" font-size="14" fill="#64748b">History</text>
<text x="45" y="275" font-family="Arial" font-size="14" fill="#64748b">Metrics</text>
<text x="45" y="315" font-family="Arial" font-size="14" fill="#64748b">Webhooks</text>
<text x="45" y="355" font-family="Arial" font-size="14" fill="#64748b">API Tokens</text>
<text x="45" y="395" font-family="Arial" font-size="14" fill="#64748b">Settings</text>
<!-- Main Content Area - Page Header -->
<rect x="220" y="80" width="560" height="50" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="110" font-family="Arial" font-size="16" font-weight="bold" fill="#0f172a">Domains</text>
<!-- Add Domain Button -->
<rect x="650" y="90" width="110" height="30" rx="4" fill="#2563eb" />
<text x="670" y="110" font-family="Arial" font-size="12" fill="white">+ Add Domain</text>
<!-- Domains List -->
<rect x="220" y="150" width="560" height="280" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<!-- Table Header -->
<rect x="220" y="150" width="560" height="40" rx="6" fill="#f8fafc" />
<text x="240" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Domain Name</text>
<text x="390" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Provider</text>
<text x="510" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Records</text>
<text x="580" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Status</text>
<text x="670" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Last Updated</text>
<text x="750" y="175" font-family="Arial" font-size="12" font-weight="bold" fill="#64748b">Actions</text>
<!-- Table Rows -->
<!-- Row 1 -->
<line x1="220" y1="190" x2="780" y2="190" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="215" font-family="Arial" font-size="12" fill="#0f172a">example.com</text>
<text x="390" y="215" font-family="Arial" font-size="12" fill="#0f172a">Cloudflare</text>
<text x="510" y="215" font-family="Arial" font-size="12" fill="#0f172a">12</text>
<circle cx="580" cy="210" r="5" fill="#22c55e" />
<text x="595" y="215" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="670" y="215" font-family="Arial" font-size="12" fill="#64748b">10 min ago</text>
<text x="750" y="215" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
<!-- Row 2 -->
<line x1="220" y1="230" x2="780" y2="230" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="255" font-family="Arial" font-size="12" fill="#0f172a">dev.example.com</text>
<text x="390" y="255" font-family="Arial" font-size="12" fill="#0f172a">Cloudflare</text>
<text x="510" y="255" font-family="Arial" font-size="12" fill="#0f172a">8</text>
<circle cx="580" cy="250" r="5" fill="#22c55e" />
<text x="595" y="255" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="670" y="255" font-family="Arial" font-size="12" fill="#64748b">1 hour ago</text>
<text x="750" y="255" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
<!-- Row 3 -->
<line x1="220" y1="270" x2="780" y2="270" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="295" font-family="Arial" font-size="12" fill="#0f172a">site.io</text>
<text x="390" y="295" font-family="Arial" font-size="12" fill="#0f172a">AWS Route53</text>
<text x="510" y="295" font-family="Arial" font-size="12" fill="#0f172a">15</text>
<circle cx="580" cy="290" r="5" fill="#22c55e" />
<text x="595" y="295" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="670" y="295" font-family="Arial" font-size="12" fill="#64748b">2 days ago</text>
<text x="750" y="295" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
<!-- Row 4 -->
<line x1="220" y1="310" x2="780" y2="310" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="335" font-family="Arial" font-size="12" fill="#0f172a">example.org</text>
<text x="390" y="335" font-family="Arial" font-size="12" fill="#0f172a">GoDaddy</text>
<text x="510" y="335" font-family="Arial" font-size="12" fill="#0f172a">7</text>
<circle cx="580" cy="330" r="5" fill="#f97316" />
<text x="595" y="335" font-family="Arial" font-size="12" fill="#0f172a">Syncing</text>
<text x="670" y="335" font-family="Arial" font-size="12" fill="#64748b">Just now</text>
<text x="750" y="335" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
<!-- Row 5 -->
<line x1="220" y1="350" x2="780" y2="350" stroke="#e2e8f0" stroke-width="1" />
<text x="240" y="375" font-family="Arial" font-size="12" fill="#0f172a">myapp.com</text>
<text x="390" y="375" font-family="Arial" font-size="12" fill="#0f172a">Cloudflare</text>
<text x="510" y="375" font-family="Arial" font-size="12" fill="#0f172a">5</text>
<circle cx="580" cy="370" r="5" fill="#22c55e" />
<text x="595" y="375" font-family="Arial" font-size="12" fill="#0f172a">Active</text>
<text x="670" y="375" font-family="Arial" font-size="12" fill="#64748b">3 days ago</text>
<text x="750" y="375" font-family="Arial" font-size="12" fill="#3b82f6">Manage</text>
<!-- Pagination -->
<text x="240" y="415" font-family="Arial" font-size="12" fill="#64748b">Showing 1-5 of 24 domains</text>
<rect x="650" y="400" width="30" height="25" rx="4" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
<text x="665" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">1</text>
<rect x="685" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="700" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">2</text>
<rect x="720" y="400" width="30" height="25" rx="4" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" />
<text x="735" y="417" font-family="Arial" font-size="12" fill="#64748b" text-anchor="middle">3</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

docs/screenshots/screenshot-guide.md
+44
View File
@@ -0,0 +1,44 @@
# DynamoDNS Application Screenshots
This document provides a visual guide to the DynamoDNS application interface, showing key screens and features.
## Screenshots Collection
### 1. Authentication Page
![Authentication Page](auth-page.png)
The authentication page allows users to log in with their credentials. This page features:
- Username and password fields
- Login button
- Clean, professional design with the DynamoDNS branding
### 2. Dashboard Overview
![Dashboard Overview](dashboard.png)
The main dashboard provides a comprehensive overview of the DNS infrastructure:
- Summary statistics (total domains, DNS records, recent updates)
- Activity graph showing DNS update frequency
- Recent activity log
- Quick access to key functions
### 3. DNS Records Management
![DNS Records](dns-records.png)
The DNS Records page allows users to view and manage DNS records:
- Filterable and sortable table of records
- Record details including type, content, TTL
- Quick actions for editing and toggling records
- Status indicators for active records
### 4. Domains Management
![Domains Management](domains.png)
The Domains page provides domain management functionality:
- List of all domains under management
- Domain status and provider information
- Quick access to domain DNS records
- Domain addition and configuration options
---
These screenshots represent the core functionality of the DynamoDNS application, showcasing its intuitive interface and comprehensive feature set.