index.php - master - ValeriaEr/Laba

index.php
227 строк6 KB
ValeriaEr
first commit
22 ноя 2025, 14:24
22 ноя 2025, 14:244391421
<?php ?>
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Романтический гид</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">

<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background: #ffe6f0;
    color: #222;
}
header {
    background: #ff66b2;
    padding: 30px;
    color: white;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
}
main {
    max-width: 900px;
    margin: 40px auto;
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Бюджет */
label {
    display: block;
    margin: 15px 0 5px;
    font-weight: 600;
}
input[type=range] {
    width: 100%;
    margin: 15px 0;
}

/* Карусели */
.carousel {
    display: flex;
    overflow-x: auto;
    padding: 10px 0;
    gap: 15px;
}
.carousel::-webkit-scrollbar {
    display: none;
}
.card {
    flex: 0 0 auto;
    background: #ffe6f0;
    border-radius: 16px;
    padding: 20px;
    min-width: 120px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}
.card.selected {
    border: 3px solid #ff66b2;
    background: #ffcce6;
}

/* Кнопка */
button {
    margin-top: 25px;
    width: 100%;
    padding: 16px;
    background: #ff66b2;
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}
button:hover {
    background: #e6559c;
}

/* Результаты */
#list .place {
    background: #fff0f8;
    padding: 18px;
    border-radius: 16px;
    margin-bottom: 18px;
    border-left: 6px solid #ff66b2;
}
.place h3 { margin: 0 0 8px; }
.place p { margin: 5px 0; }
.place button {
    margin-top: 8px;
    background: #ff66b2;
    color: white;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border: none;
}
</style>
</head>
<body>

<header>Романтический гид</header>

<main>
    <label for="budget">Бюджет (₽): <span id="budgetValue">1000</span></label>
    <input type="range" id="budget" min="0" max="100000" step="500" value="1000">

    <label>Предпочтения</label>
    <div class="carousel" id="categoryCarousel">
        <div class="card" data-value="cafe">🍽 Рестораны</div>
        <div class="card" data-value="culture">🎭 Культура</div>
        <div class="card" data-value="active">🏃 Активный отдых</div>
        <div class="card" data-value="entertainment">🎪 Развлечения</div>
        <div class="card" data-value="nature">🌳 Природа</div>
        <div class="card" data-value="history">🏛 История</div>
    </div>

    <label>Продолжительность</label>
    <div class="carousel" id="durationCarousel">
        <div class="card" data-value="3">3 часа</div>
        <div class="card" data-value="6">6 часов</div>
        <div class="card" data-value="9">9 часов</div>
    </div>

    <button id="searchBtn">Искать места</button>

    <section id="results">
      <h2>Найденные места:</h2>
      <div id="list"></div>
    </section>
</main>

<script>
// Обновляем значение ползунка
const budgetSlider = document.getElementById("budget");
const budgetValue = document.getElementById("budgetValue");
budgetSlider.addEventListener("input", () => {
    budgetValue.textContent = budgetSlider.value;
});

// Карточки выбора
function initCarouselSelection(id) {
    const cards = document.querySelectorAll(`#${id} .card`);
    cards.forEach(c => c.addEventListener("click", () => {
        cards.forEach(x => x.classList.remove("selected"));
        c.classList.add("selected");
    }));
}
initCarouselSelection("categoryCarousel");
initCarouselSelection("durationCarousel");

document.getElementById("searchBtn").addEventListener("click", async () => {
    const budget = budgetSlider.value;
    const categoryCard = document.querySelector("#categoryCarousel .card.selected");
    const durationCard = document.querySelector("#durationCarousel .card.selected");

    if(!categoryCard || !durationCard){
        alert("Выберите предпочтение и длительность!");
        return;
    }

    const category = categoryCard.dataset.value;
    const duration = durationCard.dataset.value;

    // фиксированный город Таганрог
    const lat = 47.2362;
    const lon = 38.8969;

    const payload = { budget, category, duration, lat, lon };

    const res = await fetch('search.php', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify(payload)
    });

    // Выводим в консоль весь сырой ответ
    const rawText = await res.text();
    console.log("Raw API response:", rawText);

    let data;
    try { data = JSON.parse(rawText); }
    catch {
        document.getElementById('list').innerHTML = "<p style='color:red'>Ошибка: сервер вернул не JSON</p>";
        return;
    }

    const list = document.getElementById('list');
    list.innerHTML = '';
    if (!data.places || data.places.length===0){
        list.innerHTML = '<p>Ничего не найдено.</p>';
        return;
    }

    data.places.forEach(p => {
    const name = p.name && p.name.trim() !== "" ? p.name : "Без названия";
    const address = p.address && p.address.trim() !== "" ? p.address : "Адрес не указан";
    const yandexUrl = `https://yandex.ru/maps/?ll=${p.lon},${p.lat}&z=17&pt=${p.lon},${p.lat},pm2rdm`;


    const el = document.createElement('div');
    el.className = 'place';
    el.innerHTML = `
        <h3>${name}</h3>
        <p>${address}</p>
        <p>Категория: ${p.category}</p>
        ${p.url ? `<p><a href="${p.url}" target="_blank">Сайт</a></p>` : ""}
        <button onclick="window.open('${yandexUrl}','_blank')">Открыть на карте</button>
    `;
    list.appendChild(el);
});

});
</script>

</body>
</html>