algos.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8 " />
    <title>Classifiers</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='main.css')}}">
    <link href="https://fonts.googleapis.com " rel="preconnect " />
    <link href="https://fonts.gstatic.com " rel="preconnect " crossorigin="anonymous " />
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js " type="text/javascript "></script>
    <script type="text/javascript ">
        WebFont.load({
            google: {
                families: ["Orbitron:regular,500,600,700,800,900 ", "Noto Sans Tamil:100,200,300,regular,500,600,700,800,900 ", "Inter:100,200,300,regular,500,600,700,800,900 "]
            }
        });
    </script>
    <script type="text/javascript ">
        ! function(o, c) {
            var n = c.documentElement,
                t = " w-mod- ";
            n.className += t + "js ", ("ontouchstart " in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch ")
        }(window, document);
    </script>
</head>

<body>
    <div class="tab-container">
        <!-- Left column (tab menu) -->
        <div class="tab-menu">
            <button class="tablinks active" onclick="openTab(event, 'knn')">KNN</button>
            <button class="tablinks" onclick="openTab(event, 'linear')">Linear Regression</button>
            <button class="tablinks" onclick="openTab(event, 'kmeans')">KMeans</button>
            <button class="tablinks" onclick="openTab(event, 'naive-bayes')">Naive Bayes</button>
        </div>

        <!-- Right column (tab content) -->
        <div class="tab-content">
            <div id="linear" class="tabcontent">
                <iframe src="{{ url_for('linear') }}" style="width:100%; height:500px;" scrolling="no"></iframe>
            </div>

            <div id="knn" class="tabcontent">
                <iframe src="{{ url_for('knn') }}" style="width:100%; height:500px;" scrolling="no"></iframe>
            </div>

            <div id="kmeans" class="tabcontent">
                <iframe src="{{ url_for('kmeans') }}" style="width:100%; height:500px;" scrolling="no"></iframe>
            </div>

            <div id="naive-bayes" class="tabcontent">
                <iframe src="{{ url_for('naive') }}" style="width:100%; height:500px;" scrolling="no"></iframe>
            </div>
        </div>

        <script>
            document.getElementById("knn").style.display = "block";

            function openTab(evt, tabName) {
                var i, tabcontent, tablinks;

                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }

                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }

                document.getElementById(tabName).style.display = "block";
                evt.currentTarget.className += " active";
            }
        </script>
</body>

</html>