with video
This commit is contained in:
parent
f7763aae7d
commit
c7834000a3
36
api/fetch_auth_video.php
Normal file
36
api/fetch_auth_video.php
Normal file
@ -0,0 +1,36 @@
|
||||
<?php
|
||||
require_once __DIR__.'/../includes/pexels.php';
|
||||
// We'll try to find a video that combines these themes.
|
||||
// Since we can't easily find a single clip with everything, we'll pick the most descriptive one.
|
||||
$query = 'woman cooking kitchen grocery delivery';
|
||||
$url = 'https://api.pexels.com/videos/search?query=' . urlencode($query) . '&orientation=portrait&per_page=1&page=1';
|
||||
$data = pexels_get($url);
|
||||
|
||||
if ($data && !empty($data['videos'])) {
|
||||
$video = $data['videos'][0];
|
||||
$bestFile = null;
|
||||
foreach ($video['video_files'] as $file) {
|
||||
if ($file['quality'] == 'hd' && ($file['width'] == 1080 || $file['width'] == 720)) {
|
||||
$bestFile = $file;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!$bestFile) $bestFile = $video['video_files'][0];
|
||||
|
||||
$src = $bestFile['link'];
|
||||
$target = __DIR__ . '/../assets/images/auth-video.mp4';
|
||||
|
||||
// Using curl for video as file_get_contents might be slow/limited for large files
|
||||
$ch = curl_init($src);
|
||||
$fp = fopen($target, 'wb');
|
||||
curl_setopt($ch, CURLOPT_FILE, $fp);
|
||||
curl_setopt($ch, CURLOPT_HEADER, 0);
|
||||
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
|
||||
curl_exec($ch);
|
||||
curl_close($ch);
|
||||
fclose($fp);
|
||||
|
||||
echo "Success: Downloaded " . $target;
|
||||
} else {
|
||||
echo "Error: Failed to fetch video info from Pexels.";
|
||||
}
|
||||
@ -376,11 +376,22 @@ footer {
|
||||
}
|
||||
|
||||
.auth-image-container {
|
||||
background-image: url('../images/auth-bg-new.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--brand-primary); /* Fallback */
|
||||
}
|
||||
|
||||
.auth-background-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.auth-image-overlay {
|
||||
@ -388,6 +399,7 @@ footer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Animated decorative circles in background */
|
||||
|
||||
BIN
assets/images/auth-video.mp4
Normal file
BIN
assets/images/auth-video.mp4
Normal file
Binary file not shown.
@ -27,7 +27,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v10">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v11">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -55,8 +55,11 @@
|
||||
<div id="guest-view" class="d-none auth-screen">
|
||||
<div class="container-fluid h-100 p-0">
|
||||
<div class="row h-100 g-0">
|
||||
<!-- Left Column: Image & Description -->
|
||||
<!-- Left Column: Video & Description -->
|
||||
<div class="col-lg-6 d-none d-lg-block auth-image-container">
|
||||
<video autoplay muted loop playsinline class="auth-background-video">
|
||||
<source src="assets/images/auth-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="auth-image-overlay d-flex align-items-center justify-content-center p-5 text-white">
|
||||
<div class="auth-branding-content position-relative overflow-hidden">
|
||||
<!-- Floating decorative emojis with animation -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user