<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/css/api.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header>
        <div class="logo-con">
            <a href="/">
                <p>
                    <span class="p">P</span>
                    <span class="p-all">ool Quiz</span>
                </p>
               </a>
        </div>
        <div class="nav-links-con">
            <ul class="links">
                <li class="link"> <a href="/browse">Browse </a></li>
                <li class="link"> <a href="/add-question">Create Question </a></li>
                <li class="link"> <a href="/api-setting">API </a></li>
                <li class="link"> <a href="/login">Login </a></li>
            </ul>
        </div>
    </header>

    <main>

        <div class="container-md">
            <h2>Pool-Quiz API</h2>
            <p>The Open Pool-Quiz Database provides a completely free JSON API for use in programming projects. Use of this API does not require a API Key, just generate the URL below use it in your own application to retrieve trivia questions.</p>



            <div class="alert alert-primary alert-dismissible" role="alert" >
                <strong>Generated URL :</strong> <span class="url"><a target="_blank" class="link-primary" href="http://localhost:5000/questions?amount=10" id="urlContainer">http://localhost:5000/questions?amount=10</a></span>
                <i class="fa-solid copy-btn fa-copy" style="float: right; font-size: 24px;" onclick="copyUrlToClipboard()"></i>
            </div>
            

            <form>
                <div class="mb-3">
                  <label for="amountOfQuizes" class="form-label">Number of Questions:</label>
                  <input type="number" placeholder="10" min="10" value="10" class="form-control" id="amountOfQuizes" aria-describedby="emailHelp">
                </div>
                <div class="mb-3">
                    <label for="Category" class="form-label">Select Category:</label>
                    <select id="Category" class="form-select" aria-label="Default select example">
                        <option selected>Any Category</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                </div>
        
                <div class="mb-3">
                    <label for="Difficulty" class="form-label">Select Difficulty:</label>
                    <select id="Difficulty" class="form-select" aria-label="Default select example">
                        <option selected>Any Difficulty</option>
                        <option value="1">Easy</option>
                        <option value="2">Medium</option>
                        <option value="3">Hard</option>
                      </select>
                </div>

                <div class="mb-3">
                    <label for="Type" class="form-label">Select Type:</label>
                    <select id="Type" class="form-select" aria-label="Default select example">
                        <option selected>Any Type</option>
                        <option value="1">Multiple Choice</option>
                        <option value="2">True / False</option>
                      </select>
                </div>

                <button type="submit" class="btn btn-primary">Submit</button>

  
                
 
              </form>


        </div>

    </main>


    <footer>

    </footer>


    <script>

    function copyUrlToClipboard(){
        var urlText = document.getElementById('urlContainer').innerText;

        var tempTextArea = document.createElement('textarea');
        tempTextArea.value = urlText;

        // Append the textarea to the document
        document.body.appendChild(tempTextArea);

        // Select the text in the textarea
        tempTextArea.select();

        // Copy the selected text to the clipboard
        document.execCommand('copy');

        // Remove the temporary textarea
        document.body.removeChild(tempTextArea);

        alert('URL copied to clipboard!');
    }

    </script>
    
</body>
</html>


