feat: implement Phase 5 Swipe Discovery Carousel
This commit is contained in:
@@ -341,6 +341,18 @@ include __DIR__ . '/partials/head.php';
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Swipe Discovery Carousel -->
|
||||
<section class="swipe-discovery reveal-target" id="swipe-discovery" style="display: none;" data-section-name="<?php echo $lang === 'de' ? 'Für Dich' : 'For You'; ?>" aria-label="<?php echo $lang === 'de' ? 'Persönliche Empfehlungen' : 'Personal Recommendations'; ?>">
|
||||
<div class="section-header section-header--stack swipe-discovery__header">
|
||||
<p class="eyebrow eyebrow-goal" id="swipeGoalEyebrow"></p>
|
||||
<h2 id="swipeGoalTitle"><?php echo $lang === 'de' ? 'Empfohlen für dich' : 'Recommended for you'; ?></h2>
|
||||
<p id="swipeGoalSub"><?php echo $lang === 'de' ? 'Basierend auf deinem Ernährungsziel' : 'Based on your dietary goal'; ?></p>
|
||||
</div>
|
||||
<div class="swipe-track" id="swipeTrack">
|
||||
<!-- Cards inserted by JS -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Discover Shell: Search + Stats + Tags | Featured -->
|
||||
<section class="discover-shell reveal-target" id="basics" data-section-name="<?php echo $lang === 'de' ? 'Entdecken' : 'Discover'; ?>" aria-label="<?php echo $lang === 'de' ? 'Rezepte entdecken' : 'Discover recipes'; ?>">
|
||||
<div class="discover-shell__main">
|
||||
@@ -495,6 +507,29 @@ include __DIR__ . '/partials/head.php';
|
||||
|
||||
<?php include __DIR__ . '/partials/footer.php'; ?>
|
||||
|
||||
<?php
|
||||
// Expose recipe data for JS filtering
|
||||
$recipesJson = json_encode(array_values(array_map(function($r) use ($lang) {
|
||||
return [
|
||||
'slug' => $r['slug'],
|
||||
'title' => $r['title'],
|
||||
'hero' => $r['hero'],
|
||||
'difficulty' => $r['difficulty'],
|
||||
'total_time' => (int)($r['total_time'] ?? 0),
|
||||
'url' => '/recipe.php?slug=' . urlencode($r['slug']) . '&lang=' . $lang,
|
||||
'tags' => $r['tags'] ?? [],
|
||||
'category' => $r['category'] ?? ''
|
||||
];
|
||||
}, $localizedAll)));
|
||||
?>
|
||||
<script>
|
||||
const indexRecipeBank = <?php echo $recipesJson; ?>;
|
||||
const i18nGoal = {
|
||||
'weight_loss': '<?php echo $lang === "de" ? "Abnehmen / Low-Carb" : "Weight Loss / Low-Carb"; ?>',
|
||||
'muscle_gain': '<?php echo $lang === "de" ? "Muskelaufbau / High-Protein" : "Muscle Gain / High-Protein"; ?>',
|
||||
'healthy': '<?php echo $lang === "de" ? "Gesund & Ausgewogen" : "Healthy & Balanced"; ?>'
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- ╔══════════════════════════════════════════════════════════════╗
|
||||
║ JAVASCRIPT — Preloader, Lenis, GSAP Stage, Section Indicator ║
|
||||
@@ -807,5 +842,125 @@ include __DIR__ . '/partials/head.php';
|
||||
});
|
||||
}
|
||||
|
||||
/* ───────────────────────────────────────────────────────────────
|
||||
7. SWIPE DISCOVERY CAROUSEL
|
||||
─────────────────────────────────────────────────────────────── */
|
||||
var swipeSec = document.getElementById('swipe-discovery');
|
||||
var swipeTrack = document.getElementById('swipeTrack');
|
||||
var swipeEyebrow = document.getElementById('swipeGoalEyebrow');
|
||||
|
||||
function renderSwipeCarousel(recipes, goalLabel) {
|
||||
if (!swipeSec || !swipeTrack || recipes.length === 0) return;
|
||||
|
||||
swipeSec.style.display = 'block';
|
||||
if (goalLabel) {
|
||||
swipeEyebrow.textContent = goalLabel;
|
||||
} else {
|
||||
swipeEyebrow.textContent = '<?php echo $lang === "de" ? "Entdecken" : "Discover"; ?>';
|
||||
}
|
||||
|
||||
swipeTrack.innerHTML = '';
|
||||
recipes.slice(0, 8).forEach(function(recipe) {
|
||||
var card = document.createElement('article');
|
||||
card.className = 'swipe-card';
|
||||
card.innerHTML = `
|
||||
<a href="${recipe.url}" class="swipe-card__image">
|
||||
<img src="${recipe.hero}" alt="${recipe.title}" loading="lazy">
|
||||
<button class="btn-favorite" data-slug="${recipe.slug}" aria-label="Save to favorites" onclick="event.preventDefault(); event.stopPropagation();">
|
||||
<svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<div class="swipe-card__body">
|
||||
<div class="swipe-card__badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
<?php echo $lang === "de" ? "Für dich empfohlen" : "Recommended for you"; ?>
|
||||
</div>
|
||||
<h3><a href="${recipe.url}">${recipe.title}</a></h3>
|
||||
<div class="meta">
|
||||
<span>⏱ ${recipe.total_time} min</span>
|
||||
<span>🙂 ${recipe.difficulty}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
swipeTrack.appendChild(card);
|
||||
});
|
||||
|
||||
// Re-bind favorite states using existing global userFavSlugs sync
|
||||
if (typeof updateHeartStates === 'function') {
|
||||
updateHeartStates();
|
||||
}
|
||||
|
||||
// Add horizontal scroll mouse drag
|
||||
let isDown = false;
|
||||
let startX;
|
||||
let scrollLeft;
|
||||
|
||||
swipeTrack.addEventListener('mousedown', (e) => {
|
||||
isDown = true;
|
||||
swipeTrack.classList.add('active');
|
||||
startX = e.pageX - swipeTrack.offsetLeft;
|
||||
scrollLeft = swipeTrack.scrollLeft;
|
||||
});
|
||||
swipeTrack.addEventListener('mouseleave', () => {
|
||||
isDown = false;
|
||||
swipeTrack.classList.remove('active');
|
||||
});
|
||||
swipeTrack.addEventListener('mouseup', () => {
|
||||
isDown = false;
|
||||
swipeTrack.classList.remove('active');
|
||||
});
|
||||
swipeTrack.addEventListener('mousemove', (e) => {
|
||||
if (!isDown) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - swipeTrack.offsetLeft;
|
||||
const walk = (x - startX) * 2;
|
||||
swipeTrack.scrollLeft = scrollLeft - walk;
|
||||
});
|
||||
}
|
||||
|
||||
// Hook into auth state
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.auth && window.db) {
|
||||
window.auth.onAuthStateChanged(function(user) {
|
||||
if (user) {
|
||||
window.db.collection('users').doc(user.uid).get()
|
||||
.then(function(doc) {
|
||||
if (doc.exists) {
|
||||
var goal = doc.data().goal;
|
||||
var filtered = indexRecipeBank;
|
||||
|
||||
if (goal === 'weight_loss') {
|
||||
filtered = indexRecipeBank.filter(r =>
|
||||
r.tags.some(t => t.toLowerCase().includes('low-carb') || t.toLowerCase().includes('diet')) ||
|
||||
(r.category && r.category.toLowerCase().includes('salad'))
|
||||
);
|
||||
} else if (goal === 'muscle_gain') {
|
||||
filtered = indexRecipeBank.filter(r =>
|
||||
r.tags.some(t => t.toLowerCase().includes('high-protein') || t.toLowerCase().includes('meat') || t.toLowerCase().includes('fleisch'))
|
||||
);
|
||||
} else if (goal === 'healthy') {
|
||||
filtered = indexRecipeBank.filter(r =>
|
||||
r.tags.some(t => t.toLowerCase().includes('vegetarian') || t.toLowerCase().includes('healthy'))
|
||||
);
|
||||
}
|
||||
|
||||
// fallback if empty
|
||||
if (filtered.length === 0) filtered = indexRecipeBank;
|
||||
|
||||
renderSwipeCarousel(filtered, i18nGoal[goal] || null);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Default unauthenticated view
|
||||
renderSwipeCarousel(indexRecipeBank, null);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
renderSwipeCarousel(indexRecipeBank, null);
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user