add-topics.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Topic - InsightSync</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="testimonial.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans&display=swap"
        rel="stylesheet">
    <link href="css/bootstrap-icons.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--icons cdn link-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi-back"></i>
                <span>InsightSync</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-lg-5 me-lg-auto">
                    <li class="nav-item">
                        <a class="nav-link click-scroll" href="index.html#section_1">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link click-scroll" href="index.html#section_2">Browse Topics</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link click-scroll" href="index.html#section_3">How it works</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link click-scroll" href="index.html#section_4">FAQs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link click-scroll" href="index.html#section_5">Testimonials</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link click-scroll" href="index.html#section_5">Contact</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#section_5" id="navbarLightDropdownMenuLink"
                            role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
                        <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarLightDropdownMenuLink">
                            <li><a class="dropdown-item" href="topics-listing.html">Topics Listing</a></li>
                            <li><a class="dropdown-item" href="add-topics.html">Add Topic Details</a></li>
                            <li><a class="dropdown-item" href="contact.html">Contact Form</a></li>
                        </ul>
                    </li>
                </ul>


                <div class="d-none d-lg-block">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a class="navbar-icon bi-person smoothscroll" class="nav-link dropdown-toggle"
                                data-bs-toggle="dropdown" role="button" aria-expanded="true"
                                id="navbarLightDropdownMenuLink"></a>
                            <ul class="dropdown-menu authcomp dropdown-menu-light" aria-labelledby="navbarLightDropdownMenuLink">
                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#loginModal"
                                        style="cursor: pointer;">Login</a></li>

                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#signupModal"
                                        style="cursor: pointer;">Sign Up</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </nav>

    <!-- Signup Modal -->
    <div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content glass-effect">
                <div class="modal-header justify-content-center">
                    <img
                        src="https://readme-typing-svg.herokuapp.com/?font=Righteous&size=35&center=true&vCenter=true&width=490&height=60&duration=3800&lines=Sign+Up☺️;&color=000000" />
                </div>
                <div class="modal-body">
                    <form id="signupForm" action="your-server-endpoint" method="post"
                        onsubmit="return validateSignupForm()">
                        <div class="mb-3">
                            <label for="signupUsername" class="form-label">Username</label>
                            <input type="text" class="form-control" id="signupUsername" placeholder="Enter username">
                        </div>
                        <div class="mb-3">
                            <label for="signupEmail" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="signupEmail" placeholder="Enter email">
                        </div>
                        <div class="mb-3 position-relative">
                            <label for="signupPassword" class="form-label">Password</label>
                            <input type="password" class="form-control" id="signupPassword"
                                placeholder="Enter password">
                            <span class="eye-icon" onclick="toggleSignupPasswordVisibility()">
                                <i class="bi bi-eye" id="toggleSignupPasswordIcon"></i>
                            </span>
                        </div>
                        <div class="mb-3 position-relative">
                            <label for="signupConfirmPassword" class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" id="signupConfirmPassword"
                                placeholder="Confirm password">
                            <span class="eye-icon" onclick="toggleSignupConfirmPasswordVisibility()">
                                <i class="bi bi-eye" id="toggleSignupConfirmPasswordIcon"></i>
                            </span>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary btn-block">Sign Up</button>
                        </div>
                        <div class="mt-3 text-center">
                            <p>Already have an account? <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal"
                                    data-bs-dismiss="modal" aria-label="Close">Login</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Login Page -->
    <nav>
        <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md">
                <div class="modal-content glass-effect">

                    <div class="modal-header justify-content-center">
                        <img
                            src="https://readme-typing-svg.herokuapp.com/?font=Righteous&size=35&center=true&vCenter=true&width=490&height=60&duration=3800&lines=Login☺️;&color=000000" />
                    </div>
                    <div class="modal-body">
                        <form action="your-server-endpoint" method="post" onsubmit="return validateForm()">
                            <div class="mb-3">
                                <label for="loginEmail" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="loginEmail" aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3 position-relative">
                                <label for="loginPassword" class="form-label">Password</label>
                                <input type="password" class="form-control" id="loginPassword">
                                <span class="eye-icon" onclick="togglePasswordVisibility()">
                                    <i class="bi bi-eye" id="togglePasswordIcon"></i>
                                </span>
                            </div>
                            <div class="mb-3 text-end">
                                <a href="#" class="link-primary">Forgot Password?</a>
                            </div>
                            <div class="d-flex justify-content-center">
                                <button type="submit" class="btn btn-primary btn-block">Login</button>
                            </div>
                            <div class="mt-3 text-center">
                                <p>Don't have an account? <a href="#" data-bs-toggle="modal"
                                        data-bs-target="#signupModal" data-bs-dismiss="modal" aria-label="Close">Sign
                                        Up</a></p>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    </nav>

    <header class="site-header d-flex flex-column justify-content-center align-items-center">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Share Insight</li>
                        </ol>
                    </nav>
                    <h2 class="text-white">Share Your Insight</h2>
                </div>
            </div>
        </div>
    </header>

    <section class="add-topic-section section-padding">
        <div class="container mt-4">
            <div class="row">
                <div class="col-lg-8 col-12 mx-auto">
                    <form action="your-server-endpoint" method="post" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="topicTitle" class="form-label fw-bold" style="font-size: 1.2rem;">Topic
                                Title</label>
                            <input type="text" class="form-control" id="topicTitle" name="title" placeholder="e.g. Web Design" required>
                        </div>
                        <div class="mb-3">
                            <label for="topicImage" class="form-label fw-bold" style="font-size: 1.2rem;">Image</label>
                            <input type="file" class="form-control" id="topicImage" name="image" required>
                        </div>
                        <div class="mb-3">
                            <label for="topicContent" class="form-label fw-bold"
                                style="font-size: 1.2rem;">Description</label>
                            <textarea class="form-control" id="topicContent" name="content" rows="5" placeholder="e.g. Web design involves creating the visual elements..."
                            style="font-size: 12px;"
                                required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="topicSubmittedBy" class="form-label fw-bold"
                                style="font-size: 1.2rem;">Submitted By:</label>
                            <input type="text" class="form-control" id="topicSubmittedBy" name="submittedBy" placeholder="e.g. John Doe" required>
                        </div>
                        <div class="mb-3">
                            <label for="topicCategory" class="form-label fw-bold"
                                style="font-size: 1.2rem;">Category</label>
                            <select class="form-select" id="topicCategory" name="category" required>
                                <option value="" disabled selected>Select a category</option>
                                <option value="Technology">Design</option>
                                <option value="Science">Marketing</option>
                                <option value="Health">Finance</option>
                                <option value="Education">Education</option>
                                <option value="Business">Music</option>
                            </select>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button id="submitBtn" type="submit" class="btn btn-primary btn-block">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer class="site-footer section-padding">
        <div class="container">
            <div class="row">

                <div class="col-lg-3 col-12 mb-4 pb-2">
                    <a class="navbar-brand mb-2" href="index.html">
                        <i class="bi-back"></i>
                        <span>InsightSync</span>
                    </a>
                </div>

                <div class="col-lg-3 col-md-4 col-6">
                    <h6 class="site-footer-title mb-3">Resources</h6>

                    <ul class="site-footer-links">
                        <li class="site-footer-link-item">
                            <a href="index.html" class="site-footer-link">Home</a>
                        </li>

                        <li class="site-footer-link-item">
                            <a href="index.html#section_3" class="site-footer-link">How it works</a>
                        </li>

                        <li class="site-footer-link-item">
                            <a href="index.html#section_4" class="site-footer-link">FAQs</a>
                        </li>

                        <li class="site-footer-link-item">
                            <a href="index.html#section_6" class="site-footer-link">Contact</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 col-6 mb-4 mb-lg-0">
                    <h6 class="site-footer-title mb-3">Information</h6>

                    <p class="text-white d-flex mb-1">
                        <a href="tel: 305-240-9671" class="site-footer-link">
                            305-240-9671
                        </a>
                    </p>

                    <p class="text-white d-flex">
                        <a href="mailto:info@company.com" class="site-footer-link">
                            info@company.com
                        </a>
                    </p>
                    <p class="socialmedia_links">
            
                        <a href="https://www.instagram.com/" id="social-links"><i class="fa-brands fa-instagram" ></i></a>
                        <a href="https://x.com/i/flow/login?lang=en" id="social-links"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="https://api.linkedin.com/login" id="social-links"><i class="fa-brands fa-linkedin"></i></a>
                        <a href="https://github.com/login" id="social-links"><i class="fa-brands fa-github"></i></a>
                        <a href="https://canary.discord.com/login" id="social-links"><i  class="fa-brands fa-discord"></i></a>
                        
                    </p>
                </div>

                <div class="col-lg-3 col-md-4 col-12 mt-4 mt-lg-0 ms-auto">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            English</button>

                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item" type="button">Thai</button></li>

                            <li><button class="dropdown-item" type="button">Myanmar</button></li>

                            <li><button class="dropdown-item" type="button">Arabic</button></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div class="copyright-box">
            <p class="copyright-text mt-lg-5 mt-4">Copyright © 2024 InsightSync. All rights reserved.
            </p>
        </div>
    </footer>

    <!-- Scroll to Top Button -->
    <button onclick="topFunction()" id="scrollToTopBtn" title="Go to top"></button>

    <!-- JAVASCRIPT FILES -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/custom.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.min.js"></script>
    <script type="module">
        // Button event listener
        import { link } from "./Baselink.js"
        console.log(link)
        const btn = document.getElementById("submitBtn");
        btn.addEventListener("click", async (event) => {
            event.preventDefault(); // Prevent default form submission behavior

            // Get the form fields
            const title = document.getElementById("topicTitle").value;
            const content = document.getElementById("topicContent").value;
            const submittedBy = document.getElementById("topicSubmittedBy").value; // Corrected ID
            const category = document.getElementById("topicCategory").value;
            const imageFile = document.getElementById("topicImage").files[0]; // Use `.files[0]` for file input

            // Validate required fields
            if (!title || !content || !submittedBy || !category || !imageFile) {
                alert("Please fill in all fields and select an image.");
                return;
            }

            // Create FormData object
            const formData = new FormData();
            formData.append("title", title);
            formData.append("topic", category);
            formData.append("content", content);
            formData.append("submittedby", submittedBy);
            formData.append("imagefile", imageFile); // Append the file directly

            try {
                // Send POST request
                console.log(formData)
                const response = await axios.post(
                    `${link}/api/v1/insight/addinsight`,
                    formData,
                    {
                        headers: {
                            "Content-Type": "multipart/form-data", // Important for file upload
                            "Authorization": `Bearer ${localStorage.getItem("authToken")}`
                        },
                    }
                );

                // Handle successful response
                console.log("Success:", response.data);
                alert("Topic submitted successfully!");
            } catch (error) {
                // Handle error response
                console.error("Error:", error);
                alert("There was an error submitting your topic. Please try again.");
            }
        });
    </script>

<script>
    // Check if the user is logged in by verifying the presence of an auth token in localStorage
    if (localStorage.getItem("authToken")) {
        console.log("User logged in");

        // Select all elements with the class 'authcomp'
        const authElements = document.getElementsByClassName("authcomp");

        // Loop through the elements and change their opacity
        Array.from(authElements).forEach(element => {
            element.style.opacity = 0; // Set opacity to 0 (hidden)
            element.style.pointerEvents = "none"; // Prevent interaction
        });
    } else {
        console.log("User not logged in");
        window.location.href="/"
    }
</script>

</body>

</html>