-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjournal-abbreviator.html
More file actions
314 lines (277 loc) · 27.4 KB
/
Copy pathjournal-abbreviator.html
File metadata and controls
314 lines (277 loc) · 27.4 KB
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Journal Abbreviator | CASSI Formatter | STEMKit</title>
<meta name="title" content="Journal Abbreviator | CASSI Formatter | STEMKit">
<meta name="description" content="Instantly convert full journal names to their strict CASSI abbreviations for academic manuscripts. Client-side processing ensures complete privacy.">
<meta name="keywords" content="journal abbreviation generator, CASSI formatter, standardize references, bibtex journal abbreviations, academic citation tool">
<link rel="canonical" href="https://stemkit.net/journal-abbreviator.html">
<meta property="og:url" content="https://stemkit.net/journal-abbreviator.html">
<meta property="twitter:url" content="https://stemkit.net/journal-abbreviator.html">
<meta property="og:title" content="Journal Abbreviator | CASSI Formatter">
<meta property="twitter:title" content="Journal Abbreviator | CASSI Formatter">
<meta property="og:description" content="Instantly convert full journal names to their strict CASSI abbreviations for academic manuscripts.">
<meta property="twitter:description" content="Instantly convert full journal names to their strict CASSI abbreviations for academic manuscripts.">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "STEMKit Journal Abbreviator",
"url": "https://stemkit.net/journal-abbreviator.html",
"description": "Standardize academic reference lists by converting full journal titles to their official abbreviations.",
"author": { "@type": "Person", "name": "Olanrewaju M. Daramola" },
"applicationCategory": "UtilityApplication",
"operatingSystem": "All",
"browserRequirements": "Requires JavaScript",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"featureList": [ "CASSI Standard Database", "Live Text Highlighting", "Client-Side Processing", "Custom User Abbreviations", "Unrecognised-Title Detection" ]
}
</script>
<meta name="author" content="Olanrewaju M. Daramola">
<meta name="theme-color" content="#ec4899">
<meta property="og:type" content="website">
<meta property="og:image" content="https://stemkit.net/assets/og-image.webp">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:image" content="https://stemkit.net/assets/og-image.webp">
<link rel="icon" type="image/x-icon" href="https://stemkit.net/assets/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="https://stemkit.net/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://stemkit.net/assets/favicon-16x16.png">
<link rel="apple-touch-icon" href="https://stemkit.net/assets/apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/all.min.css">
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "HowTo", "name": "How to abbreviate journal names", "totalTime": "PT2M", "step": [{"@type": "HowToStep", "position": 1, "name": "Paste your references", "text": "Drop a bibliography or .bib file into the input box, or click Example to try a sample."}, {"@type": "HowToStep", "position": 2, "name": "Watch the live output", "text": "Recognised titles are replaced instantly; matches are highlighted in pink, and likely journal titles the dictionary does not know are flagged in amber."}, {"@type": "HowToStep", "position": 3, "name": "Add your own abbreviations", "text": "Open Custom abbreviations and add one rule per line as Full Name = Abbrev. Rules are saved in your browser and override the built-in list."}, {"@type": "HowToStep", "position": 4, "name": "Copy the result", "text": "Click Copy Text to grab the abbreviated bibliography."}]}
</script>
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Is my bibliography uploaded anywhere?", "acceptedAnswer": {"@type": "Answer", "text": "No. Matching and replacement run entirely in your browser; nothing is sent to a server. Custom rules are stored only in your browser's local storage."}}, {"@type": "Question", "name": "Why wasn't one of my journals abbreviated?", "acceptedAnswer": {"@type": "Answer", "text": "The built-in list is a curated subset of about 200 titles, not the full CASSI database. Unrecognised titles are left untouched and flagged in amber so you can verify them against CASSI or the LTWA, or add them as a custom rule."}}, {"@type": "Question", "name": "Can I add my own journal abbreviations?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Open the Custom abbreviations panel and add one rule per line in the form Full Journal Name = Abbrev. Custom rules override the built-in list and are saved in your browser."}}, {"@type": "Question", "name": "What standard do the abbreviations follow?", "acceptedAnswer": {"@type": "Answer", "text": "CASSI (the CAS Source Index) for chemistry titles, which aligns with ISO 4 and the ISSN List of Title Word Abbreviations (LTWA)."}}, {"@type": "Question", "name": "Does it handle variant spellings of a title?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Matching tolerates a leading The, an ampersand written as and, missing colons, different dashes, any capitalisation, and titles wrapped across lines in a .bib file."}}, {"@type": "Question", "name": "Can I see what changed?", "acceptedAnswer": {"@type": "Answer", "text": "Keep Highlight on: each replaced title is marked in pink (hover to see the original), and suspected unknown journal titles are marked in amber."}}]}
</script>
<link rel="stylesheet" href="src/home.css">
<link rel="stylesheet" href="src/output.css">
<link rel="stylesheet" href="src/stemkit-docs.css">
<link rel="stylesheet" href="src/tools/journal-abbreviator.css">
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen flex flex-col font-sans transition-colors duration-300">
<nav class="sticky top-0 z-50 w-full bg-white/80 dark:bg-slate-950/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 transition-colors duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16 sm:h-20">
<a href="index.html" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
<div class="bg-indigo-600 text-white p-2 sm:p-2.5 rounded-lg shadow-sm flex items-center justify-center">
<i class="fa-solid fa-flask text-lg sm:text-xl"></i>
</div>
<span class="text-xl sm:text-2xl font-black tracking-tighter text-slate-900 dark:text-white">STEMKit</span>
</a>
<div class="hidden md:flex items-center gap-6 text-sm font-semibold text-slate-600 dark:text-slate-300">
<a href="index.html#data-tools" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Data</a>
<a href="index.html#comp-tools" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Compute</a>
<a href="index.html#pub-tools" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Writing & Citations</a>
<a href="index.html#focus-tools" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Focus</a>
<div class="h-5 w-px bg-slate-200 dark:bg-slate-700"></div>
<button class="themeToggle p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" aria-label="Toggle dark mode">
<i class="fa-solid fa-moon dark:hidden text-lg"></i>
<i class="fa-solid fa-sun hidden dark:block text-yellow-400 text-lg"></i>
</button>
<a href="plot-digitizer.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-full text-sm font-bold transition-all shadow-md hover:shadow-lg">
<i class="fa-solid fa-crosshairs mr-1"></i> Plot Digitizer
</a>
</div>
<div class="flex items-center gap-2 md:hidden">
<button class="themeToggle p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors text-slate-600 dark:text-slate-300">
<i class="fa-solid fa-moon dark:hidden text-lg"></i>
<i class="fa-solid fa-sun hidden dark:block text-yellow-400 text-lg"></i>
</button>
<button id="mobile-menu-btn" class="text-slate-600 dark:text-slate-300 hover:text-indigo-600 p-2 focus:outline-none">
<i class="fa-solid fa-bars text-2xl" id="menu-icon"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 absolute w-full shadow-xl">
<div class="px-4 pt-2 pb-6 space-y-2 text-base font-semibold text-slate-600 dark:text-slate-300">
<a href="index.html#data-tools" class="mobile-link block py-3 px-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-indigo-600 transition-colors">Data & Stats</a>
<a href="index.html#comp-tools" class="mobile-link block py-3 px-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-indigo-600 transition-colors">Compute</a>
<a href="index.html#pub-tools" class="mobile-link block py-3 px-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-indigo-600 transition-colors">Writing & Citations</a>
<a href="index.html#focus-tools" class="mobile-link block py-3 px-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-indigo-600 transition-colors">Focus & Flow</a>
<div class="pt-4 mt-2 border-t border-slate-100 dark:border-slate-800">
<a href="plot-digitizer.html" class="block text-center bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-xl shadow-md transition-colors">Digitizer Pro</a>
</div>
</div>
</div>
</nav>
<main class="flex-grow max-w-7xl mx-auto px-6 py-8 w-full flex flex-col gap-6">
<header class="mb-4">
<div class="inline-flex items-center gap-2 bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest mb-4 border border-pink-200 dark:border-pink-800/50">
<i class="fa-solid fa-spell-check"></i> Formatting utility
</div>
<h1 class="text-4xl font-black mb-2 tracking-tight">Journal Abbreviator</h1>
<p class="text-slate-500 dark:text-slate-400 max-w-3xl leading-relaxed">
Paste your reference list or BibTeX file below. The engine will instantly parse the text and replace full journal titles with their standardized CASSI abbreviations. Titles it doesn't recognise are flagged, and you can add your own rules.
</p>
<p class="text-xs text-slate-400 mt-3">100% client-side</p>
</header>
<div id="toastContainer" class="fixed bottom-6 right-6 z-50 flex flex-col gap-3 pointer-events-none"></div>
<div class="flex flex-col lg:flex-row gap-6 h-[calc(100vh-260px)] min-h-[500px]">
<div class="w-full lg:w-1/2 flex flex-col gap-4">
<div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm p-4 flex flex-col flex-grow">
<div class="flex justify-between items-center mb-2">
<h2 class="text-sm font-bold text-slate-800 dark:text-slate-200 uppercase tracking-wider">Raw Input</h2>
<button id="btnExample" class="text-[10px] text-slate-400 hover:text-pink-500 uppercase font-bold transition-colors mr-3">Example</button>
<button id="btnClear" class="text-[10px] text-slate-400 hover:text-red-500 uppercase font-bold transition-colors">Clear</button>
</div>
<textarea id="dataInput" class="w-full flex-grow bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-700 rounded-xl p-3 text-xs font-mono focus:ring-2 focus:ring-pink-500 outline-none resize-none whitespace-pre overflow-auto custom-scroll" spellcheck="false" placeholder="Paste bibliography here... E.g., Smith, J. et al., Journal of the American Chemical Society, 2024."></textarea>
</div>
<details class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm p-4 shrink-0">
<summary class="flex justify-between items-center cursor-pointer select-none list-none">
<span class="text-sm font-bold text-slate-800 dark:text-slate-200 uppercase tracking-wider">
<i class="fa-solid fa-pen-to-square text-pink-500 mr-1"></i> Custom abbreviations
</span>
<span id="dictLabel" class="bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-300 text-[10px] px-2 py-0.5 rounded font-mono"></span>
</summary>
<p class="text-xs text-slate-400 mt-3 mb-2 leading-relaxed">
One rule per line: <code class="text-pink-500">Full Journal Name = Abbrev.</code>, lines starting with <code>#</code> are ignored.
Custom rules override the built-in list and are saved in this browser only.
</p>
<textarea id="customRules" rows="4" spellcheck="false" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-700 rounded-xl p-3 text-xs font-mono focus:ring-2 focus:ring-pink-500 outline-none resize-y custom-scroll" placeholder="# Example: Journal of Fictional Chemistry = J. Fict. Chem."></textarea>
</details>
</div>
<div class="w-full lg:w-1/2 flex flex-col gap-4">
<div class="bg-slate-900 rounded-2xl border border-slate-800 shadow-xl flex flex-col flex-grow relative overflow-hidden">
<div class="bg-slate-950 px-4 py-3 flex justify-between items-center border-b border-slate-800 shrink-0">
<div class="flex items-center gap-3">
<span class="text-sm font-bold text-pink-400 uppercase tracking-wider font-mono">Abbreviated Output</span>
<span id="statsLabel" class="bg-slate-800 text-slate-300 text-[10px] px-2 py-0.5 rounded font-mono">0 Changes</span>
</div>
<div class="flex gap-2">
<label class="flex items-center gap-2 text-xs font-bold text-slate-400 cursor-pointer mr-2">
<input type="checkbox" id="toggleHighlights" checked class="w-3 h-3 text-pink-600 bg-slate-800 border-slate-600 rounded focus:ring-pink-500">
Highlight
</label>
<button id="btnCopyText" class="bg-pink-600 hover:bg-pink-500 text-white px-3 py-1.5 rounded-lg text-xs font-bold transition-all shadow-md transform hover:-translate-y-0.5 active:scale-95 flex items-center gap-1">
<i class="fa-regular fa-copy"></i> Copy Text
</button>
</div>
</div>
<textarea id="rawOutput" class="hidden"></textarea>
<div id="visualOutput" class="flex-grow p-4 overflow-auto custom-scroll text-slate-300 font-mono text-xs leading-relaxed whitespace-pre-wrap select-all">Waiting for input...</div>
</div>
</div>
</div>
<section class="stk-section" id="how-to-use" aria-label="How to use this tool">
<div class="stk-wrap">
<span class="stk-chip"><i class="fa-solid fa-spell-check"></i> How-To Guide</span>
<h2 class="stk-h2">How to abbreviate journal names</h2>
<p class="stk-lead">Paste a reference list or BibTeX and the tool swaps recognised full journal titles for their standard abbreviations, live as you type.</p>
<div class="stk-grid stk-grid-2"><div class="stk-step"><span class="stk-num">1</span><div><h3>Paste your references</h3><p>Drop a bibliography or .bib file into the input box, or click <strong>Example</strong> to try a sample.</p></div></div><div class="stk-step"><span class="stk-num">2</span><div><h3>Watch the live output</h3><p>Recognised titles are replaced instantly and highlighted in pink; likely journal titles the dictionary <em>doesn't</em> know are flagged in amber so nothing slips through unnoticed.</p></div></div><div class="stk-step"><span class="stk-num">3</span><div><h3>Add your own rules</h3><p>Open <strong>Custom abbreviations</strong> and add <code>Full Name = Abbrev.</code> lines for niche journals. Rules are saved in your browser and override the built-in list.</p></div></div><div class="stk-step"><span class="stk-num">4</span><div><h3>Copy the result</h3><p>Click <strong>Copy Text</strong> to grab the abbreviated bibliography.</p></div></div></div>
</div>
</section>
<section class="stk-section" id="how-it-works" aria-label="How it works">
<div class="stk-wrap">
<h2 class="stk-h2">How the matching works</h2>
<div class="stk-grid stk-grid-2"><div class="stk-card"><h3 style="font-weight:700;margin-bottom:.4rem;">Variant-tolerant, longest-match replacement</h3><p style="font-size:.88rem;color:#64748b;line-height:1.6;">Titles are matched case-insensitively against a curated list of ~200 journals, longest entries first, so a full title always beats any shorter fragment. Matching also tolerates a leading <em>The</em>, "&" written as "and", missing colons, hyphen vs. en-dash, and titles wrapped across lines in a .bib file. Everything runs in your browser.</p></div><div class="stk-card"><h3 style="font-weight:700;margin-bottom:.4rem;">Extensible, and honest about gaps</h3><p style="font-size:.88rem;color:#64748b;line-height:1.6;">The built-in list is a hand-checked subset of CASSI, not the full database. Anything that <em>looks</em> like a journal title but isn't recognised is flagged in amber and left untouched, verify it against the official sources below, or add it yourself in the <strong>Custom abbreviations</strong> panel (the whole built-in list lives in a single, easy-to-edit data file).</p></div></div>
<div class="stk-note" style="margin-top:1rem;"><i class="fa-solid fa-circle-info" style="margin-top:.15rem;"></i><div>Common single-word titles whose abbreviation equals the full name (<strong>Nature</strong>, <strong>Science</strong>, <strong>Small</strong>, <strong>Langmuir</strong>…) are recognised but never altered or highlighted, so ordinary English words in your text are safe. Abbreviation style follows CASSI for chemistry and ISO 4 / the LTWA more generally.</div></div>
</div>
</section>
<section class="stk-section" id="faq" aria-label="Frequently asked questions">
<div class="stk-wrap" style="max-width:52rem;">
<h2 class="stk-h2">Frequently asked questions</h2>
<div style="margin-top:1rem;"><details class="stk-faq"><summary>Is my bibliography uploaded anywhere?</summary><div>No. Matching and replacement run entirely in your browser; nothing is sent to a server. Custom rules are stored only in your browser's local storage.</div></details><details class="stk-faq"><summary>Why wasn't one of my journals abbreviated?</summary><div>The built-in list is a curated subset of ~200 titles, not the full CASSI database. Unrecognised titles are left untouched and flagged in amber, check them against CASSI or the LTWA, or add them as a custom rule.</div></details><details class="stk-faq"><summary>Can I add my own journal abbreviations?</summary><div>Yes. Open the <em>Custom abbreviations</em> panel below the input and add one rule per line as <code>Full Journal Name = Abbrev.</code> Custom rules override the built-in list and persist in your browser.</div></details><details class="stk-faq"><summary>What standard do the abbreviations follow?</summary><div>CASSI (the CAS Source Index) for chemistry titles, which aligns with ISO 4 and the ISSN List of Title Word Abbreviations (LTWA).</div></details><details class="stk-faq"><summary>Does it handle variant spellings of a title?</summary><div>Yes. A leading <em>The</em>, "&" written as "and" (e.g. <em>ACS Applied Materials and Interfaces</em>), missing colons (<em>Journal of Physics Condensed Matter</em>), different dashes, any capitalisation, and line-wrapped BibTeX titles are all matched.</div></details><details class="stk-faq"><summary>Can I see what changed?</summary><div>Keep <em>Highlight</em> on: each replaced title is marked in pink (hover to see the original), and suspected unknown journals are marked in amber.</div></details></div>
<div class="stk-refs"><a href="https://cassi.cas.org/" target="_blank" rel="noopener"><i class="fa-solid fa-book"></i> CASSI Search Tool</a><a href="https://en.wikipedia.org/wiki/ISO_4" target="_blank" rel="noopener"><i class="fa-solid fa-hashtag"></i> ISO 4 standard</a><a href="https://en.wikipedia.org/wiki/List_of_Title_Word_Abbreviations" target="_blank" rel="noopener"><i class="fa-solid fa-list"></i> LTWA (ISSN)</a></div>
<p class="stk-credit">Runs entirely in your browser, no data leaves your device.</p>
</div>
</section>
</main>
<footer class="mt-auto border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 py-12">
<div class="max-w-7xl mx-auto px-6">
<div class="stk-dir mb-12">
<div>
<h4><i class="fa-solid fa-chart-pie text-indigo-500 text-xs"></i> Data & Stats</h4>
<ul>
<li><a href="plot-digitizer.html">Plot Digitizer</a></li>
<li><a href="data-cleaner.html">Data Cleaner</a></li>
<li><a href="stats-calculator.html">Stat Calculator</a></li>
<li><a href="error-bar-generator.html">Error Bar Gen</a></li>
<li><a href="outlier-detector.html">Outlier Detector</a></li>
<li><a href="curve-fitter.html">Curve Fitter</a></li>
<li><a href="plot-builder.html">Plot Builder</a></li>
<li><a href="xvg-visualizer.html">XVG Visualizer</a></li>
</ul>
</div>
<div>
<h4><i class="fa-solid fa-microchip text-orange-500 text-xs"></i> Compute</h4>
<ul>
<li><a href="structure-inspector.html">3D Inspector</a></li>
<li><a href="coordinate-manipulator.html">Coordinate Manipulator</a></li>
<li><a href="scientific-converter.html">Energy Conversions</a></li>
<li><a href="script-generator.html">HPC Script Gen</a></li>
</ul>
</div>
<div>
<h4><i class="fa-solid fa-book-open text-teal-500 text-xs"></i> Writing & Citations</h4>
<ul>
<li><a href="latex-formatter.html">Equation Formatter</a></li>
<li><a href="latex-tables.html">Visual LaTeX Tables</a></li>
<li><a href="doi-fetcher.html">DOI to BibTeX</a></li>
<li><a href="bibtex-deduplicator.html">BibTeX Deduplicator</a></li>
<li><a href="bibtex-sanitizer.html">BibTeX Sanitizer</a></li>
<li><a href="journal-abbreviator.html">Journal Abbrev</a></li>
</ul>
</div>
<div>
<h4><i class="fa-solid fa-headphones text-fuchsia-500 text-xs"></i> Focus & Flow</h4>
<ul>
<li><a href="pomodoro.html">Ambient Pomodoro</a></li>
<li><a href="decision.html">Decision Matrix</a></li>
<li><a href="sandbox.html">Kinetic Sandbox</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-200 dark:border-slate-800 pt-8 flex flex-col md:flex-row items-center justify-between text-slate-500 dark:text-slate-400 gap-4">
<div class="flex items-center gap-2">
<i class="fa-solid fa-flask text-xl text-slate-300 dark:text-slate-700"></i>
<span class="font-bold text-slate-700 dark:text-slate-300">STEMKit</span>
</div>
<div class="text-center text-sm font-medium">© 2026 STEMKit. Built by <a href="https://github.com/LD-Shell" target="_blank" rel="noopener" class="font-semibold hover:text-indigo-500 transition-colors">Olanrewaju M. Daramola</a>.</div>
<div class="flex gap-6 text-sm font-medium">
<a href="privacy.html#privacy" class="hover:text-indigo-500 transition-colors">Privacy Policy</a>
<a href="privacy.html#terms" class="hover:text-indigo-500 transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
// 1. Theme toggle logic (Mobile & Desktop)
document.querySelectorAll('.themeToggle').forEach(btn => {
btn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
});
});
// 2. Mobile menu logic
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = document.getElementById('menu-icon');
if(mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
if(mobileMenu.classList.contains('hidden')) {
menuIcon.classList.remove('fa-xmark');
menuIcon.classList.add('fa-bars');
} else {
menuIcon.classList.remove('fa-bars');
menuIcon.classList.add('fa-xmark');
}
});
document.querySelectorAll('.mobile-link').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('fa-xmark');
menuIcon.classList.add('fa-bars');
});
});
}
</script>
<script src="js/journal-data.js"></script>
<script type="module" src="js/journal-abbreviator.js"></script>
</body>
</html>