Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Classes</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #e9f2fa; /* Light background color */
        }
        header {
            background-color: #007bff; /* Header background color */
            color: white;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            height: 60px;
            justify-content: space-between; /* Ensure space between logo and icons/buttons */
        }
        header img {
            height: 40px;
            margin-right: 20px;
        }
        .header-right {
            display: flex;
            align-items: center;
        }
        .header-right i {
            margin-right: 15px;
            cursor: pointer;
        }
        .header-right .button {
            background-color: #004085;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            margin-left: 10px;
            cursor: pointer;
        }
        .container {
            padding: 20px;
        }
        .header-title {
            background-color: white;
            padding: 15px;
            margin: 0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between; /* Flexbox for alignment */
            align-items: center;
        }
        .top-buttons {
            display: flex;
        }
        .button {
            background-color: #007bff; /* Button color */
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            margin-left: 10px;
            cursor: pointer;
        }
        h2 {
            margin: 0;
        }
        .class-card {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-top: 20px;
            width: 300px; /* Updated width */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth animation */
        }
        .class-card h3 {
            margin: 0;
            font-size: 18px; /* Updated font size */
        }
        .class-card p {
            margin: 5px 0;
            color: gray;
        }
        .class-actions {
            display: flex;
            justify-content: space-between; /* Space between class title and icon */
            align-items: center;
        }
        .class-actions i {
            cursor: pointer;
        }
        /* Hover effect for class card */
        .class-card:hover {
            transform: translateY(-5px); /* Moves the card up slightly */
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Adds a stronger shadow */
        }
        .class-card:hover::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background-color: #007bff; /* Blue line under the card */
            margin-top: 10px;
        }
        /* Modal styles */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: none;
            width: 300px;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .modal-body {
            padding: 20px;
        }
        .modal-body input {
            width: calc(100% - 10px);
            margin-bottom: 10px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .modal-footer {
            text-align: right;
            padding: 10px;
        }
        .modal-footer .button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
        }
        /* Notification styles */
        .notification {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #007bff;
            color: white;
            padding: 10px;
            border-radius: 5px;
            display: none;
            z-index: 9999;
        }
    </style>
</head>
<body>

<header>
    <img src="https://netasite.org/wp-content/uploads/2021/10/Asset-1.png" alt="Logo">
    <h1>My Classes</h1>
    <div class="header-right">
        <i class="fas fa-bell" title="Latest news"></i>
        <i class="fas fa-phone" title="Support"></i>
        <i class="fas fa-question-circle" title="Help"></i>
        <button class="button" id="send-feedback-btn"><i class="fas fa-comment-dots"></i> Send Feedback</button>
    </div>
</header>

<div class="container">
    <div class="header-title">
        <h2>My Classes</h2>
        <div class="top-buttons">
            <button class="button" id="add-class-btn">Add Class</button>
            <button class="button">Combine Classes</button>
        </div>
    </div>

    <div id="class-list"></div> <!-- Container for dynamic class cards -->

    <div class="class-card">
        <div class="class-actions">
            <h3>Test Class</h3>
            <i class="fas fa-ellipsis-v"></i>
        </div>
        <p>2 students</p>
        <p>Local</p>
    </div>
</div>

<!-- Modal for adding new class -->
<div class="modal" id="add-class-modal">
    <div class="modal-header">
        <h3>Add a Class</h3>
        <span class="close" id="close-modal">&times;</span>
    </div>
    <div class="modal-body">
        <input type="text" id="class-name" placeholder="Class Name Here" />
        <input type="text" id="student-names" placeholder="Student FULL Names Here" />
    </div>
    <div class="modal-footer">
        <button class="button" id="add-class-submit">Add Class</button>
    </div>
</div>

<!-- Feedback Modal -->
<div class="modal" id="feedback-modal">
    <div class="modal-header">
        <h3><i class="fas fa-comment-alt"></i> Give us your feedback about Fuckwize</h3>
        <span class="close" id="close-feedback-modal">&times;</span>
    </div>
    <div class="modal-body">
        <textarea id="feedback-text" placeholder="Enter your feedback here..." rows="4" style="width: 100%;"></textarea>
    </div>
    <div class="modal-footer">
        <button class="button" id="send-feedback">Send Feedback</button>
    </div>
</div>

<!-- Notification for feedback sent -->
<div class="notification" id="feedback-notification">Sent feedback to Fuckwize!</div>

<script>
    // Get elements
    const addClassBtn = document.getElementById("add-class-btn");
    const addClassModal = document.getElementById("add-class-modal");
    const closeModalBtn = document.getElementById("close-modal");
    const addClassSubmitBtn = document.getElementById("add-class-submit");
    const classNameInput = document.getElementById("class-name");
    const studentNamesInput = document.getElementById("student-names");
    const classList = document.getElementById("class-list");
    const feedbackBtn = document.getElementById("send-feedback-btn");
    const feedbackModal = document.getElementById("feedback-modal");
    const closeFeedbackModal = document.getElementById("close-feedback-modal");
    const feedbackText = document.getElementById("feedback-text");
    const feedbackNotification = document.getElementById("feedback-notification");

    // Show Add Class Modal
    addClassBtn.addEventListener("click", () => {
        addClassModal.style.display = "block";
    });

    // Close Add Class Modal
    closeModalBtn.addEventListener("click", () => {
        addClassModal.style.display = "none";
    });

    // Add Class
    addClassSubmitBtn.addEventListener("click", () => {
        const className = classNameInput.value;
        const studentNames = studentNamesInput.value;

        if (className && studentNames) {
            const classCard = document.createElement("div");
            classCard.classList.add("class-card");
            classCard.innerHTML = `<div class="class-actions">
                <h3>${className}</h3>
                <i class="fas fa-ellipsis-v"></i>
            </div>
            <p>${studentNames.split(",").length} students</p>
            <p>Local</p>`;
            classList.appendChild(classCard);
            addClassModal.style.display = "none";
            classNameInput.value = "";
            studentNamesInput.value = "";
        }
    });

    // Show Feedback Modal
    feedbackBtn.addEventListener("click", () => {
        feedbackModal.style.display = "block";
    });

    // Close Feedback Modal
    closeFeedbackModal.addEventListener("click", () => {
        feedbackModal.style.display = "none";
    });

    // Send Feedback
    document.getElementById("send-feedback").addEventListener("click", () => {
        const feedback = feedbackText.value;
        if (feedback) {
            feedbackNotification.style.display = "block";
            setTimeout(() => {
                feedbackNotification.style.display = "none";
            }, 3000);
        }
        feedbackText.value = "";
        feedbackModal.style.display = "none";
    });
</script>

</body>
</html>