Simplify DDNS flow and polish UI

router_dyndns/web/styles.py

@@ -544,17 +544,36 @@ select:focus-visible {
   background: var(--rp-field);
 }
 
-.manual-code {
-  overflow-x: auto;
-  padding: 16px;
-  border: 1px solid var(--rp-line);
-  border-radius: 12px;
-  color: var(--rp-terminal-ink);
-  background: var(--rp-terminal);
-  font: 400 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+.copy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.copy-button .copy-icon,
+.copy-button .check-icon,
+.copy-icon-button .copy-icon,
+.copy-icon-button .check-icon,
+.copy-menu-item .copy-icon,
+.copy-menu-item .check-icon,
+.copy-menu .more-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+.check-icon,
+.is-copied .copy-icon {
+  display: none;
+}
+
+.is-copied .check-icon {
+  display: block;
 }
 
 .terminal-card {
+  position: relative;
   display: grid;
   gap: 8px;
   padding: 18px 20px;
@@ -565,6 +584,14 @@ select:focus-visible {
   font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
+.code-window {
+  padding-right: 56px;
+}
+
+.manual-code {
+  overflow-x: auto;
+}
+
 .terminal-card code {
   display: block;
   overflow-wrap: anywhere;
@@ -572,13 +599,151 @@ select:focus-visible {
   font: inherit;
 }
 
+.copy-icon-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  color: var(--rp-muted);
+  background: transparent;
+}
+
+.copy-icon-button:hover,
+.copy-icon-button:focus-visible {
+  color: var(--rp-ink);
+  background: var(--rp-surface-alt);
+}
+
+.copy-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.copy-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+.copy-menu > summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--rp-line);
+  border-radius: 999px;
+  color: var(--rp-muted);
+  background: var(--rp-surface);
+  cursor: pointer;
+  list-style: none;
+}
+
+.copy-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.copy-menu > summary:hover,
+.copy-menu > summary:focus-visible {
+  color: var(--rp-ink);
+  background: var(--rp-surface-alt);
+}
+
+.copy-menu-popover {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 8px);
+  left: 0;
+  display: grid;
+  min-width: 220px;
+  gap: 4px;
+  padding: 8px;
+  border: 1px solid var(--rp-line);
+  border-radius: 12px;
+  background: var(--rp-surface);
+}
+
+.copy-menu-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 10px;
+  color: var(--rp-ink);
+  background: transparent;
+  font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  text-align: left;
+}
+
+.copy-menu-item:hover,
+.copy-menu-item:focus-visible {
+  background: var(--rp-surface-alt);
+}
+
 .site-footer {
-  padding: 32px 0;
+  padding: 28px 0;
   background: var(--rp-canvas);
 }
 
-.site-footer .nav-link:hover {
-  color: var(--rp-ink) !important;
+.footer-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.footer-made {
+  flex: 0 0 auto;
+  color: var(--rp-muted);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px 18px;
+}
+
+.footer-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--rp-muted);
+  font-size: 13px;
+  line-height: 1.4;
+  text-decoration: none;
+}
+
+.footer-link svg {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  opacity: 0.8;
+}
+
+.footer-link:hover,
+.footer-link:focus-visible {
+  color: var(--rp-ink);
+}
+
+.footer-link:focus-visible {
+  border-radius: 999px;
+  outline: 2px solid var(--rp-focus-ring);
+  outline-offset: 4px;
 }
 
 @media (max-width: 860px) {
@@ -679,6 +844,30 @@ select:focus-visible {
     border-radius: 0 0 14px 14px;
   }
 
+  .card .copy-icon-button,
+  .copy-icon-button {
+    width: 34px;
+  }
+
+  .card .copy-menu > summary,
+  .copy-menu > summary {
+    width: 40px;
+  }
+
+  .copy-menu-popover {
+    right: auto;
+    left: 0;
+  }
+
+  .footer-inner {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .footer-links {
+    justify-content: flex-start;
+  }
+
   h1 {
     font-size: 28px;
     line-height: 1.15;