public/Palindrome_Generator/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palindrome Generator</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Inline CSS for specific elements -->
    <style>
        .loading-text {
            display: none; /* Hidden by default */
        }
    </style>
</head>
<body>
    <div class="container my-5">
        <h1 class="text-center mb-4">Palindrome Generator</h1>
        <form id="palindromeForm" class="mb-4 d-flex flex-column align-items-center">
            <div class="mb-3">
                <label for="inputString" class="form-label">Enter a String:</label>
                <input type="text" class="form-control" id="inputString" placeholder="Enter your string">
            </div>
            <button type="submit" class="btn btn-primary">Generate Result</button>
        </form>
        <div class="loading-text text-center my-3">Loading...</div>
        <div id="result" class="text-center"></div>
    </div>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <!-- Custom JS -->
    <script src="script.js"></script>
</body>
</html>