diff --git a/core/templates/base.html b/core/templates/base.html
index 18c7187..137c9f8 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -28,14 +28,14 @@
<article class="container mt-5">
<header class="d-flex justify-content-between align-items-center py-3 border-bottom">
<h1 class="h2">
- <a href='{% url "core:index" %}' class="text-decoration-none">Twitch drops</a>
+ <a href='{% url "core:index" %}' class="text-decoration-none nav-title">Twitch drops</a>
</h1>
<nav>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href='{% url "api-1.0.0:openapi-view" %}'>API</a>
</li>
- <li class="nav-item">
+ <li class="nav-item d-none d-sm-block">
<a class="nav-link" href="https://github.com/sponsors/TheLovinator1">Donate</a>
</li>
<li>
@@ -54,6 +54,7 @@
</nav>
</header>
{% block content %}
+ <p>Content goes here</p>
{% endblock content %}
</article>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
diff --git a/core/templates/index.html b/core/templates/index.html
index 0a43fdf..1668f98 100644
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -9,8 +9,8 @@
<img src="{{ game.image_url }}"
alt="{{ game.display_name }}"
class="img-fluid rounded-start"
- height="100"
- width="100"
+ height="150"
+ width="150"
loading="lazy">
</div>
<div class="col-md-4">
@@ -21,47 +21,39 @@
</h2>
</div>
</div>
- <div class="col-md-6">
- {% if discord_settings %}
- <div class="card-body">
- <form action='{% url "core:subscription_create" %}'
- method="post"
- class="mb-2">
- {% csrf_token %}
- <input type="hidden" name="game_id" value="{{ game.id }}">
- <select name="discord_webhook" class="form-select">
- {% for discord_setting in discord_settings %}
- <option value="{{ discord_setting.id }}">{{ discord_setting.name }}</option>
- {% endfor %}
- </select>
- <div>
- <a href="#" class="card-link mt-2">Notify when new drop are found</a>
- </div>
- <div>
- <a href="#" class="card-link mt-2">Notify when the drop is live</a>
- </div>
- </form>
+ </div>
+ <div class="card-body card-bottom">
+ {% if discord_settings %}
+ <div class="card-body">
+ <div>Available on iOS: {{ game_data.ios_available|yesno:"Yes,No" }}</div>
+ </div>
+ {% else %}
+ <div class="card-body text-end">
+ <a href="{% url 'core:add_discord_webhook' %}" class="card-link">Add Discord settings</a>
+ </div>
+ {% endif %}
+ </div>
+ <div class="card-body card-bottom">
+ <div class="row">
+ {% for drop_benefit in game_data.drop_benefits %}
+ <div class="col-6 col-md-4 d-flex align-items-center mb-2 position-relative">
+ <img src="{{ drop_benefit.image_asset_url }}"
+ alt="{{ drop_benefit.name }}"
+ class="img-fluid rounded me-3"
+ height="50"
+ width="50"
+ loading="lazy">
+ {# Only show the entitlement limit if it's not None or above 1 #}
+ {% if drop_benefit.entitlement_limit > 1 %}
+ <span class="badge bg-primary position-absolute top-100 start-20 translate-middle">{{ drop_benefit.entitlement_limit }}
+ <span class="visually-hidden">limit per account</span>
+ </span>
+ {% endif %}
+ {{ drop_benefit.name }}
</div>
- {% else %}
- <div class="card-body text-end">
- <a href="{% url 'core:add_discord_webhook' %}" class="card-link">Add Discord settings</a>
- </div>
- {% endif %}
+ {% endfor %}
</div>
</div>
- <ul class="list-group list-group-flush">
- {% for drop_benefit in game_data.drop_benefits %}
- <li class="list-group-item d-flex align-items-center">
- <img src="{{ drop_benefit.image_asset_url }}"
- alt="{{ drop_benefit.name }}"
- class="img-fluid rounded me-3"
- height="50"
- width="50"
- loading="lazy">
- <a href="{{ drop_benefit.details_url }}" class="text-decoration-none">{{ drop_benefit.name }}</a>
- </li>
- {% endfor %}
- </ul>
</div>
{% endfor %}
</div>
diff --git a/static/css/style.css b/static/css/style.css
index a0f2b3c..bb2ece4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,8 +1,10 @@
+/* Make background color darker and text white */
body {
background-color: #0c0c0c;
color: #ffffff;
}
+/* Make links white */
a {
color: #ffffff;
}
@@ -19,43 +21,37 @@ a:hover {
color: #e91e63;
}
+/* Make the logo text pink */
+.nav-title {
+ color: #e91e63;
+}
+
+/* Top half of the card */
.card {
background-color: #111111;
- border: 1px solid #111111;
+ border: 1px solid #000000;
}
-.card-title a {
- color: #ffffff;
-}
-.card-title a:hover {
- color: #e91e63;
-}
-
-.alert {
- background-color: #333333;
- border-color: #444444;
-}
-
-.list-group-item {
+/* Bottom half of the card */
+.card-bottom {
background-color: #141414;
- border: 1px solid #141414;
-}
-
-.list-group-item a {
- color: #ffffff;
-}
-
-.list-group-item a:hover {
- color: #e91e63;
+ border-top: 1px solid #000000;
}
.btn-primary {
- background-color: #06172e;
- border-color: #000c1d;
+ background-color: #e91e63;
+ border-color: #111111;
}
.btn-primary:hover {
- background-color: #040e1d;
- border-color: #000c1d;
+ background-color: #af1548;
+ border-color: #111111;
+}
+
+/* Django alerts */
+/* https://docs.djangoproject.com/en/5.0/ref/contrib/messages/ */
+.alert {
+ background-color: #181818;
+ border-color: #444444;
}
diff --git a/static/css/bootstrap.min.js b/static/js/bootstrap.min.js
similarity index 100%
rename from static/css/bootstrap.min.js
rename to static/js/bootstrap.min.js
diff --git a/static/css/bootstrap.min.js.map b/static/js/bootstrap.min.js.map
similarity index 100%
rename from static/css/bootstrap.min.js.map
rename to static/js/bootstrap.min.js.map