Files
alphaeusmote ac9b4989fe Show how the application interface looks and the functions it provides
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
2025-05-24 02:28:49 +00:00

114 lines
7.1 KiB
XML

<?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>