Skip to content

Add social sharing buttons and reward message to diet plan section #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ashish001sing wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add social sharing buttons and reward message to diet plan section #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55772c0
Add social sharing buttons and reward message to diet plan section
Ashish001sing Aug 11, 2025
a115b55
Add workout generator form with matching UI to diet plan generator
Ashish001sing Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 103 additions & 15 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,9 +389,93 @@ <h2 class="section__header">AI-Powered Diet Plan</h2>
<button class="btn" type="submit">Generate Diet Plan</button>
</form>
<div id="dietResult" class="diet__result"></div>
<!-- Reward Message -->
<div id="dietReward" class="diet__reward" style="display:none; margin-top:1rem; background:#47d75f; color:#fff; padding:1rem; border-radius:8px; text-align:center; font-size:1.1rem;">
<strong>Congratulations!</strong> You’ve unlocked a new achievement: <span id="rewardName">Healthy Meal Planner</span> 🏅<br>
Share your success and inspire others!
</div>
<!-- Social Sharing Buttons -->
<div class="diet__share">
<span>Share your achievement or plan:</span>
<button class="share-btn" id="share-facebook" title="Share on Facebook">
<i class="ri-facebook-fill"></i>
</button>
<button class="share-btn" id="share-twitter" title="Share on Twitter">
<i class="ri-twitter-fill"></i>
</button>
<button class="share-btn" id="share-whatsapp" title="Share on WhatsApp">
<i class="ri-whatsapp-line"></i>
</button>
</div>
</section>
<!-- End Diet Plan Section -->

<!-- Workout Generator Section -->
<section id="workout-generator" class="section__container">
<h2 class="section__header">Workout Generator</h2>
<p class="section__subheader">Get a personalized workout routine based on your goals and fitness level.</p>
<form id="workoutForm" class="workout__form" style="background:#23272a; border-radius:16px; padding:2rem; max-width:500px; margin:2rem auto 0 auto; box-shadow:0 2px 10px rgba(0,0,0,0.08);">
<div class="workout__form__row" style="margin-bottom:1.5rem;">
<label for="workoutAge" style="color:#fff; font-size:1.1rem;">Age:</label>
<input type="number" id="workoutAge" name="age" min="10" max="100" required style="width:100%; margin-top:0.5rem; background:#18191a; color:#fff; border:2px solid #47d75f; border-radius:6px; padding:0.75rem; font-size:1rem;" />
</div>
<div class="workout__form__row" style="margin-bottom:1.5rem;">
<label for="workoutWeight" style="color:#fff; font-size:1.1rem;">Weight (kg):</label>
<input type="number" id="workoutWeight" name="weight" min="20" max="200" required style="width:100%; margin-top:0.5rem; background:#18191a; color:#fff; border:2px solid #47d75f; border-radius:6px; padding:0.75rem; font-size:1rem;" />
</div>
<div class="workout__form__row" style="margin-bottom:1.5rem;">
<label for="workoutGoal" style="color:#fff; font-size:1.1rem;">Workout Goal:</label>
<select id="workoutGoal" name="workoutGoal" required style="width:100%; margin-top:0.5rem; background:#18191a; color:#fff; border:2px solid #47d75f; border-radius:6px; padding:0.75rem; font-size:1rem;">
<option value="strength">Strength</option>
<option value="endurance">Endurance</option>
<option value="fat-loss">Fat Loss</option>
<option value="muscle-gain">Muscle Gain</option>
<option value="flexibility">Flexibility</option>
</select>
</div>
<div class="workout__form__row" style="margin-bottom:1.5rem;">
<label for="fitnessLevel" style="color:#fff; font-size:1.1rem;">Fitness Level:</label>
<select id="fitnessLevel" name="fitnessLevel" required style="width:100%; margin-top:0.5rem; background:#18191a; color:#fff; border:2px solid #47d75f; border-radius:6px; padding:0.75rem; font-size:1rem;">
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
<button class="btn" type="submit" style="width:100%; background:#47d75f; color:#fff; font-size:1.15rem; border-radius:6px; margin-top:1rem;">Generate Workout Plan</button>
</form>
<div id="workoutResult" class="workout__result"></div>
<button class="btn" id="saveWorkoutBtn" style="display:none; margin-top:1rem;">Save Workout</button>
</section>

<!-- Workout Generator Section -->
<section id="workout-generator" class="section__container workout__container">
<h2 class="section__header">Workout Generator</h2>
<p class="section__subheader">Get a custom workout routine based on your goals and fitness level.</p>
<form id="workoutForm" class="workout__for git add public/index.htmlm">
<div class="workout__form__row">
<label for="workoutGoal">Workout Goal:</label>
<select id="workoutGoal" name="workoutGoal" required>
<option value="strength">Strength</option>
<option value="endurance">Endurance</option>
<option value="fat-loss">Fat Loss</option>
<option value="muscle-gain">Muscle Gain</option>
<option value="flexibility">Flexibility</option>
</select>
</div>
<div class="workout__form__row">
<label for="fitnessLevel">Fitness Level:</label>
<select id="fitnessLevel" name="fitnessLevel" required>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
<button class="btn" type="submit">Generate Workout Plan</button>
</form>
<div id="workoutResult" class="workout__result"></div>
<button class="btn" id="saveWorkoutBtn" style="display:none; margin-top:1rem;">Save Workout</button>
</section>

