<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foodi 1.0</title>
<style>
:root {
--primary-color:#9c9c9e;
--secondary-color:white;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--border-radius: 8px;
--transition-speed: 0.3s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px; /* 1rem = 16px */
}
body {
font-family: 'Trebuchet MS', sans-serif;
background: #ffffff;
padding: var(--spacing-lg);
line-height: 1.6;
}
/* Główny baner strony */
.banner {
display: flex;
flex-wrap: wrap;
gap: 0;
border-radius: 20px;
overflow: hidden;
}
.banner img {
flex: 0 0 100%;
position: relative;
overflow: hidden;
}
.banner img img {
width: 100%;
height: 100%;
object-fit: cover; /* najważniejsze – przycina obrazek, zachowując proporcje */
display: block;
filter: brightness(70%);
transition: transform 1s ease, filter 1s ease;
}
/* style menu bocznego */
#sidebar {
list-style-type: none;
display:block;
position: fixed;
left: -250px; /* ukryty na początku */
top: 0;
width: 250px;
height: 100%;
background-color: #ffffff;
color: white;
overflow-x: hidden;
transition: left 0.4s ease; /* płynne wysuwanie */
padding-top: 60px;
z-index: 1000;
}
#sidebar.active {
left: 0;
}
/* Menu Items */
#sidebar li {
position: relative;
border: none;
color: #a23939;
padding: 15px 32px;
text-align: left;
font-size: 18px;
font-weight: bold;
text-decoration: none;
display: inline-block;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Menu Links */
#sidebar li a {
display: block;
padding: 15px 20px;
color: #a23939;
text-decoration:none;
transition: background-color 0.3s ease;
}
/* Efekt Hover*/
#sidebar li a:hover {
background-image: -moz-linear-gradient(to top, #701a1a, #832b2b);
color: #ffffff;
}
#toggleBtn {
position: fixed;
top: 15px;
left: 15px;
background-image: -moz-linear-gradient(to top, #701a1a, #832b2b);
color: white;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
z-index: 1001;
}
.content {
display: grid;
flex: 1; /* zajmuje resztę szerokości */
background-color: #f5f5f5;
padding: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
gap: 10px;
}
.container {
background-image: -moz-linear-gradient(to top, #701a1a, #832b2b);
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: block ;
padding: 20px 40px;
overflow: hidden;
justify-content: center;
}
/* Responsywny grid pattern dla galerii */
.responsive-grid {
display: flex;
flex-wrap: wrap;
border-radius: 20px;
overflow: hidden;
}
.responsive-grid-img {
flex: 0 0 33.33%;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
cursor: pointer; /* żeby było widać, że można najechać */
}
/* Styl samego obrazka */
.responsive-grid-img img {
width: 100%;
height: 100%;
object-fit: cover; /*przycina obrazek, zachowuje proporcje*/
display: block;
/*filter: brightness(70%);*/
transition: transform 1s ease, filter 1s ease;
}
/* Overlay (warstwa z tekstem) */
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0; /* domyślnie ukryte */
transition: opacity 0.4s ease;
font-size: 1.2rem;
text-align: center;
padding: 10px;
}
.responsive-grid-img:hover img {
transform: scale(1.15);
/*filter: brightness(100%);*/
}
.responsive-grid-img:hover .overlay {
opacity: 1; /* pokazuje tekst */
}
@media (max-width: 900px) {
.responsive-grid-img {
flex: 0 0 50%; /* 2 w rzędzie */
}
}
@media (max-width: 600px) {
.responsive-grid-img {
flex: 0 0 100%; /* 1 w rzędzie */
}
}
/* Czcionki */
h2 {
color: #ffffff;
text-align: center;
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-xl);
}
h3 {
color: #ffffff;
text-align: center;
margin-bottom: var(--spacing-xl);
}
p {
color: #ffffff;
text-align: center;
margin-bottom: var(--spacing-xl);
}
</style>
</head>
<body>
<!--główny baner strony -->
<div class="banner" id="main-banner">
<img src="/my/images/banner1.png" class="active"
alt="Foodi - banner1"
loading="eager"
fetchpriority="high">
</div>
<!--Sidebar-->
<div>
<aside class="sidebar" id="main-sidebar"></aside>
<button id="toggleBtn">☰ Menu</button>
<div id="sidebar">
<ul class="sidebar">
<li><a href="#about-us">🌮 O Foodi</a></li>
<li><a id="loginBtn" onclick="promptLogin()">🔑 Zaloguj się</a></li>
<li><a href="#section2">❤️ Polecane</a></li>
<li><a href="#help">❔ FAQ</a></li>
</ul>
<hr style="margin: 20px 0; border: none; border-top: 1px solid #ecf0f1;">
<p style="font-size: 14px; color: #7f8c8d; margin-bottom: 0;">
Strona w budowie!<br>
Może się psuć ;_;
</p>
</div>
</aside>
<!--Layout - główne treści-->
<main class="content">
<div class="container" id="main-container">
<section>
<!-- Responsywny grid pattern -->
<div class="section">
<div class="responsive-grid">
<div class="responsive-grid-img">
<img src="/my/images/coffe1.jpg">
<div class="overlay">Kawiarnie</div>
</div>
<div class="responsive-grid-img">
<img src="/my/images/food3.jpg">
<div class="overlay">Restauracje</div>
</div>
<div class="responsive-grid-img">
<img src="/my/images/product1.jpg">
<div class="overlay">Produkty</div>
</div>
</div>
</div>
</section>
</div>
<section id="about-us">
<div class="container">
<h2 id="about-us">O Foodi</h2>
<h3>Recenzuj i dziel się opiniami!</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</section>
<section id="help">
<div class="container">
<h2>FAQ</h2>
<h3>Najczęściej zadawane pytania:</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</section>
</main>
</div>
<!-- Footer-->
<footer>
<p style="color: #000000; text-align: right;"><small>© 2025 Foodi. Wszystkie prawa zastrzeżone.</small></p>
</footer>
<script>
//Rozwiń/zwiń Menu//
const toggleBtn = document.getElementById("toggleBtn");
const sidebar = document.getElementById("sidebar");
toggleBtn.addEventListener("click", () => {
sidebar.classList.toggle("active"); // przełącza widoczność//
});
//okienko login//
function promptLogin() {
const box = document.createElement("div");
box.style.position = "fixed";
box.style.top = "50%";
box.style.left = "50%";
box.style.transform = "translate(-50%, -50%)";
box.style.background = "#832b2b";
box.style.padding = "20px";
box.style.border = "2px solid #333";
box.style.borderRadius = "10px";
box.innerHTML = `
<h3>Zaloguj się</h3>
<form id="loginForm" method="POST">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"
placeholder="twó[email protected]"
pattern= "/^[^\s@]+@[^\s@]+\.[^\s@]+$/"
title="Poprawny adres email"
required>
<br><br>
<label for="password">Hasło:</label><br>
<input type="password" id="password" name="password"
placeholder="********"
minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Minimum 8 znaków, wielka litera, cyfra"
required>
<br><br>
<button type="submit">Zaloguj</button>
</form>
<br>
<button id="register">Nie masz jeszcze konta?</button><br>
<br>
<button id="close">Zamknij</button>
`;
document.body.appendChild(box);
const btnClose = document.getElementById("close");
btnClose.addEventListener("click", () => {
box.remove();
});
const btnRegister = document.getElementById("register");
btnRegister.addEventListener("click", () => {
box.remove();
promptRegister();
})
}
//okienko rejestracji//
function promptRegister() {
const box2 = document.createElement("div");
box2.style.position = "fixed";
box2.style.top = "50%";
box2.style.left = "50%";
box2.style.transform = "translate(-50%, -50%)";
box2.style.background = "#832b2b";
box2.style.padding = "20px";
box2.style.border = "2px solid #333";
box2.style.borderRadius = "10px";
box2.innerHTML = `
<h3>Zarejestruj się</h3>
<form id="registerForm" method="POST">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"
placeholder="twó[email protected]"
minlength="3" maxlength="20"
pattern= /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
title="Poprawny adres email"
required>
<br><br>
<label for="password">Hasło:</label><br>
<input type="password" id="password" name="password"
minlength="8"
placeholder="********"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Minimum 8 znaków, wielka litera, cyfra"
required>
<br><br>
<button type="submit">Załóż konto</button>
</form>
<br>
<button id="return-login">Masz już konto?</button><br>
<br>
<button id="close">Zamknij</button>
`;
document.body.appendChild(box2);
const btnClose = document.getElementById("close");
btnClose.addEventListener("click", () => {
box2.remove();
});
const btnRegister = document.getElementById("return-login");
btnRegister.addEventListener("click", () => {
box2.remove();
promptLogin();
})
}
</script>
</body>
</html>
