🤖 Cannot save fiddle #2138
Description
Error code
ERRW:1.0:K1.0:SL0.2:EL0.4:PRMS0.3:AS
Were you logged in?
Yes
Your username (if logged in)
No response
Your HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<div class="toggle-theme">
<button id="themeBtn" title="Toggle dark/light mode"><i class="fas fa-moon"></i></button>
</div>
<div id="overlay">
<div id="overlay-content">
<h1>Super Nutritionist</h1>
<div id="welcome"></div>
<button class="btn" onclick="window.location='mailto:[email protected]'">Contact Me</button>
<div class="socials">
<a href="https://instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="sample-meal-plan.pdf" download title="Download Sample Meal Plan"><i class="fas fa-file-download"></i></a>
</div>
<div class="accessibility">
<button onclick="document.body.style.fontSize='1.2em'">A+</button>
<button onclick="document.body.style.fontSize='1em'">A</button>
<button onclick="document.body.style.fontSize='0.9em'">A-</button>
<span style="font-size:0.9em;">Font size</span>
</div>
<div class="lang-switch">
<button onclick="alert('Language switched to English!')">EN</button>
<button onclick="alert('Language switched to Spanish!')">ES</button>
<button onclick="alert('Language switched to French!')">FR</button>
<span style="font-size:0.9em;">Language</span>
</div>
<div class="section card">
<h2>Animated Counters</h2>
<div>Clients Helped: <span class="counter" id="clientsCounter">0</span></div>
<div>Meal Plans Created: <span class="counter" id="mealsCounter">0</span></div>
</div>
<div class="section card">
<h2>3D Fruits (Click for Nutrition Facts)</h2>
<div style="font-size:0.95em;">Click a fruit below to highlight your favorite and see its nutrition info.</div>
</div>
<div class="section card">
<h2>Newsletter Signup</h2>
<form class="newsletter" onsubmit="event.preventDefault();alert('Thank you for subscribing!');this.reset();">
<input type="email" placeholder="Your email" required>
<button class="btn" type="submit">Subscribe</button>
</form>
</div>
<div class="section card">
<h2>Blog / Articles</h2>
<ul>
<li><a href="#" onclick="alert('Open blog post 1')">5 Superfoods for Energy</a></li>
<li><a href="#" onclick="alert('Open blog post 2')">How to Read Nutrition Labels</a></li>
<li><a href="#" onclick="alert('Open blog post 3')">Meal Prep Tips for Busy People</a></li>
</ul>
</div>
<div class="section card">
<h2>Before & After Gallery</h2>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=facearea&w=200&h=200" alt="Before">
<img src="https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=facearea&w=200&h=200" alt="After">
<img src="https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=facearea&w=200&h=200" alt="Before">
<img src="https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=facearea&w=200&h=200" alt="After">
</div>
</div>
<div class="section card video-section">
<h2>Video Section</h2>
<iframe src="https://www.youtube.com/embed/5Qj5zH0z2wA" frameborder="0" allowfullscreen></iframe>
</div>
<div class="section card">
<h2>Live Chat</h2>
<a href="https://wa.me/1234567890" target="_blank" class="btn"><i class="fab fa-whatsapp"></i> WhatsApp Chat</a>
<a href="https://m.me/yourpage" target="_blank" class="btn"><i class="fab fa-facebook-messenger"></i> Messenger</a>
</div>
<div class="section card">
<h2>Book an Appointment</h2>
<iframe src="https://calendly.com/" width="100%" height="400" style="border:none;border-radius:8px;"></iframe>
</div>
<div class="section card">
<h2>Find Us</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509374!2d144.9537363153169!3d-37.8162797797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43f1f1f1f1%3A0x5045675218ce6e0!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1614644081234!5m2!1sen!2sus" width="100%" height="200" style="border:0;border-radius:8px;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="section card">
<h2>Pricing Table</h2>
<table class="pricing-table">
<tr><th>Service</th><th>Price</th></tr>
<tr><td>Initial Consultation</td><td>$80</td></tr>
<tr><td>Follow-up Session</td><td>$50</td></tr>
<tr><td>Meal Plan Package</td><td>$120</td></tr>
</table>
</div>
<div class="section card">
<h2>Success Stories</h2>
<div class="testimonial">
"Lost 20 pounds and gained confidence! Thank you, Jane!"<br>
<span>- Emily R.</span>
</div>
<div class="testimonial">
"My cholesterol is down and my energy is up. Highly recommend!"<br>
<span>- John D.</span>
</div>
</div>
<div class="section card">
<h2>Healthy Recipes</h2>
<ul class="recipes-list">
<li><a href="#" onclick="alert('Open recipe 1')">Avocado Toast with Egg</a></li>
<li><a href="#" onclick="alert('Open recipe 2')">Quinoa & Veggie Bowl</a></li>
<li><a href="#" onclick="alert('Open recipe 3')">Berry Smoothie</a></li>
</ul>
</div>
<div class="section card">
<h2>BMI Calculator</h2>
<form id="bmiForm" onsubmit="event.preventDefault();calcBMI();">
<input type="number" id="bmiWeight" placeholder="Weight (kg)" required>
<input type="number" id="bmiHeight" placeholder="Height (cm)" required>
<button class="btn" type="submit">Calculate BMI</button>
</form>
<div id="bmiResult"></div>
</div>
<div class="section card">
<h2>Progress Tracker</h2>
<form id="progressForm" onsubmit="event.preventDefault();trackProgress();">
<input type="date" id="progressDate" required>
<input type="number" id="progressWeight" placeholder="Weight (kg)" required>
<button class="btn" type="submit">Add Entry</button>
</form>
<ul id="progressList"></ul>
</div>
<div class="section card">
<h2>Client Portal / Login</h2>
<form class="login-form" onsubmit="event.preventDefault();alert('Demo: Login successful!');">
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button class="btn" type="submit">Login</button>
</form>
<div class="client-portal" style="margin-top:10px;">
<button class="btn" onclick="alert('Demo: Accessing personalized plans...')">My Plans</button>
<button class="btn" onclick="alert('Demo: Accessing resources...')">Resources</button>
</div>
</div>
<div class="section card shop-section">
<h2>Shop</h2>
<div class="product">
<img src="https://cdn-icons-png.flaticon.com/512/3075/3075977.png" alt="Meal Plan">
<div>Meal Plan PDF</div>
<div>$15</div>
<button class="btn" onclick="alert('Demo: Added to cart!')">Buy</button>
</div>
<div class="product">
<img src="https://cdn-icons-png.flaticon.com/512/3075/3075977.png" alt="Supplements">
<div>Supplements</div>
<div>$25</div>
<button class="btn" onclick="alert('Demo: Added to cart!')">Buy</button>
</div>
</div>
<div class="section card faq">
<h2>FAQ</h2>
<div class="faq-item">
<div class="faq-q">What should I expect in my first consultation?</div>
<div class="faq-a">We'll discuss your goals, current habits, and create a personalized plan together.</div>
</div>
<div class="faq-item">
<div class="faq-q">Do you offer virtual appointments?</div>
<div class="faq-a">Yes! I offer both in-person and online consultations for your convenience.</div>
</div>
<div class="faq-item">
<div class="faq-q">Can you help with food allergies?</div>
<div class="faq-a">Absolutely. I can help you create safe, nutritious meal plans tailored to your needs.</div>
</div>
</div>
<div class="section card">
<h2>Push Notifications</h2>
<button class="btn" onclick="alert('Demo: Push notifications enabled!')">Enable Notifications</button>
</div>
</div>
</div>
<div id="fruit-popup">
<button class="close-btn" onclick="document.getElementById('fruit-popup').style.display='none'">×</button>
<h3 id="fruit-title"></h3>
<div id="fruit-info"></div>
</div>
<!-- 3D Section -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>Your JavaScript
// Animated welcome message
const welcomeText = "Welcome! Click a fruit below to learn about its nutrition.";
let i = 0;
function typeWelcome() {
if (i <= welcomeText.length) {
document.getElementById('welcome').textContent = welcomeText.slice(0, i++);
setTimeout(typeWelcome, 40);
}
}
typeWelcome();
// FAQ toggle
document.querySelectorAll('.faq-q').forEach(q => {
q.addEventListener('click', function() {
this.classList.toggle('open');
const a = this.nextElementSibling;
a.style.display = a.style.display === 'block' ? 'none' : 'block';
});
});
// Dark/Light mode toggle
const themeBtn = document.getElementById('themeBtn');
themeBtn.onclick = function() {
if (document.documentElement.getAttribute('data-theme') === 'dark') {
document.documentElement.removeAttribute('data-theme');
themeBtn.innerHTML = '<i class="fas fa-moon"></i>';
} else {
document.documentElement.setAttribute('data-theme', 'dark');
themeBtn.innerHTML = '<i class="fas fa-sun"></i>';
}
};
// Animated counters
function animateCounter(id, target) {
let count = 0;
const el = document.getElementById(id);
const step = Math.ceil(target / 60);
function update() {
count += step;
if (count > target) count = target;
el.textContent = count;
if (count < target) setTimeout(update, 20);
}
update();
}
animateCounter('clientsCounter', 250);
animateCounter('mealsCounter', 120);
// 3D Scene Setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0fff0);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lighting
const light = new THREE.DirectionalLight(0xffffff, 1.1);
light.position.set(5, 10, 7.5);
scene.add(light);
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
// Fruits group
const fruits = [];
// Apple
const appleGeometry = new THREE.SphereGeometry(1, 32, 32);
const appleMaterial = new THREE.MeshPhongMaterial({color: 0xd32f2f, shininess: 80});
const apple = new THREE.Mesh(appleGeometry, appleMaterial);
apple.position.x = -2.2;
scene.add(apple);
// Apple stem
const stemGeometry = new THREE.CylinderGeometry(0.07, 0.07, 0.5, 16);
const stemMaterial = new THREE.MeshPhongMaterial({color: 0x6d4c41});
const stem = new THREE.Mesh(stemGeometry, stemMaterial);
stem.position.set(-2.2, 1.2, 0);
scene.add(stem);
// Apple leaf
const leafGeometry = new THREE.SphereGeometry(0.2, 16, 16);
leafGeometry.scale(1, 0.5, 1.5);
const leafMaterial = new THREE.MeshPhongMaterial({color: 0x388e3c});
const leaf = new THREE.Mesh(leafGeometry, leafMaterial);
leaf.position.set(-2.0, 1.3, 0);
leaf.rotation.z = Math.PI / 4;
scene.add(leaf);
fruits.push({
mesh: apple,
name: "Apple",
info: "<b>Calories:</b> 95<br><b>Fiber:</b> 4g<br><b>Vitamin C:</b> 14% DV<br><b>Benefits:</b> Heart health, weight loss, gut health."
});
// Banana (curved cylinder)
const bananaCurve = new THREE.Curve();
bananaCurve.getPoint = function (t) {
const angle = Math.PI * t * 0.7 - Math.PI * 0.35;
return new THREE.Vector3(
Math.cos(angle) * 1.1,
Math.sin(angle) * 0.5,
0
);
};
const bananaGeometry = new THREE.TubeGeometry(bananaCurve, 40, 0.18, 16, false);
const bananaMaterial = new THREE.MeshPhongMaterial({color: 0xffeb3b});
const banana = new THREE.Mesh(bananaGeometry, bananaMaterial);
banana.position.x = 0;
banana.position.y = -0.2;
banana.rotation.z = Math.PI / 8;
scene.add(banana);
fruits.push({
mesh: banana,
name: "Banana",
info: "<b>Calories:</b> 105<br><b>Potassium:</b> 12% DV<br><b>Vitamin B6:</b> 20% DV<br><b>Benefits:</b> Energy, digestion, heart health."
});
// Orange
const orangeGeometry = new THREE.SphereGeometry(0.9, 32, 32);
const orangeMaterial = new THREE.MeshPhongMaterial({color: 0xff9800, shininess: 60});
const orange = new THREE.Mesh(orangeGeometry, orangeMaterial);
orange.position.x = 2.2;
scene.add(orange);
fruits.push({
mesh: orange,
name: "Orange",
info: "<b>Calories:</b> 62<br><b>Vitamin C:</b> 116% DV<br><b>Fiber:</b> 3g<br><b>Benefits:</b> Immunity, skin health, hydration."
});
// Highlight effect
let selectedFruit = null;
function highlightFruit(fruit) {
fruits.forEach(f => {
f.mesh.material.emissive = new THREE.Color(0x000000);
f.mesh.scale.set(1,1,1);
});
if (fruit) {
fruit.mesh.material.emissive = new THREE.Color(0x4caf50);
fruit.mesh.scale.set(1.15,1.15,1.15);
selectedFruit = fruit;
} else {
selectedFruit = null;
}
}
highlightFruit(fruits[0]); // Default highlight apple
// Mouse picking
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
renderer.domElement.addEventListener('pointerdown', function(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(fruits.map(f=>f.mesh));
if (intersects.length > 0) {
const fruit = fruits.find(f => f.mesh === intersects[0].object);
highlightFruit(fruit);
// Show popup
document.getElementById('fruit-title').textContent = fruit.name;
document.getElementById('fruit-info').innerHTML = fruit.info;
document.getElementById('fruit-popup').style.display = 'block';
}
});
// Responsive
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Animation
function animate() {
requestAnimationFrame(animate);
apple.rotation.y += 0.01;
stem.rotation.y += 0.01;
leaf.rotation.y += 0.01;
banana.rotation.y += 0.012;
orange.rotation.y += 0.008;
renderer.render(scene, camera);
}
animate();
// Move stem and leaf with apple
function updateAppleParts() {
stem.position.x = apple.position.x;
stem.position.y = apple.position.y + 1.2;
leaf.position.x = apple.position.x + 0.2;
leaf.position.y = apple.position.y + 1.3;
}
setInterval(updateAppleParts, 30);
// BMI Calculator
function calcBMI() {
const w = parseFloat(document.getElementById('bmiWeight').value);
const h = parseFloat(document.getElementById('bmiHeight').value) / 100;
if (w > 0 && h > 0) {
const bmi = w / (h * h);
let msg = `Your BMI: <b>${bmi.toFixed(1)}</b> - `;
if (bmi < 18.5) msg += "Underweight";
else if (bmi < 25) msg += "Normal";
else if (bmi < 30) msg += "Overweight";
else msg += "Obese";
document.getElementById('bmiResult').innerHTML = msg;
}
}
// Progress Tracker
function trackProgress() {
const date = document.getElementById('progressDate').value;
const weight = document.getElementById('progressWeight').value;
if (date && weight) {
const li = document.createElement('li');
li.textContent = `${date}: ${weight} kg`;
document.getElementById('progressList').appendChild(li);
}
}
// Close fruit popup on outside click
window.addEventListener('click', function(e) {
const popup = document.getElementById('fruit-popup');
if (popup.style.display === 'block' && !popup.contains(e.target) && !e.target.closest('canvas')) {
popup.style.display = 'none';
}
});Your CSS
:root {
--main-bg: #f0fff0;
--main-color: #2d572c;
--accent: #4caf50;
--text: #222;
--card-bg: #fff;
}
[data-theme="dark"] {
--main-bg: #222;
--main-color: #b2ffb2;
--accent: #81c784;
--text: #f0fff0;
--card-bg: #333;
}