dcrubro/ssnj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

API klici

Browse Source
This commit is contained in:
DcruBro
2026-04-20 14:43:50 +02:00
parent 737c7b92f3
commit a00028dbfa
6 changed files with 203 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
about.html Normal file
View File

@@ -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>

11
index.html
View File

@@ -1,19 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="sl_SI">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glavna Stran</title> <title>Glavna Stran</title>
<script src="./scripts/preload.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/main.css"> <link rel="stylesheet" type="text/css" href="./styles/main.css">
<script src="./scripts/preload.js" defer></script>
</head> </head>
<body> <body>
<div class="page-header"></div> <div class="page-header"></div>
<main> <main>
<h3 class="page-title">Zadnji vnosi</h3>
<!--TODO: Vnos za iskanje-->
<div id="entry-container" class="entry-container">
</div>
</main> </main>
<div class="page-footer"></div>
<script src="./scripts/index.js"></script> <script src="./scripts/index.js"></script>
<script src="./scripts/main.js" defer></script> <script src="./scripts/main.js" defer></script>
</body> </body>

38
scripts/index.js
View File

@@ -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();

14
scripts/main.js
View File

@@ -5,7 +5,7 @@ const headerHtml = `
<a class="nav-title" href="/">Slovar Slovenskega Novega Jezika</a> <a class="nav-title" href="/">Slovar Slovenskega Novega Jezika</a>
</div> </div>
<div class="nav-right" aria-label="Primary navigation"> <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="/contact.html">Kontakt</a>
<a class="nav-btn" href="/extras.html">Dodatki</a> <a class="nav-btn" href="/extras.html">Dodatki</a>
@@ -18,6 +18,12 @@ const headerHtml = `
</header> </header>
`; `;
const footerHtml = `
<footer>
<p>&copy; ${new Date().getFullYear()} Jonas Korene Novak. Vse pravice pridržane.</p>
</footer>
`;
function getCurrentTheme() { function getCurrentTheme() {
return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
} }
@@ -37,13 +43,17 @@ function updateToggleState(theme) {
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
// Naslov // Naslov
document.title = ` ${document.title}`; document.title = `SSNJ - ${document.title}`;
// Konstrukcija vseh stvari // Konstrukcija vseh stvari
for (let element of document.getElementsByClassName("page-header")) { for (let element of document.getElementsByClassName("page-header")) {
element.innerHTML = headerHtml; element.innerHTML = headerHtml;
} }
for (let element of document.getElementsByClassName("page-footer")) {
element.innerHTML = footerHtml;
}
updateToggleState(getCurrentTheme()); updateToggleState(getCurrentTheme());
}); });

8
scripts/preload.js
View File

@@ -1,5 +1,9 @@
(function() { (function() {
const saved = localStorage.getItem('theme') || 'light'; try {
const saved = localStorage.getItem('theme');
const osPref = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; 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');
}
})(); })();

111
styles/main.css
View File

@@ -3,6 +3,7 @@
:root[data-theme="dark"] { :root[data-theme="dark"] {
--bg-color: #333; --bg-color: #333;
--text-color: #fff; --text-color: #fff;
--link-color: #ddd;
--nav-bg: #2b2b2b; --nav-bg: #2b2b2b;
--nav-btn-bg: #3a3a3a; --nav-btn-bg: #3a3a3a;
--nav-btn-hover-bg: #474747; --nav-btn-hover-bg: #474747;
@@ -16,6 +17,7 @@
:root[data-theme="light"] { :root[data-theme="light"] {
--bg-color: #fff; --bg-color: #fff;
--text-color: #333; --text-color: #333;
--link-color: #007acc;
--nav-bg: #f0f0f0; --nav-bg: #f0f0f0;
--nav-btn-bg: #e0e0e0; --nav-btn-bg: #e0e0e0;
--nav-btn-hover-bg: #d0d0d0; --nav-btn-hover-bg: #d0d0d0;
@@ -35,9 +37,12 @@
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
font-family: "Georgia", "Times New Roman", serif; font-family: "Georgia", "Times New Roman", serif;
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
display: flex;
flex-direction: column;
/* Smooth Theme Transition */ /* Smooth Theme Transition */
transition: background-color 0.25s ease, color 0.25s ease 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 transition: background-color 0.25s ease, color 0.25s ease
} }
.page-header {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 12px;
}
header { header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
/*padding: 8px 12px;*/ padding: 0;
padding-top: 6px; }
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 { nav {
@@ -65,8 +132,8 @@ nav {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
width: min(1000px, calc(100% - 16px)); width: 100%;
margin: 0 auto; margin: 0;
padding: 10px 14px; padding: 10px 14px;
/*border: 1px solid #444; /*border: 1px solid #444;
border-radius: 10px;*/ border-radius: 10px;*/
@@ -206,3 +273,39 @@ nav {
text-align: center; text-align: center;
transition: color 0.25s ease; 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;
}