3 files changed, 108 insertions, 0 deletions
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
new file mode 100644
index 00000000..301da10f
--- /dev/null
+++ b/pydis_site/templates/resources/resource_box.html
@@ -0,0 +1,32 @@
+{% load as_icon %}
+
+<div class="box" style="max-width: 800px;">
+    {% if 'title_url' in resource %}
+        <a href="{{ resource.title_url }}">
+            {% include "resources/resource_box_header.html" %}
+        </a>
+    {% else %}
+        {% include "resources/resource_box_header.html" %}
+    {% endif %}
+
+    {# Payment information section #}
+    {% if 'payment' in resource %}
+        <span class="fa-stack fa-1x payment-{{ resource.payment }}{% if 'payment_description' in resource and resource.payment_description != None %} has-tooltip-arrow has-tooltip-multiline" data-tooltip="{{ resource.payment_description }}"{% endif %}">
+            <i class="far fa-sack-dollar fa-stack-{% if resource.payment == "free" %}1{% else %}2{% endif %}x"></i>
+            {% if resource.payment == "free" %}
+                <i class="far fa-ban fa-stack-2x"></i>
+            {% endif %}
+        </span>
+    {% endif %}
+
+    <p class="is-italic">{{ resource.description|safe }}</p>
+
+    {# Icons #}
+    {% for icon in resource.urls %}
+        <span class="icon is-size-4 is-medium" style="margin: 5px;">
+            <a href="{{ icon.url }}">
+                <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i>
+            </a>
+        </span>
+    {% endfor %}
+</div>
diff --git a/pydis_site/templates/resources/resource_box_header.html b/pydis_site/templates/resources/resource_box_header.html
new file mode 100644
index 00000000..84e1a79b
--- /dev/null
+++ b/pydis_site/templates/resources/resource_box_header.html
@@ -0,0 +1,24 @@
+{% load as_icon %}
+
+{# Icon section #}
+{% if 'icon_image' in resource %}
+    <img src="{{ resource.icon_image }}" alt="" style="height: {{ resource.icon_size|default:30 }}px;">
+{% elif 'title_icon' in resource %}
+    <span class="icon is-size-4 is-medium">
+        <i class="{{ resource.title_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ resource.title_icon_color }}"></i>
+    </span>
+{% elif 'default_icon' in category_info %}
+    <span class="icon is-size-4 is-medium">
+        <i class="{{ category_info.default_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ category_info.default_icon_color }}"></i>
+    </span>
+{% endif %}
+
+{# Title section #}
+<span class="is-size-4 has-text-weight-bold">
+    {% if 'title_image' in resource %}
+        <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
+    {% endif %}
+    {% if 'name' in resource %}
+        {{ resource.name }}
+    {% endif %}
+</span>
diff --git a/pydis_site/templates/resources/resources_list.html b/pydis_site/templates/resources/resources_list.html
new file mode 100644
index 00000000..77d25ace
--- /dev/null
+++ b/pydis_site/templates/resources/resources_list.html
@@ -0,0 +1,52 @@
+{% extends "base/base.html" %}
+{% load as_icon %}
+{% load static %}
+
+{% block title %}{{ category_info.name }}{% endblock %}
+{% block head %}
+    <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
+{% endblock %}
+
+{% block content %}
+    {% include "base/navbar.html" %}
+
+    <section class="section breadcrumb-section">
+        <div class="container">
+            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
+                <ul>
+                    <li><a href="{% url "resources:index" %}">Resources</a></li>
+                    <li class="is-active"><a href="#">{{ category_info.name }}</a></li>
+                </ul>
+            </nav>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <div class="content">
+                <h1>{{ category_info.name }}</h1>
+                <p>{{ category_info.description|safe }}</p>
+                <div>
+                    {% for resource in resources %}
+                        {% include "resources/resource_box.html" %}
+                    {% endfor %}
+
+                    {% for subcategory in subcategories %}
+                        <h2 id="{{ subcategory.category_info.raw_name }}">
+                            <a href="{% url "resources:resources" type=category_info.raw_name %}#{{ subcategory.category_info.raw_name }}">
+                                {{ subcategory.category_info.name }}
+                            </a>
+                        </h2>
+                        <p>{{ subcategory.category_info.description|safe }}</p>
+
+                        {% for resource in subcategory.resources %}
+                            {% with category_info=subcategory.category_info %}
+                                {% include "resources/resource_box.html" %}
+                            {% endwith %}
+                        {% endfor %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock %}