<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Αρχική Σελίδα - Εφαρμογές Τεχνητής Νοημοσύνης</title>
    <style>
        /* Βασικά χρώματα και γραμματοσειρές */
        :root {
            --primary-color: #3498db; /* Μπλε χρώμα για έμφαση */
            --secondary-color: #2ecc71; /* Πράσινο χρώμα για δευτερεύουσες ενέργειες */
            --text-color: #333; /* Χρώμα κειμένου */
            --background-color: #f9f9f9; /* Χρώμα υπόβαθρου */
            --font-family: 'Arial', sans-serif; /* Γραμματοσειρά */
        }
    body {
        font-family: var(--font-family);
        background-color: var(--background-color);
        color: var(--text-color);
        text-align: center;
        margin: 20px;
    }

    h1, h2 {
        text-align: center;
        color: var(--primary-color);
    }

    /* Βελτίωση εμφάνισης της λίστας εφαρμογών */
    .app-list {
        margin: 20px auto;
        text-align: left;
        width: 400px; /* Αυξήσαμε το πλάτος για καλύτερη εμφάνιση */
        position: relative;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .app-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }

    .app-item a {
        text-decoration: none;
        color: var(--primary-color);
        font-weight: bold;
    }

    .app-item a:hover {
        text-decoration: underline;
    }

    /* Βελτίωση εμφάνισης των κουμπιών */
    button {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #2980b9;
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    /* Βελτίωση εμφάνισης του παραθύρου παρατηρήσεων */
    .note-window {
        position: absolute;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 20px;
        width: 300px;
        z-index: 1;
        display: none;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .note-window textarea {
        width: 100%;
        resize: none;
        border: 1px solid #ccc;
        padding: 5px;
    }

    .note-window button {
        background-color: var(--secondary-color);
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .note-window button:hover {
        background-color: #27ae60;
    }

    /* Έμφαση στο κουμπί "Παρατηρήσεις" όταν υπάρχουν παρατηρήσεις */
    .note-btn.has-notes {
        background-color: var(--secondary-color);
    }
</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>

<script>
    // Αποθήκευση των εφαρμογών και παρατηρήσεων σε LocalStorage
    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');

    // Ενημερώνει τη λίστα εφαρμογών
    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');
            ul.style.display = 'none'; // Αρχική κατάσταση: κρυμμένη λίστα
            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 class="note-btn${app.notes ? ' has-notes' : ''}">Παρατηρήσεις</button>`;
                ul.appendChild(li);

                // Δημιουργεί το παράθυρο παρατηρήσεων για κάθε εφαρμογή
                const noteWindow = document.createElement('div');
                noteWindow.className = 'note-window';
                noteWindow.innerHTML = `
                    <textarea id="note-textarea-${appIndex}" rows="3" cols="20" placeholder="Γράψτε τις παρατηρήσεις σας εδώ...">${app.notes}</textarea>
                    <button class="save-note-btn">Αποθήκευση</button>
                    <button class="close-note-btn">Κλείσιμο</button>
                `;
                li.appendChild(noteWindow);

                // Προσθέτει κλικ στο κουμπί "Παρατηρήσεις" για να ανοίγει/κλείνει το παράθυρο παρατηρήσεων
                const noteBtn = li.querySelector('.note-btn');
                noteBtn.addEventListener('click', () => {
                    noteWindow.style.display = noteWindow.style.display === 'none' ? 'block' : 'none';
                });

                // Αποθηκεύει τις παρατηρήσεις όταν πατηθεί το κουμπί "Αποθήκευση"
                const saveNoteBtn = noteWindow.querySelector('.save-note-btn');
                saveNoteBtn.addEventListener('click', () => {
                    const noteTextarea = noteWindow.querySelector(`#note-textarea-${appIndex}`);
                    app.notes = noteTextarea.value;
                    saveApplications();
                    // Ενημερώνει το κουμπί "Παρατηρήσεις" για να δείχνει αν υπάρχουν παρατηρήσεις
                    noteBtn.classList.toggle('has-notes', !!app.notes);
                });

                // Κλείνει το παράθυρο παρατηρήσεων όταν πατηθεί το κουμπί "Κλείσιμο"
                const closeNoteBtn = noteWindow.querySelector('.close-note-btn');
                closeNoteBtn.addEventListener('click', () => {
                    noteWindow.style.display = 'none';
                });
            });
            appListElement.appendChild(ul);

            // Προσθέτει κλικ στην κατηγορία για να ανοίγει/κλείνει η λίστα εφαρμογών
            categoryItem.addEventListener('click', () => {
                ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
            });
        });
    }

    // Αποθηκεύει τις πληροφορίες στο LocalStorage
    function saveApplications() {
        localStorage.setItem(storageKey, JSON.stringify(applications));
    }

    // Προσθήκη κατηγορίας
    document.getElementById('add-category-btn').addEventListener('click', () => {
        const categoryName = prompt("Δώσε το όνομα της νέας κατηγορίας:");
        if (categoryName) {
            let defaultApp = { name: "Νέα Εφαρμογή", url: "#", notes: "" };
            applications.push({
                category: categoryName,
                apps: [defaultApp]
            });
            saveApplications();
            renderApplications();
        }
    });

    // Διαγραφή κατηγορίας
    document.getElementById('delete-category-btn').addEventListener('click', () => {
        const categoryIndex = prompt(
            "Δώσε τον αριθμό της κατηγορίας που θέλεις να διαγράψεις:\n" +
            applications.map((cat, index) => `${index + 1}. ${cat.category}`).join('\n')
        ) - 1;

        if (categoryIndex >= 0 && categoryIndex < applications.length) {
            if (confirm(`Είσαι σίγουρος ότι θέλεις να διαγράψεις την κατηγορία "${applications[categoryIndex].category}";`)) {
                applications.splice(categoryIndex, 1);
                saveApplications();
                renderApplications();
            }
        }
    });

    // Επεξεργασία κατηγορίας
    document.getElementById('edit-category-btn').addEventListener('click', () => {
        const categoryIndex = prompt(
            "Δώσε τον αριθμό της κατηγορίας που θέλεις να επεξεργαστείς:\n" +
            applications.map((cat, index) => `${index + 1}. ${cat.category}`).join('\n')
        ) - 1;

        if (categoryIndex >= 0 && categoryIndex < applications.length) {
            const newName = prompt("Δώσε το νέο όνομα της κατηγορίας:", applications[categoryIndex].category);
            if (newName) {
                applications[categoryIndex].category = newName;
                saveApplications();
                renderApplications();
            }
        }
    });

    // Προσθήκη εφαρμογής
    document.getElementById('add-app-btn').addEventListener('click', () => {
        const categoryIndex = prompt(
            "Δώσε τον αριθμό της κατηγορίας στην οποία θέλεις να προσθέσεις εφαρμογή:\n" +
            applications.map((cat, index) => `${index + 1}. ${cat.category}`).join('\n')
        ) - 1;

        if (categoryIndex >= 0 && categoryIndex < applications.length) {
            const appName = prompt("Δώσε το όνομα της εφαρμογής:");
            const appUrl = prompt("Δώσε τη διεύθυνση URL της εφαρμογής:");

            if (appName && appUrl) {
                applications[categoryIndex].apps.push({
                    name: appName,
                    url: appUrl,
                    notes: ""
                });
                saveApplications();
                renderApplications();
            }
        }
    });

    // Διαγραφή εφαρμογής
    document.getElementById('delete-app-btn').addEventListener('click', () => {
        const categoryIndex = prompt(
            "Δώσε τον αριθμό της κατηγορίας από την οποία θέλεις να διαγράψεις εφαρμογή:\n" +
            applications.map((cat, index) => `${index + 1}. ${cat.category}`).join('\n')
        ) - 1;

        if (categoryIndex >= 0 && categoryIndex < applications.length) {
            const appIndex = prompt(
                "Δώσε τον αριθμό της εφαρμογής για διαγραφή:\n" +
                applications[categoryIndex].apps.map((app, index) => `${index + 1}. ${app.name}`).join('\n')
            ) - 1;

            if (appIndex >= 0 && appIndex < applications[categoryIndex].apps.length) {
                if (confirm(`Είσαι σίγουρος ότι θέλεις να διαγράψεις την εφαρμογή "${applications[categoryIndex].apps[appIndex].name}";`)) {
                    applications[categoryIndex].apps.splice(appIndex, 1);
                    saveApplications();
                    renderApplications();
                }
            }
        }
    });

    // Επεξεργασία εφαρμογής
    document.getElementById('edit-app-btn').addEventListener('click', () => {
        const categoryIndex = prompt(
            "Δώσε τον αριθμό της κατηγορίας στην οποία βρίσκεται η εφαρμογή που θέλεις να επεξεργαστείς:\n" +
            applications.map((cat, index) => `${index + 1}. ${cat.category}`).join('\n')
        ) - 1;

        if (categoryIndex >= 0 && categoryIndex < applications.length) {
            const appIndex = prompt(
                "Δώσε τον αριθμό της εφαρμογής που θέλεις να επεξεργαστείς:\n" +
                applications[categoryIndex].apps.map((app, index) => `${index + 1}. ${app.name}`).join('\n')
            ) - 1;

            if (appIndex >= 0 && appIndex < applications[categoryIndex].apps.length) {
                const newAppName = prompt("Δώσε το νέο όνομα της εφαρμογής:", applications[categoryIndex].apps[appIndex].name);
                const newAppUrl = prompt("Δώσε το νέο URL της εφαρμογής:", applications[categoryIndex].apps[appIndex].url);
                if (newAppName && newAppUrl) {
                    applications[categoryIndex].apps[appIndex] = {
                        name: newAppName,
                        url: newAppUrl,
                        notes: applications[categoryIndex].apps[appIndex].notes
                    };
                    saveApplications();
                    renderApplications();
                }
            }
        }
    });

    // Αρχικοποίηση της εφαρμογής
    renderApplications();
</script>

</body>
</html>               Τα δεδομένα της σελίδας θέλω να αποθηκεύονται σε ένα αρχείο jason στο φάκελο που είναι  το αρχείο