📁 File Manager

Dosya Düzenle: search.php

<?php
/*
|--------------------------------------------------------------------------
| Mangaldai College - Google Search Results
|--------------------------------------------------------------------------
| Search page matching the main index.php design
|--------------------------------------------------------------------------
*/

$q = isset($_GET['q']) ? trim($_GET['q']) : '';
?>
<!DOCTYPE html>
<html lang="en">

<head>

<link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
    >

<link
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
        rel="stylesheet"
    >

<link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet"
    >

<link rel="stylesheet" href="style2.css">

<style>

/* =========================================================
           SEARCH PAGE
        ========================================================= */

body {
            background: #f5f7fa;
            font-family: 'Poppins', sans-serif;
        }

/* Main search page wrapper */

.search-page {
            min-height: calc(100vh - 300px);
            padding: 70px 20px 100px;
            background:
                linear-gradient(
                    180deg,
                    #eef3f8 0%,
                    #ffffff 45%,
                    #f5f7fa 100%
                );
        }

.search-container {
            max-width: 1250px;
            margin: 0 auto;
        }

/* =========================================================
           HEADER
        ========================================================= */

.search-heading {
            text-align: center;
            margin-bottom: 35px;
        }

.search-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;

color: #d4af37;

font-size: 13px;
            font-weight: 700;

text-transform: uppercase;
            letter-spacing: 2px;

margin-bottom: 10px;
        }

.search-eyebrow-line {
            width: 35px;
            height: 2px;
            background: #d4af37;
        }

.search-title {
            margin: 0;

color: #0f2740;

font-size: clamp(
                1.8rem,
                4vw,
                2.8rem
            );

font-weight: 800;
        }

.search-title span {
            color: #d4af37;
        }

.search-subtitle {
            margin-top: 10px;

color: #657587;

font-size: 14px;
        }

/* =========================================================
           SEARCH BOX
        ========================================================= */

.search-box-wrapper {
            max-width: 900px;
            margin: 0 auto 30px;
        }

.search-box {
            display: flex;
            align-items: center;

background: #ffffff;

border: 1px solid #dce3ea;

border-radius: 14px;

padding: 7px;

box-shadow:
                0 12px 35px rgba(15, 39, 64, 0.10);
        }

.search-box-icon {
            width: 52px;

display: flex;
            align-items: center;
            justify-content: center;

color: #d4af37;

font-size: 21px;
        }

.search-box input {
            flex: 1;

border: 0;
            outline: none;

background: transparent;

color: #0f2740;

font-family: 'Poppins', sans-serif;

font-size: 15px;

padding: 14px 5px;
        }

.search-box input::placeholder {
            color: #9aa6b2;
        }

.search-submit {
            border: 0;

background: #0f2740;

color: #ffffff;

padding: 13px 24px;

border-radius: 10px;

font-family: 'Poppins', sans-serif;

font-size: 14px;

font-weight: 600;

cursor: pointer;

transition:
                background .2s ease,
                transform .2s ease;
        }

.search-submit:hover {
            background: #173a5e;
            transform: translateY(-1px);
        }

/* =========================================================
           CLOSE / HOME BUTTON
        ========================================================= */

.search-actions {
            display: flex;
            justify-content: center;
            margin-bottom: 35px;
        }

.search-home-btn {
            display: inline-flex;

align-items: center;
            gap: 8px;

padding: 10px 18px;

border-radius: 9px;

border: 1px solid #d8e0e8;

background: #ffffff;

color: #0f2740;

text-decoration: none;

font-size: 13px;

font-weight: 600;

box-shadow: 0 5px 18px rgba(15,39,64,.07);

transition: all .2s ease;
        }

.search-home-btn:hover {
            background: #0f2740;
            color: #ffffff;
            border-color: #0f2740;
        }

/* =========================================================
           GOOGLE RESULTS CARD
        ========================================================= */

.google-results-card {
            background: #ffffff;

border-radius: 18px;

border: 1px solid #e1e7ed;

box-shadow:
                0 15px 45px rgba(15, 39, 64, 0.08);

padding: 25px;

overflow: hidden;
        }

/* =========================================================
           GOOGLE CSE CUSTOMIZATION
        ========================================================= */

.gsc-control-cse {
            font-family: 'Poppins', sans-serif !important;

border: none !important;

padding: 0 !important;

background: transparent !important;
        }

.gsc-control-cse,
        .gsc-control-cse * {
            font-family: 'Poppins', sans-serif !important;
        }

.gsc-result {
            border-bottom: 1px solid #edf0f3 !important;
            padding: 18px 0 !important;
        }

.gs-title,
        .gs-title b {
            color: #0f4c81 !important;
            font-size: 17px !important;
        }

.gs-visibleUrl {
            color: #777 !important;
            font-size: 12px !important;
        }

.gs-snippet {
            color: #5f6b76 !important;
            font-size: 13px !important;
            line-height: 1.7 !important;
        }

