https://search.homesearchtab.com/

ID de l'analyse :
b9f86d96-1e97-4bf1-bff7-0d4aea787b74Terminée
URL soumise :
https://search.homesearchtab.com/
Fin du rapport :

Liens : 0 trouvé(s)

Variables JavaScript : 8 trouvée(s)

Messages de journal de console : 1 trouvé(s)

HTML

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Search</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css" integrity="sha512-KXol4x3sVoO+8ZsWPFI/r5KBVB/ssCGB5tsv2nVOKwLg33wTFP3fmnXa47FdSVIshVTgsYk/1734xSk9aFIa4A==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <style>
        a,
        a:hover {
            color: white;
        }

        body {
            background-color: #555;
            font-family: "Segoe UI", Segoe, Tahoma, Arial, Verdana, sans-serif;
        }

        body #cover {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 100vh;
            overflow: hidden;
        }

        body #cover .grid {
            height: 100%;
        }

        body #cover .grid .icon {
            color: white;
        }

        body #cover #bottom-bar {
            position: fixed;
            bottom: 20px;
            right: 20px;
        }

        .search-container {
            position: relative;
        }

        #search-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }

        #search-icon {
            cursor: pointer;
            pointer-events: all;
        }

        #suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            border-top: none;
            z-index: 1000;
            display: none;
            border-radius: 0 0 15px 15px;
        }

        .suggestion-item {
            padding: 10px;
            cursor: pointer;
            color: black;
            text-align: left;
        }

        .suggestion-item:hover {
            background-color: #f0f0f0;
        }

        #search-field {
            border-radius: 25px;
        }

        body.suggestions #search-field {
            border-radius: 25px 25px 0 0;
        }

        body.suggestions #suggestions {
            display: block;
        }

        .infoNav {
            margin-right: 0.25rem;
            border-radius: 6px;
            position: relative;
            cursor: pointer;
            background: rgba(34, 34, 34, .9);
            height: 35px;
            display: inline-block;
            color: #fff;
            top: 0;
            right: 0;
            white-space: nowrap;
            position: absolute;
            padding: 6px 14px 0 40px;
        }

        .leftNav,
        .rightNav {
            margin-right: 0.25rem;
            border-radius: 6px;
            position: relative;
            cursor: pointer;
            background: rgba(34, 34, 34, .9);
            width: 35px;
            height: 35px;
            display: inline-block;
        }

        .leftNav:after {
            transform: scale(.25) translateX(25%) rotate(45deg);
        }

        .rightNav:after {
            transform: scale(.25) translateX(-25%) rotate(225deg);
        }

        .leftNav:after,
        .rightNav:after {
            border-radius: 6px;
            border-left: 6px solid rgba(255, 255, 255, .8);
            border-bottom: 6px solid rgba(255, 255, 255, .8);
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            content: '';
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="pusher" id="cover" style="background-image: url(&quot;img/american_black_bear.webp&quot;);">
        <div class="ui top aligned center aligned grid container">
            <div class="column">
                <div class="row" style="height: 200px;"></div>
                <div class="row">
                    <div class="ui middle aligned center aligned grid container">
                        <div class="middle aligned center aligned nine wide column">
                            <form method="get" action="/search" id="search-form" autocomplete="off">
                                <div class="ui fluid large icon input search-container">
                                    <label for="search-field"></label>
                                    <i class="icon" id="search-icon">
                                        <svg viewBox="0 0 25 25" style="height:20px;margin:11px 10px 0 0;">
                                            <path stroke="#007DAA" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M23.75 23.75l-9-9"></path>
                                            <circle stroke="#007DAA" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" cx="9" cy="9" r="7.75" fill="none"></circle>
                                            <path fill="none" d="M25 25h-25v-25h25z"></path>
                                        </svg>
                                    </i>
                                    <input type="text" name="p" id="search-field" placeholder="Search the web" autocomplete="off">
                                    <div class="suggestions" id="suggestions"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom-bar">
            <div style="display: inline-block;position: relative;height: 35px;">
                <a id="infoNav" class="infoNav" href="/search?p=American%20Black%20Bear">
                    <svg class="mappin" fill="white" style="position: absolute;top:9px;left: 15px;" height="16" width="16" viewBox="0 0 12 12" aria-hidden="true" role="presentation">
                        <path d="M0 0h12v12h-12z" fill="none"></path>
                        <path d="M6.5 3a1.5 1.5 0 1 0 1.5 1.5 1.5 1.5 0 0 0-1.5-1.5zm0-3a4.5 4.5 0 0 0-4.5 4.5 5.607 5.607 0 0 0 .087.873c.453 2.892 2.951 5.579 3.706 6.334a1 1 0 0 0 1.414 0c.755-.755 3.253-3.442 3.706-6.334a5.549 5.549 0 0 0 .087-.873 4.5 4.5 0 0 0-4.5-4.5zm3.425 5.218c-.36 2.296-2.293 4.65-3.425 5.782-1.131-1.132-3.065-3.486-3.425-5.782a4.694 4.694 0 0 1-.075-.718 3.5 3.5 0 0 1 7 0 4.634 4.634 0 0 1-.075.718z">
                        </path>
                    </svg>
                    <span id="headline">Have I been sleeping too long?</span>
                </a>
            </div>

            <a href="#" id="leftNav" class="leftNav" role="button" title="Previous image"></a>
            <a href="#" id="rightNav" class="rightNav" role="button" title="Next image"></a>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(() => {
            $("#search-field").focus();

            $(document).on("click", "#search-icon", () => {
                $("#search-form").trigger("submit");
            });

            $(document).on("submit", "#search-form", event => {
                const searchText = $("#search-field").val();
                if (searchText === "") {
                    event.preventDefault();
                    return false;
                }
            });

            $(document).on("click", "#wallpapers-button", () => {
                $(".ui.sidebar").sidebar("toggle");
            });

            $(document).on("click", ".wallpaper-choice", event => {
                const target = $(event.target);
                const wallpaper = target.is("img") ? target.closest("a").data("id") : target.data("id");
                $("#cover").removeClass().addClass("pusher").addClass(wallpaper);
                setCookie("wallpaper", wallpaper);
            });
        });

        function setCookie(name, value, options = {}) {
            options = {
                path: "/",
                ...options
            };

            if (options.expires instanceof Date) {
                options.expires = options.expires.toUTCString();
            }

            let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

            for (let optionKey in options) {
                updatedCookie += "; " + optionKey;
                let optionValue = options[optionKey];
                if (optionValue !== true) {
                    updatedCookie += "=" + optionValue;
                }
            }

            document.cookie = updatedCookie;
        }


        const images = [
            { image: "angel_falls_venezuela.webp", title: "Angel Falls, Venezuela", headline: "Don't just dream it, stream it!" },
            { image: "Arches_National_Park.webp", title: "Arches National Park", headline: "A work of arch" },
            { image: "Apple_tree.webp", title: "Apple Tree", headline: "Canopy of blossoms" },
            { image: "Bowling_Ball_Beach.webp", title: "Bowling Ball Beach", headline: "Rock 'n' bowl" },
            { image: "World_Art_Day.webp", title: "World Art Day", headline: "Bouncing into creativity" },
            { image: "Union_Square_Manhattan.webp", title: "Union Square Manhattan", headline: "Sundown on Union Square" },
            { image: "american_black_bear.webp", title: "American Black Bear", headline: "Have I been sleeping too long?" },
        ];



        function setImage(index) {
            window.currentImage = index;
            $("#cover").css("background-image", "url('img/" + images[index].image + "')");
            $("#headline").text(images[index].headline);
            $("#infoNav").attr("href", $("#search-form").attr("action") + "?p=" + encodeURIComponent(images[index].title));
        }


        $(document).ready(function () {
            const searchInput = $('#search-field');
            const suggestionsContainer = $('#suggestions');

            setImage(images.length - 1);

            $("#leftNav").click(function (event) {
                event.preventDefault();
                if (window.currentImage > 0) {
                    setImage(window.currentImage - 1);
                }
            });

            $("#rightNav").click(function (event) {
                event.preventDefault();
                if (window.currentImage < images.length - 1) {
                    setImage(window.currentImage + 1);
                }
            });


            $('#search-icon').on('click', function () {
                const query = $(this).val().trim();
                if (query.trim() === '') {
                    return;
                }
                $('#search-form').submit();
            });

            searchInput.on('input', function () {
                const query = $(this).val().trim();
                if (query.trim() === '') {
                    $(document.body).removeClass('suggestions');
                    suggestionsContainer.html('');
                    return;
                }
                fetchSuggestions(query);
            });

            suggestionsContainer.on('click', '.suggestion-item', function () {
                const suggestion = $(this).text();
                searchInput.val(suggestion);
                $('#search-form').submit();
            });

            $(document).on('click', function (e) {
                if (!$(e.target).closest('#suggestions').length && !$(e.target).is('#search-field')) {
                    $(document.body).removeClass('suggestions');
                    suggestionsContainer.html('');
                }
            });

            function fetchSuggestions(query) {
                $.getJSON('https://api.bing.com/osjson.aspx?JsonType=callback&JsonCallback=?', { query: query })
                    .then(data => {
                        const suggestions = data[1];
                        if (suggestions.length > 0) {
                            $(document.body).addClass('suggestions');
                        } else {
                            $(document.body).removeClass('suggestions');
                        }
                        const html = suggestions.map(suggestion => `<div class="suggestion-item">${suggestion}</div>`).join('');
                        suggestionsContainer.html(html);
                    })
                    .catch(error => {
                        console.error('Error fetching suggestions:', error);
                    });
            }
        });
    </script>


</body></html>