xemu-website/templates/template_title.html
Matt Borgerson 944e2c5cad Add executable icons
These images are used to identify game profiles/saves for a given title
on the Xbox console.  Thanks to Cxbx-Reloaded project and users for sourcing
the images.
2022-06-07 21:38:25 -07:00

115 lines
4.2 KiB
HTML

{% extends "template_base.html" %}
{% block title %}{{ title.title_name }} Compatibility{% endblock %}
{% block content %}
<!-- Game Identification -->
<div class="py-5 row flex-md-nowrap text-center text-md-left align-items-center justify-content-center justify-content-md-start">
{% if title.xtimage_url %}
<div class="col-md-auto">
<img src="{{ title.xtimage_url }}" class="rounded-circle img-thumbnail" />
</div>
{% endif %}
<div class="col-md-auto align-self-center">
<h1>{{ title.title_name }}</h1>
<h6 class="card-subtitle mb-2 text-muted">
<strong>{{ title.full_title_id_text }}</strong>
<span class="align-text-top" style="font-family: monospace;">[{{ title.full_title_id_hex }}]</span>
</h6>
</div>
</div>
<div class="row">
<!-- Game Cover -->
<div class="col-md-4 text-center">
<figure class="figure">
<img src="{{ title.cover_url }}" class="img-thumbnail img-fluid" width=350 />
</figure>
</div>
<!-- Compatibility Details -->
<div class="col-md-8">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between">
<div class="list-group w-100">
<div class="d-flex w-100 justify-content-between">
<h5>Status</h5>
<strong>{{ title.status }}</strong>
</div>
<p class="text-muted mb-1">{{ title_status_descriptions[title.status] }}</p>
</div>
</li>
{% if title.most_recent_test %}
<li class="list-group-item d-flex justify-content-between">
<div class="list-group w-100">
<div class="d-flex w-100 justify-content-between">
<h5>Last Tested</h5>
<strong>{{ title.most_recent_test.created_at.strftime('%b %-d, %Y') }}</strong>
</div>
<details>
<summary>
{% if title.most_recent_test.info['provided_by_ip_addr'] %}
<strong>Reported by anonymous user at IP address:</strong> {{ title.most_recent_test.info['provided_by_ip_addr'] }}
{% endif %}
{% if title.most_recent_test.info['provided_by_discord_name'] %}
<strong>Reported by Discord user:</strong> {{ title.most_recent_test.info['provided_by_discord_name'] }}
{% endif %}
</summary>
<pre>
{% for k in title.most_recent_test.info %}{{ k }}: {{ title.most_recent_test.info[k]|e }}
{% endfor %}</pre>
</details>
</div>
</li>
{% endif %}
{% if 'external_links' in title.title_report %}
<li class="list-group-item d-flex justify-content-between">
<div>
<span>External Sites</span>
</div>
<div class="list-group text-right">
<div>
{% for name in title.title_report['external_links'] %}
<a class="btn btn-outline-secondary btn-sm" href="{{ title.title_report['external_links'][name] }}" role="button">{{ name }}</a>
{% endfor %}
</div>
</div>
</li>
{% endif %}
</ul>
{% if False %}
<!-- YouTube Embed -->
<div class="py-2">
<h4>Video Playlist</h4>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/qlU0dgmj46Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
{% endif %}
<!-- Known Issues -->
<div class="py-2">
<h4>Known Issues</h4>
</div>
<div class="list-group">
{% if title.issues|length > 0 %}
{% for issue in title.issues %}
<a href="{{ issue.url }}" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{ issue.title|e }}</h5>
<small>#{{ issue.number }}</small>
</div>
<p class="mb-1 text-small text-muted">Issue last updated {{ issue.updated_at.strftime('%b %-d, %Y') }}.</p>
</a>
{% endfor %}
{% else %}
<div class="list-group-item text-center text-muted text-small">
No issues have been reported for this title.
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}