Add social media footer with Font Awesome icons #52

Copilot · 2025-11-26T10:22:41Z

Adds a configurable footer displaying social media icons when corresponding environment variables are set.

Changes Made

Social Media Footer

Added Font Awesome CDN to all HTML pages (index.html, donation.html, requests.html)
Created footer with "Unsere Kanäle:" heading displayed inline with social media icons
Added social media icons for Facebook, Instagram, TikTok, WhatsApp, YouTube, Website, and Email
Footer only displays when at least one social media variable is configured
Added URL validation to prevent javascript: protocol attacks

Environment Variables (.env.example, docker-entrypoint.sh)

SOCIAL_FACEBOOK, SOCIAL_INSTAGRAM, SOCIAL_TIKTOK, SOCIAL_WHATSAPP, SOCIAL_YOUTUBE, SOCIAL_WEBSITE, SOCIAL_EMAIL

Configuration Cleanup (.env.example)

Replaced deprecated DONATION_PAYPAL with DONATION_POOL_ID
Added DONATION_CAMPAIGN_NAME, DONATION_SUBTITLE
Added FPP_SHOW_START_DATE, FPP_SHOW_END_DATE
Replaced FPP_BACKGROUND_EFFECT with FPP_PLAYLIST_IDLE
Updated example values with generic placeholders

Styling (styles.css)

Added .social-footer, .social-icons, .social-icon classes matching existing theme
Removed unused .garland and .bulb styles

Documentation (README.md)

Renamed title to "Falcon Player Web Control"
Added network deployment info (LAN operation, port forwarding, DynDNS)
Added ASCII network topology diagram illustrating the architecture
Updated all environment variable documentation including FPP_PLAYLIST_IDLE
Added documentation for all new social media variables

Screenshot

Original prompt

Die Web-App soll erweitert. Die Änderungen / Erweiterungen sollen zunächst in einem neune Branch umgesetzt werden, sodass ich diese mit dem neuen Branch testen kann, bevor ich sie in den Main branch merge.

Ich hätte gerne die Möglichkeit über Variablen links zu verschiedenen Social Media Anbieter ( Facebook, Instagram, tiktok, Whatsapp, channles, youtube, website, email ) zu hinterlegen.

Passend zum Design der Seite, soll es einen Footer geben, wo die entsprechenden Social media Icons angezeigt werden, sobald die dazu apssende variabel mit Inhalt hinterlegt wurde.
Verwende für die Icons font awsome

Als Einleitenden satz schreibe im Footer "Besucht oder kontaktiert uns auch auf/über:" .
Dieser soll auftauchen, wenn mindestens eine Social Media Variable definiert wurde.

Die Variable sind in der datei .env.example und werden über das docker build in die config.js überführt und anschließen im JS der HTML Seite aufbereitet und eingebaut.

Die Readme soll um die neuen variablen mit entsprechender Erklärung im Kapitel "Konfiguration per .env" ergänzt werden.

Alle notwendigen Dateien sollen mit dem für diese Anforderung notwendigen Code ergäntzt werden.

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

- Add social media environment variables (Facebook, Instagram, TikTok, WhatsApp, YouTube, Website, Email) to .env.example - Update docker-entrypoint.sh to process social media variables - Update config.template.js and config.js with social media properties - Add Font Awesome CDN to all HTML pages - Add footer with social media icons to index.html, donation.html, and requests.html - Add CSS styling for the social media footer - Update README.md with documentation for new variables The footer only appears when at least one social media variable is configured. Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

…media links Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

TimUx · 2025-11-26T10:38:51Z

@copilot in der styles.css sind aktuell noch die garland und bulb styles enthalten, welche ich mit einem borherigen Commit aud den HTML seiten entfernt habe.

Bitte entferne diese nicht mehr verwendeten Styles aus der Datei. Verwende dazu das gleiche Branch

Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot · 2025-11-26T10:41:07Z

