mark/hermina
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog v kartice
Deploy to Development and Production / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Mark Poljanšek committed 2025-09-18 00:33:40 -05:00
1 parent 4af807f639
commit 10b2fc866d
15 files changed
+756 -17082
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/main.css
+1
View File
@@ -23,4 +23,5 @@
@import url('pages/_article.css');
@import url('pages/_storitve.css');
@import url('pages/_homepage.css');
@import url('pages/_blog.css');
@import url('pages/_cenik.css'); /* SPREMEMBA: Uvoz nove datoteke za cenik */
assets/css/pages/_blog.css
+103
View File
@@ -0,0 +1,103 @@
/* /assets/css/pages/_blog.css */
/* --- Spremenljivke za pastelne barve kartic na blog strani --- */
:root {
--blog-card-bg-1: #eaf0f4; /* Svetlo modra */
--blog-card-border-1: #6A8DAA;
--blog-card-bg-2: #f8eaf0; /* Svetlo roza/vijolična */
--blog-card-border-2: #B46A8E;
--blog-card-bg-3: #eaf3f1; /* Svetlo zelena */
--blog-card-border-3: #5E8B7E;
--blog-card-bg-4: #f9f5ea; /* Svetlo bež/rumena */
--blog-card-border-4: #C2A370;
}
/* --- Prilagoditev mreže za blog stran --- */
@media (min-width: 768px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
align-items: stretch;
}
}
/* --- Stili za nove, pastelne blog kartice --- */
.blog-feature-card {
/* Osnovna struktura in pozicioniranje */
position: relative; /* Nujno za absolutno pozicioniranje gumba */
display: flex;
align-items: center; /* Vertikalno centrira vsebinski blok (besedilo) */
text-align: center;
min-height: 480px; /* Povečana višina za daljše besedilo */
/* Povečan notranji odmik, posebej na dnu, da se besedilo ne prekriva z gumbom */
padding: var(--spacing-l) 1.5rem 6rem 1.5rem;
border-radius: 10px;
/* Videz */
color: var(--color-text);
box-shadow: var(--shadow-light);
border-top: 5px solid;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.blog-feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
/* Specifične barve ozadja in zgornjega roba za vsako kartico */
.blog-feature-card.card-color-1 { background-color: var(--blog-card-bg-1); border-color: var(--blog-card-border-1); }
.blog-feature-card.card-color-2 { background-color: var(--blog-card-bg-2); border-color: var(--blog-card-border-2); }
.blog-feature-card.card-color-3 { background-color: var(--blog-card-bg-3); border-color: var(--blog-card-border-3); }
.blog-feature-card.card-color-4 { background-color: var(--blog-card-bg-4); border-color: var(--blog-card-border-4); }
/* Ovojni link znotraj kartice - sedaj samo za besedilo */
.blog-feature-card .card-link-wrapper {
color: inherit;
text-decoration: none;
}
/* Naslov znotraj kartice, ki deluje kot glavni tekstovni blok */
.blog-feature-card .blog-card-title {
color: var(--color-text);
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.6;
margin: 0; /* Odstranimo vse odmike, ker za poravnavo skrbi flexbox */
}
/* Link "Preberi več" je absolutno pozicioniran */
.blog-feature-card .blog-card-link {
/* Pozicioniranje */
position: absolute;
bottom: var(--spacing-l); /* Fiksni odmik od dna kartice */
left: 50%;
transform: translateX(-50%); /* Horizontalno centriranje */
/* Videz */
color: var(--color-text);
font-weight: 600;
padding: var(--spacing-s) var(--spacing-l);
border: 2px solid var(--color-text);
border-radius: 50px;
text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
/* Hover efekt, ki se ujema z barvo zgornjega roba kartice */
.blog-feature-card.card-color-1 .blog-card-link:hover { background-color: var(--blog-card-border-1); color: var(--color-white); border-color: var(--blog-card-border-1); }
.blog-feature-card.card-color-2 .blog-card-link:hover { background-color: var(--blog-card-border-2); color: var(--color-white); border-color: var(--blog-card-border-2); }
.blog-feature-card.card-color-3 .blog-card-link:hover { background-color: var(--blog-card-border-3); color: var(--color-white); border-color: var(--blog-card-border-3); }
.blog-feature-card.card-color-4 .blog-card-link:hover { background-color: var(--blog-card-border-4); color: var(--color-white); border-color: var(--blog-card-border-4); }
/* Odstranimo podčrtovanje, ki ga je imel stari stil */
.blog-feature-card .blog-card-link::after {
display: none;
}
assets/js/main.js
+32 -42
View File
@@ -2,8 +2,6 @@ document.addEventListener('DOMContentLoaded', () => {
/**
* Funkcija za nalaganje HTML komponent (glava, noga).
* Ta funkcija je bila v originalni kodi, a se na koncu ne uporablja,
* ker so glave in noge vgrajene neposredno v HTML datoteke. Pustimo jo za morebitno kasnejšo rabo.
*/
const loadComponent = (componentPath, placeholderId) => {
return fetch(componentPath)
@@ -40,11 +38,9 @@ document.addEventListener('DOMContentLoaded', () => {
const currentPagePath = window.location.pathname;
navLinks.forEach(link => {
// Normaliziramo poti, da se izognemo težavam z zadnjimi poševnicami
const linkPath = new URL(link.href).pathname.replace(/\/$/, "");
const currentPath = currentPagePath.replace(/\/$/, "");
// Korenska stran (/) se mora ujemati samo z linkom, ki kaže na "/"
if (linkPath === "" && currentPath === "") {
link.classList.add('active');
} else if (linkPath !== "" && currentPath.startsWith(linkPath)) {
@@ -70,7 +66,7 @@ document.addEventListener('DOMContentLoaded', () => {
let current = 0;
const total = slides.length;
let slideInterval;
const autoPlayDelay = 5000; // 5 sekund
const autoPlayDelay = 5000;
const showSlide = (index) => {
if (slides.length === 0) return;
@@ -137,18 +133,37 @@ document.addEventListener('DOMContentLoaded', () => {
}
// =================================================================
// === OSTALA OBSTOJEČA KODA (NESPREMENJENO) ===
// === POPRAVLJENA KODA ZA ANIMACIJE OB POMIKANJU (Intersection Observer) ===
// =================================================================
// Animacije ob pomikanju (Intersection Observer)
const observer = new IntersectionObserver((entries) => {
// Ustvarimo opazovalca (Observer)
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// Če je element v vidnem polju (čeprav samo za 1px)
if (entry.isIntersecting) {
// Dodamo razred 'is-visible', kar sproži CSS animacijo
entry.target.classList.add('is-visible');
// Ko se je element enkrat prikazal, ga ni več treba opazovati.
// To izboljša delovanje strani.
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
}, {
// SPREMEMBA: Prag smo nastavili na 0.
// To pomeni, da se bo animacija sprožila takoj, ko bo vsaj en piksel
// elementa viden, kar reši težavo z zelo visokimi elementi.
threshold: 0
});
// Poiščemo vse elemente z razredom 'animate-on-scroll' in jih začnemo opazovati.
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
// =================================================================
// === OSTALA KODA (NESPREMENJENO) ===
// =================================================================
// Accordion (Cenik)
document.querySelectorAll('.accordion-item').forEach(item => {
@@ -165,18 +180,14 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// =================================================================
// === KODA ZA KONTAKTNI OBRAZEC (NADGRAJENO IN SPREMENJENO) ===
// =================================================================
// Kontaktni obrazec
const contactForm = document.getElementById('contact-form');
if (contactForm) {
// Poiščemo element za sporočila. Če ne obstaja, ga ustvarimo in dodamo.
let formMessageElement = contactForm.querySelector('.form-message');
if (!formMessageElement) {
formMessageElement = document.createElement('div');
formMessageElement.className = 'form-message';
formMessageElement.setAttribute('aria-live', 'polite');
// Vstavimo ga pred gumbom za pošiljanje
const submitButton = contactForm.querySelector('button[type="submit"]');
if (submitButton) {
submitButton.parentElement.insertAdjacentElement('beforebegin', formMessageElement);
@@ -186,46 +197,38 @@ document.addEventListener('DOMContentLoaded', () => {
}
contactForm.addEventListener('submit', function(e) {
e.preventDefault(); // Preprečimo privzeto pošiljanje obrazca
e.preventDefault();
const submitButton = contactForm.querySelector('button[type="submit"]');
const originalButtonText = submitButton.textContent;
// Zberemo podatke iz obrazca
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
message: document.getElementById('message').value
};
// Osnovna validacija na strani klienta (dopolnitev strežniške)
if (formData.name.trim() === '' || formData.email.trim() === '' || formData.message.trim() === '') {
formMessageElement.textContent = 'Prosimo, izpolnite vsa polja.';
formMessageElement.className = 'form-message error visible';
return;
}
// Vizualna povratna informacija, da se je pošiljanje začelo
submitButton.disabled = true;
submitButton.textContent = 'Pošiljam...';
formMessageElement.className = 'form-message'; // Skrijemo prejšnja sporočila
formMessageElement.className = 'form-message';
// Pošljemo podatke na PHP skripto z uporabo Fetch API
fetch('/api/send_mail.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
})
.then(response => response.json())
.then(data => {
// Ko prejmemo odgovor od strežnika, ga prikažemo
formMessageElement.textContent = data.message;
if (data.success) {
formMessageElement.classList.add('success', 'visible');
contactForm.reset(); // Počistimo obrazec ob uspehu
// Resetiramo števec znakov
contactForm.reset();
const charCounter = document.getElementById('char-counter');
if(charCounter) {
const maxLength = document.getElementById('message').getAttribute('maxlength');
@@ -237,31 +240,24 @@ document.addEventListener('DOMContentLoaded', () => {
}
})
.catch((error) => {
// V primeru mrežne napake ali če strežnik ni dosegljiv
console.error('Napaka pri pošiljanju:', error);
formMessageElement.textContent = 'Prišlo je do napake pri povezavi. Prosimo, poskusite kasneje.';
formMessageElement.className = 'form-message error visible';
})
.finally(() => {
// Ne glede na rezultat, gumbu povrnemo prvotno stanje
submitButton.disabled = false;
submitButton.textContent = originalButtonText;
});
});
// Logika za števec znakov (ohranjeno in nespremenjeno)
const messageTextarea = document.getElementById('message');
const charCounter = document.getElementById('char-counter');
if (messageTextarea && charCounter) {
const maxLength = messageTextarea.getAttribute('maxlength');
messageTextarea.addEventListener('input', () => {
const currentLength = messageTextarea.value.length;
const remaining = maxLength - currentLength;
charCounter.textContent = `${remaining} znakov na voljo`;
charCounter.classList.remove('warning', 'limit');
if (remaining < 0) {
charCounter.classList.add('limit');
@@ -272,9 +268,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
// =================================================================
// === GUMB ZA NA VRH (NESPREMENJENO) ===
// =================================================================
// Gumb za na vrh
const backToTopButton = document.getElementById('back-to-top-btn');
if (backToTopButton) {
window.addEventListener('scroll', () => {
@@ -287,16 +281,12 @@ document.addEventListener('DOMContentLoaded', () => {
backToTopButton.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
};
// --- Glavni Zagon Aplikacije ---
// Poenostavljen zagon, saj nalaganje komponent ni potrebno.
setCurrentYear();
setActiveNavLink();
initializeApp();