115 lines
4.7 KiB
PHP
115 lines
4.7 KiB
PHP
<?php
|
|
include 'includes/header.php';
|
|
require_once 'includes/pexels.php';
|
|
?>
|
|
|
|
<div class="container py-5">
|
|
<h1 class="display-4 fw-bold">Coding Challenges</h1>
|
|
<p class="fs-5 text-muted">Test your skills with our coding challenges.</p>
|
|
|
|
<?php if (isset($_SESSION['success_message'])) : ?>
|
|
<div class="alert alert-success">
|
|
<?php
|
|
echo $_SESSION['success_message'];
|
|
unset($_SESSION['success_message']);
|
|
?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($_SESSION['error_message'])) : ?>
|
|
<div class="alert alert-danger">
|
|
<?php
|
|
echo $_SESSION['error_message'];
|
|
unset($_SESSION['error_message']);
|
|
?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($_SESSION['info_message'])) : ?>
|
|
<div class="alert alert-info">
|
|
<?php
|
|
echo $_SESSION['info_message'];
|
|
unset($_SESSION['info_message']);
|
|
?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<label class="input-group-text" for="difficulty-filter">Difficulty</label>
|
|
<select class="form-select" id="difficulty-filter">
|
|
<option value="all">All</option>
|
|
<option value="easy">Easy</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="advanced">Advanced</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<label class="input-group-text" for="learning-style-filter">Learning Style</label>
|
|
<select class="form-select" id="learning-style-filter">
|
|
<option value="all">All</option>
|
|
<option value="kinesthetic">Kinesthetic</option>
|
|
<option value="visual">Visual</option>
|
|
<option value="auditory">Auditory</option>
|
|
<option value="reading/writing">Reading/Writing</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<label class="input-group-text" for="sort-by">Sort By</label>
|
|
<select class="form-select" id="sort-by">
|
|
<option value="date_desc">Newest</option>
|
|
<option value="date_asc">Oldest</option>
|
|
<option value="popularity">Popularity</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<?php
|
|
require_once 'db/config.php';
|
|
$pdo = db();
|
|
$stmt = $pdo->query('SELECT * FROM challenges WHERE deleted_at IS NULL ORDER BY created_at DESC');
|
|
$challenges = $stmt->fetchAll();
|
|
|
|
if (count($challenges) > 0) {
|
|
foreach ($challenges as $challenge) {
|
|
$image_data = pexels_get('https://api.pexels.com/v1/search?query=' . urlencode($challenge['title']) . '&per_page=1');
|
|
if ($image_data && isset($image_data['photos'][0])) {
|
|
$image_url = $image_data['photos'][0]['src']['large'];
|
|
} else {
|
|
$image_url = 'https://via.placeholder.com/600x400'; // Default placeholder
|
|
}
|
|
|
|
echo '<div class="col-md-4 mb-4">';
|
|
echo '<div class="card h-100">';
|
|
echo '<div class="card-img-container">';
|
|
echo '<img src="' . $image_url . '" class="card-img-top" alt="' . htmlspecialchars($challenge['title']) . '">';
|
|
echo '<div class="card-img-overlay d-flex flex-column justify-content-end">';
|
|
echo '<h5 class="card-title text-white"><a href="challenge.php?id=' . $challenge['id'] . '">' . htmlspecialchars($challenge['title']) . '</a></h5>';
|
|
echo '<span class="badge bg-primary">' . htmlspecialchars($challenge['difficulty']) . '</span>';
|
|
echo '</div>';
|
|
echo '</div>';
|
|
echo '<div class="card-body d-flex flex-column">';
|
|
echo '<p class="card-text flex-grow-1">' . htmlspecialchars(substr($challenge['description'], 0, 100)) . '...</p>';
|
|
echo '<div class="d-flex justify-content-between align-items-center">';
|
|
echo '<small class="text-muted">' . htmlspecialchars($challenge['learning_style']) . '</small>';
|
|
echo '</div>';
|
|
echo '</div>';
|
|
echo '</div>';
|
|
echo '</div>';
|
|
}
|
|
} else {
|
|
echo '<div class="alert alert-info">No challenges available yet. Please check back later.</div>';
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include 'includes/footer.php'; ?>
|