ctrlplus-zai commited on
Commit
0e7b110
·
verified ·
1 Parent(s): 5b3abad

do these php tasks in different php files but add a home page to call them (index.php). use tailwindcss (using cdn) and google fonts: cairo play and sharetech mono. make the UI dark and as minimalist as possible. use macos inspired assets like buttons and images:

Browse files

1. Introduce Yourself
   Task: Create variables for your name, age, and favorite color. Print them in a sentence (e.g., “Hi, I’m John, I am 20 years old, and my favorite color is blue.”).


2. Simple Math
   Task: Store two numbers in variables `$a` and `$b`. Compute and display their sum, difference, product, and quotient.


3. Area and Perimeter of a Rectangle
   Task: Use variables `$length` and `$width`. Calculate and display the area and perimeter.


4. Temperature Converter
   Task: Store a Celsius temperature in a variable and convert it to Fahrenheit using the formula.


5. Swapping Variables
   Task: Assign values to two variables and swap them without directly reassigning values*(use a temporary variable).


6. Salary Calculator
   Task: Store `basic_salary`, `allowance`, and `deduction` in variables. Compute and display the net salary.


7. BMI Calculator
   Task: Store `weight` (kg) and `height` (m) in variables. Compute BMI using the formula `BMI = weight / (height height)`. Display the result.


8. String Manipulation
   Task: Store a sentence in a variable. Display:
     number of characters (`strlen`)
     number of words (`str_word_count`)
     the sentence in uppercase and lowercase.


9. Bank Account Simulation
   Task: Create variables for `balance`, `deposit`, and `withdraw`. Update the balance based on transactions and display the result.


10. Simple Grading System
   Task: Store scores for Math, English, and Science in variables. Compute the average and display the grade based on conditions (e.g., >=90 = A, >=80 = B, etc.).


11. Currency Converter
   Task: Store an amount in PHP and convert it to USD, EUR, or JPY using variables for exchange rates.


12. Travel Cost Estimator
   Task: Use variables for `distance`, `fuel_consumption` (km per liter), and `fuel_price`. Compute and display the estimated travel cost.

Files changed (4) hide show
  1. README.md +8 -5
  2. index.php +203 -0
  3. intro.php +93 -0
  4. math.php +151 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecraft Macos Dark Suite
