1.1

api/pexels.php

@@ -0,0 +1,72 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__.'/../includes/pexels.php';
+
+$errors = [];
+if (!function_exists('curl_init')) {
+    $errors[] = 'cURL extension is not installed or enabled.';
+}
+
+// To get more diversity, let's use a few different queries.
+$queries = ['man full body portrait', 'woman full body portrait', 'person full body standing'];
+$results = [];
+
+foreach ($queries as $q) {
+    // Add random page to get different results each time
+    $url = 'https://api.pexels.com/v1/search?query=' . urlencode($q) . '&orientation=portrait&per_page=1&page=' . rand(1, 20);
+    $data = pexels_get($url);
+
+    if ($data && !empty($data['photos'])) {
+        $photo = $data['photos'][0];
+        $src = $photo['src']['large'] ?? $photo['src']['original'];
+        $targetDir = __DIR__ . '/../assets/images/pexels/';
+        
+        $filename = $photo['id'] . '.jpg';
+        $target = $targetDir . $filename;
+
+        // Only download if it doesn't exist to save bandwidth
+        if (!file_exists($target)) {
+            $download_result = download_to($src, $target);
+            if ($download_result === false) {
+                $errors[] = "Failed to download image to " . $target;
+            }
+        }
+
+        if (file_exists($target)) {
+            $results[] = [
+                'id' => $photo['id'],
+                'local_path' => 'assets/images/pexels/' . $filename,
+                'photographer' => $photo['photographer'] ?? 'Unknown',
+                'photographer_url' => $photo['photographer_url'] ?? '#',
+                'avg_color' => $photo['avg_color']
+            ];
+        } else {
+            $errors[] = "Image file does not exist at " . $target;
+        }
+    } else {
+        $errors[] = "Failed to fetch data from Pexels for query: " . $q;
+    }
+}
+
+// Ensure we have 3 models, even if Pexels fails, use placeholders
+while (count($results) < 3) {
+    $placeholder_index = count($results) + 1;
+    $results[] = [
+        'id' => 'placeholder_' . $placeholder_index,
+        // Using an external placeholder service as a fallback
+        'local_path' => 'https://via.placeholder.com/400x600.png?text=Model+' . $placeholder_index,
+        'photographer' => 'Placeholder',
+        'photographer_url' => '#',
+        'avg_color' => '#cccccc'
+    ];
+}
+
+$response = [
+    'models' => array_slice($results, 0, 3)
+];
+
+if (!empty($errors)) {
+    $response['errors'] = $errors;
+}
+
+echo json_encode($response);

assets/css/custom.css

@@ -0,0 +1,108 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #F5F5F5;
+}
+
+.navbar-brand {
+    font-weight: 600;
+    color: #7C4DFF !important;
+}
+
+.item-card {
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.item-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.item-color-preview {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 1px solid #eee;
+}
+
+.dressing-room-wrapper {
+    position: sticky;
+    top: 2rem;
+}
+
+.dressing-room {
+    position: relative;
+    width: 100%;
+    max-width: 400px; /* Adjust as needed */
+    margin: auto;
+    aspect-ratio: 2 / 3;
+    background-color: #E0E0E0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+/* New Model Selector Styles */
+.model-selector .model-thumbnail {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    cursor: pointer;
+    border: 2px solid transparent;
+    border-radius: 0.25rem;
+    transition: border-color 0.2s ease;
+}
+
+.model-selector .model-thumbnail:hover {
+    border-color: #AEAEAE;
+}
+
+.model-selector .model-thumbnail.active {
+    border-color: #7C4DFF;
+    box-shadow: 0 0 10px rgba(124, 77, 255, 0.5);
+}
+
+/* New Model Display Styles */
+.model-display-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+#model-display {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.clothing-item {
+    position: absolute;
+    background-size: contain;
+    background-repeat: no-repeat;
+    mix-blend-mode: multiply; /* This helps blend the color with the model's clothes */
+    opacity: 0.8;
+}
+
+/* Repositioning the clothing items */
+#cap-display {
+    top: 2%;
+    left: 38%;
+    width: 24%;
+    height: 15%;
+    background-color: transparent; /* Initially no color */
+}
+
+#shirt-display {
+    top: 18%;
+    left: 25%;
+    width: 50%;
+    height: 35%;
+    background-color: transparent;
+}
+
+#pants-display {
+    top: 50%;
+    left: 25%;
+    width: 50%;
+    height: 50%;
+    background-color: transparent;
+}

