FhirPad/app/templates/landing.html

{% extends "base.html" %}
{% block title %}FHIRPAD Home{% endblock %}
{% block content %}
<div class="px-4 py-5 my-5 text-center">
    <div class="mb-4">
        <img class="d-block mx-auto" src="{{ url_for('static', filename='fhirpad.png') }}" alt="FHIRPAD" width="256" height="256">
    </div>
    <h1 class="display-5 fw-bold text-body-emphasis">Welcome to FHIRPAD</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-2">Discover and share FHIR-based applications to enhance healthcare interoperability.</p>
        <p class="text-muted">Streamline Your FHIR Workflow</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="{{ url_for('gallery.register') }}" class="btn btn-primary btn-lg px-4 me-sm-3">Submit Your App</a>
            <a href="{{ url_for('gallery.gallery') }}" class="btn btn-outline-primary btn-lg px-4">Browse Apps</a>
        </div>
    </div>
</div>

<!-- Featured Apps -->
<div class="container">
    <h2 class="mb-4">Featured Apps</h2>
    {% if featured_apps %}
        <div class="row">
            {% for app in featured_apps %}
                <div class="col-md-4 mb-3">
                    <div class="card app-card shadow-sm h-100">
                        {% if app.logo_url %}
                            <img src="{{ app.logo_url }}" class="card-img-top" alt="{{ app.name }} logo" style="max-height: 150px; object-fit: contain; padding: 1rem;" onerror="this.src='https://via.placeholder.com/150?text=No+Logo';">
                        {% else %}
                            <img src="https://via.placeholder.com/150?text=No+Logo" class="card-img-top" alt="No Logo" style="max-height: 150px; object-fit: contain; padding: 1rem;">
                        {% endif %}
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ app.name }}</h5>
                            <p class="card-text flex-grow-1">{{ app.description | truncate(100) }}</p>
                            <p class="card-text"><small class="text-muted">By {{ app.developer }}</small></p>
                            <div class="d-flex flex-wrap gap-2 mb-2">
                                {% if app.website %}
                                    <a href="{{ app.website }}" class="btn btn-primary btn-sm" target="_blank" rel="noopener noreferrer" aria-label="Visit {{ app.name }} website">Website</a>
                                {% endif %}
                                {% if app.launch_url %}
                                    <a href="{{ app.launch_url }}" class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer" aria-label="Try {{ app.name }} with sandbox data">Try App</a>
                                {% endif %}
                            </div>
                            <a href="{{ url_for('gallery.app_detail', app_id=app.id) }}" class="btn btn-primary mt-auto">View Details</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-muted">No featured apps yet. Be the first to submit one!</p>
    {% endif %}

    <!-- Categories -->
    <h2 class="mt-5 mb-4">Explore by Category</h2>
    {% if categories %}
        <div class="row">
            {% for category in categories %}
                <div class="col-md-3 mb-3">
                    <a href="{{ url_for('gallery.gallery', category=category.id) }}" class="btn btn-outline-secondary w-100">{{ category.name }}</a>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-muted">No categories defined yet.</p>
    {% endif %}
</div>
{% endblock %}