Viewing file:  slider.php (5.61 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php
include 'admin/connect.php';
// ======================
// Fetch slider photos
// ======================
$query = "SELECT `ID`, `slider_photo` FROM `slider_photo` ORDER BY `ID` DESC";
$result = mysqli_query($link, $query);
// ======================
// Get today's date (MM-DD)
// ======================
$today = date("m-d");
// Fetch students having birthday today
$bquery = "SELECT name, photo, dob
FROM admission
WHERE DATE_FORMAT(dob, '%m-%d') = '$today'";
$bresult = mysqli_query($link, $bquery);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider with Birthday Balloons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.slider-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.slider-left {
flex: 0 0 80%;
max-width: 80%;
background: #000;
}
.slider-left img {
width: 100%;
height: 400px;
object-fit: cover;
}
.slider-right {
flex: 0 0 20%;
max-width: 20%;
background: #111;
color: #fff;
padding: 15px;
height: 400px;
overflow-y: auto;
display: flex;
justify-content: center;
align-items: flex-start;
text-align: center;
flex-direction: column;
}
/* Birthday Balloon Styles */
.balloon {
background: #ff4081;
color: #fff;
padding: 15px;
border-radius: 20px;
margin: 10px auto;
width: 100%;
max-width: 200px;
text-align: center;
position: relative;
animation: float 3s ease-in-out infinite;
box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
}
.balloon:after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
width: 20px;
height: 20px;
background: #ff4081;
clip-path: polygon(50% 100%, 0 0, 100% 0);
transform: translateX(-50%);
}
.student-photo {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
margin-bottom: 10px;
}
.balloon-text {
font-size: 14px;
line-height: 1.4;
}
.congrats {
font-weight: bold;
font-size: 16px;
color: #ffe600;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.no-birthday {
text-align: center;
font-size: 16px;
color: #aaa;
padding: 20px;
width: 100%;
}
/* Responsive */
@media (max-width: 768px) {
.slider-left, .slider-right {
flex: 0 0 100%;
max-width: 100%;
height: auto;
}
.slider-right {
align-items: center;
}
}
</style>
</head>
<body>
<div class="slider-container">
<!-- Slider 80% -->
<div class="slider-left">
<div id="sliderCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4000">
<div class="carousel-inner">
<?php
if ($result && mysqli_num_rows($result) > 0) {
$first = true;
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="carousel-item'.($first ? ' active' : '').'">
<img src="admin/slider/'.$row['slider_photo'].'" class="d-block w-100" alt="Slide '.$row['ID'].'">
</div>';
$first = false;
}
} else {
echo '<div class="carousel-item active">
<img src="default.jpg" class="d-block w-100" alt="Default Slide">
</div>';
}
?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sliderCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sliderCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
<!-- Birthday Section 20% -->
<div class="slider-right">
<?php
if ($bresult && mysqli_num_rows($bresult) > 0) {
while ($brow = mysqli_fetch_assoc($bresult)) {
$studentName = htmlspecialchars($brow['name']);
$dob = date("d M", strtotime($brow['dob']));
$photo = !empty($brow['photo']) ? "data/files/".$brow['photo'] : "default.jpg";
echo "
<div class='balloon'>
<img src='$photo' alt='$studentName' class='student-photo'>
<div class='balloon-text'>
🎉 Happy Birthday <br><strong>$studentName</strong><br>
<small>($dob)</small><br>
<span class='congrats'>Congratulations!</span>
</div>
</div>";
}
} else {
echo "<div class='no-birthday'>🎂 No birthdays today</div>";
}
?>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
|