3
- emoji: 😻
4
- colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeCraft MacOS Dark Suite 🖥️
3
+ colorFrom: purple
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.php ADDED
@@ -0,0 +1,203 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CodeCraft MacOS Suite</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Cairo+Play:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Share Tech Mono', monospace;
12
+ background-color: #121212;
13
+ color: #e0e0e0;
14
+ }
15
+ .window {
16
+ background-color: #1e1e1e;
17
+ border-radius: 12px;
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
19
+ border: 1px solid #333;
20
+ }
21
+ .window-header {
22
+ background: linear-gradient(to bottom, #2d2d2d, #252525);
23
+ border-top-left-radius: 12px;
24
+ border-top-right-radius: 12px;
25
+ padding: 8px 12px;
26
+ border-bottom: 1px solid #333;
27
+ }
28
+ .window-controls {
29
+ display: flex;
30
+ gap: 8px;
31
+ }
32
+ .control-btn {
33
+ width: 12px;
34
+ height: 12px;
35
+ border-radius: 50%;
36
+ }
37
+ .close-btn { background-color: #ff5f56; }
38
+ .minimize-btn { background-color: #ffbd2e; }
39
+ .maximize-btn { background-color: #27c93f; }
40
+ .menu-item {
41
+ transition: all 0.2s;
42
+ border-radius: 6px;
43
+ }
44
+ .menu-item:hover {
45
+ background-color: #333;
46
+ }
47
+ .grid-item {
48
+ transition: all 0.2s;
49
+ border-radius: 8px;
50
+ }
51
+ .grid-item:hover {
52
+ transform: translateY(-2px);
53
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="min-h-screen flex flex-col items-center justify-center p-4">
58
+ <div class="window w-full max-w-4xl">
59
+ <div class="window-header flex items-center justify-between">
60
+ <div class="window-controls">
61
+ <div class="control-btn close-btn"></div>
62
+ <div class="control-btn minimize-btn"></div>
63
+ <div class="control-btn maximize-btn"></div>
64
+ </div>
65
+ <div class="text-xs font-medium" style="font-family: 'Cairo Play', sans-serif;">
66
+ CodeCraft MacOS Suite
67
+ </div>
68
+ <div class="w-12"></div>
69
+ </div>
70
+
71
+ <div class="p-1 flex border-b border-gray-700">
72
+ <div class="menu-item px-3 py-1 text-sm">File</div>
73
+ <div class="menu-item px-3 py-1 text-sm">Edit</div>
74
+ <div class="menu-item px-3 py-1 text-sm">View</div>
75
+ <div class="menu-item px-3 py-1 text-sm">Help</div>
76
+ </div>
77
+
78
+ <div class="p-6">
79
+ <h1 class="text-2xl font-bold mb-6" style="font-family: 'Cairo Play', sans-serif;">Select a Task</h1>
80
+
81
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
82
+ <!-- Task 1 -->
83
+ <a href="intro.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
84
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
85
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
86
+ </div>
87
+ <h3 class="font-medium">Introduce Yourself</h3>
88
+ <p class="text-xs text-gray-400 mt-1">Variables and printing</p>
89
+ </a>
90
+
91
+ <!-- Task 2 -->
92
+ <a href="math.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
93
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
94
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calculator"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><line x1="8" y1="6" x2="16" y2="6"></line><line x1="8" y1="12" x2="16" y2="12"></line><line x1="8" y1="18" x2="16" y2="18"></line><line x1="12" y1="8" x2="12" y2="16"></line></svg>
95
+ </div>
96
+ <h3 class="font-medium">Simple Math</h3>
97
+ <p class="text-xs text-gray-400 mt-1">Basic operations</p>
98
+ </a>
99
+
100
+ <!-- Task 3 -->
101
+ <a href="rectangle.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
102
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
103
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
104
+ </div>
105
+ <h3 class="font-medium">Rectangle Calculations</h3>
106
+ <p class="text-xs text-gray-400 mt-1">Area and perimeter</p>
107
+ </a>
108
+
109
+ <!-- Task 4 -->
110
+ <a href="temperature.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
111
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
112
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thermometer"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"></path></svg>
113
+ </div>
114
+ <h3 class="font-medium">Temperature Converter</h3>
115
+ <p class="text-xs text-gray-400 mt-1">Celsius to Fahrenheit</p>
116
+ </a>
117
+
118
+ <!-- Task 5 -->
119
+ <a href="swap.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
120
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
121
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
122
+ </div>
123
+ <h3 class="font-medium">Variable Swapping</h3>
124
+ <p class="text-xs text-gray-400 mt-1">Using temporary variables</p>
125
+ </a>
126
+
127
+ <!-- Task 6 -->
128
+ <a href="salary.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
129
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
130
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
131
+ </div>
132
+ <h3 class="font-medium">Salary Calculator</h3>
133
+ <p class="text-xs text-gray-400 mt-1">Net salary computation</p>
134
+ </a>
135
+
136
+ <!-- Task 7 -->
137
+ <a href="bmi.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
138
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
139
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
140
+ </div>
141
+ <h3 class="font-medium">BMI Calculator</h3>
142
+ <p class="text-xs text-gray-400 mt-1">Body Mass Index</p>
143
+ </a>
144
+
145
+ <!-- Task 8 -->
146
+ <a href="string.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
147
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
148
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
149
+ </div>
150
+ <h3 class="font-medium">String Manipulation</h3>
151
+ <p class="text-xs text-gray-400 mt-1">Text transformations</p>
152
+ </a>
153
+
154
+ <!-- Task 9 -->
155
+ <a href="bank.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
156
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
157
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
158
+ </div>
159
+ <h3 class="font-medium">Bank Account</h3>
160
+ <p class="text-xs text-gray-400 mt-1">Balance simulation</p>
161
+ </a>
162
+
163
+ <!-- Task 10 -->
164
+ <a href="grades.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
165
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
166
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-award"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>
167
+ </div>
168
+ <h3 class="font-medium">Grading System</h3>
169
+ <p class="text-xs text-gray-400 mt-1">Score evaluation</p>
170
+ </a>
171
+
172
+ <!-- Task 11 -->
173
+ <a href="currency.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
174
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
175
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
176
+ </div>
177
+ <h3 class="font-medium">Currency Converter</h3>
178
+ <p class="text-xs text-gray-400 mt-1">PHP to other currencies</p>
179
+ </a>
180
+
181
+ <!-- Task 12 -->
182
+ <a href="travel.php" class="grid-item bg-gray-800 p-4 flex flex-col items-center text-center">
183
+ <div class="w-12 h-12 bg-gray-700 rounded-full mb-3 flex items-center justify-center">
184
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
185
+ </div>
186
+ <h3 class="font-medium">Travel Cost</h3>
187
+ <p class="text-xs text-gray-400 mt-1">Fuel estimation</p>
188
+ </a>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="p-3 border-t border-gray-700 text-xs text-gray-400 flex justify-between items-center">
193
+ <div>CodeCraft MacOS Suite v1.0</div>
194
+ <div>12 tasks available</div>
195
+ </div>
196
+ </div>
197
+
198
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
199
+ <script>
200
+ feather.replace();
201
+ </script>
202
+ </body>
203
+ </html>
intro.php ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Introduce Yourself</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Cairo+Play:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Share Tech Mono', monospace;
12
+ background-color: #121212;
13
+ color: #e0e0e0;
14
+ }
15
+ .window {
16
+ background-color: #1e1e1e;
17
+ border-radius: 12px;
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
19
+ border: 1px solid #333;
20
+ max-width: 600px;
21
+ margin: 2rem auto;
22
+ }
23
+ .window-header {
24
+ background: linear-gradient(to bottom, #2d2d2d, #252525);
25
+ border-top-left-radius: 12px;
26
+ border-top-right-radius: 12px;
27
+ padding: 8px 12px;
28
+ border-bottom: 1px solid #333;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body>
33
+ <div class="window">
34
+ <div class="window-header flex items-center justify-between">
35
+ <div class="flex items-center space-x-2">
36
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
37
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
38
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
39
+ </div>
40
+ <div class="text-xs" style="font-family: 'Cairo Play', sans-serif;">Introduce Yourself</div>
41
+ <div class="w-12"></div>
42
+ </div>
43
+
44
+ <div class="p-6">
45
+ <h1 class="text-xl font-bold mb-4" style="font-family: 'Cairo Play', sans-serif;">Personal Introduction</h1>
46
+
47
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
48
+ <div class="flex items-center mb-3">
49
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">
50
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
51
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
52
+ <circle cx="12" cy="7" r="4"></circle>
53
+ </svg>
54
+ </div>
55
+ <div>
56
+ <h3 class="font-medium">User Profile</h3>
57
+ <p class="text-xs text-gray-400">PHP Variables Demo</p>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="pl-13">
62
+ <p class="text-gray-300 mb-2"><?php echo "Hi, I'm $name, I am $age years old, and my favorite color is $color."; ?></p>
63
+
64
+ <div class="grid grid-cols-2 gap-2 mt-4 text-xs">
65
+ <div class="bg-gray-700 p-2 rounded">
66
+ <div class="text-gray-400">Name</div>
67
+ <div><?php echo $name; ?></div>
68
+ </div>
69
+ <div class="bg-gray-700 p-2 rounded">
70
+ <div class="text-gray-400">Age</div>
71
+ <div><?php echo $age; ?></div>
72
+ </div>
73
+ <div class="bg-gray-700 p-2 rounded col-span-2">
74
+ <div class="text-gray-400">Favorite Color</div>
75
+ <div><?php echo $color; ?></div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="flex justify-between items-center border-t border-gray-700 pt-4">
82
+ <a href="index.php" class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
83
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
84
+ <polyline points="15 18 9 12 15 6"></polyline>
85
+ </svg>
86
+ Back to Tasks
87
+ </a>
88
+ <div class="text-xs text-gray-500">Task 1 of 12</div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </body>
93
+ </html>
math.php ADDED
@@ -0,0 +1,151 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Simple Math</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Cairo+Play:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Share Tech Mono', monospace;
12
+ background-color: #121212;
13
+ color: #e0e0e0;
14
+ }
15
+ .window {
16
+ background-color: #1e1e1e;
17
+ border-radius: 12px;
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
19
+ border: 1px solid #333;
20
+ max-width: 600px;
21
+ margin: 2rem auto;
22
+ }
23
+ .window-header {
24
+ background: linear-gradient(to bottom, #2d2d2d, #252525);
25
+ border-top-left-radius: 12px;
26
+ border-top-right-radius: 12px;
27
+ padding: 8px 12px;
28
+ border-bottom: 1px solid #333;
29
+ }
30
+ .operation-icon {
31
+ width: 32px;
32
+ height: 32px;
33
+ background-color: #333;
34
+ border-radius: 6px;
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <div class="window">
43
+ <div class="window-header flex items-center justify-between">
44
+ <div class="flex items-center space-x-2">
45
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
46
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
47
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
48
+ </div>
49
+ <div class="text-xs" style="font-family: 'Cairo Play', sans-serif;">Simple Math Operations</div>
50
+ <div class="w-12"></div>
51
+ </div>
52
+
53
+ <div class="p-6">
54
+ <h1 class="text-xl font-bold mb-4" style="font-family: 'Cairo Play', sans-serif;">Basic Arithmetic</h1>
55
+
56
+ <div class="grid grid-cols-2 gap-4 mb-6">
57
+ <div class="bg-gray-800 rounded-lg p-4">
58
+ <div class="flex items-center mb-2">
59
+ <div class="operation-icon mr-2">
60
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
61
+ <line x1="5" y1="12" x2="19" y2="12"></line>
62
+ <line x1="12" y1="5" x2="12" y2="19"></line>
63
+ </svg>
64
+ </div>
65
+ <div>
66
+ <h3 class="font-medium">Addition</h3>
67
+ </div>
68
+ </div>
69
+ <p class="text-gray-300"><?php echo "$a + $b = $sum"; ?></p>
70
+ </div>
71
+
72
+ <div class="bg-gray-800 rounded-lg p-4">
73
+ <div class="flex items-center mb-2">
74
+ <div class="operation-icon mr-2">
75
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
76
+ <line x1="5" y1="12" x2="19" y2="12"></line>
77
+ </svg>
78
+ </div>
79
+ <div>
80
+ <h3 class="font-medium">Subtraction</h3>
81
+ </div>
82
+ </div>
83
+ <p class="text-gray-300"><?php echo "$a - $b = $difference"; ?></p>
84
+ </div>
85
+
86
+ <div class="bg-gray-800 rounded-lg p-4">
87
+ <div class="flex items-center mb-2">
88
+ <div class="operation-icon mr-2">
89
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
90
+ <line x1="4" y1="12" x2="20" y2="12"></line>
91
+ <line x1="12" y1="4" x2="12" y2="20"></line>
92
+ </svg>
93
+ </div>
94
+ <div>
95
+ <h3 class="font-medium">Multiplication</h3>
96
+ </div>
97
+ </div>
98
+ <p class="text-gray-300"><?php echo "$a × $b = $product"; ?></p>
99
+ </div>
100
+
101
+ <div class="bg-gray-800 rounded-lg p-4">
102
+ <div class="flex items-center mb-2">
103
+ <div class="operation-icon mr-2">
104
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
105
+ <circle cx="12" cy="12" r="10"></circle>
106
+ <line x1="8" y1="12" x2="16" y2="12"></line>
107
+ <line x1="12" y1="8" x2="12" y2="16"></line>
108
+ </svg>
109
+ </div>
110
+ <div>
111
+ <h3 class="font-medium">Division</h3>
112
+ </div>
113
+ </div>
114
+ <p class="text-gray-300"><?php echo "$a ÷ $b = " . number_format($quotient, 2); ?></p>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
119
+ <h3 class="font-medium mb-2">Variables Used</h3>
120
+ <div class="grid grid-cols-3 gap-2 text-sm">
121
+ <div class="bg-gray-700 p-2 rounded">
122
+ <div class="text-gray-400">a</div>
123
+ <div><?php echo $a; ?></div>
124
+ </div>
125
+ <div class="bg-gray-700 p-2 rounded">
126
+ <div class="text-gray-400">b</div>
127
+ <div><?php echo $b; ?></div>
128
+ </div>
129
+ <div class="bg-gray-700 p-2 rounded">
130
+ <div class="text-gray-400">Type</div>
131
+ <div>Integer</div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="flex justify-between items-center border-t border-gray-700 pt-4">
137
+ <a href="index.php" class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
138
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
139
+ <polyline points="15 18 9 12 15 6"></polyline>
140
+ </svg>
141
+ Back to Tasks
142
+ </a>
143
+ <div class="text-xs text-gray-500">Task 2 of 12</div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </body>
148
+ </html>
149
+
150
+
151
+ [Additional PHP files for the remaining tasks would follow the same pattern with appropriate UI for each task...]