Spaces:
Running
Running
| <!DOCTYPE html> | |
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact | mzn.tr</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light text-dark dark:bg-dark dark:text-light"> | |
| <?php | |
| // Initialize variables | |
| $name = $email = $message = ''; | |
| $success = false; | |
| // Create database if not exists | |
| if (!file_exists('contacts.db')) { | |
| $db = new SQLite3('contacts.db'); | |
| $db->exec('CREATE TABLE contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT, message TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)'); | |
| } else { | |
| $db = new SQLite3('contacts.db'); | |
| } | |
| // Handle form submission | |
| if ($_SERVER['REQUEST_METHOD'] === 'POST') { | |
| $name = trim($_POST['name']); | |
| $email = trim($_POST['email']); | |
| $message = trim($_POST['message']); | |
| if (!empty($name) && !empty($email) && !empty($message) && filter_var($email, FILTER_VALIDATE_EMAIL)) { | |
| $stmt = $db->prepare('INSERT INTO contacts (name, email, message) VALUES (:name, :email, :message)'); | |
| $stmt->bindValue(':name', $name, SQLITE3_TEXT); | |
| $stmt->bindValue(':email', $email, SQLITE3_TEXT); | |
| $stmt->bindValue(':message', $message, SQLITE3_TEXT); | |
| if ($stmt->execute()) { | |
| $success = true; | |
| $name = $email = $message = ''; // Clear form on success | |
| } | |
| } | |
| } | |
| <!-- Navigation (same as index.html) --> | |
| <nav class="fixed w-full z-50 bg-white/80 dark:bg-dark/80 backdrop-blur-md shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-xl font-bold text-primary">mzn.tr</a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="index.html#home" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">Home</a> | |
| <a href="index.html#projects" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">Projects</a> | |
| <a href="index.html#about" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">About</a> | |
| <a href="contact.php" class="px-3 py-2 rounded-md text-sm font-medium text-primary font-bold">Contact</a> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Contact Form Section --> | |
| <section class="min-h-screen flex items-center justify-center pt-20"> | |
| <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8"> | |
| <h2 class="text-3xl font-bold mb-6 text-center">Contact <span class="text-primary">Me</span></h2> | |
| <?php if ($success): ?> | |
| <div class="mb-6 p-4 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-lg"> | |
| Thank you for your message! I'll get back to you soon. | |
| </div> | |
| <?php endif; ?> | |
| <form method="POST" action="contact.php" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">Your Name</label> | |
| <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($name); ?>" | |
| class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-primary focus:border-primary bg-white dark:bg-gray-700" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">Email Address</label> | |
| <input type="email" id="email" name="email" value="<?php echo htmlspecialchars($email); ?>" | |
| class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-primary focus:border-primary bg-white dark:bg-gray-700" required> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 font-medium">Your Message</label> | |
| <textarea id="message" name="message" rows="6" | |
| class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-primary focus:border-primary bg-white dark:bg-gray-700" required><?php echo htmlspecialchars($message); ?></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition font-medium"> | |
| Send Message | |
| </button> | |
| </form> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-600 dark:text-gray-300">Or reach me directly at <a href="mailto:contact@mzn.tr" class="text-primary hover:underline">contact@mzn.tr</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Theme toggle functionality | |
| document.getElementById('theme-toggle').addEventListener('click', function() { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |