Enhanced Search Interface - Copy this Html, Bootstrap Component to your project
Improve this style: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Поиск ресторана</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background: linear gradient(to right, #74ebd5, #ACB6E5); } .container { background color: white; border radius: 10px; padding: 30px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .btn primary { background color: #007bff; border: none; } .result card { border radius: 10px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin bottom: 20px; } </style> </head> <body> <div class="container mt 5"> <h1 class="text center mb 4">Поиск ресторана</h1> <form id="searchForm"> <div class="mb 3"> <label for="query" class="form label">Название ресторана</label> <input type="text" class="form control" id="query" placeholder="Введите название"> </div> <div class="mb 3"> <label for="location" class="form label">Местоположение</label> <select class="form control" id="location"> <option value="msk">Москва</option> <option value="spb">Санкт Петербург</option> </select> </div> <button type="submit" class="btn btn primary btn lg w 100">Поиск</button> </form> <div id="result" class="mt 5"></div> </div> <script> document.getElementById('searchForm').addEventListener('submit', function(event) { event.preventDefault(); const query = document.getElementById('query').value; const location = document.getElementById('location').value; fetch(`/restaurant/?q=${query}&location=${location}`) .then(response => response.json()) .then(data => { let result = '<h3>Результаты поиска:</h3>'; if (data.length > 0) { data.forEach(restaurant => { result += ` <div class="result card"> <h4>${restaurant.name}</h4> <p><strong>Адрес:</strong> ${restaurant.address}</p> </div>`; }); } else { result += '<p>Рестораны не найдены.</p>'; } document.getElementById('result').innerHTML = result; }); }); </script> </body> </html>
