Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CargoContainer - Поиск контейнерных перевозок по СНГ</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .autocomplete-items { | |
| position: absolute; | |
| border: 1px solid #d4d4d4; | |
| border-bottom: none; | |
| border-top: none; | |
| z-index: 99; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| } | |
| .autocomplete-items div { | |
| padding: 10px; | |
| cursor: pointer; | |
| background-color: #fff; | |
| border-bottom: 1px solid #d4d4d4; | |
| } | |
| .autocomplete-items div:hover { | |
| background-color: #e9e9e9; | |
| } | |
| .autocomplete-active { | |
| background-color: DodgerBlue ; | |
| color: #ffffff; | |
| } | |
| .admin-panel { | |
| display: none; | |
| } | |
| .admin-panel.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-blue-800 text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shipping-fast text-3xl"></i> | |
| <h1 class="text-2xl font-bold">CargoContainer</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-200">Главная</a> | |
| <a href="#" class="hover:text-blue-200">Тарифы</a> | |
| <a href="#" class="hover:text-blue-200">Партнерам</a> | |
| <a href="#" class="hover:text-blue-200">Контакты</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="admin-toggle" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg hidden"> | |
| Админка | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg"> | |
| Войти | |
| </button> | |
| </div> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Search Section --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row md:space-x-4 mb-6"> | |
| <div class="w-full md:w-1/3 mb-4 md:mb-0"> | |
| <label class="block text-gray-700 mb-2">Станция отправления</label> | |
| <div class="autocomplete relative"> | |
| <input type="text" id="departure-station" placeholder="Москва, Казань..." | |
| class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/3 mb-4 md:mb-0"> | |
| <label class="block text-gray-700 mb-2">Станция назначения</label> | |
| <div class="autocomplete relative"> | |
| <input type="text" id="arrival-station" placeholder="Алматы, Ташкент..." | |
| class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/3"> | |
| <label class="block text-gray-700 mb-2">Тип контейнера</label> | |
| <select id="container-type" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="20ft">20 футов (стандартный)</option> | |
| <option value="40ft">40 футов (стандартный)</option> | |
| <option value="20ft_high">20 футов (High Cube)</option> | |
| <option value="40ft_high">40 футов (High Cube)</option> | |
| <option value="20ft_ref">20 футов (рефрижераторный)</option> | |
| <option value="40ft_ref">40 футов (рефрижераторный)</option> | |
| <option value="20ft_open">20 футов (открытый верх)</option> | |
| <option value="40ft_open">40 футов (открытый верх)</option> | |
| <option value="20ft_flat">20 футов (платформа)</option> | |
| <option value="40ft_flat">40 футов (платформа)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row md:space-x-4 mb-6"> | |
| <div class="w-full md:w-1/3 mb-4 md:mb-0"> | |
| <label class="block text-gray-700 mb-2">Дата отправления</label> | |
| <div class="flex space-x-2"> | |
| <input type="date" id="departure-date-from" | |
| class="w-1/2 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <input type="date" id="departure-date-to" | |
| class="w-1/2 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/3 mb-4 md:mb-0"> | |
| <label class="block text-gray-700 mb-2">Дата прибытия</label> | |
| <div class="flex space-x-2"> | |
| <input type="date" id="arrival-date-from" | |
| class="w-1/2 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <input type="date" id="arrival-date-to" | |
| class="w-1/2 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/3 flex items-end space-x-4"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="dangerous-cargo" class="w-5 h-5"> | |
| <label for="dangerous-cargo" class="ml-2 text-gray-700">Опасный груз</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="lcl-cargo" class="w-5 h-5"> | |
| <label for="lcl-cargo" class="ml-2 text-gray-700">Сборный груз (LCL)</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="search-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300"> | |
| Найти контейнеры | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Найдено 24 варианта</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Сначала дешевле</button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Сначала быстрее</button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Фильтры</button> | |
| </div> | |
| </div> | |
| <div id="results-container" class="space-y-4"> | |
| <!-- Results will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Admin Panel --> | |
| <div id="admin-panel" class="admin-panel container mx-auto px-4 py-8 bg-gray-100 rounded-lg shadow-md mt-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Административная панель</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Настройки поиска</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Минимальная цена (USD)</label> | |
| <input type="number" id="min-price" value="500" class="w-full p-2 border border-gray-300 rounded"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Максимальная цена (USD)</label> | |
| <input type="number" id="max-price" value="5000" class="w-full p-2 border border-gray-300 rounded"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Комиссия (%)</label> | |
| <input type="number" id="commission" value="5" class="w-full p-2 border border-gray-300 rounded"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Типы контейнеров</h3> | |
| <div id="container-types-list" class="space-y-2"> | |
| <!-- Container types will be loaded here --> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <input type="text" id="new-container-type" placeholder="Новый тип" class="flex-1 p-2 border border-gray-300 rounded"> | |
| <button id="add-container-type" class="bg-blue-600 text-white px-4 py-2 rounded">Добавить</button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Настройки вебхуков</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">URL вебхука поиска</label> | |
| <input type="text" id="webhook-url" value="https://api.cargocontainer.com/webhook/search" class="w-full p-2 border border-gray-300 rounded"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Ключ API</label> | |
| <input type="text" id="api-key" value="cargo_12345" class="w-full p-2 border border-gray-300 rounded"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Логирование</label> | |
| <select id="logging-level" class="w-full p-2 border border-gray-300 rounded"> | |
| <option value="debug">Отладка</option> | |
| <option value="info" selected>Информация</option> | |
| <option value="error">Ошибки</option> | |
| <option value="none">Нет</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <h3 class="text-lg font-semibold mb-4">Станции и маршруты</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Импорт станций (JSON)</label> | |
| <textarea id="import-stations" class="w-full p-2 border border-gray-300 rounded h-32" placeholder='[{"code": "MOSK", "name": "Москва", "country": "RU"}, ...]'></textarea> | |
| <button id="import-stations-btn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded">Импортировать</button> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Экспорт станций</label> | |
| <textarea id="export-stations" class="w-full p-2 border border-gray-300 rounded h-32" readonly></textarea> | |
| <button id="export-stations-btn" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded">Экспортировать</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button id="save-settings" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold"> | |
| Сохранить настройки | |
| </button> | |
| <button id="logout-admin" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-semibold"> | |
| Выйти | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">CargoContainer</h3> | |
| <p class="text-gray-400">Сервис поиска контейнерных перевозок по странам СНГ. Лучшие цены и условия для логистических компаний.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Компания</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">О нас</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Контакты</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Вакансии</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Блог</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Помощь</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Правила</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Поддержка</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Документация</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Контакты</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +7 (495) 123-45-67</li> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@cargocontainer.com</li> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Логистическая, 15</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 CargoContainer. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample data for stations (in real app this would come from API) | |
| const stations = [ | |
| {code: "MOSK", name: "Москва (Россия)", country: "RU"}, | |
| {code: "KAZA", name: "Казань (Россия)", country: "RU"}, | |
| {code: "EKAT", name: "Екатеринбург (Россия)", country: "RU"}, | |
| {code: "NOVO", name: "Новосибирск (Россия)", country: "RU"}, | |
| {code: "ALMA", name: "Алматы (Казахстан)", country: "KZ"}, | |
| {code: "ASTA", name: "Астана (Казахстан)", country: "KZ"}, | |
| {code: "TASH", name: "Ташкент (Узбекистан)", country: "UZ"}, | |
| {code: "BISH", name: "Бишкек (Киргизия)", country: "KG"}, | |
| {code: "DUSH", name: "Душанбе (Таджикистан)", country: "TJ"}, | |
| {code: "ASHA", name: "Ашхабад (Туркменистан)", country: "TM"}, | |
| {code: "MINS", name: "Минск (Беларусь)", country: "BY"}, | |
| {code: "KIYV", name: "Киев (Украина)", country: "UA"}, | |
| {code: "KHAR", name: "Харьков (Украина)", country: "UA"}, | |
| {code: "ODES", name: "Одесса (Украина)", country: "UA"}, | |
| {code: "STPE", name: "Санкт-Петербург (Россия)", country: "RU"}, | |
| {code: "ROST", name: "Ростов-на-Дону (Россия)", country: "RU"}, | |
| {code: "SOCH", name: "Сочи (Россия)", country: "RU"}, | |
| {code: "KRAS", name: "Красноярск (Россия)", country: "RU"}, | |
| {code: "IRKU", name: "Иркутск (Россия)", country: "RU"}, | |
| {code: "VLAD", name: "Владивосток (Россия)", country: "RU"}, | |
| {code: "KARA", name: "Караганда (Казахстан)", country: "KZ"}, | |
| {code: "SHYM", name: "Шымкент (Казахстан)", country: "KZ"}, | |
| {code: "SAMK", name: "Самарканд (Узбекистан)", country: "UZ"}, | |
| {code: "BUKH", name: "Бухара (Узбекистан)", country: "UZ"}, | |
| {code: "FERU", name: "Фергана (Узбекистан)", country: "UZ"}, | |
| {code: "OSH", name: "Ош (Киргизия)", country: "KG"}, | |
| {code: "KHUJ", name: "Худжанд (Таджикистан)", country: "TJ"}, | |
| {code: "MARY", name: "Мары (Туркменистан)", country: "TM"}, | |
| {code: "BRES", name: "Брест (Беларусь)", country: "BY"}, | |
| {code: "GOME", name: "Гомель (Беларусь)", country: "BY"}, | |
| {code: "LVIV", name: "Львов (Украина)", country: "UA"}, | |
| {code: "DNEP", name: "Днепр (Украина)", country: "UA"} | |
| ]; | |
| // Sample container types (will be editable in admin panel) | |
| let containerTypes = [ | |
| {id: 1, name: "20 футов (стандартный)", code: "20ft"}, | |
| {id: 2, name: "40 футов (стандартный)", code: "40ft"}, | |
| {id: 3, name: "20 футов (High Cube)", code: "20ft_high"}, | |
| {id: 4, name: "40 футов (High Cube)", code: "40ft_high"}, | |
| {id: 5, name: "20 футов (рефрижераторный)", code: "20ft_ref"}, | |
| {id: 6, name: "40 футов (рефрижераторный)", code: "40ft_ref"}, | |
| {id: 7, name: "20 футов (открытый верх)", code: "20ft_open"}, | |
| {id: 8, name: "40 футов (открытый верх)", code: "40ft_open"}, | |
| {id: 9, name: "20 футов (платформа)", code: "20ft_flat"}, | |
| {id: 10, name: "40 футов (платформа)", code: "40ft_flat"} | |
| ]; | |
| // Sample results data | |
| const sampleResults = [ | |
| { | |
| id: 1, | |
| from: "Москва (Россия)", | |
| to: "Алматы (Казахстан)", | |
| departure: "15.06.2023 - 20.06.2023", | |
| arrival: "25.06.2023 - 30.06.2023", | |
| duration: "10-14 дней", | |
| containerType: "40 футов (стандартный)", | |
| price: 1850, | |
| carrier: "РЖД Логистика", | |
| dangerous: false, | |
| lcl: true | |
| }, | |
| { | |
| id: 2, | |
| from: "Санкт-Петербург (Россия)", | |
| to: "Ташкент (Узбекистан)", | |
| departure: "18.06.2023 - 22.06.2023", | |
| arrival: "28.06.2023 - 02.07.2023", | |
| duration: "10-12 дней", | |
| containerType: "20 футов (High Cube)", | |
| price: 1450, | |
| carrier: "ТрансКонтейнер", | |
| dangerous: true, | |
| lcl: false | |
| }, | |
| { | |
| id: 3, | |
| from: "Казань (Россия)", | |
| to: "Астана (Казахстан)", | |
| departure: "20.06.2023 - 25.06.2023", | |
| arrival: "30.06.2023 - 05.07.2023", | |
| duration: "10-12 дней", | |
| containerType: "40 футов (рефрижераторный)", | |
| price: 3200, | |
| carrier: "Казахстан Темир Жолы", | |
| dangerous: false, | |
| lcl: true | |
| }, | |
| { | |
| id: 4, | |
| from: "Екатеринбург (Россия)", | |
| to: "Бишкек (Киргизия)", | |
| departure: "22.06.2023 - 26.06.2023", | |
| arrival: "02.07.2023 - 06.07.2023", | |
| duration: "10-12 дней", | |
| containerType: "20 футов (стандартный)", | |
| price: 1750, | |
| carrier: "РЖД Логистика", | |
| dangerous: false, | |
| lcl: false | |
| }, | |
| { | |
| id: 5, | |
| from: "Новосибирск (Россия)", | |
| to: "Душанбе (Таджикистан)", | |
| departure: "25.06.2023 - 30.06.2023", | |
| arrival: "05.07.2023 - 10.07.2023", | |
| duration: "10-12 дней", | |
| containerType: "40 футов (стандартный)", | |
| price: 2100, | |
| carrier: "Узбекистон Темир Йуллари", | |
| dangerous: true, | |
| lcl: true | |
| } | |
| ]; | |
| // Autocomplete function | |
| function autocomplete(inp, arr) { | |
| let currentFocus; | |
| inp.addEventListener("input", function(e) { | |
| let val = this.value; | |
| closeAllLists(); | |
| if (!val) { return false; } | |
| currentFocus = -1; | |
| const a = document.createElement("DIV"); | |
| a.setAttribute("id", this.id + "autocomplete-list"); | |
| a.setAttribute("class", "autocomplete-items"); | |
| this.parentNode.appendChild(a); | |
| for (let i = 0; i < arr.length; i++) { | |
| if (arr[i].name.substr(0, val.length).toUpperCase() === val.toUpperCase()) { | |
| const b = document.createElement("DIV"); | |
| b.innerHTML = "<strong>" + arr[i].name.substr(0, val.length) + "</strong>"; | |
| b.innerHTML += arr[i].name.substr(val.length); | |
| b.innerHTML += "<input type='hidden' value='" + arr[i].name + "'>"; | |
| b.addEventListener("click", function(e) { | |
| inp.value = this.getElementsByTagName("input")[0].value; | |
| closeAllLists(); | |
| }); | |
| a.appendChild(b); | |
| } | |
| } | |
| }); | |
| inp.addEventListener("keydown", function(e) { | |
| let x = document.getElementById(this.id + "autocomplete-list"); | |
| if (x) x = x.getElementsByTagName("div"); | |
| if (e.keyCode === 40) { // Down | |
| currentFocus++; | |
| addActive(x); | |
| } else if (e.keyCode === 38) { // Up | |
| currentFocus--; | |
| addActive(x); | |
| } else if (e.keyCode === 13) { // Enter | |
| e.preventDefault(); | |
| if (currentFocus > -1) { | |
| if (x) x[currentFocus].click(); | |
| } | |
| } | |
| }); | |
| function addActive(x) { | |
| if (!x) return false; | |
| removeActive(x); | |
| if (currentFocus >= x.length) currentFocus = 0; | |
| if (currentFocus < 0) currentFocus = (x.length - 1); | |
| x[currentFocus].classList.add("autocomplete-active"); | |
| } | |
| function removeActive(x) { | |
| for (let i = 0; i < x.length; i++) { | |
| x[i].classList.remove("autocomplete-active"); | |
| } | |
| } | |
| function closeAllLists(elmnt) { | |
| const x = document.getElementsByClassName("autocomplete-items"); | |
| for (let i = 0; i < x.length; i++) { | |
| if (elmnt !== x[i] && elmnt !== inp) { | |
| x[i].parentNode.removeChild(x[i]); | |
| } | |
| } | |
| } | |
| document.addEventListener("click", function(e) { | |
| closeAllLists(e.target); | |
| }); | |
| } | |
| // Initialize autocomplete for station inputs | |
| document.addEventListener("DOMContentLoaded", function() { | |
| autocomplete(document.getElementById("departure-station"), stations); | |
| autocomplete(document.getElementById("arrival-station"), stations); | |
| // Load container types to admin panel | |
| loadContainerTypes(); | |
| // Set today's date as default for date inputs | |
| const today = new Date().toISOString().split('T')[0]; | |
| document.getElementById('departure-date-from').value = today; | |
| document.getElementById('arrival-date-from').value = today; | |
| // Set date 7 days from now as default "to" date | |
| const nextWeek = new Date(); | |
| nextWeek.setDate(nextWeek.getDate() + 7); | |
| const nextWeekStr = nextWeek.toISOString().split('T')[0]; | |
| document.getElementById('departure-date-to').value = nextWeekStr; | |
| document.getElementById('arrival-date-to').value = nextWeekStr; | |
| }); | |
| // Search button click handler | |
| document.getElementById('search-btn').addEventListener('click', function() { | |
| const departureStation = document.getElementById('departure-station').value; | |
| const arrivalStation = document.getElementById('arrival-station').value; | |
| const containerType = document.getElementById('container-type').value; | |
| const departureDateFrom = document.getElementById('departure-date-from').value; | |
| const departureDateTo = document.getElementById('departure-date-to').value; | |
| const arrivalDateFrom = document.getElementById('arrival-date-from').value; | |
| const arrivalDateTo = document.getElementById('arrival-date-to').value; | |
| const dangerousCargo = document.getElementById('dangerous-cargo').checked; | |
| const lclCargo = document.getElementById('lcl-cargo').checked; | |
| // Validate inputs | |
| if (!departureStation || !arrivalStation) { | |
| alert('Пожалуйста, укажите станции отправления и назначения'); | |
| return; | |
| } | |
| // Prepare search data | |
| const searchData = { | |
| departureStation, | |
| arrivalStation, | |
| containerType, | |
| departureDateFrom, | |
| departureDateTo, | |
| arrivalDateFrom, | |
| arrivalDateTo, | |
| dangerousCargo, | |
| lclCargo, | |
| timestamp: new Date().toISOString() | |
| }; | |
| // Send webhook (simulated) | |
| sendWebhook(searchData); | |
| // Display results | |
| displayResults(sampleResults); | |
| // Show results section | |
| document.getElementById('results-section').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('results-section').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Simulate sending webhook | |
| function sendWebhook(data) { | |
| const webhookUrl = document.getElementById('webhook-url') ? | |
| document.getElementById('webhook-url').value : | |
| 'https://api.cargocontainer.com/webhook/search'; | |
| console.log('Отправка вебхука на:', webhookUrl); | |
| console.log('Данные поиска:', data); | |
| // In a real app, you would use fetch() to send the data | |
| // fetch(webhookUrl, { | |
| // method: 'POST', | |
| // headers: { | |
| // 'Content-Type': 'application/json', | |
| // 'Authorization': 'Bearer ' + (document.getElementById('api-key')?.value || '') | |
| // }, | |
| // body: JSON.stringify(data) | |
| // }) | |
| // .then(response => response.json()) | |
| // .then(data => console.log('Webhook response:', data)) | |
| // .catch(error => console.error('Webhook error:', error)); | |
| } | |
| // Display search results | |
| function displayResults(results) { | |
| const resultsContainer = document.getElementById('results-container'); | |
| resultsContainer.innerHTML = ''; | |
| results.forEach(result => { | |
| const resultElement = document.createElement('div'); | |
| resultElement.className = 'bg-white rounded-xl shadow p-6 hover:shadow-lg transition duration-300'; | |
| let dangerousBadge = ''; | |
| if (result.dangerous) { | |
| dangerousBadge = '<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded ml-2">Опасный груз</span>'; | |
| } | |
| let lclBadge = ''; | |
| if (result.lcl) { | |
| lclBadge = '<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded ml-2">Сборный груз</span>'; | |
| } | |
| resultElement.innerHTML = ` | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold text-gray-800">${result.from} → ${result.to}</h3> | |
| <p class="text-gray-600">${result.containerType} ${dangerousBadge} ${lclBadge}</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-2xl font-bold text-blue-600">от ${result.price} $</p> | |
| <p class="text-gray-500">${result.duration}</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex flex-col md:flex-row md:justify-between"> | |
| <div class="mb-2 md:mb-0"> | |
| <p class="text-gray-500">Отправление</p> | |
| <p class="font-medium">${result.departure}</p> | |
| </div> | |
| <div class="mb-2 md:mb-0"> | |
| <p class="text-gray-500">Прибытие</p> | |
| <p class="font-medium">${result.arrival}</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Перевозчик</p> | |
| <p class="font-medium">${result.carrier}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium"> | |
| Забронировать | |
| </button> | |
| </div> | |
| `; | |
| resultsContainer.appendChild(resultElement); | |
| }); | |
| } | |
| // Admin panel functionality | |
| function loadContainerTypes() { | |
| const containerTypesList = document.getElementById('container-types-list'); | |
| containerTypesList.innerHTML = ''; | |
| containerTypes.forEach(type => { | |
| const typeElement = document.createElement('div'); | |
| typeElement.className = 'flex justify-between items-center p-2 bg-gray-100 rounded'; | |
| typeElement.innerHTML = ` | |
| <span>${type.name}</span> | |
| <button class="text-red-600 hover:text-red-800 delete-container-type" data-id="${type.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| `; | |
| containerTypesList.appendChild(typeElement); | |
| }); | |
| // Add event listeners to delete buttons | |
| document.querySelectorAll('.delete-container-type').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const id = parseInt(this.getAttribute('data-id')); | |
| containerTypes = containerTypes.filter(type => type.id !== id); | |
| loadContainerTypes(); | |
| }); | |
| }); | |
| } | |
| // Add new container type | |
| document.getElementById('add-container-type').addEventListener('click', function() { | |
| const newTypeInput = document.getElementById('new-container-type'); | |
| const newTypeName = newTypeInput.value.trim(); | |
| if (newTypeName) { | |
| const newId = containerTypes.length > 0 ? | |
| Math.max(...containerTypes.map(type => type.id)) + 1 : 1; | |
| const code = newTypeName.toLowerCase().replace(/[^a-z0-9]/g, '_'); | |
| containerTypes.push({ | |
| id: newId, | |
| name: newTypeName, | |
| code: code | |
| }); | |
| newTypeInput.value = ''; | |
| loadContainerTypes(); | |
| } | |
| }); | |
| // Save admin settings | |
| document.getElementById('save-settings').addEventListener('click', function() { | |
| // In a real app, you would save these to a database | |
| alert('Настройки сохранены'); | |
| }); | |
| // Import stations | |
| document.getElementById('import-stations-btn').addEventListener('click', function() { | |
| const importData = document.getElementById('import-stations').value; | |
| try { | |
| const parsedData = JSON.parse(importData); | |
| if (Array.isArray(parsedData)) { | |
| // In a real app, you would save these to a database | |
| alert(`Успешно импортировано ${parsedData.length} станций`); | |
| document.getElementById('export-stations').value = JSON.stringify(parsedData, null, 2); | |
| } else { | |
| alert('Данные должны быть массивом станций'); | |
| } | |
| } catch (e) { | |
| alert('Ошибка при разборе JSON: ' + e.message); | |
| } | |
| }); | |
| // Export stations | |
| document.getElementById('export-stations-btn').addEventListener('click', function() { | |
| document.getElementById('export-stations').value = JSON.stringify(stations, null, 2); | |
| }); | |
| // Toggle admin panel (for demo purposes) | |
| document.getElementById('admin-toggle').addEventListener('click', function() { | |
| document.getElementById('admin-panel').classList.toggle('active'); | |
| }); | |
| // Logout from admin panel | |
| document.getElementById('logout-admin').addEventListener('click', function() { | |
| document.getElementById('admin-panel').classList.remove('active'); | |
| }); | |
| // Demo admin login (username: admin, password: cargo12345) | |
| // In a real app, this would be a proper authentication system | |
| document.querySelector('header button:not(#admin-toggle)').addEventListener('click', function() { | |
| const username = prompt('Введите логин:'); | |
| const password = prompt('Введите пароль:'); | |
| if (username === 'admin' && password === 'cargo12345') { | |
| document.getElementById('admin-toggle').classList.remove('hidden'); | |
| alert('Вы вошли как администратор. Теперь вы можете открыть панель администратора.'); | |
| } else if (username || password) { | |
| alert('Неверные учетные данные'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=IQNull/logistics-mvp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |