search

qdm12 / ddns-updater

Container to update DNS records periodically with WebUI for many DNS providers
https://hub.docker.com/r/qmcgaw/ddns-updater/
MIT License
1.49k stars 146 forks source link

Feature request: Modern looking UI Update #574

Open AdyGCode opened 6 months ago

AdyGCode commented 6 months ago

  1. What's the feature? Update the UI to look more professional

  2. Extra information?

I have spent a little while playing with DDNS-Updater and decided that I'd like to contribute to the project by creating a new UI. As I have no familiarity with Go, I am not sure how to go about (pun intended) updating the source code and packaging a new version for release.

I have no experience with Go, but would like to contribute a modern UI to the DDNS Updater.

I've built my version of the UI using TailwindCSS and HTML5.

I still need to modify a few things, like the places where has been used (deprecated at around the time of xHTML, to change the status "pill" to use the appropriate colour. And pass the status message separately from the status.

I've started to get SVG versions of the DNS Provider Logos to include in the table, those shown are a mix of SVG and PNG/JOG/GIF embedded in SVG files. Would be good to get ONLY SVG versions so that they are in a 512x512 square SVG.

I took the liberty of creating an "empty" logo that is a green question mark.

I'm pushing my code to my fork of the Repo. It's not perfect but. good start.

CleanShot 2023-12-31 at 15 41 46@2x

I am hoping that this looks like a nice update for you to assist me with including in the application.

Thoughts from other users?

PS: my updated loGOpher ;-)

ddns-updater-favicon@0 5x ddns-updater@0 5x

kupernikus87 commented 6 months ago

Your UI Design Looks nice and very modern and fresh for my eyes. ;) I hope it will be include in Future.

qdm12 commented 6 months ago

Awesome and sorry for the big delay answering.

I'm finally back working on this repository this coming week, I'll first work on 'fixes' in the Go code

This does look like a great upgrade, I'll have a look at the code soon!

Make sure if scales okay on vertical screens (mobile) ideally 😉

AdyGCode commented 6 months ago

Awesome and sorry for the big delay answering.

No Problem.

I'm finally back working on this repository this coming week, I'll first work on 'fixes' in the Go code

That's cool.

This does look like a great upgrade, I'll have a look at the code soon!

As I said, I have no Go experience, and there are a couple of things that will need attention, such as having Go include static resources such as logos and a CSS file.

I'm a big believer in using separate files as then you get the advantage of caching in the browser.

Make sure if scales okay on vertical screens (mobile) ideally 😉

I'll work on a version that does not use tables, but flex/grid layout and that will then easily handle mobile.

The horizontal can go to vertical card style, and if people want it, we could also produce a card style for the main UI.

Ady

qdm12 commented 5 months ago

Where's the code 😄?

As I said, I have no Go experience, and there are a couple of things that will need attention, such as having Go include static resources such as logos and a CSS file.

The problem is the ui is served using the Go templating engine. We can however probably adapt it to work with your Tailwind code (as long as it's not tinified etc.). There is no API server to communicate data with the server for the time being (will work on this at some point soon, long overdued).

I'm a big believer in using separate files as then you get the advantage of caching in the browser.

Maybe, but in this case we should really not care 😄

qdm12 commented 4 weeks ago

UI got reworked in b70a91582c8e4f935924173d980addaa40fefb95

You can fork the repo and modify the index.html template internal/server/ui/index.html as well as add files to the internal/server/ui/static directory.