main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/x-icon" href="/favicon.png">
    <meta charset="UTF-8">
    <meta name="description" content="Магазин велосипедов с анимированным карусельным отображением">
    <meta name="keywords" content="велосипеды, магазин, спорт, активный отдых">
    <title>Магазин велосипедов</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Shafarik&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: "Shafarik", system-ui;
            font-weight: 400;
            font-style: normal;
        }
        .wheel-container {
            position: relative;
            width: 1000px;
            height: 1000px;
            margin: 200px auto;
            margin-left: 45%;
        }

        .wheel-container.second {
            display: none;
            animation-duration: .4s ;
        }

        .crutch {
            position: relative;
            height: 400px;
            margin-top: -1000px;
            cursor: pointer;
            transition: transform 0.5s;
        }

        .crutch.broken {
            display: none;
        }

        .crutch img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .scroll { 
		/* enable div scrolling */ 
        overflow: auto; 

			height: 50%; 
			background-color: rgb(255, 255, 255); 
			border: 1px black solid; 
			padding: 2%; 
			width: 85%; 
			margin: 0 auto; 
			font-size: large; 
	    }
        .wheel-item {
            border: 5px solid black;
            position: absolute;
            width: 200px;
            height: 200px;
            transform-origin: center;
            animation: rotate 1s linear infinite;
        }

        .wheel-item img {
            height: 200px;
            width: 200px;
            object-fit: cover;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg) translateX(300px) rotate(0deg);
            }
            to {
                transform: rotate(360deg) translateX(300px) rotate(-360deg);
            }
        }
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
    z-index: -1;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
    </style>
    <!-- Chatra {literal} -->
