Riders-Rentals/store-locations.html at main · PatrickHenley/Riders-Rentals · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riders Rentals - Our Store Locations</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css"> <!-- Assuming styles.css is in the same folder -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        /* Style for the banner container to allow text overlay */
        .banner-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .banner-container img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        .banner-overlay-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 3rem; /* Adjust size as needed */
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: for better readability */
            text-align: center;
            width: 100%; /* Ensure text can span the width if needed */
        }
        .loading-spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #4f46e5;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Responsive adjustments for font size */
        @media (max-width: 768px) {
            .banner-overlay-text {
                font-size: 2rem;
            }
        }
        @media (max-width: 480px) {
            .banner-overlay-text {
                font-size: 1.5rem;
            }
        }

        .banner {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://res.cloudinary.com/dmbqrwb7c/image/upload/v1753655054/car_banner_wj4rwc.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

    </style>
</head>
<body class="bg-gray-50 text-gray-900">

    <!-- Header -->
    <header class="bg-white shadow-sm py-4 px-6 md:px-10 flex justify-between items-center">
        <a href="home.html" class="text-2xl font-bold text-indigo-600">Riders Rentals</a>
        <nav class="hidden md:flex space-x-6">
            <a href="home.html" class="text-gray-700 hover:text-indigo-600 font-medium transition duration-150">Home</a>
            <a href="cars.html" class="text-gray-700 hover:text-indigo-600 font-medium transition duration-150">Cars</a>
            <a href="store-locations.html" class="text-indigo-600 font-medium transition duration-150">Locations</a>
            <a href="about-us.html" class="text-gray-700 hover:text-indigo-600 font-medium transition duration-150">About Us</a>
            <a href="contact-us.html" class="text-gray-700 hover:text-indigo-600 font-medium transition duration-150">Contact</a>
        </nav>
        <div class="hidden md:block">
            <a href="login.html" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-150">Sign In</a>
        </div>
        <!-- Mobile Menu Button -->
        <button class="md:hidden p-2 rounded-md text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
    </header>

    <!-- Banner Section (match cars.html) -->
    <section class="banner h-96 flex items-center justify-center text-center">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Visit Our Stores</h1>
            <p class="text-lg text-gray-200 mb-6 max-w-2xl mx-auto">Find our convenient pickup locations across the country.</p>
        </div>
    </section>

    <!-- Store Locations Section -->
    <section id="store-locations" class="container mx-auto px-4 py-16">
        <h2 class="text-3xl font-bold text-center mb-12">Our Store Locations</h2>
        <div id="store-listings" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8">
            <p id="loadingStoresMessage" class="text-gray-500 text-center col-span-full">
                <span class="loading-spinner"></span> Loading stores...
            </p>
            <p id="noStoresFoundMessage" class="text-gray-500 text-center col-span-full hidden">No stores found.</p>
            <p id="errorLoadingStoresMessage" class="text-red-500 text-center col-span-full hidden">Error loading stores. Please ensure the backend is running.</p>
            <!-- Store cards will be dynamically inserted here by JavaScript -->
        </div>
    </section>

    <!-- Call to Action Section -->
    <section class="bg-indigo-700 text-white py-16 text-center">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Can't find a store near you?</h2>
            <p class="text-lg mb-8 max-w-xl mx-auto">Contact our support team for personalized assistance.</p>
            <a href="#" class="bg-white text-indigo-700 px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-200 transition duration-300 shadow-lg">Contact Us</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-gray-300 py-8 px-6 md:px-10 text-center">
        <div class="container mx-auto">
            <p>&copy; 2025 Riders Rentals. All rights reserved.</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="#" class="hover:text-white transition duration-150">Privacy Policy</a>
                <a href="#" class="hover:text-white transition duration-150">Terms of Service</a>
            </div>
        </div>
    </footer>

    <script>
        // Function to render a single store card
        function renderStoreCard(store) {
            // Ensure properties exist, provide fallbacks if they might be missing
            const address = store.address || 'N/A';
            const city = store.city || 'N/A';
            const constituency = store.constituency || 'N/A';
            const email = store.email || 'N/A';
            const phoneNumber = store.phoneNumber || 'N/A';

            return `
                <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
                    <img src="${store.imageUrl}" alt="${address}, ${city}" class="w-full h-48 object-cover"
                         onerror="this.onerror=null;this.src='https://placehold.co/400x250/cccccc/333333?text=Image+Unavailable';">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">${address}, ${city}</h3>
                        <p class="text-gray-600 mb-4">
                            ${constituency} • ${phoneNumber} • ${email}
                        </p>
                        <div class="flex justify-between items-center">
                            <a href="mailto:${email}" class="bg-indigo-600 text-white px-5 py-2 rounded-lg hover:bg-indigo-700 transition duration-150">Contact Store</a>
                        </div>
                    </div>
                </div>
            `;
        }

        // Function to fetch and display stores from the backend
        const displayStores = async () => {
            const storeListingsDiv = document.getElementById('store-listings');
            const loadingStoresMessage = document.getElementById('loadingStoresMessage');
            const noStoresFoundMessage = document.getElementById('noStoresFoundMessage');
            const errorLoadingStoresMessage = document.getElementById('errorLoadingStoresMessage');

            loadingStoresMessage.classList.remove('hidden'); // Show loading
            noStoresFoundMessage.classList.add('hidden');
            errorLoadingStoresMessage.classList.add('hidden');
            storeListingsDiv.innerHTML = ''; // Clear existing content

            try {
                // Fetch stores from the backend API
                const response = await fetch('http://localhost:3000/api/stores');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const stores = await response.json();

                loadingStoresMessage.classList.add('hidden'); // Hide loading

                if (stores.length === 0) {
                    noStoresFoundMessage.classList.remove('hidden');
                } else {
                    stores.forEach(store => {
                        storeListingsDiv.innerHTML += renderStoreCard(store);
                    });
                }
            } catch (error) {
                console.error('Error fetching stores:', error);
                loadingStoresMessage.classList.add('hidden');
                errorLoadingStoresMessage.classList.remove('hidden');
                errorLoadingStoresMessage.textContent = `Error loading stores: ${error.message}. Please ensure the backend server is running.`;
            }
        };

        // Call displayStores when the page loads
        document.addEventListener('DOMContentLoaded', displayStores);
    </script>
</body>
</html>