Skip to content

Zwiększenie dostępności #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 18, 2025
Merged

Zwiększenie dostępności #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ccf2237
fix accessibility issues in base.html
EmiM Sep 14, 2025
743c49e
fix accessibility issues in index.html
EmiM Sep 14, 2025
2d74830
fix accessibility issues in info.html
EmiM Sep 14, 2025
0c4ad23
fix accessibility issues in organization.html
EmiM Sep 14, 2025
96d71f8
fix accessibility issues in organizations.html
EmiM Sep 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions site/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="pl">
<head>
<title>wyślij.co {% block subtitle %}{% endblock %}</title>
<meta charset="utf-8" />
Expand Down Expand Up @@ -33,7 +33,6 @@
<script src="/scripts.js" type="text/javascript"></script>

<link href="../output.css" rel="stylesheet" />
<title></title>
</head>
<body class="bg-white lg:bg-background">
{% include "svg_definitions.html" %}
Expand All @@ -43,7 +42,7 @@
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12 flex justify-between items-center">
<div class="flex items-center">
<a href="{{ url_for('index') }}">
<svg class="h-8" viewBox="0 0 765.89 155.28" xmlns="http://www.w3.org/2000/svg" style="stroke: none; border: none; outline: none; box-shadow: none;">
<svg class="h-8" viewBox="0 0 765.89 155.28" xmlns="http://www.w3.org/2000/svg" style="stroke: none; border: none; outline: none; box-shadow: none;" aria-label="Logo wyślij.co - powrót do strony głównej" role="img">
<use href="#logo-wyslij"></use>
</svg>
</a>
Expand Down
24 changes: 12 additions & 12 deletions site/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
{% extends "base.html" %}

{% block content %}
<div class="min-h-screen overflow-x-hidden">
<main class="min-h-screen overflow-x-hidden">
<div class="flex items-center justify-center px-6 md:px-8 py-8">
<div class="text-center max-w-4xl w-full">
<!-- Hero Text -->
<div class="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-light mt-6 mb-16 text-center leading-tight text-hero">
<div class="text-sectionTitle font-medium">
<h1 class="text-sectionTitle font-medium">
WYŚLIJ.CO<span class="text-gray-500">/FUNDACJI</span>
</div>
</h1>
</div>

<!-- Process Steps -->
<div class="process-steps space-y-8 md:space-y-12 mb-6">
<div class="process-step flex items-start text-left max-w-xs md:max-w-sm lg:max-w-md mx-auto">
<div class="step-number">1</div>
<div class="step-content">
<h3 class="step-title">Wybierz produkt z listy</h3>
<h2 class="step-title">Wybierz produkt z listy</h2>
<p class="step-description">na stronie wybranej przez Ciebie organizacji</p>
</div>
</div>

<div class="process-step flex items-start text-left max-w-xs md:max-w-sm lg:max-w-md mx-auto">
<div class="step-number">2</div>
<div class="step-content">
<h3 class="step-title">Zakup produkt online</h3>
<h2 class="step-title">Zakup produkt online</h2>
<p class="step-description">w podlinkowanym sklepie internetowym</p>
</div>
</div>

<div class="process-step flex items-start text-left max-w-xs md:max-w-sm lg:max-w-md mx-auto">
<div class="step-number">3</div>
<div class="step-content">
<h3 class="step-title">Wyślij prosto do organizacji</h3>
<h2 class="step-title">Wyślij prosto do organizacji</h2>
<p class="step-description">na wskazany adres dostawy</p>
</div>
</div>
Expand All @@ -44,7 +44,7 @@ <h3 class="step-title">Wyślij prosto do organizacji</h3>

<!-- Organization Links -->
<div class="organization-links text-center mb-12">
<div class="text-xl md:text-2xl lg:text-3xl font-light" id="org-links-container">
<div class="text-xl md:text-2xl lg:text-3xl font-light" id="org-links-container" aria-live="polite">
<div class="flex justify-center items-start gap-4">
<!-- Left side - WYŚLIJ.CO -->
<div class="text-sectionTitle font-medium" style="min-width: 120px; text-align: right;">
Expand All @@ -55,19 +55,19 @@ <h3 class="step-title">Wyślij prosto do organizacji</h3>
<div class="text-gray-700 text-left" style="min-width: 250px;">
<div class="org-link-line">
<span class="text-gray-600">/ </span>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="0"></a>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="0" aria-label="Link do organizacji"></a>
</div>
<div class="org-link-line">
<span class="text-gray-600">/ </span>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="1"></a>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="1" aria-label="Link do organizacji"></a>
</div>
<div class="org-link-line">
<span class="text-gray-600">/ </span>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="2"></a>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="2" aria-label="Link do organizacji"></a>
</div>
<div class="org-link-line">
<span class="text-gray-600">/ </span>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="3"></a>
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="3" aria-label="Link do organizacji"></a>
</div>
</div>
</div>
Expand All @@ -78,7 +78,7 @@ <h3 class="step-title">Wyślij prosto do organizacji</h3>
<a href="/organizacje/" class="zobacz-wiecej text-sectionTitle font-medium text-lg hover:underline">ZOBACZ WIĘCEJ</a>
</div>
</div>
</div>
</main>
</div>

