API klici

2026-04-20 14:43:50 +02:00
parent 737c7b92f3
commit a00028dbfa
6 changed files with 203 additions and 12 deletions
--- a/about.html
+++ b/about.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="sl_SI">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>O projektu</title>
+    <script src="./scripts/preload.js"></script>
+    <link rel="stylesheet" type="text/css" href="./styles/main.css">
+</head>
+<body>
+    <div class="page-header"></div>
+
+    <main>
+        <h3 class="page-title">O projektu</h3>
+        <br>
+        <p class="page-paragraph">Slovar Slovenskega Novega Jezika, ki je nastal kot končni projekt za 3. letnik izobraževanja na Vegovi Ljubljana.</p>
+        <p class="page-paragraph">Današnji SSKJ, čeprav vsekakor uporaben, ne vsebuje modernih neologizmov oz. frazemov, ki se jih uporablja v vsakodnevnem neknjižnem govoru.</p>
+        <p class="page-paragraph">
+            Zato se je ustvaril SSNJ, Slovar Slovenskega Novega Jezika. To je prosti direktorij neologizmov in frazemov v moderni slovenščini, h kateremu lahko prispeva vsak.
+            Lahko brskate po vnosih, dodajate nove vnose, ali pa ocenjujete obstoječe vnose, da pomagamo skupnosti razumeti, kateri vnosi so najbolj uporabni in relevantni.
+        </p>
+        <p class="page-paragraph">
+            <a class="page-link" href="/">Glavna stran</a>
+        </p>
+    </main>
+
+    <div class="page-footer"></div>
+
+    <script src="./scripts/main.js" defer></script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="sl_SI">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glavna Stran</title>
+    <script src="./scripts/preload.js"></script>
    <link rel="stylesheet" type="text/css" href="./styles/main.css">
-    <script src="./scripts/preload.js" defer></script>
 </head>
 <body>
    <div class="page-header"></div>

    <main>
-
+        <h3 class="page-title">Zadnji vnosi</h3>
+        <!--TODO: Vnos za iskanje-->
+        <div id="entry-container" class="entry-container">
+        </div>
    </main>

