admin/35604-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

with video

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-26 22:15:07 +00:00
parent f7763aae7d
commit c7834000a3
4 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
api/fetch_auth_video.php Normal file
View 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.";
}

18
assets/css/custom.css
View File

@ -376,11 +376,22 @@ footer {
} }
.auth-image-container { .auth-image-container {
background-image: url('../images/auth-bg-new.jpg');
background-size: cover;
background-position: center;
position: relative; position: relative;
overflow: hidden; 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 { .auth-image-overlay {
@ -388,6 +399,7 @@ footer {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1;
} }
/* Animated decorative circles in background */ /* Animated decorative circles in background */

BIN
assets/images/auth-video.mp4 Normal file
View File

Binary file not shown.

7
index.php
View File

@ -27,7 +27,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 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="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> </head>
<body> <body>
@ -55,8 +55,11 @@
<div id="guest-view" class="d-none auth-screen"> <div id="guest-view" class="d-none auth-screen">
<div class="container-fluid h-100 p-0"> <div class="container-fluid h-100 p-0">
<div class="row h-100 g-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"> <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-image-overlay d-flex align-items-center justify-content-center p-5 text-white">
<div class="auth-branding-content position-relative overflow-hidden"> <div class="auth-branding-content position-relative overflow-hidden">
<!-- Floating decorative emojis with animation --> <!-- Floating decorative emojis with animation -->