diff --git a/about.html b/about.html new file mode 100644 index 0000000..c556381 --- /dev/null +++ b/about.html @@ -0,0 +1,31 @@ + + + + + + O projektu + + + + +
+ +
+

O projektu

+
+

Slovar Slovenskega Novega Jezika, ki je nastal kot končni projekt za 3. letnik izobraževanja na Vegovi Ljubljana.

+

Današnji SSKJ, čeprav vsekakor uporaben, ne vsebuje modernih neologizmov oz. frazemov, ki se jih uporablja v vsakodnevnem neknjižnem govoru.

+

+ 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. +

+

+ Glavna stran +

+
+ +
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index ba64f57..551c85d 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,24 @@ - + Glavna Stran + -
- +

Zadnji vnosi

+ +
+
+
+ diff --git a/scripts/index.js b/scripts/index.js index e69de29..1d7f156 100644 --- 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 = ` +
+

${entry.kljuc}

+

${entry.tip}

+ ${entry.vsebina} +

${entry.primer}

+
+ `; + + document.getElementById("entry-container").innerHTML += build; + } + }) + .catch((error) => { + console.error('Error:', error); + }); +} + +getLast(); \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 8be706c..8ac7b2d 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -5,7 +5,7 @@ const headerHtml = ` Slovar Slovenskega Novega Jezika
- O nas + O projektu Kontakt Dodatki @@ -18,6 +18,12 @@ const headerHtml = ` `; +const footerHtml = ` + +`; + 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()); }); diff --git a/scripts/preload.js b/scripts/preload.js index 452a11e..03c93bc 100644 --- a/scripts/preload.js +++ b/scripts/preload.js @@ -1,5 +1,9 @@ (function() { - const saved = localStorage.getItem('theme') || 'light'; - const osPref = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - document.documentElement.setAttribute('data-theme', saved ?? osPref); + try { + const saved = localStorage.getItem('theme'); + const osPref = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + document.documentElement.setAttribute('data-theme', saved || osPref); + } catch (e) { + document.documentElement.setAttribute('data-theme', 'light'); + } })(); \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 29588b2..e4eb7af 100644 --- 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;*/ @@ -205,4 +272,40 @@ nav { width: 1.1em; 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; } \ No newline at end of file