Joakim Hellsén
a74b550406
All checks were successful
Deploy to Server / deploy (push) Successful in 27s
348 lines
24 KiB
HTML
348 lines
24 KiB
HTML
{% extends "base.html" %}
|
||
{% load image_tags %}
|
||
{% block title %}
|
||
Drops Dashboard
|
||
{% endblock title %}
|
||
{% block extra_head %}
|
||
<link rel="alternate"
|
||
type="application/rss+xml"
|
||
title="All Twitch campaigns (RSS)"
|
||
href="{% url 'core:campaign_feed' %}" />
|
||
<link rel="alternate"
|
||
type="application/atom+xml"
|
||
title="All Twitch campaigns (Atom)"
|
||
href="{% url 'core:campaign_feed_atom' %}" />
|
||
<link rel="alternate"
|
||
type="application/atom+xml"
|
||
title="All Twitch campaigns (Discord)"
|
||
href="{% url 'core:campaign_feed_discord' %}" />
|
||
<link rel="alternate"
|
||
type="application/rss+xml"
|
||
title="All Kick campaigns (RSS)"
|
||
href="{% url 'kick:campaign_feed' %}" />
|
||
<link rel="alternate"
|
||
type="application/atom+xml"
|
||
title="All Kick campaigns (Atom)"
|
||
href="{% url 'kick:campaign_feed_atom' %}" />
|
||
<link rel="alternate"
|
||
type="application/atom+xml"
|
||
title="All Kick campaigns (Discord)"
|
||
href="{% url 'kick:campaign_feed_discord' %}" />
|
||
{% endblock extra_head %}
|
||
{% block content %}
|
||
<style>
|
||
.campaign-entry:hover {
|
||
background: color-mix(in srgb, CanvasText 5%, transparent 95%);
|
||
}
|
||
</style>
|
||
<main>
|
||
<h1>Open Drop Campaigns</h1>
|
||
<p>
|
||
Some Drops campaigns may not be available in your region.
|
||
<a href="https://help.twitch.tv/s/article/mission-based-drops">Learn more about Drops</a>.
|
||
</p>
|
||
<hr />
|
||
<section id="twitch-campaigns-section">
|
||
<header style="margin-bottom: 1rem;">
|
||
<h2 style="margin: 0 0 0.5rem 0;">Twitch Campaigns</h2>
|
||
<div>
|
||
<a href="{% url 'core:campaign_feed' %}"
|
||
title="RSS feed for all Twitch campaigns">[rss]</a>
|
||
<a href="{% url 'core:campaign_feed_atom' %}"
|
||
title="Atom feed for Twitch campaigns">[atom]</a>
|
||
<a href="{% url 'core:campaign_feed_discord' %}"
|
||
title="Discord feed for Twitch campaigns">[discord]</a>
|
||
<a href="{% url 'api-v1:twitch-api-v1_list_campaigns' %}"
|
||
title="Twitch campaigns API">[api]</a>
|
||
<a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
|
||
</div>
|
||
</header>
|
||
{% if campaigns_by_game %}
|
||
{% for game_id, game_data in campaigns_by_game.items %}
|
||
<article id="twitch-game-article-{{ game_id }}"
|
||
style="margin-bottom: 2rem;
|
||
border: 1px solid color-mix(in srgb, CanvasText 25%, transparent 75%);
|
||
border-radius: 6px;
|
||
padding: 1rem;">
|
||
<header style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;">
|
||
<a href="{% url 'twitch:game_detail' game_id %}" style="flex-shrink: 0; line-height: 0;">
|
||
{% picture game_data.box_art alt="Box art for "|add:game_data.name width=72 %}
|
||
</a>
|
||
<div>
|
||
<h3 style="margin: 0; font-size: 1.5rem;">
|
||
<a href="{% url 'twitch:game_detail' game_id %}" style="text-decoration: none; color: inherit;">{{ game_data.name }}</a>
|
||
</h3>
|
||
{% if game_data.owners %}
|
||
<div style="font-size: 1.1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">
|
||
{% for org in game_data.owners %}
|
||
<a href="{% url 'twitch:organization_detail' org.twitch_id %}" style="color: inherit;">{{ org.name }}</a>
|
||
{% if not forloop.last %}, {% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</header>
|
||
<div style="overflow-x: auto; padding: 0.25rem 0;">
|
||
<div style="display: flex; gap: 1rem; min-width: max-content;">
|
||
{% for campaign_data in game_data.campaigns %}
|
||
<article class="campaign-entry" style="display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
width: 450px;
|
||
padding: 0.9rem;
|
||
border-radius: 8px;">
|
||
<div style="display: flex; gap: 1rem;">
|
||
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}"
|
||
style="flex-shrink: 0; line-height: 0;">
|
||
{% picture campaign_data.campaign.image_best_url|default:campaign_data.campaign.image_url alt="Image for "|add:campaign_data.campaign.name width=120 %}
|
||
</a>
|
||
<div style="flex: 1; min-width: 0;">
|
||
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}"
|
||
style="text-decoration: none; color: inherit;">
|
||
<h4 style="margin: 0 0 0.2rem 0; font-size: 1.3rem; line-height: 1.2;">{{ campaign_data.campaign.clean_name }}</h4>
|
||
</a>
|
||
{% if campaign_data.publisher %}
|
||
<div style="font-size: 1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">{{ campaign_data.publisher }}</div>
|
||
{% endif %}
|
||
<div style="font-size: 0.9rem; color: color-mix(in srgb, CanvasText 70%, transparent 30%); margin-top: 0.4rem;">
|
||
{% if campaign_data.watch_range %}{{ campaign_data.watch_range }} · {% endif %}
|
||
ends in {{ campaign_data.campaign.end_at|timeuntil }}
|
||
</div>
|
||
<div style="font-size: 0.85rem; margin-top: 0.1rem;">
|
||
{% if campaign_data.allowed_channels %}
|
||
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}#allowed-channels"
|
||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||
{{ campaign_data.allowed_channels.0.display_name }}{% if campaign_data.allowed_channels|length > 1 %} +{{ campaign_data.allowed_channels|length|add:'-1' }} more{% endif %}
|
||
</a>
|
||
{% else %}
|
||
<a href="{{ campaign_data.campaign.game.twitch_directory_url }}"
|
||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||
any channel
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% if campaign_data.benefits %}
|
||
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;">
|
||
{% for benefit in campaign_data.benefits %}
|
||
<span style="display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-size: 1.1rem; background: color-mix(in srgb, CanvasText 8%, transparent 92%); border-radius: 6px;">
|
||
{% if benefit.image_best_url %}
|
||
<img src="{{ benefit.image_best_url }}"
|
||
alt="{{ benefit.name }}"
|
||
style="width: 30px; height: 30px; border-radius: 4px; object-fit: contain;"
|
||
loading="lazy" />
|
||
{% endif %}
|
||
{{ benefit.name }}
|
||
</span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</article>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</article>
|
||
{% endfor %}
|
||
{% else %}
|
||
<p>No active Twitch campaigns at the moment.</p>
|
||
{% endif %}
|
||
</section>
|
||
{% if active_reward_campaigns %}
|
||
<section id="reward-campaigns-section"
|
||
style="margin-top: 2rem;
|
||
border-top: 2px solid #ddd;
|
||
padding-top: 1rem">
|
||
<header style="margin-bottom: 1rem;">
|
||
<h2 style="margin: 0 0 0.5rem 0;">
|
||
<a href="{% url 'twitch:reward_campaign_list' %}">Open Reward Campaigns</a>
|
||
</h2>
|
||
<p>
|
||
Rewards are limited-time offers from top brands that you can unlock by
|
||
supporting your favorite Twitch creators. Visit <a href="https://www.twitch.tv/drops/inventory">your inventory</a>
|
||
to access unlocked rewards.
|
||
</p>
|
||
</header>
|
||
<ul>
|
||
{% for campaign in active_reward_campaigns %}
|
||
<li id="reward-campaign-{{ campaign.twitch_id }}"
|
||
style="display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
align-items: flex-start">
|
||
<a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}"
|
||
style="flex-shrink: 0;
|
||
display: block;
|
||
line-height: 0">
|
||
{% picture campaign.image_best_url alt="Image for "|add:campaign.name width=120 %}
|
||
</a>
|
||
<div>
|
||
<h3 style="margin: 0;">
|
||
<a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}">
|
||
{% if campaign.brand %}
|
||
{{ campaign.brand }}: {{ campaign.name }}
|
||
{% else %}
|
||
{{ campaign.name }}
|
||
{% endif %}
|
||
</a>
|
||
</h3>
|
||
{% if campaign.ends_at %}
|
||
<p style="margin: 0.25rem 0;">
|
||
<strong>Ends:</strong>
|
||
<time datetime="{{ campaign.ends_at|date:'c' }}"
|
||
title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
|
||
{{ campaign.ends_at|date:"M d, Y H:i" }}
|
||
</time>
|
||
</p>
|
||
{% endif %}
|
||
{% if campaign.game %}
|
||
<p style="margin: 0.25rem 0;">
|
||
<strong>Game:</strong>
|
||
<a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.display_name }}</a>
|
||
</p>
|
||
{% elif campaign.is_sitewide %}
|
||
<p style="margin: 0.25rem 0;">
|
||
<strong>Type:</strong> Site-wide reward campaign
|
||
</p>
|
||
{% endif %}
|
||
{% if campaign.summary %}
|
||
<p>{{ campaign.summary }}</p>
|
||
{% endif %}
|
||
</div>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</section>
|
||
{% endif %}
|
||
<section id="kick-campaigns-section"
|
||
style="margin-top: 2rem;
|
||
border-top: 2px solid #ddd;
|
||
padding-top: 1rem">
|
||
<header style="margin-bottom: 1rem;">
|
||
<h2 style="margin: 0 0 0.5rem 0;">Kick Campaigns</h2>
|
||
<div>
|
||
<a href="{% url 'kick:campaign_feed' %}"
|
||
title="RSS feed for all Kick campaigns">[rss]</a>
|
||
<a href="{% url 'kick:campaign_feed_atom' %}"
|
||
title="Atom feed for all Kick campaigns">[atom]</a>
|
||
<a href="{% url 'kick:campaign_feed_discord' %}"
|
||
title="Discord feed for all Kick campaigns">[discord]</a>
|
||
<a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
|
||
</div>
|
||
</header>
|
||
{% if kick_campaigns_by_game %}
|
||
{% for game_id, game_data in kick_campaigns_by_game.items %}
|
||
<article id="kick-game-article-{{ game_id }}"
|
||
style="margin-bottom: 2rem;
|
||
border: 1px solid color-mix(in srgb, CanvasText 25%, transparent 75%);
|
||
border-radius: 6px;
|
||
padding: 1rem;">
|
||
<header style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;">
|
||
{% if game_data.image %}
|
||
<img src="{{ game_data.image }}"
|
||
width="48"
|
||
height="48"
|
||
alt="Image for {{ game_data.name }}"
|
||
style="width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0;" />
|
||
{% endif %}
|
||
<div>
|
||
<h3 style="margin: 0; font-size: 1.5rem;">
|
||
{% if game_data.kick_id %}
|
||
<a href="{% url 'kick:game_detail' game_data.kick_id %}" style="text-decoration: none; color: inherit;">{{ game_data.name }}</a>
|
||
{% elif game_data.organizations %}
|
||
{% for org in game_data.organizations %}
|
||
<a href="{% url 'kick:organization_detail' org.kick_id %}" style="text-decoration: none; color: inherit;">{{ org.name }}</a>
|
||
{% if not forloop.last %}, {% endif %}
|
||
{% endfor %}
|
||
{% else %}
|
||
{{ game_data.name }}
|
||
{% endif %}
|
||
</h3>
|
||
{% if game_data.kick_id and game_data.organizations %}
|
||
<div style="font-size: 1.1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">
|
||
{% for org in game_data.organizations %}
|
||
<a href="{% url 'kick:organization_detail' org.kick_id %}" style="color: inherit;">{{ org.name }}</a>
|
||
{% if not forloop.last %}, {% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</header>
|
||
<div style="overflow-x: auto; padding: 0.25rem 0;">
|
||
<div style="display: flex; gap: 1rem; min-width: max-content;">
|
||
{% for campaign_data in game_data.campaigns %}
|
||
{% with rewards=campaign_data.rewards %}
|
||
{% with min_watch=rewards.0.required_units|default:0 max_watch=rewards.last.required_units|default:0 %}
|
||
<article class="campaign-entry" style="display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
width: 450px;
|
||
padding: 0.9rem;
|
||
border-radius: 8px;">
|
||
<div style="display: flex; gap: 1rem;">
|
||
<a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}"
|
||
style="flex-shrink: 0; line-height: 0;">
|
||
{% if campaign_data.campaign.image_url %}
|
||
<img src="{{ campaign_data.campaign.image_url }}"
|
||
width="120"
|
||
height="120"
|
||
alt="Image for {{ campaign_data.campaign.name }}"
|
||
style="width: 120px; height: 120px; border-radius: 8px; object-fit: cover;" />
|
||
{% endif %}
|
||
</a>
|
||
<div style="flex: 1; min-width: 0;">
|
||
<a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}"
|
||
style="text-decoration: none; color: inherit;">
|
||
<h4 style="margin: 0 0 0.2rem 0; font-size: 1.3rem; line-height: 1.2;">{{ campaign_data.campaign.name }}</h4>
|
||
</a>
|
||
{% if campaign_data.campaign.organization %}
|
||
<div style="font-size: 1rem; color: color-mix(in srgb, CanvasText 75%, transparent 25%);">{{ campaign_data.campaign.organization.name }}</div>
|
||
{% endif %}
|
||
<div style="font-size: 0.9rem; color: color-mix(in srgb, CanvasText 70%, transparent 30%); margin-top: 0.4rem;">
|
||
{% if min_watch %}{% if min_watch == max_watch %}{{ min_watch }}m watch{% else %}{{ min_watch }}m–{{ max_watch }}m watch{% endif %} · {% endif %}
|
||
ends in {{ campaign_data.campaign.ends_at|timeuntil }}
|
||
</div>
|
||
<div style="font-size: 0.85rem; margin-top: 0.1rem;">
|
||
{% if campaign_data.channels %}
|
||
<a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}#allowed-channels"
|
||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||
{{ campaign_data.channels.0.user.username|default:campaign_data.channels.0.slug }}{% if campaign_data.channels|length > 1 %} +{{ campaign_data.channels|length|add:'-1' }} more{% endif %}
|
||
</a>
|
||
{% else %}
|
||
<a href="{{ campaign_data.campaign.url }}"
|
||
style="color: color-mix(in srgb, CanvasText 60%, transparent 40%); text-decoration: none;">
|
||
any channel
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% if rewards %}
|
||
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;">
|
||
{% for reward in rewards %}
|
||
<span style="display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-size: 1.1rem; background: color-mix(in srgb, CanvasText 8%, transparent 92%); border-radius: 6px;">
|
||
{% if reward.full_image_url %}
|
||
<img src="{{ reward.full_image_url }}"
|
||
alt="{{ reward.name }}"
|
||
style="width: 30px; height: 30px; border-radius: 4px; object-fit: contain;"
|
||
loading="lazy" />
|
||
{% endif %}
|
||
{{ reward.name }}
|
||
</span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</article>
|
||
{% endwith %}
|
||
{% endwith %}
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</article>
|
||
{% endfor %}
|
||
{% else %}
|
||
<p>No active Kick campaigns at the moment.</p>
|
||
{% endif %}
|
||
</section>
|
||
</main>
|
||
{% endblock content %}
|