feat(frontend): Update footer with version info and attribution

- Display app version dynamically from window._env_.APP_VERSION
- Credit original author (vallezw) with link to original repo
- Credit extended version (lotzm) with link to Gitea repo
- Update package.json version to 1.1.0

Footer styling:
- Position fixed at bottom-right corner of viewport
- Unobtrusive design with small font size (11px)
- Semi-transparent background with subtle shadow
- Stays visible while scrolling
- Hover effect on links for better UX

Changes:
- frontend/package.json: version 0.1.0 → 1.1.0
- Footer.js: Dynamic version display, attribution links
- Footer.css: Fixed positioning, responsive styling
This commit is contained in:
Matthias Lotz 2025-11-08 16:22:04 +01:00
parent d25fc58b76
commit ddc7e787b3
3 changed files with 34 additions and 16 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "frontend", "name": "frontend",
"version": "0.1.0", "version": "1.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",

View File

@ -1,25 +1,35 @@
.copyright { .copyright {
text-align:center; text-align: right;
font-size:13px; font-size: 11px;
color:#aaa; color: #808080;
font-family: "Roboto"; font-family: "Roboto", sans-serif;
font-weight: lighter; font-weight: lighter;
margin: 0;
padding-right: 20px;
} }
footer { footer {
position: absolute; position: fixed;
bottom: 0; bottom: 0;
width: 99%; right: 0;
height: 2.5rem; padding: 10px;
background: rgba(255, 255, 255, 0.95);
border-top-left-radius: 8px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
z-index: 100;
} }
a { footer a {
text-align:center; font-size: 11px;
font-size:13px; color: #777;
color:#aaa; font-family: "Roboto", sans-serif;
font-family: "Roboto";
font-weight: lighter; font-weight: lighter;
text-decoration: none; text-decoration: none;
transition: color 0.2s ease;
}
footer a:hover {
color: #333;
text-decoration: underline;
} }

View File

@ -3,9 +3,17 @@ import React from 'react'
import './Css/Footer.css' import './Css/Footer.css'
function Footer() { function Footer() {
const version = window._env_?.APP_VERSION || '1.1.0';
return ( return (
<footer> <footer>
{/*<p className="copyright">Made by <a href="https://github.com/vallezw" target="_blank">Valentin Zwerschke</a> | <a href="https://github.com/vallezw/Image-Uploader" target="_blank" >vallezw/Image-Uploader</a></p>*/} <p className="copyright">
Based on <a href="https://github.com/vallezw/Image-Uploader" target="_blank" rel="noopener noreferrer">Image-Uploader by vallezw</a>
{' | '}
Extended by <a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer">Hobbyhimmel</a>
{' | '}
v{version}
</p>
</footer> </footer>
) )
} }