added logo, url routing and readme

README.md

@@ -0,0 +1,24 @@
+<p align="center">
+  <a href="" rel="noopener">
+ <img height=200px src="https://raw.githubusercontent.com/HaschekSolutions/opendyndns/main/web/imgs/logo-200.png" alt="Open DynDNS"></a>
+</p>
+
+<h1 align="center">Open DynDNS</h1>
+
+
+
+<div align="center">
+
+![](https://img.shields.io/badge/php-8.1%2B-brightgreen.svg)
+![](https://img.shields.io/badge/python-3.11-brightgreen.svg)
+![](https://img.shields.io/badge/made%20with-htmx-brightgreen.svg)
+![](https://img.shields.io/docker/image-size/hascheksolutions/opendyndns/latest?logo=Docker&color=brightgreen)
+[![](https://img.shields.io/docker/pulls/hascheksolutions/opendyndns?color=brightgreen)](https://hub.docker.com/r/hascheksolutions/opendyndns)
+[![](https://github.com/hascheksolutions/opendyndns/actions/workflows/build-docker.yml/badge.svg?color=brightgreen)](https://github.com/HaschekSolutions/opendyndns/actions)
+[![Apache License](https://img.shields.io/badge/license-Apache-blue.svg?style=flat)](https://github.com/HaschekSolutions/opendyndns/blob/main/LICENSE)
+[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FHaschekSolutions%2Fopendyndns&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
+[![](https://img.shields.io/github/stars/HaschekSolutions/opendyndns.svg?label=Stars&style=social)](https://github.com/HaschekSolutions/opendyndns)
+
+#### Selfhosted `dyn DNS` solution with a simple `REST API`
+
+</div>

web/css/opendyndns.css

@@ -1,3 +1,12 @@
+main {
+    margin: 0 auto;
+    padding-top: 0 !important;
+}
+
+article {
+    padding-top: 10px;
+}
+
 tr.htmx-swapping td {
     opacity: 0;
     transition: opacity 1s ease-out;
@@ -32,83 +41,6 @@ tr.htmx-swapping td {
     --form-element-spacing-horizontal: 1rem;
 }
 
-/** dynamic nav bar **/
-
-.topnav {
-    overflow: hidden;
-}
-
-.topnav a {
-    float: left;
-    display: block;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-    font-size: 17px;
-}
-
-.topnav .icon {
-    display: none;
-}
-
-@media screen and (max-width: 775px) {
-    .topnav a:not(:first-child) {
-        display: none;
-    }
-
-    .topnav a.icon {
-        float: right;
-        display: block;
-    }
-}
-
-@media screen and (max-width: 775px) {
-    .topnav.responsive {
-        position: relative;
-    }
-
-    .topnav.responsive a.icon {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-
-    .topnav.responsive a {
-        float: none;
-        display: block;
-        text-align: left;
-    }
-}
-
-/** tab support for admin page **/
-
-[role="tabs"] {
-    display: flex;
-  }
-
-  [role="tabs"] section {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-
-  [role="tabs"] figure {
-    flex-grow: 1;
-    width: 100%;
-    height: 100%;
-    display: none;
-  }
-
-  [role="tabs"] [type="radio"]:checked + figure {
-    display: block;
-  }
-
-  nav[role="tab-control"] label.active {
-    color: var(--primary);
-    cursor: pointer;
-  }
-
-
 /** alert styling **/
 
 .alert-danger {

web/inc/htmx.class.php

@@ -9,7 +9,9 @@ function __construct($url)
 
     function act()
     {
-        $return = match ($this->url[1]) {
+        if($this->url[0]=='htmx')
+            array_shift($this->url);
+        $return = match ($this->url[0]) {
             'host' => $this->renderHost(),
             default => '404',
         };
@@ -18,12 +20,13 @@ function act()
 
     private function renderHost()
     {
-        $hostname = $_REQUEST['hostname'];
-        $domain = $_REQUEST['domain'];
+        $hostname = $_REQUEST['hostname']?:$this->url[1];
+        $domain = $_REQUEST['domain']?:$this->url[2];
         $fulldomain = $hostname.'.'.$domain;
         if(!in_array($domain,explode(',', DOMAINS))) return error('Invalid domain');
         if(!preg_match('/^[a-z0-9-.]+$/',$hostname)) return error('Invalid hostname');
-        $hostdata = getHostData($hostname.'.'.$domain);
+        header('HX-Push-Url: /host/'.$hostname.'/'.$domain);
+        $hostdata = getHostData($fulldomain);
         if($_REQUEST['savedata'])
         {
             $password = $_REQUEST['password'];

web/index.php

@@ -24,7 +24,9 @@
     '',NULL => renderTemplate('index.html',[
         'domains'=>explode(',', DOMAINS),
     ]),
-    default => '404',
+    default => renderTemplate('index.html',[
+        'main'=>(new HTMX($url))->act()
+    ])
 };
 
 echo $return.PHP_EOL;

web/templates/host.html.php

@@ -1,5 +1,7 @@
 <?php if($hostdata['password'] && $_REQUEST['password'] != $hostdata['password'] && $_SESSION[$fulldomain] !==true): ?>
+
     <form hx-post="/htmx/host" hx-target="#main">
+        <h3>This host has a password configured. Please enter it</h3>
         <input type="hidden" name="hostname" value="<?= $hostname ?>">
         <input type="hidden" name="domain" value="<?= $domain ?>">
         <input type="password" name="password" placeholder="Password">
@@ -20,7 +22,7 @@
         <input type="hidden" name="hostname" value="<?= $hostname ?>">
         <input type="hidden" name="domain" value="<?= $domain ?>">
 
-        <label>(optional) Password to protect this domain: <input name="password" value="<?= $hostdata['password'] ?>"></label>
+        <label>(optional) Password to protect this host: <input name="password" value="<?= $hostdata['password'] ?>"></label>
         <label>Note: <input type="text" name="note" value="<?= escape($hostdata['note']) ?>"></label>
         <label>IPv4: <?= escape($hostdata['ipv4'])?:'Not set' ?></label>
         <label>IPv6: <?= escape($hostdata['ipv6'])?:'Not set' ?></label>
@@ -50,8 +52,9 @@
     Add this line to the crontab:
     <pre><code class="language-bash">*/5 * * * * curl <?= $url ?>/api/setip/<?= $fulldomain?> -H "secret:<?= $hostdata['secret']?>"</code></pre>
 
-
-
+    <h6>Clear IP addresses</h6>
+    <pre><code class="language-curl">curl <?= $url ?>/api/clearips/<?= $fulldomain?> \
+-H "secret:<?= $hostdata['secret']?>"</code></pre>
 </article>
 
 <script>hljs.highlightAll();</script>

web/templates/index.html

@@ -8,14 +8,15 @@
     <link rel="stylesheet" href="/css/fontawesome.min.css">
     <link rel="stylesheet" href="/css/atom-one-dark.min.css">
     <link rel="stylesheet" href="/css/opendyndns.css">
+    <script src="/js/highlight.min.js"></script>
     <title>Open DynDNS</title>
 </head>
 
 <body>
     <nav>
         <ul></ul>
         <ul>
-            <li><strong>Open DynDNS</strong></li>
+            <li class="text-center"><a href="/"><img src="/imgs/logo-200.png" alt="Open DynDNS" class="logo"><br/><strong>Open DynDNS</strong></a></li>
         </ul>
         <ul></ul>
     </nav>
@@ -24,6 +25,12 @@
 
     <main id="main" class="container">
 
+        <?php if(isset($main)): ?>
+
+            <?= $main; ?>
+
+        <?php else: ?>
+
         <article>
             <h3 class="text-center">Choose your subdomain</h3>
             <form hx-post="/htmx/host" hx-target="#main">
@@ -42,11 +49,11 @@ <h3 class="text-center">Choose your subdomain</h3>
             </form>
         </article>
 
+        <?php endif; ?>
     </main>
 
     <script src="/js/opendyndns.js"></script>
     <script src="/js/htmx.min.js"></script>
-    <script src="/js/highlight.min.js"></script>
     <script src="/js/curl.min.js"></script>
 </body>