@copilot in der styles.css sind aktuell noch die garland und bulb styles enthalten, welche ich mit einem borherigen Commit aud den HTML seiten entfernt habe.

Bitte entferne diese nicht mehr verwendet...

Die .garland und .bulb Styles wurden aus der styles.css entfernt (76c1533).

TimUx · 2025-11-26T14:13:44Z

@copilot Bitte schau dir die .env.example Datei an.hier alte/falsche PayPal Variablen definiert.

in der README sind die aktuellen zu finden.

grob sollte die Datei wie folgt aussehen, nur eben mit anonymisierten Beispiel Daten:

Beispielkonfiguration fuer die Flask-gestuetzte FPP-Steuerung

Werte nach Bedarf anpassen und als ".env" verwenden.

SITE_NAME="🎄 Brauns Lichtershow 🎄"
FPP_BASE_URL="http://192.168.1.46"
FPP_PLAYLIST_SHOW="show"
FPP_PLAYLIST_KIDS="kids"
FPP_PLAYLIST_REQUESTS="wishlist"
FPP_PLAYLIST_IDLE="background"
FPP_POLL_INTERVAL_MS=15000
CLIENT_STATUS_POLL_MS=10000
DONATION_POOL_ID='9ka9j54eyc?sr=wccr'
DONATION_CAMPAIGN_NAME="Ein Licht für Tiere"
DONATION_TEXT="Auch dieses Jahr gehen die Spenden im Sinne "Ein Licht für Tiere" an den Tierschutzverein in Neukirchen und das Tierheim in Alsfeld"
DONATION_SUBTITLE="Unterstütze die Aktion und Spende etwas!"
PREVIEW_MODE=false
ACCESS_CODE=34628
SITE_SUBTITLE="📅 01.-31. Dezember 2025 📅\n⏰ 17-21 Uhr, zur vollen Stunde eine Show ⏰\n🏠 Danziger Straße in Willingshausen 🏠"
FPP_SHOW_START_DATE=2025-12-01
FPP_SHOW_END_DATE=2026-01-06

Social Media Links (optional, leer lassen wenn nicht genutzt)

Icons werden im Footer angezeigt, wenn die Variable einen Wert hat

SOCIAL_FACEBOOK=
SOCIAL_INSTAGRAM=
SOCIAL_TIKTOK=
SOCIAL_WHATSAPP=
SOCIAL_YOUTUBE=
SOCIAL_WEBSITE=
SOCIAL_EMAIL=

Bitte Achte auch darauf, dass alle variablen in Python, Entrypoint JS usw berücksichtigt sind.

- Replace DONATION_PAYPAL with DONATION_POOL_ID - Add DONATION_CAMPAIGN_NAME and DONATION_SUBTITLE - Add FPP_SHOW_START_DATE and FPP_SHOW_END_DATE - Use FPP_PLAYLIST_IDLE instead of FPP_BACKGROUND_EFFECT - Update example values with anonymized data Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot · 2025-11-26T14:16:00Z

@copilot Bitte schau dir die .env.example Datei an.hier alte/falsche PayPal Variablen definiert.

in der README sind die aktuellen zu finden....

Die .env.example wurde aktualisiert (d18aa38):

DONATION_PAYPAL durch DONATION_POOL_ID ersetzt
DONATION_CAMPAIGN_NAME und DONATION_SUBTITLE hinzugefügt
FPP_SHOW_START_DATE und FPP_SHOW_END_DATE hinzugefügt
FPP_BACKGROUND_EFFECT durch FPP_PLAYLIST_IDLE ersetzt

Alle Variablen sind bereits in docker-entrypoint.sh und app.py korrekt verarbeitet.

TimUx · 2025-11-26T14:22:09Z

@copilot Bitte folgende Variablen Inhalte, gegen allgemein passende Beispiel Texte und Konfigurationen ersetzten:

