Notary/index.html at master · CoderFoundry/Notary · 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
<!doctype html>
<html lang="en">

<head>
    <title>Notary - Learn more about your books</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="style.css">
    <script src="/SearchString.js"></script>
    <script src="https://kit.fontawesome.com/9664c8b16b.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row">
            <!--Main Content Area-->
            <div class="col-md-8">
                <img src="/images/NotoryLogowhiteMed.png" class="responsive">
                <div class="card mb-4">
                    <h2 class="card-header" id="fileName">Book Title</h2>
                    <div class="card-body">
                        <div class="displayBox scroll-box" id="fileContent">
                            Select a book on the right
                        </div>
                    </div>
                    <div class="card-footer text-muted d-flex justify-content-center">
                        <a href="https://youtu.be/KEvLAe_2jXo"><i class="fab fa-youtube-square " style="color:red"
                                aria-hidden="true"></i>
                            Watch the Tutorial</a><span class="mx-2">|</span><a
                            href="https://github.com/CoderFoundry/Notary" target="_blank">
                            <i class="fab fa-github-square" aria-hidden="true" style="color:black"></i><span
                                class="ml-1">Notary
                                Code</span></a><span class="mx-2">|</span><a href="https://CoderFoundry.com"
                            target="_blank">Learn To Code at
                            CoderFoundry</a>
                    </div>
                </div>
            </div>
            <!--SideBar Content-->
            <div class="col-md-4">
                <!--Search Widget-->
                <div class="card my-4">
                    <h5 class="card-header">Search</h5>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" id="keyword" placeholder="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button" onclick="performMark()">Search</button>
                            </span>
                        </div>
                    </div>
                    <div class="card-footer" id="searchstat">

                    </div>
                </div>
                <!--Select a Book Widget -->
                <div class="card my-4">
                    <h5 class="card-header">Select a Book</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="list-unstyled mb-0">
                                    <li><a href="#"
                                            onclick="loadBook('AliceInWonderland.txt','Alice in Wonderland')">Alice in
                                            Wonderland</a></li>
                                    <li><a href="#" onclick="loadBook('LOTR.txt','Lord of the Rings')">Lord of the
                                            Rings</a></li>
                                    <li><a href="#" onclick="loadBook('JekyllAndHyde.txt','Dr Jekyll and Mr. Hyde')">Dr
                                            Jekyll and Mr. Hyde</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Most Used Words-->
                <div class="card my-4">
                    <h5 class="card-header">Most Used Words</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="list-unstyled mb-0" id="mostUsed">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Least Used Words -->
                <div class="card my-4">
                    <h5 class="card-header">Least Used Words</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <ul class="list-unstyled mb-0" id="leastUsed">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Document Stats-->
                <div class="card my-4">
                    <h5 class="card-header">Document Stats</h5>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li id="docLength"></li>
                            <li id="wordCount"></li>
                            <li id="charCount"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script id="template-ul-items" type="text/template">
            <li>
               {{val}}
            </li>
        </script>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
        </script>
</body>

</html>