diff --git a/api/pexels.php b/api/pexels.php new file mode 100644 index 0000000..9f021e4 --- /dev/null +++ b/api/pexels.php @@ -0,0 +1,19 @@ +'Failed to fetch image']); exit; } +$photo = $data['photos'][0]; +$src = $photo['src']['large2x'] ?? ($photo['src']['large'] ?? $photo['src']['original']); +$target = __DIR__ . '/../assets/images/pexels/' . $photo['id'] . '.jpg'; +download_to($src, $target); +// Return minimal info and local relative path +echo json_encode([ + 'id' => $photo['id'], + 'local' => 'assets/images/pexels/' . $photo['id'] . '.jpg', + 'photographer' => $photo['photographer'] ?? null, + 'photographer_url' => $photo['photographer_url'] ?? null, +]); diff --git a/assets/css/custom.css b/assets/css/custom.css index 67bb9b3..404be0c 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,16 +1,15 @@ - /*-- Google Fonts --*/ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&family=Lato:wght@400;700&display=swap'); /*-- Variables --*/ :root { - --primary-color: #FF7F50; /* Coral */ - --secondary-color: #4682B4; /* Steel Blue */ - --background-color: #FAF9F6; + --primary-color: #FF6B6B; /* Vibrant Coral */ + --secondary-color: #4ECDC4; /* Aqua */ + --background-color: #F7FFF7; --surface-color: #FFFFFF; - --text-color: #333333; + --text-color: #2C3E50; /* Dark Slate Blue */ --light-gray-color: #f8f9fa; - --border-radius: 8px; + --border-radius: 12px; --font-family-headings: 'Nunito', sans-serif; --font-family-body: 'Lato', sans-serif; } @@ -24,85 +23,131 @@ body { h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-headings); + font-weight: 800; +} + +.btn { + border-radius: var(--border-radius); + padding: 12px 30px; font-weight: 700; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); - border-radius: var(--border-radius); - padding: 12px 24px; - font-weight: 700; - transition: background-color 0.3s ease; } .btn-primary:hover { - background-color: #E56A40; /* Darker coral */ - border-color: #E56A40; + background-color: #E55B5B; /* Darker coral */ + border-color: #E55B5B; + transform: translateY(-3px); + box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15); } .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); - border-radius: var(--border-radius); - padding: 12px 24px; - font-weight: 700; color: var(--surface-color); - transition: background-color 0.3s ease; } .btn-secondary:hover { - background-color: #3A6A8A; /* Darker steel blue */ - border-color: #3A6A8A; + background-color: #3DB8AF; /* Darker aqua */ + border-color: #3DB8AF; color: var(--surface-color); + transform: translateY(-3px); + box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15); } /*-- Header --*/ .navbar { - background-color: var(--surface-color); - box-shadow: 0 2px 4px rgba(0,0,0,0.05); + transition: background-color 0.5s ease; } +.transparent-nav { + background-color: transparent !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.transparent-nav .navbar-brand, +.transparent-nav .nav-link { + color: var(--surface-color) !important; + text-shadow: 0 1px 3px rgba(0,0,0,0.3); +} + +.scrolled { + background-color: var(--surface-color) !important; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.scrolled .navbar-brand, +.scrolled .nav-link { + color: var(--text-color) !important; + text-shadow: none; +} + + .navbar-brand { font-family: var(--font-family-headings); font-weight: 800; - color: var(--primary-color) !important; } /*-- Hero Section --*/ .hero-section { - padding: 100px 0; - background: linear-gradient(135deg, rgba(255, 127, 80, 0.1), rgba(255, 127, 80, 0)); + padding: 150px 0; + background-size: cover; + background-position: center; + position: relative; + color: white; text-align: center; } +.hero-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); +} + +.hero-section .container { + position: relative; + z-index: 2; +} + .hero-section h1 { - font-size: 3.5rem; + font-size: 4.5rem; font-weight: 800; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); } .hero-section .lead { - font-size: 1.25rem; - max-width: 600px; + font-size: 1.5rem; + max-width: 650px; margin: 20px auto 40px; + text-shadow: 0 1px 3px rgba(0,0,0,0.4); } /*-- Sections --*/ .section { - padding: 80px 0; + padding: 100px 0; } .section-title { text-align: center; - margin-bottom: 50px; - font-size: 2.5rem; + margin-bottom: 60px; + font-size: 3rem; font-weight: 800; } /*-- How it works --*/ .how-it-works-icon { - font-size: 3rem; + font-size: 4rem; color: var(--primary-color); + margin-bottom: 20px; } /*-- Features --*/ @@ -110,44 +155,49 @@ h1, h2, h3, h4, h5, h6 { background-color: var(--surface-color); border: none; border-radius: var(--border-radius); - padding: 30px; - box-shadow: 0 4px 15px rgba(0,0,0,0.05); + padding: 40px; + box-shadow: 0 10px 30px rgba(0,0,0,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; } .feature-card:hover { - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(0,0,0,0.1); + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0,0,0,0.12); } .feature-card .icon { - font-size: 2.5rem; + font-size: 3rem; color: var(--secondary-color); - margin-bottom: 20px; + margin-bottom: 25px; } /*-- Search Widget --*/ #search-widget { background-color: var(--surface-color); - padding: 40px; - border-radius: var(--border-radius); - box-shadow: 0 8px 25px rgba(0,0,0,0.1); + padding: 50px; + border-radius: 20px; + box-shadow: 0 15px 40px rgba(0,0,0,0.1); + margin-top: -80px; + position: relative; + z-index: 3; } /*-- Footer --*/ .footer { - background-color: #343a40; + background-color: #2C3E50; /* Dark Slate Blue */ color: var(--surface-color); - padding: 40px 0; + padding: 50px 0; } .footer a { - color: #f8f9fa; + color: #4ECDC4; /* Aqua */ text-decoration: none; + transition: color 0.3s ease; } .footer a:hover { - text-decoration: underline; + color: var(--surface-color); + text-decoration: none; } diff --git a/assets/images/pexels/1128318.jpg b/assets/images/pexels/1128318.jpg new file mode 100644 index 0000000..049f5a2 Binary files /dev/null and b/assets/images/pexels/1128318.jpg differ diff --git a/includes/pexels.php b/includes/pexels.php new file mode 100644 index 0000000..0c04a85 --- /dev/null +++ b/includes/pexels.php @@ -0,0 +1,25 @@ + 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18'; +} +function pexels_get($url) { + $ch = curl_init(); + curl_setopt_array($ch, [ + CURLOPT_URL => $url, + CURLOPT_RETURNTRANSFER => true, + CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ], + CURLOPT_TIMEOUT => 15, + ]); + $resp = curl_exec($ch); + $code = curl_getinfo($ch, CURLINFO_HTTP_CODE); + curl_close($ch); + if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true); + return null; +} +function download_to($srcUrl, $destPath) { + $data = file_get_contents($srcUrl); + if ($data === false) return false; + if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true); + return file_put_contents($destPath, $data) !== false; +} diff --git a/index.php b/index.php index 6cbbed0..e32d474 100644 --- a/index.php +++ b/index.php @@ -2,6 +2,20 @@ ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL); + +require_once 'includes/pexels.php'; +$query = 'family'; +$orientation = 'landscape'; +$url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=1'; +$data = pexels_get($url); +$hero_image_url = ''; +if ($data && !empty($data['photos'])) { + $photo = $data['photos'][0]; + $src = $photo['src']['large2x'] ?? ($photo['src']['large'] ?? $photo['src']['original']); + $target = __DIR__ . '/assets/images/pexels/' . $photo['id'] . '.jpg'; + download_to($src, $target); + $hero_image_url = 'assets/images/pexels/' . $photo['id'] . '.jpg'; +} ?> @@ -37,12 +51,17 @@ error_reporting(E_ALL); +
-
-
+
@@ -177,5 +196,16 @@ error_reporting(E_ALL); + + \ No newline at end of file diff --git a/login.php b/login.php new file mode 100644 index 0000000..89ec330 --- /dev/null +++ b/login.php @@ -0,0 +1,63 @@ +prepare("SELECT * FROM users WHERE username = ?"); + $stmt->execute([$username]); + $user = $stmt->fetch(PDO::FETCH_ASSOC); + + if ($user && password_verify($password, $user['password_hash'])) { + $_SESSION['user_id'] = $user['id']; + $_SESSION['username'] = $user['username']; + header("Location: index.php"); + exit; + } else { + $message = 'Invalid username or password.'; + } + } catch (PDOException $e) { + $message = 'Error: ' . $e->getMessage(); + } + } +} +?> + + + + + + Login + + + +
+

