Modernizing the AWStats Interface

[IGLOU-EU]

Hello AWStats team,

First of all, I would like to express my admiration for the excellent work that you have done with AWStats. It's a fantastic software for statistics that has been very useful for many years.

However, as technology has evolved, the AWStats interface has become somewhat outdated. The use of iframes in the interface is no longer necessary and can increase the number of requests, leading to slower loading times.

Therefore, I would like to propose some changes to modernize the AWStats interface while maintaining its excellent functionality. These changes would include updating the design to make it more user-friendly and intuitive, removing unnecessary iframes, and implementing a responsive layout that adapts to different screen sizes.

I understand that this will require significant effort and resources, but I believe that it will be worth it in the long run. A more modern and user-friendly interface will help to attract new users and ensure that AWStats remains relevant in today's fast-paced digital landscape.

Thank you for your consideration, and I look forward to hearing your thoughts on this matter.
Best regards

[JMcrafter26]

I found a somewhat modern design (has darkmode)
https://www.hackitu.de/awstats_theme/

[bouks]

Hi @IGLOU-EU.

I totally agree. It's a great useful software, but really a 1995 feeling. 🥲

I've just made a pull request with few modernizing. Mainly remove the png images like stats color-bars and hours-clocks, defining icons in css. No more blurry images, less requests, less code... They can be redefined in stylesheet ( and, why not, put images bg for those who like images 😝 ). Also changed font to system-ui, convert font-size in em.

It needs to move all visual theming in css with well defined classes. And, BEFORE ALL, remove all those 90's tables that are not tabular datas. I would die for this. 😄 And the brs... 😄 Maybe moving to flex.

Hope it will be merged.

#256

[JMcrafter26]

I agree 😄

But have you considered making it mobile friendly?

[IGLOU-EU]

Congrats @bouks, it was definitively needed. I wanted to know if AWStats are open to it, before working on it. You're taking a risk 😆

Hope, you will be merged.

[bouks]

@JMcrafter26 i was thinking of it. But i was asking myself if these "datas" are easily readable on tiny screens, and also considering the need of "big buttons" for fingers and the number of devices (different resolutions, different dpi, etc.). I'm not hot for this at the moment. :)
I prefer stay on pc, play a little with flex and see.

@IGLOU-EU I just did some few things around few hours. Not much risks. But yeah, some things should be done. I think removing the frame system, using space better in the page, redesigning header and blocks.

I played around with css, but it's very limited, because the lack of identifiers (id, class...) on elements.

[IGLOU-EU]

lack of identifiers ... 🤕

Matomo and goaccess have a very nice design if you need some inspiration

[bouks]

I'd like to remove the bars table and include the bars in the data table. Like this example in the 3 visitors cells :

I think this is cleaner, keep space, and remove a bunch of lines of code.

What do you think ?

@eldy @IGLOU-EU @JMcrafter26

[IGLOU-EU]

I prefer it too, but you'll have to ask the big boss @eldy . I haven't had a chance to participate in AWStats project yet. 🙁

[bouks]

@IGLOU-EU

The month table

Without stylesheet file added.
There's a tiny animation when hovering a line consisting of zooming, and darkening the background.

[bouks]

Flags in utf8, best rendering. No need for images.

[IGLOU-EU]

@bouks I LOVE UTF-8 flags, but it can be a problem. It depends on the user's font and the web client. Not so long, Chromium based used grayscale.

[bouks]

Days and nights

[eldy]

Everything looks great.
PR are welcome, even if project is no more very active...

[bouks]

@eldy 👍

[bouks]

Updated the countries table.

Saw in issues that actual map not functionning anymore, so there's a new worldmap.

[bouks]

A window to the world

[bouks]

1920 screen

[bouks]

awstats.webm

[eldy]

A window to the world

For this one, i prefer the previous one when areay with text and value is on white background.

[bouks]

@eldy Done :)

[IGLOU-EU]

👏

[bouks]

[bouks]

I think it's enjoyable. Emails reports work as well.
I think few things to fix. If someone want to test it.

Need to add options in conf file:

DirImgs="/yourpath" (like icon) (conf also in Apache)
ShowBars=1 (if you want vertical bars)
BarHeight=75 (best) (will disappear)

The colors are in awstats.model.conf for the moment.

StylesheetMode="herited" (maybe not mandatory)

The quality of the video is bad due to the 10MB github limitation.
awstats20240730.webm

[bouks]

The page navigation menu

[bouks]

New colors to map.

• gray : no visit
• brown : visit
• orange : much visit (top xx according to config)
• yellow : hovering

Full list of countries directly accessible in the page by a button on the head table (first row)

[bouks]

Ratios table

[bouks]

Dark mode dedicated to the creatures of the night.

[bouks]

Some screens and pdf about the actual state of my old school coding summer. 😉

1920x1200 screen - Dark Mode - section "when"

1920x1200 screen - Dark Mode - section "navigation"

1920x1200 screen - Dark Mode - section "who"

1920x1200 screen - Dark Mode - section "referer", "status", and footer

Printing (pdf) the main report page (A4, 100%, printing backgrounds, 0.2 inches page margin in printing window)
cococolocompany-main.pdf

[bouks]

@bouks I LOVE UTF-8 flags, but it can be a problem. It depends on the user's font and the web client. Not so long, Chromium based used grayscale.

I set an option in conf file to choose utf8/png version. :)

6b10841

[bouks]

Link to PR changelog : #256 (comment)

[bouks]

I agree 😄

But have you considered making it mobile friendly?

@JMcrafter26

It's fine on my mobile with Firefox.
Just the form is small. Not very fine in Chrome. I'll fix that later.