assets/js/main.js

@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const items = document.querySelectorAll('.clothing-item');
+    const shirtDisplay = document.getElementById('shirt-display');
+    const pantsDisplay = document.getElementById('pants-display');
+    const capDisplay = document.getElementById('cap-display');
+    const resetButton = document.getElementById('reset-button');
+    const modelDisplay = document.getElementById('model-display');
+    const modelThumbnails = document.querySelectorAll('.model-thumbnail');
+
+    items.forEach(item => {
+        item.addEventListener('click', function () {
+            const color = this.dataset.color;
+            const itemType = this.dataset.type;
+
+            if (itemType === 'shirt') {
+                shirtDisplay.style.backgroundColor = color;
+                shirtDisplay.style.display = 'block';
+            } else if (itemType === 'pants') {
+                pantsDisplay.style.backgroundColor = color;
+                pantsDisplay.style.display = 'block';
+            } else if (itemType === 'cap') {
+                capDisplay.style.backgroundColor = color;
+                capDisplay.style.display = 'block';
+            }
+        });
+    });
+
+    resetButton.addEventListener('click', function () {
+        shirtDisplay.style.display = 'none';
+        pantsDisplay.style.display = 'none';
+        capDisplay.style.display = 'none';
+        shirtDisplay.style.backgroundColor = 'transparent';
+        pantsDisplay.style.backgroundColor = 'transparent';
+        capDisplay.style.backgroundColor = 'transparent';
+    });
+
+    modelThumbnails.forEach(thumbnail => {
+        thumbnail.addEventListener('click', function() {
+            // Remove active class from all thumbnails
+            modelThumbnails.forEach(t => t.classList.remove('active'));
+            // Add active class to the clicked one
+            this.classList.add('active');
+            // Change the main model image source
+            const fullSrc = this.dataset.fullSrc;
+            if (fullSrc) {
+                modelDisplay.src = fullSrc;
+            }
+        });
+    });
+});

includes/pexels.php

@@ -0,0 +1,33 @@
+<?php
+function pexels_key() {
+  $k = getenv('PEXELS_KEY');
+  // Fallback to a generic key if not set in environment
+  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) {
+  // Ensure the directory exists
+  $dir = dirname($destPath);
+  if (!is_dir($dir)) {
+    mkdir($dir, 0775, true);
+  }
+
+  $data = file_get_contents($srcUrl);
+  if ($data === false) return false;
+  return file_put_contents($destPath, $data) !== false;
+}

index.php

