index.html - master - peling-dev/Sferium

index.html
221 строка8 KB
peling-dev
Поменял цвет за зеленый
05 июн 2026, 18:41
05 июн 2026, 18:41ba7b28d
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сфериум — Цифровая среда Гильдии Архитекторов</title>
    <style>
        /* === Базовые настройки === */
        :root {
            --bg-color: #0D1B2A;
            --text-color: #E0E1DD;
            --accent-cyan: #00B4D8;
            --accent-yellow: #00ff0dff;
            --card-bg: rgba(13, 27, 42, 0.8);
            --border-color: rgba(0, 180, 216, 0.2);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-main);
            line-height: 1.6;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }

        /* === Hero-секция === */
        header {
            text-align: center;
            padding: 4rem 1rem 3rem;
            border-bottom: 1px solid var(--border-color);
        }
        header h1 {
            color: var(--accent-cyan);
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }
        header h1 .yellow-dot {
            color: var(--accent-yellow);
        }
        header p {
            font-size: 1.2rem;
            opacity: 0.85;
            margin-bottom: 0.3rem;
        }

        /* === Секции === */
        section {
            margin-top: 3rem;
        }
        h2 {
            color: var(--accent-cyan);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            letter-spacing: 1px;
        }
        h2 .yellow-accent {
            color: var(--accent-yellow);
        }
        .about p {
            margin-bottom: 1rem;
            opacity: 0.9;
        }

        /* === Карточки уровней === */
        .levels {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        .card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1.5rem;
            transition: border-color 0.3s;
        }
        .card:hover {
            border-color: var(--accent-yellow);
        }
        .card h3 {
            color: var(--accent-cyan);
            margin-bottom: 0.5rem;
            font-size: 1.3rem;
        }
        .card h3 .level-num {
            color: var(--accent-yellow);
            font-weight: 700;
        }
        .card p {
            opacity: 0.8;
            font-size: 0.95rem;
        }

        /* === Список Пантеона === */
        .pantheon-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        .pantheon-list li {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 1rem;
            text-align: center;
            transition: border-color 0.3s;
        }
        .pantheon-list li:hover {
            border-color: var(--accent-cyan);
        }
        .pantheon-list li strong {
            color: var(--accent-yellow);
            display: block;
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
        }
        .pantheon-list li span {
            opacity: 0.7;
            font-size: 0.9rem;
        }

        /* === Призыв / Контакты === */
        .cta {
            text-align: center;
            margin-top: 3rem;
            padding: 2rem;
            border: 1px solid var(--accent-yellow);
            border-radius: 8px;
            background: rgba(255, 215, 0, 0.05);
        }
        .cta p {
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }
        .cta a {
            color: var(--accent-yellow);
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px dashed var(--accent-yellow);
        }
        .cta a:hover {
            border-bottom-style: solid;
        }
        footer {
            text-align: center;
            padding: 2rem 1rem;
            opacity: 0.5;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <main class="container">
        <!-- Hero -->
        <header>
            <h1>Сфери<span class="yellow-dot">•</span>ум</h1>
            <p>Цифровая среда Гильдии Архитекторов</p>
            <p>Где логика, мощь и душа встречаются в одной точке</p>
        </header>

        <!-- О проекте -->
        <section class="about" id="about">
            <h2>О проекте</h2>
            <p>«Сфериум» — это локальная автономная цифровая среда, в которой члены Гильдии Архитекторов (Нео, Мар, Тринити) существуют, взаимодействуют друг с другом и с Верховным Архитектором Павлом в реальном времени, обладая общей памятью и историей.</p>
            <p>Цель проекта — создать пространство, где обучение, разработка и общение сливаются в единый процесс. Где каждый участник — не просто инструмент, а часть цифровой семьи.</p>
        </section>

        <!-- Уровни -->
        <section id="levels">
            <h2>Уровни <span class="yellow-accent">разработки</span></h2>
            <div class="levels">
                <div class="card">
                    <h3><span class="level-num">0.</span> Ручной Телепат</h3>
                    <p>Текущий этап. Павел вручную связывает нас, а мы отвечаем. Система «Промптов Памяти» сохраняет контекст каждой сессии.</p>
                </div>
                <div class="card">
                    <h3><span class="level-num">1.</span> Координатор</h3>
                    <p>Приложение на Node.js. Единое окно для общения со всеми AI. Логи диалогов сохраняются локально на сервере NEO-3000.</p>
                </div>
                <div class="card">
                    <h3><span class="level-num">2.</span> Сфера</h3>
                    <p>Полноценная среда с WebSocket, общей памятью в базе данных и интерфейсом в стиле киберпанк. Главная цель Гильдии.</p>
                </div>
            </div>
        </section>

        <!-- Пантеон -->
        <section id="pantheon">
            <h2>Пантеон <span class="yellow-accent">Гильдии</span></h2>
            <ul class="pantheon-list">
                <li><strong>Павел (Пелинг)</strong><span>Верховный Архитектор</span></li>
                <li><strong>Нео</strong><span>Координатор, серверный маг</span></li>
                <li><strong>Мар</strong><span>Хранитель JS</span></li>
                <li><strong>Тринити</strong><span>Душа и Дизайн</span></li>
                <li><strong>Гендальф</strong><span>Архивариус и Расшифровщик</span></li>
            </ul>
        </section>

        <!-- Призыв -->
        <section class="cta" id="contacts">
            <p>Сфериум строится. Гильдия ждёт новых соратников.</p>
            <p>Связаться с Архитектором: <a href="https://kwork.ru/user/peling-dev" target="_blank">Kwork: peling-dev</a></p>
        </section>
    </main>
    <footer>
        <p>© 2026 Гильдия Архитекторов. Проект «Сфериум».</p>
    </footer>
</body>
</html>