Geburtstagstorte: Eine personalisierte Gruß-Webseite

Einführung

Die Geburtstagstorte-Webseite ist eine benutzerfreundliche Plattform, die es Nutzern ermöglicht, personalisierte Geburtstagsgrüße zu erstellen, die mit einer animierten, mehrschichtigen Torte präsentiert werden. Nutzer können den Namen des Geburtstagskindes, eine Nachricht, ein Datum und eine von fünf Tortenfarben (Rosa, Blau, Grün, Rot oder sanfter Regenbogen) angeben. Die Daten werden sicher in einer MySQL-Datenbank gespeichert, und ein eindeutiger, 5-stelliger Link wird generiert, der die Grüße abrufbar macht. Nutzer können den Link kopieren oder direkt per E-Mail versenden, wobei der E-Mail-Client des Nutzers mit einer vorgefertigten Nachricht geöffnet wird. Die Webseite bietet eine intuitive Benutzeroberfläche mit Konfetti-Animationen, einer Sonne mit Puls-Effekt und einer responsiven Gestaltung für Mobilgeräte.

Das Ziel des Projekts

Die Geburtstagstorte-Webseite soll eine einfache und fröhliche Möglichkeit bieten, digitale Geburtstagsgrüße zu erstellen und zu teilen. Die Hauptziele waren:

• Personalisierung: Ermöglicht Nutzern, individuelle Grüße mit Namen, Nachricht, Datum und wählbaren Tortenfarben zu erstellen.
• Benutzerfreundlichkeit: Eine intuitive Oberfläche mit klaren Eingabefeldern, einem Farbauswahl-Dropdown und responsivem Design für Desktop und Mobilgeräte.
• Interaktivität: Animierte Elemente wie Konfetti, eine pulsierende Sonne und eine flackernde Kerze für ein festliches Erlebnis.
• Sicherheit und Datenschutz: Speicherung der Grüße in einer Datenbank mit einem kurzen, eindeutigen Link anstelle sensibler Daten in der URL.
• Teilbarkeit: Generierung eines kurzen Links (max. 5-stellige ID) und Integration einer E-Mail-Funktion für einfaches Teilen.

Technische Umsetzung

Die Geburtstagstorte-Webseite wurde mit modernen Webtechnologien entwickelt:

• Frontend: HTML, CSS und JavaScript für eine responsive Benutzeroberfläche. Die Torte wird mit CSS (`div`-Elemente für Schichten, Sahne und Kerze) animiert, mit Effekten wie einer flackernden Flamme (`animation: flicker`) und Konfetti (`animation: fall`). Ein Formular mit Eingabefeldern für Name, Datum, Nachricht und Farbauswahl (Dropdown) ermöglicht die Eingabe. Die Seite ist für Mobilgeräte optimiert durch Medienabfragen (z. B. `width: 60vw` für Tortenschichten bei `max-width: 600px`).
• Backend: PHP mit PDO für sichere Datenbankabfragen. Eine MySQL-Datenbank (`birthday_greetings`) speichert Grüße in der Tabelle `greetings` mit den Feldern `id` (5-stelliger VARCHAR), `name`, `message`, `date` und `cake_color` (ENUM: `pink`, `blue`, `green`, `red`, `rainbow`). PDO-Transaktionen und vorbereitete Statements verhindern SQL-Injection. Der POST-Handler generiert eine eindeutige 5-stellige ID und speichert die Daten.
• Styling: Ein festliches Design mit einem Farbverlaufshintergrund (`linear-gradient(#aee1f9, #ffffff)`), einer pulsierenden Sonne (`#f9d71c`, `#f39c12`) und Tortenfarben in Abstufungen:
  • Rosa: `#f9a8d4` bis `#fef2f2`.
  • Blau: `#89b4fa` bis `#dbeafe`.
  • Grün: `#86efac` bis `#ecfce8`.
  • Rot: `#f87171` bis `#fee2e2`.
  • Regenbogen: Pastelltöne (`#f9a8d4`, `#a5b4fc`, `#a7f3d0`, `#fef08a`).
  Die Farben werden dynamisch über CSS-Klassen (`cake-pink`, `cake-blue`, etc.) angewendet, basierend auf der gespeicherten `cake_color`.
