Untitled

<?php
require 'db.php';
$timetableQuery = $db->query("SELECT * FROM weekend ORDER BY `intday`");
$timetable = [];
while ($row = $timetableQuery->fetch_assoc()) {
    $timetable[$row['day']][] = $row;
}
$weekDays = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье', "Нестабильные релизы"];
 ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .timetable-block {
        width: 250px;
        padding-bottom: 2%;
        background: #FDE1C5;
    }

    #timetable-title {
        padding: 11px 0px;
        display: block;
        text-align: center;
        color: #c97e09;
        font-size: 18px;
        border-bottom: 1px solid #fbc167;
    }

    #timetable-descr {
        padding: 8px 0px;
        display: block;
        text-align: center;
        color: #825001;
        font-weight: bold;
        font-size: 12px;
    }

    #attention {
        padding: 6px 4px 7px 4px;
        display: block;
        text-align: center;
        color: red;
        font-weight: bold;
        font-size: 14px;
        margin-top: 2%;
    }


    }

    .static h1 {
        text-align: center;
        padding: 11px 0px;
    }

    .static p {
        text-align: center;
        padding: 8px 0px;
    }

    .timetable-accordeon {
        margin-top: 5%;
    }

    .acc-head {
        display: block;
        background: #ffb84d;
        color: #fff;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 15px;
        height: 40px;
        margin-top: 3%;
        width: 100%;
        text-align: center;
    }

    .acc-head h1 {
        font-size: 18px;
    }

    .acc-body {
        display: none;
    }

    .acc-body .anime {
        position: relative;


    }

    .acc-body .anime a {
        display: block;
        padding: 7px;
        margin-top: 2px;
        background: rgb(250, 212, 144);
        color: rgb(175, 120, 23);
        position: relative;
        text-decoration: none;
    }

    .descr {
        display: none;
        margin-left: 200px;
        padding: 10px;

        background: #f3f3f3;
        height: auto;
        -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    }

    .descr .descr-container {
        display: flex;
    }

    .anime:hover .descr {
        display: block;
        position: absolute;
        background: #FDE5C4;
        z-index: 9999;
        width: 600px;
    }

    .anime:hover .descr .descr-container .text-block {
        color: #3d3d3d;
    }

    .descr .descr-container .media-block .timer p {
        border: 1px solid #FFB84D;
        padding: 10px;
        background: #FFB84D;
        border-radius: 2px;
    }

    .acc-body a {
        display: block;
        padding: 7px;
        margin-top: 2px;
        background: rgb(250, 212, 144);
        color: rgb(175, 120, 23);
        position: relative;
        text-decoration: none;
    }
    </style>
    <div class="timetable-block">
        <div class="static">
            <h1 id="timetable-title">Расписание</h1>
            <hr>
            <p id="timetable-descr">Представлены только те аниме, которые озвучивает сайт animevost.</p>

            <div class="timetable-accordeon">
                <?php
                $i=0;
                ?><pre><?php print_r($timetable) ?></pre><?php die;
                foreach ($timetable as $day => $animes) {


?>
                <div class="acc-head">

                    <h1><?php echo $weekDays[$i]; $i++; ?></h1>
                </div>
                <?php  foreach ($animes as $key => $anime) { ?>

                <div class="acc-body">

                    <div class="anime">
                        <a href=""><?php echo $anime['name']; ?></a>
                        <div class="descr">
                            <div class="descr-container">
                                <div class="text-block">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quos incidunt earum commodi. Recusandae optio neque ullam ab, animi quibusdam, beatae illum quisquam rerum minus, magni totam molestias deserunt esse nisi eos. Quae ipsum consequuntur excepturi magnam eveniet totam incidunt autem at natus nesciunt, voluptates, libero, aliquam doloremque! Accusamus sequi doloribus fugit aliquid nihil, quas harum, similique voluptatem placeat exercitationem dolores perferendis ratione ex voluptates saepe iusto quidem asperiores praesentium ipsum excepturi. Numquam dignissimos voluptas, ab illum voluptatum natus temporibus corporis adipisci fuga qui, animi doloremque velit repudiandae incidunt nostrum laudantium veritatis similique accusamus dicta delectus eaque sunt, ipsam odit.
                                </div>
                                <div class="media-block">
                                    <img src="https://a8.agorov.org/uploads/posts/2019-07/1562792792_1.jpg" alt="">
                                    <div class="timer">
                                        <p>До новой серии осталось 00:00:00</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


            <?php }} ?>
            </div>
            <p id="attention">Указано время выхода релиза в русской озвучке. (Московское)</p>
        </div>
    </div>
    <script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $('.timetable-accordeon .acc-head').on('click', f_acc);
    });

    function f_acc() {
        $('.timetable-accordeon .acc-body').not($(this).next()).slideUp(500);
        $(this).next().slideToggle(500);
    }
    </script>
</body>

</html>