buildHtml
baseUrl https://calorie.scroll.pub
metaTags
editButton /edit.html
title Calorie Tracker | Simple & Beautiful Nutrition Tracking
style.css
header
 class hero
 nav
  div Calorie Tracker
   class logo
  div
   class nav-links
   a Dashboard
    href #dashboard
   a Foods
    href #foods
   a Reports
    href #reports
 div
  class hero-content
  h1 Track Your Nutrition Simply
  p A beautiful, intuitive way to monitor your daily calorie intake
  a Get Started
   class primary-button
   href #dashboard
main
 section
  id dashboard
  class dashboard
  h2 Today's Intake
  div
   class stats-container
   div
    class stat-card
    h3 1,250
    p Calories
   div
    class stat-card
    h3 85g
    p Protein
   div
    class stat-card
    h3 45g
    p Fat
   div
    class stat-card
    h3 120g
    p Carbs
  div
   class intake-form
   h3 Add Food
   form
    id food-form
    div
     class form-group
     label Food Name
     input
      type text
      id food-name
      placeholder "e.g. Banana"
    div
     class form-group
     label Calories
     input
      type number
      id food-calories
      placeholder "e.g. 105"
    button
     type submit
     class primary-button
     Add Food
  div
   class food-list
   h3 Today's Foods
   ul
    id recent-foods
    li
     class food-item
     span Banana
     span 105 cal
     button
      class delete-btn
      ×
    li
     class food-item
     span Greek Yogurt
     span 150 cal
     button
      class delete-btn
      ×
 section
  id foods
  class common-foods
  h2 Common Foods
  div
   class food-grid
   div
    class food-card
    h3 Apple
    p 95 cal
   div
    class food-card
    h3 Chicken Breast
    p 165 cal
   div
    class food-card
    h3 White Rice
    p 205 cal
   div
    class food-card
    h3 Avocado
    p 240 cal
   div
    class food-card
    h3 Eggs
    p 70 cal
   div
    class food-card
    h3 Almonds
    p 170 cal
 section
  id reports
  class reports
  h2 Weekly Report
  div
   class chart-container
   canvas
    id calorie-chart
footer
 div
  class footer-content
  div
   class footer-links
   a About
    href about.html
   a Contact
    href contact.html
   a Privacy
    href privacy.html
  p Made with ❤️ for health-conscious people
script.js