<script>
Expand Down
26 changes: 13 additions & 13 deletions site/templates/info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "base.html" %}

{% block content %}
<div class="min-h-screen">
<main class="min-h-screen">
<div class="info-container">

<!-- Section 1: Jak zacząć pomagać? -->
Expand Down Expand Up @@ -58,14 +58,14 @@ <h2 class="info-card-title">Pomóż w rozwoju projektu</h2>
</section>

<section class="info-section">
<h1 class="info-section-title">JAK DZIAŁA WYŚLIJ.CO?</h1>
<h2 class="info-section-title">JAK DZIAŁA WYŚLIJ.CO?</h2>

<div class="info-grid-3">
<div>
<div class="info-step-header">
<div class="info-step-number">1</div>
<div>
<h3 class="info-step-title">Oni rejestrują się u nas</h3>
<h4 class="info-step-title">Oni rejestrują się u nas</h4>
</div>
</div>
<div class="info-step-content">
Expand All @@ -83,7 +83,7 @@ <h3 class="info-step-title">Oni rejestrują się u nas</h3>
<div class="info-step-header">
<div class="info-step-number">2</div>
<div>
<h3 class="info-step-title">My weryfikujemy</h3>
<h4 class="info-step-title">My weryfikujemy</h4>
</div>
</div>
<div class="info-step-content">
Expand All @@ -101,7 +101,7 @@ <h3 class="info-step-title">My weryfikujemy</h3>
<div class="info-step-header">
<div class="info-step-number">3</div>
<div>
<h3 class="info-step-title">Ty wspierasz i wysyłasz</h3>
<h4 class="info-step-title">Ty wspierasz i wysyłasz</h4>
</div>
</div>
<div class="info-step-content">
Expand All @@ -118,12 +118,12 @@ <h3 class="info-step-title">Ty wspierasz i wysyłasz</h3>
</section>

<section class="info-section">
<h1 class="info-section-title">DLACZEGO WARTO WYSŁAĆ?</h1>
<h2 class="info-section-title">DLACZEGO WARTO WYSŁAĆ?</h2>

<div class="info-grid-2-3">
<div>
<h3 class="info-benefit-title">
<span class="info-benefit-bullet"></span>
<span class="info-benefit-bullet" aria-hidden="true"></span>
Pomoc każdego dnia
</h3>
<p class="info-benefit-text">
Expand All @@ -134,7 +134,7 @@ <h3 class="info-benefit-title">

<div>
<h3 class="info-benefit-title">
<span class="info-benefit-bullet"></span>
<span class="info-benefit-bullet" aria-hidden="true"></span>
Konkretne wsparcie
</h3>
<p class="info-benefit-text">
Expand All @@ -146,7 +146,7 @@ <h3 class="info-benefit-title">

<div>
<h3 class="info-benefit-title">
<span class="info-benefit-bullet"></span>
<span class="info-benefit-bullet" aria-hidden="true"></span>
Proste kroki
</h3>
<p class="info-benefit-text">
Expand All @@ -157,7 +157,7 @@ <h3 class="info-benefit-title">

<div>
<h3 class="info-benefit-title">
<span class="info-benefit-bullet"></span>
<span class="info-benefit-bullet" aria-hidden="true"></span>
Wygodna dostawa
</h3>
<p class="info-benefit-text">
Expand All @@ -169,7 +169,7 @@ <h3 class="info-benefit-title">

<div>
<h3 class="info-benefit-title">
<span class="info-benefit-bullet"></span>
<span class="info-benefit-bullet" aria-hidden="true"></span>
Przejrzyste zasady
</h3>
<p class="info-benefit-text">
Expand All @@ -181,7 +181,7 @@ <h3 class="info-benefit-title">

<div>
<h3 class="info-benefit-title">
<span class="info-benefit-bullet"></span>
<span class="info-benefit-bullet" aria-hidden="true"></span>
Otwarta inicjatywa
</h3>
<p class="info-benefit-text">
Expand All @@ -194,5 +194,5 @@ <h3 class="info-benefit-title">
</section>

</div>
</div>
</main>
{% endblock %}
26 changes: 16 additions & 10 deletions site/templates/organization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,20 @@

{% block content %}

