mirror of
https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git
synced 2025-06-14 12:10:03 +00:00
248 lines
12 KiB
HTML
248 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ app.name }}{% endblock %}
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
<div class="card shadow-sm mx-auto" style="max-width: 900px; border: none; border-radius: 10px; animation: fadeIn 0.5s;">
|
|
<div class="card-body p-4">
|
|
{% if app.logo_url %}
|
|
<img src="{{ app.logo_url }}" alt="{{ app.name }} logo" class="d-block mx-auto mb-3" style="width: 100px; height: 100px; object-fit: contain;" onerror="this.src='https://via.placeholder.com/100?text=No+Logo';">
|
|
{% else %}
|
|
<img src="https://via.placeholder.com/100?text=No+Logo" alt="No Logo" class="d-block mx-auto mb-3" style="width: 100px; height: 100px; object-fit: contain;">
|
|
{% endif %}
|
|
<h1 class="text-center mb-2">{{ app.name }}</h1>
|
|
<h5 class="text-center text-muted mb-3">
|
|
<a href="{{ url_for('gallery.gallery', search=app.developer) }}" class="text-decoration-none">{{ app.developer }}</a>
|
|
</h5>
|
|
<div class="d-flex justify-content-center gap-2 mb-4">
|
|
{% if app.website %}
|
|
<a href="{{ app.website }}" class="btn btn-primary" target="_blank" rel="noopener noreferrer" aria-label="Visit {{ app.name }} website">Website</a>
|
|
{% else %}
|
|
<button class="btn btn-primary" disabled>Website</button>
|
|
{% endif %}
|
|
{% if app.launch_url %}
|
|
<a href="{{ app.launch_url }}" class="btn btn-outline-primary" target="_blank" rel="noopener noreferrer" aria-label="Try {{ app.name }} with sandbox data">Try App</a>
|
|
{% endif %}
|
|
</div>
|
|
<hr class="my-4">
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
{% if app.app_images %}
|
|
<div id="appImagesCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
{% for img_url in app.app_images.split(',') %}
|
|
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
|
<img src="{{ img_url }}" class="d-block w-100" alt="App Screenshot {{ loop.index }}" style="max-height: 300px; object-fit: contain;" onerror="this.src='https://via.placeholder.com/300?text=No+Image';">
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#appImagesCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#appImagesCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
{% else %}
|
|
<img src="https://via.placeholder.com/300?text=No+Image" class="d-block w-100 mb-4" alt="No Image" style="max-height: 300px; object-fit: contain;">
|
|
{% endif %}
|
|
<section class="mb-3">
|
|
<h5>Description</h5>
|
|
<hr class="small-hr">
|
|
<p>{{ app.description or 'No description provided.' }}</p>
|
|
</section>
|
|
<section class="mb-3">
|
|
<h5>Contact Email</h5>
|
|
<hr class="small-hr">
|
|
<p>{{ app.contact_email or 'Not specified.' }}</p>
|
|
</section>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<section class="mb-3">
|
|
<h5>Website</h5>
|
|
<hr class="small-hr">
|
|
<p>
|
|
{% if app.website %}
|
|
<a href="{{ app.website }}" class="text-decoration-none" target="_blank" rel="noopener noreferrer">{{ app.website }}</a>
|
|
{% else %}
|
|
Not specified.
|
|
{% endif %}
|
|
</p>
|
|
</section>
|
|
{% if app.website %}
|
|
<section class="mb-3">
|
|
<h5>Security and Privacy Policy</h5>
|
|
<hr class="small-hr">
|
|
<p><a href="{{ app.website }}/security-and-privacy" class="text-decoration-none" target="_blank" rel="noopener noreferrer">{{ app.website }}/security-and-privacy</a></p>
|
|
</section>
|
|
{% endif %}
|
|
<section class="mb-3">
|
|
<h5>Launch URL</h5>
|
|
<hr class="small-hr">
|
|
<p><a href="{{ app.launch_url }}" class="text-decoration-none" target="_blank" rel="noopener noreferrer">{{ app.launch_url }}</a></p>
|
|
</section>
|
|
<section class="mb-3">
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<h5>Designed For</h5>
|
|
<hr class="small-hr">
|
|
<p>
|
|
{% if app.designed_for %}
|
|
<a href="{{ url_for('gallery.gallery', designed_for=app.designed_for_id) }}" class="text-decoration-none">{{ app.designed_for.name }}</a>
|
|
{% else %}
|
|
Not specified.
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<div class="col-6">
|
|
<h5>FHIR Compatibility</h5>
|
|
<.ttf class="small-hr">
|
|
<p>
|
|
{% if app.fhir_compatibility %}
|
|
<a href="{{ url_for('gallery.gallery', fhir_support=app.fhir_compatibility_id) }}" class="text-decoration-none">{{ app.fhir_compatibility.name }}</a>
|
|
{% else %}
|
|
Not specified.
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="mb-3">
|
|
<h5>OS Support</h5>
|
|
<hr class="small-hr">
|
|
<p>
|
|
{% if app_os_supports %}
|
|
{% for os in app_os_supports %}
|
|
<a href="{{ url_for('gallery.gallery', os_support=os.id) }}" class="text-decoration-none">{{ os.name }}</a>{% if not loop.last %}, {% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
Not specified.
|
|
{% endif %}
|
|
</p>
|
|
</section>
|
|
<section class="mb-3">
|
|
<h5>Categories</h5>
|
|
<hr class="small-hr">
|
|
<p>
|
|
{% if app_categories %}
|
|
{% for category in app_categories %}
|
|
<a href="{{ url_for('gallery.gallery', category=category.id) }}" class="text-decoration-none">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
Not specified.
|
|
{% endif %}
|
|
</p>
|
|
</section>
|
|
<section class="mb-3">
|
|
<h5>Licensing & Pricing</h5>
|
|
<hr class="small-hr">
|
|
<p>
|
|
{% if app.licensing_pricing %}
|
|
<a href="{{ url_for('gallery.gallery', pricing_license=app.licensing_pricing_id) }}" class="text-decoration-none">{{ app.licensing_pricing.name }}</a>
|
|
{% else %}
|
|
Not specified.
|
|
{% endif %}
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% if current_user.is_authenticated and (current_user.is_admin or current_user.id == app.user_id) %}
|
|
<div class="d-flex justify-content-center gap-2 mt-4">
|
|
<a href="{{ url_for('gallery.edit_app', app_id=app.id) }}" class="btn btn-primary" aria-label="Edit {{ app.name }}">Edit App</a>
|
|
<form action="{{ url_for('gallery.delete_app', app_id=app.id) }}" method="POST">
|
|
<button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this app?');" aria-label="Delete {{ app.name }}">Delete App</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 d-flex justify-content-center">
|
|
<a href="mailto:support@fhirpad.com?subject=Report Listing: {{ app.name }}" class="text-danger text-decoration-none" aria-label="Report issue with {{ app.name }} listing">
|
|
<i class="fas fa-exclamation-circle me-1"></i> Report Listing
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.card {
|
|
background-color: #ffffff;
|
|
}
|
|
html[data-theme="dark"] .card {
|
|
background-color: #343a40;
|
|
color: #f8f9fa;
|
|
}
|
|
html[data-theme="dark"] .text-muted {
|
|
color: #adb5bd !important;
|
|
}
|
|
html[data-theme="dark"] hr {
|
|
border-top: 1px solid #495057;
|
|
}
|
|
.small-hr {
|
|
border-top: 1px solid #e0e0e0;
|
|
margin: 0.5rem 0;
|
|
}
|
|
html[data-theme="dark"] .small-hr {
|
|
border-top: 1px solid #495057;
|
|
}
|
|
.carousel-control-prev,
|
|
.carousel-control-next {
|
|
width: 10%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
border-color: #007bff;
|
|
}
|
|
html[data-theme="dark"] .btn-primary {
|
|
background-color: #4dabf7;
|
|
border-color: #4dabf7;
|
|
}
|
|
.btn-outline-primary {
|
|
color: #007bff;
|
|
border-color: #007bff;
|
|
}
|
|
html[data-theme="dark"] .btn-outline-primary {
|
|
color: #4dabf7;
|
|
border-color: #4dabf7;
|
|
}
|
|
.btn-outline-primary:hover {
|
|
THESE BUTTONS ARE CURRENTLY DISABLED ON THE DETAIL PAGE
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
html[data-theme="dark"] .btn-outline-primary:hover {
|
|
background-color: #4dabf7;
|
|
color: white;
|
|
}
|
|
h5 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
p {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.carousel + section {
|
|
margin-top: 0;
|
|
}
|
|
@media (max-width: 576px) {
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
.carousel {
|
|
margin-bottom: 1rem;
|
|
}
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
h5 {
|
|
font-size: 0.95rem;
|
|
}
|
|
p {
|
|
font-size: 0.85rem;
|
|
}
|
|
.row.g-2 > .col-6 {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %} |