Sekcja 1

Wartość x: 50

Sekcja 2

Wartość y: 52

Sekcja 3: Tabela

x\y 505152535455565758596061626364656667686970
52102103104105106107108109110111112113114115116117118119120121122
53103104105106107108109110111112113114115116117118119120121122123
54104105106107108109110111112113114115116117118119120121122123124
55105106107108109110111112113114115116117118119120121122123124125
56106107108109110111112113114115116117118119120121122123124125126
57107108109110111112113114115116117118119120121122123124125126127
58108109110111112113114115116117118119120121122123124125126127128
59109110111112113114115116117118119120121122123124125126127128129
60110111112113114115116117118119120121122123124125126127128129130
61111112113114115116117118119120121122123124125126127128129130131
62112113114115116117118119120121122123124125126127128129130131132
63113114115116117118119120121122123124125126127128129130131132133
64114115116117118119120121122123124125126127128129130131132133134
65115116117118119120121122123124125126127128129130131132133134135
66116117118119120121122123124125126127128129130131132133134135136
67117118119120121122123124125126127128129130131132133134135136137
68118119120121122123124125126127128129130131132133134135136137138
69119120121122123124125126127128129130131132133134135136137138139
70120121122123124125126127128129130131132133134135136137138139140

Sekcja 4

Suma wszystkich Z: 48279

Sekcja 5

Średnia wszystkich Z: 121

Otwórz w trybie kompatybilności.

Kod

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #main {
            display: grid;
            grid-template-rows: auto auto auto auto auto;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        section {
            padding: 10px;
            border: 1px solid #ccc;
        }
        .sekcja1 { 
            grid-column: 1; 
            grid-row: 1; 
            background-color: #f0f8ff; 
        }
        .sekcja2 { 
            grid-column: 2; 
            grid-row: 1; 
            background-color: #f5f5dc; 
        }
        .sekcja3 { 
            grid-column: 1 / span 2; 
            grid-row: 2; 
            background-color: #e0ffe0; 
        }
        .sekcja4 { 
            grid-column: 1; 
            grid-row: 3; 
            background-color: #ffe4e1; 
        }
        .sekcja5 {
            grid-column: 2; 
            grid-row: 3; 
            background-color: #fffacd; 
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="main">
<?php
// Losowanie liczb x i y
$x = rand(50, 59);
$y = rand($x + 1, 60);

// Inicjalizacja sumy i liczby elementów
$suma = 0;
$ilosc = 0;
?>
    <!-- Sekcja 1 -->
    <section class="sekcja1">
        <h3>Sekcja 1</h3>
        <p>Wartość x: <?php echo $x; ?></p>
    </section>

    <!-- Sekcja 2 -->
    <section class="sekcja2">
        <h3>Sekcja 2</h3>
        <p>Wartość y: <?php echo $y; ?></p>
    </section>

    <!-- Sekcja 3 -->
    <section class="sekcja3">
        <h3>Sekcja 3: Tabela</h3>
        <table>
            <tr>
                <th>x\y</th>
                <?php
                for ($i = $x; $i <= 70; $i++) {
                    echo "<th>$i</th>";
                }
                ?>
            </tr>
            <?php
            for ($j = $y; $j <= 70; $j++) {
                echo "<tr>";
                echo "<th>$j</th>";
                for ($i = $x; $i <= 70; $i++) {
                    $z = $i + $j;
                    $suma += $z;
                    $ilosc++;
                    // $colorR = abs(sin($z/2)*255)<70?70:abs(sin($z/2)*255); // Maksymalna wartość R to 255
                    // $colorG = abs(sin($z/2)*255)<70?70:abs(sin($z/2)*255); // Maksymalna wartość R to 255
                    // $colorB = abs(sin($z/2)*255)<70?70:abs(sin($z/2)*255); // Maksymalna wartość R to 255
                    $colorR = ($z*1) % 256;
                    $colorG = ($z*5) % 256;
                    $colorB = ($z*1) % 256;
                    echo "<td style='background-color: rgb($colorR, $colorG, $colorB);'>$z</td>";
                }
                echo "</tr>";
            }
            ?>
        </table>
    </section>

    <!-- Sekcja 4 -->
    <section class="sekcja4">
        <h3>Sekcja 4</h3>
        <p>Suma wszystkich Z: <?php echo $suma; ?></p>
    </section>

    <!-- Sekcja 5 -->
    <section class="sekcja5">
        <h3>Sekcja 5</h3>
        <p>Średnia wszystkich Z: <?php echo round($suma / $ilosc, 2); ?></p>
    </section>
        </div>
</body>
</html>