<script>
    (function(d, w, c) {
        w.ChatraID = 'HkjoreZ7TDjDoHKoE';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = 'https://call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->
</head>

<body>
<div style="background-color: white; width: 100%; height: 1000px; margin-bottom: 200px;">
<h1>502 hnginx sdoh</h1>
<br>
<br>
<br>

<br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br>v
</div>

<div class="header" style="display: flex; justify-content: space-between; align-items: center;">
<a href="#" class="logo"><img src="favicon.png" alt=""></a>
<a href="#" class="logo"><img src="favicon.jpg" alt=""></a>
<div class="nav ul li" style="background-color: #fff;"><a href="/">Главная блять</a></div>
</div>
<video autoplay="true" id="myVideo">
</video>
<h1 style="background-color: #fff;">Привет безумцы! Кто наше Магазин велосипедов</h1>
<img src="image.png">
<input type="text" id="name" placeholder="Имя">
<input type="text" id="lastname" placeholder="Фамилия">
<button onclick="mypostlol()">Отправить</button>
<a href="/admin"><h1 style="background-color: #fff;">ADMINKA</h1></a>
<div class="wheel-container">
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 0s"><img
            src="велосипед1.jpg" alt="Велосипед 1"></a>
    <a href="/2" class="wheel-item" style="animation-delay: 0.7s"><img
            src="велосипед2.jpg" alt="Велосипед 2"></a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 1.4s"><img
            src="велосипед3.jpg" alt="Велосипед 3"></a>
    <a href="/4" class="wheel-item" style="animation-delay: 2.1s"><img
            src="велосипед4.jpg" alt="Велосипед 4"></a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 2.8s"><img
            src="велосипед5.jpg" alt="Велосипед 5"></a>
    <a href="/6" class="wheel-item" style="animation-delay: 3.5s"><img
            src="велосипед6.jpg" alt="Велосипед 6"></a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 4.2s"><img
            src="велосипед7.jpg" alt="Велосипед 7"></a>
    <a href="/8" class="wheel-item" style="animation-delay: 4.9s"><img
            src="велосипед8.jpg" alt="Велосипед 8"></a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 5.6s"><img
            src="велосипед9.jpg" alt="Велосипед 9"></a>
    <a href="/10" class="wheel-item" style="animation-delay: 6.3s"><img
            src="велосипед10.jpg" alt="Велосипед 10"></a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 7s"><img
            src="велосипед11.jpg" alt="Велосипед 11"></a>
    <a href="/12" class="wheel-item" style="animation-delay: 7.7s"><img
            src="велосипед12.jpg" alt="Велосипед 12"></a>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="wheel-item" style="animation-delay: 8.4s"><img
            src="велосипед13.jpg" alt="Велосипед 13"></a>
    <a href="/14" class="wheel-item" style="animation-delay: 9.1s"><img
            src="велосипед14.jpg" alt="Велосипед 14"></a>
</div>

<div class="crutch">
    <img src="костыль.png" alt="Костыль">
</div>

<div class="wheel-container second">
    <a href="/crutch1" class="wheel-item" style="animation-delay: 0s"><img
            src="геометрияяяяя.jpg" alt="Костыльный велосипед 1"></a>
    <a href="/crutch2" class="wheel-item" style="animation-delay: 0.7s"><img
            src="костылепед.png" alt="Костыльный велосипед 2"></a>
    <a href="/crutch3" class="wheel-item" style="animation-delay: 1.4s"><img
            src="костыльныйвелик.jpg" alt="Костыльный велосипед 3"></a>
    <a href="/crutch4" class="wheel-item" style="animation-delay: 2.1s"><img
            src="безумхкабилайк.jpg" alt="Костыльный велосипед 4"></a>
    <a href="/crutch5" class="wheel-item" style="animation-delay: 2.8s"><img
            src="велограбли.jpg" alt="Костыльный велосипед 5"></a>
    <a href="/crutch6" class="wheel-item" style="animation-delay: 3.5s"><img
            src="велосипедколяска.jpg" alt="Костыльный велосипед 6"></a>
    <a href="/crutch6" class="wheel-item" style="animation-delay: 4.9s"><img
            src="костыльныйвелик.jpg" alt="Костыльный велосипед 6"></a>
    <a href="/crutch6" class="wheel-item" style="animation-delay: 6.3s"><img
            src="2костыля.jpg" alt="Костыльный велосипед 6"></a>
    <a href="/crutch6" class="wheel-item" style="animation-delay: 7.7s"><img
            src="безумхкабилайк.jpg" alt="Костыльный велосипед 6"></a>
    <a href="/crutch6" class="wheel-item" style="animation-delay: 9.1s"><img
            src="велосипедколяска.jpg" alt="Костыльный велосипед 6"></a>
    <a href="/crutch6" class="wheel-item" style="animation-delay: 10.5s"><img
            src="геометрияяяяя.jpg" alt="Костыльный велосипед 6"></a>
</div>

<footer style="display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: #fff;">
    вот кого надо взять на работу 30000к/нс
    <br>максим
    <br>наис
    <br>павел (не енот)
    <br>алексей
    <br>https://github.com/nais2008/bezumhack
    <br> <a href="https://www.wildberries.ru/catalog/237104748/detail.aspx?targetUrl=EX">наш мерч</a>
    <br>
    <img src="нашакоманда.jpg">
    <h3>наша тима</h3>
    <audio controls autoplay src="Научно-технический%20рэп%20-%20Костыль%20и%20велосипед.mp3" type="audio/mp3" id="audio">Извините но это
        мы
    </audio>
</footer>

<script>
    audio = document.getElementById("audio");
    var first = true;
    document.onclick = function () {
        if (first == true) audio.play()
        first = false;}
    let video = document.querySelector("#myVideo");
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {video.srcObject = stream;});
    } else {
        alert("это пиздец");
    }
    function mypostlol() {
        fetch("http://localhost:80/", {
            method: "POST",
            body: JSON.stringify({
                name: document.getElementById("name").value,
                lastname: document.getElementById("lastname").value,
            }),
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            }
        });
        location.reload();
    }

    document.querySelector('.crutch').addEventListener('click', function() {
        this.classList.add('broken');
        setTimeout(() => {
            document.querySelector('.wheel-container').style.display = 'none';
            document.querySelector('.wheel-container.second').style.display = 'block';
        }, 500);
    });
</script>


<div class="scroll">
    ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ ВЕБ-САЙТА «VELOCRUTCH-ULTRA»<br>
