diff --git a/WSR/static/images/garage_1_dalle.jpg b/WSR/static/images/garage_1_dalle.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..013fadbe393cead6f8b7ff7203320d323593866b
Binary files /dev/null and b/WSR/static/images/garage_1_dalle.jpg differ
diff --git a/WSR/static/scss/app.scss b/WSR/static/scss/app.scss
index 60d6d052625bd30645e0e32aac2f12ea3b6fefdc..7e8320d668a814e6396ff7d5480c5fb3a8f3c192 100644
--- a/WSR/static/scss/app.scss
+++ b/WSR/static/scss/app.scss
@@ -9,6 +9,9 @@
// scss-docs-start import-stack
// Configuration
@import "../bootstrap-5.3.0/functions";
+
+$red: #D41010;
+
@import "../bootstrap-5.3.0/variables";
@import "../bootstrap-5.3.0/variables-dark";
@import "../bootstrap-5.3.0/maps";
@@ -61,6 +64,11 @@ body {
line-height: 1;
}
+.bg-blurry-trans-black {
+ background: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(8px);
+}
+
// Other
header {
display: flex;
diff --git a/WSR/static/scss/components.scss b/WSR/static/scss/components.scss
index 436f638101e6bc667ec1e286f206b87ef0037317..6ac10671c6ca3ee0f519de5779b74a6e8d0a3f50 100644
--- a/WSR/static/scss/components.scss
+++ b/WSR/static/scss/components.scss
@@ -23,7 +23,7 @@
}
.vitrine {
- margin-top: 32px;
+ margin-top: map-get($spacers, 4);
display: flex;
flex-direction: row;
gap: map-get($spacers, 3);
@@ -220,4 +220,50 @@ footer {
color: $red;
text-decoration: none;
}
+}
+
+.cars-showcase {
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: map-get($spacers, 3);
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: rgba(152, 152, 152, 0.25);
+ backdrop-filter: blur(16px)
+ }
+
+ .card {
+ width: auto;
+
+ .header {
+ margin-bottom: map-get($spacers, 2);
+ border: $white 2px solid;
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ width: auto;
+ height: auto;
+ }
+ }
+
+ .content {
+ .title {
+ color: $white;
+ font-size: 1.4rem;
+ }
+ .desc {
+ color: $light-gray;
+ line-height: 1;
+ font-size: 0.9rem;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/WSR/templates/base.html b/WSR/templates/base.html
index 5fd82788a4fe787b8ecd156f965f0b2b6ca9d2fb..1d17f3d78f188056afc37e674250e9e95965e494 100644
--- a/WSR/templates/base.html
+++ b/WSR/templates/base.html
@@ -6,7 +6,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
- <title>World Series Racing</title>
+ <title>{% block title %}{% endblock %}</title>
{% compress css %}
<link type="text/x-scss" href="{% static 'scss/app.scss' %}" rel="stylesheet" media="screen">
{% endcompress %}
@@ -26,25 +26,27 @@
{% block content %}{% endblock %}
-<footer class="container">
- <div class="row">
- <div class="col">
- <div class="logo">
- <img src="{% static 'images/WSR.png' %}" alt="Logo WSR">
+<footer class="container-fluid bg-blurry-trans-black">
+ <div class="container">
+ <div class="row">
+ <div class="col">
+ <div class="logo">
+ <img src="{% static 'images/WSR.png' %}" alt="Logo WSR">
+ </div>
+ </div>
+ <div class="col">
+ <p>Copyright 2023 - World Series Racing ou “WSR” est une marque déposée par Codemasters. <br>Ceci est un
+ projet
+ à titre scolaire.</p>
+ </div>
+ <div class="col">
+ <a href="https://www.codemasters.com/" target="_blank">
+ <img src="{% static 'images/codemastersracing.png' %}" alt="Logo Codemasters" width="128">
+ </a>
+ </div>
+ <div class="col">
+ <p>Juin 2023 - Sofiane LASRI-TRIENPONT<br><a href="/admin">Connexion à l'administration</a></p>
</div>
- </div>
- <div class="col">
- <p>Copyright 2023 - World Series Racing ou “WSR” est une marque déposée par Codemasters. <br>Ceci est un
- projet
- à titre scolaire.</p>
- </div>
- <div class="col">
- <a href="https://www.codemasters.com/" target="_blank">
- <img src="{% static 'images/codemastersracing.png' %}" alt="Logo Codemasters" width="128">
- </a>
- </div>
- <div class="col">
- <p>Juin 2023 - Sofiane LASRI-TRIENPONT<br><a href="/admin">Connexion à l'administration</a></p>
</div>
</div>
</footer>
diff --git a/WSR/templates/home.html b/WSR/templates/home.html
index 3fab97a0e1d2975dac59163ff3ae39f60f48bc8d..4c0105b8a0a582efebce2385340333d191ae0b93 100644
--- a/WSR/templates/home.html
+++ b/WSR/templates/home.html
@@ -1,6 +1,8 @@
{% extends 'base.html' %}
{% load static %}
+{% block title %}World Series Racing{% endblock %}
+
{% block content %}
<div class="container vitrine">
<div class="main-frame eurostile">
diff --git a/WSR/templates/vehicles.html b/WSR/templates/vehicles.html
new file mode 100644
index 0000000000000000000000000000000000000000..786f29f88cc2ee558a7346f0c1a4f864ecf41f07
--- /dev/null
+++ b/WSR/templates/vehicles.html
@@ -0,0 +1,39 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}WSR - Véhicules{% endblock %}
+
+{% block content %}
+ <style>
+ body {
+ background-image: url("{% static 'images/garage_1_dalle.jpg' %}");
+ background-size: cover;
+ background-position-x: center;
+ /* Pas bien, mais est-ce pire que de voir les artefacts de DALL-E ? */
+ background-position-y: -545px;
+ background-repeat: no-repeat;
+ }
+ </style>
+ <div class="container mt-4">
+ <div class="p-4 bg-white">
+ <h4 class="eurostile title text-danger">Nos véhicules</h4>
+ <p>En compétition, avoir un bon véhicule est essentiel pour gagner. Nous prenons un soin tout particulier à
+ choisir des partenaires de courses idéals pour nos pilotes.
+ <br>Chaque voiture est minutieusement préparée et réglée aux besoins des pilotes.</p>
+ </div>
+
+ <div class="p-4 mt-4 bg-blurry-trans-black cars-showcase">
+ {% for vehicle in vehicles %}
+ <div class="card">
+ <div class="header">
+ <img src="{% get_media_prefix %}{{ vehicle.image }}" alt="{{ vehicle.brand }} {{ vehicle.model }}">
+ </div>
+ <div class="content">
+ <div class="title eurostile">{{ vehicle.brand }}</div>
+ <div class="desc text-uppercase">{{ vehicle.model }}</div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+{% endblock %}
\ No newline at end of file
diff --git a/WSR/views.py b/WSR/views.py
index 978f3443086237d5b0ba7687e787284292c19276..f43a720c41d3f2ee9c0b04aa652c81a2e55d1700 100644
--- a/WSR/views.py
+++ b/WSR/views.py
@@ -97,7 +97,14 @@ def races_types(request):
return None
def vehicles(request):
- return None
+ vehicles = Vehicle.objects.all()
+ return render(
+ request,
+ 'vehicles.html',
+ {
+ 'vehicles': vehicles
+ }
+ )
def seasons(request):
return None
\ No newline at end of file