-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintroduction.html
284 lines (245 loc) · 16.2 KB
/
introduction.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Elegant Animated Background -->
<div class="food-background"></div>
<div class="light-overlay"></div>
<!-- 🔹 Hamburger Menu Icon -->
<div class="menu-icon" onclick="toggleMenu()">☰</div>
<div class="navbar">
<a href="index.html">Home</a>
<a href="introduction.html" class="active">Introduction</a>
<a href="data_prep.html">Data Prep</a>
<a href="eda.html">EDA</a>
<a href="pca.html">PCA</a>
<a href="clustering.html">Clustering</a>
<a href="arm.html">ARM</a>
<a href="decision_trees.html">Decision Trees</a>
<a href="naive_bayes.html">Naive Bayes</a>
<a href="svm.html">SVM</a>
<a href="regression.html">Regression</a>
<a href="conclusions.html">Conclusions</a>
<a href="about_me.html">About Me</a>
</div>
<div class="content-section">
<h1 id="typing-title"></h1>
<div class="content-wrapper">
<h2 class="fade-in">🥗 How Processed Is Your Diet? 🍕 See where you stand before we dive in!</h2>
<div class="quiz-container">
<div id="quiz">
<div class="question-container">
<p id="question-text"></p>
<div class="options">
<button class="option" onclick="selectOption(0)"></button>
<button class="option" onclick="selectOption(1)"></button>
<button class="option" onclick="selectOption(2)"></button>
</div>
</div>
<div class="progress-bar">
<div id="progress"></div>
</div>
<button id="next-btn" onclick="nextQuestion()" disabled>Next ➡️</button>
</div>
<div id="quiz-result" class="hidden">
<h3>Your Diet Score: <span id="score"></span>/100</h3>
<p id="result-text"></p>
<img id="result-image" src="" alt="Diet Result">
<button onclick="restartQuiz()">Try Again</button>
</div>
</div>
<p class="fade-in">
The rise of ultra-processed foods has reshaped the way we eat, live, and think about food. These items—packaged snacks, sugary cereals, instant noodles, sodas, and frozen meals—offer quick solutions in a fast-paced world. Their appeal lies in their convenience, low cost, and flavors engineered to keep us coming back for more. But behind their shiny wrappers lies a troubling reality: they are often loaded with added sugars, unhealthy fats, preservatives, and artificial ingredients. Over time, these foods replace fresh, home-cooked meals and begin to dominate our diets without us even realizing it.
</p>
<p class="fade-in">
Across cities, towns, and even rural areas, ultra-processed foods have become the norm. Supermarkets are lined with shelves full of colorful, packaged choices, while traditional produce and fresh ingredients are pushed to the side or priced higher. As these processed foods become more accessible than whole foods, people—especially those in lower-income communities—turn to them as affordable options. But this shift comes with a cost. As consumption rises, so do rates of obesity, diabetes, heart disease, and other chronic conditions that were once far less common.
</p>
<p class="fade-in">
Children are among the most vulnerable in this food revolution. Exposed to flashy ads and cartoon-branded snacks from an early age, many kids grow up preferring sugary, salty, and artificially flavored foods over fruits and vegetables. These eating habits often carry into adulthood, creating generations that depend on foods that may satisfy taste buds but offer little nutritional value. In school cafeterias, vending machines, and even at home, ultra-processed options are more available than ever. This creates a cycle that becomes harder to break the longer it continues.
</p>
<p class="fade-in">
In response, many governments and health organizations have started taking action. Some have introduced sugar taxes to discourage the consumption of sugary drinks, while others have pushed for better food labeling to help people understand what they’re eating. Educational campaigns have emerged, teaching communities about nutrition and balanced meals. Yet progress is slow and uneven, often facing resistance from powerful food corporations. These companies spend billions on marketing and lobbying, making it difficult to change public behavior or pass meaningful reforms.
</p>
<p class="fade-in">
The issue of ultra-processed foods isn’t just about personal health—it affects our culture, economy, and environment. Traditional diets that once centered around homemade meals and local ingredients are disappearing, replaced by global fast food and processed snacks. Economically, it's often cheaper to buy a processed meal than fresh produce, creating an unfair food system that favors profit over nourishment. Environmentally, these foods require energy-intensive production and come wrapped in layers of plastic, contributing to pollution and climate change. It's a web of impact that reaches far beyond the dinner table.
</p>
<p class="fade-in">
This project invites you to reflect on the story behind what’s on your plate. By exploring the deep-rooted influence of ultra-processed foods, we aim to spark conversation and awareness around the choices we make every day. Whether it's choosing to support local farmers, cooking more meals at home, or pushing for policy changes, everyone has a role in reshaping our food system. Together, we can move toward a future where food nourishes both body and community. A future where convenience doesn't come at the cost of our health, and every bite brings us closer to well-being.
</p>
</div>
<div class="image-container">
<img src="assets/health_crisis.jpeg" alt="Global Health Crisis" class="topic-image">
</div>
<div class="questions-section">
<div class="content-wrapper">
<h2 class="fade-in">10 Questions Driving This Project</h2>
<ol>
<li>What role do ultra-processed foods play in shaping modern dietary habits globally?</li>
<li>How do nutrient profiles, such as fat, protein, and carbohydrates, differ between food categories?</li>
<li>Which food categories contribute most to calorie-dense, nutrient-poor consumption patterns?</li>
<li>What are the hidden health risks linked to sugar-laden beverages and snacks?</li>
<li>How do major brands influence the availability of high-calorie ultra-processed foods?</li>
<li>What are the systemic economic and cultural factors driving ultra-processed food consumption?</li>
<li>How do traditional diets compare to modern, processed food-based diets in terms of health outcomes?</li>
<li>What environmental impacts are associated with the mass production of ultra-processed foods?</li>
<li>How can public health initiatives effectively address the overconsumption of ultra-processed foods?</li>
<li>What actionable steps can individuals and communities take to promote healthier dietary habits?</li>
</ol>
</div>
</div>
<!-- Impact of Ultra-Processed Foods in Our Diet -->
<div class="content-wrapper">
<h2 class="fade-in">Impact of Ultra-Processed Foods in Our Diet</h2>
<div class="image-container">
<img src="assets/obesity.jpg" alt="Obesity and Ultra-Processed Foods" class="topic-image">
</div>
<p class="fade-in">
Ultra-processed foods have been linked to increased calorie intake and weight gain. A study by the <strong>U.S. Department of Health & Human Services</strong> found that individuals consuming ultra-processed diets gained weight significantly faster than those consuming unprocessed foods, even when nutrient content was controlled. This suggests that factors like additives, processing methods, and increased palatability encourage overeating.
</p>
<p class="fade-in">
In a controlled study, participants on an ultra-processed diet consumed around <strong>500 extra calories per day</strong> compared to those eating unprocessed foods. This led to an average weight gain of <strong>two pounds in just two weeks</strong>. The study highlights how food processing, rather than nutrient composition alone, plays a major role in obesity. Reducing ultra-processed food intake could be a key strategy for maintaining a healthy weight and improving long-term metabolic health.
</p>
<div class="button-section">
<a href="https://directorsblog.nih.gov/2019/05/21/ultra-processed-diet-leads-to-extra-calories-weight-gain/" target="_blank" class="github-button">
Read Full Article
</a>
</div>
</div>
</div>
<!-- Your existing HTML content -->
<script>
document.addEventListener("DOMContentLoaded", function() {
let text = "Does Ultra-Processed Food Fuel a Global Health Crisis?";
let i = 0;
function typeWriter() {
if (i < text.length) {
document.getElementById("typing-title").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, 50);
}
}
typeWriter();
});
</script>
<!-- Your existing HTML content -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const quizData = [
{
question: "What do you usually have for breakfast?",
options: ["🥞 Pancakes & Syrup", "🥑 Avocado Toast", "🍳 Eggs & Fruits"],
scores: [10, 30, 50]
},
{
question: "How often do you eat fast food per week?",
options: ["🍔 More than 4 times", "🍕 1-3 times", "🥗 Rarely or Never"],
scores: [5, 25, 50]
},
{
question: "How do you hydrate?",
options: ["🥤 Soda or Energy Drinks", "🧃 Store-bought Juices", "💧 Water or Herbal Tea"],
scores: [5, 20, 50]
},
{
question: "What do you snack on the most?",
options: ["🍫 Candy & Chips", "🍿 Popcorn or Nuts", "🍎 Fresh Fruits"],
scores: [10, 30, 50]
},
{
question: "How often do you cook homemade meals?",
options: ["🍕 Rarely, mostly processed meals", "🍳 A few times a week", "🥗 Almost daily!"],
scores: [10, 30, 50]
}
];
let currentQuestionIndex = 0;
let totalScore = 0;
const questionText = document.getElementById("question-text");
const optionsButtons = document.querySelectorAll(".option");
const progress = document.getElementById("progress");
const nextButton = document.getElementById("next-btn");
function loadQuestion() {
const currentQuestion = quizData[currentQuestionIndex];
questionText.innerText = currentQuestion.question;
optionsButtons.forEach((button, index) => {
button.innerText = currentQuestion.options[index];
button.dataset.score = currentQuestion.scores[index];
button.classList.remove("selected");
});
nextButton.disabled = true;
}
window.selectOption = function (index) {
optionsButtons.forEach(btn => btn.classList.remove("selected"));
optionsButtons[index].classList.add("selected");
nextButton.disabled = false;
totalScore += parseInt(optionsButtons[index].dataset.score);
};
window.nextQuestion = function () {
if (currentQuestionIndex < quizData.length - 1) {
currentQuestionIndex++;
loadQuestion();
progress.style.width = `${(currentQuestionIndex / quizData.length) * 100}%`;
} else {
showResults();
}
};
function showResults() {
document.getElementById("quiz").classList.add("hidden");
document.getElementById("quiz-result").classList.remove("hidden");
const maxPossibleScore = quizData.length * 50; // Maximum possible score
const normalizedScore = Math.round((totalScore / maxPossibleScore) * 100); // Scale to 100
document.getElementById("score").innerText = normalizedScore;
let resultText = document.getElementById("result-text");
let resultImage = document.getElementById("result-image");
if (totalScore >= 200) {
resultText.innerText = "🔥 Amazing! Your diet is super healthy!";
resultImage.src = "assets/healthy.jpeg";
} else if (totalScore >= 120) {
resultText.innerText = "👌 Pretty Good! You have a balanced diet but could improve.";
resultImage.src = "assets/balanced.jpeg";
} else {
resultText.innerText = "⚠️ Uh oh! Your diet is highly processed. Time to eat more whole foods!";
resultImage.src = "assets/processed.jpeg";
}
}
window.restartQuiz = function () {
currentQuestionIndex = 0;
totalScore = 0;
document.getElementById("quiz-result").classList.add("hidden");
document.getElementById("quiz").classList.remove("hidden");
progress.style.width = "0%";
loadQuestion();
};
loadQuestion();
});
</script>
<!-- 🔹 JavaScript for Scroll-Based Fade-In Effect -->
<script>
document.addEventListener("DOMContentLoaded", function() {
let fadeInElements = document.querySelectorAll(".fade-in");
function fadeInOnScroll() {
fadeInElements.forEach(element => {
let position = element.getBoundingClientRect().top;
let screenHeight = window.innerHeight;
if (position < screenHeight - 100) {
element.classList.add("visible");
}
});
}
window.addEventListener("scroll", fadeInOnScroll);
fadeInOnScroll(); // Trigger on load
});
</script>
<script>
function toggleMenu() {
var navbar = document.querySelector(".navbar");
navbar.classList.toggle("active");
}
</script>
</body>
</html>