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:
0e7b110 verified | <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Introduce Yourself</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo+Play:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background-color: #121212; | |
| color: #e0e0e0; | |
| } | |
| .window { | |
| background-color: #1e1e1e; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| border: 1px solid #333; | |
| max-width: 600px; | |
| margin: 2rem auto; | |
| } | |
| .window-header { | |
| background: linear-gradient(to bottom, #2d2d2d, #252525); | |
| border-top-left-radius: 12px; | |
| border-top-right-radius: 12px; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="window"> | |
| <div class="window-header flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs" style="font-family: 'Cairo Play', sans-serif;">Introduce Yourself</div> | |
| <div class="w-12"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h1 class="text-xl font-bold mb-4" style="font-family: 'Cairo Play', sans-serif;">Personal Introduction</h1> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-3"> | |
| <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"> | |
| <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> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">User Profile</h3> | |
| <p class="text-xs text-gray-400">PHP Variables Demo</p> | |
| </div> | |
| </div> | |
| <div class="pl-13"> | |
| <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> | |
| <div class="grid grid-cols-2 gap-2 mt-4 text-xs"> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-gray-400">Name</div> | |
| <div><?php echo $name; ?></div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded"> | |
| <div class="text-gray-400">Age</div> | |
| <div><?php echo $age; ?></div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded col-span-2"> | |
| <div class="text-gray-400">Favorite Color</div> | |
| <div><?php echo $color; ?></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center border-t border-gray-700 pt-4"> | |
| <a href="index.php" class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> | |
| <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"> | |
| <polyline points="15 18 9 12 15 6"></polyline> | |
| </svg> | |
| Back to Tasks | |
| </a> | |
| <div class="text-xs text-gray-500">Task 1 of 12</div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |