ternary-computing-terminology/index.html at master · Tryquetra/ternary-computing-terminology · 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en" class="bg-gray-50">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terminology Hub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Using Inter font for a clean, professional look suitable for a knowledge base -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="text-gray-800 antialiased min-h-screen flex flex-col">

<!-- Header Section -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="max-w-4xl mx-auto px-4 py-5 md:py-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Terminology Hub</h1>
            <p class="text-sm text-gray-500 mt-1">A growing collection of definitions.</p>
        </div>

        <!-- Search Input -->
        <div class="relative w-full md:w-72">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <!-- Lucide Search Icon SVG -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            </div>
            <input
                    type="text"
                    id="searchInput"
                    placeholder="Search terms..."
                    class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 ease-in-out"
            >
        </div>
    </div>
</header>

<!-- Main Content Area -->
<main class="flex-grow px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <!-- Terminology List Container -->
        <div id="termsContainer" class="space-y-4">
            <!-- Terms will be injected here by JavaScript -->
        </div>

        <!-- Empty State (hidden by default) -->
        <div id="noResults" class="hidden text-center py-12">
            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">No terms found</h3>
            <p class="mt-1 text-sm text-gray-500">Try adjusting your search query.</p>
        </div>
    </div>
</main>

<!-- Footer -->
<footer class="bg-white border-t border-gray-200 py-4">
    <div class="max-w-4xl mx-auto px-4 text-center text-gray-500 text-sm">
        &copy; <span id="year"></span> Terminology Hub. Engineered for expansion.
    </div>
</footer>

<script>
    // --- DATA SOURCE ---
    // To add new terms, simply add a new object to this array.
    // Keep the structure: { term: "Term Name", definition: "The definition goes here.", tags: ["optional", "tags"] }
    const terminologyData = [
        {
            term: "Trit",
            definition: "From the English 'ternary' and 'digit'—sign, figure. It is a unit of measurement of entropy and the amount of information in information theory. A source with three equally probable messages has an entropy of 1 trit. 1 trit is ≈ 1.585 bits.",
            tags: ["Information Theory", "Units"]
        },
        // Example of easy expansion:
        // {
        //    term: "Bit",
        //    definition: "Portmanteau of 'binary digit'. The basic unit of information in computing and digital communications. Represents a logical state with one of two possible values.",
        //    tags: ["Computing", "Units"]
        // }
    ];

    // --- DOM REFERENCES ---
    const container = document.getElementById('termsContainer');
    const searchInput = document.getElementById('searchInput');
    const noResults = document.getElementById('noResults');
    document.getElementById('year').textContent = new Date().getFullYear();

    // --- FUNCTIONS ---

    /**
     * Renders a single term card HTML string.
     * @param {Object} item - The term object from the data array.
     * @return {string} HTML string for the card.
     */
    function createTermCard(item) {
        // Generate tag badges if they exist
        const tagsHtml = item.tags
            ? `<div class="mt-3 flex flex-wrap gap-2">
                    ${item.tags.map(tag => `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">${tag}</span>`).join('')}
                   </div>`
            : '';

        return `
                <article class="bg-white overflow-hidden shadow-sm rounded-lg border border-gray-200 hover:shadow-md transition-shadow duration-300 ease-in-out">
                    <div class="px-6 py-5">
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">${item.term}</h2>
                        <div class="prose prose-blue max-w-none text-gray-600 leading-relaxed">
                            <p>${item.definition}</p>
                        </div>
                        ${tagsHtml}
                    </div>
                </article>
            `;
    }

    /**
     * Renders the list of terms based on the provided data array.
     * @param {Array} data - Array of term objects to render.
     */
    function renderList(data) {
        // Clear current list
        container.innerHTML = '';

        if (data.length === 0) {
            noResults.classList.remove('hidden');
            return;
        } else {
            noResults.classList.add('hidden');
        }

        // Sort alphabetically by term name for better UX
        const sortedData = [...data].sort((a, b) => a.term.localeCompare(b.term));

        // Generate and inject HTML
        sortedData.forEach(item => {
            container.innerHTML += createTermCard(item);
        });
    }

    /**
     * Handles search input changes to filter the list.
     * @param {Event} e - Input event.
     */
    function handleSearch(e) {
        const query = e.target.value.toLowerCase().trim();

        const filteredData = terminologyData.filter(item => {
            return item.term.toLowerCase().includes(query) ||
                item.definition.toLowerCase().includes(query) ||
                (item.tags && item.tags.some(tag => tag.toLowerCase().includes(query)));
        });

        renderList(filteredData);
    }

    // --- INITIALIZATION ---
    // Initial render of the full list
    renderList(terminologyData);

    // Attach event listeners
    searchInput.addEventListener('input', handleSearch);

</script>
</body>
</html>