<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Karty Pracy - Dzień Kropki (5-6 Latki)</title>
    <style>
        @page {
            size: A4 portrait;
            margin: 0;
        }
        * {
            box-sizing: border-box;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .a4-page {
            width: 210mm;
            height: 297mm;
            padding: 15mm;
            margin: 10px auto;
            background: #ffffff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            page-break-after: always;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            border: 8px dashed #4A90E2;
        }
        .header {
            text-align: center;
            border-bottom: 3px stroke #333;
            padding-bottom: 10px;
        }
        .header h1 {
            margin: 0;
            font-size: 24pt;
            color: #2C3E50;
            text-transform: uppercase;
        }
        .header p {
            margin: 5px 0 0 0;
            font-size: 12pt;
            color: #7F8C8D;
            font-weight: bold;
        }
        .content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin: 20px 0;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            font-size: 12pt;
            border-top: 2px solid #BDC3C7;
            padding-top: 10px;
            font-weight: bold;
        }
        
        /* ZADANIE 1: CIENIE */
        .shadow-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            align-items: center;
            height: 100%;
        }
        .shadow-item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            border: 2px stroke #ddd;
            border-radius: 15px;
            background: #FAFAFA;
        }
        .dot-shape {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: inline-block;
        }

        /* ZADANIE 2: RYTMY */
        .rythm-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #F9F9F9;
            padding: 15px;
            border-radius: 12px;
            border: 2px solid #E0E0E0;
        }
        .circle-sequence {
            display: flex;
            gap: 10px;
        }
        .circle-box {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 3px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* ZADANIE 3: KOSTKA MATEMATYCZNA */
        .math-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            text-align: center;
        }
        .dice-card {
            border: 3px solid #333;
            border-radius: 15px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 120px;
        }
        .legend-bar {
            display: flex;
            justify-content: space-around;
            background: #EAF2F8;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        /* MEDAL */
        .medal-container {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .medal-circle {
            width: 220mm;
            width: 160mm;
            height: 160mm;
            border: 10px solid #F1C40F;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #FFFDF0;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
        }

        @media print {
            body { background: none; }
            .a4-page {
                margin: 0;
                box-shadow: none;
                width: 210mm;
                height: 297mm;
            }
        }
    </style>
</head>
<body>

    <!-- KARTA 1: DOPASUJ CIENIE -->
    <div class="a4-page" style="border-color: #FF6B6B;">
        <div class="header">
            <h1>KARTA PRACY: DOPASUJ CIENIE</h1>
            <p>Połącz linią kolorową kropkę z jej czarnym cieniem po prawej stronie!</p>
        </div>
        <div class="content">
            <div class="shadow-grid">
                <!-- Kolorowe -->
                <div class="shadow-item"><div class="dot-shape" style="background: #FF4757; border: 4px stroke #C0392B;"></div></div>
                <!-- Cienie -->
                <div class="shadow-item"><div class="dot-shape" style="background: #2C3E50;"></div></div>

                <div class="shadow-item"><div class="dot-shape" style="background: #2ED573; border-radius: 10px;"></div></div>
                <div class="shadow-item"><div class="dot-shape" style="background: #2C3E50; border-radius: 10px;"></div></div>

                <div class="shadow-item"><div class="dot-shape" style="background: #1E90FF; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div></div>
                <div class="shadow-item"><div class="dot-shape" style="background: #2C3E50; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div></div>

                <div class="shadow-item"><div class="dot-shape" style="background: #FFA502; border: 6px stroke #D35400;"></div></div>
                <div class="shadow-item"><div class="dot-shape" style="background: #2C3E50;"></div></div>
            </div>
        </div>
        <div class="footer">
            <span>Imię dziecka: ......................................................</span>
            <span>Ocena: 🟢 / 🟡 / 🔴</span>
        </div>
    </div>

    <!-- KARTA 2: ŚLIMAKOWE RYTMY -->
    <div class="a4-page" style="border-color: #FFA502;">
        <div class="header">
            <h1>KARTA PRACY: ODKRYJ RYTM</h1>
            <p>Pokoloruj puste kółka zgodnie z rozpoczętym wzorem kolorów!</p>
        </div>
        <div class="content">
            <!-- Rytm 1 -->
            <div class="rythm-row">
                <h3>Wzór 1:</h3>
                <div class="circle-sequence">
                    <div class="circle-box" style="background: #FF4757;"></div>
                    <div class="circle-box" style="background: #2ED573;"></div>
                    <div class="circle-box" style="background: #FF4757;"></div>
                    <div class="circle-box" style="background: #2ED573;"></div>
                    <div class="circle-box" style="background: #FFF;"></div>
                    <div class="circle-box" style="background: #FFF;"></div>
                </div>
            </div>
            <!-- Rytm 2 -->
            <div class="rythm-row">
                <h3>Wzór 2:</h3>
                <div class="circle-sequence">
                    <div class="circle-box" style="background: #1E90FF;"></div>
                    <div class="circle-box" style="background: #FFA502;"></div>
                    <div class="circle-box" style="background: #1E90FF;"></div>
                    <div class="circle-box" style="background: #FFA502;"></div>
                    <div class="circle-box" style="background: #FFF;"></div>
                    <div class="circle-box" style="background: #FFF;"></div>
                </div>
            </div>
            <!-- Rytm 3 -->
            <div class="rythm-row">
                <h3>Wzór 3:</h3>
                <div class="circle-sequence">
                    <div class="circle-box" style="background: #9B59B6;"></div>
                    <div class="circle-box" style="background: #9B59B6;"></div>
                    <div class="circle-box" style="background: #2ED573;"></div>
                    <div class="circle-box" style="background: #9B59B6;"></div>
                    <div class="circle-box" style="background: #FFF;"></div>
                    <div class="circle-box" style="background: #FFF;"></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <span>Imię dziecka: ......................................................</span>
            <span>Ocena: 🟢 / 🟡 / 🔴</span>
        </div>
    </div>

    <!-- KARTA 3: MATEMATYKA Z KOSTKĄ -->
    <div class="a4-page" style="border-color: #2ED573;">
        <div class="header">
            <h1>KARTA PRACY: KROPKOWA KOSTKA</h1>
            <p>Policz kropki w każdym okienku i pokoloruj pole wg legendy na górze!</p>
        </div>
        <div class="content">
            <div class="legend-bar">
                <span><strong>1</strong> = 🟢 Zielony</span>
                <span><strong>2</strong> = 🟡 Żółty</span>
                <span><strong>3</strong> = 🔴 Czerwony</span>
                <span><strong>4</strong> = 🔵 Niebieski</span>
            </div>
            <div class="math-grid">
                <div class="dice-card">
                    <div style="font-size: 30pt;">●</div>
                    <p>Ile kropek?</p>
                </div>
                <div class="dice-card">
                    <div style="font-size: 25pt;">● ●</div>
                    <p>Ile kropek?</p>
                </div>
                <div class="dice-card">
                    <div style="font-size: 20pt;">●<br>● ●</div>
                    <p>Ile kropek?</p>
                </div>
                <div class="dice-card">
                    <div style="font-size: 20pt;">● ●<br>● ●</div>
                    <p>Ile kropek?</p>
                </div>
                <div class="dice-card">
                    <div style="font-size: 30pt;">●</div>
                    <p>Ile kropek?</p>
                </div>
                <div class="dice-card">
                    <div style="font-size: 25pt;">● ●</div>
                    <p>Ile kropek?</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <span>Imię dziecka: ......................................................</span>
            <span>Ocena: 🟢 / 🟡 / 🔴</span>
        </div>
    </div>

    <!-- KARTA 4: MEDAL ODKRYWCY -->
    <div class="a4-page" style="border-color: #F1C40F;">
        <div class="header">
            <h1>DYPLOM / MEDAL DLA PRZEDSZKOLAKA</h1>
            <p>Wytnij medal po zewnętrznej linii i powieś na kolorowej wstążce!</p>
        </div>
        <div class="content">
            <div class="medal-container">
                <div class="medal-circle">
                    <span style="font-size: 40pt;">🏅</span>
                    <h2 style="font-size: 22pt; margin: 10px 0; color: #2C3E50;">MEDAL ODKRYWCY</h2>
                    <h1 style="font-size: 28pt; margin: 0; color: #E74C3C;">TALENTU</h1>
                    <p style="font-size: 14pt; margin-top: 15px; color: #7F8C8D;">MIĘDZYNARODOWY DZIEŃ KROPKI</p>
                    <p style="font-size: 12pt; font-weight: bold; color: #2980B9;">Dla: .....................................................</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <span>Data: 15 września</span>
            <span>Podpis Nauczyciela: ....................................</span>
        </div>
    </div>

</body>
</html>
