tet

2025-09-24 12:20:18 +00:00
7 changed files with 271 additions and 83 deletions
--- a/assets/images/header.jpg
+++ b/assets/images/header.jpg
--- a/assets/images/portfolio/1166644.jpg
+++ b/assets/images/portfolio/1166644.jpg
--- a/assets/images/portfolio/2442888.jpg
+++ b/assets/images/portfolio/2442888.jpg
--- a/assets/images/portfolio/373543.jpg
+++ b/assets/images/portfolio/373543.jpg
--- a/assets/images/portfolio/5584052.jpg
+++ b/assets/images/portfolio/5584052.jpg
--- a/includes/pexels.php
+++ b/includes/pexels.php
@ -0,0 +1,25 @@
+<?php
+  function pexels_key() {
+    $k = getenv('PEXELS_KEY');
+    return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+  }
+  function pexels_get($url) {
+    $ch = curl_init();
+    curl_setopt_array($ch, [
+      CURLOPT_URL => $url,
+      CURLOPT_RETURNTRANSFER => true,
+      CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+      CURLOPT_TIMEOUT => 15,
+    ]);
+    $resp = curl_exec($ch);
+    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    curl_close($ch);
+    if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
+    return null;
+  }
+  function download_to($srcUrl, $destPath) {
+    $data = file_get_contents($srcUrl);
+    if ($data === false) return false;
+    if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
+    return file_put_contents($destPath, $data) !== false;
+  }
--- a/index.php
+++ b/index.php
@ -6,126 +6,289 @@ declare(strict_types=1);

 $phpVersion = PHP_VERSION;
 $now = date('Y-m-d H:i:s');
+
+$message_sent = false;
+$error_message = '';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    require_once __DIR__ . '/mail/MailService.php';
+    $name = trim($_POST['name'] ?? '');
+    $email = trim($_POST['email'] ?? '');
+    $message = trim($_POST['message'] ?? '');
+
+    if (empty($name) || empty($email) || empty($message)) {
+        $error_message = "Please fill in all fields.";
+    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $error_message = "Invalid email format.";
+    } else {
+        $to = getenv('MAIL_TO') ?: 'your-email@example.com';
+        $res = MailService::sendContactMessage($name, $email, $message, $to, 'Contact Form Submission');
+        if (!empty($res['success'])) {
+            $message_sent = true;
+        } else {
+            $error_message = "Failed to send message. " . ($res['error'] ?? '');
+        }
+    }
+}
 ?>
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+  <title>John Doe - Personal Portfolio</title>
+  <meta name="description" content="Welcome to the personal portfolio of John Doe. Explore my work, learn more about me, and get in touch.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
+      --bg-color: #f8f9fa;
+      --text-color: #212529;
+      --primary-color: #007bff;
+      --card-bg-color: #ffffff;
+      --card-border-color: #dee2e6;
+      --shadow-color: rgba(0, 0, 0, 0.1);
    }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
+      background-color: var(--bg-color);
      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
+      line-height: 1.6;
+    }
+    .container {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    header, section, footer {
+      padding: 4rem 0;
+    }
+    section:nth-child(even) {
+      background-color: var(--card-bg-color);
+    }
+    h1, h2, h3 {
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+    h1 { font-size: 3rem; }
+    h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; }
+    p { margin-bottom: 1rem; }
+    .btn {
+      display: inline-block;
+      background-color: var(--primary-color);
+      color: #fff;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      transition: background-color: 0.3s;
+    }
+    .btn:hover {
+      background-color: #0056b3;
+    }
+    #intro {
      text-align: center;
-      overflow: hidden;
+      background-image: url('assets/images/header.jpg');
+      background-size: cover;
+      background-position: center;
+      color: #fff;
      position: relative;
    }
-    body::before {
+    #intro::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
+    #intro .container {
+        position: relative;
+        z-index: 1;
    }
-    main {
-      padding: 2rem;
+    #portfolio {
+      background-image: url('assets/images/portfolio/2442888.jpg');
+      background-size: cover;
+      background-position: center;
+      color: #fff;
+      position: relative;
    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
+    #portfolio::before {
+      content: '';
      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
+    #portfolio .container {
+        position: relative;
+        z-index: 1;
    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
+    .portfolio-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 2rem;
    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    .portfolio-item {
+      background-color: var(--card-bg-color);
+      border: 1px solid var(--card-border-color);
+      border-radius: 8px;
+      box-shadow: 0 4px 12px var(--shadow-color);
+      transition: transform 0.3s;
+      color: var(--text-color);
+    }
+    .portfolio-item:hover {
+      transform: translateY(-5px);
+    }
+    .testimonial {
+      font-style: italic;
+      text-align: center;
+      max-width: 700px;
+      margin: 0 auto;
+    }
+    .contact-form {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+    .form-group input, .form-group textarea {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid var(--card-border-color);
+      border-radius: 8px;
+    }
+    .alert {
+      padding: 1rem;
+      margin-bottom: 1rem;
+      border-radius: 8px;
+    }
+    .alert-success {
+      background-color: #d4edda;
+      color: #155724;
+    }
+    .alert-danger {
+      background-color: #f8d7da;
+      color: #721c24;
    }
    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
+      text-align: center;
+      font-size: 0.9rem;
+      color: #6c757d;
+    }
+    @media (max-width: 768px) {
+      h1 { font-size: 2.5rem; }
+      h2 { font-size: 2rem; }
+      header, section { padding: 3rem 0; }
    }
  </style>
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWiZZy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+
+  <header id="intro">
+    <div class="container">
+      <h1>John Doe</h1>
+      <p>Creative Developer & Designer</p>
+      <a href="#contact" class="btn">Get in Touch</a>
    </div>
-  </main>
+  </header>
+
+  <section id="portfolio">
+    <div class="container">
+      <h2>Portfolio</h2>
+      <div class="portfolio-grid">
+        <?php
+        $portfolio_images_path = __DIR__ . '/portfolio_images.json';
+        $portfolio_images = [];
+        if (file_exists($portfolio_images_path)) {
+            $portfolio_images = json_decode(file_get_contents($portfolio_images_path), true);
+        }
+        
+        $projects = [
+            ["name" => "Project One", "description" => "A brief description of the project, its purpose, and the technologies used. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "image" => $portfolio_images[0] ?? 'https://picsum.photos/seed/project1/600/400'],
+            ["name" => "Project Two", "description" => "A brief description of the project, its purpose, and the technologies used. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "image" => $portfolio_images[1] ?? 'https://picsum.photos/seed/project2/600/400'],
+            ["name" => "Project Three", "description" => "A brief description of the project, its purpose, and the technologies used. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "image" => $portfolio_images[2] ?? 'https://picsum.photos/seed/project3/600/400']
+        ];
+
+        foreach ($projects as $project) {
+        ?>
+        <div class="portfolio-item">
+          <img src="<?= htmlspecialchars(str_replace('\\', '/', $project['image'])) ?>" alt="<?= htmlspecialchars($project['name']) ?>" style="width: 100%; height: auto; border-radius: 8px 8px 0 0;">
+          <div style="padding: 1.5rem;">
+            <h3><?= htmlspecialchars($project['name']) ?></h3>
+            <p><?= htmlspecialchars($project['description']) ?></p>
+          </div>
+        </div>
+        <?php } ?>
+      </div>
+    </div>
+  </section>
+
+
+
+  <section id="about">
+    <div class="container">
+      <h2>About Me</h2>
+      <p>Hello! I'm John Doe, a passionate developer with a love for creating beautiful and functional web experiences. I have a background in both design and development, allowing me to build projects from concept to completion. I'm always eager to learn new technologies and take on challenging projects.</p>
+    </div>
+  </section>
+
+  <section id="testimonials">
+    <div class="container">
+      <h2>Testimonials</h2>
+      <div class="testimonial">
+        <p>"Working with John was a fantastic experience. He is a true professional with a keen eye for detail. The final product exceeded all our expectations."</p>
+        <cite>- Jane Smith, CEO of ExampleCorp</cite>
+      </div>
+    </div>
+  </section>
+
+  <section id="contact">
+    <div class="container">
+      <h2>Contact Me</h2>
+      <div class="contact-form">
+        <?php if ($message_sent): ?>
+          <div class="alert alert-success">Thank you for your message! I'll get back to you shortly.</div>
+        <?php endif; ?>
+        <?php if ($error_message): ?>
+          <div class="alert alert-danger"><?= htmlspecialchars($error_message) ?></div>
+        <?php endif; ?>
+        <form action="#contact" method="post">
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input type="text" id="name" name="name" required>
+          </div>
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" required>
+          </div>
+          <div class="form-group">
+            <label for="message">Message</label>
+            <textarea id="message" name="message" rows="5" required></textarea>
+          </div>
+          <button type="submit" class="btn">Send Message</button>
+        </form>
+        <p style="text-align: center; margin-top: 1rem; font-size: 0.9rem; color: #6c757d;">
+          This is for testing purposes only — Flatlogic does not guarantee usage of the mail server. Please set up your own SMTP in <code>.env</code> (MAIL_/SMTP_ vars).
+        </p>
+      </div>
+    </div>
+  </section>
+
  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <div class="container">
+      <p>&copy; <?= date('Y') ?> John Doe. All rights reserved.</p>
+    </div>
  </footer>
+
 </body>
-</html>
+</html>