├── Phase-1
    ├── 1.1-computer-basics
    │   ├── README.md
    │   └── exercises
    │   │   ├── 2-mouse-practice.html
    │   │   ├── 7-package-managers.html
    │   │   ├── 4-file-management.html
    │   │   ├── 5-operating-systems.html
    │   │   ├── 6-command-practice.html
    │   │   ├── 1-computer-basics.html
    │   │   └── 3-keyboard-practice.html
    └── 1.2-internet-fundamentals
    │   ├── README.md
    │   └── exercises
    │       ├── 1-internet-basics.html
    │       ├── 3-browser-practice.html
    │       ├── 4-online-safety.html
    │       ├── 5-email-basics.html
    │       └── 2-internet-concepts.html
└── README.md


/Phase-1/1.1-computer-basics/README.md:
--------------------------------------------------------------------------------
 1 | # 🖥️ 1.1 Computer Basics (کمپیوٹر کی بنیادی باتیں)
 2 | 
 3 | > "The computer was born to solve problems that did not exist before." — Bill Gates
 4 | 
 5 | > "کمپیوٹر ان مسائل کو حل کرنے کے لیے پیدا ہوا تھا جو پہلے موجود نہیں تھے۔" — بل گیٹس
 6 | 
 7 | ## 🎯 Overview (جائزہ)
 8 | 
 9 | This section covers the fundamental aspects of using a computer, designed for absolute beginners. The content is available in both English and Urdu to ensure accessibility.
10 | 
11 | یہ سیکشن کمپیوٹر کے استعمال کے بنیادی پہلوؤں کو احاطہ کرتا ہے، جو مکمل طور پر نئے صارفین کے لیے ڈیزائن کیا گیا ہے۔ مواد انگریزی اور اردو دونوں زبانوں میں دستیاب ہے تاکہ رسائی کو یقینی بنایا جا سکے۔
12 | 
13 | ## 📚 Topics Covered (شامل موضوعات)
14 | 
15 | ### 1️⃣ Basic Computer Operations (بنیادی کمپیوٹر آپریشنز)
16 | 
17 | 🔌 Power on/off (پاور آن/آف)
18 | 🖥️ Desktop navigation (ڈیسک ٹاپ نیویگیشن)
19 | 🪟 Windows management (ونڈوز مینجمنٹ)
20 | 
21 | ### 2️⃣ Mouse Skills (ماؤس کی مہارتیں)
22 | 
23 | 🖱️ Clicking (کلک کرنا)
24 | ⚡ Double-clicking (ڈبل کلک)
25 | 📌 Right-clicking (رائٹ کلک)
26 | ✋ Dragging (ڈریگنگ)
27 | 
28 | ### 3️⃣ Keyboard Skills (کی بورڈ کی مہارتیں)
29 | 
30 | ⌨️ Basic typing (بنیادی ٹائپنگ)
31 | 🔑 Special keys (خصوصی کیز)
32 | ⚡ Keyboard shortcuts (کی بورڈ شارٹ کٹس)
33 | 
34 | ### 4️⃣ Command Line Basics (کمانڈ لائن کی بنیادی باتیں)
35 | 
36 | 💻 Understanding the terminal (ٹرمینل کو سمجھنا)
37 | 📝 Basic commands (بنیادی کمانڈز)
38 | 🧭 Navigation (نیویگیشن)
39 | 
40 | ## 🎮 Interactive Exercises (انٹرایکٹو مشقیں)
41 | 
42 | 1. `1-computer-basics.html` - Desktop simulation for basic operations
43 | 2. `2-mouse-practice.html` - Mouse control exercises
44 | 3. `3-keyboard-practice.html` - Typing and keyboard practice
45 | 4. `4-file-management.html` - File and folder operations
46 | 5. `5-operating-systems.html` - OS interface practice
47 | 6. `6-command-practice.html` - Command line practice
48 | 7. `7-package-managers.html` - Package management basics
49 | 
50 | ## 💡 Pro Tips
51 | 
52 | 1. 🎯 Practice regularly - even 15 minutes a day makes a difference
53 | 2. 🔄 Repeat exercises until you feel comfortable
54 | 3. 📝 Take notes in your preferred language
55 | 4. 🤝 Help others learn - teaching reinforces your knowledge
56 | 
57 | ## 🌟 Achievement Checklist
58 | 
59 | - [ ] Complete computer basics simulation
60 | - [ ] Master mouse control exercises
61 | - [ ] Achieve typing practice goals
62 | - [ ] Successfully manage files and folders
63 | - [ ] Navigate OS interfaces confidently
64 | - [ ] Execute basic terminal commands
65 | - [ ] Install and manage packages
66 | 
67 | ## 🎉 Remember
68 | 
69 | > "Every expert was once a beginner."
70 | >
71 | > "ہر ماہر کبھی نیا سیکھنے والا تھا۔"
72 | 
73 | Start with the basics and progress at your own pace. Each small step brings you closer to computer proficiency!
74 | 


--------------------------------------------------------------------------------
/Phase-1/1.2-internet-fundamentals/README.md:
--------------------------------------------------------------------------------
 1 | # 🌐 1.2 Internet Fundamentals (انٹرنیٹ کی بنیادی باتیں)
 2 | 
 3 | > "The Internet is becoming the town square for the global village of tomorrow." — Bill Gates
 4 | 
 5 | > "انٹرنیٹ کل کے عالمی دیہات کا چوک بنتا جا رہا ہے۔" — بل گیٹس
 6 | 
 7 | ## 🎯 Overview (جائزہ)
 8 | 
 9 | This section introduces the basic concepts of the Internet and how to use it safely and effectively. The content is designed for beginners and is available in both English and Urdu.
10 | 
11 | یہ سیکشن انٹرنیٹ کے بنیادی تصورات اور اسے محفوظ اور مؤثر طریقے سے استعمال کرنے کا تعارف کراتا ہے۔ یہ مواد نئے صارفین کے لیے ڈیزائن کیا گیا ہے اور انگریزی اور اردو دونوں زبانوں میں دستیاب ہے۔
12 | 
13 | ## 📚 Topics Covered (شامل موضوعات)
14 | 
15 | ### 1️⃣ What is the Internet? (انٹرنیٹ کیا ہے؟)
16 | 
17 | 🌍 Basic concepts (بنیادی تصورات)
18 | 🔄 How the Internet works (انٹرنیٹ کیسے کام کرتا ہے)
19 | 🔌 Types of connections (کنکشن کی اقسام)
20 | 
21 | ### 2️⃣ Internet Safety (انٹرنیٹ سیفٹی)
22 | 
23 | 🔒 Personal information protection (ذاتی معلومات کی حفاظت)
24 | 🛡️ Safe browsing habits (محفوظ براؤزنگ کی عادات)
25 | 🔑 Password security (پاس ورڈ سیکیورٹی)
26 | 
27 | ### 3️⃣ Web Browsers (ویب براؤزرز)
28 | 
29 | 🏃‍♂️ Popular browsers (مشہور براؤزرز)
30 | 🖥️ Browser interface (براؤزر انٹرفیس)
31 | 🧭 Basic navigation (بنیادی نیویگیشن)
32 | 
33 | ### 4️⃣ Internet Services (انٹرنیٹ سروسز)
34 | 
35 | 📧 Email (ای میل)
36 | 🔍 Search engines (سرچ انجنز)
37 | 🤝 Social media basics (سوشل میڈیا کی بنیادی باتیں)
38 | 
39 | ## 🎮 Interactive Exercises (انٹرایکٹو مشقیں)
40 | 
41 | 1. `1-internet-basics.html` - Understanding Internet concepts
42 | 2. `2-internet-concepts.html` - Advanced concepts (DNS, HTTP)
43 | 3. `3-browser-practice.html` - Web browser navigation practice
44 | 4. `4-online-safety.html` - Internet safety scenarios
45 | 5. `5-email-basics.html` - Email usage practice
46 | 
47 | ## 💡 Pro Tips
48 | 
49 | 1. 🔒 Always prioritize your online safety
50 | 2. 🔍 Learn to verify information sources
51 | 3. 📝 Keep track of your passwords securely
52 | 4. 🔄 Regularly update your browsers
53 | 5. 🛡️ Think before clicking unknown links
54 | 
55 | ## 🌟 Achievement Checklist
56 | 
57 | - [ ] Understand basic internet concepts
58 | - [ ] Navigate web browsers confidently
59 | - [ ] Create and manage secure passwords
60 | - [ ] Use email effectively
61 | - [ ] Practice safe browsing habits
62 | 
63 | ## ⚠️ Safety First! (پہلے حفاظت!)
64 | 
65 | > "The Internet is like a highway - follow the safety rules to reach your destination securely."
66 | >
67 | > "انٹرنیٹ ایک شاہراہ کی طرح ہے - اپنی منزل تک محفوظ طریقے سے پہنچنے کے لیے حفاظتی اصولوں پر عمل کریں۔"
68 | 
69 | ### 🛡️ Golden Rules:
70 | 
71 | 1. Never share personal information
72 | 2. Use strong, unique passwords
73 | 3. Be cautious with unknown links
74 | 4. Keep your software updated
75 | 5. Trust your instincts
76 | 
77 | ## 🎉 Remember
78 | 
79 | > "The Internet is not just about consuming content, it's about connecting with knowledge and opportunities."
80 | >
81 | > "انٹرنیٹ صرف مواد استعمال کرنے کے بارے میں نہیں ہے، یہ علم اور مواقع سے جڑنے کے بارے میں ہے۔"
82 | 
83 | Take your time to learn and explore. The digital world has endless possibilities!
84 | 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/2-mouse-practice.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Mouse Practice (ماؤس پریکٹس)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .practice-area {
 22 |             border: 2px solid #ccc;
 23 |             padding: 20px;
 24 |             margin: 20px 0;
 25 |             min-height: 200px;
 26 |             position: relative;
 27 |         }
 28 |         .target {
 29 |             width: 50px;
 30 |             height: 50px;
 31 |             background-color: #4CAF50;
 32 |             border-radius: 50%;
 33 |             position: absolute;
 34 |             cursor: pointer;
 35 |             display: flex;
 36 |             align-items: center;
 37 |             justify-content: center;
 38 |             color: white;
 39 |             font-weight: bold;
 40 |             transition: all 0.3s ease;
 41 |         }
 42 |         .target:hover {
 43 |             transform: scale(1.1);
 44 |         }
 45 |         .score {
 46 |             font-size: 24px;
 47 |             text-align: center;
 48 |             margin: 20px 0;
 49 |         }
 50 |         .instructions {
 51 |             background-color: #e1f5fe;
 52 |             padding: 15px;
 53 |             border-radius: 5px;
 54 |             margin-bottom: 20px;
 55 |         }
 56 |         .language-toggle {
 57 |             text-align: right;
 58 |             margin-bottom: 20px;
 59 |         }
 60 |         button {
 61 |             padding: 10px 20px;
 62 |             font-size: 16px;
 63 |             cursor: pointer;
 64 |             background-color: #2196F3;
 65 |             color: white;
 66 |             border: none;
 67 |             border-radius: 5px;
 68 |         }
 69 |         button:hover {
 70 |             background-color: #1976D2;
 71 |         }
 72 |     </style>
 73 | </head>
 74 | <body>
 75 |     <div class="container">
 76 |         <div class="language-toggle">
 77 |             <button onclick="toggleLanguage()">English/اردو</button>
 78 |         </div>
 79 |         
 80 |         <h1 id="title">Mouse Practice Exercise (ماؤس پریکٹس)</h1>
 81 |         
 82 |         <div class="instructions" id="instructions">
 83 |             <h2>Instructions (ہدایات):</h2>
 84 |             <p>Click on the green circles as they appear. Try to click as many as you can!</p>
 85 |             <p>!سبز دائروں پر کلک کریں جب وہ ظاہر ہوں۔ جتنے زیادہ ہو سکیں کلک کرنے کی کوشش کریں</p>
 86 |         </div>
 87 | 
 88 |         <div class="score">
 89 |             Score: <span id="score">0</span>
 90 |         </div>
 91 | 
 92 |         <div class="practice-area" id="practiceArea">
 93 |             <div class="target" id="target" onclick="hitTarget()">Click!</div>
 94 |         </div>
 95 | 
 96 |         <button onclick="startGame()">Start Game / گیم شروع کریں</button>
 97 |     </div>
 98 | 
 99 |     <script>
100 |         let score = 0;
101 |         let isEnglish = true;
102 | 
103 |         function toggleLanguage() {
104 |             isEnglish = !isEnglish;
105 |             updateLanguage();
106 |         }
107 | 
108 |         function updateLanguage() {
109 |             const title = document.getElementById('title');
110 |             const instructions = document.getElementById('instructions');
111 |             
112 |             if (isEnglish) {
113 |                 title.innerHTML = 'Mouse Practice Exercise (ماؤس پریکٹس)';
114 |                 instructions.innerHTML = `
115 |                     <h2>Instructions (ہدایات):</h2>
116 |                     <p>Click on the green circles as they appear. Try to click as many as you can!</p>
117 |                     <p>!سبز دائروں پر کلک کریں جب وہ ظاہر ہوں۔ جتنے زیادہ ہو سکیں کلک کرنے کی کوشش کریں</p>
118 |                 `;
119 |             } else {
120 |                 title.innerHTML = 'ماؤس پریکٹس';
121 |                 instructions.innerHTML = `
122 |                     <h2>ہدایات:</h2>
123 |                     <p>!سبز دائروں پر کلک کریں جب وہ ظاہر ہوں۔ جتنے زیادہ ہو سکیں کلک کرنے کی کوشش کریں</p>
124 |                     <p>Click on the green circles as they appear. Try to click as many as you can!</p>
125 |                 `;
126 |             }
127 |         }
128 | 
129 |         function moveTarget() {
130 |             const target = document.getElementById('target');
131 |             const area = document.getElementById('practiceArea');
132 |             const maxX = area.clientWidth - 50;
133 |             const maxY = area.clientHeight - 50;
134 |             
135 |             const newX = Math.random() * maxX;
136 |             const newY = Math.random() * maxY;
137 |             
138 |             target.style.left = newX + 'px';
139 |             target.style.top = newY + 'px';
140 |         }
141 | 
142 |         function hitTarget() {
143 |             score++;
144 |             document.getElementById('score').textContent = score;
145 |             moveTarget();
146 |         }
147 | 
148 |         function startGame() {
149 |             score = 0;
150 |             document.getElementById('score').textContent = score;
151 |             moveTarget();
152 |         }
153 | 
154 |         // Initial setup
155 |         moveTarget();
156 |     </script>
157 | </body>
158 | </html> 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🚀 Modern Web App Development with LLM Assistance
  2 | 
  3 | ![image](https://github.com/user-attachments/assets/1dfd0edb-1b09-4e93-a652-41b5fca1a498)
  4 | 
  5 | ## 📚 Table of Contents
  6 | 
  7 | - [Introduction](#introduction)
  8 | - [Prerequisites](#prerequisites)
  9 | - [Learning Path](#learning-path)
 10 | - [Getting Started](#getting-started)
 11 | - [Contributing](#contributing)
 12 | 
 13 | ## 🎯 Introduction
 14 | 
 15 | This comprehensive guide will take you from a complete beginner to a proficient web developer. The curriculum is designed to be beginner-friendly while covering all essential aspects of modern web development.
 16 | 
 17 | ## 🛠️ Prerequisites
 18 | 
 19 | - A computer with internet access
 20 | - Basic computer literacy
 21 | - Willingness to learn and practice
 22 | - Text editor (VS Code recommended)
 23 | 
 24 | ## 📖 Learning Path
 25 | 
 26 | ### **Phase 1: 💻 Computer Fundamentals and Internet Basics**
 27 | 
 28 | #### **1.1 Computer Basics**
 29 | 
 30 | - 📂 File Management
 31 |   - Basic file operations
 32 |   - Directory structure
 33 |   - File organization
 34 | - 🖥️ Operating Systems (Windows, Linux, Mac)
 35 |   - Basic operations
 36 |   - System settings
 37 |   - User interface
 38 | - ⌨️ Command Line And Terminal Basics
 39 |   - Basic commands (cd, ls, mkdir, etc.)
 40 |   - File navigation
 41 |   - Package managers (apt, brew, chocolatey)
 42 | 
 43 | #### **1.2 Internet Fundamentals**
 44 | 
 45 | - 🌐 How the Internet Works
 46 |   - DNS
 47 |   - HTTP/HTTPS
 48 |   - Client-Server architecture
 49 | - 🏃‍♂️ Web Browsers
 50 |   - Developer Tools
 51 |   - Browser engines
 52 |   - Cross-browser compatibility
 53 | - 📧 Email and Online Safety
 54 |   - Email basics
 55 |   - Internet security
 56 |   - Best practices
 57 | 
 58 | ### **Phase 2: 🎓 Programming Fundamentals**
 59 | 
 60 | #### **2.1 Basic Programming Concepts**
 61 | 
 62 | - 📝 Programming Basics
 63 |   - Variables and Data Types
 64 |   - Control Flow
 65 |   - Functions and Methods
 66 |   - Object-Oriented Programming
 67 | - 🧮 Problem Solving
 68 |   - Algorithms
 69 |   - Logic building
 70 |   - Debugging basics
 71 | 
 72 | #### **2.2 Version Control**
 73 | 
 74 | - 📝 Git Fundamentals
 75 |   - Basic Git commands
 76 |   - Repository management
 77 |   - Commit history
 78 | - 🤝 Collaborative Development
 79 |   - GitHub/GitLab basics
 80 |   - Branching and merging
 81 |   - Pull requests
 82 |   - Code review basics
 83 | 
 84 | ### **Phase 3: 🎨 Web Development Fundamentals**
 85 | 
 86 | #### **3.1 HTML and CSS**
 87 | 
 88 | - 📄 HTML
 89 |   - Semantic HTML
 90 |   - Forms and validation
 91 |   - Accessibility best practices
 92 | - 🎨 CSS
 93 |   - Box model
 94 |   - Layout systems
 95 |   - Animations and transitions
 96 | - 🅱️ Bootstrap
 97 | - 🌪️ Tailwind CSS
 98 | - 🏗️ Build a static website
 99 | 
100 | #### **3.2 JavaScript Fundamentals**
101 | 
102 | - ⚡ JavaScript Syntax
103 | - 🔄 DOM Manipulation
104 | - 🖼️ Build a Simple Image Slider
105 | - 📦 Modern JavaScript Features
106 |   - ES6+ features
107 |   - Modules
108 |   - Promises and async/await
109 | 
110 | #### **3.3 TypeScript Fundamentals**
111 | 
112 | - 📘 TypeScript Syntax
113 | - 🔄 Convert JS code into TS
114 | - 🏷️ Type systems and interfaces
115 | 
116 | ### **Phase 4: ⚛️ Advanced JavaScript and React Fundamentals**
117 | 
118 | #### **4.1 Advanced JavaScript & TypeScript**
119 | 
120 | - 🔥 Latest ES version Features
121 | - ⚡ Asynchronous JavaScript
122 | - 🧪 Testing fundamentals
123 |   - Unit testing
124 |   - Integration testing
125 |   - Jest and React Testing Library
126 | 
127 | #### **4.2 React Fundamentals**
128 | 
129 | - 📦 Package Managers (npm, yarn, pnpm)
130 | - ⚛️ React
131 | - 🔄 Component Lifecycle
132 | - 🎯 Event Handling
133 | - 🧩 Component Composition
134 | - 🔍 Performance Optimization
135 | 
136 | ### **Phase 5: 🔥 Mastering React and Next.js**
137 | 
138 | #### **5.1 Advanced React**
139 | 
140 | - 🎣 Hooks
141 | - 🌍 Global State Management
142 |   - Redux
143 |   - Context API
144 |   - Zustand
145 | - 🛣️ React Router
146 | - 📱 Responsive Design Patterns
147 | 
148 | #### **5.2 Next.js Fundamentals**
149 | 
150 | - ⚡ Next.js
151 | - 🖥️ Server-Side Rendering (SSR)
152 | - 📄 Static Site Generation (SSG)
153 | - 🔄 Incremental Static Regeneration (ISR)
154 | - 🚀 API Routes
155 | - 📱 Mobile-First Development
156 | 
157 | ### **Phase 6: 🔧 Backend Development and Databases**
158 | 
159 | #### **6.1 Backend Development**
160 | 
161 | - 🟢 Node.js
162 | - 🐍 Python
163 | - 🐘 PHP
164 | - 🔌 RESTful APIs
165 | - 🔐 Authentication & Authorization
166 | - 🔒 Security Best Practices
167 | 
168 | #### **6.2 Databases**
169 | 
170 | - 📊 SQL Databases
171 |   - PostgreSQL
172 |   - MySQL
173 | - 📓 NoSQL Databases
174 |   - MongoDB
175 |   - Redis
176 | - 🔍 Database Design
177 | - 📈 Performance Optimization
178 | 
179 | ### **Phase 7: 🚀 Deployment and Advanced Topics**
180 | 
181 | #### **7.1 Deployment & DevOps**
182 | 
183 | - 🌐 Deployment Strategies
184 | - ☁️ Cloud Hosting
185 |   - AWS
186 |   - Vercel
187 |   - Netlify
188 | - 🔄 CI/CD Pipelines
189 | - 📊 Monitoring and Analytics
190 | - 🔍 SEO Optimization
191 | - 🎯 Performance Optimization
192 | 
193 | ## 🚀 Getting Started
194 | 
195 | 1. Clone this repository
196 | 2. Follow the phases in order
197 | 3. Complete the exercises in each section
198 | 4. Build the suggested projects
199 | 5. Practice regularly
200 | 
201 | ## 🤝 Contributing
202 | 
203 | Contributions are welcome! Please feel free to submit a Pull Request.
204 | 
205 | ## 🌟 Additional Resources
206 | 
207 | - MDN Web Docs
208 | - freeCodeCamp
209 | - Frontend Masters
210 | - YouTube tutorials
211 | - Stack Overflow
212 | - Dev.to
213 | 
214 | Remember: The key to becoming a successful developer is consistent practice and building projects. Don't just read - code along and experiment!
215 | 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/7-package-managers.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Package Managers (پیکج مینیجرز)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .terminal-section {
 22 |             background-color: #1e1e1e;
 23 |             color: #00ff00;
 24 |             padding: 20px;
 25 |             border-radius: 5px;
 26 |             margin: 20px 0;
 27 |             font-family: 'Courier New', monospace;
 28 |         }
 29 |         .command-card {
 30 |             background-color: #fff;
 31 |             border: 1px solid #ddd;
 32 |             border-radius: 5px;
 33 |             padding: 15px;
 34 |             margin: 10px 0;
 35 |             transition: all 0.3s ease;
 36 |         }
 37 |         .command-card:hover {
 38 |             transform: translateY(-2px);
 39 |             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 40 |         }
 41 |         .command {
 42 |             background-color: #f8f9fa;
 43 |             padding: 10px;
 44 |             border-radius: 3px;
 45 |             font-family: 'Courier New', monospace;
 46 |             margin: 5px 0;
 47 |         }
 48 |         .instructions {
 49 |             background-color: #e1f5fe;
 50 |             padding: 15px;
 51 |             border-radius: 5px;
 52 |             margin-bottom: 20px;
 53 |         }
 54 |         .language-toggle {
 55 |             text-align: right;
 56 |             margin-bottom: 20px;
 57 |         }
 58 |         button {
 59 |             padding: 10px 20px;
 60 |             font-size: 16px;
 61 |             cursor: pointer;
 62 |             background-color: #2196F3;
 63 |             color: white;
 64 |             border: none;
 65 |             border-radius: 5px;
 66 |             margin: 5px;
 67 |         }
 68 |         button:hover {
 69 |             background-color: #1976D2;
 70 |         }
 71 |         .practice-section {
 72 |             margin-top: 20px;
 73 |             padding: 20px;
 74 |             background-color: #fff3cd;
 75 |             border-radius: 5px;
 76 |         }
 77 |         .task {
 78 |             margin: 15px 0;
 79 |             padding: 10px;
 80 |             background-color: #fff;
 81 |             border-radius: 5px;
 82 |         }
 83 |     </style>
 84 | </head>
 85 | <body>
 86 |     <div class="container">
 87 |         <div class="language-toggle">
 88 |             <button onclick="toggleLanguage()">English/اردو</button>
 89 |         </div>
 90 | 
 91 |         <h1 id="title">Package Managers (پیکج مینیجرز)</h1>
 92 | 
 93 |         <div class="instructions" id="instructions">
 94 |             <h2>What are Package Managers? (پیکج مینیجرز کیا ہیں؟)</h2>
 95 |             <p>Package managers help you install, update, and manage software on your computer.</p>
 96 |             <p>پیکج مینیجرز آپ کے کمپیوٹر پر سافٹ ویئر انسٹال، اپ ڈیٹ اور منظم کرنے میں مدد کرتے ہیں۔</p>
 97 |         </div>
 98 | 
 99 |         <div class="command-card">
100 |             <h3>🪟 Windows - Chocolatey</h3>
101 |             <div class="command">choco install firefox</div>
102 |             <p>Installs Firefox browser (فائر فاکس براؤزر انسٹال کرتا ہے)</p>
103 |             
104 |             <div class="command">choco upgrade all</div>
105 |             <p>Updates all installed packages (تمام انسٹال شدہ پیکجز کو اپ ڈیٹ کرتا ہے)</p>
106 |         </div>
107 | 
108 |         <div class="command-card">
109 |             <h3>🍎 macOS - Homebrew</h3>
110 |             <div class="command">brew install node</div>
111 |             <p>Installs Node.js (نوڈ جے ایس انسٹال کرتا ہے)</p>
112 |             
113 |             <div class="command">brew update</div>
114 |             <p>Updates Homebrew and its packages (ہوم برو اور اس کے پیکجز کو اپ ڈیٹ کرتا ہے)</p>
115 |         </div>
116 | 
117 |         <div class="command-card">
118 |             <h3>🐧 Linux - APT</h3>
119 |             <div class="command">sudo apt install git</div>
120 |             <p>Installs Git (گٹ انسٹال کرتا ہے)</p>
121 |             
122 |             <div class="command">sudo apt update && sudo apt upgrade</div>
123 |             <p>Updates system and installed packages (سسٹم اور انسٹال شدہ پیکجز کو اپ ڈیٹ کرتا ہے)</p>
124 |         </div>
125 | 
126 |         <div class="practice-section">
127 |             <h2 id="practice-title">Practice Exercise (مشق)</h2>
128 |             <div class="task" id="currentTask">
129 |                 <h3>Current Task (موجودہ کام):</h3>
130 |                 <p id="taskDescription"></p>
131 |                 <input type="text" id="commandInput" placeholder="Type your command here..." style="width: 100%; padding: 10px; margin: 10px 0;">
132 |                 <button onclick="checkCommand()">Submit (جمع کرائیں)</button>
133 |             </div>
134 |         </div>
135 |     </div>
136 | 
137 |     <script>
138 |         let isEnglish = true;
139 |         let currentTaskIndex = 0;
140 | 
141 |         const tasks = [
142 |             {
143 |                 en: "Write the command to install Firefox using Chocolatey",
144 |                 ur: "چاکلیٹی کا استعمال کرتے ہوئے فائر فاکس انسٹال کرنے کا کمانڈ لکھیں",
145 |                 answer: "choco install firefox"
146 |             },
147 |             {
148 |                 en: "Write the command to update all packages in Homebrew",
149 |                 ur: "ہوم برو میں تمام پیکجز کو اپ ڈیٹ کرنے کا کمانڈ لکھیں",
150 |                 answer: "brew update"
151 |             },
152 |             {
153 |                 en: "Write the command to install Git on Linux using APT",
154 |                 ur: "اے پی ٹی کا استعمال کرتے ہوئے لینکس پر گٹ انسٹال کرنے کا کمانڈ لکھیں",
155 |                 answer: "sudo apt install git"
156 |             }
157 |         ];
158 | 
159 |         function toggleLanguage() {
160 |             isEnglish = !isEnglish;
161 |             updateLanguage();
162 |         }
163 | 
164 |         function updateLanguage() {
165 |             const title = document.getElementById('title');
166 |             const taskDesc = document.getElementById('taskDescription');
167 |             
168 |             if (isEnglish) {
169 |                 title.innerHTML = 'Package Managers (پیکج مینیجرز)';
170 |                 taskDesc.textContent = tasks[currentTaskIndex].en;
171 |             } else {
172 |                 title.innerHTML = 'پیکج مینیجرز';
173 |                 taskDesc.textContent = tasks[currentTaskIndex].ur;
174 |             }
175 |         }
176 | 
177 |         function checkCommand() {
178 |             const input = document.getElementById('commandInput').value.trim();
179 |             if (input === tasks[currentTaskIndex].answer) {
180 |                 alert(isEnglish ? 'Correct! Well done!' : '!درست! شاباش');
181 |                 currentTaskIndex = (currentTaskIndex + 1) % tasks.length;
182 |                 document.getElementById('commandInput').value = '';
183 |                 updateLanguage();
184 |             } else {
185 |                 alert(isEnglish ? 'Try again!' : '!دوبارہ کوشش کریں');
186 |             }
187 |         }
188 | 
189 |         // Initial setup
190 |         updateLanguage();
191 |     </script>
192 | </body>
193 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/4-file-management.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>File Management Practice (فائل مینجمنٹ پریکٹس)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .file-system {
 22 |             border: 2px solid #ccc;
 23 |             padding: 20px;
 24 |             margin: 20px 0;
 25 |             min-height: 300px;
 26 |         }
 27 |         .folder {
 28 |             background-color: #fff3cd;
 29 |             padding: 10px;
 30 |             margin: 5px;
 31 |             border: 1px solid #ddd;
 32 |             cursor: pointer;
 33 |             display: inline-block;
 34 |         }
 35 |         .file {
 36 |             background-color: #e1f5fe;
 37 |             padding: 10px;
 38 |             margin: 5px;
 39 |             border: 1px solid #ddd;
 40 |             cursor: pointer;
 41 |             display: inline-block;
 42 |         }
 43 |         .instructions {
 44 |             background-color: #e8f5e9;
 45 |             padding: 15px;
 46 |             border-radius: 5px;
 47 |             margin-bottom: 20px;
 48 |         }
 49 |         .task {
 50 |             background-color: #fff3cd;
 51 |             padding: 15px;
 52 |             border-radius: 5px;
 53 |             margin: 20px 0;
 54 |         }
 55 |         .language-toggle {
 56 |             text-align: right;
 57 |             margin-bottom: 20px;
 58 |         }
 59 |         button {
 60 |             padding: 10px 20px;
 61 |             font-size: 16px;
 62 |             cursor: pointer;
 63 |             background-color: #2196F3;
 64 |             color: white;
 65 |             border: none;
 66 |             border-radius: 5px;
 67 |             margin: 5px;
 68 |         }
 69 |         button:hover {
 70 |             background-color: #1976D2;
 71 |         }
 72 |         .folder-icon::before {
 73 |             content: "📁";
 74 |             margin-right: 5px;
 75 |         }
 76 |         .file-icon::before {
 77 |             content: "📄";
 78 |             margin-right: 5px;
 79 |         }
 80 |     </style>
 81 | </head>
 82 | <body>
 83 |     <div class="container">
 84 |         <div class="language-toggle">
 85 |             <button onclick="toggleLanguage()">English/اردو</button>
 86 |         </div>
 87 | 
 88 |         <h1 id="title">File Management Practice (فائل مینجمنٹ پریکٹس)</h1>
 89 | 
 90 |         <div class="instructions" id="instructions">
 91 |             <h2>Instructions (ہدایات):</h2>
 92 |             <p>Practice organizing files and folders. Follow the tasks below.</p>
 93 |             <p>فائلوں اور فولڈرز کو منظم کرنے کی مشق کریں۔ نیچے دیے گئے کاموں کی پیروی کریں۔</p>
 94 |         </div>
 95 | 
 96 |         <div class="task" id="currentTask">
 97 |             <h3>Current Task (موجودہ کام):</h3>
 98 |             <p id="taskDescription">Create a new folder named "Documents"</p>
 99 |         </div>
100 | 
101 |         <div class="file-system" id="fileSystem">
102 |             <!-- Files and folders will be added here dynamically -->
103 |         </div>
104 | 
105 |         <div class="controls">
106 |             <button onclick="createFolder()">Create Folder / فولڈر بنائیں</button>
107 |             <button onclick="createFile()">Create File / فائل بنائیں</button>
108 |             <button onclick="deleteItem()">Delete / حذف کریں</button>
109 |             <button onclick="nextTask()">Next Task / اگلا کام</button>
110 |         </div>
111 |     </div>
112 | 
113 |     <script>
114 |         let isEnglish = true;
115 |         let currentTaskIndex = 0;
116 | 
117 |         const tasks = [
118 |             {
119 |                 en: "Create a new folder named 'Documents'",
120 |                 ur: "'Documents' کے نام سے ایک نیا فولڈر بنائیں",
121 |                 check: (fileSystem) => fileSystem.querySelector('.folder[data-name="Documents"]')
122 |             },
123 |             {
124 |                 en: "Create a file named 'notes.txt' inside the Documents folder",
125 |                 ur: "'Documents' فولڈر میں 'notes.txt' کے نام سے ایک فائل بنائیں",
126 |                 check: (fileSystem) => fileSystem.querySelector('.file[data-name="notes.txt"]')
127 |             },
128 |             {
129 |                 en: "Create a new folder named 'Pictures'",
130 |                 ur: "'Pictures' کے نام سے ایک نیا فولڈر بنائیں",
131 |                 check: (fileSystem) => fileSystem.querySelector('.folder[data-name="Pictures"]')
132 |             }
133 |         ];
134 | 
135 |         function toggleLanguage() {
136 |             isEnglish = !isEnglish;
137 |             updateLanguage();
138 |         }
139 | 
140 |         function updateLanguage() {
141 |             const title = document.getElementById('title');
142 |             const instructions = document.getElementById('instructions');
143 |             const taskDesc = document.getElementById('taskDescription');
144 |             
145 |             if (isEnglish) {
146 |                 title.innerHTML = 'File Management Practice (فائل مینجمنٹ پریکٹس)';
147 |                 taskDesc.textContent = tasks[currentTaskIndex].en;
148 |             } else {
149 |                 title.innerHTML = 'فائل مینجمنٹ پریکٹس';
150 |                 taskDesc.textContent = tasks[currentTaskIndex].ur;
151 |             }
152 |         }
153 | 
154 |         function createFolder() {
155 |             const name = prompt(isEnglish ? 'Enter folder name:' : 'فولڈر کا نام درج کریں:');
156 |             if (name) {
157 |                 const folder = document.createElement('div');
158 |                 folder.className = 'folder folder-icon';
159 |                 folder.textContent = name;
160 |                 folder.setAttribute('data-name', name);
161 |                 document.getElementById('fileSystem').appendChild(folder);
162 |                 checkTask();
163 |             }
164 |         }
165 | 
166 |         function createFile() {
167 |             const name = prompt(isEnglish ? 'Enter file name:' : 'فائل کا نام درج کریں:');
168 |             if (name) {
169 |                 const file = document.createElement('div');
170 |                 file.className = 'file file-icon';
171 |                 file.textContent = name;
172 |                 file.setAttribute('data-name', name);
173 |                 document.getElementById('fileSystem').appendChild(file);
174 |                 checkTask();
175 |             }
176 |         }
177 | 
178 |         function deleteItem() {
179 |             const name = prompt(isEnglish ? 'Enter name to delete:' : 'حذف کرنے کے لیے نام درج کریں:');
180 |             if (name) {
181 |                 const items = document.querySelectorAll(`[data-name="${name}"]`);
182 |                 items.forEach(item => item.remove());
183 |             }
184 |         }
185 | 
186 |         function checkTask() {
187 |             const fileSystem = document.getElementById('fileSystem');
188 |             if (tasks[currentTaskIndex].check(fileSystem)) {
189 |                 alert(isEnglish ? 'Good job! Task completed!' : '!شاباش! کام مکمل ہو گیا');
190 |             }
191 |         }
192 | 
193 |         function nextTask() {
194 |             currentTaskIndex = (currentTaskIndex + 1) % tasks.length;
195 |             updateLanguage();
196 |         }
197 | 
198 |         // Initial setup
199 |         updateLanguage();
200 |     </script>
201 | </body>
202 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.2-internet-fundamentals/exercises/1-internet-basics.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Internet Basics (انٹرنیٹ کی بنیادی باتیں)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .concept-card {
 22 |             border: 1px solid #ddd;
 23 |             margin: 10px 0;
 24 |             padding: 15px;
 25 |             border-radius: 5px;
 26 |             background-color: #fff;
 27 |             transition: transform 0.3s ease;
 28 |         }
 29 |         .concept-card:hover {
 30 |             transform: translateY(-2px);
 31 |             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 32 |         }
 33 |         .interactive-demo {
 34 |             border: 2px solid #ccc;
 35 |             padding: 20px;
 36 |             margin: 20px 0;
 37 |             border-radius: 5px;
 38 |             background-color: #f8f9fa;
 39 |         }
 40 |         .network-visualization {
 41 |             text-align: center;
 42 |             padding: 20px;
 43 |         }
 44 |         .device-icon {
 45 |             display: inline-block;
 46 |             margin: 10px;
 47 |             padding: 10px;
 48 |             background-color: #e1f5fe;
 49 |             border-radius: 5px;
 50 |         }
 51 |         .connection-line {
 52 |             display: inline-block;
 53 |             width: 50px;
 54 |             height: 2px;
 55 |             background-color: #2196F3;
 56 |             margin: 0 10px;
 57 |         }
 58 |         .quiz-section {
 59 |             margin-top: 20px;
 60 |             padding: 20px;
 61 |             background-color: #fff3cd;
 62 |             border-radius: 5px;
 63 |         }
 64 |         .language-toggle {
 65 |             text-align: right;
 66 |             margin-bottom: 20px;
 67 |         }
 68 |         button {
 69 |             padding: 10px 20px;
 70 |             font-size: 16px;
 71 |             cursor: pointer;
 72 |             background-color: #2196F3;
 73 |             color: white;
 74 |             border: none;
 75 |             border-radius: 5px;
 76 |             margin: 5px;
 77 |         }
 78 |         button:hover {
 79 |             background-color: #1976D2;
 80 |         }
 81 |         .quiz-option {
 82 |             margin: 10px 0;
 83 |             padding: 10px;
 84 |             border: 1px solid #ddd;
 85 |             border-radius: 5px;
 86 |             cursor: pointer;
 87 |         }
 88 |         .quiz-option:hover {
 89 |             background-color: #e1f5fe;
 90 |         }
 91 |     </style>
 92 | </head>
 93 | <body>
 94 |     <div class="container">
 95 |         <div class="language-toggle">
 96 |             <button onclick="toggleLanguage()">English/اردو</button>
 97 |         </div>
 98 | 
 99 |         <h1 id="title">Understanding the Internet (انٹرنیٹ کو سمجھنا)</h1>
100 | 
101 |         <div class="concept-card">
102 |             <h2 id="what-is-internet">What is the Internet? (انٹرنیٹ کیا ہے؟)</h2>
103 |             <p id="internet-definition">The Internet is a global network of computers that allows people to share information and communicate with each other.</p>
104 |             <p id="internet-definition-ur">انٹرنیٹ کمپیوٹرز کا ایک عالمی نیٹ ورک ہے جو لوگوں کو معلومات کا اشتراک کرنے اور ایک دوسرے سے بات چیت کرنے کی اجازت دیتا ہے۔</p>
105 |         </div>
106 | 
107 |         <div class="interactive-demo">
108 |             <h3 id="network-demo">How Computers Connect (کمپیوٹر کیسے جڑتے ہیں)</h3>
109 |             <div class="network-visualization">
110 |                 <div class="device-icon">💻</div>
111 |                 <div class="connection-line"></div>
112 |                 <div class="device-icon">🌐</div>
113 |                 <div class="connection-line"></div>
114 |                 <div class="device-icon">📱</div>
115 |             </div>
116 |         </div>
117 | 
118 |         <div class="concept-card">
119 |             <h2 id="connection-types">Types of Connections (کنکشن کی اقسام)</h2>
120 |             <ul id="connection-list">
121 |                 <li>Wi-Fi (وائی فائی)</li>
122 |                 <li>Mobile Data (موبائل ڈیٹا)</li>
123 |                 <li>Broadband (براڈبینڈ)</li>
124 |             </ul>
125 |         </div>
126 | 
127 |         <div class="quiz-section">
128 |             <h2 id="quiz-title">Quick Quiz (فوری کوئز)</h2>
129 |             <div id="quiz-question"></div>
130 |             <div id="quiz-options"></div>
131 |             <button onclick="checkAnswer()">Submit Answer (جواب جمع کریں)</button>
132 |         </div>
133 |     </div>
134 | 
135 |     <script>
136 |         let isEnglish = true;
137 |         let currentQuestionIndex = 0;
138 | 
139 |         const questions = [
140 |             {
141 |                 en: "What is the Internet?",
142 |                 ur: "انٹرنیٹ کیا ہے؟",
143 |                 options: {
144 |                     en: ["A global network of computers", "A single computer", "A type of website", "A mobile phone"],
145 |                     ur: ["کمپیوٹرز کا عالمی نیٹ ورک", "ایک کمپیوٹر", "ایک ویب سائٹ کی قسم", "ایک موبائل فون"]
146 |                 },
147 |                 correct: 0
148 |             },
149 |             {
150 |                 en: "Which of these is a type of Internet connection?",
151 |                 ur: "ان میں سے کون سا انٹرنیٹ کنکشن کی ایک قسم ہے؟",
152 |                 options: {
153 |                     en: ["Wi-Fi", "Television", "Radio", "Newspaper"],
154 |                     ur: ["وائی فائی", "ٹیلی ویژن", "ریڈیو", "اخبار"]
155 |                 },
156 |                 correct: 0
157 |             }
158 |         ];
159 | 
160 |         function toggleLanguage() {
161 |             isEnglish = !isEnglish;
162 |             updateLanguage();
163 |         }
164 | 
165 |         function updateLanguage() {
166 |             const title = document.getElementById('title');
167 |             const internetDef = document.getElementById('internet-definition');
168 |             const internetDefUr = document.getElementById('internet-definition-ur');
169 |             
170 |             if (isEnglish) {
171 |                 title.innerHTML = 'Understanding the Internet (انٹرنیٹ کو سمجھنا)';
172 |                 internetDef.style.display = 'block';
173 |                 internetDefUr.style.display = 'none';
174 |             } else {
175 |                 title.innerHTML = 'انٹرنیٹ کو سمجھنا';
176 |                 internetDef.style.display = 'none';
177 |                 internetDefUr.style.display = 'block';
178 |             }
179 |             
180 |             updateQuiz();
181 |         }
182 | 
183 |         function updateQuiz() {
184 |             const questionDiv = document.getElementById('quiz-question');
185 |             const optionsDiv = document.getElementById('quiz-options');
186 |             const currentQ = questions[currentQuestionIndex];
187 |             
188 |             questionDiv.textContent = isEnglish ? currentQ.en : currentQ.ur;
189 |             
190 |             optionsDiv.innerHTML = '';
191 |             const options = isEnglish ? currentQ.options.en : currentQ.options.ur;
192 |             
193 |             options.forEach((option, index) => {
194 |                 const optionDiv = document.createElement('div');
195 |                 optionDiv.className = 'quiz-option';
196 |                 optionDiv.innerHTML = `
197 |                     <input type="radio" name="answer" value="${index}">
198 |                     <label>${option}</label>
199 |                 `;
200 |                 optionsDiv.appendChild(optionDiv);
201 |             });
202 |         }
203 | 
204 |         function checkAnswer() {
205 |             const selected = document.querySelector('input[name="answer"]:checked');
206 |             if (!selected) {
207 |                 alert(isEnglish ? 'Please select an answer!' : '!براہ کرم ایک جواب منتخب کریں');
208 |                 return;
209 |             }
210 | 
211 |             if (parseInt(selected.value) === questions[currentQuestionIndex].correct) {
212 |                 alert(isEnglish ? 'Correct! Well done!' : '!درست! شاباش');
213 |                 currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
214 |                 updateQuiz();
215 |             } else {
216 |                 alert(isEnglish ? 'Try again!' : '!دوبارہ کوشش کریں');
217 |             }
218 |         }
219 | 
220 |         // Initial setup
221 |         updateLanguage();
222 |     </script>
223 | </body>
224 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/5-operating-systems.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Operating Systems Basics (آپریٹنگ سسٹم کی بنیادی باتیں)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .os-section {
 22 |             border: 2px solid #ccc;
 23 |             padding: 20px;
 24 |             margin: 20px 0;
 25 |             border-radius: 5px;
 26 |         }
 27 |         .os-card {
 28 |             background-color: #fff;
 29 |             border: 1px solid #ddd;
 30 |             border-radius: 5px;
 31 |             padding: 15px;
 32 |             margin: 10px 0;
 33 |             cursor: pointer;
 34 |             transition: all 0.3s ease;
 35 |         }
 36 |         .os-card:hover {
 37 |             transform: translateY(-2px);
 38 |             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 39 |         }
 40 |         .os-icon {
 41 |             width: 48px;
 42 |             height: 48px;
 43 |             margin-right: 15px;
 44 |         }
 45 |         .os-details {
 46 |             display: none;
 47 |             margin-top: 10px;
 48 |             padding: 10px;
 49 |             background-color: #f8f9fa;
 50 |             border-radius: 5px;
 51 |         }
 52 |         .feature-list {
 53 |             list-style-type: none;
 54 |             padding: 0;
 55 |         }
 56 |         .feature-list li {
 57 |             margin: 10px 0;
 58 |             padding-left: 24px;
 59 |             position: relative;
 60 |         }
 61 |         .feature-list li::before {
 62 |             content: "✓";
 63 |             position: absolute;
 64 |             left: 0;
 65 |             color: #4CAF50;
 66 |         }
 67 |         .instructions {
 68 |             background-color: #e1f5fe;
 69 |             padding: 15px;
 70 |             border-radius: 5px;
 71 |             margin-bottom: 20px;
 72 |         }
 73 |         .language-toggle {
 74 |             text-align: right;
 75 |             margin-bottom: 20px;
 76 |         }
 77 |         button {
 78 |             padding: 10px 20px;
 79 |             font-size: 16px;
 80 |             cursor: pointer;
 81 |             background-color: #2196F3;
 82 |             color: white;
 83 |             border: none;
 84 |             border-radius: 5px;
 85 |             margin: 5px;
 86 |         }
 87 |         button:hover {
 88 |             background-color: #1976D2;
 89 |         }
 90 |         .quiz-section {
 91 |             margin-top: 20px;
 92 |             padding: 20px;
 93 |             background-color: #fff3cd;
 94 |             border-radius: 5px;
 95 |         }
 96 |         .quiz-question {
 97 |             margin: 15px 0;
 98 |         }
 99 |         .quiz-options label {
100 |             display: block;
101 |             margin: 10px 0;
102 |             padding: 10px;
103 |             background-color: #fff;
104 |             border: 1px solid #ddd;
105 |             border-radius: 5px;
106 |             cursor: pointer;
107 |         }
108 |         .quiz-options label:hover {
109 |             background-color: #e1f5fe;
110 |         }
111 |     </style>
112 | </head>
113 | <body>
114 |     <div class="container">
115 |         <div class="language-toggle">
116 |             <button onclick="toggleLanguage()">English/اردو</button>
117 |         </div>
118 | 
119 |         <h1 id="title">Operating Systems Basics (آپریٹنگ سسٹم کی بنیادی باتیں)</h1>
120 | 
121 |         <div class="instructions" id="instructions">
122 |             <h2>Instructions (ہدایات):</h2>
123 |             <p>Learn about different operating systems and their basic features. Click on each OS to learn more.</p>
124 |             <p>مختلف آپریٹنگ سسٹمز اور ان کی بنیادی خصوصیات کے بارے میں جانیں۔ مزید جاننے کے لیے ہر آپریٹنگ سسٹم پر کلک کریں۔</p>
125 |         </div>
126 | 
127 |         <div class="os-section">
128 |             <div class="os-card" onclick="toggleDetails('windows')">
129 |                 <h2>🪟 Windows (ونڈوز)</h2>
130 |                 <div class="os-details" id="windows-details">
131 |                     <ul class="feature-list">
132 |                         <li>Most commonly used operating system (سب سے زیادہ استعمال ہونے والا آپریٹنگ سسٹم)</li>
133 |                         <li>User-friendly interface (صارف دوست انٹرفیس)</li>
134 |                         <li>Wide software compatibility (وسیع سافٹ ویئر مطابقت)</li>
135 |                         <li>Regular updates and security features (باقاعدہ اپ ڈیٹس اور سیکیورٹی فیچرز)</li>
136 |                     </ul>
137 |                 </div>
138 |             </div>
139 | 
140 |             <div class="os-card" onclick="toggleDetails('mac')">
141 |                 <h2>🍎 macOS (میک او ایس)</h2>
142 |                 <div class="os-details" id="mac-details">
143 |                     <ul class="feature-list">
144 |                         <li>Apple's operating system (ایپل کا آپریٹنگ سسٹم)</li>
145 |                         <li>Sleek design and smooth performance (خوبصورت ڈیزائن اور بہترین کارکردگی)</li>
146 |                         <li>Built-in security features (بلٹ ان سیکیورٹی فیچرز)</li>
147 |                         <li>Integration with other Apple devices (دیگر ایپل ڈیوائسز کے ساتھ مربوط)</li>
148 |                     </ul>
149 |                 </div>
150 |             </div>
151 | 
152 |             <div class="os-card" onclick="toggleDetails('linux')">
153 |                 <h2>🐧 Linux (لینکس)</h2>
154 |                 <div class="os-details" id="linux-details">
155 |                     <ul class="feature-list">
156 |                         <li>Free and open-source (مفت اور اوپن سورس)</li>
157 |                         <li>High security and stability (زیادہ سیکیورٹی اور استحکام)</li>
158 |                         <li>Many different distributions (مختلف ڈسٹریبیوشنز)</li>
159 |                         <li>Great for programming (پروگرامنگ کے لیے بہترین)</li>
160 |                     </ul>
161 |                 </div>
162 |             </div>
163 |         </div>
164 | 
165 |         <div class="quiz-section">
166 |             <h2 id="quiz-title">Quick Quiz (فوری کوئز)</h2>
167 |             <div class="quiz-question">
168 |                 <p id="question">Which operating system is most commonly used worldwide?</p>
169 |                 <div class="quiz-options">
170 |                     <label>
171 |                         <input type="radio" name="os" value="windows"> Windows (ونڈوز)
172 |                     </label>
173 |                     <label>
174 |                         <input type="radio" name="os" value="mac"> macOS (میک او ایس)
175 |                     </label>
176 |                     <label>
177 |                         <input type="radio" name="os" value="linux"> Linux (لینکس)
178 |                     </label>
179 |                 </div>
180 |                 <button onclick="checkAnswer()">Submit Answer (جواب جمع کریں)</button>
181 |             </div>
182 |         </div>
183 |     </div>
184 | 
185 |     <script>
186 |         let isEnglish = true;
187 |         let currentQuestionIndex = 0;
188 | 
189 |         const questions = [
190 |             {
191 |                 en: "Which operating system is most commonly used worldwide?",
192 |                 ur: "دنیا بھر میں سب سے زیادہ استعمال ہونے والا آپریٹنگ سسٹم کون سا ہے؟",
193 |                 answer: "windows"
194 |             },
195 |             {
196 |                 en: "Which operating system is developed by Apple?",
197 |                 ur: "کون سا آپریٹنگ سسٹم ایپل نے تیار کیا ہے؟",
198 |                 answer: "mac"
199 |             },
200 |             {
201 |                 en: "Which operating system is free and open-source?",
202 |                 ur: "کون سا آپریٹنگ سسٹم مفت اور اوپن سورس ہے؟",
203 |                 answer: "linux"
204 |             }
205 |         ];
206 | 
207 |         function toggleLanguage() {
208 |             isEnglish = !isEnglish;
209 |             updateLanguage();
210 |         }
211 | 
212 |         function updateLanguage() {
213 |             const title = document.getElementById('title');
214 |             const question = document.getElementById('question');
215 |             
216 |             if (isEnglish) {
217 |                 title.innerHTML = 'Operating Systems Basics (آپریٹنگ سسٹم کی بنیادی باتیں)';
218 |                 question.textContent = questions[currentQuestionIndex].en;
219 |             } else {
220 |                 title.innerHTML = 'آپریٹنگ سسٹم کی بنیادی باتیں';
221 |                 question.textContent = questions[currentQuestionIndex].ur;
222 |             }
223 |         }
224 | 
225 |         function toggleDetails(os) {
226 |             const details = document.getElementById(`${os}-details`);
227 |             const currentDisplay = details.style.display;
228 |             details.style.display = currentDisplay === 'block' ? 'none' : 'block';
229 |         }
230 | 
231 |         function checkAnswer() {
232 |             const selected = document.querySelector('input[name="os"]:checked');
233 |             if (!selected) {
234 |                 alert(isEnglish ? 'Please select an answer!' : '!براہ کرم ایک جواب منتخب کریں');
235 |                 return;
236 |             }
237 | 
238 |             if (selected.value === questions[currentQuestionIndex].answer) {
239 |                 alert(isEnglish ? 'Correct! Well done!' : '!درست! شاباش');
240 |                 currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
241 |                 updateLanguage();
242 |                 // Reset radio buttons
243 |                 document.querySelectorAll('input[name="os"]').forEach(radio => radio.checked = false);
244 |             } else {
245 |                 alert(isEnglish ? 'Try again!' : '!دوبارہ کوشش کریں');
246 |             }
247 |         }
248 | 
249 |         // Initial setup
250 |         updateLanguage();
251 |     </script>
252 | </body>
253 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/6-command-practice.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Command Practice (کمانڈ پریکٹس)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: 'Courier New', monospace;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .terminal {
 22 |             background-color: #1e1e1e;
 23 |             color: #00ff00;
 24 |             padding: 20px;
 25 |             border-radius: 5px;
 26 |             margin: 20px 0;
 27 |             min-height: 300px;
 28 |             overflow-y: auto;
 29 |             position: relative;
 30 |         }
 31 |         .terminal-line {
 32 |             margin: 5px 0;
 33 |             white-space: pre-wrap;
 34 |             word-wrap: break-word;
 35 |         }
 36 |         .prompt::before {
 37 |             content: "$ ";
 38 |             color: #00ff00;
 39 |         }
 40 |         .command-input {
 41 |             background-color: transparent;
 42 |             border: none;
 43 |             color: #00ff00;
 44 |             width: 80%;
 45 |             font-family: 'Courier New', monospace;
 46 |             font-size: 16px;
 47 |             outline: none;
 48 |         }
 49 |         .instructions {
 50 |             background-color: #e1f5fe;
 51 |             padding: 15px;
 52 |             border-radius: 5px;
 53 |             margin-bottom: 20px;
 54 |         }
 55 |         .task {
 56 |             background-color: #fff3cd;
 57 |             padding: 15px;
 58 |             border-radius: 5px;
 59 |             margin: 20px 0;
 60 |         }
 61 |         .language-toggle {
 62 |             text-align: right;
 63 |             margin-bottom: 20px;
 64 |         }
 65 |         button {
 66 |             padding: 10px 20px;
 67 |             font-size: 16px;
 68 |             cursor: pointer;
 69 |             background-color: #2196F3;
 70 |             color: white;
 71 |             border: none;
 72 |             border-radius: 5px;
 73 |         }
 74 |         button:hover {
 75 |             background-color: #1976D2;
 76 |         }
 77 |         .help-panel {
 78 |             background-color: #e8f5e9;
 79 |             padding: 15px;
 80 |             border-radius: 5px;
 81 |             margin-top: 20px;
 82 |         }
 83 |         .error {
 84 |             color: #ff0000;
 85 |         }
 86 |         .success {
 87 |             color: #00ff00;
 88 |         }
 89 |     </style>
 90 | </head>
 91 | <body>
 92 |     <div class="container">
 93 |         <div class="language-toggle">
 94 |             <button onclick="toggleLanguage()">English/اردو</button>
 95 |         </div>
 96 | 
 97 |         <h1 id="title">Command Line Practice (کمانڈ لائن پریکٹس)</h1>
 98 | 
 99 |         <div class="instructions" id="instructions">
100 |             <h2>Instructions (ہدایات):</h2>
101 |             <p>Practice basic command line operations. Type commands to complete the tasks.</p>
102 |             <p>بنیادی کمانڈ لائن آپریشنز کی مشق کریں۔ کام مکمل کرنے کے لیے کمانڈز ٹائپ کریں۔</p>
103 |         </div>
104 | 
105 |         <div class="task" id="currentTask">
106 |             <h3>Current Task (موجودہ کام):</h3>
107 |             <p id="taskDescription">List all files in the current directory using 'ls' command</p>
108 |         </div>
109 | 
110 |         <div class="terminal" id="terminal">
111 |             <div id="output"></div>
112 |             <div class="prompt">
113 |                 <input type="text" class="command-input" id="commandInput" placeholder="Type your command here..." onkeypress="handleKeyPress(event)">
114 |             </div>
115 |         </div>
116 | 
117 |         <div class="help-panel" id="helpPanel">
118 |             <h3>Available Commands (دستیاب کمانڈز):</h3>
119 |             <ul>
120 |                 <li>ls - List files (فائلیں دکھائیں)</li>
121 |                 <li>cd [folder] - Change directory (فولڈر تبدیل کریں)</li>
122 |                 <li>mkdir [name] - Create directory (فولڈر بنائیں)</li>
123 |                 <li>pwd - Show current path (موجودہ پاتھ دکھائیں)</li>
124 |                 <li>clear - Clear screen (سکرین صاف کریں)</li>
125 |             </ul>
126 |         </div>
127 |     </div>
128 | 
129 |     <script>
130 |         let isEnglish = true;
131 |         let currentTaskIndex = 0;
132 |         let virtualFileSystem = {
133 |             '/': {
134 |                 type: 'dir',
135 |                 contents: {
136 |                     'Documents': {
137 |                         type: 'dir',
138 |                         contents: {}
139 |                     },
140 |                     'Pictures': {
141 |                         type: 'dir',
142 |                         contents: {}
143 |                     },
144 |                     'notes.txt': {
145 |                         type: 'file',
146 |                         contents: 'Welcome to command practice!'
147 |                     }
148 |                 }
149 |             }
150 |         };
151 |         let currentPath = '/';
152 | 
153 |         const tasks = [
154 |             {
155 |                 en: "List all files in the current directory using 'ls' command",
156 |                 ur: "'ls' کمانڈ کا استعمال کرتے ہوئے موجودہ فولڈر کی تمام فائلیں دکھائیں",
157 |                 check: (cmd) => cmd.trim() === 'ls'
158 |             },
159 |             {
160 |                 en: "Create a new directory named 'Downloads' using 'mkdir' command",
161 |                 ur: "'mkdir' کمانڈ کا استعمال کرتے ہوئے 'Downloads' کے نام سے نیا فولڈر بنائیں",
162 |                 check: (cmd) => cmd.trim() === 'mkdir Downloads'
163 |             },
164 |             {
165 |                 en: "Change to the Documents directory using 'cd' command",
166 |                 ur: "'cd' کمانڈ کا استعمال کرتے ہوئے Documents فولڈر میں جائیں",
167 |                 check: (cmd) => cmd.trim() === 'cd Documents'
168 |             }
169 |         ];
170 | 
171 |         function toggleLanguage() {
172 |             isEnglish = !isEnglish;
173 |             updateLanguage();
174 |         }
175 | 
176 |         function updateLanguage() {
177 |             const title = document.getElementById('title');
178 |             const instructions = document.getElementById('instructions');
179 |             const taskDesc = document.getElementById('taskDescription');
180 |             
181 |             if (isEnglish) {
182 |                 title.innerHTML = 'Command Line Practice (کمانڈ لائن پریکٹس)';
183 |                 taskDesc.textContent = tasks[currentTaskIndex].en;
184 |             } else {
185 |                 title.innerHTML = 'کمانڈ لائن پریکٹس';
186 |                 taskDesc.textContent = tasks[currentTaskIndex].ur;
187 |             }
188 |         }
189 | 
190 |         function handleKeyPress(event) {
191 |             if (event.key === 'Enter') {
192 |                 const command = document.getElementById('commandInput').value;
193 |                 executeCommand(command);
194 |                 document.getElementById('commandInput').value = '';
195 |             }
196 |         }
197 | 
198 |         function executeCommand(command) {
199 |             addToOutput(`$ ${command}`);
200 |             
201 |             const cmd = command.toLowerCase().trim();
202 |             
203 |             if (cmd === 'ls') {
204 |                 const currentDir = getDirectoryFromPath(currentPath);
205 |                 const contents = Object.keys(currentDir.contents).join('  ');
206 |                 addToOutput(contents || '(empty directory)');
207 |             } else if (cmd.startsWith('cd ')) {
208 |                 const target = cmd.split(' ')[1];
209 |                 const currentDir = getDirectoryFromPath(currentPath);
210 |                 if (target === '..') {
211 |                     if (currentPath !== '/') {
212 |                         currentPath = currentPath.split('/').slice(0, -2).join('/') + '/';
213 |                     }
214 |                 } else if (currentDir.contents[target] && currentDir.contents[target].type === 'dir') {
215 |                     currentPath += target + '/';
216 |                 } else {
217 |                     addToOutput('Directory not found', 'error');
218 |                 }
219 |             } else if (cmd.startsWith('mkdir ')) {
220 |                 const name = cmd.split(' ')[1];
221 |                 const currentDir = getDirectoryFromPath(currentPath);
222 |                 if (!currentDir.contents[name]) {
223 |                     currentDir.contents[name] = {
224 |                         type: 'dir',
225 |                         contents: {}
226 |                     };
227 |                     addToOutput(`Directory '${name}' created`);
228 |                 } else {
229 |                     addToOutput('Directory already exists', 'error');
230 |                 }
231 |             } else if (cmd === 'pwd') {
232 |                 addToOutput(currentPath);
233 |             } else if (cmd === 'clear') {
234 |                 document.getElementById('output').innerHTML = '';
235 |             } else {
236 |                 addToOutput('Command not found', 'error');
237 |             }
238 | 
239 |             // Check if task is completed
240 |             if (tasks[currentTaskIndex].check(command)) {
241 |                 addToOutput('✓ Task completed! (کام مکمل ہو گیا)', 'success');
242 |                 currentTaskIndex = (currentTaskIndex + 1) % tasks.length;
243 |                 updateLanguage();
244 |             }
245 |         }
246 | 
247 |         function getDirectoryFromPath(path) {
248 |             let current = virtualFileSystem['/'];
249 |             if (path === '/') return current;
250 |             
251 |             const parts = path.split('/').filter(p => p);
252 |             for (const part of parts) {
253 |                 current = current.contents[part];
254 |             }
255 |             return current;
256 |         }
257 | 
258 |         function addToOutput(text, className = '') {
259 |             const output = document.getElementById('output');
260 |             const line = document.createElement('div');
261 |             line.className = `terminal-line ${className}`;
262 |             line.textContent = text;
263 |             output.appendChild(line);
264 |             output.scrollTop = output.scrollHeight;
265 |         }
266 | 
267 |         // Initial setup
268 |         updateLanguage();
269 |     </script>
270 | </body>
271 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.2-internet-fundamentals/exercises/3-browser-practice.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Web Browser Practice (ویب براؤزر پریکٹس)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .browser-simulation {
 22 |             border: 2px solid #ccc;
 23 |             border-radius: 5px;
 24 |             margin: 20px 0;
 25 |             background-color: #fff;
 26 |         }
 27 |         .browser-toolbar {
 28 |             background-color: #f8f9fa;
 29 |             padding: 10px;
 30 |             border-bottom: 1px solid #ddd;
 31 |             display: flex;
 32 |             align-items: center;
 33 |             gap: 10px;
 34 |         }
 35 |         .nav-buttons {
 36 |             display: flex;
 37 |             gap: 5px;
 38 |         }
 39 |         .nav-button {
 40 |             padding: 5px 10px;
 41 |             background-color: #e9ecef;
 42 |             border: 1px solid #ddd;
 43 |             border-radius: 3px;
 44 |             cursor: pointer;
 45 |         }
 46 |         .address-bar {
 47 |             flex-grow: 1;
 48 |             padding: 5px 10px;
 49 |             border: 1px solid #ddd;
 50 |             border-radius: 3px;
 51 |             background-color: white;
 52 |         }
 53 |         .browser-content {
 54 |             padding: 20px;
 55 |             min-height: 300px;
 56 |         }
 57 |         .task-panel {
 58 |             background-color: #fff3cd;
 59 |             padding: 15px;
 60 |             border-radius: 5px;
 61 |             margin: 20px 0;
 62 |         }
 63 |         .language-toggle {
 64 |             text-align: right;
 65 |             margin-bottom: 20px;
 66 |         }
 67 |         button {
 68 |             padding: 10px 20px;
 69 |             font-size: 16px;
 70 |             cursor: pointer;
 71 |             background-color: #2196F3;
 72 |             color: white;
 73 |             border: none;
 74 |             border-radius: 5px;
 75 |             margin: 5px;
 76 |         }
 77 |         button:hover {
 78 |             background-color: #1976D2;
 79 |         }
 80 |         .browser-tab {
 81 |             display: inline-block;
 82 |             padding: 8px 15px;
 83 |             background-color: #e9ecef;
 84 |             border: 1px solid #ddd;
 85 |             border-bottom: none;
 86 |             border-radius: 5px 5px 0 0;
 87 |             margin-right: 5px;
 88 |             cursor: pointer;
 89 |         }
 90 |         .browser-tab.active {
 91 |             background-color: white;
 92 |             border-bottom: 1px solid white;
 93 |             margin-bottom: -1px;
 94 |         }
 95 |         .bookmark-bar {
 96 |             padding: 5px 10px;
 97 |             background-color: #f8f9fa;
 98 |             border-bottom: 1px solid #ddd;
 99 |         }
100 |         .bookmark {
101 |             display: inline-block;
102 |             padding: 3px 8px;
103 |             margin-right: 10px;
104 |             color: #0066cc;
105 |             cursor: pointer;
106 |             font-size: 14px;
107 |         }
108 |     </style>
109 | </head>
110 | <body>
111 |     <div class="container">
112 |         <div class="language-toggle">
113 |             <button onclick="toggleLanguage()">English/اردو</button>
114 |         </div>
115 | 
116 |         <h1 id="title">Web Browser Practice (ویب براؤزر پریکٹس)</h1>
117 | 
118 |         <div class="task-panel">
119 |             <h3 id="current-task">Current Task: Click the Back button</h3>
120 |             <p id="task-description">Practice using browser navigation buttons and features.</p>
121 |         </div>
122 | 
123 |         <div class="browser-simulation">
124 |             <div class="browser-tabs">
125 |                 <div class="browser-tab active">Home Page</div>
126 |                 <div class="browser-tab">New Tab +</div>
127 |             </div>
128 |             <div class="browser-toolbar">
129 |                 <div class="nav-buttons">
130 |                     <button class="nav-button" onclick="handleNavigation('back')">←</button>
131 |                     <button class="nav-button" onclick="handleNavigation('forward')">→</button>
132 |                     <button class="nav-button" onclick="handleNavigation('reload')">↻</button>
133 |                 </div>
134 |                 <div class="address-bar" id="addressBar">https://www.example.com</div>
135 |             </div>
136 |             <div class="bookmark-bar">
137 |                 <span class="bookmark" onclick="handleBookmark('home')">Home</span>
138 |                 <span class="bookmark" onclick="handleBookmark('search')">Search</span>
139 |                 <span class="bookmark" onclick="handleBookmark('email')">Email</span>
140 |             </div>
141 |             <div class="browser-content" id="browserContent">
142 |                 <h2>Welcome to Browser Practice</h2>
143 |                 <p>This is a simulation to help you learn browser navigation.</p>
144 |             </div>
145 |         </div>
146 |     </div>
147 | 
148 |     <script>
149 |         let isEnglish = true;
150 |         let currentTaskIndex = 0;
151 |         let visitedPages = ['home'];
152 |         let currentPageIndex = 0;
153 | 
154 |         const tasks = [
155 |             {
156 |                 en: {
157 |                     title: "Click the Back button",
158 |                     description: "Use the back arrow (←) to go to the previous page"
159 |                 },
160 |                 ur: {
161 |                     title: "بیک بٹن پر کلک کریں",
162 |                     description: "پچھلے صفحے پر جانے کے لیے بیک ایرو (←) کا استعمال کریں"
163 |                 },
164 |                 check: (action) => action === 'back'
165 |             },
166 |             {
167 |                 en: {
168 |                     title: "Click the Reload button",
169 |                     description: "Use the reload button (↻) to refresh the page"
170 |                 },
171 |                 ur: {
172 |                     title: "ری لوڈ بٹن پر کلک کریں",
173 |                     description: "صفحہ ریفریش کرنے کے لیے ری لوڈ بٹن (↻) کا استعمال کریں"
174 |                 },
175 |                 check: (action) => action === 'reload'
176 |             },
177 |             {
178 |                 en: {
179 |                     title: "Click the Home bookmark",
180 |                     description: "Click on the Home bookmark in the bookmark bar"
181 |                 },
182 |                 ur: {
183 |                     title: "ہوم بک مارک پر کلک کریں",
184 |                     description: "بک مارک بار میں ہوم بک مارک پر کلک کریں"
185 |                 },
186 |                 check: (action) => action === 'home'
187 |             }
188 |         ];
189 | 
190 |         function toggleLanguage() {
191 |             isEnglish = !isEnglish;
192 |             updateLanguage();
193 |         }
194 | 
195 |         function updateLanguage() {
196 |             const title = document.getElementById('title');
197 |             const currentTask = document.getElementById('current-task');
198 |             const taskDesc = document.getElementById('task-description');
199 |             const task = tasks[currentTaskIndex];
200 |             
201 |             if (isEnglish) {
202 |                 title.innerHTML = 'Web Browser Practice (ویب براؤزر پریکٹس)';
203 |                 currentTask.textContent = 'Current Task: ' + task.en.title;
204 |                 taskDesc.textContent = task.en.description;
205 |             } else {
206 |                 title.innerHTML = 'ویب براؤزر پریکٹس';
207 |                 currentTask.textContent = 'موجودہ کام: ' + task.ur.title;
208 |                 taskDesc.textContent = task.ur.description;
209 |             }
210 |         }
211 | 
212 |         function handleNavigation(action) {
213 |             switch(action) {
214 |                 case 'back':
215 |                     if (currentPageIndex > 0) {
216 |                         currentPageIndex--;
217 |                         updateBrowserContent(visitedPages[currentPageIndex]);
218 |                     }
219 |                     break;
220 |                 case 'forward':
221 |                     if (currentPageIndex < visitedPages.length - 1) {
222 |                         currentPageIndex++;
223 |                         updateBrowserContent(visitedPages[currentPageIndex]);
224 |                     }
225 |                     break;
226 |                 case 'reload':
227 |                     updateBrowserContent(visitedPages[currentPageIndex]);
228 |                     break;
229 |             }
230 |             checkTask(action);
231 |         }
232 | 
233 |         function handleBookmark(page) {
234 |             visitedPages.splice(currentPageIndex + 1);
235 |             visitedPages.push(page);
236 |             currentPageIndex = visitedPages.length - 1;
237 |             updateBrowserContent(page);
238 |             checkTask(page);
239 |         }
240 | 
241 |         function updateBrowserContent(page) {
242 |             const content = document.getElementById('browserContent');
243 |             const addressBar = document.getElementById('addressBar');
244 |             
245 |             switch(page) {
246 |                 case 'home':
247 |                     addressBar.textContent = 'https://www.example.com';
248 |                     content.innerHTML = '<h2>Welcome to Browser Practice</h2><p>This is a simulation to help you learn browser navigation.</p>';
249 |                     break;
250 |                 case 'search':
251 |                     addressBar.textContent = 'https://www.search.example.com';
252 |                     content.innerHTML = '<h2>Search Page</h2><p>Practice searching the web here.</p>';
253 |                     break;
254 |                 case 'email':
255 |                     addressBar.textContent = 'https://www.mail.example.com';
256 |                     content.innerHTML = '<h2>Email Service</h2><p>Practice checking your email here.</p>';
257 |                     break;
258 |             }
259 |         }
260 | 
261 |         function checkTask(action) {
262 |             if (tasks[currentTaskIndex].check(action)) {
263 |                 alert(isEnglish ? 'Good job! Task completed!' : '!شاباش! کام مکمل ہو گیا');
264 |                 currentTaskIndex = (currentTaskIndex + 1) % tasks.length;
265 |                 updateLanguage();
266 |             }
267 |         }
268 | 
269 |         // Initial setup
270 |         updateLanguage();
271 |     </script>
272 | </body>
273 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/1-computer-basics.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Computer Basics (کمپیوٹر کی بنیادی باتیں)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .desktop-simulation {
 22 |             border: 2px solid #ccc;
 23 |             padding: 20px;
 24 |             margin: 20px 0;
 25 |             min-height: 400px;
 26 |             position: relative;
 27 |             background-color: #008080;
 28 |         }
 29 |         .window {
 30 |             position: absolute;
 31 |             background-color: #fff;
 32 |             border: 1px solid #999;
 33 |             border-radius: 5px;
 34 |             width: 300px;
 35 |             min-height: 200px;
 36 |             box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 37 |         }
 38 |         .window-header {
 39 |             background-color: #0056b3;
 40 |             color: white;
 41 |             padding: 5px 10px;
 42 |             display: flex;
 43 |             justify-content: space-between;
 44 |             align-items: center;
 45 |             cursor: move;
 46 |         }
 47 |         .window-content {
 48 |             padding: 10px;
 49 |         }
 50 |         .desktop-icon {
 51 |             width: 64px;
 52 |             height: 64px;
 53 |             margin: 10px;
 54 |             text-align: center;
 55 |             color: white;
 56 |             cursor: pointer;
 57 |         }
 58 |         .desktop-icon img {
 59 |             width: 32px;
 60 |             height: 32px;
 61 |             margin-bottom: 5px;
 62 |         }
 63 |         .context-menu {
 64 |             position: fixed;
 65 |             background-color: white;
 66 |             border: 1px solid #ccc;
 67 |             border-radius: 3px;
 68 |             padding: 5px 0;
 69 |             display: none;
 70 |             z-index: 1000;
 71 |             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 72 |         }
 73 |         .context-menu-item {
 74 |             padding: 5px 20px;
 75 |             cursor: pointer;
 76 |         }
 77 |         .context-menu-item:hover {
 78 |             background-color: #e1f5fe;
 79 |         }
 80 |         .task {
 81 |             background-color: #fff3cd;
 82 |             padding: 15px;
 83 |             border-radius: 5px;
 84 |             margin: 20px 0;
 85 |         }
 86 |         .instructions {
 87 |             background-color: #e1f5fe;
 88 |             padding: 15px;
 89 |             border-radius: 5px;
 90 |             margin-bottom: 20px;
 91 |         }
 92 |         .language-toggle {
 93 |             text-align: right;
 94 |             margin-bottom: 20px;
 95 |         }
 96 |         button {
 97 |             padding: 10px 20px;
 98 |             font-size: 16px;
 99 |             cursor: pointer;
100 |             background-color: #2196F3;
101 |             color: white;
102 |             border: none;
103 |             border-radius: 5px;
104 |             margin: 5px;
105 |         }
106 |         button:hover {
107 |             background-color: #1976D2;
108 |         }
109 |         .taskbar {
110 |             position: absolute;
111 |             bottom: 0;
112 |             left: 0;
113 |             right: 0;
114 |             height: 40px;
115 |             background-color: #333;
116 |             display: flex;
117 |             align-items: center;
118 |             padding: 0 10px;
119 |         }
120 |         .start-button {
121 |             background-color: #0056b3;
122 |             color: white;
123 |             padding: 5px 15px;
124 |             border-radius: 3px;
125 |             cursor: pointer;
126 |         }
127 |     </style>
128 | </head>
129 | <body>
130 |     <div class="container">
131 |         <div class="language-toggle">
132 |             <button onclick="toggleLanguage()">English/اردو</button>
133 |         </div>
134 | 
135 |         <h1 id="title">Computer Basics Practice (کمپیوٹر کی بنیادی مشق)</h1>
136 | 
137 |         <div class="instructions" id="instructions">
138 |             <h2>Instructions (ہدایات):</h2>
139 |             <p>Practice basic computer operations like clicking, dragging windows, and using menus.</p>
140 |             <p>کلک کرنے، ونڈوز کو کھینچنے اور مینو استعمال کرنے جیسے بنیادی کمپیوٹر آپریشنز کی مشق کریں۔</p>
141 |         </div>
142 | 
143 |         <div class="task" id="currentTask">
144 |             <h3>Current Task (موجودہ کام):</h3>
145 |             <p id="taskDescription">Double-click on the Documents folder</p>
146 |         </div>
147 | 
148 |         <div class="desktop-simulation" id="desktop">
149 |             <!-- Desktop icons -->
150 |             <div class="desktop-icon" ondblclick="openFolder('Documents')" oncontextmenu="showContextMenu(event, 'Documents')">
151 |                 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='yellow' d='M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/></svg>">
152 |                 <div>Documents</div>
153 |             </div>
154 |             <div class="desktop-icon" ondblclick="openFolder('Pictures')" oncontextmenu="showContextMenu(event, 'Pictures')">
155 |                 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='yellow' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/></svg>">
156 |                 <div>Pictures</div>
157 |             </div>
158 | 
159 |             <!-- Context menu -->
160 |             <div class="context-menu" id="contextMenu">
161 |                 <div class="context-menu-item" onclick="handleContextMenu('open')">Open (کھولیں)</div>
162 |                 <div class="context-menu-item" onclick="handleContextMenu('copy')">Copy (کاپی)</div>
163 |                 <div class="context-menu-item" onclick="handleContextMenu('delete')">Delete (حذف)</div>
164 |             </div>
165 | 
166 |             <!-- Taskbar -->
167 |             <div class="taskbar">
168 |                 <div class="start-button" onclick="toggleStartMenu()">Start (شروع)</div>
169 |             </div>
170 |         </div>
171 |     </div>
172 | 
173 |     <script>
174 |         let isEnglish = true;
175 |         let currentTaskIndex = 0;
176 | 
177 |         const tasks = [
178 |             {
179 |                 en: "Double-click on the Documents folder",
180 |                 ur: "Documents فولڈر پر ڈبل کلک کریں",
181 |                 check: (action) => action === 'open_Documents'
182 |             },
183 |             {
184 |                 en: "Right-click on the Pictures folder and select Copy",
185 |                 ur: "Pictures فولڈر پر رائٹ کلک کریں اور Copy منتخب کریں",
186 |                 check: (action) => action === 'copy_Pictures'
187 |             },
188 |             {
189 |                 en: "Click the Start button",
190 |                 ur: "Start بٹن پر کلک کریں",
191 |                 check: (action) => action === 'click_start'
192 |             }
193 |         ];
194 | 
195 |         function toggleLanguage() {
196 |             isEnglish = !isEnglish;
197 |             updateLanguage();
198 |         }
199 | 
200 |         function updateLanguage() {
201 |             const title = document.getElementById('title');
202 |             const taskDesc = document.getElementById('taskDescription');
203 |             
204 |             if (isEnglish) {
205 |                 title.innerHTML = 'Computer Basics Practice (کمپیوٹر کی بنیادی مشق)';
206 |                 taskDesc.textContent = tasks[currentTaskIndex].en;
207 |             } else {
208 |                 title.innerHTML = 'کمپیوٹر کی بنیادی مشق';
209 |                 taskDesc.textContent = tasks[currentTaskIndex].ur;
210 |             }
211 |         }
212 | 
213 |         function openFolder(name) {
214 |             checkTask(`open_${name}`);
215 |         }
216 | 
217 |         function showContextMenu(event, name) {
218 |             event.preventDefault();
219 |             const menu = document.getElementById('contextMenu');
220 |             const desktop = document.querySelector('.desktop-simulation');
221 |             const desktopRect = desktop.getBoundingClientRect();
222 |             
223 |             // Calculate available space
224 |             const menuWidth = 150; // Approximate width of menu
225 |             const menuHeight = 105; // Approximate height of menu
226 |             
227 |             // Get click position relative to viewport
228 |             let x = event.clientX;
229 |             let y = event.clientY;
230 |             
231 |             // Adjust position if menu would appear outside desktop area
232 |             if (x + menuWidth > desktopRect.right) {
233 |                 x = desktopRect.right - menuWidth;
234 |             }
235 |             if (y + menuHeight > desktopRect.bottom) {
236 |                 y = desktopRect.bottom - menuHeight;
237 |             }
238 |             
239 |             // Keep menu within desktop bounds
240 |             x = Math.max(desktopRect.left, Math.min(x, desktopRect.right - menuWidth));
241 |             y = Math.max(desktopRect.top, Math.min(y, desktopRect.bottom - menuHeight));
242 |             
243 |             menu.style.left = x + 'px';
244 |             menu.style.top = y + 'px';
245 |             menu.dataset.target = name;
246 |             menu.style.display = 'block';
247 |         }
248 | 
249 |         function handleContextMenu(action) {
250 |             const menu = document.getElementById('contextMenu');
251 |             const target = menu.dataset.target;
252 |             menu.style.display = 'none';
253 |             checkTask(`${action}_${target}`);
254 |         }
255 | 
256 |         function toggleStartMenu() {
257 |             checkTask('click_start');
258 |         }
259 | 
260 |         function checkTask(action) {
261 |             if (tasks[currentTaskIndex].check(action)) {
262 |                 alert(isEnglish ? 'Good job! Task completed!' : '!شاباش! کام مکمل ہو گیا');
263 |                 currentTaskIndex = (currentTaskIndex + 1) % tasks.length;
264 |                 updateLanguage();
265 |             }
266 |         }
267 | 
268 |         // Close context menu when clicking outside
269 |         document.addEventListener('click', function(event) {
270 |             const menu = document.getElementById('contextMenu');
271 |             if (!event.target.closest('.context-menu')) {
272 |                 menu.style.display = 'none';
273 |             }
274 |         });
275 | 
276 |         // Initial setup
277 |         updateLanguage();
278 |     </script>
279 | </body>
280 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.1-computer-basics/exercises/3-keyboard-practice.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Keyboard Practice (کی بورڈ پریکٹس)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .practice-area {
 22 |             border: 2px solid #ccc;
 23 |             padding: 20px;
 24 |             margin: 20px 0;
 25 |             min-height: 200px;
 26 |             position: relative;
 27 |         }
 28 |         .text-display {
 29 |             font-size: 24px;
 30 |             margin-bottom: 20px;
 31 |             color: #666;
 32 |             line-height: 1.5;
 33 |         }
 34 |         .text-input {
 35 |             width: 100%;
 36 |             padding: 10px;
 37 |             font-size: 18px;
 38 |             border: 2px solid #ccc;
 39 |             border-radius: 5px;
 40 |             margin-top: 10px;
 41 |         }
 42 |         .stats {
 43 |             display: flex;
 44 |             justify-content: space-around;
 45 |             margin: 20px 0;
 46 |             padding: 15px;
 47 |             background-color: #e1f5fe;
 48 |             border-radius: 5px;
 49 |         }
 50 |         .stat-box {
 51 |             text-align: center;
 52 |         }
 53 |         .stat-label {
 54 |             font-size: 14px;
 55 |             color: #666;
 56 |         }
 57 |         .stat-value {
 58 |             font-size: 24px;
 59 |             font-weight: bold;
 60 |             color: #2196F3;
 61 |         }
 62 |         .keyboard {
 63 |             display: grid;
 64 |             grid-template-columns: repeat(10, 1fr);
 65 |             gap: 5px;
 66 |             margin-top: 20px;
 67 |             padding: 10px;
 68 |             background-color: #f5f5f5;
 69 |             border-radius: 5px;
 70 |         }
 71 |         .key {
 72 |             aspect-ratio: 1;
 73 |             display: flex;
 74 |             align-items: center;
 75 |             justify-content: center;
 76 |             background-color: white;
 77 |             border: 1px solid #ccc;
 78 |             border-radius: 5px;
 79 |             font-size: 14px;
 80 |             cursor: default;
 81 |             transition: all 0.2s;
 82 |         }
 83 |         .key.active {
 84 |             background-color: #2196F3;
 85 |             color: white;
 86 |             transform: scale(0.95);
 87 |         }
 88 |         .language-toggle {
 89 |             text-align: right;
 90 |             margin-bottom: 20px;
 91 |         }
 92 |         button {
 93 |             padding: 10px 20px;
 94 |             font-size: 16px;
 95 |             cursor: pointer;
 96 |             background-color: #2196F3;
 97 |             color: white;
 98 |             border: none;
 99 |             border-radius: 5px;
100 |             margin: 5px;
101 |         }
102 |         button:hover {
103 |             background-color: #1976D2;
104 |         }
105 |         .correct {
106 |             color: #4CAF50;
107 |         }
108 |         .incorrect {
109 |             color: #f44336;
110 |             text-decoration: underline;
111 |         }
112 |     </style>
113 | </head>
114 | <body>
115 |     <div class="container">
116 |         <div class="language-toggle">
117 |             <button onclick="toggleLanguage()">English/اردو</button>
118 |         </div>
119 | 
120 |         <h1 id="title">Keyboard Practice (کی بورڈ پریکٹس)</h1>
121 | 
122 |         <div class="instructions" id="instructions">
123 |             <h2>Instructions (ہدایات):</h2>
124 |             <p>Type the text shown below. Practice typing accurately and build speed gradually.</p>
125 |             <p>نیچے دکھائے گئے متن کو ٹائپ کریں۔ درستگی کے ساتھ ٹائپنگ کی مشق کریں اور آہستہ آہستہ رفتار بڑھائیں۔</p>
126 |         </div>
127 | 
128 |         <div class="stats">
129 |             <div class="stat-box">
130 |                 <div class="stat-label">WPM (رفتار)</div>
131 |                 <div class="stat-value" id="wpm">0</div>
132 |             </div>
133 |             <div class="stat-box">
134 |                 <div class="stat-label">Accuracy (درستگی)</div>
135 |                 <div class="stat-value" id="accuracy">100%</div>
136 |             </div>
137 |             <div class="stat-box">
138 |                 <div class="stat-label">Time (وقت)</div>
139 |                 <div class="stat-value" id="time">0:00</div>
140 |             </div>
141 |         </div>
142 | 
143 |         <div class="practice-area">
144 |             <div class="text-display" id="textDisplay"></div>
145 |             <input type="text" class="text-input" id="textInput" placeholder="Start typing here... (یہاں ٹائپ کرنا شروع کریں)" autocomplete="off">
146 |         </div>
147 | 
148 |         <div class="keyboard" id="keyboard"></div>
149 | 
150 |         <button onclick="newText()">New Text / نیا متن</button>
151 |     </div>
152 | 
153 |     <script>
154 |         let isEnglish = true;
155 |         let startTime = null;
156 |         let timer = null;
157 | 
158 |         const practiceTexts = {
159 |             en: [
160 |                 "The quick brown fox jumps over the lazy dog.",
161 |                 "Type as quickly and accurately as you can.",
162 |                 "Practice makes perfect, keep trying!",
163 |                 "Learning to type is an essential computer skill.",
164 |                 "Focus on accuracy first, then build speed."
165 |             ],
166 |             ur: [
167 |                 "میں کمپیوٹر پر ٹائپنگ سیکھ رہا ہوں۔",
168 |                 "روزانہ تھوڑی دیر مشق کریں۔",
169 |                 "آہستہ آہستہ رفتار بڑھے گی۔",
170 |                 "غلطیوں سے سیکھنا اچھی بات ہے۔",
171 |                 "مشق سے ہی مہارت آتی ہے۔"
172 |             ]
173 |         };
174 | 
175 |         function toggleLanguage() {
176 |             isEnglish = !isEnglish;
177 |             updateLanguage();
178 |             newText();
179 |         }
180 | 
181 |         function updateLanguage() {
182 |             const title = document.getElementById('title');
183 |             const instructions = document.getElementById('instructions');
184 |             
185 |             if (isEnglish) {
186 |                 title.innerHTML = 'Keyboard Practice (کی بورڈ پریکٹس)';
187 |                 document.getElementById('textInput').placeholder = 'Start typing here... (یہاں ٹائپ کرنا شروع کریں)';
188 |             } else {
189 |                 title.innerHTML = 'کی بورڈ پریکٹس';
190 |                 document.getElementById('textInput').placeholder = 'یہاں ٹائپ کرنا شروع کریں... (Start typing here)';
191 |             }
192 |         }
193 | 
194 |         function newText() {
195 |             const texts = isEnglish ? practiceTexts.en : practiceTexts.ur;
196 |             const randomIndex = Math.floor(Math.random() * texts.length);
197 |             document.getElementById('textDisplay').textContent = texts[randomIndex];
198 |             document.getElementById('textInput').value = '';
199 |             resetStats();
200 |         }
201 | 
202 |         function resetStats() {
203 |             startTime = null;
204 |             if (timer) clearInterval(timer);
205 |             document.getElementById('wpm').textContent = '0';
206 |             document.getElementById('accuracy').textContent = '100%';
207 |             document.getElementById('time').textContent = '0:00';
208 |         }
209 | 
210 |         function updateStats() {
211 |             if (!startTime) {
212 |                 startTime = new Date();
213 |                 timer = setInterval(updateTime, 1000);
214 |             }
215 | 
216 |             const input = document.getElementById('textInput').value;
217 |             const target = document.getElementById('textDisplay').textContent;
218 |             
219 |             // Calculate accuracy
220 |             let correct = 0;
221 |             for (let i = 0; i < input.length; i++) {
222 |                 if (input[i] === target[i]) correct++;
223 |             }
224 |             const accuracy = input.length === 0 ? 100 : Math.round((correct / input.length) * 100);
225 |             document.getElementById('accuracy').textContent = accuracy + '%';
226 | 
227 |             // Calculate WPM
228 |             const timeElapsed = (new Date() - startTime) / 1000 / 60; // in minutes
229 |             const words = input.length / 5; // assume average word length of 5
230 |             const wpm = Math.round(words / timeElapsed);
231 |             document.getElementById('wpm').textContent = wpm.toString();
232 | 
233 |             // Update text display with colored feedback
234 |             const display = document.getElementById('textDisplay');
235 |             let html = '';
236 |             for (let i = 0; i < target.length; i++) {
237 |                 if (i < input.length) {
238 |                     const correct = input[i] === target[i];
239 |                     html += `<span class="${correct ? 'correct' : 'incorrect'}">${target[i]}</span>`;
240 |                 } else {
241 |                     html += target[i];
242 |                 }
243 |             }
244 |             display.innerHTML = html;
245 | 
246 |             // Check if completed
247 |             if (input === target) {
248 |                 clearInterval(timer);
249 |                 alert(isEnglish ? 'Well done! Try another text!' : '!شاباش! دوسرا متن آزمائیں');
250 |                 newText();
251 |             }
252 |         }
253 | 
254 |         function updateTime() {
255 |             if (!startTime) return;
256 |             const timeElapsed = Math.round((new Date() - startTime) / 1000);
257 |             const minutes = Math.floor(timeElapsed / 60);
258 |             const seconds = timeElapsed % 60;
259 |             document.getElementById('time').textContent = 
260 |                 `${minutes}:${seconds.toString().padStart(2, '0')}`;
261 |         }
262 | 
263 |         // Create virtual keyboard
264 |         function createKeyboard() {
265 |             const keyboard = document.getElementById('keyboard');
266 |             const keys = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('');
267 |             keyboard.innerHTML = '';
268 |             keys.forEach(key => {
269 |                 const keyElement = document.createElement('div');
270 |                 keyElement.className = 'key';
271 |                 keyElement.textContent = key;
272 |                 keyboard.appendChild(keyElement);
273 |             });
274 |         }
275 | 
276 |         // Event listeners
277 |         document.getElementById('textInput').addEventListener('input', updateStats);
278 |         document.addEventListener('keydown', (e) => {
279 |             const key = document.querySelector(`.key:contains('${e.key.toUpperCase()}')`);
280 |             if (key) key.classList.add('active');
281 |         });
282 |         document.addEventListener('keyup', (e) => {
283 |             const key = document.querySelector(`.key:contains('${e.key.toUpperCase()}')`);
284 |             if (key) key.classList.remove('active');
285 |         });
286 | 
287 |         // Initial setup
288 |         createKeyboard();
289 |         updateLanguage();
290 |         newText();
291 |     </script>
292 | </body>
293 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.2-internet-fundamentals/exercises/4-online-safety.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Internet Safety Practice (انٹرنیٹ سیفٹی پریکٹس)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .scenario-card {
 22 |             border: 1px solid #ddd;
 23 |             margin: 20px 0;
 24 |             padding: 20px;
 25 |             border-radius: 5px;
 26 |             background-color: #fff;
 27 |         }
 28 |         .scenario-content {
 29 |             margin-bottom: 20px;
 30 |         }
 31 |         .options-container {
 32 |             display: grid;
 33 |             gap: 10px;
 34 |         }
 35 |         .option-button {
 36 |             padding: 15px;
 37 |             background-color: #f8f9fa;
 38 |             border: 1px solid #ddd;
 39 |             border-radius: 5px;
 40 |             cursor: pointer;
 41 |             text-align: left;
 42 |             transition: background-color 0.3s;
 43 |             color: #333;
 44 |         }
 45 |         .option-button:hover {
 46 |             background-color: #e9ecef;
 47 |         }
 48 |         .feedback-panel {
 49 |             margin-top: 15px;
 50 |             padding: 15px;
 51 |             border-radius: 5px;
 52 |             display: none;
 53 |         }
 54 |         .feedback-panel.correct {
 55 |             background-color: #d4edda;
 56 |             color: #155724;
 57 |             border: 1px solid #c3e6cb;
 58 |         }
 59 |         .feedback-panel.incorrect {
 60 |             background-color: #f8d7da;
 61 |             color: #721c24;
 62 |             border: 1px solid #f5c6cb;
 63 |         }
 64 |         .progress-bar {
 65 |             height: 20px;
 66 |             background-color: #e9ecef;
 67 |             border-radius: 10px;
 68 |             margin: 20px 0;
 69 |             overflow: hidden;
 70 |         }
 71 |         .progress-fill {
 72 |             height: 100%;
 73 |             background-color: #28a745;
 74 |             transition: width 0.3s ease;
 75 |         }
 76 |         .language-toggle {
 77 |             text-align: right;
 78 |             margin-bottom: 20px;
 79 |         }
 80 |         button {
 81 |             padding: 10px 20px;
 82 |             font-size: 16px;
 83 |             cursor: pointer;
 84 |             background-color: #2196F3;
 85 |             color: white;
 86 |             border: none;
 87 |             border-radius: 5px;
 88 |             margin: 5px;
 89 |         }
 90 |         button:hover {
 91 |             background-color: #1976D2;
 92 |         }
 93 |         .safety-tip {
 94 |             background-color: #fff3cd;
 95 |             padding: 15px;
 96 |             border-radius: 5px;
 97 |             margin: 20px 0;
 98 |             border-left: 4px solid #ffc107;
 99 |         }
100 |         .icon {
101 |             font-size: 24px;
102 |             margin-right: 10px;
103 |         }
104 |         .password-text {
105 |             font-family: monospace;
106 |             color: #2c3e50;
107 |             background-color: #f8f9fa;
108 |             padding: 2px 4px;
109 |             border-radius: 3px;
110 |             border: 1px solid #e9ecef;
111 |         }
112 |     </style>
113 | </head>
114 | <body>
115 |     <div class="container">
116 |         <div class="language-toggle">
117 |             <button onclick="toggleLanguage()">English/اردو</button>
118 |         </div>
119 | 
120 |         <h1 id="title">Internet Safety Practice (انٹرنیٹ سیفٹی پریکٹس)</h1>
121 | 
122 |         <div class="progress-bar">
123 |             <div class="progress-fill" id="progressBar" style="width: 0%"></div>
124 |         </div>
125 | 
126 |         <div class="safety-tip" id="safetyTip">
127 |             <span class="icon">💡</span>
128 |             <span id="tipText">Always be careful with your personal information online!</span>
129 |         </div>
130 | 
131 |         <div class="scenario-card">
132 |             <h2 id="scenarioTitle">Scenario</h2>
133 |             <div class="scenario-content" id="scenarioContent"></div>
134 |             <div class="options-container" id="options"></div>
135 |             <div class="feedback-panel" id="feedback"></div>
136 |         </div>
137 |     </div>
138 | 
139 |     <script>
140 |         let isEnglish = true;
141 |         let currentScenarioIndex = 0;
142 | 
143 |         const scenarios = [
144 |             {
145 |                 en: {
146 |                     title: "Password Security",
147 |                     content: "You need to create a new password for your email account. Which of these is the safest?",
148 |                     options: [
149 |                         { text: "123456", correct: false },
150 |                         { text: "password123", correct: false },
151 |                         { text: '<span class="password-text">StrongP@ssw0rd2024!</span>', correct: true },
152 |                         { text: "your birthday", correct: false }
153 |                     ],
154 |                     feedback: {
155 |                         correct: "Excellent! A strong password should include numbers, special characters, and both upper and lower case letters.",
156 |                         incorrect: "This password is not secure enough. Use a mix of numbers, special characters, and both upper and lower case letters."
157 |                     },
158 |                     tip: "Never use common words or personal information in your passwords."
159 |                 },
160 |                 ur: {
161 |                     title: "پاس ورڈ سیکیورٹی",
162 |                     content: "آپ کو اپنے ای میل اکاؤنٹ کے لیے ایک نیا پاس ورڈ بنانا ہے۔ ان میں سے کون سا سب سے محفوظ ہے؟",
163 |                     options: [
164 |                         { text: "123456", correct: false },
165 |                         { text: "password123", correct: false },
166 |                         { text: '<span class="password-text">StrongP@ssw0rd2024!</span>', correct: true },
167 |                         { text: "آپ کی پیدائش کی تاریخ", correct: false }
168 |                     ],
169 |                     feedback: {
170 |                         correct: "شاندار! ایک مضبوط پاس ورڈ میں نمبر، خصوصی حروف، اور بڑے اور چھوٹے حروف شامل ہونے چاہئیں۔",
171 |                         incorrect: "یہ پاس ورڈ کافی محفوظ نہیں ہے۔ نمبر، خصوصی حروف، اور بڑے اور چھوٹے حروف کا مرکب استعمال کریں۔"
172 |                     },
173 |                     tip: "کبھی بھی اپنے پاس ورڈ میں عام الفاظ یا ذاتی معلومات استعمال نہ کریں۔"
174 |                 }
175 |             },
176 |             {
177 |                 en: {
178 |                     title: "Email Safety",
179 |                     content: "You receive an email saying you've won a lottery and need to provide your bank details to claim the prize. What should you do?",
180 |                     options: [
181 |                         { text: "Reply with your bank details", correct: false },
182 |                         { text: "Delete the email immediately", correct: true },
183 |                         { text: "Click on any links in the email", correct: false },
184 |                         { text: "Forward it to friends", correct: false }
185 |                     ],
186 |                     feedback: {
187 |                         correct: "Great decision! Such emails are usually scams. Never share your banking information through email.",
188 |                         incorrect: "This could be dangerous! Lottery scam emails are common. Never share financial information through email."
189 |                     },
190 |                     tip: "Be suspicious of any unexpected prizes or requests for financial information."
191 |                 },
192 |                 ur: {
193 |                     title: "ای میل سیفٹی",
194 |                     content: "آپ کو ایک ای میل موصول ہوتی ہے جس میں کہا گیا ہے کہ آپ نے لاٹری جیتی ہے اور انعام حاصل کرنے کے لیے اپنی بینک کی تفصیلات فراہم کرنے کی ضرورت ہے۔ آپ کو کیا کرنا چاہیے؟",
195 |                     options: [
196 |                         { text: "اپنی بینک کی تفصیلات کے ساتھ جواب دیں", correct: false },
197 |                         { text: "ای میل کو فوراً حذف کر دیں", correct: true },
198 |                         { text: "ای میل میں موجود کسی بھی لنک پر کلک کریں", correct: false },
199 |                         { text: "اسے دوستوں کو فارورڈ کریں", correct: false }
200 |                     ],
201 |                     feedback: {
202 |                         correct: "بہترین فیصلہ! ایسی ای میلز عام طور پر دھوکہ دہی ہوتی ہیں۔ کبھی بھی ای میل کے ذریعے اپنی بینکنگ معلومات شیئر نہ کریں۔",
203 |                         incorrect: "یہ خطرناک ہو سکتا ہے! لاٹری کی دھوکہ دہی والی ای میلز عام ہیں۔ کبھی بھی ای میل کے ذریعے مالی معلومات شیئر نہ کریں۔"
204 |                     },
205 |                     tip: "کسی بھی غیر متوقع انعام یا مالی معلومات کی درخواست پر شک کریں۔"
206 |                 }
207 |             },
208 |             {
209 |                 en: {
210 |                     title: "Social Media Privacy",
211 |                     content: "A stranger sends you a friend request on social media. They have a nice profile picture. What's the safe action?",
212 |                     options: [
213 |                         { text: "Accept immediately", correct: false },
214 |                         { text: "Share your personal information", correct: false },
215 |                         { text: "Ignore/Block the request", correct: true },
216 |                         { text: "Ask them for their phone number", correct: false }
217 |                     ],
218 |                     feedback: {
219 |                         correct: "Perfect! It's safest to only connect with people you know in real life.",
220 |                         incorrect: "Be careful! Accepting unknown friend requests can be dangerous."
221 |                     },
222 |                     tip: "Keep your social media profiles private and only connect with people you know personally."
223 |                 },
224 |                 ur: {
225 |                     title: "سوشل میڈیا پرائیویسی",
226 |                     content: "ایک اجنبی آپ کو سوشل میڈیا پر دوستی کی درخواست بھیجتا ہے۔ ان کی پروفائل تصویر اچھی ہے۔ محفوظ عمل کیا ہے؟",
227 |                     options: [
228 |                         { text: "فوراً قبول کریں", correct: false },
229 |                         { text: "اپنی ذاتی معلومات شیئر کریں", correct: false },
230 |                         { text: "درخواست کو نظر انداز/بلاک کریں", correct: true },
231 |                         { text: "ان سے ان کا فون نمبر پوچھیں", correct: false }
232 |                     ],
233 |                     feedback: {
234 |                         correct: "بالکل درست! صرف ان لوگوں سے جڑنا سب سے محفوظ ہے جنہیں آپ حقیقی زندگی میں جانتے ہیں۔",
235 |                         incorrect: "محتاط رہیں! نامعلوم دوستی کی درخواستیں قبول کرنا خطرناک ہو سکتا ہے۔"
236 |                     },
237 |                     tip: "اپنی سوشل میڈیا پروفائلز کو پرائیویٹ رکھیں اور صرف ان لوگوں سے جڑیں جنہیں آپ ذاتی طور پر جانتے ہیں۔"
238 |                 }
239 |             }
240 |         ];
241 | 
242 |         function toggleLanguage() {
243 |             isEnglish = !isEnglish;
244 |             updateContent();
245 |         }
246 | 
247 |         function updateContent() {
248 |             const title = document.getElementById('title');
249 |             const scenario = scenarios[currentScenarioIndex];
250 |             const content = isEnglish ? scenario.en : scenario.ur;
251 |             
252 |             title.innerHTML = isEnglish ? 
253 |                 'Internet Safety Practice (انٹرنیٹ سیفٹی پریکٹس)' : 
254 |                 'انٹرنیٹ سیفٹی پریکٹس';
255 |             
256 |             document.getElementById('scenarioTitle').textContent = content.title;
257 |             document.getElementById('scenarioContent').textContent = content.content;
258 |             document.getElementById('tipText').textContent = content.tip;
259 |             
260 |             const optionsContainer = document.getElementById('options');
261 |             optionsContainer.innerHTML = '';
262 |             
263 |             content.options.forEach((option, index) => {
264 |                 const button = document.createElement('button');
265 |                 button.className = 'option-button';
266 |                 button.innerHTML = option.text;
267 |                 button.onclick = () => checkAnswer(index, option.correct);
268 |                 optionsContainer.appendChild(button);
269 |             });
270 | 
271 |             document.getElementById('feedback').style.display = 'none';
272 |             updateProgress();
273 |         }
274 | 
275 |         function checkAnswer(index, isCorrect) {
276 |             const feedback = document.getElementById('feedback');
277 |             const scenario = scenarios[currentScenarioIndex];
278 |             const content = isEnglish ? scenario.en : scenario.ur;
279 |             
280 |             feedback.textContent = isCorrect ? content.feedback.correct : content.feedback.incorrect;
281 |             feedback.className = `feedback-panel ${isCorrect ? 'correct' : 'incorrect'}`;
282 |             feedback.style.display = 'block';
283 | 
284 |             if (isCorrect) {
285 |                 setTimeout(() => {
286 |                     currentScenarioIndex = (currentScenarioIndex + 1) % scenarios.length;
287 |                     updateContent();
288 |                 }, 2000);
289 |             }
290 |         }
291 | 
292 |         function updateProgress() {
293 |             const progress = ((currentScenarioIndex) / scenarios.length) * 100;
294 |             document.getElementById('progressBar').style.width = `${progress}%`;
295 |         }
296 | 
297 |         // Initial setup
298 |         updateContent();
299 |     </script>
300 | </body>
301 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.2-internet-fundamentals/exercises/5-email-basics.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Email Basics (ای میل کی بنیادی باتیں)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .email-interface {
 22 |             border: 1px solid #ddd;
 23 |             border-radius: 5px;
 24 |             margin: 20px 0;
 25 |             background-color: #fff;
 26 |         }
 27 |         .email-header {
 28 |             background-color: #f8f9fa;
 29 |             padding: 10px;
 30 |             border-bottom: 1px solid #ddd;
 31 |         }
 32 |         .email-toolbar {
 33 |             padding: 10px;
 34 |             border-bottom: 1px solid #ddd;
 35 |             display: flex;
 36 |             gap: 10px;
 37 |         }
 38 |         .email-content {
 39 |             display: flex;
 40 |             min-height: 400px;
 41 |         }
 42 |         .email-sidebar {
 43 |             width: 200px;
 44 |             border-right: 1px solid #ddd;
 45 |             padding: 10px;
 46 |         }
 47 |         .email-main {
 48 |             flex-grow: 1;
 49 |             padding: 10px;
 50 |         }
 51 |         .folder {
 52 |             padding: 8px;
 53 |             cursor: pointer;
 54 |             border-radius: 3px;
 55 |             margin-bottom: 5px;
 56 |         }
 57 |         .folder:hover {
 58 |             background-color: #e9ecef;
 59 |         }
 60 |         .folder.active {
 61 |             background-color: #e1f5fe;
 62 |         }
 63 |         .compose-form {
 64 |             padding: 15px;
 65 |             border: 1px solid #ddd;
 66 |             border-radius: 5px;
 67 |             margin-bottom: 15px;
 68 |             display: none;
 69 |         }
 70 |         .form-group {
 71 |             margin-bottom: 10px;
 72 |         }
 73 |         .form-group label {
 74 |             display: block;
 75 |             margin-bottom: 5px;
 76 |         }
 77 |         .form-group input, .form-group textarea {
 78 |             width: 100%;
 79 |             padding: 8px;
 80 |             border: 1px solid #ddd;
 81 |             border-radius: 3px;
 82 |         }
 83 |         .email-list {
 84 |             list-style: none;
 85 |             padding: 0;
 86 |             margin: 0;
 87 |         }
 88 |         .email-item {
 89 |             padding: 10px;
 90 |             border-bottom: 1px solid #ddd;
 91 |             cursor: pointer;
 92 |         }
 93 |         .email-item:hover {
 94 |             background-color: #f8f9fa;
 95 |         }
 96 |         .task-panel {
 97 |             background-color: #fff3cd;
 98 |             padding: 15px;
 99 |             border-radius: 5px;
100 |             margin: 20px 0;
101 |         }
102 |         .language-toggle {
103 |             text-align: right;
104 |             margin-bottom: 20px;
105 |         }
106 |         button {
107 |             padding: 10px 20px;
108 |             font-size: 16px;
109 |             cursor: pointer;
110 |             background-color: #2196F3;
111 |             color: white;
112 |             border: none;
113 |             border-radius: 5px;
114 |             margin: 5px;
115 |         }
116 |         button:hover {
117 |             background-color: #1976D2;
118 |         }
119 |         .feedback {
120 |             padding: 10px;
121 |             border-radius: 5px;
122 |             margin-top: 10px;
123 |             display: none;
124 |         }
125 |         .feedback.success {
126 |             background-color: #d4edda;
127 |             color: #155724;
128 |         }
129 |         .feedback.error {
130 |             background-color: #f8d7da;
131 |             color: #721c24;
132 |         }
133 |     </style>
134 | </head>
135 | <body>
136 |     <div class="container">
137 |         <div class="language-toggle">
138 |             <button onclick="toggleLanguage()">English/اردو</button>
139 |         </div>
140 | 
141 |         <h1 id="title">Email Basics (ای میل کی بنیادی باتیں)</h1>
142 | 
143 |         <div class="task-panel">
144 |             <h3 id="current-task">Current Task: Compose a new email</h3>
145 |             <p id="task-description">Practice creating and sending emails.</p>
146 |         </div>
147 | 
148 |         <div class="email-interface">
149 |             <div class="email-header">
150 |                 <h2>Email Practice (ای میل پریکٹس)</h2>
151 |             </div>
152 |             <div class="email-toolbar">
153 |                 <button onclick="showComposeForm()" id="compose-btn">Compose</button>
154 |                 <button onclick="refreshInbox()" id="refresh-btn">Refresh</button>
155 |                 <button onclick="deleteEmail()" id="delete-btn">Delete</button>
156 |             </div>
157 |             <div class="email-content">
158 |                 <div class="email-sidebar">
159 |                     <div class="folder active" onclick="switchFolder('inbox')" id="inbox-folder">Inbox</div>
160 |                     <div class="folder" onclick="switchFolder('sent')" id="sent-folder">Sent</div>
161 |                     <div class="folder" onclick="switchFolder('drafts')" id="drafts-folder">Drafts</div>
162 |                     <div class="folder" onclick="switchFolder('spam')" id="spam-folder">Spam</div>
163 |                 </div>
164 |                 <div class="email-main">
165 |                     <div class="compose-form" id="compose-form">
166 |                         <div class="form-group">
167 |                             <label id="to-label">To:</label>
168 |                             <input type="text" id="to-input">
169 |                         </div>
170 |                         <div class="form-group">
171 |                             <label id="subject-label">Subject:</label>
172 |                             <input type="text" id="subject-input">
173 |                         </div>
174 |                         <div class="form-group">
175 |                             <label id="message-label">Message:</label>
176 |                             <textarea id="message-input" rows="5"></textarea>
177 |                         </div>
178 |                         <button onclick="sendEmail()" id="send-btn">Send</button>
179 |                     </div>
180 |                     <div class="email-list" id="email-list"></div>
181 |                 </div>
182 |             </div>
183 |         </div>
184 |         <div class="feedback" id="feedback"></div>
185 |     </div>
186 | 
187 |     <script>
188 |         let isEnglish = true;
189 |         let currentTask = 0;
190 |         let currentFolder = 'inbox';
191 | 
192 |         const tasks = [
193 |             {
194 |                 en: {
195 |                     title: "Compose a new email",
196 |                     description: "Click the Compose button and create a new email to friend@example.com"
197 |                 },
198 |                 ur: {
199 |                     title: "نیا ای میل لکھیں",
200 |                     description: "کمپوز بٹن پر کلک کریں اور friend@example.com کو نیا ای میل بنائیں"
201 |                 }
202 |             },
203 |             {
204 |                 en: {
205 |                     title: "Check your Spam folder",
206 |                     description: "Click on the Spam folder to see potentially dangerous emails"
207 |                 },
208 |                 ur: {
209 |                     title: "اپنا سپیم فولڈر چیک کریں",
210 |                     description: "ممکنہ خطرناک ای میلز دیکھنے کے لیے سپیم فولڈر پر کلک کریں"
211 |                 }
212 |             },
213 |             {
214 |                 en: {
215 |                     title: "Delete unwanted emails",
216 |                     description: "Select an email and click the Delete button"
217 |                 },
218 |                 ur: {
219 |                     title: "ناپسندیدہ ای میلز کو حذف کریں",
220 |                     description: "ایک ای میل منتخب کریں اور ڈیلیٹ بٹن پر کلک کریں"
221 |                 }
222 |             }
223 |         ];
224 | 
225 |         const emails = {
226 |             inbox: [
227 |                 { from: "newsletter@example.com", subject: "Weekly Newsletter", content: "Latest updates..." },
228 |                 { from: "friend@example.com", subject: "Hello!", content: "How are you?" }
229 |             ],
230 |             spam: [
231 |                 { from: "scam@fake.com", subject: "You've won!", content: "Claim your prize..." },
232 |                 { from: "virus@malware.com", subject: "Important!", content: "Click here..." }
233 |             ],
234 |             sent: [],
235 |             drafts: []
236 |         };
237 | 
238 |         function toggleLanguage() {
239 |             isEnglish = !isEnglish;
240 |             updateContent();
241 |         }
242 | 
243 |         function updateContent() {
244 |             const title = document.getElementById('title');
245 |             const task = tasks[currentTask];
246 |             
247 |             if (isEnglish) {
248 |                 title.innerHTML = 'Email Basics (ای میل کی بنیادی باتیں)';
249 |                 document.getElementById('current-task').textContent = 'Current Task: ' + task.en.title;
250 |                 document.getElementById('task-description').textContent = task.en.description;
251 |                 document.getElementById('compose-btn').textContent = 'Compose';
252 |                 document.getElementById('refresh-btn').textContent = 'Refresh';
253 |                 document.getElementById('delete-btn').textContent = 'Delete';
254 |                 document.getElementById('inbox-folder').textContent = 'Inbox';
255 |                 document.getElementById('sent-folder').textContent = 'Sent';
256 |                 document.getElementById('drafts-folder').textContent = 'Drafts';
257 |                 document.getElementById('spam-folder').textContent = 'Spam';
258 |             } else {
259 |                 title.innerHTML = 'ای میل کی بنیادی باتیں';
260 |                 document.getElementById('current-task').textContent = 'موجودہ کام: ' + task.ur.title;
261 |                 document.getElementById('task-description').textContent = task.ur.description;
262 |                 document.getElementById('compose-btn').textContent = 'تحریر کریں';
263 |                 document.getElementById('refresh-btn').textContent = 'ریفریش';
264 |                 document.getElementById('delete-btn').textContent = 'حذف کریں';
265 |                 document.getElementById('inbox-folder').textContent = 'ان باکس';
266 |                 document.getElementById('sent-folder').textContent = 'بھیجے گئے';
267 |                 document.getElementById('drafts-folder').textContent = 'ڈرافٹس';
268 |                 document.getElementById('spam-folder').textContent = 'سپیم';
269 |             }
270 |             
271 |             updateEmailList();
272 |         }
273 | 
274 |         function showComposeForm() {
275 |             document.getElementById('compose-form').style.display = 'block';
276 |             if (currentTask === 0) checkTask('compose');
277 |         }
278 | 
279 |         function switchFolder(folder) {
280 |             currentFolder = folder;
281 |             document.querySelectorAll('.folder').forEach(f => f.classList.remove('active'));
282 |             document.getElementById(`${folder}-folder`).classList.add('active');
283 |             updateEmailList();
284 |             if (currentTask === 1 && folder === 'spam') checkTask('spam');
285 |         }
286 | 
287 |         function updateEmailList() {
288 |             const list = document.getElementById('email-list');
289 |             list.innerHTML = '';
290 |             
291 |             emails[currentFolder].forEach(email => {
292 |                 const div = document.createElement('div');
293 |                 div.className = 'email-item';
294 |                 div.innerHTML = `
295 |                     <strong>${email.from}</strong><br>
296 |                     ${email.subject}
297 |                 `;
298 |                 list.appendChild(div);
299 |             });
300 |         }
301 | 
302 |         function sendEmail() {
303 |             const to = document.getElementById('to-input').value;
304 |             const subject = document.getElementById('subject-input').value;
305 |             const message = document.getElementById('message-input').value;
306 | 
307 |             if (to === 'friend@example.com' && subject && message) {
308 |                 emails.sent.push({ from: 'me@example.com', subject, content: message });
309 |                 showFeedback(true, isEnglish ? 'Email sent successfully!' : 'ای میل کامیابی سے بھیج دی گئی!');
310 |                 document.getElementById('compose-form').style.display = 'none';
311 |                 switchFolder('sent');
312 |                 if (currentTask === 0) nextTask();
313 |             } else {
314 |                 showFeedback(false, isEnglish ? 'Please fill all fields correctly.' : 'براہ کرم تمام فیلڈز درست طریقے سے بھریں۔');
315 |             }
316 |         }
317 | 
318 |         function deleteEmail() {
319 |             if (emails[currentFolder].length > 0) {
320 |                 emails[currentFolder].pop();
321 |                 updateEmailList();
322 |                 if (currentTask === 2) checkTask('delete');
323 |             }
324 |         }
325 | 
326 |         function showFeedback(success, message) {
327 |             const feedback = document.getElementById('feedback');
328 |             feedback.textContent = message;
329 |             feedback.className = `feedback ${success ? 'success' : 'error'}`;
330 |             feedback.style.display = 'block';
331 |             setTimeout(() => feedback.style.display = 'none', 3000);
332 |         }
333 | 
334 |         function checkTask(action) {
335 |             switch(currentTask) {
336 |                 case 0:
337 |                     if (action === 'compose') nextTask();
338 |                     break;
339 |                 case 1:
340 |                     if (action === 'spam') nextTask();
341 |                     break;
342 |                 case 2:
343 |                     if (action === 'delete') nextTask();
344 |                     break;
345 |             }
346 |         }
347 | 
348 |         function nextTask() {
349 |             currentTask = (currentTask + 1) % tasks.length;
350 |             updateContent();
351 |             showFeedback(true, isEnglish ? 'Task completed!' : '!کام مکمل ہو گیا');
352 |         }
353 | 
354 |         // Initial setup
355 |         updateContent();
356 |     </script>
357 | </body>
358 | </html> 


--------------------------------------------------------------------------------
/Phase-1/1.2-internet-fundamentals/exercises/2-internet-concepts.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Internet Concepts (انٹرنیٹ کے بنیادی تصورات)</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             margin: 20px;
 11 |             background-color: #f0f0f0;
 12 |         }
 13 |         .container {
 14 |             max-width: 800px;
 15 |             margin: 0 auto;
 16 |             background-color: white;
 17 |             padding: 20px;
 18 |             border-radius: 10px;
 19 |             box-shadow: 0 0 10px rgba(0,0,0,0.1);
 20 |         }
 21 |         .concept-card {
 22 |             border: 1px solid #ddd;
 23 |             margin: 20px 0;
 24 |             padding: 20px;
 25 |             border-radius: 5px;
 26 |             background-color: #fff;
 27 |         }
 28 |         .concept-title {
 29 |             font-size: 1.5em;
 30 |             color: #2196F3;
 31 |             margin-bottom: 15px;
 32 |         }
 33 |         .concept-content {
 34 |             margin-bottom: 20px;
 35 |         }
 36 |         .interactive-demo {
 37 |             border: 1px solid #e0e0e0;
 38 |             padding: 15px;
 39 |             border-radius: 5px;
 40 |             background-color: #f8f9fa;
 41 |             margin: 15px 0;
 42 |         }
 43 |         .animation-container {
 44 |             height: 200px;
 45 |             position: relative;
 46 |             overflow: hidden;
 47 |             margin: 20px 0;
 48 |             background-color: #f8f9fa;
 49 |             border-radius: 5px;
 50 |         }
 51 |         .language-toggle {
 52 |             text-align: right;
 53 |             margin-bottom: 20px;
 54 |         }
 55 |         button {
 56 |             padding: 10px 20px;
 57 |             font-size: 16px;
 58 |             cursor: pointer;
 59 |             background-color: #2196F3;
 60 |             color: white;
 61 |             border: none;
 62 |             border-radius: 5px;
 63 |             margin: 5px;
 64 |         }
 65 |         button:hover {
 66 |             background-color: #1976D2;
 67 |         }
 68 |         .progress-bar {
 69 |             height: 20px;
 70 |             background-color: #e9ecef;
 71 |             border-radius: 10px;
 72 |             margin: 20px 0;
 73 |             overflow: hidden;
 74 |         }
 75 |         .progress-fill {
 76 |             height: 100%;
 77 |             background-color: #28a745;
 78 |             transition: width 0.3s ease;
 79 |         }
 80 |         .quiz-container {
 81 |             margin-top: 20px;
 82 |         }
 83 |         .quiz-option {
 84 |             padding: 10px;
 85 |             margin: 5px 0;
 86 |             border: 1px solid #ddd;
 87 |             border-radius: 5px;
 88 |             cursor: pointer;
 89 |         }
 90 |         .quiz-option:hover {
 91 |             background-color: #f0f0f0;
 92 |         }
 93 |         .feedback {
 94 |             margin-top: 10px;
 95 |             padding: 10px;
 96 |             border-radius: 5px;
 97 |             display: none;
 98 |         }
 99 |         .feedback.correct {
100 |             background-color: #d4edda;
101 |             color: #155724;
102 |         }
103 |         .feedback.incorrect {
104 |             background-color: #f8d7da;
105 |             color: #721c24;
106 |         }
107 |         .dns-animation, .http-animation {
108 |             display: none;
109 |             position: absolute;
110 |             width: 100%;
111 |             height: 100%;
112 |         }
113 |         .active-animation {
114 |             display: block;
115 |         }
116 |         .browser-engines {
117 |             display: grid;
118 |             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
119 |             gap: 15px;
120 |             margin: 15px 0;
121 |         }
122 |         .engine-card {
123 |             border: 1px solid #ddd;
124 |             padding: 10px;
125 |             border-radius: 5px;
126 |             text-align: center;
127 |         }
128 |         .devtools-demo {
129 |             border: 1px solid #ddd;
130 |             padding: 15px;
131 |             margin: 15px 0;
132 |             border-radius: 5px;
133 |             background-color: #f8f9fa;
134 |         }
135 |         .devtools-section {
136 |             margin: 10px 0;
137 |         }
138 |         .compatibility-table {
139 |             width: 100%;
140 |             border-collapse: collapse;
141 |             margin: 15px 0;
142 |         }
143 |         .compatibility-table th, .compatibility-table td {
144 |             border: 1px solid #ddd;
145 |             padding: 8px;
146 |             text-align: left;
147 |         }
148 |         .compatibility-table th {
149 |             background-color: #f8f9fa;
150 |         }
151 |     </style>
152 | </head>
153 | <body>
154 |     <div class="container">
155 |         <div class="language-toggle">
156 |             <button onclick="toggleLanguage()">English/اردو</button>
157 |         </div>
158 | 
159 |         <h1 id="title">Internet Concepts (انٹرنیٹ کے بنیادی تصورات)</h1>
160 | 
161 |         <div class="progress-bar">
162 |             <div class="progress-fill" id="progressBar" style="width: 0%"></div>
163 |         </div>
164 | 
165 |         <div class="concept-card" id="dns-section">
166 |             <div class="concept-title" id="dns-title">DNS (Domain Name System)</div>
167 |             <div class="concept-content" id="dns-content">
168 |                 The Domain Name System (DNS) is like a phone book for the internet. It converts website names into IP addresses.
169 |             </div>
170 |             <div class="interactive-demo">
171 |                 <div class="animation-container">
172 |                     <div class="dns-animation active-animation" id="dns-animation">
173 |                         <!-- DNS animation will be added via JavaScript -->
174 |                     </div>
175 |                 </div>
176 |                 <button onclick="demonstrateDNS()" id="dns-demo-btn">Show DNS Process</button>
177 |             </div>
178 |         </div>
179 | 
180 |         <div class="concept-card" id="http-section">
181 |             <div class="concept-title" id="http-title">HTTP/HTTPS</div>
182 |             <div class="concept-content" id="http-content">
183 |                 HTTP (Hypertext Transfer Protocol) is how web browsers and servers communicate. HTTPS adds security through encryption.
184 |             </div>
185 |             <div class="interactive-demo">
186 |                 <div class="animation-container">
187 |                     <div class="http-animation" id="http-animation">
188 |                         <!-- HTTP/HTTPS animation will be added via JavaScript -->
189 |                     </div>
190 |                 </div>
191 |                 <button onclick="demonstrateHTTP()" id="http-demo-btn">Show HTTP vs HTTPS</button>
192 |             </div>
193 |         </div>
194 | 
195 |         <div class="concept-card" id="client-server-section">
196 |             <div class="concept-title" id="client-server-title">Client-Server Architecture</div>
197 |             <div class="concept-content" id="client-server-content">
198 |                 The internet works on a client-server model. Your device (client) requests information from servers that host websites and services.
199 |             </div>
200 |             <div class="interactive-demo">
201 |                 <div class="animation-container">
202 |                     <div id="client-server-animation">
203 |                         <!-- Client-Server animation will be added via JavaScript -->
204 |                     </div>
205 |                 </div>
206 |                 <button onclick="demonstrateClientServer()" id="client-server-btn">Show Client-Server Process</button>
207 |             </div>
208 |         </div>
209 | 
210 |         <div class="concept-card" id="browser-section">
211 |             <div class="concept-title" id="browser-title">Web Browsers</div>
212 |             <div class="concept-content" id="browser-content">
213 |                 Web browsers are programs that let you access websites. They use different engines to display web content.
214 |             </div>
215 |             
216 |             <h3>Browser Engines</h3>
217 |             <div class="browser-engines" id="browser-engines">
218 |                 <!-- Browser engines will be populated via JavaScript -->
219 |             </div>
220 | 
221 |             <h3>Developer Tools</h3>
222 |             <div class="devtools-demo">
223 |                 <div class="devtools-section">
224 |                     <h4>Elements Panel</h4>
225 |                     <p>Inspect and modify HTML/CSS</p>
226 |                 </div>
227 |                 <div class="devtools-section">
228 |                     <h4>Console</h4>
229 |                     <p>JavaScript debugging and messages</p>
230 |                 </div>
231 |                 <div class="devtools-section">
232 |                     <h4>Network</h4>
233 |                     <p>Monitor web requests and performance</p>
234 |                 </div>
235 |             </div>
236 | 
237 |             <h3>Cross-browser Compatibility</h3>
238 |             <table class="compatibility-table">
239 |                 <tr>
240 |                     <th>Feature</th>
241 |                     <th>Chrome</th>
242 |                     <th>Firefox</th>
243 |                     <th>Safari</th>
244 |                 </tr>
245 |                 <tr>
246 |                     <td>HTML5</td>
247 |                     <td>✅</td>
248 |                     <td>✅</td>
249 |                     <td>✅</td>
250 |                 </tr>
251 |                 <tr>
252 |                     <td>CSS Grid</td>
253 |                     <td>✅</td>
254 |                     <td>✅</td>
255 |                     <td>✅</td>
256 |                 </tr>
257 |                 <tr>
258 |                     <td>WebP Images</td>
259 |                     <td>✅</td>
260 |                     <td>✅</td>
261 |                     <td>✅</td>
262 |                 </tr>
263 |             </table>
264 | 
265 |             <div class="quiz-container">
266 |                 <div id="browser-quiz"></div>
267 |                 <div class="feedback" id="quiz-feedback"></div>
268 |             </div>
269 |         </div>
270 |     </div>
271 | 
272 |     <script>
273 |         let isEnglish = true;
274 |         let currentProgress = 0;
275 |         const sectionCompletion = {
276 |             dns: false,
277 |             http: false,
278 |             clientServer: false,
279 |             browser: false
280 |         };
281 | 
282 |         const content = {
283 |             en: {
284 |                 title: "Internet Concepts (انٹرنیٹ کے بنیادی تصورات)",
285 |                 dns: {
286 |                     title: "DNS (Domain Name System)",
287 |                     content: "The Domain Name System (DNS) is like a phone book for the internet. It converts website names into IP addresses.",
288 |                     demoButton: "Show DNS Process"
289 |                 },
290 |                 http: {
291 |                     title: "HTTP/HTTPS",
292 |                     content: "HTTP (Hypertext Transfer Protocol) is how web browsers and servers communicate. HTTPS adds security through encryption.",
293 |                     demoButton: "Show HTTP vs HTTPS"
294 |                 },
295 |                 clientServer: {
296 |                     title: "Client-Server Architecture",
297 |                     content: "The internet works on a client-server model. Your device (client) requests information from servers that host websites and services.",
298 |                     demoButton: "Show Client-Server Process"
299 |                 },
300 |                 browser: {
301 |                     title: "Web Browsers",
302 |                     content: "Web browsers are programs that let you access websites. They use different engines to display web content.",
303 |                     engines: [
304 |                         { name: "Chromium (Blink)", browsers: "Chrome, Edge, Opera" },
305 |                         { name: "Gecko", browsers: "Firefox" },
306 |                         { name: "WebKit", browsers: "Safari" }
307 |                     ],
308 |                     quiz: {
309 |                         question: "Which tool would you use to inspect HTML elements?",
310 |                         options: [
311 |                             "Network Panel",
312 |                             "Elements Panel",
313 |                             "Console Panel",
314 |                             "Performance Panel"
315 |                         ],
316 |                         correctIndex: 1,
317 |                         feedback: {
318 |                             correct: "Correct! The Elements panel is used to inspect and modify HTML/CSS.",
319 |                             incorrect: "Try again! Elements panel is the right tool for inspecting HTML."
320 |                         }
321 |                     }
322 |                 }
323 |             },
324 |             ur: {
325 |                 title: "انٹرنیٹ کے بنیادی تصورات",
326 |                 dns: {
327 |                     title: "ڈی این ایس (ڈومین نیم سسٹم)",
328 |                     content: "ڈومین نیم سسٹم انٹرنیٹ کے لیے فون بک کی طرح ہے۔ یہ ویب سائٹ کے ناموں کو آئی پی ایڈریس میں تبدیل کرتا ہے۔",
329 |                     demoButton: "ڈی این ایس کا عمل دکھائیں"
330 |                 },
331 |                 http: {
332 |                     title: "ایچ ٹی ٹی پی/ایچ ٹی ٹی پی ایس",
333 |                     content: "ایچ ٹی ٹی پی وہ طریقہ ہے جس سے ویب براؤزر اور سرور بات چیت کرتے ہیں۔ ایچ ٹی ٹی پی ایس انکرپشن کے ذریعے سیکیورٹی شامل کرتا ہے۔",
334 |                     demoButton: "ایچ ٹی ٹی پی بمقابلہ ایچ ٹی ٹی پی ایس"
335 |                 },
336 |                 clientServer: {
337 |                     title: "کلائنٹ-سرور آرکیٹیکچر",
338 |                     content: "انٹرنیٹ کلائنٹ-سرور ماڈل پر کام کرتا ہے۔ آپ کا آلہ (کلائنٹ) ویب سائٹس اور سروسز کی میزبانی کرنے والے سرورز سے معلومات کی درخواست کرتا ہے۔",
339 |                     demoButton: "کلائنٹ-سرور کا عمل دکھائیں"
340 |                 },
341 |                 browser: {
342 |                     title: "ویب براؤزرز",
343 |                     content: "ویب براؤزرز وہ پروگرام ہیں جو آپ کو ویب سائٹس تک رسائی دیتے ہیں۔ وہ ویب مواد دکھانے کے لیے مختلف انجن استعمال کرتے ہیں۔",
344 |                     engines: [
345 |                         { name: "کرومیم (بلنک)", browsers: "کروم، ایج، اوپیرا" },
346 |                         { name: "جیکو", browsers: "فائر فاکس" },
347 |                         { name: "ویب کٹ", browsers: "سفاری" }
348 |                     ],
349 |                     quiz: {
350 |                         question: "HTML عناصر کی جانچ کے لیے آپ کون سا ٹول استعمال کریں گے؟",
351 |                         options: [
352 |                             "نیٹ ورک پینل",
353 |                             "ایلیمنٹس پینل",
354 |                             "کنسول پینل",
355 |                             "پرفارمنس پینل"
356 |                         ],
357 |                         correctIndex: 1,
358 |                         feedback: {
359 |                             correct: "درست! ایلیمنٹس پینل HTML/CSS کی جانچ اور ترمیم کے لیے استعمال ہوتا ہے۔",
360 |                             incorrect: "دوبارہ کوشش کریں! HTML کی جانچ کے لیے ایلیمنٹس پینل درست ٹول ہے۔"
361 |                         }
362 |                     }
363 |                 }
364 |             }
365 |         };
366 | 
367 |         function toggleLanguage() {
368 |             isEnglish = !isEnglish;
369 |             updateContent();
370 |         }
371 | 
372 |         function updateContent() {
373 |             const lang = isEnglish ? content.en : content.ur;
374 |             
375 |             document.getElementById('title').innerHTML = lang.title;
376 |             
377 |             // Update DNS section
378 |             document.getElementById('dns-title').textContent = lang.dns.title;
379 |             document.getElementById('dns-content').textContent = lang.dns.content;
380 |             document.getElementById('dns-demo-btn').textContent = lang.dns.demoButton;
381 |             
382 |             // Update HTTP section
383 |             document.getElementById('http-title').textContent = lang.http.title;
384 |             document.getElementById('http-content').textContent = lang.http.content;
385 |             document.getElementById('http-demo-btn').textContent = lang.http.demoButton;
386 |             
387 |             // Update Client-Server section
388 |             document.getElementById('client-server-title').textContent = lang.clientServer.title;
389 |             document.getElementById('client-server-content').textContent = lang.clientServer.content;
390 |             document.getElementById('client-server-btn').textContent = lang.clientServer.demoButton;
391 |             
392 |             // Update Browser section
393 |             document.getElementById('browser-title').textContent = lang.browser.title;
394 |             document.getElementById('browser-content').textContent = lang.browser.content;
395 |             
396 |             // Update Browser Engines
397 |             const enginesContainer = document.getElementById('browser-engines');
398 |             enginesContainer.innerHTML = lang.browser.engines.map(engine => `
399 |                 <div class="engine-card">
400 |                     <h4>${engine.name}</h4>
401 |                     <p>${engine.browsers}</p>
402 |                 </div>
403 |             `).join('');
404 |             
405 |             // Update quiz
406 |             updateQuiz();
407 |         }
408 | 
409 |         function updateQuiz() {
410 |             const quiz = isEnglish ? content.en.browser.quiz : content.ur.browser.quiz;
411 |             const quizContainer = document.getElementById('browser-quiz');
412 |             quizContainer.innerHTML = `
413 |                 <h3>${quiz.question}</h3>
414 |                 ${quiz.options.map((option, index) => `
415 |                     <div class="quiz-option" onclick="checkAnswer(${index})">${option}</div>
416 |                 `).join('')}
417 |             `;
418 |         }
419 | 
420 |         function checkAnswer(index) {
421 |             const quiz = isEnglish ? content.en.browser.quiz : content.ur.browser.quiz;
422 |             const feedback = document.getElementById('quiz-feedback');
423 |             
424 |             if (index === quiz.correctIndex) {
425 |                 feedback.textContent = quiz.feedback.correct;
426 |                 feedback.className = 'feedback correct';
427 |                 if (!sectionCompletion.browser) {
428 |                     sectionCompletion.browser = true;
429 |                     updateProgress();
430 |                 }
431 |             } else {
432 |                 feedback.textContent = quiz.feedback.incorrect;
433 |                 feedback.className = 'feedback incorrect';
434 |             }
435 |             feedback.style.display = 'block';
436 |         }
437 | 
438 |         function demonstrateDNS() {
439 |             const animation = document.getElementById('dns-animation');
440 |             animation.innerHTML = `
441 |                 <div style="text-align: center; padding: 20px;">
442 |                     <div style="margin: 10px;">Step 1: You type www.example.com 🖥️</div>
443 |                     <div style="margin: 10px;">⬇️</div>
444 |                     <div style="margin: 10px;">Step 2: Browser asks DNS Server 🔍</div>
445 |                     <div style="margin: 10px;">⬇️</div>
446 |                     <div style="margin: 10px;">Step 3: DNS Server responds with IP: 93.184.216.34 📍</div>
447 |                     <div style="margin: 10px;">⬇️</div>
448 |                     <div style="margin: 10px;">Step 4: Browser connects to the IP address ✅</div>
449 |                 </div>
450 |             `;
451 |             if (!sectionCompletion.dns) {
452 |                 sectionCompletion.dns = true;
453 |                 updateProgress();
454 |             }
455 |         }
456 | 
457 |         function demonstrateHTTP() {
458 |             const animation = document.getElementById('http-animation');
459 |             animation.innerHTML = `
460 |                 <div style="text-align: center; padding: 20px;">
461 |                     <div style="margin: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
462 |                         <strong>HTTP (Unsecure)</strong><br>
463 |                         Browser 📱 ⟷ Anyone can see data ⟷ Server 🖥️
464 |                     </div>
465 |                     <div style="margin: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #e8f5e9;">
466 |                         <strong>HTTPS (Secure)</strong><br>
467 |                         Browser 📱 🔒 Encrypted data 🔒 Server 🖥️
468 |                     </div>
469 |                 </div>
470 |             `;
471 |             animation.style.display = 'block';
472 |             if (!sectionCompletion.http) {
473 |                 sectionCompletion.http = true;
474 |                 updateProgress();
475 |             }
476 |         }
477 | 
478 |         function demonstrateClientServer() {
479 |             const animation = document.getElementById('client-server-animation');
480 |             animation.innerHTML = `
481 |                 <div style="text-align: center; padding: 20px;">
482 |                     <div style="margin: 10px;">
483 |                         <strong>Client (Your Device)</strong> 📱
484 |                         <ul style="list-style: none; padding: 0;">
485 |                             <li>• Sends requests</li>
486 |                             <li>• Displays content</li>
487 |                             <li>• Stores cookies</li>
488 |                         </ul>
489 |                     </div>
490 |                     <div style="margin: 10px;">⟷ Internet ☁️ ⟷</div>
491 |                     <div style="margin: 10px;">
492 |                         <strong>Server</strong> 🖥️
493 |                         <ul style="list-style: none; padding: 0;">
494 |                             <li>• Processes requests</li>
495 |                             <li>• Stores data</li>
496 |                             <li>• Sends responses</li>
497 |                         </ul>
498 |                     </div>
499 |                 </div>
500 |             `;
501 |             animation.style.display = 'block';
502 |             if (!sectionCompletion.clientServer) {
503 |                 sectionCompletion.clientServer = true;
504 |                 updateProgress();
505 |             }
506 |         }
507 | 
508 |         function updateProgress() {
509 |             const completedSections = Object.values(sectionCompletion).filter(Boolean).length;
510 |             const totalSections = Object.keys(sectionCompletion).length;
511 |             currentProgress = (completedSections / totalSections) * 100;
512 |             document.getElementById('progressBar').style.width = `${currentProgress}%`;
513 |         }
514 | 
515 |         // Initial setup
516 |         updateContent();
517 |     </script>
518 | </body>
519 | </html> 


--------------------------------------------------------------------------------