<!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;
            text-align: center;
            margin: 20px;
        }
        h1, h2 {
            text-align: center;
        }
        .app-list {
            margin: 20px auto;
            text-align: left;
            width: 400px;
        }
        .app-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
        }
        .app-item a {
            text-decoration: none;
            color: blue;
        }
        .app-item a:hover {
            text-decoration: underline;
        }
        button {
            margin: 5px;
        }
        .action-buttons {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        #notes-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            padding: 20px;
            z-index: 1000;
        }

        #notes-modal textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 15px;
        }

        #modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    </style>
</head>
<body>
    <h1>Αρχική Σελίδα</h1>
    <h2>Εφαρμογές Τεχνητής Νοημοσύνης</h2>

    <div class="app-list">
        <ul id="app-list">
            <!-- Οι κατηγορίες και οι εφαρμογές γεμίζουν δυναμικά εδώ -->
        </ul>
    </div>

    <div class="action-buttons">
        <button id="add-category-btn">Προσθήκη Κατηγορίας</button>
        <button id="delete-category-btn">Διαγραφή Κατηγορίας</button>
        <button id="edit-category-btn">Επεξεργασία Κατηγορίας</button>
    </div>

    <div class="action-buttons">
        <button id="add-app-btn">Προσθήκη Εφαρμογής</button>
        <button id="delete-app-btn">Διαγραφή Εφαρμογής</button>
        <button id="edit-app-btn">Επεξεργασία Εφαρμογής</button>
    </div>

    <!-- Modal για παρατηρήσεις -->
    <div id="modal-overlay"></div>
    <div id="notes-modal">
        <h3>Προσθήκη Παρατηρήσεων</h3>
        <textarea id="notes-text"></textarea>
        <button id="save-notes-btn">Αποθήκευση</button>
        <button id="cancel-notes-btn">Ακύρωση</button>
    </div>

    <script>
        const storageKey = "ai_applications";
        let applications = JSON.parse(localStorage.getItem(storageKey)) || [
            {
                category: "Προτάσεις",
                apps: [
                    { name: "Example AI 1", url: "https://example1.com", notes: "" },
                    { name: "Example AI 2", url: "https://example2.com", notes: "" }
                ]
            }
        ];

        const appListElement = document.getElementById('app-list');
        const notesModal = document.getElementById('notes-modal');
        const modalOverlay = document.getElementById('modal-overlay');
        const notesTextarea = document.getElementById('notes-text');
        let currentApp = null;

        function renderApplications() {
            appListElement.innerHTML = ""; // Καθαρισμός της λίστας

            applications.forEach((category, categoryIndex) => {
                const categoryItem = document.createElement('li');
                categoryItem.innerHTML = `<strong>${category.category}</strong>`;
                appListElement.appendChild(categoryItem);

                const ul = document.createElement('ul');
                category.apps.forEach((app, appIndex) => {
                    const li = document.createElement('li');
                    li.className = "app-item";
                    li.innerHTML = `
                        <a href="${app.url}" target="_blank">${app.name}</a>
                        <button onclick="openNotes(${categoryIndex}, ${appIndex})">Παρατηρήσεις</button>
                    `;
                    ul.appendChild(li);
                });
                appListElement.appendChild(ul);
            });
        }

        function saveApplications() {
            localStorage.setItem(storageKey, JSON.stringify(applications));
        }

        function openNotes(categoryIndex, appIndex) {
            currentApp = { categoryIndex, appIndex };
            const app = applications[categoryIndex].apps[appIndex];
            notesTextarea.value = app.notes || "";
            notesModal.style.display = "block";
            modalOverlay.style.display = "block";
        }

        document.getElementById('save-notes-btn').addEventListener('click', () => {
            if (currentApp) {
                const { categoryIndex, appIndex } = currentApp;
                applications[categoryIndex].apps[appIndex].notes = notesTextarea.value;
                saveApplications();
                closeNotesModal();
            }
        });

        document.getElementById('cancel-notes-btn').addEventListener('click', closeNotesModal);

        function closeNotesModal() {
            notesModal.style.display = "none";
            modalOverlay.style.display = "none";
            currentApp = null;
        }

        document.getElementById('add-category-btn').addEventListener('click', () => {
            const categoryName = prompt("Δώσε το όνομα της νέας κατηγορίας:");
            if (categoryName) {
                applications.push({ category: categoryName, apps: [] });
                saveApplications();
                renderApplications();
            }
        });

        document.getElementById('add-app-btn').addEventListener('click', () => {
            const categoryIndex = prompt(
                "Επίλεξε κατηγορία για την εφαρμογή:\n" +
                applications.map((cat, i) => `${i + 1}. ${cat.category}`).join('\n')
            ) - 1;

            if (categoryIndex >= 0 && categoryIndex < applications.length) {
                const appName = prompt("Δώσε το όνομα της εφαρμογής:");
                const appUrl = prompt("Δώσε τη διεύθυνση της εφαρμογής:");
                if (appName && appUrl) {
                    applications[categoryIndex].apps.push({ name: appName, url: appUrl, notes: "" });
                    saveApplications();
                    renderApplications();
                }
            }
        });

        renderApplications();
    </script>
</body>
</html>     να κάνουμε μία διόρθωση όταν υπάρχει παρατήρηση δίπλα σε κάποια εφαρμογή και υπάρχει κάποια κάποια κάποια χαρακτήρες μέσα αποθηκευμένη στο παράθυρο της παρατήσεις να αλλάζει χρώμα το παράθυρο να γίνεται κίτρινο κίτρινο