<footer class="section__container footer__container">
<span class="bg__blur"></span>
<span class="bg__blur footer__blur"></span>
Expand Down Expand Up @@ -476,15 +560,12 @@ <h2>CoreBot🤖</h2>
const resultDiv = document.getElementById("dietResult");
form.addEventListener("submit", async (e) => {
e.preventDefault();
resultDiv.innerHTML =
"<p>Generating your personalized diet plan...</p>";
resultDiv.innerHTML = "<p>Generating your personalized diet plan...</p>";
const age = document.getElementById("age").value;
const weight = document.getElementById("weight").value;
const intensity = document.getElementById("intensity").value;
const preferences = document.getElementById("preferences").value;
const prompt = `Create a personalized meal plan and nutritional breakdown for a user with the following details:\nAge: ${age}\nWeight: ${weight}kg\nWorkout Intensity: ${intensity}\nDietary Preferences: ${
preferences || "None"
}\nProvide meal suggestions for breakfast, lunch, dinner, and snacks, with calories, protein, carbs, and fats for each meal. Format the response for easy reading.`;
const prompt = `Create a personalized meal plan and nutritional breakdown for a user with the following details:\nAge: ${age}\nWeight: ${weight}kg\nWorkout Intensity: ${intensity}\nDietary Preferences: ${preferences || "None"}\nProvide meal suggestions for breakfast, lunch, dinner, and snacks, with calories, protein, carbs, and fats for each meal. Format the response for easy reading.`;
try {
const response = await fetch(
"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=AIzaSyAatHh04PTBB4wzgaL22VFEwtRb7kCrOLE",
Expand All @@ -493,21 +574,28 @@ <h2>CoreBot🤖</h2>
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contents: [{ parts: [{ text: prompt }] }],
}),
}), git checkout -b feature/social-sharing-reward
}
);
const data = await response.json();
let text =
data.candidates?.[0]?.content?.parts?.[0]?.text ||
"No response from AI.";
let text = data.candidates?.[0]?.content?.parts?.[0]?.text || "No response from AI.";
text = text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
resultDiv.innerHTML = `<div class="diet__ai-result">${text.replace(
/\n/g,
"<br>"
)}</div>`;
resultDiv.innerHTML = `<div class=\"diet__ai-result\">${text.replace(/\n/g, "<br>")}</div>`;
// Show reward message
const rewardDiv = document.getElementById("dietReward");
if (rewardDiv) {
rewardDiv.style.display = "block";
// Optionally, set a dynamic reward name
const rewardName = document.getElementById("rewardName");
if (rewardName) {
rewardName.textContent = "Healthy Meal Planner";
}
}
} catch (err) {
resultDiv.innerHTML =
'<p style="color:red;">Error generating diet plan. Please try again later.</p>';
resultDiv.innerHTML = '<p style="color:red;">Error generating diet plan. Please try again later.</p>';
// Hide reward message on error
const rewardDiv = document.getElementById("dietReward");
if (rewardDiv) rewardDiv.style.display = "none";
}
});
</script>
Expand Down
35 changes: 35 additions & 0 deletions public/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,41 @@ document.addEventListener("DOMContentLoaded", function () {
initializeAnimations();
initializeTouchSupport();
initializePerformanceOptimizations();
initializeSocialSharing();
// Social Sharing Functionality
function initializeSocialSharing() {
const facebookBtn = document.getElementById("share-facebook");
const twitterBtn = document.getElementById("share-twitter");
const whatsappBtn = document.getElementById("share-whatsapp");
const resultDiv = document.getElementById("dietResult");

function getShareText() {
// Get plain text from the diet result
let text = resultDiv.innerText || "Check out my achievement and diet plan at BodyCraft Gym!";
return text.length > 280 ? text.substring(0, 277) + "..." : text;
}

if (facebookBtn) {
facebookBtn.addEventListener("click", function () {
const url = encodeURIComponent(window.location.href);
const text = encodeURIComponent(getShareText());
window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${text}`, "_blank");
});
}
if (twitterBtn) {
twitterBtn.addEventListener("click", function () {
const url = encodeURIComponent(window.location.href);
const text = encodeURIComponent(getShareText());
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, "_blank");
});
}
if (whatsappBtn) {
whatsappBtn.addEventListener("click", function () {
const text = encodeURIComponent(getShareText() + " " + window.location.href);
window.open(`https://wa.me/?text=${text}`, "_blank");
});
}
}
});

// Back to Top functionality
Expand Down