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
eb0bec4 verified
raw
history blame contribute delete
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>