106 lines
5.1 KiB
PHP
106 lines
5.1 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'LuxuryPortrait AI';
|
|
$projectDesc = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Elevate your portrait with AI-powered luxury night backgrounds.';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo htmlspecialchars($projectName); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars($projectDesc); ?>">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- Custom Luxury CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
<div class="luxury-bg"></div>
|
|
|
|
<nav class="navbar">
|
|
<a href="/" class="logo">LUXURY<span>PORTRAIT</span></a>
|
|
<div class="nav-links d-none d-md-flex">
|
|
<span class="text-secondary small">AI-Powered Transformation</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container">
|
|
<!-- Step 1: Landing & Upload -->
|
|
<section id="upload-section" class="hero">
|
|
<h1>Elevate Your Presence to <span style="color:var(--accent-color)">Luxury</span>.</h1>
|
|
<p>Our AI preserves your natural features while placing you in the world's most exclusive night penthouses.</p>
|
|
|
|
<div class="upload-card">
|
|
<form id="upload-form" enctype="multipart/form-data">
|
|
<div class="upload-zone" onclick="document.getElementById('photo-input').click()">
|
|
<i class="fa-solid fa-cloud-arrow-up"></i>
|
|
<h3>Drop your portrait here</h3>
|
|
<p class="text-secondary">PNG, JPG or WEBP (Max 10MB)</p>
|
|
<input type="file" id="photo-input" name="photo" hidden accept="image/*">
|
|
</div>
|
|
<div id="preview-container" class="mt-4 d-none">
|
|
<img id="image-preview" src="" alt="Preview" class="img-fluid rounded mb-3">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="resetUpload()">Change Photo</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="style-selection mt-5">
|
|
<h4 class="mb-4">Select Your Luxury Scene</h4>
|
|
<div class="style-grid">
|
|
<div class="style-item active" data-style="penthouse-1">
|
|
<img src="https://images.pexels.com/photos/323705/pexels-photo-323705.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Penthouse Night">
|
|
<div class="label">Manhattan Penthouse</div>
|
|
</div>
|
|
<div class="style-item" data-style="penthouse-2">
|
|
<img src="https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Skyline View">
|
|
<div class="label">Tokyo Skyline</div>
|
|
</div>
|
|
<div class="style-item" data-style="penthouse-3">
|
|
<img src="https://images.pexels.com/photos/261102/pexels-photo-261102.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Infinity Pool">
|
|
<div class="label">Dubai Infinity</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<button id="process-btn" class="btn-primary d-none">Generate My Luxury Portrait</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 2: Results -->
|
|
<section id="result-section" class="result-container">
|
|
<h2 class="text-center mb-5">Your Luxury Transformation</h2>
|
|
<div class="comparison-view">
|
|
<div class="comparison-item">
|
|
<img id="original-res" src="" alt="Original">
|
|
<span>Natural Portrait</span>
|
|
</div>
|
|
<div class="comparison-item">
|
|
<img id="processed-res" src="" alt="Processed">
|
|
<span>Luxury Night Edition</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<a id="download-btn" href="#" download class="btn-primary me-3">Download HD Result</a>
|
|
<button class="btn btn-link text-secondary" onclick="window.location.reload()">Start Over</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Processing Overlay -->
|
|
<div id="processing-overlay">
|
|
<div class="spinner"></div>
|
|
<div class="progress-text">AI IS ANALYZING TEXTURES...</div>
|
|
<div class="mt-3 text-secondary small" id="status-detail">Preserving natural facial lighting</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|