haikal/templates/inventory/inventory_stats.html

{% extends "base.html" %}
{% load i18n static %}
{% block title %}
    {% trans "Inventory Stats"|capfirst %}
{% endblock %}
{% block content %}

{% block customCSS%}
<style>
.road {
    width: 70%;
    height: 10vh;
    position: relative;
    overflow: hidden; /* This is essential for the animation to work correctly */
  
}

.moving-tenhal {
    position: absolute;
    font-size: 3rem; 
    font-weight: bold;
    color: #2e5466;
    bottom: 20%;
    white-space: nowrap; /* Prevents the text from wrapping to a new line */
    left: 100%; /* Start the text outside the right edge */
    animation: moveText 5s linear infinite alternate;
}

@keyframes moveText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>
{% endblock %}
{% if inventory.total_cars > 0 %}
    <div class="row justify-content-between">
        <div class="col-sm-12 ">
            <div class="card border h-100 w-100 p-lg-10" style="">

                <div class="road">
                      <p class="moving-tenhal ">&nbsp;&nbsp;&nbsp;&nbsp;{% trans "Powered By Tenhal" %}&nbsp;&nbsp;&nbsp;&nbsp;</p>
                 </div>

                <div class="bg-holder bg-card"
                     style="background-image:url({% static 'images/spot-illustrations/32.png' %});
                            background-position: top right"></div>
                <div class="d-dark-none">
                    <div class="bg-holder bg-card me-5"
                         style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %});
                                background-position: bottom right;
                                transform: revert"></div>
                </div>
                <div class="d-light-none">
                    <div class="bg-holder bg-card me-5"
                         style="background-image:url({% static 'images/spot-illustrations/21.png' %});
                                background-position: bottom right;
                                transform: revert"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Total Cars -->
    <div class="row justify-content-center">
        <div class="col-sm-12">
            <!-- Inventory by Makes -->
            <div class="accordion" id="makesAccordion">
                {% for make in inventory.makes %}
                    <div class="accordion-item">
                        <p class="accordion-header" id="heading{{ make.make_id }}">
                            <button class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapse{{ make.make_id }}"
                                    aria-expanded="true"
                                    aria-controls="collapse{{ make.make_id }}">
                                {{ make.make_name }}:&nbsp;
                                <strong>{{ make.total_cars }}</strong>
                            </button>
                        </p>
                        <div id="collapse{{ make.make_id }}"
                             class="accordion-collapse collapse"
                             aria-labelledby="heading{{ make.make_id }}"
                             data-bs-parent="#makesAccordion">
                            <div class="accordion-body">
                                <p>{% trans "models"|capfirst %}</p>
                                <ul class="list-group">
                                    {% for model in make.models %}
                                        <li class="list-group-item">
                                            {{ model.model_name }}:&nbsp;
                                            <strong>{{ model.total_cars }}</strong>
                                            <button class="btn btn-sm btn-link text-decoration-none"
                                                    type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#detailsModel{{ model.model_id }}"
                                                    aria-expanded="false"
                                                    aria-controls="detailsModel{{ model.model_id }}">
                                                {% trans "Details" %}
                                            </button>
                                            <div class="collapse mt-2" id="detailsModel{{ model.model_id }}">
                                                <p class="mt-2">{% trans "Trims" %}</p>
                                                <ul>
                                                    {% for trim in model.trims %}
                                                        <li>
                                                            <a href="{% url 'car_inventory' dealer_slug=request.dealer.slug make_id=make.slug model_id=model.slug trim_id=trim.slug %}">{{ trim.trim_name }}</a>&nbsp;-&nbsp;{% trans "Total" %}:
                                                            <strong>{{ trim.total_cars }}</strong>
                                                        </li>
                                                    {% empty %}
                                                        <li>{% trans "No trims available" %}</li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </li>
                                    {% empty %}
                                        <li class="list-group-item">{% trans "No models available." %}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% if is_paginated %}
                <div class="d-flex justify-content-end mt-3">
                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                </div>
            {% endif %}
        </div>
    </div>

    {% else %}
         {% url "car_add" request.dealer.slug as create_car_url %}
         {% include "empty-illustration-page.html" with value="car" url=create_car_url %}
    {% endif %}
{% endblock %}


{% block customJS%}
<script>

document.addEventListener('DOMContentLoaded', () => {
    const car = document.getElementById('car');
    let positionX = 10;
    const speed = 5;

    document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowRight') {
            positionX += speed;
            car.style.left = positionX + '%';
        } else if (event.key === 'ArrowLeft') {
            positionX -= speed;
            if (positionX < 0) {
                positionX = 0;
            }
            car.style.left = positionX + '%';
        }
    });
});
</script>

{% endblock %}