schon/engine/core/templates/admin_doc/index.html

{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{% translate 'Documentation' %}{% endblock %}

{% block breadcrumbs %}
    <div class="flex gap-2 items-center px-4 py-3 text-sm text-base-400 dark:text-base-500">
        <a href="{% url 'admin:index' %}" class="hover:text-primary-600 dark:hover:text-primary-500">{% translate 'Home' %}</a>
        <span class="material-symbols-outlined md-18">chevron_right</span>
        <span class="text-base-700 dark:text-base-300">{% translate 'Documentation' %}</span>
    </div>
{% endblock %}

{% block content %}
    <h1 class="font-semibold mb-6 text-xl text-base-900 dark:text-base-100">{% translate 'Documentation' %}</h1>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <a href="models/" class="group border border-base-200 rounded-default bg-white p-5 shadow-xs hover:border-primary-300 hover:shadow-md transition dark:bg-base-900 dark:border-base-800 dark:hover:border-primary-700">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-primary-600 dark:text-primary-500">database</span>
                <h2 class="font-semibold text-base text-base-900 dark:text-base-100">{% translate 'Models' %}</h2>
            </div>
            <p class="text-sm text-base-500 dark:text-base-400">{% translate 'Models are descriptions of all the objects in the system and their associated fields. Each model has a list of fields which can be accessed as template variables' %}.</p>
        </a>

        <a href="views/" class="group border border-base-200 rounded-default bg-white p-5 shadow-xs hover:border-primary-300 hover:shadow-md transition dark:bg-base-900 dark:border-base-800 dark:hover:border-primary-700">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-primary-600 dark:text-primary-500">visibility</span>
                <h2 class="font-semibold text-base text-base-900 dark:text-base-100">{% translate 'Views' %}</h2>
            </div>
            <p class="text-sm text-base-500 dark:text-base-400">{% translate 'Each page on the public site is generated by a view. The view defines which template is used to generate the page and which objects are available to that template.' %}</p>
        </a>

        <a href="tags/" class="group border border-base-200 rounded-default bg-white p-5 shadow-xs hover:border-primary-300 hover:shadow-md transition dark:bg-base-900 dark:border-base-800 dark:hover:border-primary-700">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-primary-600 dark:text-primary-500">code</span>
                <h2 class="font-semibold text-base text-base-900 dark:text-base-100">{% translate 'Tags' %}</h2>
            </div>
            <p class="text-sm text-base-500 dark:text-base-400">{% translate 'List of all the template tags and their functions.' %}</p>
        </a>

        <a href="filters/" class="group border border-base-200 rounded-default bg-white p-5 shadow-xs hover:border-primary-300 hover:shadow-md transition dark:bg-base-900 dark:border-base-800 dark:hover:border-primary-700">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-primary-600 dark:text-primary-500">filter_alt</span>
                <h2 class="font-semibold text-base text-base-900 dark:text-base-100">{% translate 'Filters' %}</h2>
            </div>
            <p class="text-sm text-base-500 dark:text-base-400">{% translate 'Filters are actions which can be applied to variables in a template to alter the output.' %}</p>
        </a>

        <a href="bookmarklets/" class="group border border-base-200 rounded-default bg-white p-5 shadow-xs hover:border-primary-300 hover:shadow-md transition dark:bg-base-900 dark:border-base-800 dark:hover:border-primary-700">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-primary-600 dark:text-primary-500">bookmark</span>
                <h2 class="font-semibold text-base text-base-900 dark:text-base-100">{% translate 'Bookmarklets' %}</h2>
            </div>
            <p class="text-sm text-base-500 dark:text-base-400">{% translate 'Tools for your browser to quickly access admin functionality.' %}</p>
        </a>
    </div>
{% endblock %}