MATURITNÍ_PRÁCE

portfolio/README.md

@@ -0,0 +1,2 @@
+# Galery-with-bootstrap-and-php
+

portfolio/css/style.css

@@ -0,0 +1,238 @@
+/* =====================================================================
+   MODERNÍ BAREVNÝ FORMULÁŘ – 2026 UI (CLEAN + COLORFUL)
+   ===================================================================== */
+
+/* ---------------------------------------------------------------------
+   1. PROMĚNNÉ
+   --------------------------------------------------------------------- */
+
+:root {
+
+    --primary: #7c3aed;       /* fialová */
+    --secondary: #06b6d4;     /* cyan */
+    --accent: #f97316;        /* oranžová */
+
+    --bg: #f6f7ff;
+    --card: #ffffff;
+
+    --text: #111827;
+    --muted: #6b7280;
+
+    --success: #22c55e;
+    --danger: #ef4444;
+
+    --radius: 20px;
+    --shadow: 0 15px 45px rgba(0,0,0,.10);
+}
+
+/* ---------------------------------------------------------------------
+   2. BODY
+   --------------------------------------------------------------------- */
+
+body {
+    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+
+    background:
+        radial-gradient(circle at top left, #ede9fe, transparent 45%),
+        radial-gradient(circle at top right, #cffafe, transparent 40%),
+        radial-gradient(circle at bottom, #ffedd5, transparent 45%),
+        var(--bg);
+
+    color: var(--text);
+}
+
+/* ---------------------------------------------------------------------
+   3. HEADER
+   --------------------------------------------------------------------- */
+
+.app-header {
+    background: rgba(255,255,255,.85);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(0,0,0,.06);
+}
+
+.navbar-brand {
+    font-weight: 700;
+    color: var(--text) !important;
+}
+
+/* ---------------------------------------------------------------------
+   4. CARD
+   --------------------------------------------------------------------- */
+
+.form-card,
+.success-card {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid rgba(0,0,0,.05);
+    overflow: hidden;
+}
+
+/* gradient header (barevný highlight) */
+
+.form-card-header {
+    background: linear-gradient(
+        135deg,
+        var(--primary),
+        var(--secondary)
+    );
+
+    color: white;
+    padding: 2rem;
+}
+
+/* footer */
+
+.form-card-footer {
+    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
+    border-top: 1px solid rgba(0,0,0,.05);
+    color: var(--muted);
+}
+
+/* ---------------------------------------------------------------------
+   5. FORM ELEMENTY
+   --------------------------------------------------------------------- */
+
+.form-label {
+    font-weight: 600;
+    margin-bottom: .4rem;
+}
+
+.form-control,
+.form-select {
+    border-radius: 14px;
+    border: 1px solid #e5e7eb;
+    padding: .8rem 1rem;
+    transition: .2s ease;
+    background: #fff;
+}
+
+.form-control:focus,
+.form-select:focus {
+    border-color: var(--secondary);
+    box-shadow: 0 0 0 4px rgba(6,182,212,.15);
+}
+
+/* input ikony */
+
+.input-group-text {
+    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+    border: 1px solid #e5e7eb;
+    color: var(--primary);
+}
+
+/* textarea */
+
+textarea.form-control {
+    min-height: 160px;
+}
+
+/* ---------------------------------------------------------------------
+   6. VALIDACE
+   --------------------------------------------------------------------- */
+
+.is-valid {
+    border-color: var(--success) !important;
+}
+
+.is-invalid {
+    border-color: var(--danger) !important;
+}
+
+.invalid-feedback {
+    display: block;
+    color: var(--danger);
+    font-size: .85rem;
+}
+
+/* ---------------------------------------------------------------------
+   7. BUTTON
+   --------------------------------------------------------------------- */
+
+.btn-primary {
+    background: linear-gradient(
+        135deg,
+        var(--primary),
+        var(--secondary)
+    );
+
+    border: none;
+    border-radius: 14px;
+    font-weight: 600;
+    padding: .9rem 1.2rem;
+
+    transition: .25s ease;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(124,58,237,.25);
+}
+
+/* ---------------------------------------------------------------------
+   8. SUCCESS
+   --------------------------------------------------------------------- */
+
+.success-icon i {
+    font-size: 4.5rem;
+    color: var(--success);
+    animation: pop .5s ease;
+}
+
+@keyframes pop {
+    from {
+        transform: scale(.6);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* ---------------------------------------------------------------------
+   9. ALERT
+   --------------------------------------------------------------------- */
+
+.alert {
+    border-radius: 14px;
+}
+
+/* ---------------------------------------------------------------------
+   10. FOOTER
+   --------------------------------------------------------------------- */
+
+.app-footer {
+    background: #ffffff;
+    border-top: 1px solid rgba(0,0,0,.06);
+    color: var(--muted);
+}
+
+/* ---------------------------------------------------------------------
+   11. ANIMACE
+   --------------------------------------------------------------------- */
+
+.animate-slide-down {
+    animation: slideDown .4s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-12px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ---------------------------------------------------------------------
+   12. HOVER DETAIL (malý UX bonus)
+   --------------------------------------------------------------------- */
+
+.form-card:hover {
+    transform: translateY(-2px);
+    transition: .3s ease;
+}

portfolio/data/images.php

@@ -0,0 +1,12 @@
+<?php
+
+$images = [
+    ["file" => "35.jpg", "label" => "", "keywords" => []],
+    ["file" => "36.jpg", "label" => "", "keywords" => []],
+    ["file" => "37.jpg", "label" => "", "keywords" => []],
+    ["file" => "38.jpg", "label" => "", "keywords" => []],
+    ["file" => "39.jpg", "label" => "", "keywords" => []],
+    ["file" => "40.jpg", "label" => "", "keywords" => []],
+    ["file" => "41.jpg", "label" => "", "keywords" => []],
+    ["file" => "42.jpg", "label" => "", "keywords" => []],
+];

portfolio/include/bio.php

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link
+      rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
+    />
+</head>
+<body class="d-flex flex-column h-100">
+
+<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">tistrA</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+        <ul class="navbar-nav me-auto mb-2 mb-md-0">
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=welcome">Welcome</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/galerie">Galerie</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/?page=bio">Bio</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=kontakt">Kontaktní formulář</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <main class="flex-shrink-0">
+  <div class="container">
+<h1>tistrA</h1>
+<p style="color:grey">Umělec, který (ne)existuje</p>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae laudantium magnam veniam ab ex quas accusamus nemo quos molestiae animi, necessitatibus tempore adipisci expedita ipsam error minima ut blanditiis voluptate! Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum facere adipisci tempora sint quos fuga distinctio sit quae rerum, quidem doloremque et eum vero assumenda, nisi nobis expedita voluptatum tenetur.
+Consectetur tempora quo ratione ipsam cum mollitia, quidem natus dolore reiciendis sint ducimus nihil maiores a? Error suscipit totam officiis sit necessitatibus hic perspiciatis, id, sequi voluptate, nam quo dolor?
+Amet perspiciatis aliquam hic voluptatem in cum perferendis delectus. Doloremque a mollitia iste dolorum labore recusandae, unde quas sed praesentium libero incidunt magnam voluptate repudiandae aliquam, iure optio sit dignissimos.
+Enim odio consectetur expedita libero possimus reiciendis beatae soluta earum aperiam numquam ipsum dolor, a quis dolorum architecto voluptatum vitae animi quaerat laboriosam temporibus reprehenderit iste amet pariatur culpa? Ratione!
+Neque iusto, eligendi magni quo cum iste assumenda vero dolorem incidunt molestias quaerat expedita eius odit. Quis cumque obcaecati odit quam ipsam iste? Rem laudantium, laboriosam quam ea quidem veniam.
+Quae ipsum sit laborum reprehenderit tenetur illo eius dicta dolorum! Omnis, perspiciatis quidem officia expedita commodi quaerat odio cumque? Voluptatibus saepe voluptates optio temporibus nulla amet aperiam perspiciatis, voluptatem dolorum!
+Totam molestias doloribus odio quidem aperiam illum hic eaque. Ab architecto exercitationem facere dolores expedita? Itaque, dignissimos, impedit id officiis quod dolorum ea, saepe sunt a nemo asperiores voluptatum! Omnis.
+Odit amet quibusdam, laudantium sint tempore consequuntur commodi in voluptatem quae, sequi quaerat laboriosam exercitationem vitae deserunt, pariatur natus accusantium? Labore asperiores iure fugiat in nemo dolorem aut, voluptate obcaecati!
+Corrupti alias nemo velit consequuntur voluptate. Non ab omnis amet ex earum molestias odit velit dolorem quasi impedit tempore, consequuntur, beatae commodi. Illo, voluptas neque dicta odio itaque sint eligendi.
+Voluptate ratione excepturi id voluptatum minus dolor laborum adipisci facere ad expedita, obcaecati officiis eum alias voluptates odio sit rerum exercitationem similique autem nostrum eveniet totam tempore. Quas, aliquam ad?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae eaque ut architecto repudiandae, aliquam odit corrupti provident dolorem praesentium expedita itaque nemo, doloribus minus magnam odio delectus corporis. Quasi, deserunt?
+Animi et suscipit possimus deserunt expedita temporibus dolor, praesentium inventore aliquam est culpa repudiandae facere. Repudiandae dicta pariatur odit magnam consequuntur tempora impedit quidem rerum natus suscipit, tempore unde dolore!
+Alias omnis sed id officiis natus aspernatur ullam, porro ducimus illo. Laudantium nesciunt nemo sint facilis molestias, laboriosam, veritatis, omnis optio ad ab asperiores exercitationem voluptates sequi incidunt! Ducimus, maiores.
+Molestias, placeat consectetur cupiditate, eaque perspiciatis iusto totam voluptas maiores quia tenetur ducimus qui a sed veritatis nostrum. Totam unde adipisci molestiae, explicabo error mollitia minima id dignissimos doloribus magni.
+Maiores qui sapiente eum corrupti sint explicabo. Facere itaque illo fuga aspernatur doloribus, veritatis dicta sed laboriosam hic repudiandae eum commodi blanditiis laborum deserunt cum quas, esse voluptas praesentium ullam.
+Rem optio error necessitatibus veritatis hic officiis repellat consectetur reiciendis accusamus ad temporibus aliquam tenetur et similique dignissimos dolorum minima, delectus recusandae enim aliquid odio. Soluta odio illo ducimus omnis!
+Soluta at illo quam placeat ducimus? Tempora voluptatibus recusandae dolorem accusamus, corporis culpa vel. Eligendi, magnam dolor asperiores similique quis beatae officia ab, eum a possimus adipisci, atque fuga ad.
+Magnam totam minima delectus corporis assumenda consectetur vero cumque iure? Illum nihil minima eius laudantium hic porro temporibus repellat debitis voluptatum, aliquid voluptate sed inventore ipsum quidem architecto facere quaerat!
+A consequatur, nesciunt id animi, alias exercitationem culpa explicabo iste excepturi aspernatur molestias ducimus esse voluptate placeat ad doloremque molestiae distinctio autem sunt sint eos assumenda beatae! Accusamus, hic alias?
+Perferendis quisquam at facilis fuga ad explicabo itaque sequi voluptatum sunt error ut odit architecto quo quidem repellendus blanditiis, modi minus aliquid dolore molestias nihil adipisci placeat commodi molestiae. Obcaecati!
+Optio accusamus ducimus provident iure tempora rem. Similique corrupti deserunt nobis quas reiciendis, sapiente id ea ducimus perferendis illum nihil libero facere quod est iure natus illo aperiam nostrum! Iste?
+Eius nostrum, minima perferendis minus dolores aliquam nisi voluptatibus? A quidem expedita quisquam cumque fugiat reiciendis ullam maxime, temporibus amet quo exercitationem voluptatibus? Odit autem voluptate, ipsa sunt asperiores dolores!
+Illum, deleniti aliquam quibusdam tenetur porro nam eaque dolorem, laborum similique laboriosam architecto distinctio culpa atque, quasi ex necessitatibus quia consectetur doloribus adipisci impedit nobis ea? Architecto et voluptatibus adipisci.
+Numquam ea eveniet, perferendis debitis, animi suscipit ab, est accusantium recusandae explicabo in ipsa odit. Esse maxime iste asperiores enim aperiam suscipit facere. Illum pariatur temporibus labore, facilis asperiores ipsum.
+Tempore, molestiae autem. Facere deleniti similique qui dicta? Neque, commodi! Commodi nobis inventore asperiores, cupiditate eum aspernatur incidunt suscipit fugiat eaque soluta eligendi quo eius doloremque assumenda praesentium ducimus ipsum.
+Architecto est culpa voluptate sapiente tempora exercitationem voluptas, praesentium, labore quo consectetur ducimus! Iusto corporis eveniet autem odio voluptate fugiat explicabo non nostrum amet quaerat deserunt natus, repellendus alias reiciendis.
+Mollitia sint illum quam velit eius nam nobis aliquam, autem fuga eum, repellendus exercitationem esse unde eligendi, nesciunt delectus. Deserunt accusantium rerum quos pariatur natus molestias beatae ea debitis nisi!
+Dolore quaerat fuga at voluptatem praesentium voluptatum harum cumque blanditiis aliquid rem. Optio, officiis omnis? Esse voluptatem consequatur impedit molestias quidem cum eos dicta unde delectus sequi, itaque, atque sint!
+Asperiores velit sunt, officiis, quisquam qui labore ea nihil nobis perferendis tempore accusantium non! Sint, eum, ut minima quidem amet quaerat architecto explicabo dolor reprehenderit, quibusdam fugiat non soluta dicta.
+Itaque, culpa tempora maiores aperiam assumenda numquam, veniam aliquam voluptas, ducimus quas consectetur aut doloremque eum sint dignissimos minima laboriosam voluptatibus quia tenetur ut harum? Quibusdam excepturi commodi voluptas impedit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, accusamus. Nulla labore ipsam adipisci beatae eaque necessitatibus velit minima illum, consequuntur nobis fuga aspernatur, ipsum aliquam alias voluptas sit. Eaque?
+Culpa, optio possimus? Explicabo perspiciatis, enim officiis iure deserunt aperiam ducimus repellendus labore non sit expedita? Ipsa expedita adipisci non exercitationem libero in, reiciendis velit molestiae incidunt corrupti labore possimus!
+Facilis in eaque voluptatibus cupiditate necessitatibus cum libero, natus repellendus alias quia eveniet odit harum, velit voluptatem soluta. Aliquid recusandae vero debitis porro quidem illum assumenda quod perferendis ab. Quibusdam!
+Consequuntur, quasi fugiat commodi ex dicta distinctio? Delectus fugiat possimus, ducimus dolor accusamus ipsum nesciunt nam praesentium dolore, earum quo quia. Quos nesciunt voluptas dignissimos provident odit assumenda delectus sint?
+Repudiandae odit dicta perspiciatis adipisci soluta illum, excepturi perferendis itaque! Maiores laboriosam corrupti soluta, sit hic quas nobis nemo illo ullam nostrum, consequuntur commodi veritatis distinctio recusandae porro sapiente laborum.
+Molestias eos, non, ratione nobis, illum facere quae iste laborum deleniti nisi suscipit ea dolor quia? Harum exercitationem suscipit nihil dolor iure rerum obcaecati fugit sed officiis, aliquam doloribus expedita!
+Quia voluptate autem quae, rem molestias aliquam quo ea facere, similique nobis corporis optio consectetur saepe sit unde alias nostrum temporibus est dignissimos labore? Dolor ipsum doloribus voluptas repellat perspiciatis!
+Provident distinctio eaque animi cum illo eos earum, blanditiis necessitatibus quis velit nulla. Labore nostrum cupiditate vero quisquam sequi eaque exercitationem. Quasi aliquid voluptatum obcaecati facere. Fuga culpa neque distinctio?
+Enim eaque officia aperiam. Quod delectus explicabo similique, provident quidem distinctio eveniet corporis dolore recusandae ea velit impedit fugiat! Excepturi tempore quo voluptatem temporibus repellat voluptate blanditiis commodi suscipit nobis.
+Fugit, eos! Quis nam beatae delectus sint eius vitae cumque distinctio dolorum sapiente nobis! Fuga doloribus esse quidem doloremque magnam quia aspernatur aperiam quo officiis, dolorum delectus reprehenderit, sapiente neque.
+Officia saepe ex porro, harum fugit ipsa quidem suscipit veniam expedita eius aperiam ratione cumque laborum voluptates explicabo cum. Culpa, sed corrupti voluptatibus magni necessitatibus reprehenderit quos dolor veniam similique?
+Fugiat enim aut rem. Quae, debitis alias itaque doloremque id quasi animi tempore voluptate eos nihil dignissimos placeat autem aut nisi quisquam odio voluptatem quidem unde atque odit minima repellendus!
+Totam aliquid non recusandae illo, accusantium dolorum porro aliquam reprehenderit saepe amet modi et maxime tempora officia pariatur error? Molestiae officiis blanditiis quod temporibus voluptatibus ut aperiam distinctio voluptas repudiandae.
+Voluptatibus deleniti, sint quisquam ea possimus consequatur, reprehenderit voluptates natus voluptatum at tenetur aperiam non ad illo nostrum maiores. Quibusdam atque deleniti hic laboriosam animi ab molestias cum sapiente repudiandae.
+Id vitae consequatur, veniam iusto cumque natus quaerat totam minima. Consequatur, dolorem maxime? Magni commodi blanditiis nesciunt iusto explicabo non eveniet nam? Accusantium nisi modi doloribus quibusdam sunt, culpa natus.
+Sapiente eaque unde repudiandae, recusandae officia provident quos atque odio veniam, tenetur doloremque similique. Totam nostrum aliquid adipisci ratione, laboriosam iure esse placeat dolore, quis modi ipsa cumque voluptates excepturi!
+Nulla, neque voluptates. Incidunt inventore itaque asperiores, quibusdam voluptates reprehenderit ad vero laudantium distinctio atque optio iusto omnis ducimus, nostrum fugit dignissimos fuga officia maiores accusantium quaerat. Aperiam, debitis quaerat.
+Sunt eius sint dolorum architecto officia, voluptatibus eos soluta quaerat. Molestias veniam maxime similique voluptates dolores esse cumque! Facilis alias dolorem id eveniet exercitationem necessitatibus corrupti numquam delectus ipsa porro.
+Molestiae deserunt excepturi optio similique alias nemo vitae nisi dicta vero repellat? Natus, illo officiis fugiat quam iure a mollitia tempore, beatae modi labore ad non assumenda sequi provident minima?
+Autem maiores eos mollitia sit eligendi. Cum, dolores commodi quaerat in placeat modi, quia quasi fugiat quam delectus ut beatae quo animi obcaecati praesentium labore quod officia voluptate provident alias?
+Harum excepturi nam obcaecati voluptatum debitis veniam error expedita recusandae architecto, molestias assumenda unde, sed dolore suscipit. Et nemo sapiente tempora adipisci, labore maxime enim recusandae dolor assumenda fugit culpa.
+Illum doloremque consequatur tempora nobis ipsa nihil eveniet totam quis eum accusantium quas nesciunt ex ipsam, itaque dicta minima non iste a veritatis ullam! Eius minus magni nobis. Fuga, odio?
+Accusamus vel vitae iste enim doloremque, sit ducimus voluptatibus est labore quia molestiae similique repudiandae cumque molestias eaque modi, fuga atque delectus nihil excepturi ut eveniet! Doloremque quis quam amet?
+Tempora repellat ullam obcaecati velit natus. Ratione iusto consectetur aspernatur voluptatibus hic adipisci voluptate possimus autem, tempora iste dolorum, aperiam, ullam quos quisquam perspiciatis deserunt eum ducimus vel asperiores! Consequuntur!
+In aperiam quis voluptatibus sit hic asperiores id veniam voluptas dicta blanditiis nobis rem explicabo temporibus quos dolorem consectetur, doloremque nesciunt, similique quibusdam nisi voluptates. Voluptatibus explicabo beatae eos accusamus?
+Consequuntur eius hic minus? Aspernatur minima ducimus culpa vero temporibus non qui quam consequuntur, veniam deleniti ipsum voluptatem, esse facilis perspiciatis, eos praesentium id? Debitis tenetur repudiandae dolorum voluptatem iusto.
+Cumque autem reiciendis facere esse quam, delectus quidem impedit iure magni aperiam eum maxime, voluptatem enim consectetur perferendis possimus, aliquid illo ab nemo similique facilis! Voluptatum at provident temporibus eum!
+Laudantium dolore alias placeat debitis eaque, odit doloribus recusandae pariatur perspiciatis culpa magni tenetur officiis dolores totam officia error. Dicta earum dolores molestias labore cupiditate veritatis deserunt similique repellat libero.
+Tempora cumque rerum repudiandae placeat corrupti, est facere a veritatis corporis eveniet nostrum odit soluta laudantium modi quam consequatur ad nam exercitationem? Quisquam voluptatum distinctio, atque nulla laboriosam facilis blanditiis!
+Explicabo inventore illo dolore ullam temporibus tenetur cupiditate suscipit quasi numquam adipisci. Explicabo repellat, perferendis natus nam laborum maxime excepturi similique nobis perspiciatis rem iure laboriosam, ex eveniet quisquam? Tenetur.
+Eum repellendus voluptates inventore voluptas, mollitia, aperiam id nobis quas illum et dolore alias officiis quod, optio doloribus quasi vero nam! Modi dicta, dolores voluptatibus placeat quod voluptatum quibusdam provident!
+Ea pariatur atque, fugit praesentium autem amet, facere ad libero cumque temporibus consequuntur cum inventore numquam assumenda cupiditate labore fuga vero dolore hic totam doloribus? Similique dicta est placeat cum.
+Sapiente nostrum nobis modi. Laborum ducimus cupiditate voluptatem libero quaerat repudiandae reiciendis ipsa in, id vel, aliquid, aliquam quas beatae nulla deleniti nesciunt quidem nemo atque accusantium assumenda! Voluptatibus, error.
+Unde debitis eum voluptate. Cum sint esse maxime sed id, ipsum, officia maiores quas facere itaque fugit impedit pariatur exercitationem eveniet quod adipisci dolorem! Illum alias saepe iusto fugiat soluta?
+Asperiores, non odio. Quis enim tempore obcaecati magni ea qui eligendi mollitia reprehenderit, nesciunt vel rerum maiores sed nam! Reiciendis, quibusdam quasi et error eveniet soluta earum? Dolorem, inventore praesentium!
+Ut laudantium natus ullam incidunt quos! Fugiat eos velit, incidunt debitis id autem numquam. Quaerat alias libero aliquam saepe accusamus laboriosam quis, sunt dolore nesciunt quod officia natus debitis ex?
+Nostrum repellendus laudantium nisi quo sed, vitae quos quod ducimus! Corporis adipisci, in nobis ipsum ullam similique deserunt neque, accusamus laborum error, porro distinctio reiciendis ab optio quaerat voluptate accusantium.
+Et, tempora! Eveniet, ipsa repellendus enim quae similique aperiam doloribus hic suscipit, beatae labore maxime. Eos, animi quibusdam ut aut labore quas doloribus, error reiciendis ipsam illum quod, inventore placeat.
+Illum, a, eum, labore pariatur alias doloremque officia animi facere quas adipisci voluptatem sequi veritatis architecto? Saepe error impedit maiores ab odio est quasi aut ducimus, soluta ut rerum quibusdam.
+Atque nesciunt alias ad voluptatum excepturi minima molestias nisi, ipsam dolor, quidem eveniet neque sequi similique. Quam aliquam harum ratione. Illum fugit ratione beatae repellat quos. Ad quas tenetur accusamus.</p>

portfolio/include/error.php

@@ -0,0 +1,3 @@
+<div class="alert alert-danger" role="alert">
+  Chyba!
+</div>

portfolio/include/footer.php

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link
+      rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
+    />
+</head>
+</div>
+</main>
+
+<footer class="footer mt-auto py-3 bg-body-tertiary">
+<div class="container">
+    <hr>
+    <span class="text-body-secondary">MZ WTL - 2026@Lukáš Tyle.</span>
+</div>
+</footer>
+
+    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

portfolio/include/gallery.php

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link
+      rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
+    />
+</head>
+<h1>Galerie</h1>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum doloremque culpa eius quod recusandae
+    fugit corporis eaque, mollitia rerum laboriosam enim sapiente, repellendus nobis quae aliquid? Mollitia, suscipit animi! Illum?</p>
+<?php
+
+require "data/images.php";
+?>
+<div class="row row-cols-sm-4">
+<?php
+foreach ($images as $image) {
+?>
+<div class="col">
+    <div class="card mb-3">
+        <img src="/static/thumbs/thumb_<?php echo $image["file"]; ?>" class="card-img-top" alt="...">
+        <div class="card-body">
+            <p class="card-text">
+                <?php 
+                if ($image["label"]) {
+                    echo $image ["label"];
+                }
+                else {
+                    echo $image["file"];  
+                }
+                ?>
+            </p>
+        </div>
+    </div>
+</div>
+
+
+
+<?php
+    //echo "<img src=\"/static/thumbs/thumb_$image\" alt=\"foto\">";
+    }
+
+
+
+

portfolio/include/header.php

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" class="h-100">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo"$title"; ?></title>
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        main > .container {
+        padding: 60px 15px 0;
+        }
+    </style>
+</head>
+<body class="d-flex flex-column h-100">
+
+<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">tistrA</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+        <ul class="navbar-nav me-auto mb-2 mb-md-0">
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=welcome">Welcome</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=galerie">Galerie</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=bio">Bio</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=kontakt">Kontaktní formulář</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <main class="flex-shrink-0">
+  <div class="container">

portfolio/include/kontakt.php

@@ -0,0 +1,77 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link
+      rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
+    />
+</head>
+<body class="d-flex flex-column h-100">
+
+<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">tistrA</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+        <ul class="navbar-nav me-auto mb-2 mb-md-0">
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=welcome">Welcome</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=galerie">Galerie</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=bio">Bio</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/?page=kontakt">Kontaktní formulář</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</body>
+
+<form>
+          <h1 class="" style="font-size: 90px">Zkontaktuj tistrA</h1>
+    <p class="" style="color: grey; font-size: 15px">pochopíš tento formulář? to je umění</p>
+  <div class="form-group">
+    <label for="exampleInputEmail1">TEXT</label>
+    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
+  </div>
+  <br>
+  <div class="form-group">
+    <label for="exampleInputtext1">Text</label>
+    <input type="text" class="form-control" id="exampleInputtext1" placeholder="">
+  </div>
+  <br>
+    <div class="form-group">
+    <label for="exampleInputtext1">Text</label>
+    <input type="text" class="form-control" id="exampleInputtext1" placeholder="">
+  </div>
+  <br>
+    <div class="form-group">
+    <label for="exampleInputtext1">Text</label>
+    <input type="text" class="form-control" id="exampleInputtext1" placeholder="">
+  </div>
+  <br>
+
+
+    <div class="form-group">
+    <label for="exampleInputtext1">Work in progress</label>
+    <input type="text" class="form-control bg-secondary" id="exampleInputtext1" placeholder="">
+  </div>
+  <br>
+
+    <div class="form-group">
+    <label for="exampleInputtext1">TEST</label>
+    <input type="text" class="form-control" id="exampleInputtext1" placeholder="">
+  </div>
+  <br>
+  <button type="submit" class="btn bg-warning">Odeslat</button>
+</form>

portfolio/include/tistra.php

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body style="background-color: grey">
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <h1 style="color:white "class="text-center">Umělec tistrA<h1>
+    <p style="color:white; font-size: 18px "class="text-center">Umělec všech dob, které nebyli a možná nastanou</p>
+    <div class="d-grid gap-2 col-2 mx-auto">
+        <button type="submit" class="btn bg-secondary">
+            <li>
+             <a class="nav-link text-center" href="/?page=welcome">Welcome</a>
+            </li>
+        </button>
+    </div>
+</body>
+</html>

portfolio/include/welcome.php

@@ -0,0 +1,428 @@
+<!doctype html>
+<html lang="en" data-bs-theme="auto">
+    <link
+      rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
+    />
+    <script src="../assets/js/color-modes.js"></script>
+    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <meta name="theme-color" content="#712cf9" />
+    <link href="carousel.css" rel="stylesheet" />
+    <style>
+      .bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+      }
+      @media (min-width: 768px) {
+        .bd-placeholder-img-lg {
+          font-size: 3.5rem;
+        }
+      }
+      .b-example-divider {
+        background-color: #0000001a;
+        border: solid rgba(0, 0, 0, 0.15);
+        border-width: 1px 0;
+        box-shadow:
+          inset 0 0.5em 1.5em #0000001a,
+          inset 0 0.125em 0.5em #00000026;
+      }
+      .b-example-vr {
+        flex-shrink: 0;
+      }
+      .bi {
+        vertical-align: -0.125em;
+        fill: currentColor;
+      }
+      .nav-scroller {
+        position: relative;
+        z-index: 2;
+        overflow-y: hidden;
+      }
+      .nav-scroller .nav {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        text-align: center;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+      .btn-bd-primary {
+        --bd-violet-bg: #712cf9;
+        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
+        --bs-btn-font-weight: 600;
+        --bs-btn-color: var(--bs-white);
+        --bs-btn-bg: var(--bd-violet-bg);
+        --bs-btn-border-color: var(--bd-violet-bg);
+        --bs-btn-hover-color: var(--bs-white);
+        --bs-btn-hover-bg: #6528e0;
+        --bs-btn-hover-border-color: #6528e0;
+        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+        --bs-btn-active-color: var(--bs-btn-hover-color);
+        --bs-btn-active-bg: #5a23c8;
+        --bs-btn-active-border-color: #5a23c8;
+      }
+      .bd-mode-toggle {
+        z-index: 1500;
+      }
+      .bd-mode-toggle .bi {
+        width: 1em;
+        height: 1em;
+      }
+      .bd-mode-toggle .dropdown-menu .active .bi {
+        display: block !important;
+      }
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+      <symbol id="check2" viewBox="0 0 16 16">
+        <path
+          d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
+        ></path>
+      </symbol>
+      <symbol id="circle-half" viewBox="0 0 16 16">
+        <path
+          d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+        ></path>
+      </symbol>
+      <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+        <path
+          d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
+        ></path>
+        <path
+          d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
+        ></path>
+      </symbol>
+      <symbol id="sun-fill" viewBox="0 0 16 16">
+        <path
+          d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
+        ></path>
+      </symbol>
+    </svg>
+    <div
+      class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
+    >
+      <button
+        class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
+        id="bd-theme"
+        type="button"
+        aria-expanded="false"
+        data-bs-toggle="dropdown"
+        aria-label="Toggle theme (auto)"
+      >
+        <svg class="bi my-1 theme-icon-active" aria-hidden="true">
+          <use href="#circle-half"></use>
+        </svg>
+        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+      </button>
+      <ul
+        class="dropdown-menu dropdown-menu-end shadow"
+        aria-labelledby="bd-theme-text"
+      >
+        <li>
+          <button
+            type="button"
+            class="dropdown-item d-flex align-items-center"
+            data-bs-theme-value="light"
+            aria-pressed="false"
+          >
+            <svg class="bi me-2 opacity-50" aria-hidden="true">
+              <use href="#sun-fill"></use>
+            </svg>
+            Light
+            <svg class="bi ms-auto d-none" aria-hidden="true">
+              <use href="#check2"></use>
+            </svg>
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            class="dropdown-item d-flex align-items-center"
+            data-bs-theme-value="dark"
+            aria-pressed="false"
+          >
+            <svg class="bi me-2 opacity-50" aria-hidden="true">
+              <use href="#moon-stars-fill"></use>
+            </svg>
+            Dark
+            <svg class="bi ms-auto d-none" aria-hidden="true">
+              <use href="#check2"></use>
+            </svg>
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            class="dropdown-item d-flex align-items-center active"
+            data-bs-theme-value="auto"
+            aria-pressed="true"
+          >
+            <svg class="bi me-2 opacity-50" aria-hidden="true">
+              <use href="#circle-half"></use>
+            </svg>
+            Auto
+            <svg class="bi ms-auto d-none" aria-hidden="true">
+              <use href="#check2"></use>
+            </svg>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <header>
+        <body class="d-flex flex-column h-100">
+
+<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">tistrA</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+        <ul class="navbar-nav me-auto mb-2 mb-md-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/?page=welcome">Welcome</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=galerie">Galerie</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=bio">Bio</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/?page=kontakt">Kontaktní formulář</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <main class="flex-shrink-0">
+  <div class="container">
+    </header>
+    <main>
+      <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+          <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="0"
+            class="active"
+            aria-current="true"
+            aria-label="Slide 1"
+          ></button>
+          <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="1"
+            aria-label="Slide 2"
+          ></button>
+          <button
+            type="button"
+            data-bs-target="#myCarousel"
+            data-bs-slide-to="2"
+            aria-label="Slide 3"
+          ></button>
+        </div>
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <svg
+              aria-hidden="true"
+              class="bd-placeholder-img"
+              height="100%"
+              preserveAspectRatio="xMidYMid slice"
+              width="100%"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="100%"
+                height="100%"
+                fill="var(--bs-secondary-color)"
+              ></rect>
+            </svg>
+            <div class="container">
+              <div class="carousel-caption text-start">
+                <h1>Example headline.</h1>
+                <p class="opacity-75">
+                  Some representative placeholder content for the first slide of
+                  the carousel.
+                </p>
+                <p>
+                  <a class="btn btn-lg btn-primary" href="#">Sign up today</a>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <svg
+              aria-hidden="true"
+              class="bd-placeholder-img"
+              height="100%"
+              preserveAspectRatio="xMidYMid slice"
+              width="100%"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="100%"
+                height="100%"
+                fill="var(--bs-secondary-color)"
+              ></rect>
+            </svg>
+            <div class="container">
+              <div class="carousel-caption">
+                <h1>Another example headline.</h1>
+                <p>
+                  Some representative placeholder content for the second slide
+                  of the carousel.
+                </p>
+                <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
+              </div>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <svg
+              aria-hidden="true"
+              class="bd-placeholder-img"
+              height="100%"
+              preserveAspectRatio="xMidYMid slice"
+              width="100%"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="100%"
+                height="100%"
+                fill="var(--bs-secondary-color)"
+              ></rect>
+            </svg>
+            <div class="container">
+              <div class="carousel-caption text-end">
+                <h1>One more for good measure.</h1>
+                <p>
+                  Some representative placeholder content for the third slide of
+                  this carousel.
+                </p>
+                <p>
+                  <a class="btn btn-lg btn-primary" href="#">Browse gallery</a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          class="carousel-control-prev"
+          type="button"
+          data-bs-target="#myCarousel"
+          data-bs-slide="prev"
+        >
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button
+          class="carousel-control-next"
+          type="button"
+          data-bs-target="#myCarousel"
+          data-bs-slide="next"
+        >
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+      <!-- Marketing messaging and featurettes
+  ================================================== -->
+      <!-- Wrap the rest of the page in another container to center all the content. -->
+      <div class="container marketing">
+        <!-- Three columns of text below the carousel -->
+        <div class="row">
+          <div class="col-lg-4">
+            <svg
+              aria-label="Placeholder"
+              class="bd-placeholder-img rounded-circle"
+              height="140"
+              preserveAspectRatio="xMidYMid slice"
+              role="img"
+              width="140"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Placeholder</title>
+              <rect
+                width="100%"
+                height="100%"
+                fill="var(--bs-secondary-color)"
+              ></rect>
+            </svg>
+            <h2 class="fw-normal">Heading</h2>
+            <p>
+              Some representative placeholder content for the three columns of
+              text below the carousel. This is the first column.
+            </p>
+            <p>
+              <a class="btn btn-secondary" href="#">View details &raquo;</a>
+            </p>
+          </div>
+          <!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <svg
+              aria-label="Placeholder"
+              class="bd-placeholder-img rounded-circle"
+              height="140"
+              preserveAspectRatio="xMidYMid slice"
+              role="img"
+              width="140"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Placeholder</title>
+              <rect
+                width="100%"
+                height="100%"
+                fill="var(--bs-secondary-color)"
+              ></rect>
+            </svg>
+            <h2 class="fw-normal">Heading</h2>
+            <p>
+              Another exciting bit of representative placeholder content. This
+              time, we've moved on to the second column.
+            </p>
+            <p>
+              <a class="btn btn-secondary" href="#">View details &raquo;</a>
+            </p>
+          </div>
+          <!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <svg
+              aria-label="Placeholder"
+              class="bd-placeholder-img rounded-circle"
+              height="140"
+              preserveAspectRatio="xMidYMid slice"
+              role="img"
+              width="140"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Placeholder</title>
+              <rect
+                width="100%"
+                height="100%"
+                fill="var(--bs-secondary-color)"
+              ></rect>
+            </svg>
+            <h2 class="fw-normal">Heading</h2>
+            <p>
+              And lastly this, the third column of representative placeholder
+              content.
+            </p>
+            <p>
+              <a class="btn btn-secondary" href="#">View details &raquo;</a>
+            </p>
+          </div>
+          <!-- /.col-lg-4 -->
+        </div>
+
+
+    </main>
+    <script
+      src="../assets/dist/js/bootstrap.bundle.min.js"
+      class="astro-vvvwv3sm"
+    ></script>
+  </body>
+</html>

portfolio/index.php

@@ -0,0 +1,44 @@
+<?php
+
+if (isset($_GET["page"])) {
+    $page = $_GET["page"];
+}
+else {
+    //výchozí hodnota bude "tistra"
+    $page = "tistra";
+}
+
+if ($page =="tistra") {
+    $title = "tistrA";
+    $content = "tistra.php";
+}
+
+elseif ($page =="galerie") {
+    $title = "Galerie";
+    $content = "gallery.php";
+}
+elseif ($page == "welcome") {
+    $title = "Welcome";
+    $content = "welcome.php";
+}
+elseif ($page =="bio") {
+    $title = "Bio";
+    $content = "bio.php";
+}
+elseif ($page =="kontakt") {
+    $title = "Kontaktní formulář";
+    $content = "kontakt.php";
+}
+else {
+    $title = "NENÍ DEFINOVÁNO";
+    $content = "error.php";
+}
+
+include "include/header.php";
+
+include "include/$content";
+
+include "include/footer.php";
+
+
+?>

portfolio/js/script.js

@@ -0,0 +1,398 @@
+/**
+ * Kontaktní formulář - JavaScript (script.js)
+ * ==============================================
+ * Klientská validace formuláře a UX vylepšení.
+ *
+ * DŮLEŽITÉ: Klientská validace (JS) je jen pro pohodlí uživatele!
+ * Serverová validace (PHP) je nezbytná pro bezpečnost.
+ * Uživatel může JS vypnout nebo obejít - PHP validaci obejít nemůže.
+ *
+ * Obsah:
+ *   1. Inicializace
+ *   2. Validace v reálném čase (při psaní)
+ *   3. Validace při odeslání
+ *   4. Počítadlo znaků
+ *   5. Vizuální vylepšení
+ */
+
+'use strict';
+
+// ============================================================
+// KONFIGURACE PRAVIDEL VALIDACE
+// ============================================================
+
+/**
+ * Objekt s validačními pravidly pro každé pole.
+ * Každé pole má funkci validate() která vrátí string s chybou nebo null.
+ */
+const validators = {
+
+    firstName: {
+        validate(value) {
+            if (!value.trim()) return 'Jméno je povinné.';
+            if (value.trim().length < 2)  return 'Jméno musí mít alespoň 2 znaky.';
+            if (value.trim().length > 50) return 'Jméno nesmí být delší než 50 znaků.';
+            return null; // null = validní
+        }
+    },
+
+    lastName: {
+        validate(value) {
+            if (!value.trim()) return 'Příjmení je povinné.';
+            if (value.trim().length < 2)  return 'Příjmení musí mít alespoň 2 znaky.';
+            if (value.trim().length > 50) return 'Příjmení nesmí být delší než 50 znaků.';
+            return null;
+        }
+    },
+
+    email: {
+        validate(value) {
+            if (!value.trim()) return 'Email je povinný.';
+            // Regulární výraz pro validaci emailu
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+            if (!emailRegex.test(value.trim())) return 'Zadejte platnou emailovou adresu.';
+            return null;
+        }
+    },
+
+    phone: {
+        validate(value) {
+            if (!value.trim()) return null; // Telefon je volitelný
+            // Povolené formáty: +420777123456, 00420777123456, 777 123 456
+            const phoneRegex = /^(\+|00)?[0-9\s\-]{9,15}$/;
+            if (!phoneRegex.test(value.trim())) return 'Zadejte platné telefonní číslo.';
+            return null;
+        }
+    },
+
+    subject: {
+        validate(value) {
+            if (!value) return 'Vyberte předmět zprávy.';
+            if (value.length > 100) return 'Předmět nesmí být delší než 100 znaků.';
+            return null;
+        }
+    },
+
+    message: {
+        validate(value) {
+            if (!value.trim()) return 'Zpráva je povinná.';
+            if (value.trim().length < 10)   return 'Zpráva musí mít alespoň 10 znaků.';
+            if (value.trim().length > 2000) return 'Zpráva nesmí být delší než 2000 znaků.';
+            return null;
+        }
+    },
+
+    agreement: {
+        validate(checked) {
+            if (!checked) return 'Musíte souhlasit se zpracováním osobních údajů.';
+            return null;
+        }
+    }
+};
+
+// ============================================================
+// INICIALIZACE
+// ============================================================
+
+document.addEventListener('DOMContentLoaded', function () {
+    const form = document.getElementById('contactForm');
+    if (!form) return; // Formulář neexistuje (např. na stránce s úspěchem)
+
+    // Inicializace všech funkcí
+    initRealtimeValidation();  // Validace při psaní
+    initFormSubmit();          // Validace při odeslání
+    initCharCounter();         // Počítadlo znaků pro textarea
+    initFloatingLabels();      // Vizuální efekty
+});
+
+// ============================================================
+// 1. VALIDACE V REÁLNÉM ČASE
+// ============================================================
+
+/**
+ * Přidá posluchače na všechna pole - validuje při odchodu z pole (blur).
+ * Uživatel dostane zpětnou vazbu ihned po vyplnění každého pole.
+ */
+function initRealtimeValidation() {
+
+    // Textová a email pole - validace při ztrátě focusu (blur)
+    ['firstName', 'lastName', 'email', 'phone', 'subject', 'message'].forEach(function (fieldName) {
+        const field = document.getElementById(fieldName);
+        if (!field) return;
+
+        // blur = uživatel opustil pole (přesunul focus jinam)
+        field.addEventListener('blur', function () {
+            validateField(this);
+        });
+
+        // input = uživatel píše - pokud pole bylo označeno jako nevalidní,
+        // začneme znovu validovat při každém stiku klávesy (okamžitá oprava)
+        field.addEventListener('input', function () {
+            if (this.classList.contains('is-invalid')) {
+                validateField(this);
+            }
+        });
+    });
+
+    // Checkbox - validace při změně
+    const agreement = document.getElementById('agreement');
+    if (agreement) {
+        agreement.addEventListener('change', function () {
+            validateCheckbox(this);
+        });
+    }
+}
+
+/**
+ * Validuje jedno textové/email/select pole.
+ * Přidá nebo odebere CSS třídy is-valid / is-invalid.
+ *
+ * @param {HTMLElement} field - Pole formuláře
+ * @returns {boolean} - True = validní, False = nevalidní
+ */
+function validateField(field) {
+    const name      = field.id;
+    const validator = validators[name];
+    if (!validator) return true; // Neznámé pole považujeme za validní
+
+    // Získání hodnoty
+    const value = field.value;
+
+    // Spuštění validační funkce
+    const error = validator.validate(value);
+
+    if (error) {
+        // Pole je NEVALIDNÍ
+        setFieldInvalid(field, error);
+        return false;
+    } else {
+        // Pole je VALIDNÍ
+        setFieldValid(field);
+        return true;
+    }
+}
+
+/**
+ * Validuje checkbox souhlas.
+ *
+ * @param {HTMLInputElement} checkbox - Checkbox element
+ * @returns {boolean}
+ */
+function validateCheckbox(checkbox) {
+    const error = validators.agreement.validate(checkbox.checked);
+
+    if (error) {
+        checkbox.classList.add('is-invalid');
+        // Vložíme nebo aktualizujeme chybovou zprávu
+        updateFeedback(checkbox, error);
+        return false;
+    } else {
+        checkbox.classList.remove('is-invalid');
+        checkbox.classList.add('is-valid'); // Zelená barva pro zaškrtnutý checkbox
+        clearFeedback(checkbox);
+        return true;
+    }
+}
+
+// ============================================================
+// 2. VALIDACE PŘI ODESLÁNÍ
+// ============================================================
+
+/**
+ * Přidá posluchač na odeslání formuláře.
+ * Zkontroluje všechna pole a zobrazí souhrn chyb.
+ */
+function initFormSubmit() {
+    const form = document.getElementById('contactForm');
+    if (!form) return;
+
+    form.addEventListener('submit', function (e) {
+        // Zastavíme výchozí odeslání - nejprve validujeme JS
+        // Pokud je vše ok, necháme formulář odeslat na server (PHP validace)
+        let isFormValid = true;
+
+        // Validace všech textových polí
+        ['firstName', 'lastName', 'email', 'phone', 'subject', 'message'].forEach(function (fieldName) {
+            const field = document.getElementById(fieldName);
+            if (field && !validateField(field)) {
+                isFormValid = false;
+            }
+        });
+
+        // Validace checkboxu
+        const agreement = document.getElementById('agreement');
+        if (agreement && !validateCheckbox(agreement)) {
+            isFormValid = false;
+        }
+
+        if (!isFormValid) {
+            // CHYBA: Zastavíme odeslání
+            e.preventDefault();
+
+            // Přidáme animaci třesení na chybná pole
+            document.querySelectorAll('.is-invalid').forEach(function (field) {
+                field.classList.add('shake');
+                setTimeout(function () {
+                    field.classList.remove('shake');
+                }, 300);
+            });
+
+            // Scrollování na první chybné pole
+            const firstError = document.querySelector('.is-invalid');
+            if (firstError) {
+                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                firstError.focus();
+            }
+        } else {
+            // VŠE OK: Zobrazíme stav načítání na tlačítku
+            setButtonLoading(true);
+            // Formulář se odešle - PHP zpracuje dál
+        }
+    });
+}
+
+// ============================================================
+// 3. POČÍTADLO ZNAKŮ
+// ============================================================
+
+/**
+ * Sleduje počet znaků v textarea a aktualizuje počítadlo.
+ * Mění barvu počítadla při přiblížení k limitu.
+ */
+function initCharCounter() {
+    const textarea  = document.getElementById('message');
+    const counter   = document.getElementById('charCount');
+    if (!textarea || !counter) return;
+
+    const maxLength = 2000;  // Maximální počet znaků
+    const warnAt    = 1800;  // Varování při 1800 znacích (90%)
+
+    function updateCounter() {
+        const current = textarea.value.length;
+        counter.textContent = `${current}/${maxLength}`;
+
+        // Změna barvy podle počtu znaků
+        counter.classList.remove('near-limit', 'at-limit');
+        if (current >= maxLength) {
+            counter.classList.add('at-limit');    // Červená - dosažen limit
+        } else if (current >= warnAt) {
+            counter.classList.add('near-limit');  // Oranžová - blíží se limit
+        }
+    }
+
+    // Okamžitá aktualizace při psaní
+    textarea.addEventListener('input', updateCounter);
+
+    // Inicializace (pro případ, že textarea má předvyplněný text z PHP)
+    updateCounter();
+}
+
+// ============================================================
+// 4. VIZUÁLNÍ VYLEPŠENÍ
+// ============================================================
+
+/**
+ * Inicializuje efekty pro vstupní pole:
+ * - Zvýraznění řádku při focusu
+ * - Animace ikonek
+ */
+function initFloatingLabels() {
+    // Přidání efektu zaměření na skupiny s ikonou
+    document.querySelectorAll('.input-group').forEach(function (group) {
+        const input = group.querySelector('.form-control, .form-select');
+        if (!input) return;
+
+        // Focus = zaměření na pole
+        input.addEventListener('focus', function () {
+            group.classList.add('focused');
+        });
+
+        // Blur = ztráta focusu
+        input.addEventListener('blur', function () {
+            group.classList.remove('focused');
+        });
+    });
+}
+
+// ============================================================
+// POMOCNÉ FUNKCE
+// ============================================================
+
+/**
+ * Označí pole jako NEVALIDNÍ a zobrazí chybovou zprávu.
+ *
+ * @param {HTMLElement} field   - Vstupní pole
+ * @param {string}      message - Chybová zpráva
+ */
+function setFieldInvalid(field, message) {
+    field.classList.remove('is-valid');
+    field.classList.add('is-invalid');
+    updateFeedback(field, message);
+}
+
+/**
+ * Označí pole jako VALIDNÍ a skryje chybovou zprávu.
+ *
+ * @param {HTMLElement} field - Vstupní pole
+ */
+function setFieldValid(field) {
+    field.classList.remove('is-invalid');
+    field.classList.add('is-valid');
+    clearFeedback(field);
+}
+
+/**
+ * Aktualizuje nebo vytvoří element s chybovou zprávou pod polem.
+ *
+ * @param {HTMLElement} field   - Vstupní pole
+ * @param {string}      message - Text chybové zprávy
+ */
+function updateFeedback(field, message) {
+    // Hledáme existující zprávu
+    let feedback = field.parentElement.querySelector('.invalid-feedback');
+
+    if (!feedback) {
+        // Vytvoříme nový element pro zprávu
+        feedback = document.createElement('div');
+        feedback.className = 'invalid-feedback';
+        field.parentElement.appendChild(feedback);
+    }
+
+    feedback.textContent = message;
+}
+
+/**
+ * Odstraní chybovou zprávu pod polem.
+ *
+ * @param {HTMLElement} field - Vstupní pole
+ */
+function clearFeedback(field) {
+    const feedback = field.parentElement.querySelector('.invalid-feedback');
+    if (feedback) {
+        feedback.remove(); // Smazání z DOM
+    }
+}
+
+/**
+ * Nastaví stav načítání tlačítka Odeslat.
+ *
+ * @param {boolean} loading - True = načítání, False = normální stav
+ */
+function setButtonLoading(loading) {
+    const btn = document.getElementById('submitBtn');
+    if (!btn) return;
+
+    if (loading) {
+        btn.disabled = true;
+        btn.classList.add('loading');
+        // Spinner (Bootstrap) + text
+        btn.innerHTML = `
+            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            Odesílám...
+        `;
+    } else {
+        btn.disabled = false;
+        btn.classList.remove('loading');
+        btn.innerHTML = '<i class="bi bi-send me-2"></i>Odeslat zprávu';
+    }
+}