danieldf01.github.io/index.html at main · danieldf01/danieldf01.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/styles.css" />
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <script src="./applications/lib/jquery-3.7.1.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Decision Tree Simulator</title>
</head>

<body>
    <!-- Header -->
    <header class="py-3 mb-4 border-bottom bg-body-secondary bg-opacity-75 ">
        <div class="container d-flex flex-wrap align-items-center justify-content-center ">
            <a href="https://www.ubu.es" class="d-flex align-items-center me-2 ">
                <img src="./applications/img/ubulogocolorfull.png" width="100" height="50">
            </a>
            <a href="index.html" class="fw-bold fs-5 ms-2 me-2 nav-link link-dark">Decision Tree Simulator</a>
            <ul class="nav me-auto mx-auto">
                <li class="nav-item">
                    <a href="applications/entropy/index.html"
                        class="nav-link link-dark px-2 link-opacity-50-hover ">Entropy</a>
                </li>
                <li class="nav-item">
                    <a href="applications/conditional entropy/index.html"
                        class="nav-link link-dark px-2 link-opacity-50-hover ">Conditional
                        Entropy</a>
                </li>
                <li class="nav-item">
                    <a href="applications/decision tree/index.html"
                        class="nav-link link-dark px-2 link-opacity-50-hover ">Decision Tree
                        ID3</a>
                </li>
            </ul>
        </div>
    </header>
    <!-- Title text, links to applications -->
    <div class="container">
        <div class="row mb-3">
            <div class="col-12 text-center">
                <p class="display-1 mb-4">Decision Tree Simulator</p>
                <p class="fs-5">This Decision Tree simulator is designed to help understand the concept of decision
                    trees and how they are created.<br>
                    This application offers a complete learning experience by not only teaching the basics with a
                    calculator for Entropy and Conditional Entropy, but also providing a detailed step-by-step
                    visualization of the ID3 algorithm.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-auto mb-3">
                <div class="card">
                    <div class="card-header text-center">
                        <span class="fw-bold fs-5">Entropy calculator</span>
                    </div>
                    <div class="card-body text-center">
                        <p class="card-text fw-light">Learn about entropy and calculate it for a dataset with values you
                            get to choose</p>
                        <a href="applications/entropy/index.html" class="btn btn-outline-success">Go</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-auto mb-3">
                <div class="card">
                    <div class="card-header text-center">
                        <span class="fw-bold fs-5">Conditional Entropy calculator</span>
                    </div>
                    <div class="card-body text-center">
                        <p class="card-text fw-light">Learn about conditional entropy and calculate it for a dataset
                            with values you get to choose</p>
                        <a href="applications/conditional entropy/index.html" class="btn btn-outline-success">Go</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-auto">
                <div class="card">
                    <div class="card-header text-center">
                        <span class="fw-bold fs-5">Decision Tree ID3</span>
                    </div>
                    <div class="card-body text-center">
                        <p class="card-text fw-light">Use one of the provided example datasets or your own dataset for a
                            step-by-step visualization of the ID3 algorithm</p>
                        <a href="applications/decision tree/index.html" class="btn btn-outline-success">Go</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Background image -->
    <div class="container-fluid bg-image">
        <div class="container align-items-start d-flex">
        </div>
    </div>
    <!-- Footer -->
    <footer class="py-3 mt-2 border-top bg-body-tertiary  ">
        <div class="container d-flex flex-wrap justify-content-between align-items-center ">
            <div class="col-md-4 col-auto d-flex align-items-center">
                <ul class="flex-column">
                    <span class="fw-bold ">Authors:</span>
                    <li class="mb-2 mt-2" style="list-style-type: none;">
                        <span>Daniel Drefs Fernandes</span>
                    </li>
                    <li class="mb-2" style="list-style-type: none;">
                        <span>Carlos López Nozal</span>
                    </li>
                    <li class="mb-2" style="list-style-type: none;">
                        <span>Ismael Ramos Pérez</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-3 col-auto d-flex align-items-center">
                <span class="date fw-light"></span>
                <script>
                    // Get the date of when the repository was last updated and write it into the corresponding footer span
                    const desiredRepo = "danieldf01.github.io";
                    const dateTagClass = ".date";

                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                            let repos = JSON.parse(this.responseText);

                            repos.forEach((repo) => {
                                if (repo.name == desiredRepo) {
                                    let lastUpdated = new Date(repo.updated_at);
                                    let day = lastUpdated.getUTCDate();
                                    let month = lastUpdated.getUTCMonth() + 1;
                                    let year = lastUpdated.getUTCFullYear();
                                    $(dateTagClass).text(`Last updated: ${day}-${month}-${year}`);
                                }
                            });
                        }
                    };
                    xhttp.open("GET", "https://api.github.com/users/danieldf01/repos", true);
                    xhttp.send();
                </script>
            </div>
        </div>
    </footer>
</body>

</html>