
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Language Layer API + Node.js</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css">
</head>

<body>
    <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient">
        <div class="container"><a class="navbar-brand logo" href="#">Language Layer API + Node.js</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto"></ul>
            </div>
        </div>
    </nav>
    <main class="page projets-page">
        <section class="portfolio-block project-no-images">
            <div class="container">
                <div class="heading">
                    <h2>Language Detection</h2>
                </div>
                <% detectedData.forEach(function(result, index) { %> 
                    <div class="row">
                        <div class="col-md-6 col-lg-4">
                            <div class="project-card-no-image">
                                <h3>Language Code</h3>
                                <h4> <%- result.language_code %>  </h4>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="project-card-no-image">
                                <h3>Language Name</h3>
                                <h4> <%- result.language_name %>  </h4>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="project-card-no-image">
                                <h3>Probability</h3>
                                <h4> <%- result.probability %>  </h4>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="project-card-no-image">
                                <h3>Percentage</h3>
                                <h4> <%- result.percentage %>  </h4>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="project-card-no-image">
                                <h3>Reliable Result</h3>
                                <h4> <%- result.reliable_result %>  </h4>
                            </div>
                        </div>
                    </div>
                <% }) %>    
            </div>
        </section>
    </main>
    <footer class="page-footer">
        <div class="container">
            <div class="links"><a href="#">Language Layer API</a></div>
            <div class="social-icons"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-instagram-outline"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a></div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
    <script src="js/script.min.js"></script>
</body>

</html>