<div class="mx-auto mt-6">
<main class="mx-auto mt-6">
<!-- ORGANIZATION INFO -->
<div class="flex justify-center pb-8 md:pb-12">
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12">
<div class="pb-4 flex justify-between items-center">
<span class="text-md lg:text-lg font-bold"><span class="text-sectionTitle">wyślij.co/</span><span class="text-black">{{ data.adres }}</span></span>
<div class="flex items-center gap-3">
<button onclick="shareCurrentPage()" class="text-sectionTitle hover:text-amber-600 transition-colors">
<button onclick="shareCurrentPage()" class="text-sectionTitle hover:text-amber-600 transition-colors" aria-label="Udostępnij stronę organizacji">
<svg
fill="none"
stroke-width="1.5"
stroke="currentColor"
class="size-7 lg:size-9"
aria-hidden="true"
>
<use href="#icon-share"></use>
</svg>
Expand All @@ -36,19 +37,20 @@ <h1 class="text-black text-3xl lg:text-5xl">{{ data.nazwa }}</h1>
Wybierz produkt z listy poniżej, a podczas realizacji zamówienia kopiuj i wklejaj dane poniżej, żeby wysłać bezpośrednio do organizacji.
</div>

<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Dane do dostawy</h1>
<h2 class="text-sectionTitle mb-2 pl-1 text-2xl">Dane do dostawy</h2>

<!-- Two-column layout on medium screens and up -->
<div class="md:grid md:grid-cols-2 md:gap-6">
<!-- Left column: Address -->
<div class="pb-4">
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
<h3 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h3>
<div
class="copyable-field-first"
role="button"
tabindex="0"
onclick="copyText(this)"
onkeydown="handleCopyKeydown(event, this)"
aria-label="Kopiuj adres uliczny"
>
{{ data.dostawa.ulica }}
<svg
Expand All @@ -57,6 +59,7 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<use href="#icon-copy"></use>
</svg>
Expand All @@ -67,6 +70,7 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
tabindex="0"
onclick="copyText(this)"
onkeydown="handleCopyKeydown(event, this)"
aria-label="Kopiuj kod pocztowy"
>
{{ data.dostawa.kod }}
<svg
Expand Down Expand Up @@ -200,20 +204,21 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Uwagi do dostawy</h2>
<!-- PRODUCTS -->
<div class="flex justify-center pb-8 md:pb-12">
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12">
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Potrzebne produkty</h1>
<h2 class="text-sectionTitle mb-2 pl-1 text-2xl">Potrzebne produkty</h2>

<!-- Progressive grid layout: 1 col mobile, 3 md, 4 lg -->
<div class="products-grid">
{% for produkt in data.produkty %}
<div class="product-tile">
<a href="{{ produkt.link }}" target="_blank" class="flex flex-col h-full group">
<div class="flex justify-between items-start mb-2">
<h2 class="product-title">{{ produkt.nazwa }}</h2>
<h3 class="product-title">{{ produkt.nazwa }}</h3>
<svg
fill="none"
stroke-width="1.5"
stroke="currentColor"
class="product-icon"
aria-hidden="true"
>
<use href="#icon-external-link"></use>
</svg>
Expand All @@ -236,17 +241,17 @@ <h2 class="product-title">{{ produkt.nazwa }}</h2>

<div class="flex justify-center pb-6">
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12">
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Dodatkowe informacje</h1>
<h2 class="text-sectionTitle mb-2 pl-1 text-2xl">Dodatkowe informacje</h2>

<!-- Two-column layout on medium screens and up -->
<div class="md:grid md:grid-cols-2 md:gap-6">
<div class="pb-4">
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Numer KRS</h2>
<h3 class="text-sectionTitle mb-2 pl-1 text-lg">Numer KRS</h3>
<div class="info-field">{{ data.krs }}</div>
</div>

<div class="pb-4">
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
<h3 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h3>
<a
class="website-link"
href="{{data.strona}}"
Expand All @@ -259,6 +264,7 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
stroke-width="1.5"
stroke="currentColor"
class="size-6 ml-2"
aria-hidden="true"
>
<use href="#icon-external-link"></use>
</svg>
Expand All @@ -267,6 +273,6 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
</div>
</div>
</div>
</div>
</main>

{% endblock content %}
14 changes: 7 additions & 7 deletions site/templates/organizations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "base.html" %}

{% block content %}
<div class="min-h-screen">
<main class="min-h-screen">
<div class="info-container">

<!-- Main title -->
Expand All @@ -21,18 +21,18 @@ <h1 class="org-list-title">

<!-- Organizations list -->
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
{% for organization in organizations %}
<div class="org-list-item">
<span class="org-list-bullet"></span>
<li class="org-list-item">
<span class="org-list-bullet" aria-hidden="true"></span>
<a href="/{{ organization.adres }}" class="org-list-link">
{{ organization.nazwa }}
</a>
</div>
</li>
{% endfor %}
</div>
</ul>
</div>

</div>
</div>
</main>
{% endblock %}