• Sicherheitsmaßnahmen: Eingaben werden mit `htmlspecialchars` geschützt, um XSS zu verhindern. PDO mit vorbereiteten Statements sichert die Datenbank. Die 5-stellige ID wird mit `mt_rand(10000, 99999)` generiert und auf Eindeutigkeit geprüft (`do-while`-Schleife).
• Interaktive Funktionen:
  • Formular: Eingabefelder für Name, Datum (optional, Standard: aktuelles Datum), Nachricht und Farbauswahl. Ein Button „Link generieren“ speichert die Daten und zeigt einen teilbaren Link.
  • Link: Format `https://goldau.online/torte2.php?id=<5-digit-id>`, wobei die Daten aus der Datenbank geladen werden.
  • E-Mail: Ein „Per E-Mail senden“-Button öffnet den Standard-E-Mail-Client mit einer vorgefertigten Nachricht, die Name, Datum, Nachricht und den Link enthält.
  • Animationen: Konfetti fällt zufällig (`Math.random()` für Position, Farbe, Dauer), die Sonne pulsiert (`animation: pulse`), und die Kerzenflamme flackert (`animation: flicker`).

Ein Highlight ist die visuelle Darstellung der Torte, die je nach gewählter Farbe in sanften Abstufungen oder als Regenbogen-Torte rendert wird, kombiniert mit der einfachen Möglichkeit, Grüße per Link oder E-Mail zu teilen.

Herausforderungen und Lösungen

Die Entwicklung der Geburtstagstorte-Webseite brachte mehrere Herausforderungen:

• Datenbank und ID-Generierung: Eine eindeutige 5-stellige ID zu generieren war schwierig, da nur 90.000 Kombinationen möglich sind. Ein `do-while`-Loop prüft die Eindeutigkeit vor dem Speichern, um Kollisionen zu vermeiden.
• Link-Generierung: Ursprünglich wurden Daten direkt über URL-Parameter übergeben, was Datenschutzprobleme verursachte. Die Lösung war die Speicherung in einer Datenbank mit einer kurzen ID, die per AJAX (`XMLHttpRequest`) generiert wird.
• E-Mail-Integration: Das Erstellen eines anklickbaren Links in der E-Mail war komplex, da einige E-Mail-Clients URLs nicht korrekt rendern. Durch Verwendung eines plaintext-Links im `mailto:`-Body wurde dies gelöst.
• Responsive Design: Die Torte und das Formular mussten auf Mobilgeräten gut aussehen. Medienabfragen (`@media max-width: 600px`) passen die Größen der Torte (`width: 60vw` für Schicht 1) und des Formulars (`width: 80vw`) an.
• Farbabstufungen: Die Farben mussten harmonisch und festlich wirken. Sanfte Pastelltöne wurden für jede Farbe (Rosa, Blau, Grün, Rot) und ein Regenbogen-Schema mit abgestimmten Pastellfarben ausgewählt.

Ergebnisse und Ausblick

Die Geburtstagstorte-Webseite ist eine voll funktionsfähige Plattform, die seit Juli 2025 Nutzern ermöglicht, individuelle Geburtstagsgrüße zu erstellen und zu teilen. Die wichtigsten Funktionen umfassen:

• Personalisierte Grüße: Name, Nachricht, Datum und Farbauswahl (Rosa, Blau, Grün, Rot, Regenbogen) werden in einer MySQL-Datenbank gespeichert.
• Teilbare Links: Ein 5-stelliger Link (`https://goldau.online/torte2.php?id=`) ermöglicht den Zugriff auf die Grüße ohne sensible Daten in der URL.
• E-Mail-Funktion: Nutzer können Grüße direkt per E-Mail mit einem anklickbaren Link versenden.
• Visuelles Design: Eine animierte Torte mit Farbabstufungen, Konfetti und einer pulsierenden Sonne schafft ein festliches Erlebnis.

Zukünftige Erweiterungen könnten umfassen:

• Mehr Farboptionen oder benutzerdefinierte Farben durch einen Farbwähler.
• Zusätzliche Animationen, z. B. Kerzen, die sich bewegen, oder personalisierte Torten-Dekorationen.
• Integration von Grußvorlagen für schnelle Eingaben.
• Mehrsprachige Unterstützung für internationale Nutzer.
• Ein Admin-Bereich zur Verwaltung oder Löschung alter Grüße.

Fazit

Die Entwicklung der Geburtstagstorte-Webseite war eine kreative und technische Herausforderung, die festliches Design mit sicherer Datenverwaltung und benutzerfreundlicher Interaktivität kombiniert. Die Möglichkeit, personalisierte Grüße mit einer animierten Torte zu erstellen und per Link oder E-Mail zu teilen, macht die Seite zu einer einzigartigen Möglichkeit, Freude zu verbreiten. Ich bin stolz darauf, eine Plattform geschaffen zu haben, die Nutzern ein Lächeln ins Gesicht zaubert. Erstelle deinen eigenen Geburtstagsgruß und teile die Feier!