Add hero section with background gradient and logo to enhance user interface

This commit is contained in:
Edgar P. Burkhart 2025-06-14 13:49:01 +02:00
parent 3042382ae4
commit 9cb4f42d07
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 87 additions and 44 deletions

View file

@ -21,45 +21,47 @@
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">
</head>
<body>
<header>
<div class="container">
<a href="{% url 'index' %}">
<img class="logo"
src="{% static "logo.svg" %}"
height="64"
width="64"
alt="Musik">
</a>
<nav>
<ul>
{% if object.group %}
<li>
<a href="{% url 'group_detail' pk=object.group.pk %}">
<i class="ri-group-2-fill"></i> {{ object.group.name }}
</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li>{{ user.username }}</li>
<li>
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<input type="submit" value="Se déconnecter" class="logout">
</form>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" role="button">Se connecter <i class="ri-login-box-fill"></i></a>
</li>
{% endif %}
</ul>
</nav>
</div>
</header>
<main class="container">
{% for message in messages %}<article class="message {{ message.tags }}">{{ message }}</article>{% endfor %}
{% block content %}
{% endblock content %}
</main>
{% block body %}
<header>
<div class="container">
<a href="{% url 'index' %}">
<img class="logo"
src="{% static "logo.svg" %}"
height="64"
width="64"
alt="Musik">
</a>
<nav>
<ul>
{% if object.group %}
<li>
<a href="{% url 'group_detail' pk=object.group.pk %}">
<i class="ri-group-2-fill"></i> {{ object.group.name }}
</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li>{{ user.username }}</li>
<li>
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<input type="submit" value="Se déconnecter" class="logout">
</form>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" role="button">Se connecter <i class="ri-login-box-fill"></i></a>
</li>
{% endif %}
</ul>
</nav>
</div>
</header>
<main class="container">
{% for message in messages %}<article class="message {{ message.tags }}">{{ message }}</article>{% endfor %}
{% block content %}
{% endblock content %}
</main>
{% endblock body %}
</body>
</html>