Create message.html

templates/message.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% block content %}
+    <h1>Happy Birthday, Manavi!</h1>
+    <p>Little Krishna has a special message for you!</p>
+    <img id="birthday-image" src="" alt="Krishna Birthday Wish" style="max-width: 300px;">
+    <lottie-player src="/static/assets/krishna-lottie.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
+    <p id="birthday-message">Hare Manavi! On April 19, 2025, I’ve come from Vrindavan to wish you a joyous birthday! Ayush says: ‘You’re my sweetest friend, more precious than butter!’</p>
+    <script>
+        document.addEventListener('DOMContentLoaded', async () => {
+            const birthdayImage = document.getElementById('birthday-image');
+            const response = await fetch('/image', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: 'Little Krishna playing flute and wishing happy birthday, cartoon style' })
+            });
+            const data = await response.json();
+            if (data.image_url) {
+                birthdayImage.src = data.image_url;
+            } else {
+                birthdayImage.src = 'https://via.placeholder.com/300x300.png?text=Error+Loading+Image';
+            }
+        });
+    </script>
+    <script src="/static/js/krishna-animation.js"></script>
+{% endblock %}