Working on the homepage

2026-04-29 15:55:21 +01:00
parent 53aa345082
commit 89cc867c7d
29 changed files with 360 additions and 58 deletions
@@ -0,0 +1,124 @@
+<div class="container py-5">
+    <div class="text-center mb-5">
+        <h2 class="fw-bold text-primary">Our Recent Jobs</h2>
+        <p class="lead">Take a look at some of our recent jobs.</p>
+    </div>
+
+    <div id="jobsCarousel" class="carousel slide shadow-lg rounded-3 overflow-hidden">
+        <div class="carousel-inner bg-light" id="carousel-items" style="min-height: 400px;">
+            <div class="carousel-item active">
+                <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
+                    <div class="spinner-border text-primary" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#jobsCarousel" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
+            <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#jobsCarousel" data-bs-slide="next">
+            <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
+            <span class="visually-hidden">Next</span>
+        </button>
+
+        <div class="carousel-indicators" id="carousel-indicators">
+            <!-- Indicators will be injected here -->
+        </div>
+    </div>
+</div>
+
+<style>
+    #jobsCarousel .carousel-item img {
+        height: 500px;
+        object-fit: contain;
+        background-color: #f8f9fa;
+    }
+
+    @media (max-width: 768px) {
+        #jobsCarousel .carousel-item img {
+            height: 350px;
+        }
+        #jobsCarousel .carousel-inner,
+        #jobsCarousel .carousel-item > div {
+            min-height: 350px !important;
+            height: 350px !important;
+        }
+    }
+
+    #jobsCarousel .carousel-indicators [data-bs-target] {
+        background-color: var(--bs-primary);
+    }
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const carouselInner = document.getElementById('carousel-items');
+    const indicatorsContainer = document.getElementById('carousel-indicators');
+
+    fetch('{{ route('Images.jobs') }}')
+        .then(response => response.json())
+        .then(images => {
+            if (!images || images.length === 0) {
+                carouselInner.innerHTML = `
+                    <div class="carousel-item active">
+                        <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
+                            <p class="text-muted">No recent job images available.</p>
+                        </div>
+                    </div>`;
+                return;
+            }
+
+            carouselInner.innerHTML = '';
+            indicatorsContainer.innerHTML = '';
+
+            images.forEach((image, index) => {
+                // Create Item
+                const item = document.createElement('div');
+                item.className = `carousel-item ${index === 0 ? 'active' : ''}`;
+
+                const img = document.createElement('img');
+                img.src = `/images/Jobs/${image}`;
+                img.className = 'd-block w-100';
+                img.alt = `Job image ${index + 1}`;
+
+                item.appendChild(img);
+                carouselInner.appendChild(item);
+
+                // Create Indicator
+                const indicator = document.createElement('button');
+                indicator.type = 'button';
+                indicator.dataset.bsTarget = '#jobsCarousel';
+                indicator.dataset.bsSlideTo = index;
+                indicator.className = index === 0 ? 'active' : '';
+                indicator.setAttribute('aria-label', `Slide ${index + 1}`);
+                if (index === 0) indicator.setAttribute('aria-current', 'true');
+
+                indicatorsContainer.appendChild(indicator);
+            });
+
+            if (images.length <= 1) {
+                document.querySelectorAll('#jobsCarousel [data-bs-slide]').forEach(el => el.style.display = 'none');
+                indicatorsContainer.style.display = 'none';
+            }
+
+            // Initialize carousel after items are added
+            if (window.bootstrap && window.bootstrap.Carousel) {
+                new window.bootstrap.Carousel(document.getElementById('jobsCarousel'), {
+                    ride: 'carousel',
+                    interval: 5000
+                });
+            }
+        })
+        .catch(error => {
+            console.error('Error loading job images:', error);
+            carouselInner.innerHTML = `
+                <div class="carousel-item active">
+                    <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
+                        <p class="text-danger">Failed to load images. Please try again later.</p>
+                    </div>
+                </div>`;
+        });
+});
+</script>