🤖 Cannot save fiddle

[ed02071]

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:janedoe@email.com'">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/three@0.154.0/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;
    }