22

✏️ Editing: xxspecialoffer.php

<?php
$servername = "localhost";  // Change this if necessary
$username = "balubaid_autozoneoffers";         // Your database username
$password = "Vision@2050";             // Your database password
$database = "balubaid_autozoneoffers";  // Your database name

// Set timezone to Riyadh
date_default_timezone_set('Asia/Riyadh');

// Create a connection
$conn = new mysqli($servername, $username, $password, $database);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Ensure database timezone matches Riyadh timezone
$conn->query("SET time_zone = '+03:00'");

// Function to convert images to WebP
function convertToWebP($source, $destination, $quality = 65) {
    $info = getimagesize($source);
    if ($info['mime'] == 'image/jpeg' || $info['mime'] == 'image/jpg') {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source);
        imagepalettetotruecolor($image);
        imagealphablending($image, true);
        imagesavealpha($image, true);
    } else {
        return false;
    }
    return imagewebp($image, $destination, $quality);
}

// Fetch only valid and active special offers from database
$sql = "SELECT * FROM special_offers WHERE isactive = 1 AND start_date <= CONVERT_TZ(NOW(), @@session.time_zone, '+03:00') AND end_date >= CONVERT_TZ(NOW(), @@session.time_zone, '+03:00') ORDER BY id DESC";
$result = $conn->query($sql);

// Check if query was successful
if (!$result) {
    die("Error in SQL query: " . $conn->error);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5QL8T48Q');</script>

    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Special Offers</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'cairo', serif;
            background-color: #f8f9fa;
        }
        .navbar {
            background-color: #FFFFFF;
        }
        .navbar-brand img {
            height: 5em;
        }
        .footer {
            background-color: #55556F;
            color: #ffb612;
            text-align: center;
            padding: 15px 0;
            margin-top: 30px;
        }
        .social-icons a {
            color: #ffb612;
            margin: 0 10px;
            font-size: 20px;
            text-decoration: none;
        }
        .card {
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .countdown-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        
        .flip-clock-divider .flip-clock-label {
 
    right: -5em;

}

.flip-clock-divider.minutes .flip-clock-label {
    right: -6em;
}

.flip-clock-divider.seconds .flip-clock-label {
    right: -5.7em;
}

.flip-clock-wrapper ul li a div div.inn{
            
            font-size:3rem;    
                
            }

.flip-clock-wrapper {
            transform: scale(0.8);
            max-width: 100%;
            margin: 0em;
        }

.flip-clock-dot {
left: -0.3em;
    width: 0.5em;
    height: 0.5em;        
}

.flip-clock-divider{

margin-left:0.3em;
margin-right:0.3em;
    
}
        
        @media (max-width: 1024px) {
            .flip-clock-wrapper {
                transform: scale(0.6);
            }
            
            .flip-clock-wrapper ul li a div div.inn{
            
            font-size:3rem;    
                
            }
        }
        
        @media (max-width: 768px) {
            .flip-clock-wrapper {
                transform: scale(0.6);
            }
            
            .flip-clock-wrapper ul li a div div.inn{
            
            font-size:3rem;    
                
            }
        }
        @media (max-width: 480px) {
            .flip-clock-wrapper {
                transform: scale(0.8);
            }
            
            .flip-clock-wrapper ul li a div div.inn{
            
            font-size:3.0rem;    
                
            }
        }
        
        .first-button{
        width: 100%;
    margin-bottom: 10px;
    transform: skew(-6deg, -0deg);
    border-radius: 0px;
    background: #55556F;    
    color: #ffb612;        
        }
        
        
        .second-button{
        width: 100%;
    margin-bottom: 10px;
    transform: skew(-6deg, -0deg);
    border-radius: 0px;
    background: #ffb612; 
    color: #55556F;
            
        }
        
        .second-button:hover{
    background: #55556F;
    color:#FFFFFF;
            
        }
        
        .first-button:hover{
   background: #ffb612; 
    color: #55556F;
            
        }
        .card-title{
    color: #ffb612;         
        }
        
    </style>
</head>
<body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5QL8T48Q"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
    
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://autozone.com.sa/wp-content/uploads/2018/08/Logo-L-For-Web.png" alt="Autozone Logo">
            </a>
        </div>
    </nav>

<div class="container text-center my-5">
        <h1 class="mb-4">Special Offers</h1>
        <div class="row g-3">
            <?php while ($row = $result->fetch_assoc()) {
                $originalImage = $row['image_url'];
                $kdoriginalImage = "/home/balubaid/specialoffers.autozone.com.sa/assets/spoffers/".$row['imagename'];
                $kdwebpImage = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $kdoriginalImage);
                $webpImage = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $originalImage);
                if (!file_exists($kdwebpImage)) {
                    convertToWebP($kdoriginalImage, $kdwebpImage);
                }
                $endDate = $row['end_date'];
                $offerId = "countdown-" . $row['id'];
            ?>
                <div class="col-md-4 col-lg-3 mb-1">
                    <div class="card">
                        <picture>
                            <source srcset="<?php echo $webpImage; ?>" type="image/webp">
                            <img src="<?php echo $originalImage; ?>" class="card-img-top" alt="Offer Image" loading="lazy">
                        </picture>
                        <div class="card-body">
                            <h5 style="text-align:left;" class="card-title"><?php echo $row['title']; ?></h5>
                            <p style="text-align:left;" class="card-text"><?php echo $row['description']; ?></p>
                            <p class="fw-bold">Offer Valid Till</p>
                            <div id="<?php echo $offerId; ?>" class="countdown-container"></div>
                            <a href="offers/<?php echo $row['id']."-".$row['offer_name'] ?>/" class="btn first-button ">Apply Now</a>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        var clock = $('#<?php echo $offerId; ?>').FlipClock(
                        (new Date("<?php echo $endDate; ?>").getTime() - new Date().getTime()) / 1000,
                        {
                            clockFace: 'DailyCounter',
                            countdown: true
                        });
                    });
                </script>
            <?php } ?>
        </div>
    </div>

<footer class="footer">
        <div class="container">
            <p>&copy; <?php echo date('Y'); ?> Balubaid Automotives. All rights reserved.</p>
            <p>Toll-Free: 800-760-6000</p>
            <div class="social-icons">
                <a href="#"><i class="fa-brands fa-facebook"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
                <a href="#"><i class="fa-brands fa-linkedin"></i></a>
            </div>
        </div>
    </footer>
</body>
</html>
<?php
$conn->close();
?>

MR SKB