Дата вступления в силу: 32 февраля 2025 г.<br>
<br>
1. ПРЕАМБУЛА
Настоящее Соглашение (далее — «Соглашение») регулирует отношения между ООО «Велокостыль-Мастер» (далее — «Компания») и любым лицом, осмелившимся посетить сайт www.velocrutch-ultra.ru (далее — «Сайт»). Используя Сайт, вы соглашаетесь, что:
<br>
достигли возраста 150 лет или получили разрешение от домашнего питомца;
<br>
готовы нести ответственность за последствия просмотра нашего дизайна, включая временную потерю вкуса и спонтанное желание вязать носки;
<br>
обязуетесь прочесть этот текст до конца, даже если ваши глаза начнут плакать.
<br>
2. ИНТЕЛЛЕКТУАЛЬНАЯ СОБСТВЕННОСТЬ<br>
2.0 Вся документация, скопированная с https://github.com/Gray-Advantage/Datanar-Django не подлежит дальнейшему копированию
<br>
2.1. Все элементы Сайта, включая, но не ограничиваясь, графикой, напоминающей детские каракули, и шрифтами, вызывающими ностальгию по Windows 95, защищены авторским правом.
<br>
2.2. Запрещено копировать, воспроизводить или использовать контент Сайта без письменного разрешения Компании, кроме случаев, когда вы хотите продемонстрировать друзьям «как не надо делать сайты».
<br>
2.3. Логотип «VELOCRUTCH-ULTRA» (изображение велосипеда, встроенного в костыль) запрещено использовать в качестве оберега от злых духов.
<br>
3. ОГРАНИЧЕНИЯ ИСПОЛЬЗОВАНИЯ<br>
3.1. Вы соглашаетесь:<br>
<br>
Не пытаться улучшить дизайн Сайта, даже если ваши руки чешутся. Мы гордимся его уродством!
<br>
Не заказывать более 3 велосипедов с костылями в час, чтобы не вызвать квантовый коллапс нашей системы.
<br>
Не использовать Сайт для гадания на кофейной гуще. Для этого у нас есть раздел «Акции».
<br>
3.2. При попытке взлома Сайта вы автоматически соглашаетесь:
<br>
Переустановить нам Windows на офисных компьютерах;
<br>
Выучить наизусть документацию джанги;
<br>
Прислать фото вашей кошки в костюме Наполеона.
<br>
4. ГАРАНТИИ И ОТВЕТСТВЕННОСТЬ<br>
4.1. Компания гарантирует, что:<br>
<br>
Данила главенствует миром
<br>
Велосипеды с костылями не пропадут из вашего кода (вряд ли когда-нибудь начнете писать нормально);
<br>
Костыли защищены от чистого кода.
<br>
4.2. Компания не несет ответственности:<br>
<br>
Если ваш новый велосипед привлечёт стаю ёжиков, одержимых идеями мировой революции во имя чистого кода;
<br>
Если дизайн Сайта вызовет у вас желание выйти в окно;
<br>
За исчезновение носков в стиральной машине и ундецеллиона рублей с вашего счета после оформления заказа.
<br>
5. УСЛОВИЯ ДОСТАВКИ<br>
5.1. Доставка осуществляется:<br>

Гномами на самокатах (в пределах МКАД);
<br>
Драконами (для международных заказов, кроме Австралии — там драконы на карантине);
<br>
Телепортацией (только по пятницам, если вы угадаете пароль: «Я не люблю flake8»).
<br>
5.2. Возврат товара возможен, если:<br>

Вы докажете, что велосипед с костылями не смог победить в гонке «Формулы-1»;<br>
<br>
Приложите видео, где вы танцуете ламбаду с курьером и закусываете пловом с енотом.
<br>
6. КОНФИДЕНЦИАЛЬНОСТЬ<br>
6.1. Мы обязуемся продать ваши данные только:<br>

Инопланетянам с Альфа Центавры (они обещали не спамить);
<br>
Призракам бывших сотрудников, которые до сих пор грустят об уволенном дизайнере (они еще не знают, что его никогда не было).
<br>
6.2. Ваши пароли храняться в тетрадке нашего сисадмина, лучше не расстраивать его, а то запишет в тетрадь смерти.
<br>
6.3 Мы выдадим ваши данные (ФИО, фото) по первому запросу ягами лайта
<br>
7. ЗАКЛЮЧИТЕЛЬНЫЕ ПОЛОЖЕНИЯ<br>
7.1. Споры решаются в Суде Данилы (адрес: город сЕдые ул. дети, 16 листов ишью, страна Джангистская). В качестве адвоката вам предоставят говорящего ЁЖИКА.<br>
7.2. Компания оставляет за собой право:<br>
Продать все данные третьим, четвертым, пятым, шестым, и другим лицам;
<br>
Заменить текст Соглашения стихами Маяковского;
<br>
Требовать от вас ежедневно скидывать мемы в чат поддержки (это важно для статистики).<br>
7.3 На любые вопросы поддержка может ответить "А вас это ебать не должно" и закрыть чат;<br>
7.4. Если вы дочитали до конца, введите промокод «ЯГерой» для скидки +14.88%. Вы заслужили нашу гордость!<br>
<br>

С <s>уважением</s>, а скорее нет,<br>
Команда VELOCRUTCH-ULTRA<br>
«Делаем мир <s>удобнее</s> хуже :)»
</div>

</body>
</html>