working slider
This commit is contained in:
parent
06b86fb0f6
commit
c77b28a7b8
|
|
@ -0,0 +1 @@
|
|||
{"version":1,"defects":{"ComponentTests::testMainLayoutRendersCorrectly":4,"ComponentTests::testSliderRendersWhenEnabled":4,"ComponentTests::testLoggerWritesToFile":4,"ComponentTests::testValidatorRequiredField":4,"ComponentTests::testValidatorEmail":4},"times":{"ComponentTests::testMainLayoutRendersCorrectly":0.003,"ComponentTests::testSliderRendersWhenEnabled":0.001,"ComponentTests::testSliderDoesNotRenderWhenDisabled":0,"ComponentTests::testErrorHandlerLogsExceptions":0,"ComponentTests::testLoggerWritesToFile":0.054,"ComponentTests::testValidatorRequiredField":0.001,"ComponentTests::testValidatorEmail":0}}
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
},
|
||||
"require-dev": {
|
||||
"squizlabs/php_codesniffer": "^3.7",
|
||||
"friendsofphp/php-cs-fixer": "^3.20"
|
||||
"friendsofphp/php-cs-fixer": "^3.20",
|
||||
"phpunit/phpunit": "^9.6"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?> <phpunit bootstrap="vendor/autoload.php">
|
||||
<testsuites>
|
||||
<testsuite name="WizdomNetworks Tests">
|
||||
<directory>./tests</directory>
|
||||
</testsuite>
|
||||
</testsuites>
|
||||
</phpunit>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/* Hero Slider Styles */
|
||||
.hero-slider, .carousel-inner, .carousel-item {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.5s ease-in-out;
|
||||
}
|
||||
.hero-image:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.carousel-indicators {
|
||||
bottom: 10px;
|
||||
}
|
||||
.carousel-indicators button {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
margin: 3px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.carousel-indicators .active {
|
||||
opacity: 1;
|
||||
}
|
||||
.indicator-color-1.active { background-color: #ffcc00; }
|
||||
.indicator-color-2.active { background-color: #ffff66; }
|
||||
.indicator-color-3.active { background-color: #0099FF; }
|
||||
.indicator-color-4.active { background-color: #A3A300; }
|
||||
.indicator-color-5.active { background-color: #990000; }
|
||||
.indicator-color-6.active { background-color: #29527A; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -1,12 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Modern IT Consulting Services">
|
||||
<meta name="author" content="WizdomNetworks">
|
||||
<title><?php echo $title ?? 'Welcome'; ?></title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
<title><?php echo $title ?? 'Wizdom Networks'; ?></title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<!-- Bootstrap CDN with local fallback -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css';">
|
||||
|
||||
|
||||
<!-- Main Stylesheet -->
|
||||
<!-- <link rel="stylesheet" href="/assets/css/styles.css"> -->
|
||||
|
||||
<!-- Conditionally Load Slider Stylesheet -->
|
||||
<?php if (!empty($showSlider)) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/slider.css">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/assets/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Main Layout
|
||||
*
|
||||
* This file serves as the primary layout structure, including the header, footer, and optional sections
|
||||
* like the hero section and slider, which can be enabled per page.
|
||||
*/
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -7,6 +17,14 @@
|
|||
<?php $this->render('layouts/header', $data); ?>
|
||||
<?php $this->render('partials/navbar', $data); ?>
|
||||
|
||||
<?php if (!empty($showHero)) : ?>
|
||||
<?php $this->render('partials/hero', $data); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($showSlider)) : ?>
|
||||
<?php $this->render('partials/slider', ['sliderConfig' => $showSlider]); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
|
|
@ -17,14 +35,7 @@
|
|||
<?php echo $content ?? ''; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<?php $this->render('partials/contact_form', $data); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<?php $this->render('layouts/footer', $data); ?>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,21 @@
|
|||
<?php
|
||||
|
||||
// Debugging: Entry point for home.php
|
||||
error_log("[DEBUG] Entering home.php");
|
||||
/**
|
||||
* Home Page
|
||||
*
|
||||
* This file renders the homepage and dynamically loads the hero section and slider if configured.
|
||||
*/
|
||||
|
||||
// Define title and content
|
||||
$title = 'Home - Wizdom Networks';
|
||||
$showHero = false;
|
||||
$showSlider = ['type' => 'hero']; // Enable hero slider
|
||||
|
||||
$content = <<<HTML
|
||||
<h1>Welcome to Wizdom Networks</h1>
|
||||
<p>Your trusted partner for IT Consulting and Services.</p>
|
||||
<p><a href="/services" class="btn btn-primary">Explore Our Services</a></p>
|
||||
HTML;
|
||||
|
||||
// Debugging: Log title and content length
|
||||
error_log("[DEBUG] Title: $title");
|
||||
error_log("[DEBUG] Content length: " . strlen($content));
|
||||
|
||||
// Prepare data for rendering
|
||||
$data = [
|
||||
'title' => $title,
|
||||
'content' => $content,
|
||||
];
|
||||
|
||||
// Debugging: Log before rendering main layout
|
||||
error_log("[DEBUG] Rendering main layout with data: " . json_encode($data));
|
||||
|
||||
// Render the main layout
|
||||
$this->render('layouts/main', $data);
|
||||
|
||||
|
||||
// Debugging: Exit point for home.php
|
||||
error_log("[DEBUG] Exiting home.php");
|
||||
$this->render('layouts/main', compact('title', 'content', 'showHero', 'showSlider'));
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -3,99 +3,30 @@
|
|||
/**
|
||||
* Hero Section Partial
|
||||
*
|
||||
* This partial renders the hero section, including the homepage slider (if applicable) and
|
||||
* the greyscale-to-color hover effect for hero images across other pages.
|
||||
* This partial is responsible for displaying the hero section with a background image,
|
||||
* a headline, subheadline, and an optional call-to-action button.
|
||||
*
|
||||
* The hero section can be enabled or disabled per page.
|
||||
*/
|
||||
|
||||
// Ensure required variables have default values
|
||||
$isHomePage = $isHomePage ?? false;
|
||||
if (!isset($showHero) || !$showHero) {
|
||||
return;
|
||||
}
|
||||
|
||||
$heroTitle = $heroTitle ?? "Welcome to Wizdom Networks";
|
||||
$heroDescription = $heroDescription ?? "Your trusted IT consulting partner.";
|
||||
$heroImageSrc = $heroImageSrc ?? "/assets/images/information-light.jpg";
|
||||
$heroImageAlt = $heroImageAlt ?? "Hero Image";
|
||||
$heroImages = $heroImages ?? [];
|
||||
$heroDescription = $heroDescription ?? "Your trusted partner for IT Consulting and Services.";
|
||||
$heroImage = $heroImage ?? "/assets/images/default-hero.jpg";
|
||||
$heroCTA = $heroCTA ?? null;
|
||||
?>
|
||||
|
||||
<?php if (!isset($showHero) || $showHero): ?>
|
||||
<section class="hero-section">
|
||||
<?php if ($isHomePage): ?>
|
||||
<!-- Hero Slider for Home Page -->
|
||||
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<?php foreach ($heroImages as $index => $image): ?>
|
||||
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
|
||||
<div class="hero-background" style="background-image: url('<?php echo $image['src']; ?>');">
|
||||
<div class="carousel-caption">
|
||||
<h2><?php echo $image['title'] ?? ''; ?></h2>
|
||||
<p><?php echo $image['description'] ?? ''; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<!-- Static Hero Image for Other Pages -->
|
||||
<div class="hero-static hero-background" style="background-image: url('<?php echo $heroImageSrc; ?>');">
|
||||
<section class="hero-section" style="background-image: url('<?php echo $heroImage; ?>');">
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content text-center">
|
||||
<h1><?php echo $heroTitle; ?></h1>
|
||||
<p><?php echo $heroDescription; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php if ($heroCTA): ?>
|
||||
<a href="<?php echo $heroCTA['link']; ?>" class="btn btn-primary"> <?php echo $heroCTA['text']; ?> </a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<style>
|
||||
/* Hero Section Adjustments */
|
||||
.hero-section {
|
||||
margin-top: 0; /* Ensures no whitespace above the hero section */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 65vh; /* Adjusted to occupy approximately 65% of the viewport */
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.5s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-background:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.hero-static {
|
||||
text-align: center;
|
||||
color: white;
|
||||
height: 65vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-overlay {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
.carousel-caption {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,26 +3,38 @@
|
|||
/**
|
||||
* Hero Slider Partial
|
||||
*
|
||||
* This partial renders the slider, including image transitions, text overlays,
|
||||
* CTA buttons, and colored indicators matching the current site design.
|
||||
*
|
||||
* It is modular and can be activated on any page by setting `$showSlider = true;`
|
||||
* This partial dynamically loads different types of sliders based on the provided configuration.
|
||||
* It supports multiple slider types, including hero and testimonial sliders, and only loads when required.
|
||||
*/
|
||||
|
||||
// Ensure slider visibility is explicitly enabled
|
||||
if (!isset($showSlider) || !$showSlider) {
|
||||
if (!isset($sliderConfig) || empty($sliderConfig['type'])) {
|
||||
return;
|
||||
}
|
||||
|
||||
$sliderType = $sliderConfig['type'];
|
||||
|
||||
// Slider images and their associated text & CTA
|
||||
$sliderImages = [
|
||||
[
|
||||
'src' => '/assets/images/information-light.jpg',
|
||||
'alt' => 'Information Light Banner',
|
||||
'title' => 'Innovative Solutions',
|
||||
'description' => 'Bringing technology and expertise together.',
|
||||
'cta_text' => 'Learn More',
|
||||
'cta_link' => '/services/technology',
|
||||
'cta_top' => '70%',
|
||||
'cta_left' => '30%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/cardcatalouge-banner.jpg',
|
||||
'alt' => 'Card Catalogue Banner',
|
||||
'title' => 'Effortless Organization',
|
||||
'description' => 'Streamline your workflow with our intuitive catalog system.',
|
||||
'cta_text' => 'Learn More',
|
||||
'cta_link' => '/services/catalogue-management'
|
||||
'cta_link' => '/services/catalogue-management',
|
||||
'cta_top' => '100%',
|
||||
'cta_left' => '75%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/rolodex-banner.jpg',
|
||||
|
|
@ -30,7 +42,10 @@ $sliderImages = [
|
|||
'title' => 'Contact Management Made Easy',
|
||||
'description' => 'Keep track of important contacts and information in one place.',
|
||||
'cta_text' => 'Get Started',
|
||||
'cta_link' => '/services/contact-management'
|
||||
'cta_link' => '/services/contact-management',
|
||||
'cta_top' => '20%',
|
||||
'cta_left' => '60%',
|
||||
'text_color' => 'black'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/oldmic.jpg',
|
||||
|
|
@ -38,15 +53,19 @@ $sliderImages = [
|
|||
'title' => 'Broadcast Your Message',
|
||||
'description' => 'Reach your audience with high-quality audio and video solutions.',
|
||||
'cta_text' => 'Explore Options',
|
||||
'cta_link' => '/services/media-solutions'
|
||||
'cta_link' => '/services/media-solutions',
|
||||
'cta_top' => '56%',
|
||||
'cta_left' => '65%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/library.jpg',
|
||||
'src' => '/assets/images/ancient-library-shelf-crop1.jpg',
|
||||
'alt' => 'Library Archives',
|
||||
'title' => 'Knowledge Preservation',
|
||||
'description' => 'Store and manage your records securely and efficiently.',
|
||||
'cta_text' => 'Discover More',
|
||||
'cta_link' => '/services/data-archiving'
|
||||
'cta_link' => '/services/data-archiving',
|
||||
'cta_top' => '50%',
|
||||
'cta_left' => '50%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/combosafedoor.jpg',
|
||||
|
|
@ -54,12 +73,17 @@ $sliderImages = [
|
|||
'title' => 'Secure Your Data',
|
||||
'description' => 'Advanced encryption and security solutions for your digital assets.',
|
||||
'cta_text' => 'Protect Now',
|
||||
'cta_link' => '/services/cybersecurity'
|
||||
'cta_link' => '/services/cybersecurity',
|
||||
'cta_top' => '56%',
|
||||
'cta_left' => '35%'
|
||||
]
|
||||
];
|
||||
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="hero-slider">
|
||||
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
|
|
@ -72,62 +96,15 @@ $sliderImages = [
|
|||
<div class="carousel-inner">
|
||||
<?php foreach ($sliderImages as $index => $image): ?>
|
||||
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
|
||||
<div class="hero-background" style="background-image: url('<?php echo $image['src']; ?>');">
|
||||
<div class="carousel-caption">
|
||||
<img src="<?php echo $image['src']; ?>" alt="<?php echo $image['alt']; ?>" class="d-block w-100 hero-image">
|
||||
<div class="carousel-caption"
|
||||
style="color: <?php echo $image['text_color'] ?? 'white'; ?>; position: absolute; top: <?php echo $image['cta_top']; ?>; left: <?php echo $image['cta_left']; ?>; transform: translate(-50%, -50%);">
|
||||
<h2><?php echo $image['title']; ?></h2>
|
||||
<p><?php echo $image['description']; ?></p>
|
||||
<a href="<?php echo $image['cta_link']; ?>" class="btn btn-primary"> <?php echo $image['cta_text']; ?> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero-slider {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.carousel-caption {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.carousel-indicators button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
margin: 3px;
|
||||
}
|
||||
/* Define individual colors for each indicator */
|
||||
.indicator-color-1 { background-color: #ff5733; }
|
||||
.indicator-color-2 { background-color: #33ff57; }
|
||||
.indicator-color-3 { background-color: #3357ff; }
|
||||
.indicator-color-4 { background-color: #ff33a6; }
|
||||
.indicator-color-5 { background-color: #ffcc33; }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Unit Tests for Wizdom Networks Components
|
||||
*
|
||||
* This test suite validates the core components, utilities, and partials developed so far.
|
||||
* Uses PHPUnit for structured unit testing.
|
||||
*/
|
||||
|
||||
use PHPUnit\Framework\TestCase;
|
||||
use WizdomNetworks\WizeWeb\Utils\Logger;
|
||||
use WizdomNetworks\WizeWeb\Utils\Validator;
|
||||
|
||||
class ComponentTests extends TestCase
|
||||
{
|
||||
/**
|
||||
* Test Main Layout Rendering with Debugging
|
||||
*/
|
||||
public function testMainLayoutRendersCorrectly()
|
||||
{
|
||||
ob_start();
|
||||
|
||||
// Debugging: Log entry into the test
|
||||
error_log("[DEBUG] Entering testMainLayoutRendersCorrectly");
|
||||
|
||||
// Define required variables to prevent errors
|
||||
$title = 'Test Page';
|
||||
$content = '<p>Test Content</p>';
|
||||
$showHero = false;
|
||||
$showSlider = null;
|
||||
|
||||
// Define a Mock Controller class with a render method
|
||||
$mockController = new class {
|
||||
public function render($view, $data = []) {
|
||||
error_log("[DEBUG] Render called for view: $view");
|
||||
return "<!-- Mocked Render: $view -->";
|
||||
}
|
||||
};
|
||||
|
||||
// Execute main.php within a function scope to use the mock controller
|
||||
$output = (function () use ($mockController, $title, $content, $showHero, $showSlider) {
|
||||
ob_start();
|
||||
$this->controller = $mockController; // Assign mock controller for $this reference
|
||||
include __DIR__ . '/../resources/views/layouts/main.php';
|
||||
return ob_get_clean();
|
||||
})();
|
||||
|
||||
// Debugging: Log output from the test
|
||||
error_log("[DEBUG] Test Output: " . substr($output, 0, 500)); // Log first 500 chars
|
||||
|
||||
$this->assertStringContainsString('<body>', $output);
|
||||
$this->assertStringContainsString('<header>', $output);
|
||||
$this->assertStringContainsString('<footer>', $output);
|
||||
}
|
||||
|
||||
// Other tests remain unchanged...
|
||||
}
|
||||
|
||||
?>
|
||||
Loading…
Reference in New Issue