knowledge-base-tree/index.html at main · j86schroeder/knowledge-base-tree · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knowledge Base Tree</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="header-container">
    <h1>Knowledge Base Tree</h1>
    <div class="controls-row">
        <!-- Back Button (Hidden by default) -->
        <button id="backBtn" class="back-button" title="Back to categories" style="display:none;">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
        </button>

        <div class="search-box">
            <svg class="search-icon" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
            <input type="text" id="searchInput" placeholder="Loading KB Data..." disabled>
            <span class="search-clear" id="searchClear">×</span>
        </div>

        <!-- NEW: Browse All Button -->
        <button id="btnShowAll" class="header-btn">Browse All</button>

        <div id="filterContainer">
            <select id="filterSelect" class="filter-select">
                <option value="All">All Types</option>
                <option value="How To">How To</option>
                <option value="FAQ">FAQ</option>
                <option value="KCS Article">KCS Article</option>
                <option value="What Is">What Is</option>
            </select>
        </div>
    </div>
</div>

<div class="container" id="mainContainer">
    <div class="panel-col hide-on-search">
        <div class="col-header">Process</div>
        <div class="list-container"><ul id="processList"></ul></div>
    </div>
    <div class="panel-col hide-on-search">
        <div class="col-header">Domain</div>
        <div class="list-container"><ul id="domainList"></ul></div>
    </div>
    <div class="panel-col hide-on-search">
        <div class="col-header">Technology</div>
        <div class="list-container"><ul id="techList"></ul></div>
    </div>

    <div class="panel-col">
        <div class="col-header">
            <div style="display:flex; align-items:center; gap:8px;">
                Articles <div id="headerTagContainer"></div>
            </div>
            <span id="articleCountBadge" class="count-badge" style="display:none">0</span>
        </div>
        <div class="list-container" id="articleList">
            <div style="padding:20px; color:#94a3b8; text-align:center; font-size:13px;">Loading data...</div>
        </div>
    </div>
    <div class="panel-col">
        <div class="list-container" id="previewPane"></div>
    </div>
</div>

<!-- Load Main Module -->
<script type="module" src="js/app.js"></script>

</body>
</html>