{% extends 'base.html.twig' %}{% block title %}Pneu index{% endblock %}{% block body %} <div id="cover"> {{ form_start(form, { attr: { class: '' } }) }} <div class="row filter"> <img src="{{asset('img/pneu.png')}}" class="pneu-head col-md-12" type="image/svg"> <div class="text-center"> <h4>Trouver mes pneus</h4> </div> <div class="col-6 col-md-2"> {{ form_row(form.largeur, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-2"> {{ form_row(form.hauteur, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-2"> {{ form_row(form.diametre, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-2"> {{ form_row(form.charge, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-2"> {{ form_row(form.vitesse, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-3"> {{ form_row(form.marque, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-3"> {{ form_row(form.saison, { attr: { class: 'form-control' } }) }} </div> <div class="col-6 col-md-3"> {{ form_row(form.specificite, { attr: { class: 'form-control' } }) }} </div> <div class="col-md-3"> <div class="form-group"> <button type="submit" class="btn btn-primary form-control">Rechercher <i class="fa fa-search" aria-hidden="true"></i></button> </div> </div> </div> {{ form_end(form, { 'render_rest': false }) }}</div> <h2 class="text-center"> {# Les pneus disponibles #} </h2> <div class="row"> {% if isset %} {% for pneu in pneus %} <div class=""> <div class="card"> <a class="pneu-card" href="{{ path('app_home_show', {'id': pneu.id}) }}"> <img class="card-img-top p-4" src="/uploads/{{ pneu.image }}" alt="Card image cap"> <div class="card-body"> <span class="text-center p-2" style="display: ruby-text;"><span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star {{ random(['', 'checked']) }}"></span> </span> <h5 class="card-title">{{ pneu.marque }}<br>{{ pneu.modele }} </h5> <p class="card-text">{{ pneu.largeur }}/{{ pneu.hauteur }} {{ pneu.structure }} {{ pneu.diametre }} {{ pneu.charge }} {{ pneu.vitesse }}<br> <b>DOT :</b> {{ pneu.DOT }}<br> <b>Usure:</b> {{ pneu.usure }}</p> {# <span class="btn btn-primary w-100 mb-1">Commander</span></a> #} <div class="text-center"> <b>Prix unitaire</b> {{ pneu.prix }},00 € <br> <a href="{{ path('cart_add', {id: pneu.id}) }}" class="btn btn-primary">ajouter au panier</a> </div> </div> </div> </div> {# <div class="card"> <tr <td>{{ pneu.id }}</td> <td><img alt="" src="/uploads/{{ pneu.image }}"></td> <td>{{ pneu.hauteur }}</td> <td>{{ pneu.largeur }}</td> <td>{{ pneu.diametre }}</td> <td>{{ pneu.charge }}</td> <td>{{ pneu.vitesse }}</td> <td>{{ pneu.saison }}</td> <td>{{ pneu.marque }}</td> <td> <a href="{{ path('app_home_show', {'id': pneu.id}) }}">show</a> <a href="{{ path('app_home_edit', {'id': pneu.id}) }}">edit</a> </td> </tr> #} {% else %} <tr> <td colspan="9">no records found</td> </tr> {% endfor %} {% else %} <div class="col-12 col-md-6"> <p> Bienvenue chez <b>RecoPneus.fr</b> !<br> Découvrez notre sélection de pneumatiques d'occasion de haute qualité ! <br> Chez <b>RecoPneus.fr</b>, nous mettons un point d'honneur à vous offrir des pneus performants et fiables, tout en étant transparents sur leurs caractéristiques techniques. Chaque pneu est soigneusement vérifié pour garantir votre sécurité et votre satisfaction. <br> Pourquoi choisir nos pneumatiques d'occasion ? <br> Qualité Garantie : Nos pneus sont rigoureusement sélectionnés et testés. <br> Économie : Profitez de prix avantageux sans compromis sur la performance. <br> Transparence : Toutes les informations techniques sont clairement affichées pour chaque produit. <br> Roulez en toute confiance avec Recopneus.fr et faites le choix d'une conduite sûre et économique ! </p> </div> <div class="col-12 col-md-6"> <img src="/img/image.jpg" style="width: -webkit-fill-available;"> </div> {% endif %} </div><style> .card{ flex-direction: row; } .card-img-top { width: 300px !important; } .card-body { display: flex; align-items: center; justify-content: space-around; } .pneu-card{ width:300px } @media (min-width: 768px) { .col-md-2 { width: 20% !important; } } /* mobile */ @media only screen and (max-width: 600px) { .card-img-top { width: 120px !important; } .pneu-card{ width:auto; } .card-body {flex-direction: column;} }</style>{% endblock %}