templates/message.html

{% extends "base.html" %}

{% block title %}Birthday Message{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/message.css') }}">
{% endblock %}

{% block content %}
<div class="container">
    <div class="birthday-card">
        {% if is_birthday %}
            <div class="header">
                <h1>Happy Birthday, Manavi!</h1>
                <div class="krishna-image">
                    <img src="{{ birthday_image_url }}" alt="Little Krishna">
                </div>
            </div>
            
            <div class="birthday-message">
                <p>{{ birthday_message }}</p>
                <p class="verse">- {{ verse }}</p>
            </div>
            
            <div class="gift-suggestions">
                <h2>Krishna's Gift Suggestions</h2>
                <ul>
                    {% for suggestion in gift_suggestions %}
                    <li>{{ suggestion }}</li>
                    {% endfor %}
                </ul>
            </div>
            
            <div class="countdown">
                <p>Days until next birthday: {{ countdown }}</p>
            </div>
        {% else %}
            <div class="not-birthday">
                <h2>It's not your birthday yet, Manavi!</h2>
                <p>But Krishna is preparing something special for April 19th!</p>
                <div class="countdown">
                    <p>Only {{ countdown }} days to go!</p>
                </div>
                <div class="krishna-image">
                    <img src="{{ url_for('static', filename='assets/krishna.png') }}" alt="Krishna waiting">
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// You can add any interactive birthday effects here if needed
document.addEventListener('DOMContentLoaded', function() {
    // Confetti effect if it's the birthday
    {% if is_birthday %}
    setTimeout(() => {
        const confettiSettings = { target: 'confetti-canvas' };
        const confetti = new ConfettiGenerator(confettiSettings);
        confetti.render();
        
        // Stop after 5 seconds
        setTimeout(() => confetti.clear(), 5000);
    }, 1000);
    {% endif %}
});
</script>

<!-- Include confetti library if using the effect -->
{% if is_birthday %}
<canvas id="confetti-canvas" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
{% endif %}
{% endblock %}