Форум Русскоязычных Скретчеров

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Тест сайта

Страница: 1
Ответить

Сообщений 1 страница 5 из 5

1

  • Автор: Dirimaximus (kattysha)
  • Сертифицированный Мактавиш
  • Dirimaximus (kattysha)
  • Откуда: Оставили в Чехии ###нуть.
  • Зарегистрирован: 30 декабря, 2024г.
  • Сообщений: 636
  • Уважение: +30
  • Позитив: +70
  • Пол: Мужской
  • Возраст: 35 [1990-06-21]
  • Провел на форуме:
    2 дня 23 часа
  • Последний визит:
    Сегодня 13:08:06

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#121212">
    <title>Linux Distro Hub</title>
    <style>
        /* === БАЗОВЫЕ ЦВЕТА (ТЁМНАЯ ТЕМА) === */
        html {
            background: #121212;
            background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
            color: #e0e0e0;
        }
        body {
            background: #121212;
            background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
        }
        .card, header {
            background: #1e1e1e;
            border-color: #334155;
        }
        h1, .card-title, .version span, .section-title, footer a {
            color: #00ff88;
        }
        .card-desc, .version, header p, footer {
            color: #94a3b8;
        }
        .btn {
            background: #00ff88;
        }
        .info-box {
            background: #0f172a;
            border-color: #1e40af;
            color: #60a5fa;
        }
        .divider {
            background: #334155;
        }
        .theme-btn {
            background: #1e1e1e;
            border-color: #00ff88;
        }

        /* === СВЕТЛАЯ ТЕМА — ПЕРЕОПРЕДЕЛЯЕМ ВСЁ === */
        html.light {
            background: #f8fafc;
            background: linear-gradient(180deg, #f8fafc 0%, #e8ecf1 100%);
            color: #1e293b;
        }        html.light body {
            background: #f8fafc;
            background: linear-gradient(180deg, #f8fafc 0%, #e8ecf1 100%);
        }
        html.light .card, html.light header {
            background: #ffffff;
            border-color: #e2e8f0;
        }
        html.light h1, html.light .card-title, html.light .version span,
        html.light .section-title, html.light footer a {
            color: #059669;
        }
        html.light .card-desc, html.light .version, html.light header p, html.light footer {
            color: #64748b;
        }
        html.light .btn {
            background: #059669;
        }
        html.light .info-box {
            background: #eff6ff;
            border-color: #93c5fd;
            color: #1d4ed8;
        }
        html.light .divider {
            background: #e2e8f0;
        }
        html.light .theme-btn {
            background: #ffffff;
            border-color: #059669;
        }

        /* === БАЗОВЫЕ СТИЛИ === */
        #theme-toggle {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        html {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.5;
            min-height: 100%;
            transition: background 0.3s, color 0.3s;
        }

        body {
            padding: 16px;            padding-top: 70px;
            min-height: 100vh;
            transition: background 0.3s;
        }

        .theme-btn {
            position: fixed;
            top: 12px;
            right: 12px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid;
            font-size: 22px;
            cursor: pointer;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s, background 0.3s, border-color 0.3s;
            user-select: none;
        }

        .theme-btn:active { transform: scale(0.95); }

        #theme-toggle:checked ~ .app .theme-btn::after { content: '🌙'; }
        #theme-toggle:not(:checked) ~ .app .theme-btn::after { content: '☀️'; }

        .container { max-width: 900px; margin: 0 auto; }

        header {
            text-align: center;
            padding: 24px;
            border-bottom: 2px solid;
            margin-bottom: 20px;
            border-radius: 12px;
            transition: background 0.3s, border-color 0.3s;
        }

        h1 { font-size: 1.6rem; margin-bottom: 6px; transition: color 0.3s; }
        header p { transition: color 0.3s; }

        .info-box {
            border: 1px solid;
            border-radius: 8px;
            padding: 12px 16px;
            margin: 16px 0;
            font-size: 0.9rem;
            text-align: center;
            transition: background 0.3s, border-color 0.3s, color 0.3s;        }

        .section-title {
            font-size: 1.3rem;
            margin: 28px 0 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid;
            transition: color 0.3s, border-color 0.3s;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }
        @media (min-width: 700px) {
            .grid { grid-template-columns: repeat(2, 1fr); }
        }

        .card {
            border: 1px solid;
            border-radius: 10px;
            padding: 16px;
            transition: background 0.3s, border-color 0.3s;
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 6px;
            transition: color 0.3s;
        }

        .card-desc {
            font-size: 0.9rem;
            margin-bottom: 10px;
            transition: color 0.3s;
        }

        .version {
            font-size: 0.8rem;
            margin-bottom: 12px;
            transition: color 0.3s;
        }
        .version span { transition: color 0.3s; }

        .btn {
            display: block;
            width: 100%;
            padding: 12px;            margin: 4px 0;
            color: #fff;
            text-align: center;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            border-radius: 6px;
            transition: opacity 0.2s, background 0.3s;
        }

        .btn:active { opacity: 0.85; }
        .btn.mint { background: #65a30d; }
        .btn.kali { background: #db2777; }
        .btn.fedora { background: #2563eb; }
        .btn.arch { background: #17a2b8; }
        .btn.debian { background: #c41230; }

        footer {
            text-align: center;
            padding: 24px 0;
            font-size: 0.85rem;
            margin-top: 20px;
            transition: color 0.3s;
        }
        footer a { transition: color 0.3s; }

        .divider {
            height: 1px;
            margin: 24px 0;
            transition: background 0.3s;
        }
    </style>
</head>
<body>

<input type="checkbox" id="theme-toggle">

<div class="app">
    <label for="theme-toggle" class="theme-btn" title="Переключить тему"></label>

    <div class="container">
        <header>
            <h1>🐧 Linux Distro Hub</h1>
            <p>Каталог официальных страниц загрузки</p>
        </header>

        <div class="info-box">
            ℹ️ Ссылки ведут на официальные сайты разработчиков
        </div>
        <h2 class="section-title">Дистрибутивы</h2>

        <div class="grid">
            <div class="card">
                <div class="card-title">Ubuntu</div>
                <div class="card-desc">Популярный дистрибутив для новичков.</div>
                <div class="version">Версия: <span>24.04.4 LTS</span></div>
                <a href="https://releases.ubuntu.com/noble/" class="btn">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Debian</div>
                <div class="card-desc">Стабильность и свобода.</div>
                <div class="version">Версия: <span>13.4 Trixie</span></div>
                <a href="https://www.debian.org/download" class="btn debian">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Linux Mint</div>
                <div class="card-desc">Для перехода с Windows.</div>
                <div class="version">Версия: <span>22.3</span></div>
                <a href="https://linuxmint.com/download_all.php" class="btn mint">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Arch Linux</div>
                <div class="card-desc">Rolling-release для продвинутых.</div>
                <div class="version">Версия: <span>Rolling</span></div>
                <a href="https://archlinux.org/download/" class="btn arch">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Kali Linux</div>
                <div class="card-desc">Для тестирования безопасности.</div>
                <div class="version">Версия: <span>2026.1</span></div>
                <a href="https://www.kali.org/get-kali/" class="btn kali">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Fedora</div>
                <div class="card-desc">Инновации от Red Hat.</div>
                <div class="version">Версия: <span>41</span></div>
                <a href="https://fedoraproject.org/workstation/download/" class="btn fedora">Загрузить</a>
            </div>
        </div>

        <div class="divider"></div>

        <h2 class="section-title">Утилиты</h2>
        <div class="grid">
            <div class="card">
                <div class="card-title">qBittorrent</div>
                <div class="card-desc">Торрент-клиент.</div>
                <a href="https://www.qbittorrent.org/download.php" class="btn">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">BalenaEtcher</div>
                <div class="card-desc">Запись на USB.</div>
                <a href="https://www.balena.io/etcher/" class="btn">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Ventoy</div>
                <div class="card-desc">Мультизагрузка.</div>
                <a href="https://www.ventoy.net/en/download.html" class="btn">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">VirtualBox</div>
                <div class="card-desc">Виртуальная машина.</div>
                <a href="https://www.virtualbox.org/wiki/Downloads" class="btn">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">Rufus</div>
                <div class="card-desc">Загрузочная USB.</div>
                <a href="https://rufus.ie/" class="btn">Загрузить</a>
            </div>

            <div class="card">
                <div class="card-title">GParted</div>
                <div class="card-desc">Разделы диска.</div>
                <a href="https://gparted.org/download.php" class="btn">Загрузить</a>
            </div>
        </div>

        <footer>
            <p>🐧 Linux Distro Hub</p>
            <p style="margin-top:8px"><a href="https://www.gnu.org/philosophy/free-sw.ru.html">О свободном ПО</a></p>
        </footer>
    </div>
</div>

<!-- МИНИМАЛЬНЫЙ JS ТОЛЬКО ДЛЯ СОХРАНЕНИЯ ТЕМЫ -->
<script>
(function() {
    var checkbox = document.getElementById('theme-toggle');
    var html = document.documentElement;   
    // Загрузка сохранённой темы
    if (localStorage.getItem('ldh-theme') === 'light') {
        html.classList.add('light');
        checkbox.checked = true;
    }
   
    // Сохранение при переключении
    if (checkbox) {
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                html.classList.add('light');
                localStorage.setItem('ldh-theme', 'light');
            } else {
                html.classList.remove('light');
                localStorage.setItem('ldh-theme', 'dark');
            }
        });
    }
})();
</script>

</body>
</html>[/html]

Это вайбкодинг.  https://assets.scratch.mit.edu/get_image/.%2E/891951283e99d232dcbc1022f0724e34.png

Отредактировано Dirimaximus (kattysha) (27 марта, 2026г. 17:07:12)

Подпись автора

Я на Wikipedia • Fandom • Scratch • PenguinMod
Mastodon (.party)  • Mastodon (.ml)  ★ PoridgeClub ★
[html]<iframe src="https://shitpost.poridge.club/embed/user-timeline/ak40s27gl7?maxHeight=700" data-misskey-embed-id="v1_87139780-d3ec-47d2-af0c-3aa7b98ef794" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 700px; height: 300px; color-scheme: light dark;"></iframe>
<script defer src="https://shitpost.poridge.club/embed.js"></script>[/html]

0

2

  • Автор: Gregon
  • Администратор ;)
  • Gregon
  • Откуда: отсюда
  • Зарегистрирован: 20 декабря, 2024г.
  • Сообщений: 2218
  • Уважение: +265
  • Позитив: +179
  • Пол: Мужской
  • Провел на форуме:
    1 месяц 22 дня
  • Последний визит:
    Сегодня 21:39:00
Dirimaximus (kattysha) написал(а):

(#1)
Это вайбкодинг, потом поправлю.  https://assets.scratch.mit.edu/get_image/.%2E/891951283e99d232dcbc1022f0724e34.png

Не советую вайбкодить, у тебя коряво получилось во многих местах:

  • Надпись «JS работает», работающая без JS

  • Кнопка темы есть, но не работает

  • Ссылки на торрент есть только на Debian и Ubuntu

  • Ссылки на официальную страницу есть только на Debian, Ubuntu, Linux Mint и исходного код ядра

  • Зачем-то исходный код ядра у которого дизайн кнопки отличается от других

  • Недоделанные вспомогательные программы

Тем более самому программировать интереснее, как программировать ты уже примерно знаешь, т.к. программировал на скретче, но в этом случает тут не программирование, а разметка, которая ещё проще

Подпись автора

Я администратор. Я сделал очень много вещей, например кнопку чата сверху (кстати заходите, если хотите дам вам пароль от пробного аккаунта), отправку файлов (через тот чат, не удаляйте пробный аккаунт пожалуйста, иначе отправка файлов перестанет работать), тёмную тему, нормальное цитирование, выбор смайликов и многое другое.
▶ Matrix ◈ Mastodo… ой то есть Misskey ◀
[html]<iframe src="https://shitpost.poridge.club/embed/user-timeline/a7w5npj75y?maxHeight=300" data-misskey-embed-id="v1_f2e81845-9b9f-4b1c-a8f8-4edd40b0171c" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; width: 500px; height: 300px; color-scheme: light dark;"></iframe>
<script defer src="https://shitpost.poridge.club/embed.js"></script><a href=https://www.calend.ru target=_blank style="display: inline; position: absolute; margin-left: 20px;"><img src="https://www.calend.ru/img/export/informer.png" width="189" alt="Праздники сегодня" border="0"></a>[/html]

0

3

  • Автор: 3DArte
  • Подниматель пингвинов
  • 3DArte
  • Зарегистрирован: 9 февраля, 2025г.
  • Сообщений: 603
  • Уважение: +43
  • Позитив: +18
  • Пол: Мужской
  • Провел на форуме:
    2 дня 16 часов
  • Последний визит:
    7 апреля, 2026г. 00:35:07
Gregon написал(а):

(#2)
Не советую вайбкодить, у тебя коряво получилось во многих местах:

  • Надпись «JS работает», работающая без JS

  • Кнопка темы есть, но не работает

  • Ссылки на торрент есть только на Debian и Ubuntu

  • Ссылки на официальную страницу есть только на Debian, Ubuntu, Linux Mint и исходного код ядра

  • Зачем-то исходный код ядра у которого дизайн кнопки отличается от других

  • Недоделанные вспомогательные программы

Тем более самому программировать интереснее, как программировать ты уже примерно знаешь, т.к. программировал на скретче, но в этом случает тут не программирование, а разметка, которая ещё проще

Интересно, но Линус Торвальдс достаточно позитивно смотрит на вайб кодинг: https://habr.com/ru/news/968280/
Не очень давно присылал статью как Линус использовал вайб кодинг для создания программы на python.

Хотя не могу не согласиться с Грегом, что само по себе программирование интересное. Решаешь множество мелких задач, чтобы решить одну большую. Мне кажется сейчас можно с помощью вайб кодинга написать рыбу программы, а потом её дорабатывать. Особенно это актуально, когда изучаешь новые языки, среды разработки.

0

4

  • Автор: White_Lord
  • Фанат форума
  • White_Lord
  • Зарегистрирован: 18 декабря, 2024г.
  • Сообщений: 2380
  • Уважение: +260
  • Позитив: +107
  • Пол: Мужской
  • Провел на форуме:
    8 дней 21 час
  • Последний визит:
    17 апреля, 2026г. 11:36:15
3DArte написал(а):

(#3)
Интересно, но Линус Торвальдс достаточно позитивно смотрит на вайб кодинг: https://habr.com/ru/news/968280/

Видел недавно шутку, что он был первым вайбкодером - мол, писал свои идеи, и добровольцы реализовывали их в своих дистрибутивах.

0

5

  • Автор: 3DArte
  • Подниматель пингвинов
  • 3DArte
  • Зарегистрирован: 9 февраля, 2025г.
  • Сообщений: 603
  • Уважение: +43
  • Позитив: +18
  • Пол: Мужской
  • Провел на форуме:
    2 дня 16 часов
  • Последний визит:
    7 апреля, 2026г. 00:35:07
White_Lord написал(а):

(#4)
Видел недавно шутку, что он был первым вайбкодером - мол, писал свои идеи, и добровольцы реализовывали их в своих дистрибутивах.

Звучит смешно. Можно немного переиначить идею. Тогда все дизайнеры и писатели требований для программ - вайбкодеры.

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»