specifičen vnos

about.html

@@ -12,7 +12,7 @@
 
     <main>
         <h3 class="page-title">O projektu</h3>
-        <br>
+        <hr>
         <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">

contact.html

@@ -12,7 +12,7 @@
 
     <main>
         <h3 class="page-title">Kontakt</h3>
-        <br>
+        <hr>
     </main>
 
     <div class="page-footer"></div>

extras.html

@@ -12,7 +12,7 @@
 
     <main>
         <h3 class="page-title">Dodatki</h3>
-        <br>
+        <hr>
     </main>
 
     <div class="page-footer"></div>

index.html

@@ -18,6 +18,7 @@
                 <button id="search-button" class="page-btn" onclick="search()">Išči</button>
             </div>
         </div>
+        <hr>
 
         <div id="entry-container" class="entry-container">
         </div>

scripts/index.js

@@ -1,3 +1,7 @@
+function getSpecific(kljuc) {
+    window.location.href = `/vnos.html?kljuc=${kljuc}`;
+}
+
 function getLast() {
     const url = `http://localhost:3000/vnosi`;
     fetch(url, {
@@ -19,7 +23,7 @@ function getLast() {
 
         for (let entry of data.data) {
             let build = `
-            <div class="entry-card">
+            <div class="entry-card" onclick="getSpecific('${entry.PK}')">
                 <h3 class="entry-title">${entry.kljuc}</h3>
                 <p class="entry-definition">${entry.tip}</p>
                 ${entry.vsebina}
@@ -48,7 +52,8 @@ function search() {
         },
         body: JSON.stringify({
             query: `*${val}*`, // Potencialno mora biti tukaj en "*" wildcard
-            limit: -1
+            limit: -1,
+            sort: true
         })
     })
     .then(response => response.json())
@@ -62,7 +67,7 @@ function search() {
         let len = data.data.length;
         document.getElementById("page-title").innerText = `Rezultati iskanja (${len}):`;
         document.getElementById("entry-container").innerHTML = "";
-        
+       
         if (len <= 0) {
             document.getElementById("entry-container").innerHTML = `
                 <p class="page-paragraph">Ni bilo najednih zadetkov za poizvedbo "${val}".</p>
@@ -72,7 +77,7 @@ function search() {
 
         for (let entry of data.data) {
             let build = `
-            <div class="entry-card">
+            <div class="entry-card" onclick="getSpecific('${entry.PK}')">
                 <h3 class="entry-title">${entry.kljuc}</h3>
                 <p class="entry-definition">${entry.tip}</p>
                 ${entry.vsebina}

scripts/vnos.js

@@ -0,0 +1,37 @@
+const kljuc = new URLSearchParams(window.location.search).get("kljuc");
+
+function getKey() {
+    const url = `http://localhost:3000/vnos`;
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            pk: kljuc
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (!data.success) {
+            console.error('API Error:', data.message);
+            return;
+        }
+
+        let build = `
+            <h3 class="entry-title">${data.data.kljuc}</h3>
+            <p class="entry-definition">${data.data.tip}</p>
+            ${data.data.vsebina}
+            <p class="entry-example">${data.data.primer}</p>
+            <p class="entry-example">Vnos dodal: ${data.data.avtor}</p>
+        `;
+
+        document.getElementById("page-title").innerText = `Vnos '${data.data.kljuc}'`;
+        document.getElementById("entry-container-single").innerHTML += build;
+    })
+    .catch((error) => {
+        console.error('Error:', error);
+    });
+}
+
+getKey();

styles/main.css

@@ -309,10 +309,26 @@ nav {
     flex-direction: column;
     gap: 16px;
     padding: 20px;
-    max-width: 1000px;
+    max-width: 100%;
     margin: 0 auto;
 }
 
+.entry-container-single, #entry-container-single {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 20px;
+    margin: 16px 4px;
+    margin-top: -12px;
+    max-width: 100%;
+}
+
+hr {
+    border: none;
+    border-top: 1px solid var(--nav-btn-border);
+    margin: 20px 16px;
+}
+
 .entry-card {
     border: 1px solid var(--nav-btn-border);
     border-radius: 8px;
@@ -320,6 +336,13 @@ nav {
     background: var(--nav-btn-bg);
     color: var(--text-color);
     transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+
+    cursor: pointer;
+}
+
+.entry-card:hover {
+    background: var(--nav-btn-hover-bg);
+    border-color: var(--nav-btn-hover-border);
 }
 
 .entry-title {

vnos.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<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">
+</head>
+<body>
+    <div class="page-header"></div>
+
+    <main>
+        <h3 class="page-title" id="page-title">Vnos</h3>
+
+        <hr>
+        <div id="entry-container-single" class="entry-container-single">
+        </div>
+        <p class="page-paragraph">
+            <a class="page-link" href="/">Glavna stran</a>
+        </p>
+    </main>
+
+    <div class="page-footer"></div>
+
+    <script src="./scripts/vnos.js"></script>
+    <script src="./scripts/main.js" defer></script>
+</body>
+</html>