ECF2023/index.php at master · xptal05/ECF2023 · 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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<?php
// Start or resume the session
session_start();

// Generate and store the CSRF token in the user's session
$csrf_token = bin2hex(random_bytes(32));
$_SESSION['csrf_token'] = $csrf_token;
?>
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parrot garage</title>
    <link rel="stylesheet" href="./assets/style/style.css">
</head>

<body>
    <section id="notifications"></section>
    <?php include_once "./components/header.php";
    ?>
    <div class="landing-background"></div>
    <div class="hero-section">
        <div class="hero-section-content">
            <h1>GARAGE V. PARROT</h1>
            <h2>Des experts passionnés au service de votre voiture</h2>
            <div class="hero-cta">
                <a class="btn" href="#contact">contactez nous</a>
                <a class="btn no-border" href="#service-section">en savoir plus</a>
            </div>
        </div>
    </div>
    <div class="service-section" id="service-section">
        <h2 class="uppercase">nos <span class="primary">services</span></h2>
        <div class="services-container">
            <?php

            $mappedAndOrderedData = mapAndOrderData($webPageInfoData);
            $serviceItems = $mappedAndOrderedData['Service'];

            // Create an associative array to map icons by associated_to_info
            $iconMap = [];
            foreach ($icons as $icon) {
                $iconMap[$icon['associated_to_info']] = $icon;
            }

            // Create an array to keep track of processed orders
            $processedOrders = [];

            foreach ($serviceItems as $item) {
                $order = $item['order'];

                // Check if this order has already been processed
                if (!in_array($order, $processedOrders)) {

                    // Find the items with type 'heading' and 'text' that match the current order
                    $headingItem = null;
                    $textItem = null;

                    foreach ($serviceItems as $subItem) {
                        if ($subItem['order'] === $order) {
                            if ($subItem['category'] === 'heading') {
                                $headingItem = $subItem;
                            } elseif ($subItem['category'] === 'text') {
                                $textItem = $subItem;
                            }
                        }
                    }

                    // Get the associated icon for the current item
                    $associatedToInfo = $item['id_info'];
                    $icon = $iconMap[$associatedToInfo]['link'];

                    // Output the 'heading' and 'text' for the current order along with the icon
                    echo '<div class="service-container">
                        <div class="service-icon"><img src="' . str_replace('../', './', $icon) . '" alt="icon"></div>
                        <div class="service-text-section">
                            <div class="service-title uppercase">' . $headingItem['text'] . '</div>
                            <div class="service-description">' . $textItem['text'] . '</div>
                        </div>
                    </div>';

                    // Mark this order as processed
                    $processedOrders[] = $order;
                }
            }

            ?>
        </div>
    </div>
    <section class="landing-section">
        <div class="section-divider"></div>
        <div class="about-section">
            <div class="about-container">
                <h2 class="uppercase primary">a propos</h2>
                <?php $aboutItems = $mappedAndOrderedData['About'];
                echo '<p>' . $aboutItems[0]['text'] . '</p>';
                ?>
            </div>
        </div>
    </section>
    <section class="landing-section">
        <div class="section-divider"></div>
        <div class="why-us-section">
            <div class="why-us-container">
                <div class="why-us-text-container">
                    <h2 class="uppercase">Pourquoi<span class="primary"> notre</span> garage</h2>
                    <?php $reasonItems = $mappedAndOrderedData['Reasons'];
                    $reasonsArray = [];
                    foreach ($reasonItems as $subItem) {
                        if ($subItem['category'] === 'heading') {
                            $reasonsArray[] =   $subItem;
                        } elseif ($subItem['category'] === 'text') {
                            $textItem = $subItem;
                        }
                    }
                    echo '<p>' . $textItem['text'] . '</p>';
                    ?>
                </div>
                <div class="reasons-container">
                    <?php
                    foreach ($reasonsArray as $item) {
                        echo '
                        <div class="reason">
                            <div class="reason-icon"><img src="./assets/src/check-circle.svg" alt="check-mark-icon" ></img></div>
                            <div class="reason-text">' . $item['text'] . '</div>
                        </div>';
                    }
                    ?>
                </div>
            </div>
        </div>
    </section>
    <section class="landing-section">
        <div class="section-divider"></div>
        <div class="feedback-section" id="feedback">
            <h2 class="uppercase">Avis de <span class="primary">nos client</span></h2>
            <div class="feedback-slider">
                <?php
                $feedbackCounter = 0;

                foreach ($feedbacksData as $item) {
                    // Increment the counter for each feedback item
                    $feedbackCounter++;

                    echo '<div class="feedback-container">
                    <div class="rating">' . $item['rating'] . '</div>
                        <p>' . $item['comment'] . '</p>
                        <div class="feedback-name">' . $item['client_name'] . '</div>
                    </div>';
                }
                ?>

            </div>
            <div class="feedback-slider-dots">
                <?php
                for ($i = 0; $i < $feedbackCounter; $i++) {
                    echo '<div class="feedback-dot" data-index="' . $i . '"></div>';
                }
                ?>
            </div>
            <a href="feedback.php" class="btn">ajouter mon témoignage</a>

        </div>
    </section>
    <section class="landing-section">
        <div class="section-divider"></div>
        <div class="contact-section" id="contact">
            <h2 class="uppercase"><span class="primary">contactez</span> nous</h2>
            <?php include_once "./components/contact-form.php" ?>
        </div>
    </section>
    <?php include_once "./components/footer.php" ?>
    <script src="./components/script-menu.js"></script>
        <script src="./assets/js/script-contact.js"></script>
        <script src="./assets/js/notifications.js"></script>
    <script>
        //add message event
        messageEvent()

        //FEEDBACK STARS
        const ratings = document.querySelectorAll('.feedback-container .rating')

        ratings.forEach(rating => {
            const stars = convertToStars(Number(rating.innerText))
            rating.innerHTML = `${stars}`
        })

        // Function to convert numeric rating to star icons
        function convertToStars(rating) {
            // Assuming rating is between 1 and 5
            const maxRating = 5;
            let starIcons = '';

            for (let i = 1; i <= maxRating; i++) {
                if (i <= rating) {
                    starIcons += '★'; // Add a filled star for each full rating
                } else {
                    starIcons += '☆'; // Add an empty star for the remaining
                }
            }
            return starIcons;
        }

        //FEEDBACK NAVIGATION
        const slider = document.querySelector(".feedback-slider");
        const dots = document.querySelectorAll(".feedback-dot");
        const feedbackContainers = slider.querySelectorAll(".feedback-container");
        let currentIndex = 0;

        // Add a click event listener to each dot
        dots.forEach((dot, index) => {
            dot.addEventListener("click", () => {
                // Update the currentIndex to the clicked dot's index
                currentIndex = index;
                // Calculate the offset to slide the container to the center
                const containerWidth = feedbackContainers[currentIndex].offsetWidth;
                const gap = 45
                const screenWidth = window.innerWidth; // Get the screen width
                const offset = ((containerWidth + gap) / 2) * (feedbackContainers.length + 1 - (2 * (currentIndex + 1)))
                slider.style.transform = `translateX(${offset}px)`;

                // Update the dot styles (e.g., add a "selected" class)
                dots.forEach((dot) => dot.classList.remove("selected"));
                dot.classList.add("selected");
            });
        });

        // On window load, select the middle dot
        window.addEventListener("load", () => {
            const middleIndex = Math.floor(dots.length / 2)-1; // Calculate the middle dot's index
            dots[middleIndex].click(); // Trigger a click event on the middle dot
        });
    </script>

</body>

</html>