<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio Adrianny Pytlarz, fotografki specjalizującej się w fotografii analogowej i cyfrowej. Zobacz moje prace, sprzęt i pasję.">
<meta name="author" content="Adzianna Pytlarz">
<title>Fotografia Analogowa i Cyfrowa - Portfolio (PD5-6)</title>
<style>
:root {
--primary-color: #D90368;
--secondary-color: #FDF4F8;
--text-color: #333333;
--light-text-color: #FFFFFF;
--border-color: #E0E0E0;
--accent-color: #FFBFB5;
--border-radius: 8px;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--secondary-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
p, li, dd, dt, td, th {
font-size: 1rem;
margin-bottom: 1rem;
}
h1, h2, h3 {
color: var(--primary-color);
margin-bottom: 1rem;
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
opacity: 0.7;
}
hr {
border: 0;
height: 1px;
background-color: var(--border-color);
margin: 2.5rem 0;
}
header {
background-color: var(--light-text-color);
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--box-shadow);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
margin-bottom: 0;
font-size: 1.75rem;
}
nav ul {
list-style: none;
display: flex;
gap: 1rem;
}
nav a {
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
font-weight: 500;
white-space: nowrap;
}
nav a:hover {
background-color: var(--secondary-color);
text-decoration: none;
}
nav a[aria-current="page"] {
background-color: var(--primary-color);
color: var(--light-text-color);
}
.breadcrumbs {
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.breadcrumbs ol {
list-style: none;
display: flex;
}
.breadcrumbs li::after {
content: '>';
margin: 0 0.5rem;
color: var(--border-color);
}
.breadcrumbs li:last-child::after {
content: '';
}
main {
padding-top: 2rem;
}
section {
padding: 2rem;
background-color: var(--light-text-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-bottom: 2rem;
}
img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
display: block;
}
#portfolio h2 + p {
margin-bottom: 1.5rem;
}
.portfolio-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.portfolio-grid article {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
}
.portfolio-grid article:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.portfolio-grid article img {
width: 100%;
border-radius: 0;
border-bottom: 1px solid var(--border-color);
}
.portfolio-grid article h3,
.portfolio-grid article p {
padding-left: 1rem;
padding-right: 1rem;
}
.portfolio-grid article h3 {
margin-top: 1rem;
}
#sprzet dt {
font-weight: bold;
margin-bottom: 0.2rem;
}
#sprzet dd {
margin-left: 1rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
}
th, td {
padding: 0.75rem;
border: 1px solid var(--border-color);
text-align: left;
}
thead th {
background-color: var(--primary-color);
color: var(--light-text-color);
}
tbody tr:nth-child(even) {
background-color: var(--secondary-color);
}
tfoot td {
text-align: center;
font-style: italic;
background-color: #f9f9f9;
}
form {
margin-top: 2rem;
}
fieldset {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
legend {
padding: 0 0.5rem;
color: var(--primary-color);
font-weight: 500;
}
form div {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.3rem;
font-weight: 500;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 1rem;
font-family: inherit;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 5px var(--accent-color);
}
input[type="checkbox"] {
margin-right: 0.5rem;
transform: translateY(2px);
}
button[type="submit"] {
background-color: var(--primary-color);
color: var(--light-text-color);
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
}
button[type="submit"]:hover {
opacity: 0.8;
/* Usunięto specyficzny hover dla przycisku logowania */
}
/* Usunięto #login-message */
.modal {
display: none;
position: fixed;
z-index: 200;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.modal:target {
display: flex;
}
.modal-content {
background-color: var(--light-text-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
width: 90%;
max-width: 400px;
position: relative;
}
/* Usunięto .modal-close */
.modal-content form {
margin-top: 1rem;
}
.modal-content fieldset {
border: none;
padding: 0;
}
.modal-content legend {
font-size: 1.5rem;
margin-bottom: 1rem;
width: 100%;
}
/* Usunięto specyficzny hover dla przycisku w modalu */
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.3rem; }
header .container {
flex-direction: column;
gap: 1rem;
}
nav ul {
flex-direction: column;
width: 100%;
}
nav li {
text-align: center;
}
nav a {
display: block;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
section {
padding: 1rem;
}
.breadcrumbs {
display: none;
}
}
</style>
</head>
<body>
<a href="#main-content" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">Przejdź do głównej treści</a>
<header>
<div class="container">
<div>
<h1>Fotografia Analogowa i cyfrowa</h1>
<p>Portfolio Adrianny Pytlarz</p>
</div>
<nav aria-label="Główna nawigacja">
<ul>
<li><a href="#o-mnie" aria-current="page">O mnie</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#sprzet">Mój sprzęt i proces</a></li>
<li><a href="#multimedia">Multimedia</a></li>
<li><a href="#kontakt">Kontakt</a></li>
<li><a href="#loginModal">Logowanie</a></li>
</ul>
</nav>
</div>
</header>
<main id="main-content">
<div class="container">
<nav aria-label="Breadcrumb" class="breadcrumbs">
<ol>
<li><a href="#">Strona główna</a></li>
<li><a href="#o-mnie" aria-current="page">O mnie</a></li>
</ol>
</nav>
<section id="o-mnie">
<h2>O mnie - magia kliszy i piksela</h2>
<article>
<p>
Witaj w moim świecie! Nazywam się Adrianna i jestem pasjonatką fotografii. Łączę dwa światy: <strong>fotografię analogową</strong> i <strong>cyfrową</strong>.
</p>
<p>
Jednocześnie doceniam precyzję i elastyczność, jaką daje mi fotografia cyfrowa. Pozwala mi ona na eksperymenty i uchwycenie chwil z idealną ostrością.
</p>
<img src="images/adrianna-portret.png" alt="Zbliżenie na twarz Adrianny Pytlarz z zielonymi oczami i kroplami deszczu na skórze.">
</article>
</section>
<hr>
<section id="portfolio">
<h2>Portfolio</h2>
<p>Kliknij na zdjęcie, aby zobaczyć powiększenie.</p>
<div class="portfolio-grid">
<article>
<h3>Portret w czerni i bieli</h3>
<p>Zdjęcie wykonane aparatem średnioformatowym...</p>
<a href="images/portret-bw-golebie.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret w czerni i bieli'">
<img src="images/portret-bw-golebie.png" alt="Czarno-białe zdjęcie kobiety stojącej w alei, otoczonej przez lecące gołębie.">
</a>
</article>
<article>
<h3>Portret miejski</h3>
<p>Mój autoportret w kolorze...</p>
<a href="images/portret-miejski-neon.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret miejski'">
<img src="images/portret-miejski-neon.png" alt="Kolorowy autoportret kobiety w okularach na tle rozmytych, neonowych świateł miasta w nocy.">
</a>
</article>
<article>
<h3>Miejski Rockstar</h3>
<p>Portret wykonany techniką długiego naświetlania.</p>
<a href="images/portret-rockstar-most.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Miejski Rockstar'">
<img src="images/portret-rockstar-most.png" alt="Kobieta w koszulce 'Rockstar' siedzi na asfalcie pod filarem mostu z graffiti, w tle widać nocne światła miasta.">
</a>
</article>
<article>
<h3>Portret studyjny</h3>
<p>Klasyczny portret w studyjnym oświetleniu.</p>
<a href="images/portret-denim-studio.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret studyjny'">
<img src="images/portret-denim-studio.png" alt="Kobieta w dżinsowej kurtce i spodniach siedzi na niebieskiej pufie w studio na jednolitym niebieskim tle.">
</a>
</article>
<article>
<h3>Na scenie</h3>
<p>Zdjęcie z koncertu uchwycone w idealnym momencie.</p>
<a href="images/portret-koncert-scena.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Na scenie'">
<img src="images/portret-koncert-scena.png" alt="Kobieta w skórzanej kurtce śpiewa na scenie do mikrofonu, w tle widać tłum i jasne światła koncertowe.">
</a>
</article>
<article>
<h3>Portret intymny (B&W)</h3>
<p>Portret czarno-biały wykonany aparatem cyfrowym.</p>
<a href="images/portret-bw-twarz.jpg" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret intymny (B&W)'">
<img src="images/portret-bw-twarz.jpg" alt="Czarno-biały, intymny portret kobiety, która trzyma dłońmi swoją twarz i patrzy prosto w obiektyw.">
</a>
</article>
<article>
<h3>Królowa</h3>
<p>Kreatywna sesja studyjna z rekwizytami.</p>
<a href="images/portret-tron-lew.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Królowa'">
<img src="images/portret-tron-lew.png" alt="Kobieta w okularach przeciwsłonecznych siedzi na złotym tronie, u jej stóp leży lew w koronie.">
</a>
</article>
<article>
<h3>Portret biznesowy</h3>
<p>Portret wizerunkowy z wykorzystaniem światła zastanego.</p>
<a href="images/portret-biznesowy-swiatlo.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret biznesowy'">
<img src="images/portret-biznesowy-swiatlo.png" alt="Kobieta w czarnym garniturze stoi oparta o betonową ścianę, oświetlona mocnym światłem z okna.">
</a>
</article>
<article>
<h3>Noc w deszczu</h3>
<p>Klimatyczny portret nocny przez szybę samochodu.</p>
<a href="images/portret-auto-deszcz.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Noc w deszczu'">
<img src="images/portret-auto-deszcz.png" alt="Kobieta patrzy przez szybę samochodu w deszczową noc, na szybie widać krople deszczu i odbicia neonów.">
</a>
</article>
<article>
<h3>Kolaż Emocji</h3>
<p>Fotomanipulacja pokazująca różne nastroje i style.</p>
<a href="images/kolaz-emocje.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Kolaż Emocji'">
<img src="images/kolaz-emocje.png" alt="Kolaż zdjęć przedstawiający kobietę w różnych pozach, strojach i nastrojach, wyłaniającą się z podartego papieru.">
</a>
</article>
</div>
</section>
<hr>
<section id="sprzet">
<h2>Mój sprzęt i proces</h2>
<p>W fotografii narzędzia mają duszę. Oto czego używam najczęściej:</p>
<dl>
<dt><strong>Canon AE-1 Program</strong></dt>
<dd>Mój wierny towarzysz, klasyczny aparat SLR na film 35mm. Idealny do fotografii ulicznej i portretów.</dd>
<dt><strong>Chinon CM-5</strong></dt>
<dd>Średnioformatowy aparat, który daje niesamowitą jakość i obraz.</dd>
<dt><strong>Sony HX300</strong></dt>
<dd>Mój aparat cyfrowy typu bridge. Niezwykle wszechstronny, idealny do uchwycenia detali z daleka dzięki potężnemu zoomowi.</dd>
</dl>
<table>
<caption>Przykładowy cennik filmów analogowych</caption>
<thead>
<tr>
<th scope="col">Nazwa Filmu</th>
<th scope="col">Typ</th>
<th scope="col">Format</th>
<th scope="col">Przykładowa cena</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kodak Portra 400</td>
<td>Kolorowy negatyw</td>
<td>35mm</td>
<td>75 PLN</td>
</tr>
<tr>
<td>Ilford HP5+</td>
<td>Czarno-biały negatyw</td>
<td>35mm</td>
<td>40 PLN</td>
</tr>
<tr>
<td>Cinestill 800T</td>
<td>Kolorowy negatyw (do sztucznego światła)</td>
<td>35mm</td>
<td>85 PLN</td>
</tr>
<tr>
<td>Fomapan 400</td>
<td>Czarno-biały negatyw</td>
<td>35mm</td>
<td>35 PLN</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Ceny są orientacyjne i mogą ulec zmianie.</td>
</tr>
</tfoot>
</table>
</section>
<hr>
<section id="multimedia">
<h2>Multimedia</h2>
<article>
<h3>Proces wywoływania filmu w mojej ciemni</h3>
<video controls style="width: 100%;">
<source src="media/wykonywanie-odbitek.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje odtwarzania wideo.
</video>
</article>
<article>
<h3>Podcast: Analog vs Cyfra - moje przemyślenia</h3>
<audio controls style="width:100%;">
<source src="media/podcast.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje odtwarzania audio.
</audio>
</article>
</section>
<hr>
<section id="kontakt">
<h2>Kontakt</h2>
<p>Chcesz nawiązać współpracę lub po prostu porozmawiać o fotografii? Zapraszam!</p>
<p>
Adrianna Pytlarz<br>
Email: <a href="mailto:[email protected]">[email protected]</a><br>
Telefon: <a href="tel:+48123456789">+48 123 456 789</a>
</p>
<hr>
<h3>Formularz zamówienia / kontaktu</h3>
<p>Wypełnij formularz, aby zamówić odbitki lub zadać pytanie.</p>
<form action="/formularz-kontaktowy" method="POST">
<fieldset>
<legend>Dane Osobowe</legend>
<div>
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie_uzytkownika" required autofocus>
</div>
<div>
<label for="nazwisko">Nazwisko:</label>
<input type="text" id="nazwisko" name="nazwisko_uzytkownika" required>
</div>
<div>
<label for="email">Adres e-mail:</label>
<input type="email" id="email" name="email_uzytkownika" required placeholder="np. [email protected]">
</div>
<div>
<label for="telefon">Numer telefonu:</label>
<input type="tel" id="telefon" name="telefon_uzytkownika" placeholder="np. +48 123 456 789">
</div>
</fieldset>
<fieldset>
<legend>Dane Adresowe (do wysyłki)</legend>
<div>
<label for="ulica">Ulica:</label>
<input type="text" id="ulica" name="adres_ulica">
</div>
<div>
<label for="nr_domu">Nr domu / mieszkania:</label>
<input type="text" id="nr_domu" name="adres_nr_domu">
</div>
<div>
<label for="kod_pocztowy">Kod pocztowy:</label>
<input type="text" id="kod_pocztowy" name="adres_kod" pattern="[0-9]{2}-[0-9]{3}" placeholder="np. 00-001">
</div>
<div>
<label for="miejscowosc">Miejscowość:</label>
<input type="text" id="miejscowosc" name="adres_miejscowosc">
</div>
<div>
<label for="kraj">Kraj:</label>
<select id="kraj" name="adres_kraj">
<option value="PL" selected>Polska</option>
<option value="DE">Niemcy</option>
<option value="CZ">Czechy</option>
<option value="INNY">Inny</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Twoja Wiadomość</legend>
<div>
<label for="wiadomosc">Treść wiadomości:</label><br>
<textarea id="wiadomosc" name="tresc_wiadomosci" rows="5" placeholder="Wpisz tutaj swoje pytanie lub szczegóły zamówienia..."></textarea>
</div>
</fieldset>
<fieldset>
<legend>Zgody</legend>
<div>
<input type="checkbox" id="zgoda_rodo" name="zgoda_rodo" value="tak" required>
<label for="zgoda_rodo">Akceptuję politykę prywatności i zgadzam się na przetwarzanie danych (wymagane).</label>
</div>
</fieldset>
<button type="submit">Wyślij formularz</button>
</form>
</section>
</div>
</main>
<footer>
<div class="container">
<nav aria-label="Media społecznościowe">
<ul>
<li><a href="https://instagram.com" target="_blank">Instagram</a></li>
<li><a href="https://facebook.com" target="_blank">Facebook</a></li>
</ul>
</nav>
<p>© 2025 Adrianna Pytlarz. Wszystkie prawa zastrzeżone.</p>
</div>
</footer>
<div id="loginModal" class="modal">
<div class="modal-content">
<form action="/logowanie" method="POST">
<fieldset>
<legend>Logowanie</legend>
<div>
<label for="login">Login:</label>
<input type="text" id="login" name="uzytkownik_login" required>
</div>
<div>
<label for="haslo">Hasło:</label>
<input type="password" id="haslo" name="uzytkownik_haslo" required>
</div>
<button type="submit">Zaloguj</button>
</fieldset>
</form>
</div>
</div>
<script>
const Uzytkownik = {
id: 1,
imie: "Adrianna",
nazwisko: "Pytlarz",
login: "adapy",
haslo: "sekretneHaslo123",
aktywne: true,
role: ["user", "admin"],
adres: {
ulica: "Słoneczna",
nrDomu: "15",
nrMieszkania: "3",
kodPocztowy: "26-600",
miejscowosc: "Radom",
kraj: "Polska"
}
};
// 1. Funkcja wyświetlająca podstawowe dane
function wyswietlPodstawoweDane(user) {
console.log("--- Podstawowe Dane ---");
console.log("ID:", user.id);
console.log("Imię:", user.imie);
console.log("Nazwisko:", user.nazwisko);
console.log("Login:", user.login);
}
// 2. Funkcja wyświetlająca dane adresowe
function wyswietlDaneAdresowe(user) {
console.log("--- Dane Adresowe ---");
console.log("Ulica:", user.adres?.ulica);
console.log("Nr:", user.adres?.nrDomu + (user.adres?.nrMieszkania ? "/" + user.adres.nrMieszkania : ""));
console.log("Kod:", user.adres?.kodPocztowy);
console.log("Miejscowość:", user.adres?.miejscowosc);
console.log("Kraj:", user.adres?.kraj);
}
// 3. Funkcja sprawdzająca rolę
function czyMaRole(user, rola) {
return user.role.includes(rola);
}
// 4. Funkcja dodająca rolę
function dodajRole(user, rola) {
if (!czyMaRole(user, rola)) {
user.role.push(rola);
console.log(`Dodano rolę: ${rola}. Aktualne role: ${user.role.join(', ')}`);
} else {
console.log(`Użytkownik już ma rolę: ${rola}.`);
}
}
// 5. Funkcja usuwająca rolę
function usunRole(user, rola) {
const indexRoli = user.role.indexOf(rola);
if (indexRoli !== -1) {
user.role.splice(indexRoli, 1);
console.log(`Usunięto rolę: ${rola}. Aktualne role: ${user.role.join(', ')}`);
} else {
console.log(`Użytkownik nie ma roli: ${rola}.`);
}
}
console.log("--- Testowanie funkcji użytkownika ---");
wyswietlPodstawoweDane(Uzytkownik);
wyswietlDaneAdresowe(Uzytkownik);
console.log("Czy użytkownik jest adminem?", czyMaRole(Uzytkownik, "admin"));
console.log("Czy użytkownik jest moderatorem?", czyMaRole(Uzytkownik, "moderator"));
dodajRole(Uzytkownik, "moderator");
console.log("Czy teraz jest moderatorem?", czyMaRole(Uzytkownik, "moderator"));
dodajRole(Uzytkownik, "admin");
usunRole(Uzytkownik, "user");
usunRole(Uzytkownik, "nieistniejaca");
console.log("Końcowe role użytkownika:", Uzytkownik.role);
</script>
</body>
</html>
