Huffman-Coding/index.html at main · zeynep-sena/Huffman-Coding · 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
<!DOCTYPE html>
<html lang="tr">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <title>Huffman Encoding</title>
</head>

<body>
    <!-- Başlık-->
    <div class="navbar navbar-default">
        <div class="container text-center">
            <div class=" m-auto">
                <a class="navbar-brand h1" href="index.html">Huffman Encoder</a>
            </div>
        </div>
    </div>
    <div class="container">

        <!-- Gövde-->
        <div class="text-center">
            <div>
                <p class="m-4">
                    Huffman Encoding büyük boyutlu bilgilerin kayıp olmadan (lossless) sıkıştırılmasını
                    sağlayan bir metottur. Bu uygulama ise input alanına girilen bir textin Huffman kodlaması
                    kullanılarak yüzde
                    kaç oranında sıkıştırılabildiğini hesaplayan, kodlanan texti ve oluşturulan ağacı görebileceğiniz
                    bir front-end
                    uygulamasıdır. İstanbul Üniversitesi - Cerrahpaşa öğrencileri tarafından Algoritma Analizi dersi
                    için
                    oluşturulmuştur.
                </p>
            </div>
            <!-- Metin ve Ağaç-->
            <div class="row">

                <!-- Input & Output-->
                <div class="col-md-4">
                    <div class="inputArea">
                        <form>
                            <textarea id="input" class="form-control"
                                placeholder="Sıkıştırılacak metni giriniz..."></textarea>
                            <button id="encode-button" type="button" class="btn btn-warning m-3">Encode</button>
                        </form>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="outputArea border rounded-lg">
                        <div id="kodlanmis_string">
                            <p id="output" style="word-break:break-all;">Encoded Text</p>
                        </div>

                    </div>

                    <div class="m-3">
                        <p> Sıkıştırma Oranı: <span id="yuzdelik"></span></p>

                    </div>
                </div>

            </div>

            <!-- Ağaç-->
            <div class="row">
                <div class="col-md-12 treeArea border rounded-lg" id="div">
                    <div id="agac" style="height:400px;">
                        <i style="line-height:500px;">Type to see the graph...</i>
                    </div>
                </div>
            </div>
        </div>
        <!-- Frekans Tablosu-->
        <div class="mt-5 text-center">
            <h6>Frekans Tablosu</h6>
            <table class="table">
                <thead>
                    <tr id="harfler">
                    </tr>
                </thead>
                <tbody>
                    <tr id="frekanslar">
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <!-- fontawesome -->
    <script src="https://kit.fontawesome.com/2cdeb7e939.js"></script>

    <!-- libraries -->
    <script src="js/libraries/jquery-2.1.3.min.js"></script>
    <script src="js/libraries/bootstrap.min.js"></script>
    <script src="js/libraries/jit.js"></script>
    <script src="js/libraries/binary_tree_visualizer.js"></script>
    <script src="js/libraries/priority-queue.js"></script>

    <!-- huffman scripts -->
    <script src="js/huffman/yaprak_dugumleri_olustur.js"></script>
    <script src="js/huffman/agac_olustur.js"></script>
    <script src="js/huffman/yol_olustur.js"></script>
    <script src="js/huffman/encode.js"></script>

    <!-- text scripts -->
    <script src="js/text/input.js"></script>

    <!-- gui scripts -->
    <script src="js/gui/index.js"></script>

    <!-- Congrats on finding an easter egg!! -->
    <script>
        /* https://www.youtube.com/watch?v=ygTZZpVkmKg&ab_channel=TheWeeknd */
    </script>
</body>

</html>