<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Καταγραφή Μελισσοκομείου</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f7f7f7;
        }
        form {
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        .input-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .input-container input {
            width: 50%;
            padding: 5px;
            font-size: 14px;
        }
        .adjust-btn, button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            background-color: #4CAF50;
        }
        .adjust-btn:hover, button:hover {
            background-color: #45a049;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        @media (max-width: 600px) {
            .input-container {
                flex-direction: column;
            }
            .input-container input {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h1>Καταγραφή Μελισσοκομείου</h1>
    <form id="bee-form">
        <label for="hive-number">Αριθμός Κυψέλης</label>
        <div class="input-container">
            <button type="button" class="adjust-btn" onclick="adjustValue('hive-number', -1)">-</button>
            <input type="number" id="hive-number" name="hive-number" value="1" min="1" required>
            <button type="button" class="adjust-btn" onclick="adjustValue('hive-number', 1)">+</button>
        </div>

        <label for="frames">Αριθμός Πλαισίων</label>
        <div class="input-container">
            <button type="button" class="adjust-btn" onclick="adjustValue('frames', -1)">-</button>
            <input type="number" id="frames" name="frames" value="0" min="0">
            <button type="button" class="adjust-btn" onclick="adjustValue('frames', 1)">+</button>
        </div>

        <label for="brood-frames">Αριθμός Πλαισίων με Γόνο</label>
        <div class="input-container">
            <button type="button" class="adjust-btn" onclick="adjustValue('brood-frames', -1)">-</button>
            <input type="number" id="brood-frames" name="brood-frames" value="0" min="0">
            <button type="button" class="adjust-btn" onclick="adjustValue('brood-frames', 1)">+</button>
        </div>

        <label for="queen-status">Κατάσταση Βασίλισσας</label>
        <select id="queen-status" name="queen-status">
            <option value="healthy">Υγιής</option>
            <option value="missing">Απούσα</option>
            <option value="weak">Αδύναμη</option>
        </select>

        <label for="diseases">Παρουσία Ασθενειών</label>
        <select id="diseases" name="diseases">
            <option value="none">Καμία</option>
            <option value="varroa">Βαρρόα</option>
            <option value="nosema">Νοσεμίαση</option>
            <option value="other">Άλλη</option>
        </select>

        <label for="notes">Σημειώσεις</label>
        <textarea id="notes" name="notes" rows="4" placeholder="Πρόσθετες πληροφορίες..."></textarea>

        <button type="button" id="save-btn">Αποθήκευση σε CSV</button>
        <button type="button" id="display-btn">Προβολή Δεδομένων</button>
        <button type="button" id="submit-btn">Καταχώρηση Δεδομένων</button>
        <button type="button" id="import-btn">Εισαγωγή Δεδομένων από CSV</button>
    </form>

    <table id="data-table" style="display: none;">
        <thead>
            <tr>
                <th>Αριθμός Κυψέλης</th>
                <th>Αριθμός Πλαισίων</th>
                <th>Αριθμός Πλαισίων με Γόνο</th>
                <th>Κατάσταση Βασίλισσας</th>
                <th>Παρουσία Ασθενειών</th>
                <th>Σημειώσεις</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <input type="file" id="file-input" accept=".csv" style="display: none;">

    <script>
        function adjustValue(fieldId, delta) {
            const inputField = document.getElementById(fieldId);
            const currentValue = parseInt(inputField.value) || 0;
            const newValue = currentValue + delta;
            if (newValue >= parseInt(inputField.min || 0)) {
                inputField.value = newValue;
            }
        }

        document.getElementById('save-btn').addEventListener('click', function () {
            const hiveNumber = document.getElementById('hive-number').value;
            if (hiveNumber < 1) {
                alert("Ο αριθμός κυψέλης πρέπει να είναι τουλάχιστον 1.");
                return;
            }

            const frames = document.getElementById('frames').value;
            const broodFrames = document.getElementById('brood-frames').value;
            const queenStatus = document.getElementById('queen-status').value;
            const diseases = document.getElementById('diseases').value;
            const notes = document.getElementById('notes').value;

            const data = [
                ['Αριθμός Κυψέλης', 'Αριθμός Πλαισίων', 'Αριθμός Πλαισίων με Γόνο', 'Κατάσταση Βασίλισσας', 'Παρουσία Ασθενειών', 'Σημειώσεις'],
                [hiveNumber, frames, broodFrames, queenStatus, diseases, notes]
            ];

            let csvContent = "data:text/csv;charset=utf-8,";

            data.forEach(function(rowArray) {
                let row = rowArray.join(",");
                csvContent += row + "\r\n";
            });

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "melissokomeio.csv");
            document.body.appendChild(link);

            link.click();
            document.body.removeChild(link);
        });

        document.getElementById('display-btn').addEventListener('click', function () {
            const hiveNumber = document.getElementById('hive-number').value;
            const frames = document.getElementById('frames').value;
            const broodFrames = document.getElementById('brood-frames').value;
            const queenStatus = document.getElementById('queen-status').value;
            const diseases = document.getElementById('diseases').value;
            const notes = document.getElementById('notes').value;

            const table = document.getElementById('data-table');
            const tbody = table.querySelector('tbody');
            const row = document.createElement('tr');

            [hiveNumber, frames, broodFrames, queenStatus, diseases, notes].forEach(value => {
                const cell = document.createElement('td');
                cell.textContent = value;
                row.appendChild(cell);
            });

            tbody.appendChild(row);
            table.style.display = 'table';
        });

        document.getElementById('submit-btn').addEventListener('click', function () {
            const hiveNumberInput = document.getElementById('hive-number');
            const framesInput = document.getElementById('frames');
            const broodFramesInput = document.getElementById('brood-frames');
            const queenStatusInput = document.getElementById('queen-status');
            const diseasesInput = document.getElementById('diseases');
            const notesInput = document.getElementById('notes');

            // Προσθήκη τρέχουσας δεδομένων στον πίνακα
            document.getElementById('display-btn').click();

            // Καθαρισμός εισόδων για την επόμενη κυψέλη
            hiveNumberInput.value = parseInt(hiveNumberInput.value) + 1;
            framesInput.value = 0;
            broodFramesInput.value = 0;
            queenStatusInput.value = "healthy";
            diseasesInput.value = "none";
            notesInput.value = "";
        });

        document.getElementById('import-btn').addEventListener('click', function () {
            document.getElementById('file-input').click();
        });

        document.getElementById('file-input').addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const csvData = e.target.result;
                    const rows = csvData.split("\n");
                    const table = document.getElementById('data-table');
                    const tbody = table.querySelector('tbody');

                    rows.slice(1).forEach(row => {
                        const columns = row.split(",");
                        if (columns.length > 1) {
                            const tableRow = document.createElement('tr');
                            columns.forEach(value => {
                                const cell = document.createElement('td');
                                cell.textContent = value;
                                tableRow.appendChild(cell);
                            });
                            tbody.appendChild(tableRow);
                        }
                    });
                    table.style.display = 'table';
                };
                reader.readAsText(file);
            }
        });
    </script>
</body>
</html> προτεινε βελτιωσεισ