@@ -1,150 +1,113 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <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);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::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;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .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 {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Virtual Try-On</title>
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
+    <?php
+        // Set error reporting for debugging
+        ini_set('display_errors', 1);
+        ini_set('display_startup_errors', 1);
+        error_reporting(E_ALL);
+
+        $models = [];
+        $errors = [];
+        $api_url = 'http://' . $_SERVER['HTTP_HOST'] . '/api/pexels.php?action=multiple&queries=model,person,woman&orientation=portrait';
+
+        // Use file_get_contents with a stream context to handle potential errors
+        $context = stream_context_create(['http' => ['ignore_errors' => true]]);
+        $models_json = file_get_contents($api_url, false, $context);
+
+        if ($models_json === false) {
+            $errors[] = "Failed to fetch data from the API endpoint ($api_url). The server might be down or the URL is incorrect.";
+        } else {
+            $models_data = json_decode($models_json, true);
+            if (json_last_error() !== JSON_ERROR_NONE) {
+                $errors[] = "Failed to decode JSON. Error: " . json_last_error_msg();
+                $errors[] = "Received response: " . htmlspecialchars(substr($models_json, 0, 500)); // Show first 500 chars of response
+            } else {
+                $models = $models_data['models'] ?? [];
+                $errors = array_merge($errors, $models_data['errors'] ?? []);
+            }
+        }
+    ?>
+
+    <header>
+        <h1>Virtual Try-On</h1>
+    </header>
+
     <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>
+        <?php if (!empty($errors)): ?>
+            <div class="error-container">
+                <h2>Something went wrong:</h2>
+                <ul style="color: red; background: #fee; padding: 1em; list-style-position: inside;">
+                    <?php foreach ($errors as $error): ?>
+                        <li><?php echo htmlspecialchars($error); ?></li>
+                    <?php endforeach; ?>
+                </ul>
+            </div>
+        <?php endif; ?>
+
+        <div class="container">
+            <div class="clothing-selection">
+                <div class="clothing-category">
+                    <h2>Caps</h2>
+                    <div class="clothing-items" id="caps-list">
+                        <?php for ($i = 1; $i <= 50; $i++): ?>
+                            <?php $color = sprintf('#%06X', mt_rand(0, 0xFFFFFF)); ?>
+                            <div class="clothing-item" data-item-type="cap" data-color="<?php echo $color; ?>" style="background-color: <?php echo $color; ?>;">Cap <?php echo $i; ?></div>
+                        <?php endfor; ?>
+                    </div>
+                </div>
+                <div class="clothing-category">
+                    <h2>Shirts</h2>
+                    <div class="clothing-items" id="shirts-list">
+                        <?php for ($i = 1; $i <= 75; $i++): ?>
+                            <?php $color = sprintf('#%06X', mt_rand(0, 0xFFFFFF)); ?>
+                            <div class="clothing-item" data-item-type="shirt" data-color="<?php echo $color; ?>" style="background-color: <?php echo $color; ?>;">Shirt <?php echo $i; ?></div>
+                        <?php endfor; ?>
+                    </div>
+                </div>
+                <div class="clothing-category">
+                    <h2>Pants</h2>
+                    <div class="clothing-items" id="pants-list">
+                        <?php for ($i = 1; $i <= 75; $i++): ?>
+                            <?php $color = sprintf('#%06X', mt_rand(0, 0xFFFFFF)); ?>
+                            <div class="clothing-item" data-item-type="pants" data-color="<?php echo $color; ?>" style="background-color: <?php echo $color; ?>;">Pants <?php echo $i; ?></div>
+                        <?php endfor; ?>
+                    </div>
+                </div>
+                <button id="reset-button">Reset</button>LAG
+            </div>
+            <div class="dressing-room">
+                <?php if (!empty($models)): ?>
+                    <div class="model-selector">
+                        <?php foreach ($models as $index => $model): ?>
+                            <img src="<?php echo $model['src']; ?>" alt="Model <?php echo $index + 1; ?>" class="model-thumbnail <?php echo $index === 0 ? 'active' : ''; ?>" data-model-src="<?php echo $model['src']; ?>">
+                        <?php endforeach; ?>
+                    </div>
+                    <div class="model-display-container">
+                        <img id="model-display" src="<?php echo $models[0]['src']; ?>" alt="Selected Model">
+                        <div id="cap-display" class="clothing-overlay"></div>
+                        <div id="shirt-display" class="clothing-overlay"></div>
+                        <div id="pants-display" class="clothing-overlay"></div>
+                    </div>
+                <?php else: ?>
+                    <div class="model-display-container placeholder">
+                        <p>Models could not be loaded. Please check the error messages above.</p>
+                    </div>
+                <?php endif; ?>
             </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>
         </div>
     </main>
+
     <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+        <p>&copy; 2025 Virtual Try-On</p>
     </footer>
+
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>