SITE_NAME="🎄 Brauns Lichtershow 🎄"
SITE_SUBTITLE="📅 01.-31. Dezember 2025 📅\n⏰ 17-21 Uhr, zur vollen Stunde eine Show ⏰\n🏠 Danziger Straße in Willingshausen 🏠"
FPP_BASE_URL="http://192.168.1.46"

DONATION_CAMPAIGN_NAME="Ein Licht für Tiere"
DONATION_SUBTITLE="Unterstütze die Aktion und Spende etwas!"
DONATION_TEXT="Auch dieses Jahr gehen die Spenden im Sinne "Ein Licht für Tiere" an den Tierschutzverein"

…mple - SITE_NAME: "Meine Lichtershow" instead of "Brauns Lichtershow" - SITE_SUBTITLE: Generic address and schedule - FPP_BASE_URL: "http://fpp.local" instead of specific IP - DONATION_CAMPAIGN_NAME: Generic "Spendenaktion Lichtershow" - DONATION_SUBTITLE/TEXT: Generic donation messages Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot · 2025-11-26T14:24:05Z

@copilot Bitte folgende Variablen Inhalte, gegen allgemein passende Beispiel Texte und Konfigurationen ersetzten:

SITE_NAME="🎄 Brauns Lichtershow 🎄"...

Die Beispielwerte wurden durch allgemeine Platzhalter ersetzt (7fe32e3):

SITE_NAME: "Meine Lichtershow"
SITE_SUBTITLE: Generische Adresse und Zeiten
FPP_BASE_URL: "http://fpp.local"
DONATION_CAMPAIGN_NAME: "Spendenaktion Lichtershow"
DONATION_SUBTITLE/DONATION_TEXT: Allgemeine Spendentexte

TimUx · 2025-11-26T14:42:45Z

@copilot in der Readme ist noch eine Varibale Background_Effect. Diese gibt es aber nicht mehr. diese wurde ersetzt druch "FPP_PLAYLIST_IDLE="background""

Bitte prüfe alle Variablen der README und passe die README bei bedarf entsprechend an.

Ändere die Überschrift in der README in "Falcon Player Web Control" um.

In der Einleitende Beschreibung ergänze bitte noch, dass dieser Container bzw die Web App sinnigerweise im gleichen LAN wie der Falcon Player betrieben wird. Über Port-Weiterleitungen im Router, DynDNS usw kann die locla betrieben Web Applikation dann für Besucher über das Internet erreichbar gemacht werden ohne direct mit dem Falcon Player kommunizieren zu müssen/können.

Bitte ändere den Satz im Fooer bereich der Social media ab in "Unsere Kanäle" und gib ihm eher ein Überschriftcharakter. vielleicht sogar mit Doppelpunkt links neben die symbole ?

- Rename title to "Falcon Player Web Control" - Add network deployment info (LAN, port forwarding, DynDNS) - Replace FPP_BACKGROUND_EFFECT with FPP_PLAYLIST_IDLE - Change footer text to "Unsere Kanäle:" with heading style - Display title inline with social icons Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot · 2025-11-26T14:46:54Z

@copilot in der Readme ist noch eine Varibale Background_Effect. Diese gibt es aber nicht mehr. diese wurde ersetzt druch "FPP_PLAYLIST_IDLE="background""

Bitte prüfe alle Variablen der README und p...

Änderungen umgesetzt (e5e41e4):

README: Titel geändert zu "Falcon Player Web Control"
README: Netzwerk-Hinweis zu LAN-Betrieb und Port-Weiterleitung ergänzt
README: FPP_BACKGROUND_EFFECT durch FPP_PLAYLIST_IDLE ersetzt
Footer: Text geändert zu "Unsere Kanäle:" als Überschrift, inline neben den Icons

TimUx · 2025-11-26T14:54:39Z

@copilot kannst du vielleicht zum LAN Thema mit Internetzugriff den Zugriffweg über Router usw auf die App, noch ein kleines Topologie bild via text/assci der Beschreibung hinzufügen?

