Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vacancies</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #181818;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        #filters {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            gap: 10px;
            flex-wrap: wrap;
        }

        #filters select, #filters button {
            padding: 8px;
            border-radius: 5px;
            font-size: 14px;
        }

        #filters select {
            background-color: #fff;
            color: #000;
            flex: 1;
            max-width: 30%;
        }

        #filters button {
            background-color: #00AEEF;
            color: white;
            border: none;
            cursor: pointer;
            max-width: 20%;
            flex: 1;
        }

        #vacancies-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        .vacancy-card {
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 5px;
            background-color: #fff;
            color: #000;
        }

        .vacancy-card h3 {
            color: #00AEEF;
        }

        .vacancy-card a {
            color: #00AEEF;
            text-decoration: underline;
        }

        #load-more {
            padding: 10px 20px;
            margin: 20px auto;
            display: block;
            background-color: #00AEEF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        /* Адаптив для планшетов */
        @media (max-width: 768px) {
            #filters select, #filters button {
                font-size: 12px;
                padding: 6px;
            }

            #vacancies-container {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }

            .vacancy-card {
                padding: 10px;
            }
        }

        /* Адаптив для мобильных устройств */
        @media (max-width: 480px) {
            #filters {
                flex-direction: column;
                align-items: stretch;
            }

            #filters select, #filters button {
                max-width: 100%;
                flex: none;
                margin-bottom: 10px;
            }

            #vacancies-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div style="max-width: 1200px; margin: 0 auto; padding: 20px;">
    
    <div id="filters">
        <select id="vessel-type-filter">
            <option value="">All Vessel Types</option>
            <option value="Landing Craft">Landing Craft</option>
            <option value="Tanker">Tanker</option>
            <option value="Chemical Tanker">Chemical Tanker</option>
        </select>

        <select id="rank-filter">
            <option value="">All Ranks</option>
            <option value="MASTER">Master</option>
            <option value="2OFF">2nd Officer</option>
            <option value="CENG">Chief Engineer</option>
            <option value="COFF">Chief Officer</option>
            <option value="EENG">Electrical Engineer</option>
        </select>

        <button id="apply-filters">Apply Filters</button>
    </div>

    
    <div id="vacancies-container">
        
    </div>

    
    <button id="load-more">Load More</button>
</div>

<script>
    const vacancyUrl = "https://seamploy.crewinspector.com/public/vacancy?form_action=json_feed";

    // Функция загрузки вакансий
    function loadVacancies() {
        fetch(vacancyUrl)
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById("vacancies-container");
                container.innerHTML = ""; // Очистить предыдущие вакансии

                const today = new Date();

                // Фильтровать только актуальные вакансии
                const activeVacancies = data.filter(vacancy => {
                    const joiningDate = new Date(vacancy.joining_date.split('.').reverse().join('-')); // Преобразование даты
                    return joiningDate >= today; // Только вакансии с датой в будущем или сегодня
                });

                if (activeVacancies.length === 0) {
                    container.innerHTML = "<p>No active vacancies available.</p>";
                    return;
                }

                activeVacancies.forEach(vacancy => {
                    const vacancyCard = `
                        <div class="vacancy-card">
                            <h3>${vacancy.rank_name}</h3>
                            <p><strong>Vessel Type:</strong> ${vacancy.vessel_type_name}</p>
                            <p><strong>Joining Date:</strong> ${vacancy.joining_date}</p>
                            <p><strong>Salary:</strong> ${vacancy.amount} ${vacancy.currency_name} (${vacancy.amount_period})</p>
                            <p><strong>Engine Type:</strong> ${vacancy.engine_type_name}</p>
                            <a href="${vacancy.url}" target="_blank">View Details</a>
                        </div>`;
                    container.insertAdjacentHTML("beforeend", vacancyCard);
                });
            })
            .catch(error => console.error("Error loading vacancies:", error));
    }

    // Функция фильтрации
    function applyFilters() {
        const vesselType = document.getElementById("vessel-type-filter").value;
        const rank = document.getElementById("rank-filter").value;

        fetch(vacancyUrl)
            .then(response => response.json())
            .then(data => {
                const today = new Date();

                const filteredData = data.filter(vacancy => {
                    const joiningDate = new Date(vacancy.joining_date.split('.').reverse().join('-'));
                    return (
                        joiningDate >= today &&
                        (vesselType === "" || vacancy.vessel_type_name === vesselType) &&
                        (rank === "" || vacancy.rank_name === rank)
                    );
                });

                const container = document.getElementById("vacancies-container");
                container.innerHTML = "";

                if (filteredData.length === 0) {
                    container.innerHTML = "<p>No matching vacancies found.</p>";
                    return;
                }

                filteredData.forEach(vacancy => {
                    const vacancyCard = `
                        <div class="vacancy-card">
                            <h3>${vacancy.rank_name}</h3>
                            <p><strong>Vessel Type:</strong> ${vacancy.vessel_type_name}</p>
                            <p><strong>Joining Date:</strong> ${vacancy.joining_date}</p>
                            <p><strong>Salary:</strong> ${vacancy.amount} ${vacancy.currency_name} (${vacancy.amount_period})</p>
                            <p><strong>Engine Type:</strong> ${vacancy.engine_type_name}</p>
                            <a href="${vacancy.url}" target="_blank">View Details</a>
                        </div>`;
                    container.insertAdjacentHTML("beforeend", vacancyCard);
                });
            })
            .catch(error => console.error("Error applying filters:", error));
    }

    // Обеспечение первоначальной загрузки данных
    document.addEventListener("DOMContentLoaded", () => {
        loadVacancies();
    });

    // Привязка функций к кнопкам
    document.getElementById("apply-filters").addEventListener("click", applyFilters);
</script>
</body>
</html>

Seamploy

Technical Requirements (T&Cs) for Durable:
1. Company Name:
Seamploy

2. Industry:
Crewing agency. We connect seafarers with job opportunities and help shipowners find qualified crew members.

3. Mission Statement:
To make employment in the maritime industry simple and effective.

4. Website Structure:

Homepage:
Welcome banner: "Seamless Employment for Seafarers."
Brief description of services: "We simplify and accelerate employment in the maritime industry."
CTA buttons: "Find a Job" / "Contact Us."
Services:
Job placement for seafarers.
Crew recruitment for shipowners.
Assistance with documentation and logistics.
Job Listings:
A list of available positions with filters by role, vessel type, and location.
Contact Us:
Inquiry form.
Phone and email.
Office location map (if needed).
About Us:
Mission, vision, and values of the agency.
5. Key Features:

Forms for submitting applications (for both seafarers and shipowners).
Ability to leave contact details for follow-up.
Easy navigation and user-friendly design.
6. Design Requirements:

Color Scheme: Blue, turquoise, white, and green.
Theme: Maritime elements like waves, anchors, and ship wheels (in a minimalist style).
7. Additional Requirements:

Analytics integration (e.g., Google Analytics).
Mobile-friendly optimization.