bibtex/index.html at main · dynaroars/bibtex · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BibTeX Parser</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="./src/style.css">
</head>

<body>
  <!-- Theme toggle button -->
  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
    <span class="sun-icon">☀️</span>
    <span class="moon-icon">🌙</span>
  </button>

  <script>
    // Apply saved theme immediately to prevent flash
    const savedTheme = localStorage.getItem('theme');
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const initialTheme = savedTheme || (systemDark ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', initialTheme);
  </script>

  <div id="app">
    <header>
      <h1>BibTeX Parser</h1>
      <p>Parse and display your academic publications.</p>
    </header>

    <div class="search-section">
      <div class="upload-box" id="dropZone">
        <div class="upload-row">
          <span class="upload-icon">📁</span>
          <span>Drop <strong>.bib</strong> / <strong>.csv</strong> file or</span>
          <label class="file-btn-inline">
            <input type="file" id="fileInput" accept=".bib,.bibtex,.csv" />
            Browse
          </label>
        </div>
        <div class="url-row">
          <input type="url" id="urlInput" value="https://tvn.roars.dev/cv/cv.bib" />
          <button id="loadUrlBtn" class="btn-load">Load URL</button>
        </div>
      </div>

      <div class="filters" id="filtersSection" style="display: none;">
        <div class="search-filter">
          <input type="search" id="searchInput" placeholder="Search by title, author, venue, year..." />
          <span id="searchCount" class="search-count"></span>
        </div>
        <div class="filter-actions">
          <div class="filter-group">
            <label>Filter</label>
            <div class="checkbox-group">
              <label class="checkbox-btn">
                <input type="checkbox" id="excludePreprints" checked>
                <span>Hide Preprints</span>
              </label>
            </div>
          </div>
          <div class="filter-group">
            <label>Group by</label>
            <div class="group-toggle">
              <button class="group-btn active" data-group="original">Original</button>
              <button class="group-btn" data-group="year">Year</button>
              <button class="group-btn" data-group="type">Type</button>
            </div>
          </div>
          <div class="filter-group">
            <label>Export as</label>
            <div class="export-dropdown">
              <select id="exportFormat">
                <option value="">Select format...</option>
                <!-- <option value="json">JSON</option> -->
                <option value="bibtex">BibTeX</option>
                <option value="csv">CSV</option>
              </select>
            </div>
          </div>
          <div class="filter-group">
            <a href="./start.html" class="embed-link">Embed on your site →</a>
          </div>
        </div>
      </div>
    </div>

    <section id="stats-section" class="stats-section" style="display: none;">
      <div class="card stats-card">
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-count" id="totalPubs">0</span>
            <span class="stat-label">Publications</span>
          </div>
          <div class="stat-item">
            <span class="stat-count" id="totalYears">0</span>
            <span class="stat-label">Years</span>
          </div>
          <div class="stat-item">
            <span class="stat-count" id="totalVenues">0</span>
            <span class="stat-label">Venues</span>
          </div>
        </div>
      </div>
    </section>

    <main>
      <section id="publications-container" class="results-container"></section>
    </main>
  </div>

  <footer>
    <a href="https://code.roars.dev/bibtex">GitHub</a>
  </footer>

  <div id="loadingOverlay" class="modal hidden">
    <div class="modal-content" style="max-width: 200px; text-align: center; padding: 2rem;">
      <span class="spinner">↻</span>
      <p>Parsing...</p>
    </div>
  </div>

  <div id="bibtexModal" class="modal hidden">
    <div class="modal-content bibtex-modal-content">
      <div class="modal-header">
        <h3>BibTeX Entry</h3>
        <button id="closeModal" class="close-btn">&times;</button>
      </div>
      <pre id="bibtexContent"></pre>
      <div class="modal-actions">
        <button id="copyBibtex" class="btn-primary">Copy to Clipboard</button>
      </div>
    </div>
  </div>

  <script type="module" src="./src/main.js"></script>
</body>

</html>