diff --git a/api/pexels.php b/api/pexels.php new file mode 100644 index 0000000..35a8001 --- /dev/null +++ b/api/pexels.php @@ -0,0 +1,72 @@ + $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); diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e9763e2 --- /dev/null +++ b/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; +} diff --git a/assets/images/pexels/10423654.jpg b/assets/images/pexels/10423654.jpg new file mode 100644 index 0000000..43baa31 Binary files /dev/null and b/assets/images/pexels/10423654.jpg differ diff --git a/assets/images/pexels/12202346.jpg b/assets/images/pexels/12202346.jpg new file mode 100644 index 0000000..6b15497 Binary files /dev/null and b/assets/images/pexels/12202346.jpg differ diff --git a/assets/images/pexels/18214363.jpg b/assets/images/pexels/18214363.jpg new file mode 100644 index 0000000..5cd2905 Binary files /dev/null and b/assets/images/pexels/18214363.jpg differ diff --git a/assets/images/pexels/2918545.jpg b/assets/images/pexels/2918545.jpg new file mode 100644 index 0000000..129c198 Binary files /dev/null and b/assets/images/pexels/2918545.jpg differ diff --git a/assets/images/pexels/30584067.jpg b/assets/images/pexels/30584067.jpg new file mode 100644 index 0000000..12f296c Binary files /dev/null and b/assets/images/pexels/30584067.jpg differ diff --git a/assets/images/pexels/30998951.jpg b/assets/images/pexels/30998951.jpg new file mode 100644 index 0000000..bf4bc0c Binary files /dev/null and b/assets/images/pexels/30998951.jpg differ diff --git a/assets/images/pexels/6697255.jpg b/assets/images/pexels/6697255.jpg new file mode 100644 index 0000000..81bac75 Binary files /dev/null and b/assets/images/pexels/6697255.jpg differ diff --git a/assets/images/pexels/6778701.jpg b/assets/images/pexels/6778701.jpg new file mode 100644 index 0000000..4daec46 Binary files /dev/null and b/assets/images/pexels/6778701.jpg differ diff --git a/assets/images/pexels/6786894.jpg b/assets/images/pexels/6786894.jpg new file mode 100644 index 0000000..2cdcc98 Binary files /dev/null and b/assets/images/pexels/6786894.jpg differ diff --git a/assets/images/pexels/6800671.jpg b/assets/images/pexels/6800671.jpg new file mode 100644 index 0000000..6143d22 Binary files /dev/null and b/assets/images/pexels/6800671.jpg differ diff --git a/assets/images/pexels/7318782.jpg b/assets/images/pexels/7318782.jpg new file mode 100644 index 0000000..f8a3c9e Binary files /dev/null and b/assets/images/pexels/7318782.jpg differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..cdc9372 --- /dev/null +++ b/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; + } + }); + }); +}); \ No newline at end of file diff --git a/includes/pexels.php b/includes/pexels.php new file mode 100644 index 0000000..69b3326 --- /dev/null +++ b/includes/pexels.php @@ -0,0 +1,33 @@ + 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; +} diff --git a/index.php b/index.php index 7205f3d..43e38c3 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,113 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Virtual Try-On + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + ['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'] ?? []); + } + } + ?> + +
+

Virtual Try-On

+
+ +
+ +
+

Something went wrong:

+ +
+ + +
+
+
+

Caps

+
+ + +
Cap
+ +
+
+
+

Shirts

+
+ + +
Shirt
+ +
+
+
+

Pants

+
+ + +
Pants
+ +
+
+ LAG +
+
+ +
+ $model): ?> + Model <?php echo $index + 1; ?> + +
+
+ Selected Model +
+
+
+
+ +
+

Models could not be loaded. Please check the error messages above.

+
+ +
+
+
+ + + + - + \ No newline at end of file