eqlectika.github.io/db.html at main · eqlectika/eqlectika.github.io · 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
<!DOCTYPE html>
<html>
<head>
    <title>Database Billet</title>
    <style>
        body { font-family: serif; background: #000; color: #fff; padding: 20px; max-width: 600px; margin: auto; }
      * {
    box-sizing: border-box;
}

body {
    font-family: serif;
    background: #000;
    color: #fff;
    margin: 0;
    padding: 20px;
    width: 100%;
    overflow-x: hidden;
}

  .field { margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
        label { display: block; color: gold; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
        input { width: 100%; background: #111; border: 1px solid #444; color: #fff; padding: 10px; margin-top: 5px; outline: none; }
        input:focus { border-color: gold; }
        button { background: gold; color: #000; border: none; padding: 15px; width: 100%; cursor: pointer; font-weight: bold; margin-top: 10px; }
        #output { margin-top: 20px; background: #111; padding: 15px; font-family: monospace; font-size: 0.85rem; border-left: 3px solid gold; white-space: pre-wrap; color: #88ff88; }
    </style>
</head>
<body>
  <script src="pwa-init.js"></script>
    <h2 style="text-align: center;">VOCABULARY BILLET</h2>


    <div class="field">
        <label>The Word</label>
        <input type="text" id="word" placeholder="e.g. Actually">
        <label style="margin-top:5px;">Translation Pair</label>
        <input type="text" id="pair" placeholder="e.g. На самом деле">
    </div>


    <div class="field">
        <label>Stage 2: Definition & Example (English / Russian)</label>
        <input type="text" id="l1_0" placeholder="English Definition">
        <input type="text" id="l1_1" placeholder="English Example">
        <input type="text" id="l1_2" placeholder="Определение на русском">
        <input type="text" id="l1_3" placeholder="Пример на русском">
    </div>

<div class="field">
    <label>Stage 3: Etymology (English / Russian)</label>
    <input type="text" id="l2_0" placeholder="Etymology (English)">
    <input type="text" id="l2_1" placeholder="English example">
    <input type="text" id="l2_2" placeholder="Этимология (Russian)">
    <input type="text" id="l2_3" placeholder="Русский пример">
</div>


    <button onclick="generateJSON()">GENERATE CODE</button>

<div style="margin-bottom: 20px; padding: 10px; border: 1px dashed gold; display: flex; gap: 10px;">
    <input type="file" id="importFile" style="display: none;" onchange="importDatabase(this)">
    <button onclick="document.getElementById('importFile').click()" style="padding: 10px; font-size: 0.7rem; width: auto; margin: 0;">OPEN DB</button>
    <button onclick="copyToClipboard()" style="padding: 10px; font-size: 0.7rem; width: auto; margin: 0; background: #333; color: gold; border: 1px solid gold;">COPY JSON</button>
</div>

        <div id="output">The magic code will appear here...</div>

    <script>

let currentDB = {};

function importDatabase(input) {
    const file = input.files[0];
    const reader = new FileReader();
    reader.onload = function() {
        try {
            currentDB = JSON.parse(reader.result);
            alert("Database loaded: " + Object.keys(currentDB).length + " words.");
            updateOutput();
        } catch (e) {
            alert("Error: Make sure the file is valid JSON (without the variable name)");
        }
    };
    reader.readAsText(file);
}

function generateJSON() {
    const word = document.getElementById('word').value.toLowerCase().trim();
    if (!word) return alert("Please enter the word");

    const entry = {
        l1: [
            document.getElementById('l1_0').value,
            document.getElementById('l1_1').value,
            document.getElementById('l1_2').value,
            document.getElementById('l1_3').value
        ],
        l2: [
            document.getElementById('l2_0').value,
            document.getElementById('l2_1').value,
            document.getElementById('l2_2').value,
            document.getElementById('l2_3').value
        ],
        pair: document.getElementById('pair').value
    };

    currentDB[word] = entry;
    updateOutput();
}

function updateOutput() {
    const output = document.getElementById('output');
    output.innerText = JSON.stringify(currentDB, null, 4);
}

function copyToClipboard() {
    const text = document.getElementById('output').innerText;
    navigator.clipboard.writeText(text).then(() => {
        alert("JSON copied to clipboard! You can now paste it into your db file.");
    });
}

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