Shows the architecture for accessing the web app from the internet: - Visitors connect via DynDNS/public IP to router - Router forwards port 8080 to FPP Web Control container - Container communicates with Falcon Player in the LAN - Lists benefits of this architecture Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot · 2025-11-26T14:56:42Z

@copilot kannst du vielleicht zum LAN Thema mit Internetzugriff den Zugriffweg über Router usw auf die App, noch ein kleines Topologie bild via text/assci der Beschreibung hinzufügen?

ASCII-Netzwerktopologie zur README hinzugefügt (50a7d2b):

                                    ┌─────────────────────────────────────────────────┐
                                    │              Lokales Netzwerk (LAN)             │
  ┌──────────────┐                  │   ┌─────────────────┐     ┌─────────────────┐   │
  │   Besucher   │   ──────────►    │   │  FPP Web        │ ──► │  Falcon Player  │   │
  │   (Handy)    │   Internet       │   │  Control :8080  │     │  192.168.x.x    │   │
  └──────────────┘                  │   └─────────────────┘     └─────────────────┘   │
         │                          └─────────────────────────────────────────────────┘
         │        ┌─────────────────┐            │
         └──────► │  Router :8080   │ ───────────┘
    DynDNS        └─────────────────┘

Zusätzlich wurden die Vorteile dieser Architektur aufgelistet.

TimUx

Getestet und für gut befunden

Initial plan

2ac29ea

Copilot AI assigned Copilot and TimUx Nov 26, 2025

Copilot started work on behalf of TimUx November 26, 2025 10:23 View session

Copilot AI and others added 2 commits November 26, 2025 10:30

Add URL validation to prevent javascript: protocol attacks in social …

2aa8b6d

…media links Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add footer with social media links and icons~~ Add social media footer with Font Awesome icons Nov 26, 2025

Copilot AI requested a review from TimUx November 26, 2025 10:35

Copilot finished work on behalf of TimUx November 26, 2025 10:35

Copilot started work on behalf of TimUx November 26, 2025 10:39 View session

Remove unused .garland and .bulb styles from styles.css

76c1533

Co-authored-by: TimUx <7571934+TimUx@users.noreply.github.com>

Copilot finished work on behalf of TimUx November 26, 2025 10:42

Copilot started work on behalf of TimUx November 26, 2025 14:14 View session

Copilot finished work on behalf of TimUx November 26, 2025 14:17

Copilot started work on behalf of TimUx November 26, 2025 14:22 View session

Copilot finished work on behalf of TimUx November 26, 2025 14:25

Copilot started work on behalf of TimUx November 26, 2025 14:43 View session

Copilot finished work on behalf of TimUx November 26, 2025 14:48

Copilot started work on behalf of TimUx November 26, 2025 14:55 View session

Copilot finished work on behalf of TimUx November 26, 2025 14:57

TimUx approved these changes Nov 26, 2025

View reviewed changes

TimUx marked this pull request as ready for review November 26, 2025 15:15

TimUx merged commit 4ab67e6 into main Nov 26, 2025

TimUx deleted the copilot/add-social-media-footer branch November 26, 2025 15:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add social media footer with Font Awesome icons #52

Add social media footer with Font Awesome icons #52

Uh oh!

Copilot AI commented Nov 26, 2025 •

edited

Loading

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Add social media footer with Font Awesome icons #52

Add social media footer with Font Awesome icons #52

Uh oh!

Conversation

Copilot AI commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

Screenshot

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Beispielkonfiguration fuer die Flask-gestuetzte FPP-Steuerung

Werte nach Bedarf anpassen und als ".env" verwenden.

Social Media Links (optional, leer lassen wenn nicht genutzt)

Icons werden im Footer angezeigt, wenn die Variable einen Wert hat

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx commented Nov 26, 2025

Uh oh!

Copilot AI commented Nov 26, 2025

Uh oh!

TimUx left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 26, 2025 •

edited

Loading