.gsc-result-info {
            color: #687786 !important;
            font-size: 12px !important;
        }

.gsc-cursor-page {
            color: #0f2740 !important;
        }

.gsc-cursor-current-page {
            color: #d4af37 !important;
        }

/* Hide Google search box inside results */

.gsc-search-box {
            display: none !important;
        }

/* =========================================================
           NO QUERY MESSAGE
        ========================================================= */

.search-empty {
            text-align: center;

padding: 70px 20px;

color: #657587;
        }

.search-empty-icon {
            width: 70px;
            height: 70px;

margin: 0 auto 20px;

border-radius: 50%;

display: flex;
            align-items: center;
            justify-content: center;

background: #eef3f8;

color: #d4af37;

font-size: 30px;
        }

.search-empty h3 {
            color: #0f2740;

font-size: 20px;

font-weight: 700;

margin-bottom: 8px;
        }

.search-empty p {
            font-size: 13px;
            margin: 0;
        }

/* =========================================================
           MOBILE
        ========================================================= */

@media (max-width: 768px) {

.search-page {
                padding: 45px 14px 70px;
            }

.search-heading {
                margin-bottom: 25px;
            }

.search-box {
                padding: 5px;
            }

.search-box-icon {
                width: 42px;
                font-size: 18px;
            }

.search-box input {
                min-width: 0;
                font-size: 13px;
                padding: 12px 3px;
            }

.search-submit {
                padding: 11px 15px;
                font-size: 12px;
            }

.google-results-card {
                padding: 15px;
                border-radius: 13px;
            }

.gs-title,
            .gs-title b {
                font-size: 15px !important;
            }

}

@media (max-width: 480px) {

.search-submit span {
                display: none;
            }

.search-submit {
                width: 44px;
                height: 42px;

padding: 0;

display: flex;
                align-items: center;
                justify-content: center;
            }

.search-submit i {
                margin: 0 !important;
            }

}
        
        
        
        
        .search-home-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;

padding: 10px 18px;

border-radius: 9px;
    border: 1px solid #d8e0e8;

background: #ffffff;
    color: #0f2740;

text-decoration: none;

font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;

box-shadow: 0 5px 18px rgba(15,39,64,.07);

transition: all .2s ease;
}

.search-home-btn:hover {
    background: #0f2740;
    color: #ffffff;
    border-color: #0f2740;
}

</style>

<script async
        src="https://cse.google.com/cse.js?cx=f52fb643460254a22">
    </script>

</head>

<body>

<?php include 'includes/page_head.php'; ?>

<?php include 'includes/utility_bar.php'; ?>

<?php include 'includes/header.php'; ?>

<?php include 'includes/navbar.php'; ?>

<span>Explore Mangaldai College</span>

</div>

<h1 class="search-title">
                Search <span>Mangaldai College</span>
            </h1>

<p class="search-subtitle">
                Find notices, departments, courses, events and other information
            </p>

</div>

<input
                    type="search"
                    name="q"
                    value="<?php echo htmlspecialchars($q); ?>"
                    placeholder="Search courses, notices, departments..."
                    aria-label="Search Mangaldai College"
                    autocomplete="off"
                >

<span>Search</span>

</button>

</form>

</div>

<button
        type="button"
        class="search-home-btn"
        onclick="window.location.href='index.php';"
    >
        <i class="bi bi-x-lg"></i>
        Close Search
    </button>

</div>

<?php if ($q !== ''): ?>

<?php else: ?>

</div>

<h3>
                        What are you looking for?
                    </h3>

<p>
                        Search the Mangaldai College website using the search box above.
                    </p>

</div>

<?php endif; ?>

</div>

</main>

(function () {

const params = new URLSearchParams(window.location.search);

const query = params.get('q');

if (!query) return;

/*
     * Google CSE reads the URL query parameter automatically
     * in most configurations.
     *
     * This additional fallback attempts to trigger the search
     * after the Google CSE element has loaded.
     */

let attempts = 0;

const timer = setInterval(function () {

attempts++;

const input =
            document.querySelector(
                '.gsc-input-box input.gsc-input'
            );

if (input) {

input.value = query;

const searchButton =
                document.querySelector(
                    '.gsc-search-button-v2'
                );

if (searchButton) {

clearInterval(timer);

/*
                 * Only trigger if results are not already loaded.
                 */

const results =
                    document.querySelector(
                        '.gsc-results'
                    );

if (!results ||
                    results.children.length === 0) {

searchButton.click();

}

/*
         * Stop checking after approximately 10 seconds.
         */

if (attempts > 50) {

clearInterval(timer);

}

}, 200);

})();

</script>

const closeButton = e.target.closest('.gsc-results-close-btn');

if (closeButton) {

e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

window.location.href = 'index.php';
    }

}, true);
</script>

</body>

</html>

İptal