Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
49d1c59242 | ||
|
|
88df5f4d7d | ||
|
|
58c4ea0799 | ||
|
|
5fbfe528fe | ||
|
|
c36218287e | ||
|
|
f1c122265b | ||
|
|
04e19013c4 | ||
|
|
e8d11744f0 | ||
|
|
f78a713943 | ||
|
|
f805380a73 | ||
|
|
b168feafbb | ||
|
|
dfc4a1d811 | ||
|
|
b19ba74cb9 | ||
|
|
8bfb212f73 | ||
|
|
754fe893d1 | ||
|
|
c43063dc32 | ||
|
|
85750602f3 | ||
|
|
8ec40dcebe | ||
|
|
58d125b6fd | ||
|
|
22c4f3d5c4 | ||
|
|
8dd3f3529f | ||
|
|
5108bf789e | ||
|
|
1444a0f5d8 | ||
|
|
b4516210fd | ||
|
|
ff6ecbd7a8 | ||
|
|
fe4b595989 | ||
|
|
1e25ed301f | ||
|
|
55aab8fbcb | ||
|
|
a2c2f97a37 | ||
|
|
7d760c59eb |
@@ -0,0 +1,15 @@
|
||||
Uporaba umetne inteligence pri izdelavi spletne strani
|
||||
|
||||
Pri izdelavi spletne strani Za prste obliznit sem umetno inteligenco uporabljala predvsem kot pomoč pri razumevanju kode, odpravljanju napak in iskanju ustreznih rešitev za posamezne funkcionalnosti spletne strani.
|
||||
|
||||
Najpogosteje sem jo uporabljala pri odpravljanju napak, ki jih je zaznal HTML validator. Sporočila o napakah sem posredovala umetni inteligenci, ki mi je pojasnila njihov vzrok in predlagala ustrezne popravke. Tako sem na primer odpravila napake pri strukturi HTML tabel, nepravilno zapisanih komentarjih in uporabi posameznih elementov.
|
||||
|
||||
Umetno inteligenco sem uporabljala tudi za razlago HTML in CSS elementov ter lastnosti, ki sem jih našla v dokumentaciji W3Schools. Zanimala me je predvsem njihova funkcija in vpliv na prikaz spletne strani. Med drugim sem pridobila dodatne razlage lastnosti display: flex, display: grid, justify-content, align-items, position: sticky, z-index, box-sizing in grid-template-columns. Pomagala mi je tudi pri razumevanju relativnih poti do datotek in prilagajanju elementov različnim velikostim zaslonov.
|
||||
|
||||
Pri programiranju v JavaScriptu sem umetno inteligenco uporabljala predvsem za razlago delovanja posameznih delov kode in boljše razumevanje njihove uporabe. Pri izdelavi obrazca za rezervacijo sem si z njeno pomočjo razjasnila, kako delujejo preverjanje vnesenih podatkov, prikazovanje sporočil o napakah, oblikovanje povzetka rezervacije in ponastavitev obrazca. Prav tako mi je pomagala razumeti delovanje kalkulatorja za samodejno preračunavanje količin sestavin glede na izbrano število porcij. Pri tem sem pridobila dodatna pojasnila o uporabi funkcij, dogodkov, atributov data-* in metod, kot so querySelector(), querySelectorAll(), addEventListener() in forEach().
|
||||
|
||||
Umetna inteligenca mi ni služila zgolj za pridobivanje končnih rešitev, temveč predvsem za postopno razumevanje njihovega delovanja. Pogosto sem zahtevala dodatne razlage posameznih vrstic kode, da sem razumela, zakaj je določena rešitev ustrezna in kako jo lahko uporabim v svojem projektu.
|
||||
|
||||
Umetno inteligenco sem tako uporabljala kot dopolnilno učno orodje poleg dokumentacije W3Schools, predvsem za razlago nejasnosti, preverjanje pravilnosti kode in pomoč pri reševanju konkretnih programerskih težav.
|
||||
|
||||
Za izpis tega poročila sem si pomagala z Chat GPT.
|
||||
@@ -1,295 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="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="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="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>
|
||||
<section class="jedilnik_kategorija">
|
||||
<h2>Predjedi</h2>
|
||||
<div class="tabela_scroll">
|
||||
<table>
|
||||
<caption>Predjedi</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Jed</th>
|
||||
<th>Opis</th>
|
||||
<th>Alergeni</th>
|
||||
<th>Cena</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Italjanske bruschette</td>
|
||||
<td>Hrustljavo pečen kruh s svežim paradižnikom, baziliko, česnom in olivnim oljem.</td>
|
||||
<td>gluten</td>
|
||||
<td>5,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Patatas bravas</td>
|
||||
<td>Hrustljav pečen krompir s pikantno paradižnikovo omako in nežnim česnovim aiolijem.</td>
|
||||
<td>/</td>
|
||||
<td>5,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mediteranski mezze</td>
|
||||
<td>Izbor humosa, tzatzikija, oliv in sveže zelenjave s toplim pita kruhom.</td>
|
||||
<td>gluten</td>
|
||||
<td>7,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vietnamski poletni zavitki</td>
|
||||
<td>Riževi zavitki s kozicami, svežo zelenjavo in zelišči, postreženi z arašidovo omako.</td>
|
||||
<td>morski sadeži, oreščki, soja</td>
|
||||
<td>7,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gyoze</td>
|
||||
<td>Japonski polnjeni žepki s hrustljavo zapečenim dnom, postreženi s sojimo omako za pomakanje.</td>
|
||||
<td>gluten, jajca, soja</td>
|
||||
<td>6,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nachosi za deljenje</td>
|
||||
<td>Tortilja čips s toplim sirom, jalapeni, salso, guacamolejem in kislo smetano.</td>
|
||||
<td>jajca, gluten, laktoza</td>
|
||||
<td>7,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sigara boregui</td>
|
||||
<td>Hrustljavi zavitki iz tankega testa s slanim sirom in zelišči, postreženi z jogortovo omako.</td>
|
||||
<td>gluten, laktoza</td>
|
||||
<td>6,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Indijske samose</td>
|
||||
<td>Zlato zapečeni žepki, polnjeni z začinjenim krompirjem in grahom, z metino omako.</td>
|
||||
<td>gluten, jajca</td>
|
||||
<td>5,90€</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section class="jedilnik_kategorija">
|
||||
<h2>Glavne jedi</h2>
|
||||
<div class="tabela_scroll">
|
||||
<table>
|
||||
<caption>Glavne jedi</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Jed</th>
|
||||
<th>Opis</th>
|
||||
<th>Alergeni</th>
|
||||
<th>Cena</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mučkalica</td>
|
||||
<td>Sočni koščki mesa v bogati paradižnikovi omaki s papriko in čebulo, postreženi s pečenim krompirjem, ali prilogo po izbiri.</td>
|
||||
<td>gluten</td>
|
||||
<td>13,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chicken curry</td>
|
||||
<td>Nežno piščančje meso v kremni paradižnikovi omaki z aromatičnii indijskimi začimbami, postreženo z basmatim rižem, ali drugo prilogo po izbiri.</td>
|
||||
<td>oreščki, laktoza</td>
|
||||
<td>14,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lasagna al forno</td>
|
||||
<td>Plasti testenin z bogatim mesnatim ragujem, nežnim bešamelom in zapečeno skorijco iz parmezana.</td>
|
||||
<td>gluten, laktoza</td>
|
||||
<td>13,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pizza Diavola</td>
|
||||
<td>Napolitansko testo z bogato paradižnikovo omako, mozzarelo, pikantno salamo in ščepcem čilija, pečeno do popolno hrustljavega roba.</td>
|
||||
<td>gluten, laktoza</td>
|
||||
<td>14,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paella</td>
|
||||
<td>Žafranov riž z morskimi sadeži, česnom in svežimi zelišči, ki v vsak grižljaj prinesejo okus Sredozemlja.</td>
|
||||
<td>morski sadeži</td>
|
||||
<td>17,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dunajski zrezek</td>
|
||||
<td>Zalato pečen paniran zrezek z limono in krompirejvo ali drugo prilogo po izbiri.</td>
|
||||
<td>jajaca, gluten</td>
|
||||
<td>14,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Piščanec teriyaki</td>
|
||||
<td>Zapečen piščanec v sladko-slani omaki z rižem, hrustljavo zelenjavo in sezamom.</td>
|
||||
<td>oreščki, jajca</td>
|
||||
<td>14,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Grška mussaka</td>
|
||||
<td>Plasti krompirja, jajčevcev in začinjenega mletega mesa, prekrite s kremnim bešamelom in zapečene do zlate rjave barve.</td>
|
||||
<td>gluten, laktoza</td>
|
||||
<td>13,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Piščančji fajitas</td>
|
||||
<td>Začinjeni koščki piščanca s papriko in čebulo, postreženi s toplimi tortiljami, salso in guacamolejem.</td>
|
||||
<td>gluten</td>
|
||||
<td>15,50€</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section class="jedilnik_kategorija">
|
||||
<h2>Priloge</h2>
|
||||
<p><b>Prilagodi si svoj krožnik! </b>Prilogo ob glavni jedi lahko zamenjate brez doplačila. Za dodatne priloge pa veljajo cene po ceniku.</p>
|
||||
<div class="tabela_scroll">
|
||||
<table>
|
||||
<caption>Priloge</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Jed</th>
|
||||
<th>Opis</th>
|
||||
<th>Alergeni</th>
|
||||
<th>Cena</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Basmati riž</td>
|
||||
<td>Rahla, dišeča riževa priloga, odlična za curry in azijske jedi.</td>
|
||||
<td>/</td>
|
||||
<td>2,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pečen krompir</td>
|
||||
<td>Zlato zapečen krompir z rožmarinom, česnom in izbranimi začimbami.</td>
|
||||
<td>/</td>
|
||||
<td>3,00€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hrustljav pomfri</td>
|
||||
<td>Zlato pečen krompirček s hrustljavo skorjico in mehko sredico.</td>
|
||||
<td>/</td>
|
||||
<td>3,00€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Domač kruh</td>
|
||||
<td>Sveže pečen kruh s hrustljavo skorjico, idealen za pomakanje v omake.</td>
|
||||
<td>gluten</td>
|
||||
<td>2,00€</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section class="jedilnik_kategorija">
|
||||
<h2>Sladice</h2>
|
||||
<div class="tabela_scroll">
|
||||
<table>
|
||||
<caption>Sladice</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Jed</th>
|
||||
<th>Opis</th>
|
||||
<th>Alergeni</th>
|
||||
<th>Cena</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Panna cotta</td>
|
||||
<td>Nežna vaniljeva smetana z osvežilnim prelivom iz gozdnih sadežev.</td>
|
||||
<td>laktoza</td>
|
||||
<td>5,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Baklava</td>
|
||||
<td>Plasti tankega hrustljavega testa z oreščki, prelite s sladkim sirupom.</td>
|
||||
<td>oreščki, gluten</td>
|
||||
<td>4,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tiramisu</td>
|
||||
<td>Klasična kombinacija kave, rahlemascarponejeve kreme in kakava.</td>
|
||||
<td>laktoza, gluten, oreščki</td>
|
||||
<td>5,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pohan sladoled</td>
|
||||
<td>Hrustljava zlata skorjica, ki skriva hladno vaniljevo sredjico, s čokoladnim prelivom.</td>
|
||||
<td>gluten, jajce, laktoza</td>
|
||||
<td>6,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Crepes</td>
|
||||
<td>Tanke francoske palačinke po izbiri s čokoladnim namazom, marmelado ali limono in sladkorjem.</td>
|
||||
<td>gluten, jajca, laktoza</td>
|
||||
<td>4,90€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabolčni zavitek</td>
|
||||
<td>Dišeč zvitek z jabolkami, cimetom in rozinami, postrežen topel z vaniljevim sladoledom.</td>
|
||||
<td>gluten, jajca, laktoza</td>
|
||||
<td>5,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Čokoladni suffle</td>
|
||||
<td>Topel čokoladni kolač s tekočo sredjico in kepico vaniljeva sladoleda.</td>
|
||||
<td>gluten, jajca, laktoza, oreščki</td>
|
||||
<td>6,50€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loukoumades</td>
|
||||
<td>Majhni zlato ocvrti grški miškasti gižljaji, prelit z medom in posuti s cimetom.</td>
|
||||
<td>jajca, gluten</td>
|
||||
<td>5,90€</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
@@ -10,6 +10,8 @@
|
||||
--barva-dodatna: #CE9550;
|
||||
--barva-dodatna2:#F3E0C8;
|
||||
--barva-dodatna3:#F8EFE1;
|
||||
--barva-gumb3-besedilo: #F0E5D2;
|
||||
|
||||
|
||||
--barva-kartice: #FFF9F0;
|
||||
--barva-besedilo-na-temnem: #F0E5D2;
|
||||
@@ -234,7 +236,7 @@ footer p {
|
||||
var(--barva-hero-prekrivna),
|
||||
var(--barva-hero-prekrivna) /*da je zmanjšana prosojnost slike ozadja, da tekst bolj "pade v oči" */
|
||||
),
|
||||
url("restavracija.png");
|
||||
url("../slike/restavracija.png");
|
||||
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@@ -403,12 +405,12 @@ footer p {
|
||||
|
||||
/* kategorije jedilnika */
|
||||
|
||||
.jedilnik_kategorija {
|
||||
#jedilnik {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.jedilnik_kategorija h2,
|
||||
.jedilnik_kategorija p {
|
||||
#jedilnik h2,
|
||||
#jedilnik p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -424,9 +426,44 @@ footer p {
|
||||
}
|
||||
|
||||
/* Preprečimo, da bi vsebina raztegnila stran */
|
||||
.jedilnik_page,
|
||||
.jedilnik_kategorija {
|
||||
.jedilnik_page, #jedilnik {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filtri_jedilnika { /*da se prikazejo v vrsti */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.filter_gumb {
|
||||
padding: 0.85rem 1.5rem;
|
||||
border-radius: var(--zaobljenost);
|
||||
border: 0.15rem solid var(--barva-besedilo);
|
||||
outline: none;
|
||||
color: var(--barva-besedilo);
|
||||
text-decoration: none;
|
||||
background-color: var(--barva-ozadje);
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.filter_gumb:hover {
|
||||
background-color:var(--barva-kartice);
|
||||
}
|
||||
|
||||
.filter_gumb.aktiven {
|
||||
background-color: var(--barva-poudarek);
|
||||
color: var(--barva-besedilo-na-temnem);
|
||||
outline-color: var(--barva-poudarek);
|
||||
}
|
||||
|
||||
#jedilnik {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -611,7 +648,7 @@ footer p {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--zaobljenost);
|
||||
color: var(--barva-besedilo-na-temnem);
|
||||
color: var(--barva-gumb3-besedilo);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
background-color: var(--barva-besedilo);
|
||||
@@ -674,6 +711,23 @@ footer p {
|
||||
color: var(--barva-besedilo);
|
||||
}
|
||||
|
||||
/* Vnosno polje zavzame celotno širino */
|
||||
.vnos_rezervacija input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sporočilo o napaki */
|
||||
.sporocilo_napake {
|
||||
color: #c62828;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Rdeča obroba pri napačnem vnosu */
|
||||
.field_rezervacija input.napacno {
|
||||
border: 0.15rem solid #c62828;
|
||||
}
|
||||
|
||||
|
||||
.opcije {
|
||||
display: flex ;
|
||||
@@ -733,6 +787,18 @@ footer p {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.potrditev_rezervacije:not([hidden]) {
|
||||
background-color: var(--barva-kartice);
|
||||
border-left: 0.3rem solid var(--barva-poudarek);
|
||||
border-radius: var(--zaobljenost);
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.potrditev_rezervacije[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* on nas, besedilo in slika restavracije*/
|
||||
.nasa_zgodba_grid {
|
||||
display: grid;
|
||||
@@ -790,6 +856,13 @@ footer p {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.zemljevid {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
height: 350px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
/* tablica 600px do 1000px */
|
||||
@media (min-width: 600px) and (max-width: 1000px) {
|
||||
/* Navigacija ostane vidna in se po potrebi prelomi. */
|
||||
@@ -833,6 +906,16 @@ footer p {
|
||||
text-align: center;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.filtri_jedilnika {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.zemljevid {
|
||||
width: calc(100% - 2rem);
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
/* telefon do 600px */
|
||||
@@ -958,6 +1041,13 @@ footer p {
|
||||
text-align: center; /* Besedilo poravnamo na sredino */
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.filtri_jedilnika {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* dark mode, samo spremenjene spremenljivke css */
|
||||
@@ -970,6 +1060,7 @@ footer p {
|
||||
--barva-dodatna2: #44372b;
|
||||
--barva-dodatna3: #342c25;
|
||||
--barva-kartice: #302821;
|
||||
--barva-gumb3-besedilo: #211c18;
|
||||
--barva-besedilo-na-temnem: #f4e9db;
|
||||
--barva-hero-prekrivna: rgba(15, 12, 10, 0.72);
|
||||
--barva-senca: rgba(0, 0, 0, 0.45);
|
||||
@@ -985,6 +1076,7 @@ footer p {
|
||||
.logo_dark {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* omejeno gibanje: ni smooth scrolla in drugih animaciji */
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
<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>
|
||||
@@ -10,13 +10,13 @@
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<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 >
|
||||
</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>
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="jedi_grid">
|
||||
<article class="jedi_card">
|
||||
<figure class="card_slika">
|
||||
<img src="muckalica.png" alt="mučkalica">
|
||||
<img src="slike/muckalica.png" alt="mučkalica">
|
||||
<span class="znacka_novo">Novo</span>
|
||||
<figcaption>Mučkalica</figcaption>
|
||||
</figure>
|
||||
@@ -55,7 +55,7 @@
|
||||
</article>
|
||||
<article class="jedi_card">
|
||||
<figure class="card_slika">
|
||||
<img src="pizza_diavola.png" alt="pizza diavola">
|
||||
<img src="slike/pizza_diavola.png" alt="pizza diavola">
|
||||
<figcaption>Pizza diavola</figcaption>
|
||||
</figure>
|
||||
<div class="card_vsebina">
|
||||
@@ -65,7 +65,7 @@
|
||||
</article>
|
||||
<article class="jedi_card">
|
||||
<figure class="card_slika">
|
||||
<img src="paella.png" alt="Paella">
|
||||
<img src="slike/paella.png" alt="Paella">
|
||||
<figcaption>Paella</figcaption>
|
||||
</figure>
|
||||
<div class="card_vsebina">
|
||||
@@ -81,7 +81,7 @@
|
||||
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>
|
||||
<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>
|
||||
@@ -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,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();
|
||||
});
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
<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>
|
||||
@@ -11,8 +11,8 @@
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<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">
|
||||
@@ -45,15 +45,17 @@
|
||||
</p>
|
||||
</div>
|
||||
<figure>
|
||||
<img src="restavracija.png" alt="slika restavracije">
|
||||
<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>
|
||||
<tr>
|
||||
<th>Dan</th>
|
||||
<th>Delavnik</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -93,8 +95,18 @@
|
||||
3212 Vojnik<br>
|
||||
Slovenija
|
||||
</i></p>
|
||||
<iframe width="400px" height="350" src="https://www.openstreetmap.org/export/embed?bbox=15.325708128511907%2C46.29054746034702%2C15.329828001558782%2C46.2928901216514&layer=mapnik&marker=46.291718803524695%2C15.327768065035343" style="border: 1px solid black"></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>
|
||||
<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>
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
<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>
|
||||
@@ -10,12 +10,12 @@
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<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="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 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>
|
||||
@@ -37,11 +37,11 @@
|
||||
<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" >
|
||||
<article class="recepti_jedi" data-osnovne-porcije="4" >
|
||||
<h2 id="muckalica">Mučkalica </h2>
|
||||
<div class="recepti_grid">
|
||||
<figure class="recepti_slika">
|
||||
<img src="muckalica.png" alt="mučkalica">
|
||||
<img src="slike/muckalica.png" alt="mučkalica">
|
||||
<figcaption>Mučkalica</figcaption>
|
||||
</figure>
|
||||
<div class="o_receptu">
|
||||
@@ -54,23 +54,23 @@
|
||||
cca. 70min
|
||||
</li>
|
||||
<li><b>Število porciji</b> <br>
|
||||
4 porcije
|
||||
<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>800g svinjskega vratu ali plečeta</li>
|
||||
<li>3 večje rdeče paprike</li>
|
||||
<li>2 srednje veliki čebuli</li>
|
||||
<li>3 stroki česnja</li>
|
||||
<li>400g sesekljanega paradižnika iz pločevinke</li>
|
||||
<li>2 žlici paradižnikove mezge</li>
|
||||
<li>3 žlice olja</li>
|
||||
<li>150 ml vode</li>
|
||||
<li>1 žlička sladke mlete paprike</li>
|
||||
<li>pol žličke dimljene paprike (po želji)</li>
|
||||
<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>
|
||||
@@ -110,11 +110,11 @@
|
||||
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
|
||||
</article>
|
||||
<br>
|
||||
<article class="recepti_jedi">
|
||||
<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="pizza_diavola.png" alt="pizza diavola">
|
||||
<img src="slike/pizza_diavola.png" alt="pizza diavola">
|
||||
<figcaption>Pizza diavola</figcaption>
|
||||
</figure>
|
||||
<div class="o_receptu">
|
||||
@@ -127,21 +127,21 @@
|
||||
cca. 13-25ur
|
||||
</li>
|
||||
<li><b>Število pic</b> <br>
|
||||
4 pice
|
||||
<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>600g moke tipa 00</li>
|
||||
<li>390g hladne vode</li>
|
||||
<li>18g soli</li>
|
||||
<li>1g suhega instant kvasa (ali približno 3g svežega) </li>
|
||||
<li>400g olupljenih pelatov</li>
|
||||
<li>300g mozzarele za pizzo</li>
|
||||
<li>200g pikantne salame</li>
|
||||
<li>1 žlička origana</li>
|
||||
<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>
|
||||
@@ -158,7 +158,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<b>Pusti vzhajati</b>
|
||||
<p>Testo pokrij in pusti približno 1 uro pri sobni temperaturi. Nato ga razdeli na 4 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>
|
||||
<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>
|
||||
@@ -185,11 +185,11 @@
|
||||
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
|
||||
</article>
|
||||
<br>
|
||||
<article class="recepti_jedi">
|
||||
<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="paella.png" alt="paella">
|
||||
<img src="slike/paella.png" alt="paella">
|
||||
<figcaption>Paella</figcaption>
|
||||
</figure>
|
||||
<div class="o_receptu">
|
||||
@@ -202,25 +202,25 @@
|
||||
cca. 50min
|
||||
</li>
|
||||
<li><b>Število porciji</b> <br>
|
||||
4 porcije
|
||||
<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>320g riža za paello (npr. bomba ali podobna kratkozrnata sorta)</li>
|
||||
<li>300g očiščenih kozic</li>
|
||||
<li>300g školjk, dobro očiščenih</li>
|
||||
<li>200g lignjev, narezanih na kolobarje</li>
|
||||
<li>1 srednje velika čebula</li>
|
||||
<li>1 rdeča paprika</li>
|
||||
<li>3 stroki česna</li>
|
||||
<li>250g sesekljanega paradižnika</li>
|
||||
<li>900g ribje jušne osnove (približno; odvisno od riža)</li>
|
||||
<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>1 žlička sladke mlete paprike</li>
|
||||
<li>3 žlice olivnega olja</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>
|
||||
@@ -274,7 +274,7 @@
|
||||
</address>
|
||||
<p>© 2026 Iva Friedrich</p>
|
||||
</footer>
|
||||
<script src="js/jedilnik.js"></script>
|
||||
<script src="js/recepti.js"></script>
|
||||
<script src="js/navigacija.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,8 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
<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">
|
||||
@@ -11,8 +12,8 @@
|
||||
<header class="site_header">
|
||||
<nav class="nav_bar">
|
||||
<a class="logo" href="index.html">
|
||||
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
|
||||
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
|
||||
<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">
|
||||
@@ -48,16 +49,26 @@
|
||||
</p>
|
||||
<h2>Rezervacija</h2>
|
||||
<p>Izpolnite podatke in pošljite zahtevo za restavracijo.</p>
|
||||
<form method="get">
|
||||
<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>
|
||||
|
||||
Datum obiska
|
||||
<input type="date" id="datum-obiska" name="datum-obiska" required>
|
||||
Ura obiska
|
||||
<input type="time" id="ura-obiska" name="ura-obiska" min="10:00" max="21:00" required>
|
||||
Število oseb
|
||||
<input type="number" min="1" max="11" id="stevilo-oseb" name="stevilo-oseb" required>
|
||||
<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>
|
||||
@@ -67,12 +78,24 @@
|
||||
</fieldset>
|
||||
<fieldset class="field_rezervacija">
|
||||
<legend>Osebni podatki:</legend>
|
||||
Ime in priimek
|
||||
<input type="text" id="ime-priimek" name="ime-priimek" placeholder="Neža Novak" required>
|
||||
E-poštni naslov
|
||||
<input type="email" id="email" name="email" placeholder="neza.novak@primer.si" required>
|
||||
Telefonska številka
|
||||
<input type="tel" id="telefon-st" name="telefon-st" placeholder="022-333-444" pattern="[0-9]{3}[0-9]{3}[0-9]{3}" required>
|
||||
<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">
|
||||
@@ -120,15 +143,17 @@
|
||||
<br>
|
||||
<textarea id="opombe" placeholder="Npr. potrebujete stolček za otroka, ..." name="opombe" rows="5" cols="50" ></textarea>
|
||||
<br>
|
||||
<div class="pogoji_uporabe">
|
||||
<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>
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |