113 lines
5.3 KiB
PHP
113 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>
|
|
<?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>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 Virtual Try-On</p>
|
|
</footer>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|