Hugging Face's logo

Spaces:
YOUSEF2434
/
Computer-Vision-Lab
Paused

App Files Community
Computer-Vision-Lab / Lab-Selection.html
YOUSEF2434's picture
YOUSEF2434
Update Lab-Selection.html
84624f1 verified
raw
history blame
30.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI STEM Lab</title>
<style>
:root {
/* Dark Mode Variables */
--bg-color: #121212;
--card-bg: #1e1e1e;
--accent-color: #0a84ff; /* Apple-style vibrant blue */
--accent-hover: #409cff;
--text-main: #f5f5f7;
--text-secondary: #a1a1a6;
/* Window Colors */
--mac-window-bg: #2c2c2e;
--mac-header-bg: #3a3a3c;
--mac-border: rgba(0, 0, 0, 0.5);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
/* Playground Header */
header {
margin-bottom: 50px;
text-align: center;
max-width: 800px;
}
h1 {
color: var(--text-main);
font-weight: 800;
font-size: 3rem;
margin: 0 0 15px 0;
letter-spacing: -0.03em;
background: linear-gradient(90deg, #fff, #a1a1a6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p.subtitle {
color: var(--text-secondary);
font-size: 1.3rem;
line-height: 1.5;
}
/* Card Container */
.playground-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 30px;
width: 95%;
max-width: 1400px;
}
/* Lab Cards */
.card {
background: var(--card-bg);
border-radius: 24px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px solid rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
border-color: rgba(255,255,255,0.2);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, var(--accent-color), #bc52ff);
opacity: 0.7;
}
.icon-box {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 25px;
}
.card h2 {
margin: 0 0 15px 0;
font-size: 1.8rem;
font-weight: 700;
color: var(--text-main);
}
.card p {
margin: 0 0 30px 0;
color: var(--text-secondary);
line-height: 1.6;
font-size: 1.1rem;
flex-grow: 1;
}
.card strong {
color: #fff;
font-weight: 600;
}
.launch-btn {
background-color: var(--accent-color);
color: white;
border: none;
padding: 14px 28px;
border-radius: 30px;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
text-align: center;
}
.launch-btn:hover {
background-color: var(--accent-hover);
transform: scale(1.02);
}
/* Modal Overlay */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
z-index: 1000;
display: none; /* Changed from visibility hidden to display none for stricter reset */
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
display: flex;
opacity: 1;
}
/* macOS Window Styling */
.mac-window {
width: 85%;
max-width: 1000px;
height: 85vh;
background: var(--mac-window-bg);
border-radius: 12px;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
position: relative;
}
.modal-overlay.active .mac-window {
transform: scale(1);
}
/* Window Header */
.window-header {
height: 44px;
background: var(--mac-header-bg);
border-bottom: 1px solid #1c1c1e;
display: flex;
align-items: center;
padding-left: 16px;
cursor: default;
}
/* The Red Button */
.traffic-light {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #ff453a;
border: none;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.traffic-light:hover::after {
content: "×";
color: #3b0000;
font-size: 11px;
font-weight: 900;
margin-top: -1px;
}
.window-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #cfcfcf;
font-weight: 500;
}
/* Window Content */
.window-content {
flex: 1;
background: #000;
position: relative;
}
iframe {
width: 100%;
height: 100%;
border: none;
background: #121212;
}
</style>
</head>
<body>
<header>
<h1>AI Model Laboratory</h1>
<p class="subtitle">Welcome to the hands-on section! Based on the slideshow we just watched, choose an experiment below to test how computers "see" the world.</p>
</header>
<div class="playground-grid">
<!-- Option 1: Pose Estimation -->
<div class="card">
<div class="icon-box">🧘</div>
<h2>Pose Estimation</h2>
<p>
<strong>Remember the slide about skeletons?</strong><br><br>
In this experiment, the AI will try to find your joints (like elbows, knees, and shoulders) and connect them with lines.
<br><br>
<em>Try this: Try to do some movements with yout hands and face. Does the AI follow your movement?</em>
</p>
<button class="launch-btn" onclick="openWindow('Pose Estimation', 'pose.html')">Launch Experiment</button>
</div>
<!-- Option 2: Object Recognition -->
<div class="card">
<div class="icon-box">🔍</div>
<h2>Object Recognition</h2>
<p>
<strong>How does a self-driving car see?</strong><br><br>
This model is trained to recognize thousands of everyday items. It draws a box around what it sees and gives it a label.
<br><br>
<em>Try this: Hold up a pen, a water bottle, or your shoe. Can it guess them all correctly?</em>
</p>
<center>
<button id="dev-trigger-btn">Wondering what objects this model can detect? Click here to find out!</button>
</center>
<br>
<button class="launch-btn" onclick="openWindow('Object Recognition', 'Object-Detection.html')">Launch Experiment</button>
</div>
<!-- Option 3: Face Expression -->
<div class="card">
<div class="icon-box">😊</div>
<h2>Face Expression</h2>
<p>
<strong>Can computers understand feelings?</strong><br><br>
This AI looks at the geometry of your face—how much your mouth curves or your eyebrows lift—to guess your emotion.
<br><br>
<em>Try this: Make a super happy face, then a sad face. See if the "Confidence Score" changes!</em>
</p>
<button class="launch-btn" onclick="openWindow('Face Expression', 'Face-Expresion.html')">Launch Experiment</button>
</div>
</div>
<h1 style="text-align:center; margin:60px 0 30px;">
Here are some extra ones that you might like....
</h1>
<div class="playground-grid">
<!-- Extra Option 1 -->
<div class="card">
<div class="icon-box">🏃</div>
<h2>JS WebCam Motion Detection</h2>
<p>
<strong>Can a computer actually “see” movement?</strong><br><br>
This project watches your webcam and compares each frame to the one before it.
When something moves—even a tiny bit—the computer highlights the change so you can
spot motion glowing on the screen.<br><br>
<em>Try this: Wave your hand slowly, then quickly. Notice how the motion pattern changes!</em>
</p>
<button class="launch-btn" onclick="openWindow('Movement Detection', 'movement-detection.html')">Launch Experiment</button>
</div>
<!-- Extra Option 2 -->
<div class="card">
<div class="icon-box">👁️</div>
<h2>Object Detection with TensorFlow.js</h2>
<p>
<strong>How can a computer tell what's in a picture?</strong><br><br>
This project uses a pre‑trained AI model that can look at an image—or even your
webcam—and point out objects it recognizes. It doesn’t just guess the object,
it also shows *where* it is in the picture by drawing a box around it.<br><br>
<em>Try this: Hold up different objects (like a pencil, cup, or book) and see
which ones the AI can detect!</em>
</p>
<button class="launch-btn" onclick="openWindow('Object Detection with TensorFlow.js', 'live-feed-object-detection.html')">Launch Experiment</button>
</div>
<!-- Extra Option 2 -->
<div class="card">
<div class="icon-box">👁️</div>
<h2>Want to make your own model?</h2>
<p>
<strong>How about making your own AI model that detects the objects <em>you</em> care about?</strong><br><br>
You can try this experiment to build your own custom model using TensorFlow.js and the Teachable Machine Algorithm.<br><br>
<br>
<em>Tip:</em> Try choosing 2 objects around you (like a water bottle, pencil, pair of headphones, or even yourself) and gather at least 30 images of each from different angles. The more variety you include, the smarter your model becomes.<br><br>
</p>
</p>
<button class="launch-btn" onclick="openWindow('build your own custom model using TensorFlow.js and the Teachable Machine Algorithm', 'make-model.html')">Launch Experiment</button>
</div>
</div>
<!-- Modal Overlay -->
<div class="modal-overlay" id="modalOverlay">
<div class="mac-window" id="macWindow">
<div class="window-header">
<div class="traffic-light" id="closeBtn"></div>
<div class="window-title" id="windowTitle">Terminal</div>
</div>
<div class="window-content">
<iframe id="labFrame" src=""></iframe>
</div>
</div>
</div>
<script>
// Wait for DOM to load to prevent "not defined" errors
document.addEventListener('DOMContentLoaded', function() {
const overlay = document.getElementById('modalOverlay');
const macWindow = document.getElementById('macWindow');
const labFrame = document.getElementById('labFrame');
const windowTitle = document.getElementById('windowTitle');
const closeBtn = document.getElementById('closeBtn');
// Global function to be called by buttons
window.openWindow = function(title, fileName) {
if (windowTitle) windowTitle.textContent = "Running: " + title;
if (overlay) overlay.classList.add('active');
// Set the iframe SRC to the actual file link
if (labFrame) labFrame.src = fileName;
};
function closeWindow() {
if (overlay) overlay.classList.remove('active');
// Clear iframe src to stop the page from running in background
setTimeout(() => {
if (labFrame) labFrame.src = "";
}, 300);
}
// Close button listener
if (closeBtn) {
closeBtn.addEventListener('click', closeWindow);
}
// Click outside to close Logic
if (overlay) {
overlay.addEventListener('click', function(event) {
if (event.target === overlay) {
closeWindow();
}
});
}
// Prevent clicks inside the window from closing it
if (macWindow) {
macWindow.addEventListener('click', function(event) {
event.stopPropagation();
});
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* The Trigger Button */
#dev-trigger-btn {
background-color: #007AFF;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.1s ease;
}
#dev-trigger-btn:active {
transform: scale(0.96);
}
/* Modal Overlay (Background) */
#modal-overlay {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
z-index: 1000;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
/* The Dark MacOS Window */
#macos-window {
width: 80%;
max-width: 900px;
height: 70%;
background-color: #1e1e1e; /* Dark Mode Background */
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Window Title Bar */
.window-header {
height: 38px;
background: linear-gradient(to bottom, #3a3a3a, #2b2b2b);
border-bottom: 1px solid #000;
display: flex;
align-items: center;
padding: 0 16px;
flex-shrink: 0;
}
/* Traffic Light Buttons */
.window-controls {
display: flex;
gap: 8px;
}
.control-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.2);
}
.close-dot { background-color: #ff5f56; cursor: pointer; }
.close-dot:hover { background-color: #ff3b30; } /* Brightens on hover */
.minimize-dot { background-color: #ffbd2e; }
.expand-dot { background-color: #27c93f; }
.window-title {
color: #d1d1d1;
font-size: 13px;
font-weight: 500;
margin-left: 20px;
flex-grow: 1;
text-align: center;
padding-right: 60px; /* Balance the title */
}
/* Content Area */
.window-content {
padding: 20px;
overflow-y: auto;
color: #fff;
}
/* Grid for Tiles */
.tiles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
/* Individual Tile Style */
.tile {
background-color: #2c2c2e;
border: 1px solid #3a3a3c;
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: background-color 0.2s;
}
.tile:hover {
background-color: #3a3a3c;
}
.tile-icon {
font-size: 32px;
}
.tile-name {
font-size: 16px;
font-weight: 700;
color: #fff;
text-transform: capitalize;
}
.tile-desc {
font-size: 13px;
line-height: 1.4;
color: #a1a1a6;
}
/* Scrollbar Styling */
.window-content::-webkit-scrollbar {
width: 8px;
}
.window-content::-webkit-scrollbar-track {
background: #1e1e1e;
}
.window-content::-webkit-scrollbar-thumb {
background: #48484a;
border-radius: 4px;
}
/* Animation States */
#modal-overlay.active {
display: flex;
opacity: 1;
}
#modal-overlay.active #macos-window {
transform: scale(1);
}
</style>
</head>
<body>
<!-- 1. The Trigger Button -->
<!-- 2. The Modal Structure -->
<div id="modal-overlay">
<div id="macos-window">
<!-- Header with Red Button -->
<div class="window-header">
<div class="window-controls">
<div class="control-dot close-dot" id="close-btn" title="Close"></div>
</div>
<div class="window-title">COCO Dataset Classes (80 Objects)</div>
</div>
<!-- Content -->
<div class="window-content">
<div style="margin-bottom: 20px; color: #a1a1a6; font-size: 14px;">
This AI model is trained to see the world like you do. Below are the 80 different things it can instantly recognize in a photo.
</div>
<div class="tiles-grid" id="tiles-container">
<!-- Tiles injected via JS -->
</div>
</div>
</div>
</div>
<script>
// Data: 80 COCO Classes with Emojis and Kid-Friendly Explanations
const cocoData = [
{ name: "person", emoji: "👤", desc: "A human being, like you, your friends, or your teacher." },
{ name: "bicycle", emoji: "🚲", desc: "A two-wheeled vehicle that you pedal to ride." },
{ name: "car", emoji: "🚗", desc: "A vehicle with four wheels used to drive on roads." },
{ name: "motorcycle", emoji: "🏍️", desc: "Like a bicycle, but with a fast engine and heavier wheels." },
{ name: "airplane", emoji: "✈️", desc: "A flying machine with wings that carries passengers across the sky." },
{ name: "bus", emoji: "🚌", desc: "A large vehicle that carries many people along a set route." },
{ name: "train", emoji: "🚆", desc: "A series of connected cars that run on a metal track." },
{ name: "truck", emoji: "🚚", desc: "A large, heavy vehicle used for carrying cargo or big loads." },
{ name: "boat", emoji: "⛵", desc: "A vehicle designed to float and travel on water." },
{ name: "traffic light", emoji: "🚦", desc: "A signal with red, yellow, and green lights to control cars." },
{ name: "fire hydrant", emoji: "🚒", desc: "A pipe on the street that firefighters use to get water." },
{ name: "stop sign", emoji: "🛑", desc: "A red octagon sign that tells drivers to stop moving." },
{ name: "parking meter", emoji: "🅿️", desc: "A machine where you pay money to park your car on the street." },
{ name: "bench", emoji: "🪑", desc: "A long seat for several people, usually found in parks." },
{ name: "bird", emoji: "🐦", desc: "An animal with feathers and wings that can usually fly." },
{ name: "cat", emoji: "🐈", desc: "A small, furry pet that purrs and catches mice." },
{ name: "dog", emoji: "🐕", desc: "A loyal pet with four legs that barks and loves to play." },
{ name: "horse", emoji: "🐎", desc: "A large, strong animal that people can ride." },
{ name: "sheep", emoji: "🐑", desc: "A fluffy farm animal that gives us wool for clothes." },
{ name: "cow", emoji: "🐄", desc: "A large farm animal that gives us milk." },
{ name: "elephant", emoji: "🐘", desc: "A huge animal with big ears and a long trunk." },
{ name: "bear", emoji: "🐻", desc: "A large, strong wild animal with thick fur." },
{ name: "zebra", emoji: "🦓", desc: "A wild horse-like animal with black and white stripes." },
{ name: "giraffe", emoji: "🦒", desc: "The tallest animal, with a very long neck to eat tree leaves." },
{ name: "backpack", emoji: "🎒", desc: "A bag you carry on your back to hold books and supplies." },
{ name: "umbrella", emoji: "☂️", desc: "A tool you hold over your head to stay dry in the rain." },
{ name: "handbag", emoji: "👜", desc: "A small bag used to carry personal items like a wallet." },
{ name: "tie", emoji: "👔", desc: "A long piece of cloth worn around the neck with a suit." },
{ name: "suitcase", emoji: "🧳", desc: "A large bag used for packing clothes when traveling." },
{ name: "frisbee", emoji: "🥏", desc: "A plastic disc you throw to a friend or dog." },
{ name: "skis", emoji: "⛷️", desc: "Long, flat runners you attach to boots to glide on snow." },
{ name: "snowboard", emoji: "🏂", desc: "A single wide board you stand on to surf down snowy hills." },
{ name: "sports ball", emoji: "⚽", desc: "Any round object used in games like soccer, basketball, or tennis." },
{ name: "kite", emoji: "🪁", desc: "A light frame with paper or cloth that flies in the wind." },
{ name: "baseball bat", emoji: "⚾", desc: "A smooth wooden or metal stick used to hit a baseball." },
{ name: "baseball glove", emoji: "🧤", desc: "A leather mitt worn to catch a baseball safely." },
{ name: "skateboard", emoji: "🛹", desc: "A short board with wheels that you stand on and ride." },
{ name: "surfboard", emoji: "🏄", desc: "A long board used to ride ocean waves." },
{ name: "tennis racket", emoji: "🎾", desc: "A bat with a net mesh used to hit a tennis ball." },
{ name: "bottle", emoji: "🍾", desc: "A container with a narrow neck for holding liquids." },
{ name: "wine glass", emoji: "🍷", desc: "A fancy glass with a stem, used for special drinks." },
{ name: "cup", emoji: "☕", desc: "A small open container for drinking tea or coffee." },
{ name: "fork", emoji: "🍴", desc: "A tool with prongs used to pick up food." },
{ name: "knife", emoji: "🔪", desc: "A tool with a sharp edge used for cutting food." },
{ name: "spoon", emoji: "🥄", desc: "A tool with a small scoop for eating soup or cereal." },
{ name: "bowl", emoji: "🥣", desc: "A round, deep dish used for soup or cereal." },
{ name: "banana", emoji: "🍌", desc: "A long, curved yellow fruit that you peel to eat." },
{ name: "apple", emoji: "🍎", desc: "A round red or green fruit that is crunchy and sweet." },
{ name: "sandwich", emoji: "🥪", desc: "Two slices of bread with meat, cheese, or veggies inside." },
{ name: "orange", emoji: "🍊", desc: "A round citrus fruit with a thick skin and juicy inside." },
{ name: "broccoli", emoji: "🥦", desc: "A green vegetable that looks like a little tree." },
{ name: "carrot", emoji: "🥕", desc: "A crunchy orange vegetable that grows underground." },
{ name: "hot dog", emoji: "🌭", desc: "A cooked sausage served in a long, soft bun." },
{ name: "pizza", emoji: "🍕", desc: "A round dough base topped with tomato sauce and cheese." },
{ name: "donut", emoji: "🍩", desc: "A sweet, fried ring of dough, often with frosting." },
{ name: "cake", emoji: "🎂", desc: "A sweet baked dessert often eaten at birthday parties." },
{ name: "chair", emoji: "🪑", desc: "A piece of furniture designed for one person to sit on." },
{ name: "couch", emoji: "🛋️", desc: "A soft, long seat where multiple people can relax." },
{ name: "potted plant", emoji: "🪴", desc: "A plant grown inside a container for decoration." },
{ name: "bed", emoji: "🛏️", desc: "A piece of furniture with a mattress for sleeping." },
{ name: "dining table", emoji: "🍽️", desc: "A large table where families sit to eat meals." },
{ name: "toilet", emoji: "🚽", desc: "A bathroom fixture used for getting rid of waste." },
{ name: "tv", emoji: "📺", desc: "An electronic screen for watching shows and movies." },
{ name: "laptop", emoji: "💻", desc: "A portable computer that you can use on your lap." },
{ name: "mouse", emoji: "🖱️", desc: "A handheld device used to move the cursor on a computer." },
{ name: "remote", emoji: "📡", desc: "A controller used to change channels on a TV from afar." },
{ name: "keyboard", emoji: "⌨️", desc: "A board with buttons for typing letters into a computer." },
{ name: "cell phone", emoji: "📱", desc: "A small phone you can carry in your pocket." },
{ name: "microwave", emoji: "​​​​​​⏲️", desc: "An oven that heats food very quickly." },
{ name: "oven", emoji: "🥘", desc: "A kitchen appliance used for baking and roasting food." },
{ name: "toaster", emoji: "🍞", desc: "A machine that browns bread slices." },
{ name: "sink", emoji: "🚰", desc: "A basin with a faucet for washing hands or dishes." },
{ name: "refrigerator", emoji: "❄️", desc: "A cold closet that keeps food fresh." },
{ name: "book", emoji: "📖", desc: "A set of pages with writing or pictures to read." },
{ name: "clock", emoji: "⏰", desc: "A device that tells you what time it is." },
{ name: "vase", emoji: "🏺", desc: "A decorative container used for holding flowers." },
{ name: "scissors", emoji: "✂️", desc: "A tool with two blades used for cutting paper." },
{ name: "teddy bear", emoji: "🧸", desc: "A soft toy bear that is cuddly and cute." },
{ name: "hair drier", emoji: "💨", desc: "A machine that blows hot air to dry wet hair." },
{ name: "toothbrush", emoji: "🪥", desc: "A small brush used to clean your teeth." }
];
// DOM Elements
const triggerBtn = document.getElementById('dev-trigger-btn');
const modal = document.getElementById('modal-overlay');
const closeBtn = document.getElementById('close-btn');
const tilesContainer = document.getElementById('tiles-container');
const macosWindow = document.getElementById('macos-window');
// 1. Populate the Grid
function renderTiles() {
tilesContainer.innerHTML = cocoData.map(item => `
<div class="tile">
<div class="tile-icon">${item.emoji}</div>
<div class="tile-name">${item.name}</div>
<div class="tile-desc">${item.desc}</div>
</div>
`).join('');
}
// 2. Open Modal Function
triggerBtn.addEventListener('click', () => {
renderTiles(); // Render content on open
modal.classList.add('active'); // Show modal
});
// 3. Close Modal Function
function closeModal() {
modal.classList.remove('active');
}
// Event: Click the Red Dot
closeBtn.addEventListener('click', closeModal);
// Event: Click Outside the Window
modal.addEventListener('click', (e) => {
// If the user clicks the dark background (modal), close it.
// If they click INSIDE the window, do nothing.
if (e.target === modal) {
closeModal();
}
});
</script>
</body>
</html>