93 lines
4.6 KiB
PHP
93 lines
4.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lenzo Homes AI - Text-to-Video</title>
|
|
|
|
<!-- Bootstrap 5 CDN -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- Meta tags from environment -->
|
|
<?php if (isset($_SERVER['PROJECT_NAME']) && !empty($_SERVER['PROJECT_NAME'])) : ?>
|
|
<meta property="og:title" content="<?php echo htmlspecialchars($_SERVER['PROJECT_NAME']); ?>" />
|
|
<meta name="twitter:title" content="<?php echo htmlspecialchars($_SERVER['PROJECT_NAME']); ?>" />
|
|
<?php endif; ?>
|
|
<?php if (isset($_SERVER['PROJECT_DESCRIPTION']) && !empty($_SERVER['PROJECT_DESCRIPTION'])) : ?>
|
|
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION']); ?>">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION']); ?>" />
|
|
<meta name="twitter:description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION']); ?>" />
|
|
<?php endif; ?>
|
|
<?php if (isset($_SERVER['PROJECT_IMAGE_URL']) && !empty($_SERVER['PROJECT_IMAGE_URL'])) : ?>
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL']); ?>" />
|
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL']); ?>" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<?php endif; ?>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Lenzo Homes AI</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-lg p-4 mb-5">
|
|
<div class="card-body">
|
|
<h2 class="card-title text-center mb-4">Create Video from Text</h2>
|
|
<p class="text-center text-muted mb-4">Describe the property you want to visualize. Be as detailed as you like.</p>
|
|
|
|
<form id="videoForm">
|
|
<div class="mb-3">
|
|
<textarea class="form-control" id="textPrompt" rows="6" placeholder="e.g., A modern 3-bedroom villa with sunset views and an infinity pool, featuring floor-to-ceiling windows and minimalist decor."></textarea>
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-gold" id="generateBtn">Generate Video</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="video-output" class="mt-4 text-center ratio ratio-16x9">
|
|
<div id="spinner" class="placeholder-glow">
|
|
<div class="spinner-border mb-3" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<strong id="placeholder-text">Generating your masterpiece...</strong>
|
|
</div>
|
|
<video id="videoPlayer" controls muted loop playsinline></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
|
|
<div id="notificationToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">Success</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
Your video has been successfully generated!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap 5 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
crossorigin="anonymous"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
</body>
|
|
</html>
|