Θέλουμε να μετατρέψουμε την παρακάτω σελίδα σε μία σε μία ωραία σελίδα για το web γραφικά και ευκολοδούλευτη όταν πατάω ε πάνω στην κάθε κατηγορία τότε θα ανοίγει μία λίστα με τις εφαρμογές που έχει κι όταν ξαναπατάω πάνω στην κατηγορία θα κλείνει αυτή η λίστα κάνε αυτές τις αλλαγές και δώσε μου τον κώδικα ολοκληρωμένο             <!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: 300px;
        }
        .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: 10px 5px;
        }
        .action-buttons {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }
    </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" },
                    { name: "Example AI 2", url: "https://example2.com" }
                ]
            }
        ];

        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');
                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>`;
                    ul.appendChild(li);
                });
                appListElement.appendChild(ul);
            });
        }

        // Αποθηκεύει τις πληροφορίες στο 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: "#" };
                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
                    });
                    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
                        };
                        saveApplications();
                        renderApplications();
                    }
                }
            }
        });

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