Login

+ +
+ +
+ +
+
+ + +
+
+ + +
+ +
+
+ + \ No newline at end of file diff --git a/register.php b/register.php new file mode 100644 index 0000000..f8b3c95 --- /dev/null +++ b/register.php @@ -0,0 +1,152 @@ + +prepare("SELECT * FROM users WHERE username = :username OR email = :email"); + $stmt->execute(['username' => $username, 'email' => $email]); + if ($stmt->fetch()) { + $message = 'Username or email already taken.'; + } else { + // Hash the password + $password_hash = password_hash($password, PASSWORD_DEFAULT); + + // Insert new user + $stmt = $pdo->prepare("INSERT INTO users (username, email, password_hash) VALUES (:username, :email, :password_hash)"); + if ($stmt->execute(['username' => $username, 'email' => $email, 'password_hash' => $password_hash])) { + $message = 'Registration successful! You can now log in.'; + } else { + $message = 'An error occurred. Please try again.'; + } + } + } catch (PDOException $e) { + error_log('Registration failed: ' . $e->getMessage()); + $message = 'An error occurred. Please try again later.'; + } + } +} +?> + + + + + + Register - Flatlogic + + + + + + +
+
+
+
+
+

Create an Account

+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+

+ Already have an account? Sign In +

+
+
+
+ +
+
+
+
+
Flatlogic
+

+ We create stunning responsive websites and web applications. +

+
+
+
Links
+ +
+
+
Support
+ +
+
+
+
+ © 2025 Copyright: + Flatlogic +
+
+ + + +