+    <div class="page-footer"></div>
+
    <script src="./scripts/index.js"></script>
    <script src="./scripts/main.js" defer></script>
 </body>
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,38 @@
+function getLast() {
+    const url = `http://localhost:3000/vnosi`;
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            query: "*",
+            limit: 4
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (!data.success) {
+            console.error('API Error:', data.message);
+            return;
+        }
+
+        for (let entry of data.data) {
+            let build = `
+            <div class="entry-card">
+                <h3 class="entry-title">${entry.kljuc}</h3>
+                <p class="entry-definition">${entry.tip}</p>
+                ${entry.vsebina}
+                <p class="entry-example">${entry.primer}</p>
+            </div>
+            `;
+
+            document.getElementById("entry-container").innerHTML += build;
+        }
+    })
+    .catch((error) => {
+        console.error('Error:', error);
+    });
+}
+
+getLast();
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -5,7 +5,7 @@ const headerHtml = `
            <a class="nav-title" href="/">Slovar Slovenskega Novega Jezika</a>
        </div>
        <div class="nav-right" aria-label="Primary navigation">
-            <a class="nav-btn" href="/about.html">O nas</a>
+            <a class="nav-btn" href="/about.html">O projektu</a>
            <a class="nav-btn" href="/contact.html">Kontakt</a>
            <a class="nav-btn" href="/extras.html">Dodatki</a>
            
@@ -18,6 +18,12 @@ const headerHtml = `
 </header>
 `;

+const footerHtml = `
+<footer>
+    <p>&copy; ${new Date().getFullYear()} Jonas Korene Novak. Vse pravice pridržane.</p>
+</footer>
+`;
+
 function getCurrentTheme() {
    return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
 }
@@ -37,13 +43,17 @@ function updateToggleState(theme) {

 document.addEventListener("DOMContentLoaded", function() {
    // Naslov
-    document.title = ` ${document.title}`;
+    document.title = `SSNJ - ${document.title}`;

    // Konstrukcija vseh stvari
    for (let element of document.getElementsByClassName("page-header")) {
        element.innerHTML = headerHtml;
    }

+    for (let element of document.getElementsByClassName("page-footer")) {
+        element.innerHTML = footerHtml;
+    }
+
    updateToggleState(getCurrentTheme());
 });

--- a/scripts/preload.js
+++ b/scripts/preload.js
@@ -1,5 +1,9 @@
 (function() {
-    const saved = localStorage.getItem('theme') || 'light';
+    try {
+        const saved = localStorage.getItem('theme');
        const osPref = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    document.documentElement.setAttribute('data-theme', saved ?? osPref);
+        document.documentElement.setAttribute('data-theme', saved || osPref);
+    } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'light');
+    }
 })();
--- a/styles/main.css
+++ b/styles/main.css
@@ -3,6 +3,7 @@
 :root[data-theme="dark"] {
    --bg-color: #333;
    --text-color: #fff;
+    --link-color: #ddd;
    --nav-bg: #2b2b2b;
    --nav-btn-bg: #3a3a3a;
    --nav-btn-hover-bg: #474747;
@@ -16,6 +17,7 @@
 :root[data-theme="light"] {
    --bg-color: #fff;
    --text-color: #333;
+    --link-color: #007acc;
    --nav-bg: #f0f0f0;
    --nav-btn-bg: #e0e0e0;
    --nav-btn-hover-bg: #d0d0d0;
@@ -35,9 +37,12 @@
 body {
    margin: 0;
    min-height: 100vh;
+    min-height: 100dvh;
    font-family: "Georgia", "Times New Roman", serif;
    background-color: var(--bg-color);
    color: var(--text-color);
+    display: flex;
+    flex-direction: column;

    /* Smooth Theme Transition */
    transition: background-color 0.25s ease, color 0.25s ease
@@ -51,13 +56,75 @@ html {
    transition: background-color 0.25s ease, color 0.25s ease
 }

+.page-header {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
 header {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
-    /*padding: 8px 12px;*/
-    padding-top: 6px;
+    padding: 0;
+}
+
+footer {
+    text-align: center;
+    padding: 20px 10px;
+    background: var(--nav-bg);
+    color: var(--text-color);
+    font-size: 0.9rem;
+
+    /* Smooth Theme Transition */
+    transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+main {
+    flex: 1;
+}
+
+.page-footer {
+    margin-top: auto;
+}
+
+.page-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-top: 12px;
+    margin-bottom: 8px;
+    color: var(--text-color);
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
+
+    /* left side with padding */
+    text-align: left;
+    padding-left: 23px;
+}
+
+.page-paragraph {
+    font-size: 1rem;
+    line-height: 1.3;
+    margin-bottom: 8px;
+    color: var(--text-color);
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
+
+    /* left side with padding */
+    text-align: left;
+    padding-left: 23px;
+}
+
+.page-link {
+    color: var(--link-color);
+    text-decoration: underline;
+    font-weight: 500;
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
 }

 nav {
@@ -65,8 +132,8 @@ nav {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
-    width: min(1000px, calc(100% - 16px));
-    margin: 0 auto;
+    width: 100%;
+    margin: 0;
    padding: 10px 14px;
    /*border: 1px solid #444;
    border-radius: 10px;*/
@@ -206,3 +273,39 @@ nav {
    text-align: center;
    transition: color 0.25s ease;
 }
+
+/* Entry cards */
+.entry-container, #entry-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.entry-card {
+    border: 1px solid var(--nav-btn-border);
+    border-radius: 8px;
+    padding: 16px;
+    background: var(--nav-btn-bg);
+    color: var(--text-color);
+    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+
+.entry-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.entry-definition {
+    font-size: 0.8rem;
+    margin-bottom: 4px;
+}
+
+.entry-example {
+    margin-top: 8px;
+    font-size: 0.75rem;
+    font-style: italic;
+}