صفحه اصلی تست ۹: تفاوت میان نسخه‌ها

نسخهٔ ‏۲۱ مهٔ ۲۰۲۳، ساعت ۱۸:۳۲

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ویکیجو خوش آمدید</title>
 <style>
   body {
     font-family: IRANSans, Arial, sans-serif;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }

   .header {
     background-color: #f8f9fa;
     padding: 10px;
   }

   .header img {
     height: 240px;
   }

   .search-box {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     direction: rtl;
   }

   .search-box input[type="text"] {
     font-size: 18px;
     padding: 10px;
     width: 400px;
     max-width: 100%;
     border: 1px solid #dfe1e5;
     border-radius: 8px;
   }

   .search-box input[type="submit"] {
     font-size: 18px;
     padding: 10px 20px;
     background-color: #007bff;
     color: #fff;
     border: none;
     cursor: pointer;
     border-radius: 4px;
     margin-right: 10px;
   }

   .search-box ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     text-align: left;
     position: absolute;
     width: 400px;
     background-color: #fff;
     border: 1px solid #f0f0f0;
     border-top: none;
     border-radius: 0 0 8px 8px;
     display: none;
   }

   .search-box ul li {
     padding: 10px;
     cursor: pointer;
   }

   .search-box ul li:hover {
     background-color: #f0f0f0;
   }
 </style>
 <script>
   // Function to handle search suggestion
   function showSuggestions() {
     var input = document.getElementById("search-input");
     var suggestURL = "https://wikijoo.ir/api.php?action=opensearch&format=json&search=" + input.value;

     fetch(suggestURL)
       .then(function(response) {
         return response.json();
       })
       .then(function(data) {
         var suggestions = data[1];
         var suggestionList = document.getElementById("suggestions");

         suggestionList.innerHTML = "";
         suggestions.forEach(function(suggestion) {
           var listItem = document.createElement("li");
           listItem.textContent = suggestion;
           listItem.addEventListener("click", function() {
             input.value = suggestion;
             suggestionList.style.display = "none";
             document.forms[0].submit();
           });
           suggestionList.appendChild(listItem);
         });

         suggestionList.style.display = "block";
       });
   }
 </script>

</head> <body>

   <a href="https://wikijoo.ir/"><img src="https://wikijoo.ir/resources/assets/Wikijoo.png" alt="WikiJoo Logo"></a>

   <form action="https://wikijoo.ir/index.php" method="get">
     <input type="text" id="search-input" name="search" placeholder="در بیش از ۸۰ هزار مقاله جستجو کنید..." required oninput="showSuggestions()">
     <input type="submit" value="جستجو">

   </form>

</body> </html>