После добавления php скрипта отключился css

Question

После добавления на страницу PHP-скрипта CSS просто отключился. Буду очень благодеран. Сам я лишь любитель, так что не ругайте за код).

Сама страница:

<html>
<head>
    <meta charset="UTF-8">
    <title>Создание миниатюр..</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<div>
<div id="cube-loader">
    <div class="caption">
        <div class="cube-loader">
            <div class="cube loader-1"></div>
            <div class="cube loader-2"></div>
            <div class="cube loader-4"></div>
            <div class="cube loader-3"></div>

        </div>
        <div> <p class="text1">Создание миниатюр...</p>
        <p class="text2"> Не закрывайте страницу.</p>
    </div>

</div>
<?php
require_once ('resize.php');
$newdir = 'content/thumbs';// ссылка на папку с миниатюрами
$w_o = '300';// ширина готовой картинки

$directory = 'content';

$allowed_types=array('jpg','jpeg','gif','png');
$file_parts=array();
$ext='';
$title='';
$i=0;

$dir_handle = @opendir($directory) or die("Ошибка директории!");

while ($file = readdir($dir_handle))
{
    if($file=='.' || $file == '..') continue;

    $file_parts = explode('.',$file);
    $ext = strtolower(array_pop($file_parts));

    $title = implode('.',$file_parts);
    $title = htmlspecialchars($title);

    $nomargin='';

    if(in_array($ext,$allowed_types))
    {
        if(($i+1)%4==0) $nomargin='nomargin';

       // echo '
        //<div class="containerimage"><div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.')">
        //<a data-fancybox="gallery" href="'.$directory.'/'.$file.'"></a>
        
        //</div> </div>';
        $image = "'.$directory."/".$file.";
        resize($image, $image,$newdir,$w_o);
        $i++;
    }
}
//<a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>
closedir($dir_handle);

?>

</body>
</html>

resize.php:

//$image = '234.png';// ссылка на файл
//$newdir = 'content/thumbs';// ссылка на папку с миниатюрами
//$w_o = '300';// ширина готовой картинки

/*
$image, $w_o = false, $h_o = false
*/
function resize($file, $image, $newdir, $w_o) {
    $size = getimagesize ($file);

    $h = $size[1] / $size[0] * $w_o;
    $h_o = ceil($h);
    echo $h_o;
    if (($w_o < 0) || ($h_o < 0)) {
        echo "Некорректные входные параметры";
        return false;
    }
    list($w_i, $h_i, $type) = getimagesize($image); // Получаем размеры и тип изображения (число)
    $types = array("", "gif", "jpeg", "png"); // Массив с типами изображений
    $ext = $types[$type]; // Зная "числовой" тип изображения, узнаём название типа
    if ($ext) {
        $func = 'imagecreatefrom'.$ext; // Получаем название функции, соответствующую типу, для создания изображения
        $img_i = $func($image); // Создаём дескриптор для работы с исходным изображением
    } else {
        echo 'Некорректное изображение'; // Выводим ошибку, если формат изображения недопустимый
        return false;
    }

    if (!$h_o) $h_o = $w_o / ($w_i / $h_i);
    if (!$w_o) $w_o = $h_o / ($h_i / $w_i);
    $img_o = imagecreatetruecolor($w_o, $h_o); // Создаём дескриптор для выходного изображения
    imagecopyresampled($img_o, $img_i, 0, 0, 0, 0, $w_o, $h_o, $w_i, $h_i); // Переносим изображение из исходного в выходное, масштабируя его
    $func = 'image'.$ext; // Получаем функция для сохранения результата
    $imgdir = "{$newdir}/thumb_{$image}";
    return $func($img_o, $imgdir); // Сохраняем изображение
}

// Вызываем функцию
//resize($image, $image,$newdir,$w_o);

styles.css:

html, body {
    height: 100%;
}

#cube-loader {
    align-items: center;
    display: flex;
    height: 100%;
    width: 100%;
    position: fixed;
}
#cube-loader .caption {
    margin: 0 auto;
}
#cube-loader .cube-loader {
    width: 73px;
    height: 73px;
    margin: 0 auto;
    margin-top: 49px;
    position: relative;
    transform: rotateZ(45deg);
}
#cube-loader .cube-loader .cube {
    position: relative;
    transform: rotateZ(45deg);
    width: 50%;
    height: 50%;
    float: left;
    transform: scale(1.1);
}
#cube-loader .cube-loader .cube:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #34495e;
    animation: cube-loader 2.76s infinite linear both;
    transform-origin: 100% 100%;
}
#cube-loader .cube-loader .loader-2 {
    transform: scale(1.1) rotateZ(90deg);
}
#cube-loader .cube-loader .loader-3 {
    transform: scale(1.1) rotateZ(180deg);
}
#cube-loader .cube-loader .loader-4 {
    transform: scale(1.1) rotateZ(270deg);
}
#cube-loader .cube-loader .loader-2:before {
    animation-delay: 0.35s;
}
#cube-loader .cube-loader .loader-3:before {
    animation-delay: 0.69s;
}
#cube-loader .cube-loader .loader-4:before {
    animation-delay: 1.04s;
}

@keyframes cube-loader {
    0%, 10% {
        transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        transform: perspective(136px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}
.text1 {
    margin-top: 30px;
    font-family: 'Roboto';
    margin-block-end: 0em;!important;
    font-size: 23px;
    color: #3e3e3e;
}
.text2 {
    margin-block-start: 3px!important;
    font-family: 'Roboto';
    font-size: 13px;
    text-align: center;
    color: #7a7a7a;
}

Помогите пожалуйста

БЛОГ НА HUSL

После добавления php скрипта отключился css

Ответы (0 шт):