130 lines
9.2 KiB
HTML
130 lines
9.2 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% block title %}
|
|
Twitch drops
|
|
{% endblock title %}
|
|
{% block content %}
|
|
<main>
|
|
<h1 id="page-title">Twitch Drops</h1>
|
|
<pre>
|
|
Drops are sorted alphabetically by organization and game. Click on a campaign or game title to see more details.
|
|
Hover over the end time to see the exact date and time.
|
|
</pre>
|
|
{% if campaigns_by_org_game %}
|
|
{% for org_id, org_data in campaigns_by_org_game.items %}
|
|
<section id="org-section-{{ org_id }}">
|
|
<h2>
|
|
{% if org_data.name %}
|
|
{{ org_data.name }}
|
|
{% else %}
|
|
Organization {{ org_id }}
|
|
{% endif %}
|
|
</h2>
|
|
{% for game_id, game_data in org_data.games.items %}
|
|
<article id="game-article-{{ game_id }}">
|
|
<header style="margin-bottom: 1rem;">
|
|
<h3 style="margin: 0 0 0.5rem 0;">
|
|
<a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
|
|
</h3>
|
|
</header>
|
|
<div style="display: flex; gap: 1rem;">
|
|
<div style="flex-shrink: 0;">
|
|
<img src="{{ game_data.box_art }}"
|
|
alt="Box art for {{ game_data.name }}"
|
|
width="200"
|
|
height="267"
|
|
style="border-radius: 8px">
|
|
</div>
|
|
<div style="flex: 1; overflow-x: auto;">
|
|
<div style="display: flex; gap: 1rem; min-width: max-content;">
|
|
{% for campaign in game_data.campaigns %}
|
|
<article id="campaign-article-{{ campaign.id }}"
|
|
style="display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
flex-shrink: 0">
|
|
<div>
|
|
<a href="{% url 'twitch:campaign_detail' campaign.id %}">
|
|
<img src="{{ campaign.image_url }}"
|
|
alt="Image for {{ campaign.name }}"
|
|
width="120"
|
|
height="120"
|
|
style="border-radius: 4px">
|
|
<h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
|
|
</a>
|
|
<time datetime="{{ campaign.end_at|date:'c' }}"
|
|
title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}"
|
|
style="font-size: 0.9rem;
|
|
color: #666;
|
|
display: block;
|
|
text-align: left">
|
|
Ends in {{ campaign.end_at|timeuntil }}
|
|
</time>
|
|
<time datetime="{{ campaign.start_at|date:'c' }}"
|
|
title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}"
|
|
style="font-size: 0.9rem;
|
|
color: #666;
|
|
display: block;
|
|
text-align: left">
|
|
Started {{ campaign.start_at|timesince }} ago
|
|
</time>
|
|
<time datetime="{{ campaign.added_at|date:'c' }}"
|
|
title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}"
|
|
style="font-size: 0.9rem;
|
|
color: #666;
|
|
display: block;
|
|
text-align: left">
|
|
Scraped {{ campaign.added_at|timesince }} ago
|
|
</time>
|
|
<time datetime="{{ campaign.start_at|date:'c' }} to {{ campaign.end_at|date:'c' }}"
|
|
title="{{ campaign.start_at|date:'DATETIME_FORMAT' }} to {{ campaign.end_at|date:'DATETIME_FORMAT' }}"
|
|
style="font-size: 0.9rem;
|
|
color: #666;
|
|
display: block;
|
|
text-align: left">
|
|
Duration: {{ campaign.start_at|timesince:campaign.end_at }}
|
|
</time>
|
|
{% if campaign.allow_channels.all %}
|
|
<div style="margin-top: 0.5rem; font-size: 0.8rem; color: #444;">
|
|
<strong>Channels:</strong>
|
|
<ul style="margin: 0.25rem 0 0 0;
|
|
padding-left: 1rem;
|
|
list-style-type: none">
|
|
{% for channel in campaign.allow_channels.all %}
|
|
{% if forloop.counter <= 5 %}
|
|
<li style="margin-bottom: 0.1rem;">
|
|
<a href="https://twitch.tv/{{ channel.name }}"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style="color: #9146ff;
|
|
text-decoration: none"
|
|
title="Watch {{ channel.display_name }} on Twitch">
|
|
{{ channel.display_name }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if campaign.allow_channels.all|length > 5 %}
|
|
<li style="margin-bottom: 0.1rem; color: #666; font-style: italic;">
|
|
... and {{ campaign.allow_channels.all|length|add:"-5" }} more
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p>No active campaigns at the moment.</p>
|
|
{% endif %}
|
|
</main>
|
|
{% endblock content %}
|