vse datoteke so bile prestavljene v mapo restavracija in v ustrezne podmape, v vseh datotekah so tudi popravljeni linki
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/stylesheet.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Domov | Za prste obliznit</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="slike/logo.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<span>Za prste obliznit</span>
|
||||
</a>
|
||||
<button class="hamburger_meni" type="button" aria-label="Odpri meni" aria-expanded="false">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button> <! aria-expanded nam bo povedal ali je meni odprt ali zaprt, zdej po defultu mam ob nalozitvi strani meni zaprt, zato =false, ostlao urejamo v js >
|
||||
<ul class="main_menu">
|
||||
<li><a class="active" href="index.html"><i class="fa-solid fa-house"></i>Domov</a></li>
|
||||
<li><a href="jedilnik.html"><i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
|
||||
<li><a href="recepti.html"><i class="fa-solid fa-book-open"></i>Recepti</a></li>
|
||||
<li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
|
||||
<li><a href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="home_page">
|
||||
<section class="hero">
|
||||
<div class="hero_vsebina">
|
||||
<h1>Svet na krožniku</h1>
|
||||
<p>Okusi iz vseh koncev sveta, ki vas bodo vedno znova navdušili- od prvega grižljaja do zadnjega obliznjenega prsta.</p><br>
|
||||
<a class="gumb_osnovni" href="rezervacija.html">Rezervirajte si mizo</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="o_restavraciji">
|
||||
<h2>O restavraciji</h2>
|
||||
<p>Odkrivamo <i>okuse sveta</i> in jih združujemo na enem mestu. Od klasik do kulinaričnih posebnosti z različnih koncev sveta- pri nas vsak najde nekaj zase.</p>
|
||||
<p><b>Pridite, odkrite svoj najljubši okus in se prepusti kulinaričnemu potovanju.</b></p>
|
||||
</section>
|
||||
<section class="priljubljene_jedi">
|
||||
<h2>Najbolj priljubljene jedi</h2>
|
||||
<div class="jedi_grid">
|
||||
<article class="jedi_card">
|
||||
<figure class="card_slika">
|
||||
<img src="slike/muckalica.png" alt="mučkalica">
|
||||
<span class="znacka_novo">Novo</span>
|
||||
<figcaption>Mučkalica</figcaption>
|
||||
</figure>
|
||||
<div class="card_vsebina">
|
||||
<h3>Mučkalica</h3>
|
||||
<p>Tradicionalna balkanska klasika, ki vedno znova navduši.</p><br>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jedi_card">
|
||||
<figure class="card_slika">
|
||||
<img src="slike/pizza_diavola.png" alt="pizza diavola">
|
||||
<figcaption>Pizza diavola</figcaption>
|
||||
</figure>
|
||||
<div class="card_vsebina">
|
||||
<h3>Pizza diavola</h3>
|
||||
<p>Ko se italjanska tradicija sreča s pekočo strastjo.</p><br>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jedi_card">
|
||||
<figure class="card_slika">
|
||||
<img src="slike/paella.png" alt="Paella">
|
||||
<figcaption>Paella</figcaption>
|
||||
</figure>
|
||||
<div class="card_vsebina">
|
||||
<h3>Paella</h3>
|
||||
<p> Barvita španska klasika, ki združuje najboljše iz morja in kopnega.</p> <br>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
Za prste obliznit<br>
|
||||
<i class="fa-solid fa-location-dot"></i>Tomaž nad Vojnikom 18a, 3212 Vojnik <br>
|
||||
<i class="fa-solid fa-phone"></i>Telefon:<a href="tel:+072727777"> 07 272 77 77</a> <br>
|
||||
<i class="fa-solid fa-envelope"></i></i>E-pošta: <a href="mailto:info@zaobliznitprste.si">info@zaobliznitprste.si </a>
|
||||
</address>
|
||||
<p>© 2026 Iva Friedrich</p>
|
||||
</footer>
|
||||
<script src="js/navigacija.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/stylesheet.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Jedilnik | Za prste obliznit</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<span>Za prste obliznit</span>
|
||||
</a>
|
||||
<ul class="main_menu">
|
||||
<li><a href="index.html"><i class="fa-solid fa-house"></i>Domov</a></li>
|
||||
<li><a class="active" href="jedilnik.html"><i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
|
||||
<li><a href="recepti.html"><i class="fa-solid fa-book-open"></i>Recepti</a></li>
|
||||
<li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
|
||||
<li><a href="o_nas.html"> <i class="fa-solid fa-circle-info"></i>O nas</a></li>
|
||||
</ul>
|
||||
<a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="jedilnik_page">
|
||||
<section class="jedilnik_uvod">
|
||||
<h1>Jedilnik</h1>
|
||||
<p>Z navdihom z različnih koncev sveta, spoštovanjem do kulinaričnih tradicij in ljubeznjo do dobre hrane se trudimo na naše krožnike prinesti čim bolj pristne okuse.</p> <br>
|
||||
</section>
|
||||
<div class="filtri_jedilnika">
|
||||
<button type="button" class="filter_gumb aktiven" data-kategorija="Vse">Vse</button>
|
||||
<button type="button" class="filter_gumb" data-kategorija="Predjedi">Predjedi</button>
|
||||
<button type="button" class="filter_gumb" data-kategorija="Glavne jedi">Glavne jedi</button>
|
||||
<button type="button" class="filter_gumb" data-kategorija="Priloge">Priloge</button>
|
||||
<button type="button" class="filter_gumb" data-kategorija="Sladice">Sladice</button>
|
||||
</div>
|
||||
|
||||
<div id="jedilnik"></div>
|
||||
<br><br>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
Za prste obliznit<br>
|
||||
<i class="fa-solid fa-location-dot"></i>Tomaž nad Vojnikom 18a,3212 Vojnik <br>
|
||||
<i class="fa-solid fa-phone"></i>Telefon:<a href="tel:+072727777"> 07 272 77 77</a> <br>
|
||||
<i class="fa-solid fa-envelope"></i>E-pošta:<a href="mailto:info@zaobliznitprste.si">info@zaobliznitprste.si </a>
|
||||
</address>
|
||||
<p>© 2026 Iva Friedrich</p>
|
||||
</footer>
|
||||
<script src="js/jedilnik.js"></script>
|
||||
<script src="js/navigacija.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,328 @@
|
||||
|
||||
const jedi = [ //const jedi - ustvari spremenljivko jedi, z [] pa označimo polje z več jedmi
|
||||
// PREDJEDI
|
||||
{ //z {} pa označimo posamezno jed
|
||||
naziv: "Italjanske bruschette", //dodamo ji lastnosti (naziv:) in vrednost ("mučkalica")
|
||||
opis: "Hrustljavo pečen kruh s svežim paradižnikom, baziliko, česnom in olivnim oljem.",
|
||||
kategorija: "Predjedi", // to je kategorija po kateri se bodo jedi filtirale
|
||||
alergeni: "gluten",
|
||||
cena: 5.50 //številko ni treba napisat v "", decimalno vejico zamenja pika
|
||||
},
|
||||
{
|
||||
naziv: "Patatas bravas",
|
||||
opis: "Hrustljav pečen krompir s pikantno paradižnikovo omako in nežnim česnovim aiolijem.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "/",
|
||||
cena: 5.90
|
||||
},
|
||||
{
|
||||
naziv: "Mediteranski mezze",
|
||||
opis: "Izbor humosa, tzatzikija, oliv in sveže zelenjave s toplim pita kruhom.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "gluten",
|
||||
cena: 7.50
|
||||
},
|
||||
{
|
||||
naziv: "Vietnamski poletni zavitki",
|
||||
opis: "Riževi zavitki s kozicami, svežo zelenjavo in zelišči, postreženi z arašidovo omako.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "morski sadeži, oreščki, soja",
|
||||
cena: 7.50
|
||||
},
|
||||
{
|
||||
naziv: "Gyoze",
|
||||
opis: "Japonski polnjeni žepki s hrustljavo zapečenim dnom, postreženi s sojino omako za pomakanje.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "gluten, jajca, soja",
|
||||
cena: 6.90
|
||||
},
|
||||
{
|
||||
naziv: "Nachosi za deljenje",
|
||||
opis: "Tortilja čips s toplim sirom, jalapeni, salso, guacamolejem in kislo smetano.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "jajca, gluten, laktoza",
|
||||
cena: 7.90
|
||||
},
|
||||
{
|
||||
naziv: "Sigara boregui",
|
||||
opis: "Hrustljavi zavitki iz tankega testa s slanim sirom in zelišči, postreženi z jogurtovo omako.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "gluten, laktoza",
|
||||
cena: 6.50
|
||||
},
|
||||
{
|
||||
naziv: "Indijske samose",
|
||||
opis: "Zlato zapečeni žepki, polnjeni z začinjenim krompirjem in grahom, z metino omako.",
|
||||
kategorija: "Predjedi",
|
||||
alergeni: "gluten, jajca",
|
||||
cena: 5.90
|
||||
},
|
||||
|
||||
// GLAVNE JEDI
|
||||
{
|
||||
naziv: "Mučkalica",
|
||||
opis: "Sočni koščki mesa v bogati paradižnikovi omaki s papriko in čebulo, postreženi s pečenim krompirjem ali prilogo po izbiri.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "gluten",
|
||||
cena: 13.90
|
||||
},
|
||||
{
|
||||
naziv: "Chicken curry",
|
||||
opis: "Nežno piščančje meso v kremni paradižnikovi omaki z aromatičnimi indijskimi začimbami, postreženo z basmatim rižem ali drugo prilogo po izbiri.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "oreščki, laktoza",
|
||||
cena: 14.50
|
||||
},
|
||||
{
|
||||
naziv: "Lasagna al forno",
|
||||
opis: "Plasti testenin z bogatim mesnatim ragujem, nežnim bešamelom in zapečeno skorjico iz parmezana.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "gluten, laktoza",
|
||||
cena: 13.50
|
||||
},
|
||||
{
|
||||
naziv: "Pizza Diavola",
|
||||
opis: "Napolitansko testo z bogato paradižnikovo omako, mozzarelo, pikantno salamo in ščepcem čilija, pečeno do popolno hrustljavega roba.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "gluten, laktoza",
|
||||
cena: 14.50
|
||||
},
|
||||
{
|
||||
naziv: "Paella",
|
||||
opis: "Žafranov riž z morskimi sadeži, česnom in svežimi zelišči, ki v vsak grižljaj prinesejo okus Sredozemlja.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "morski sadeži",
|
||||
cena: 17.90
|
||||
},
|
||||
{
|
||||
naziv: "Dunajski zrezek",
|
||||
opis: "Zlato pečen paniran zrezek z limono in krompirjevo ali drugo prilogo po izbiri.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "jajca, gluten",
|
||||
cena: 14.90
|
||||
},
|
||||
{
|
||||
naziv: "Piščanec teriyaki",
|
||||
opis: "Zapečen piščanec v sladko-slani omaki z rižem, hrustljavo zelenjavo in sezamom.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "oreščki, jajca",
|
||||
cena: 14.50
|
||||
},
|
||||
{
|
||||
naziv: "Grška mussaka",
|
||||
opis: "Plasti krompirja, jajčevcev in začinjenega mletega mesa, prekrite s kremnim bešamelom in zapečene do zlato rjave barve.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "gluten, laktoza",
|
||||
cena: 13.50
|
||||
},
|
||||
{
|
||||
naziv: "Piščančji fajitas",
|
||||
opis: "Začinjeni koščki piščanca s papriko in čebulo, postreženi s toplimi tortiljami, salso in guacamolejem.",
|
||||
kategorija: "Glavne jedi",
|
||||
alergeni: "gluten",
|
||||
cena: 15.50
|
||||
},
|
||||
|
||||
// PRILOGE
|
||||
{
|
||||
naziv: "Basmati riž",
|
||||
opis: "Rahla, dišeča riževa priloga, odlična za curry in azijske jedi.",
|
||||
kategorija: "Priloge",
|
||||
alergeni: "/",
|
||||
cena: 2.50
|
||||
},
|
||||
{
|
||||
naziv: "Pečen krompir",
|
||||
opis: "Zlato zapečen krompir z rožmarinom, česnom in izbranimi začimbami.",
|
||||
kategorija: "Priloge",
|
||||
alergeni: "/",
|
||||
cena: 3.00
|
||||
},
|
||||
{
|
||||
naziv: "Hrustljav pomfri",
|
||||
opis: "Zlato pečen krompirček s hrustljavo skorjico in mehko sredico.",
|
||||
kategorija: "Priloge",
|
||||
alergeni: "/",
|
||||
cena: 3.00
|
||||
},
|
||||
{
|
||||
naziv: "Domač kruh",
|
||||
opis: "Sveže pečen kruh s hrustljavo skorjico, idealen za pomakanje v omake.",
|
||||
kategorija: "Priloge",
|
||||
alergeni: "gluten",
|
||||
cena: 2.00
|
||||
},
|
||||
|
||||
// SLADICE
|
||||
{
|
||||
naziv: "Panna cotta",
|
||||
opis: "Nežna vaniljeva smetana z osvežilnim prelivom iz gozdnih sadežev.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "laktoza",
|
||||
cena: 5.50
|
||||
},
|
||||
{
|
||||
naziv: "Baklava",
|
||||
opis: "Plasti tankega hrustljavega testa z oreščki, prelite s sladkim sirupom.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "oreščki, gluten",
|
||||
cena: 4.90
|
||||
},
|
||||
{
|
||||
naziv: "Tiramisu",
|
||||
opis: "Klasična kombinacija kave, rahle mascarponejeve kreme in kakava.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "laktoza, gluten, oreščki",
|
||||
cena: 5.90
|
||||
},
|
||||
{
|
||||
naziv: "Pohan sladoled",
|
||||
opis: "Hrustljava zlata skorjica, ki skriva hladno vaniljevo sredico, s čokoladnim prelivom.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "gluten, jajce, laktoza",
|
||||
cena: 6.50
|
||||
},
|
||||
{
|
||||
naziv: "Crepes",
|
||||
opis: "Tanke francoske palačinke po izbiri s čokoladnim namazom, marmelado ali limono in sladkorjem.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "gluten, jajca, laktoza",
|
||||
cena: 4.90
|
||||
},
|
||||
{
|
||||
naziv: "Jabolčni zavitek",
|
||||
opis: "Dišeč zvitek z jabolki, cimetom in rozinami, postrežen topel z vaniljevim sladoledom.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "gluten, jajca, laktoza",
|
||||
cena: 5.50
|
||||
},
|
||||
{
|
||||
naziv: "Čokoladni souffle",
|
||||
opis: "Topel čokoladni kolač s tekočo sredico in kepico vaniljevega sladoleda.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "gluten, jajca, laktoza, oreščki",
|
||||
cena: 6.50
|
||||
},
|
||||
{
|
||||
naziv: "Loukoumades",
|
||||
opis: "Majhni zlato ocvrti grški miškasti grižljaji, preliti z medom in posuti s cimetom.",
|
||||
kategorija: "Sladice",
|
||||
alergeni: "jajca, gluten",
|
||||
cena: 5.90
|
||||
}
|
||||
];
|
||||
|
||||
function izrisiJedilnik(kategorija) { //dodala kategorijo kot parameter funkcije
|
||||
const jedilnik = document.querySelector("#jedilnik"); //poisce nas prazen div jedilnik
|
||||
|
||||
const sekcija = document.createElement("section"); //ustvari nov element <section>
|
||||
sekcija.classList.add("jedilnik_kategorija"); //sectionu dodam ze obstojec razred - za CSS oblikovanje
|
||||
|
||||
const naslov = document.createElement("h2"); //spet naredimo element <h2>
|
||||
naslov.textContent = kategorija; //v ta element h2 izpisemo "Predjedi"
|
||||
|
||||
sekcija.appendChild(naslov); //vstavi naslov (h2) v sekcijo
|
||||
|
||||
// Ustvarimo div za vodoravno pomikanje tabele.
|
||||
const tabelaScroll = document.createElement("div");
|
||||
tabelaScroll.classList.add("tabela_scroll");
|
||||
|
||||
// Ustvarimo tabelo.
|
||||
const tabela = document.createElement("table");
|
||||
|
||||
// Ustvarimo naslov tabele.
|
||||
const caption = document.createElement("caption");
|
||||
caption.textContent = kategorija;
|
||||
tabela.appendChild(caption); //dodamo caption v tabelo
|
||||
|
||||
// Ustvarimo glavo tabele.
|
||||
const thead = document.createElement("thead");
|
||||
const vrsticaGlave = document.createElement("tr");
|
||||
|
||||
const stolpci = ["Jed", "Opis", "Alergeni", "Cena"];
|
||||
|
||||
for (const stolpec of stolpci) { //namesto da bi pisala vsak th posebaj gre cez vse elemente stolpci, in za vsak element ustvari th (stolpec je spremenjlivka ki gre cez zapis stolpcii)
|
||||
const th = document.createElement("th");
|
||||
th.textContent = stolpec;
|
||||
vrsticaGlave.appendChild(th);
|
||||
}
|
||||
|
||||
thead.appendChild(vrsticaGlave);
|
||||
tabela.appendChild(thead);
|
||||
|
||||
// Ustvarimo prazno telo tabele.
|
||||
const tbody = document.createElement("tbody");
|
||||
// Za vsako predjed ustvari novo vrstico tabele.
|
||||
for (const jed of jedi) { //se premikamo po jedeh
|
||||
if (jed.kategorija === kategorija) { //ce je kategorija predjed true potem
|
||||
const vrstica = document.createElement("tr"); //vstavimo vrstico (tr)
|
||||
|
||||
const podatki = [ //naredimo polje podatkiu (spet polje z vec elementi) ki vsebuje lastnosti posamezde jedi (npr muckalica)
|
||||
jed.naziv,
|
||||
jed.opis,
|
||||
jed.alergeni,
|
||||
jed.cena.toLocaleString("sl-SI", { //posebaj izpis z min/mac dvema decimalkama v slo jeziku, na koncu pa dodan €
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}) + " €"
|
||||
];
|
||||
|
||||
for (const podatek of podatki) { //s podatkom gremo cez "podatki" in vsak element/lastnost posabej izpisemo v td
|
||||
const td = document.createElement("td");
|
||||
td.textContent = podatek;
|
||||
vrstica.appendChild(td); //td nato vstavimo v vrstico
|
||||
}
|
||||
|
||||
tbody.appendChild(vrstica);
|
||||
}
|
||||
}
|
||||
tabela.appendChild(tbody);
|
||||
|
||||
tabelaScroll.appendChild(tabela);
|
||||
sekcija.appendChild(tabelaScroll);
|
||||
jedilnik.appendChild(sekcija);
|
||||
|
||||
}
|
||||
|
||||
const gumbi = document.querySelectorAll(".filter_gumb"); //element gumb za vsak button za pac izbiranje kategorije
|
||||
|
||||
// Ob kliku spremeni aktivni gumb.
|
||||
for (const gumb of gumbi) {
|
||||
|
||||
gumb.addEventListener("click", function () { //ko kliknem na gumb za izbiro prikaza menija
|
||||
|
||||
|
||||
for (const posamezenGumb of gumbi) { //najprej vsem gumbom odstranim aktivno
|
||||
posamezenGumb.classList.remove("aktiven");
|
||||
}
|
||||
|
||||
|
||||
gumb.classList.add("aktiven"); //dodam aktiven SAMO kliknjenemu gumbu (sem izven for zanke)
|
||||
|
||||
const kategorija = gumb.dataset.kategorija;
|
||||
|
||||
prikaziKategorije(kategorija);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const kategorije = ["Predjedi", "Glavne jedi", "Priloge", "Sladice"]; //ustvarjeno polje vseh kategorij
|
||||
|
||||
// Prikaže samo izbrano kategorijo oziroma vse kategorije.
|
||||
function prikaziKategorije(izbranaKategorija) {
|
||||
const jedilnik = document.querySelector("#jedilnik");
|
||||
|
||||
jedilnik.replaceChildren(); //iz elementa jedilnik odstrani vse njegove podrejene elemente
|
||||
|
||||
for (const kategorija of kategorije) {
|
||||
if (izbranaKategorija === "Vse" || izbranaKategorija === kategorija) { // || pomeni ali, torej kadar uporabnik izbere vse ALI eno od kategorij
|
||||
izrisiJedilnik(kategorija);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
prikaziKategorije("Vse"); //da se ko se stan naloz najprej pokazejo vsi jedilniki
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
const hamburger = document.querySelector (".hamburger_meni"); /* naredim spremenljivko hamburger, preišve celoten dokument HRML in poisce prvi item z razredom .hamburger_meni, shrani referenco na prvi element v html ki ima ta razred */
|
||||
const meni = document.querySelector (".main_menu"); /*enako kot hamburger le da tukaj iscem prvi element s classom main_menu */
|
||||
const ikona = hamburger.querySelector("i"); /*tole bomo pa dodali da se bo spremenila ikona v x */
|
||||
|
||||
hamburger.addEventListener ("click", function (){ /*addEventListener je metoda za poslušanje dogodka, click je pa dogodek */
|
||||
meni.classList.toggle ("odprt"); /*classList predstavlja elemente CSS razreda, toglle pa ta element (odprt) dodaja/odstranja */
|
||||
const odprt = meni.classList.contains ("odprt"); /*spet nardimo spremenljivko, ki ji dodamo vrednost true ali false glede na to ali je meni odprt/zaprt (preverja ali je dodan pri classu main_meni odprt) */
|
||||
ikona.classList.toggle("fa-bars", !odprt); /*zdaj pa ko je odprt je prikazan x, zaprt (!odprt) pa tri crtice */
|
||||
ikona.classList.toggle("fa-xmark", odprt);
|
||||
hamburger.setAttribute ("aria-expanded", String(odprt)); /*setAtribute spremeni vrednost HTML atributa, v tem primeru arial-expanded iz false v true in obratno, string pa pretvori true/false v besedilo "true"/"false" in posodobi atribut.*/
|
||||
hamburger.setAttribute ("aria-label", odprt ? "Zapri meni" : "Odpri meni"); /*gledr na to ali je odprt true ali false se bo spremenil zapis (za tiste ki imajo ne morejo videti treh crtic) v odprt meni ali zaprt meni */
|
||||
});
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
const recepti = document.querySelectorAll(".recepti_jedi"); //poiscem vse recepte
|
||||
|
||||
recepti.forEach(function(recept) { //funkcija gre cez vsak recept posebej
|
||||
|
||||
const osnovnePorcije = Number(recept.dataset.osnovnePorcije); //prebere osnovne porcije in iz stringa spremeni v stevilo ("4" = 4)
|
||||
const vnosPorcij = recept.querySelector(".stevilo_porcij"); //poisce polje za stevilo porciji samo v trenutnem receptu
|
||||
const sestavine = recept.querySelectorAll("[data-kolicina]"); //poisce kolicino vseh sestavin v receptu
|
||||
|
||||
vnosPorcij.addEventListener("input", function() { //ko spremenim vrednost polja se sprozi funkcija
|
||||
|
||||
const novePorcije = Number(vnosPorcij.value); //spet se prebere nova porcija in se spremeni v stevilo
|
||||
|
||||
if (!Number.isInteger(novePorcije) || novePorcije < 1 || novePorcije > 12) { //ce so nove porcije ne celo stevilo ali manjse od ena ali vecje od 12
|
||||
return; //se nic ne vrne
|
||||
}
|
||||
|
||||
sestavine.forEach(function(sestavina) { //funkcija za vsako sestavino
|
||||
|
||||
const osnovnaKolicina = Number(sestavina.dataset.kolicina); //prebere osnovno kolicino in jo pretvori v stevilo
|
||||
|
||||
const novaKolicina = osnovnaKolicina / osnovnePorcije * novePorcije; //preracuna kolicino sestavine za nove porcije
|
||||
|
||||
sestavina.textContent = Number(novaKolicina.toFixed(1)) //zaokrozimo na eno decimalno mesto, number pa odstrani nepotrebne 0 (200.0 = 200)
|
||||
.toLocaleString("sl-SI", { maximumFractionDigits: 1 }); //poskrbi da so decimalke napisane s slovensko vejico
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,293 @@
|
||||
// Pridobivanje HTML elementov querySelector izbere prvi element s tem classom ali id-jem
|
||||
const obrazec = document.querySelector("#obrazec_rezervacija");
|
||||
const ime = document.querySelector("#ime-priimek");
|
||||
const napakaIme = document.querySelector("#napaka-ime");
|
||||
const email = document.querySelector("#email");
|
||||
const napakaEmail = document.querySelector("#napaka-email");
|
||||
const telefon = document.querySelector("#telefon-st");
|
||||
const napakaTelefon = document.querySelector("#napaka-telefon");
|
||||
const datum = document.querySelector("#datum-obiska");
|
||||
const napakaDatum = document.querySelector("#napaka-datum");
|
||||
const ura = document.querySelector("#ura-obiska");
|
||||
const napakaUra = document.querySelector("#napaka-ura");
|
||||
const osebe = document.querySelector("#stevilo-oseb");
|
||||
const napakaOsebe = document.querySelector("#napaka-osebe");
|
||||
const soglasje = document.querySelector("#pogoji");
|
||||
const napakaSoglasje = document.querySelector("#napaka-pogoji");
|
||||
const potrditev = document.querySelector("#potrditev-rezervacije");
|
||||
const prostor = document.querySelector("#prostor");
|
||||
const opombe = document.querySelector("#opombe");
|
||||
|
||||
|
||||
const odpiralniCas = [
|
||||
[10, 22], // Nedelja
|
||||
[9, 22], // Ponedeljek
|
||||
null, // Torek - zaprto
|
||||
[9, 22], // Sreda
|
||||
[9, 22], // Četrtek
|
||||
[9, 23], // Petek
|
||||
[10, 23] // Sobota
|
||||
];
|
||||
|
||||
function preveriIme() { // Preveri, ali sta ime in priimek pravilno vnesena.
|
||||
const vrednost = ime.value.trim(); //odstrani presledke na zacetku in koncu
|
||||
const besede = vrednost.split(/\s+/); //razreze ime pri presledkih da dobimo tabelo (array)
|
||||
|
||||
if (besede.length !== 2 || besede[0].length < 2 || besede[1].length < 2) { //ce tabela nima dveh elementov, ali ima vsak element vsaj dve crki
|
||||
napakaIme.textContent = "Vnesite ime in priimek, vsak naj vsebuje vsaj dve črki."; //ce je if true izpise napako
|
||||
ime.classList.add("napacno"); //v tem primeru id-ju ime-priimek doda napacno
|
||||
return false; //in nam vrne kot rezultat funkcije false
|
||||
}
|
||||
else {
|
||||
napakaIme.textContent = ""; //ce ni napak se span ne izpise
|
||||
ime.classList.remove("napacno"); //odstrani se napacno pri id ime-priimek
|
||||
return true; //vrne funkcija true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function preveriEmail() {
|
||||
const vrednost = email.value.trim(); //spet odstranim presledke na zacetku in koncu
|
||||
const vzorec = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; //definiramo kako mora izgledati mail; ^ pomeni zacetek besetila, [^\s@]- pomeni da je to besedilo 1 ali vec znakov ki niso @ ali presledek, @[^\s@]- zahteva obvezno @ in za tem znakom vsaj 1 znak ki ni presledek ali @, \. - obvezna pika, za piko spet besedilo ki ni oresledek ali @, $ pomeni konec besedila
|
||||
// ce nek eklement ustreza vzorcu, vzprec=true, drugace pa false, https://www.w3schools.com/js/js_regexp.asp
|
||||
if (!vzorec.test(vrednost)) { //ce je vrednost vzorca NE true= torej false
|
||||
napakaEmail.textContent = "Vnesite veljaven e-poštni naslov."; //izpise se span
|
||||
email.classList.add("napacno");
|
||||
return(false);
|
||||
}
|
||||
else {
|
||||
napakaEmail.textContent = "";
|
||||
email.classList.remove("napacno");
|
||||
return(true);
|
||||
}
|
||||
}
|
||||
|
||||
function preveriTelefon (){
|
||||
const vrednost = telefon.value.trim();
|
||||
const vzorec = /^0\d{2} ?\d{3} ?\d{3}$/; //https://www.w3schools.com/js/js_regexp.asp, spet ^pomeni zacetek besedila, obvezno 0, \d{2} za ničko obvezno dve stevili (d- digit), ?- neobvezen presledek, \d{3} 3 stevila, $ zakljucek besedila
|
||||
if (!vzorec.test(vrednost)) {
|
||||
napakaTelefon.textContent = "Vnesite veljavno telefonsko številko.";
|
||||
telefon.classList.add("napacno");
|
||||
return false;
|
||||
}
|
||||
|
||||
else {
|
||||
napakaTelefon.textContent = "";
|
||||
telefon.classList.remove("napacno");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Preveri pravilnost datuma rezervacije.
|
||||
function preveriDatum() {
|
||||
const vrednost = datum.value; //elementu doda trenutno vrednost elementa value, torej tisto kar uporabnik izbere, npr. 4.november 2026 bi bilo 2026-11-04, vrne vrednost v obliki string
|
||||
const izbraniDatum = new Date(vrednost + "T00:00:00"); //tukaj pa iz stringa spremenim v pobjekt date, pac uporabno za datum
|
||||
const danVTednu = izbraniDatum.getDay(); // s tem pa ugotovimo kater dan v tednu je to, 0-nedelja, 1-ponedeljek, 2-torek... za cel teden, da bom lahko kasneje napisala da smo v torek zaprti
|
||||
|
||||
const danes = new Date(); // elementu danes dodam vrednost današnjega datuma
|
||||
danes.setHours(0, 0, 0, 0); //in nastavim čas na polnoč, vse datume primerjam ob polnoči da slučajnp to ne bi vpivalo na preverjanje ali je datum v preteklosti
|
||||
|
||||
if (vrednost === "") { //če je vrednost prazna potem
|
||||
napakaDatum.textContent = "Izberite datum rezervacije.";
|
||||
}
|
||||
else if (danes > izbraniDatum) { //če je današnji datum večji oz kasnejši od izbranega potem
|
||||
napakaDatum.textContent = "Datum ne sme biti v preteklosti.";
|
||||
}
|
||||
else if (danVTednu === 2) { //če je izbran dan v tednu torek
|
||||
napakaDatum.textContent = "Ob torkih je restavracija zaprta.";
|
||||
}
|
||||
else {
|
||||
napakaDatum.textContent = "";
|
||||
datum.classList.remove("napacno");
|
||||
return true; //če je datum prvilen se funkcija konča tukaj
|
||||
}
|
||||
|
||||
datum.classList.add("napacno");
|
||||
return false; //zapisano na koncu da se izognemo ponavljanju, ker do tega dela pridemo samo če je datum neustrezen
|
||||
}
|
||||
|
||||
// Preveri pravilnost ure rezervacije.
|
||||
function preveriUro() {
|
||||
const vrednost = ura.value;
|
||||
|
||||
// Najprej preverimo, ali sta datum in ura izbrana.
|
||||
if (vrednost === "" || datum.value === "") { //dan more biti izbran ker se delavni cas od dnva do dneva spreminja
|
||||
napakaUra.textContent = "Izberite datum in uro rezervacije.";
|
||||
ura.classList.add("napacno");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Pridobimo odpiralni čas za izbrani dan.
|
||||
const izbraniDatum = new Date(datum.value + "T00:00:00");
|
||||
const danVTednu = izbraniDatum.getDay();
|
||||
const odpiralniCasDanes = odpiralniCas[danVTednu]; //sped zelimo dobiti dan v tednu (zgornji dve vrstici) da lahko na podlagi tega izberemo delovni cas
|
||||
|
||||
// Razdelimo izbrano uro na ure in minute.
|
||||
const deli = vrednost.split(":");
|
||||
const samoUra = Number(deli[0]);
|
||||
const samoMin = Number(deli[1]);
|
||||
|
||||
// Preverimo, ali je rezervacija vsaj eno uro v prihodnosti.
|
||||
const zdaj = new Date(); //to nam da cas da pripravimo mizo npr.
|
||||
const najmanjsiCas = zdaj.getTime() + 60 * 60 * 1000; //cas se zapisuje v milisekundah zato je za dodajo ene ure 60*60*1000
|
||||
const casRezervacije = new Date(datum.value + "T" + vrednost); //zelimo vedet datu in uro rezervacije, datum.value+"T"+vrednost je pa standardni zapis datuma, new Date pa uporabljamo zato da lahko z njim racunamo
|
||||
|
||||
if (odpiralniCasDanes === null) {
|
||||
napakaUra.textContent = "Ob torkih je restavracija zaprta.";
|
||||
}
|
||||
else {
|
||||
const odprtje = odpiralniCasDanes[0];
|
||||
const zaprtje = odpiralniCasDanes[1];
|
||||
const zadnjaUra = zaprtje - 1; //ne morejo se rezervirati ob zaprtju (samo zdrava pamet)
|
||||
|
||||
if (samoUra < odprtje) { //ce je ura manjsa od odprtja
|
||||
napakaUra.textContent = "Restavracija ob izbrani uri še ni odprta.";
|
||||
}
|
||||
else if (samoUra > zadnjaUra || (samoUra === zadnjaUra && samoMin > 0)) { //ce je ura vecja od zadnje ure, ali pa je enaka zadnji mozni uri in so minute vecje 0 (ker lahko se ob 21.00 rezerviras mizo)
|
||||
napakaUra.textContent = "Rezervacija je mogoča najpozneje eno uro pred zaprtjem.";
|
||||
}
|
||||
else if (casRezervacije.getTime() < najmanjsiCas) {
|
||||
napakaUra.textContent = "Rezervacijo morate oddati vsaj eno uro pred obiskom.";
|
||||
}
|
||||
else { //vse je pravilno
|
||||
napakaUra.textContent = "";
|
||||
ura.classList.remove("napacno");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
ura.classList.add("napacno"); //spet se izogibamo ponavljanju, to se zgodi vsakic ko je kaj narobe
|
||||
return false;
|
||||
}
|
||||
|
||||
//Preveri število oseb.
|
||||
function preveriOsebe() {
|
||||
const vrednost = Number(osebe.value); //iz stringa spremeni v number
|
||||
|
||||
if (vrednost<1 || vrednost>12 || !Number.isInteger(vrednost)) { //vrednost je manjsa od 1, je vecja od 12 ali ni celo stevilo
|
||||
napakaOsebe.textContent = "Število oseb mora biti med 1 in 12.";
|
||||
osebe.classList.add("napacno");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
napakaOsebe.textContent = "";
|
||||
osebe.classList.remove("napacno");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function preveriSoglasje() {
|
||||
|
||||
if (!soglasje.checked) {
|
||||
napakaSoglasje.textContent = "Za oddajo rezervacije morate potrditi soglasje.";
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
napakaSoglasje.textContent = "";
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Preverjanje med tipkanjem
|
||||
ime.addEventListener("input", preveriIme); //funkcija se opravi ko zacnemo pisati v ime, se zacne izvajati funkcija
|
||||
email.addEventListener("input", preveriEmail);
|
||||
telefon.addEventListener("input", preveriTelefon);
|
||||
datum.addEventListener("select", preveriDatum); //tu imam select ker datum izbira ne vpisuje tako da je bolj logicno
|
||||
ura.addEventListener("change", preveriUro);
|
||||
osebe.addEventListener("input", preveriOsebe);
|
||||
soglasje.addEventListener("change", preveriSoglasje); //ker se bo samo spreminjala vrednost oznaceno ali ne (change ne input)
|
||||
|
||||
|
||||
obrazec.addEventListener("submit", function(event) { //ko oddamo funkcijo se izvede preverjanje
|
||||
event.preventDefault(); //preprecimo default preverjsnje ob submitu, torej ds preprecimo ponovno nalaganje strani
|
||||
|
||||
const imePravilno = preveriIme(); //elementu imePravilno dodamo vrednost true/false
|
||||
const emailPravilno = preveriEmail();
|
||||
const telefonPravilno = preveriTelefon();
|
||||
const datumPravilno = preveriDatum();
|
||||
const uraPravilno = preveriUro();
|
||||
const osebePravilno = preveriOsebe();
|
||||
const soglasjePravilno = preveriSoglasje();
|
||||
|
||||
|
||||
if (imePravilno && emailPravilno && telefonPravilno && datumPravilno && uraPravilno && osebePravilno && soglasjePravilno) {
|
||||
potrditev.replaceChildren();
|
||||
|
||||
const naslov = document.createElement("h3"); // ustvari element h3
|
||||
naslov.textContent = "Povzetek vaše rezervacije";
|
||||
|
||||
const sporocilo = document.createElement("p"); // ustvari element p
|
||||
sporocilo.textContent = "Podatki rezervacije so uspešno preverjeni!";
|
||||
|
||||
const podatki = document.createElement("p"); // ustvari element p za osnovne podatke
|
||||
podatki.textContent =
|
||||
"Ime in priimek: " + ime.value.trim() +
|
||||
" | Datum: " + datum.value +
|
||||
" | Ura: " + ura.value +
|
||||
" | Število oseb: " + osebe.value +
|
||||
" | Prostor: " + prostor.options[prostor.selectedIndex].text;
|
||||
|
||||
potrditev.append(naslov, sporocilo, podatki);
|
||||
|
||||
// Preverimo, ali je uporabnik izbral priložnost.
|
||||
const priloznost = document.querySelector('input[name="priloznost"]:checked');
|
||||
|
||||
if (priloznost !== null && priloznost.value !== "brez") { //ce priloznost ni prazna
|
||||
const podatek = document.createElement("p");
|
||||
podatek.textContent = "Priložnost: " + priloznost.nextElementSibling.textContent; //nextElementSibling isce naslednji element v tem starsevskem rezredu
|
||||
potrditev.append(podatek); //dodamo v podatek
|
||||
}
|
||||
|
||||
// Pridobimo vse označene posebne omejitve.
|
||||
const omejitve = document.querySelectorAll('input[name="posebne-omejitve"]:checked');
|
||||
|
||||
if (omejitve.length > 0) { //ce dolzina omejitv vecja od 0
|
||||
const seznam = []; //ustvarimo seznam (array-tabelo)
|
||||
|
||||
omejitve.forEach(function(omejitev) { //za vsak oznacen checkbox
|
||||
seznam.push(omejitev.nextElementSibling.textContent); //dodamo na seznam vsak oznacen checkbox, spet se premilkamo po elementh starsevskega razreda
|
||||
});
|
||||
|
||||
const podatek = document.createElement("p");
|
||||
podatek.textContent = "Posebne omejitve: " + seznam.join(", "); //seuznam.join, vse podsatke iz seznama zdruzi v string
|
||||
potrditev.append(podatek);
|
||||
}
|
||||
|
||||
// Preverimo, ali je uporabnik napisal opombe.
|
||||
if (opombe.value.trim() !== "") {
|
||||
const podatek = document.createElement("p");
|
||||
podatek.textContent = "Opombe: " + opombe.value.trim(); //potem izpisemo zapisane opombe, pac trimamo presledke odspredaj in zadaj
|
||||
potrditev.append(podatek);
|
||||
}
|
||||
|
||||
potrditev.hidden = false; // prikažemo povzetek rezervacije
|
||||
}
|
||||
else {
|
||||
potrditev.hidden = true; // skrijemo povzetek, če podatki niso pravilni
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
obrazec.addEventListener("reset", function() {
|
||||
|
||||
// Izbrišemo vsa sporočila o napakah.
|
||||
const napake = obrazec.querySelectorAll(".sporocilo_napake");
|
||||
|
||||
napake.forEach(function(napaka) {
|
||||
napaka.textContent = "";
|
||||
});
|
||||
|
||||
// Odstranimo rdeče obrobe napačnih polj.
|
||||
const napacnaPolja = obrazec.querySelectorAll(".napacno"); //vsa oilja ki imajo napacno
|
||||
|
||||
napacnaPolja.forEach(function(polje) {
|
||||
polje.classList.remove("napacno");
|
||||
});
|
||||
|
||||
// Skrijemo potrditev rezervacije.
|
||||
potrditev.hidden = true;
|
||||
potrditev.replaceChildren();
|
||||
});
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/stylesheet.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>O nas | Za prste obliznit</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<span>Za prste obliznit</span>
|
||||
</a>
|
||||
<ul class="main_menu">
|
||||
<li><a href="index.html"><i class="fa-solid fa-house"></i>Domov</a></li>
|
||||
<li><a href="jedilnik.html"><i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
|
||||
<li><a href="recepti.html"><i class="fa-solid fa-book-open"></i>Recepti</a></li>
|
||||
<li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
|
||||
<li><a class="active" href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
|
||||
</ul>
|
||||
<a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="o_nas_page">
|
||||
<h1>Naša zgodba</h1>
|
||||
<div class="nasa_zgodba_grid">
|
||||
<div class="nasa_zgodba_txt">
|
||||
<h2>Od prvega grižljaja do zadnjega oblizanega prsta.</h2>
|
||||
<p>
|
||||
Vse se je začelo z ljubeznijo do potovanj in radovednostjo, kaj vse se skriva na krožnikih po svetu. Na naših poteh smo odkrivali nove kulture, spoznavali kulinarične tradicije in okušali jedi, ki so nas navdušile s svojimi okusi, vonji in zgodbami. Z vsakega potovanja smo prinesli nekaj novega – idejo, navdih ali skrivnost, zaradi katere je bila določena jed tako posebna. <br><br>
|
||||
Sčasoma se je porodila ideja: zakaj ne bi vseh teh doživetij združili na enem mestu? Tako je nastala <b>Za prste obliznit </b> – restavracija, kjer se srečujejo okusi sveta, domače klasike in jedi, ki te vsaj za trenutek popeljejo nekam daleč stran. <br><br>
|
||||
Naš dom smo našli v Tomažu nad Vojnikom, nekoliko odmaknjeni od mestnega vrveža in vsakodnevnega hitenja. Morda nas ne boste našli na najbolj prometni ulici, a verjamemo, da so nekatere stvari vredne poti. Naša lokacija nam omogoča, da se umaknemo od hrupa in se posvetimo temu, kar nam največ pomeni – pripravi dobre hrane, skrbno izbranim sestavinam in prijetnemu doživetju za vsakega gosta.
|
||||
<br><br>
|
||||
Pri nas ne gre zgolj za obrok. Gre za odkrivanje, okušanje in uživanje. Od bogatih balkanskih klasik do pristnih italijanskih pic, dišečih azijskih specialitet in sredozemskih dobrot – vsak krožnik prinaša svoj košček sveta.
|
||||
<br><br>
|
||||
Naš cilj je preprost: da se za mizo dobro počutite, da z veseljem poskusite kaj novega in da ob zadnjem grižljaju ugotovite, da bi si najraje obliznili še prste.
|
||||
<br><br>
|
||||
<b>Dobrodošli pri nas!</b>
|
||||
</p>
|
||||
</div>
|
||||
<figure>
|
||||
<img src="slike/restavracija.png" alt="slika restavracije">
|
||||
<figcaption>Naša restavracija</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<h2>Delovni čas</h2>
|
||||
<table class="delovi_cas">
|
||||
<thead>
|
||||
<th>Dan</th>
|
||||
<th>Delavnik</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Ponedeljek</td>
|
||||
<td>9:00-22:00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Torek</td>
|
||||
<td>Zaprti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sreda</td>
|
||||
<td>9:00-22:00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Četrtek</td>
|
||||
<td>9:00-22:00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Petek</td>
|
||||
<td>9:00-23:00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sobota</td>
|
||||
<td>10:00-23:00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nedelja</td>
|
||||
<td>10:00-22:00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Lokacija</h2>
|
||||
<p><i>
|
||||
Restavracija Za prste obliznit<br>
|
||||
Tomaž nad Vojnikom 18a<br>
|
||||
3212 Vojnik<br>
|
||||
Slovenija
|
||||
</i></p>
|
||||
<iframe class="zemljevid"
|
||||
src="https://www.openstreetmap.org/export/embed?bbox=15.325708128511907%2C46.29054746034702%2C15.329828001558782%2C46.2928901216514&layer=mapnik&marker=46.291718803524695%2C15.327768065035343"
|
||||
title="Lokacija restavracije">
|
||||
</iframe>
|
||||
|
||||
<br>
|
||||
|
||||
<small>
|
||||
<a href="https://www.openstreetmap.org/?mlat=46.291719&mlon=15.327768#map=17/46.291719/15.327768">
|
||||
Prikaži večji zemljevid
|
||||
</a>
|
||||
</small>
|
||||
<br><br>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
Za prste obliznit<br>
|
||||
<i class="fa-solid fa-location-dot"></i>Tomaž nad Vojnikom 18a,3212 Vojnik <br>
|
||||
<i class="fa-solid fa-phone"></i>Telefon:<a href="tel:+072727777"> 07 272 77 77</a> <br>
|
||||
<i class="fa-solid fa-envelope"></i>E-pošta:<a href="mailto:info@zaobliznitprste.si">info@zaobliznitprste.si </a>
|
||||
</address>
|
||||
<p>© 2026 Iva Friedrich</p>
|
||||
</footer>
|
||||
<script src="js/navigacija.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/stylesheet.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Recepti | Za prste obliznit</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<span>Za prste obliznit</span>
|
||||
</a>
|
||||
<ul class="main_menu">
|
||||
<li><a href="index.html"><i class="fa-solid fa-house"></i></i>Domov</a></li>
|
||||
<li><a href="jedilnik.html"> <i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
|
||||
<li><a class="active" href="recepti.html"><i class="fa-solid fa-book-open"></i>Recepti</a></li>
|
||||
<li><a href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
|
||||
<li><a href="o_nas.html"> <i class="fa-solid fa-circle-info"></i>O nas</a></li>
|
||||
</ul>
|
||||
<a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="recepti_page">
|
||||
<h1 id="na_vrh">Recepti</h1>
|
||||
<ul class="seznam_receptov">
|
||||
<li><a class="gumb_2" href="#muckalica">Mučkalica</a></li>
|
||||
<li><a class="gumb_2" href="#pizza_diavola">Pizza diavola</a></li>
|
||||
<li><a class="gumb_2" href="#paella">Paella</a></li>
|
||||
</ul>
|
||||
<section class="recepti_uvod">
|
||||
<h2>Svetovni okusi. Vaša kuhinja</h2>
|
||||
<p>Navdihnjeni s potovanj, ustvarjeni za vašo mizo. Odkrite recepte z različnih koncev sveta in prinesi košček kulinaričnega potovanja v svoj dom.</p> <br>
|
||||
</section>
|
||||
<article class="recepti_jedi" data-osnovne-porcije="4" >
|
||||
<h2 id="muckalica">Mučkalica </h2>
|
||||
<div class="recepti_grid">
|
||||
<figure class="recepti_slika">
|
||||
<img src="slike/muckalica.png" alt="mučkalica">
|
||||
<figcaption>Mučkalica</figcaption>
|
||||
</figure>
|
||||
<div class="o_receptu">
|
||||
<div class="recepti_info">
|
||||
<ul>
|
||||
<li><b>Aktiven čas priprave </b><br>
|
||||
20min
|
||||
</li>
|
||||
<li><b>Skupen čas priprave</b> <br>
|
||||
cca. 70min
|
||||
</li>
|
||||
<li><b>Število porciji</b> <br>
|
||||
<input type="number" class="stevilo_porcij" aria-label="Število porcij" min="1" max="12" step="1" value="4" style="width: 3.5em; font: inherit; text-align: center; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.3rem;"> porcije
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="recepti_sestavine">
|
||||
<h3>Sestavine</h3>
|
||||
<ul>
|
||||
<li><span data-kolicina="800">800</span>g svinjskega vratu ali plečeta</li>
|
||||
<li><span data-kolicina="3">3</span> večje rdeče paprike</li>
|
||||
<li><span data-kolicina="2">2</span> srednje veliki čebuli</li>
|
||||
<li><span data-kolicina="3">3</span> stroki česnja</li>
|
||||
<li><span data-kolicina="400">400</span>g sesekljanega paradižnika iz pločevinke</li>
|
||||
<li><span data-kolicina="2">2</span> žlici paradižnikove mezge</li>
|
||||
<li><span data-kolicina="3">3</span> žlice olja</li>
|
||||
<li><span data-kolicina="150">150</span> ml vode</li>
|
||||
<li><span data-kolicina="1">1</span> žlička sladke mlete paprike</li>
|
||||
<li><span data-kolicina="0.5">0,5</span> žličke dimljene paprike (po želji)</li>
|
||||
<li>sol in sveže mlet poper</li>
|
||||
<li>Ščepec čilija (po želji) </li>
|
||||
<li>svež peteršilj za postrežbo</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recepti_priprava">
|
||||
<h3>Priprava</h3>
|
||||
<ol>
|
||||
<li>
|
||||
<b>Priprava mesa</b>
|
||||
<p>Meso narežemo na približno 2-3cm velike kocke. Začini ga s soljo in poprom.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Zapeči meso</b>
|
||||
<p>V večji težki ponvi ali loncu segrej olje. Meso v več porcijah dobro zapeci z vseh strani, da dobi zlato rjavo skorjico. Nato ga vzemi iz posode.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Pripravi zelenjavo</b>
|
||||
<p>Čebulo nareži na trakove, papriko na manjše kose, česen pa sesekljaj. V isti posodi najprej prepraži čebulo, nato dodaj papriko in kuhaj približno 7–8 minut. Na koncu dodaj česen.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Ustvari omako</b>
|
||||
<p>Primešaj paradižnikovo mezgo, sladko papriko in po želji dimljeno papriko. Dodaj sesekljan paradižnik in vodo oziroma jušno osnovo</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Počasi kuhaj</b>
|
||||
<p>V omako vrni meso. Pokrito kuhaj na nizki temperaturi približno 35–45 minut oziroma toliko časa, da se meso zmehča. Občasno premešaj in po potrebi dodaj malo vode</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Dokončaj in postrezi</b>
|
||||
<p>Poskusi, popravi začimbe in po želji dodaj ščepec čilija. Potresi s svežim peteršiljem. Postrezi s pečenim krompirjem ali domačim kruhom</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
|
||||
</article>
|
||||
<br>
|
||||
<article class="recepti_jedi" data-osnovne-porcije="4">
|
||||
<h2 id="pizza_diavola">Napolitanska pizza Diavola</h2>
|
||||
<div class="recepti_grid">
|
||||
<figure class="recepti_slika">
|
||||
<img src="slike/pizza_diavola.png" alt="pizza diavola">
|
||||
<figcaption>Pizza diavola</figcaption>
|
||||
</figure>
|
||||
<div class="o_receptu">
|
||||
<div class="recepti_info">
|
||||
<ul>
|
||||
<li><b>Aktiven čas priprave </b><br>
|
||||
30min
|
||||
</li>
|
||||
<li><b>Skupen čas priprave</b> <br>
|
||||
cca. 13-25ur
|
||||
</li>
|
||||
<li><b>Število pic</b> <br>
|
||||
<input type="number" class="stevilo_porcij" aria-label="Število pic" min="1" max="12" step="1" value="4" style="width: 3.5em; font: inherit; text-align: center; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.3rem;"> pice
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="recepti_sestavine">
|
||||
<h3>Sestavine</h3>
|
||||
<ul>
|
||||
<li><span data-kolicina="600">600</span>g moke tipa 00</li>
|
||||
<li><span data-kolicina="390">390</span>g hladne vode</li>
|
||||
<li><span data-kolicina="18">18</span>g soli</li>
|
||||
<li><span data-kolicina="1">1</span>g suhega instant kvasa (ali približno <span data-kolicina="3">3</span>g svežega) </li>
|
||||
<li><span data-kolicina="400">400</span>g olupljenih pelatov</li>
|
||||
<li><span data-kolicina="300">300</span>g mozzarele za pizzo</li>
|
||||
<li><span data-kolicina="200">200</span>g pikantne salame</li>
|
||||
<li><span data-kolicina="1">1</span> žlička origana</li>
|
||||
<li>sveža bazilika</li>
|
||||
<li>malo olivnega olja</li>
|
||||
<li>čili kosmiči (po želji) </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recepti_priprava">
|
||||
<h3>Priprava</h3>
|
||||
<ol>
|
||||
<li>
|
||||
<b>Zamesi testo</b>
|
||||
<p>V vodi raztopi sol, dodaj moko in kvas. Zamesi gladko, prožno testo. Gneti približno 10–15 minut, dokler ni elastično in se ne trga zlahka</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Pusti vzhajati</b>
|
||||
<p>Testo pokrij in pusti približno 1 uro pri sobni temperaturi. Nato ga razdeli na <span data-kolicina="4">4</span> enake kroglice, jih shrani v pokrito posodo in pusti vzhajati še približno 11–23 ur v hladilniku. Pred oblikovanjem jih vzemi iz hladilnika približno 2 uri prej.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Pripravi paradižnikovo omako</b>
|
||||
<p>Pelate z rokami ali vilicami pretlači. Dodaj malo soli in po</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Oblikuj pice</b>
|
||||
<p>Pečico skupaj s kamnom ali jekleno ploščo segrevaj na najvišji temperaturi, praviloma 250–300 °C, vsaj 45 minut. Vsako kroglico testa s prsti raztegni od sredine navzven, da ohraniš zračen rob. Ne uporabljaj valjarja.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Dodaj nadev</b>
|
||||
<p>Na testo razporedi tanko plast omake, mocarelo, narezano pikantno salamo in nekaj listov bazilike. Ne pretiravaj z nadevom, saj lahko preveč tekočine zmehča sredico.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Speci pico</b>
|
||||
<p>Peci na dobro segretem kamnu ali jeklu, dokler rob ne naraste in se obarva, sir pa stopi. Pri domači pečici na 250–300 °C bo to pogosto trajalo približno 5–8 minut; čas je odvisen od pečice in podlage. V namenski peči za napolitansko pico je peka bistveno krajša.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Postrezi</b>
|
||||
<p>Po želji dodaj nekaj kapljic oljčnega olja, svežo baziliko in čili v kosmičih.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
|
||||
</article>
|
||||
<br>
|
||||
<article class="recepti_jedi" data-osnovne-porcije="4">
|
||||
<h2 id="paella">Španska paella z morskimi zadeži</h2>
|
||||
<div class="recepti_grid">
|
||||
<figure class="recepti_slika">
|
||||
<img src="slike/paella.png" alt="paella">
|
||||
<figcaption>Paella</figcaption>
|
||||
</figure>
|
||||
<div class="o_receptu">
|
||||
<div class="recepti_info">
|
||||
<ul>
|
||||
<li><b>Aktiven čas priprave </b><br>
|
||||
20min
|
||||
</li>
|
||||
<li><b>Skupen čas priprave</b> <br>
|
||||
cca. 50min
|
||||
</li>
|
||||
<li><b>Število porciji</b> <br>
|
||||
<input type="number" class="stevilo_porcij" aria-label="Število porcij" min="1" max="12" step="1" value="4" style="width: 3.5em; font: inherit; text-align: center; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.3rem;"> porcije
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="recepti_sestavine">
|
||||
<h3>Sestavine</h3>
|
||||
<ul>
|
||||
<li><span data-kolicina="320">320</span>g riža za paello (npr. bomba ali podobna kratkozrnata sorta)</li>
|
||||
<li><span data-kolicina="300">300</span>g očiščenih kozic</li>
|
||||
<li><span data-kolicina="300">300</span>g školjk, dobro očiščenih</li>
|
||||
<li><span data-kolicina="200">200</span>g lignjev, narezanih na kolobarje</li>
|
||||
<li><span data-kolicina="1">1</span> srednje velika čebula</li>
|
||||
<li><span data-kolicina="1">1</span> rdeča paprika</li>
|
||||
<li><span data-kolicina="3">3</span> stroki česna</li>
|
||||
<li><span data-kolicina="250">250</span>g sesekljanega paradižnika</li>
|
||||
<li><span data-kolicina="900">900</span>g ribje jušne osnove (približno; odvisno od riža)</li>
|
||||
<li>ščepec žafrana</li>
|
||||
<li><span data-kolicina="1">1</span> žlička sladke mlete paprike</li>
|
||||
<li><span data-kolicina="3">3</span> žlice olivnega olja</li>
|
||||
<li>sol in poper</li>
|
||||
<li>limona</li>
|
||||
<li>svež peteršilj</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recepti_priprava">
|
||||
<h3>Priprava</h3>
|
||||
<ol>
|
||||
<li>
|
||||
<b>Pripravi sestavine</b>
|
||||
<p>Čebulo in česen drobno sesekljaj, papriko nareži na majhne kocke, lignje na kolobarje. Jušno osnovo segrej in v njej za nekaj minut namoči žafran.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Na hitro popeci morske sadeže</b>
|
||||
<p>V široki ponvi za paello segrej oljčno olje. Kozice na hitro popeci, nato jih vzemi iz ponve. Če uporabljaš surove školjke, preveri, da so primerne za kuhanje, ter jih pripravi v skladu z navodili za varno uporabo.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Pripravi zelenjavno osnovo</b>
|
||||
<p>V isti ponvi prepraži čebulo in papriko. Dodaj česen, nato sesekljan paradižnik. Kuhaj približno 5 minut, da se omaka zgosti.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Dodaj riž in začimbe</b>
|
||||
<p>Primešaj sladko papriko in riž ter ga približno minuto premešaj, da se obda z omako. Prilij vročo jušno osnovo z žafranom in enakomerno razporedi riž po ponvi.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Kuhaj brez mešanja</b>
|
||||
<p>Riž kuhaj na zmernem ognju približno 15–20 minut oziroma po navodilih izbrane sorte. Ko dodaš osnovo, riža praviloma ne mešaj več, saj želiš ohraniti značilno strukturo paelle.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Dodaj morske sadeže</b>
|
||||
<p>Kozice, lignje in školjke razporedi po rižu. Nadaljuj s kuhanjem, dokler riž ni mehak, tekočina pa večinoma vpita. Surovi morski sadeži morajo biti ustrezno kuhani; školjke, ki se po kuhanju ne odprejo, zavrzi.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Pusti počivati in postrezi</b>
|
||||
<p>Ponev odstavi, pokrij za približno 5 minut in nato paello postrezi z rezinami limone ter svežim peteršiljem.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
|
||||
</article>
|
||||
<br><br>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
Za prste obliznit<br>
|
||||
<i class="fa-solid fa-location-dot"></i> Tomaž nad Vojnikom 18a,3212 Vojnik <br>
|
||||
<i class="fa-solid fa-phone"></i> Telefon:<a href="tel:+072727777"> 07 272 77 77</a> <br>
|
||||
<i class="fa-solid fa-envelope"></i>E-pošta:<a href="mailto:info@zaobliznitprste.si">info@zaobliznitprste.si </a>
|
||||
</address>
|
||||
<p>© 2026 Iva Friedrich</p>
|
||||
</footer>
|
||||
<script src="js/recepti.js"></script>
|
||||
<script src="js/navigacija.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/stylesheet.css">
|
||||
<script src="java_script.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rezervacija | Za prste obliznit</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="slike/logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="slike/logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<span>Za prste obliznit</span>
|
||||
</a>
|
||||
<ul class="main_menu">
|
||||
<li><a href="index.html"><i class="fa-solid fa-house"></i>Domov</a></li>
|
||||
<li><a href="jedilnik.html"><i class="fa-solid fa-utensils"></i>Jedilnik</a></li>
|
||||
<li><a href="recepti.html"><i class="fa-solid fa-book-open"></i>Recepti</a></li>
|
||||
<li><a class="active" href="rezervacija.html"><i class="fa-solid fa-calendar-check"></i>Rezervacija</a></li>
|
||||
<li><a href="o_nas.html"><i class="fa-solid fa-circle-info"></i>O nas</a></li>
|
||||
</ul>
|
||||
<a class="hamburger_meni" href="javascript:void(0)" onclick="odpri_meni()">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="rezervacija_page">
|
||||
<h1>Vaša miza vas že čaka</h1>
|
||||
<p>Dobra hrana je boljša v dobri družbi. Rezervirajte svojo mizo in si privoščite kulinarično popotovanje po spletu.</p>
|
||||
<h2>Nekaj informaciji pred rezervacijo:</h2>
|
||||
<p>
|
||||
<b>Kdaj lahko rezervirate?</b>
|
||||
<br>
|
||||
Spletne rezervacije sprejemamo vsak dan med <b>9.00 in 20.00</b>. Rezervacijo priporočamo vsaj nekaj ur pred prihodom.
|
||||
</p>
|
||||
<p>
|
||||
<b>Prihajate v večji družbi?</b>
|
||||
<br>
|
||||
Za skupine z <b>12 ali več osebami</b> vas prosimo, da nas pokličete. Tako se lahko skupaj dogovorimo o razpoložljivosti miz in poskrbimo, da bo vaš obisk čim prijetnejši.
|
||||
</p>
|
||||
<p>
|
||||
Veselimo se vašega obiska in skupnih kulinaričnih doživetij!
|
||||
<br>
|
||||
<b>Ekipa Za prset obliznit</b>
|
||||
</p>
|
||||
<h2>Rezervacija</h2>
|
||||
<p>Izpolnite podatke in pošljite zahtevo za restavracijo.</p>
|
||||
<form id="obrazec_rezervacija" method="get" novalidate> <!-- novalidate pomeni da bomo lahko dodali svoje napise za opozorila -->
|
||||
<fieldset class="field_rezervacija">
|
||||
<legend>Podrobnosti rezervacije:</legend>
|
||||
|
||||
<label for="datum-obiska">Datum obiska</label>
|
||||
<div class="vnos_rezervacija">
|
||||
<input type="date" id="datum-obiska" name="datum-obiska" required>
|
||||
<span class="sporocilo_napake" id="napaka-datum"></span>
|
||||
</div>
|
||||
<label for="ura-obiska">Ura obiska</label>
|
||||
<div class="vnos_rezervacija">
|
||||
<input type="time" id="ura-obiska" name="ura-obiska" required>
|
||||
<span class="sporocilo_napake" id="napaka-ura"></span>
|
||||
</div>
|
||||
<label for="stevilo-oseb">Število oseb</label>
|
||||
<div class="vnos_rezervacija">
|
||||
<input type="number" id="stevilo-oseb"
|
||||
name="stevilo-oseb" min="1" max="12" required> <!-- in in max sem obdrzala ker potem se prikazejo samo vrednost med 1 in 12 na izbiro, vseeno sem naredila validacijo v js -->
|
||||
<span class="sporocilo_napake" id="napaka-osebe"></span>
|
||||
</div>
|
||||
Prostor:
|
||||
<select id="prostor" name="prostor">
|
||||
<option value="notranjost">Notranjost</option>
|
||||
<option value="terasa">Terasa</option>
|
||||
<option value="zasebna-soba">Zasebna soba</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="field_rezervacija">
|
||||
<legend>Osebni podatki:</legend>
|
||||
<label for="ime-priimek">Ime in priimek</label>
|
||||
<div class="vnos_rezervacija">
|
||||
<input type="text" id="ime-priimek" name="ime-priimek"
|
||||
placeholder="Neža Novak" required>
|
||||
<span class="sporocilo_napake" id="napaka-ime"></span> <!-- span bo prostor kjer se bodo izpisale napake -->
|
||||
</div>
|
||||
<label for="email">E-poštni naslov</label>
|
||||
<div class="vnos_rezervacija">
|
||||
<input type="email" id="email" name="email"
|
||||
placeholder="neza.novak@primer.si" required>
|
||||
<span class="sporocilo_napake" id="napaka-email"></span>
|
||||
</div>
|
||||
<label for="telefon-st">Telefonska številka</label>
|
||||
<div class="vnos_rezervacija">
|
||||
<input type="tel" id="telefon-st" name="telefon-st"
|
||||
placeholder="040 123 456" required>
|
||||
<span class="sporocilo_napake" id="napaka-telefon"></span>
|
||||
</div>
|
||||
Priložnost <br>
|
||||
<div class="opcije">
|
||||
<div class="opcije_radio">
|
||||
<input type="radio" id="brez" name="priloznost" value="brez">
|
||||
<label for="brez">Brez</label>
|
||||
</div>
|
||||
<div class="opcije_radio">
|
||||
<input type="radio" id="rojstni-dan" name="priloznost" value="rojstni-dan">
|
||||
<label for="rojstni-dan">Rojstni dan</label>
|
||||
</div>
|
||||
<div class="opcije_radio">
|
||||
<input type="radio" id="obletnica" name="priloznost" value="obletnica">
|
||||
<label for="obletnica">Obletnica</label>
|
||||
</div>
|
||||
<div class="opcije_radio">
|
||||
<input type="radio" id="poslovno-srecanje" name="priloznost" value="poslovno-srecanje">
|
||||
<label for="poslovno-srecanje">Poslovno srečanje</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset class="field_rezervacija">
|
||||
<legend>Dodatne želje:</legend>
|
||||
Posebne omejitve <br>
|
||||
<div class="opcije">
|
||||
<div class="opcije_checkbox">
|
||||
<input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan">
|
||||
<label for="vegan">Vegansko</label>
|
||||
</div>
|
||||
<div class="opcije_checkbox">
|
||||
<input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan">
|
||||
<label for="vegetarijan">Vegetarjansko</label>
|
||||
</div>
|
||||
<div class="opcije_checkbox">
|
||||
<input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten">
|
||||
<label for="gluten">Brez glutena</label>
|
||||
</div>
|
||||
<div class="opcije_checkbox">
|
||||
<input type="checkbox" id="laktoza" name="posebne-omejitve" value="laktoza">
|
||||
<label for="laktoza">Brez laktoze</label>
|
||||
</div>
|
||||
</div>
|
||||
Opombe
|
||||
<br>
|
||||
<textarea id="opombe" placeholder="Npr. potrebujete stolček za otroka, ..." name="opombe" rows="5" cols="50" ></textarea>
|
||||
<br>
|
||||
<div class="pogoji_uporabe"> <!-- v js se pogoji preimenujejeo v soglasje -->
|
||||
<input type="checkbox" id="pogoji" name="pogoji" value="da" required>
|
||||
<label for="pogoji">Strinjam se z obdelavo osebnih podatkov</label>
|
||||
<span class="sporocilo_napake" id="napaka-pogoji"></span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br><br>
|
||||
<input class="gumb_osnovni_obratno" type="submit" value="Oddaja rezervacije">
|
||||
<input class="gumb_manj" type="reset" value="Ponastavi">
|
||||
</form>
|
||||
<div id="potrditev-rezervacije" class="potrditev_rezervacije" hidden></div> <!-- hidden da ostane skrit ko se stran odpre oz dokler ga ne potrebujem -->
|
||||
<br><br>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
Za prste obliznit<br>
|
||||
<i class="fa-solid fa-location-dot"></i>Tomaž nad Vojnikom 18a,3212 Vojnik <br>
|
||||
<i class="fa-solid fa-phone"></i>Telefon:<a href="tel:+072727777"> 07 272 77 77</a> <br>
|
||||
<i class="fa-solid fa-envelope"></i>E-pošta:<a href="mailto:info@zaobliznitprste.si">info@zaobliznitprste.si </a>
|
||||
</address>
|
||||
<p>© 2026 Iva Friedrich</p>
|
||||
</footer>
|
||||
<script src="js/rezervacija.js"></script>
|
||||
<script src="js/navigacija.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 2.9 MiB |