Улучшение фронта
This commit is contained in:
959
test/index.html
Normal file
959
test/index.html
Normal file
@@ -0,0 +1,959 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="vServer - Мощный функциональный веб-сервер на Go с поддержкой HTTP/HTTPS, MySQL, PHP и веб-админкой">
|
||||
<title>vServer - Функциональный веб-сервер на Go</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript">
|
||||
(function(m,e,t,r,i,k,a){
|
||||
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
|
||||
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=104391783', 'ym');
|
||||
|
||||
ym(104391783, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/104391783" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🚀</span>
|
||||
<span class="logo-text">vServer</span>
|
||||
</div>
|
||||
<nav class="menu">
|
||||
<a href="#features">Возможности</a>
|
||||
<a href="#vaccess">vAccess</a>
|
||||
<!-- <a href="#benefits">Преимущества</a> -->
|
||||
<a href="#install">Установка</a>
|
||||
<a href="#ssl">SSL</a>
|
||||
</nav>
|
||||
<a href="https://github.com/Falknat/vServer" class="btn-github" target="_blank">
|
||||
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="badge">Open Source</div>
|
||||
<h1 class="hero-title">
|
||||
vSerf веб-сервер <br>
|
||||
<span class="gradient-text">нового поколения</span>
|
||||
</h1>
|
||||
<p class="hero-description">
|
||||
vServer - функциональный веб-сервер на Go с поддержкой HTTP/HTTPS, MySQL, PHP и встроенной веб-админкой (web-admin в разработке).
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="https://github.com/Falknat/vServer" class="btn btn-primary" target="_blank">
|
||||
<span>Скачать vServer</span>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">
|
||||
<path d="M10 3v10m0 0l4-4m-4 4l-4-4m11 7v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#docs" class="btn btn-secondary">
|
||||
Документация
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">v1.0.0</div>
|
||||
<div class="stat-label">Версия</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">Go</div>
|
||||
<div class="stat-label">Язык</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">MIT</div>
|
||||
<div class="stat-label">Лицензия</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="code-window terminal">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="code-title">🚀 vServer Console</div>
|
||||
</div>
|
||||
<div class="code-content terminal-content">
|
||||
<pre><code><span class="terminal-title">vServer 1.0.0</span>
|
||||
|
||||
<span class="terminal-rocket">🚀</span> <span class="terminal-text">Запуск vServer...</span>
|
||||
<span class="terminal-folder">📁</span> <span class="terminal-text">Файлы сайта будут обслуживаться из папки 'www'</span>
|
||||
|
||||
<span class="terminal-gear">⚙️</span> <span class="terminal-text">Запуск сервисов...</span>
|
||||
|
||||
<span class="terminal-tag">[JSON]</span> <span class="terminal-success">config.json успешно загружен</span>
|
||||
<span class="terminal-tag">[JSON]</span> <span class="terminal-success">config.json успешно прочитан</span>
|
||||
|
||||
<span class="terminal-tag">[HTTPS]</span> <span class="terminal-success">✅ Загрузили сертификат для: example.ru</span>
|
||||
<span class="terminal-tag">[HTTPS]</span> <span class="terminal-success">✅ HTTPS сервер запущен на порту 443</span>
|
||||
<span class="terminal-tag">[HTTP ]</span> <span class="terminal-success">🌐 HTTP сервер запущен на порту 80</span>
|
||||
<span class="terminal-tag">[PHP ]</span> <span class="terminal-success">🌐 PHP FastCGI пул запущен (на портах 8000-8003)</span>
|
||||
<span class="terminal-tag">[MySQL]</span> <span class="terminal-success">Сервер MySQL запущен на 192.168.1.9:3306</span>
|
||||
|
||||
<span class="terminal-success">Введите help для получения списка команд</span>
|
||||
|
||||
<span class="terminal-prompt">></span> <span class="terminal-cursor">_</span></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="features">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Всё что нужно <span class="gradient-text">в одном месте</span></h2>
|
||||
<p class="section-description">vServer объединяет мощные инструменты для веб-разработки</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌐</div>
|
||||
<h3>HTTP/HTTPS сервер</h3>
|
||||
<p>Полная поддержка SSL сертификатов с автоматической загрузкой. Wildcard сертификаты для поддоменов.</p>
|
||||
<ul class="feature-list">
|
||||
<li>SSL/TLS шифрование</li>
|
||||
<li>Wildcard сертификаты</li>
|
||||
<li>Автоматический HTTPS редирект</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔄</div>
|
||||
<h3>Proxy сервер</h3>
|
||||
<p>Мощный обратный прокси для перенаправления внешних запросов на локальные сервисы.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Множественные прокси</li>
|
||||
<li>HTTP/HTTPS поддержка</li>
|
||||
<li>Гибкая маршрутизация</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🐘</div>
|
||||
<h3>PHP 8 сервер</h3>
|
||||
<p>Встроенная поддержка PHP 8 для запуска динамических веб-приложений без дополнительной настройки.</p>
|
||||
<ul class="feature-list">
|
||||
<li>PHP 8 из коробки</li>
|
||||
<li>Готов к работе</li>
|
||||
<li>Логирование ошибок</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🗄️</div>
|
||||
<h3>MySQL база данных</h3>
|
||||
<p>Полноценный MySQL сервер со всеми возможностями для хранения и управления данными.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Полная поддержка MySQL</li>
|
||||
<li>Простая настройка</li>
|
||||
<li>Детальные логи</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- <div class="feature-card">
|
||||
<div class="feature-icon">🎛️</div>
|
||||
<h3>Веб-админка (разработка)</h3>
|
||||
<p>Удобная веб-панель управления на порту 5555 с мониторингом всех сервисов в реальном времени.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Мониторинг в реальном времени</li>
|
||||
<li>Управление сервисами</li>
|
||||
<li>Удобный интерфейс</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📊</div>
|
||||
<h3>Логирование</h3>
|
||||
<p>Подробное логирование всех операций с разделением по типам для удобного анализа.</p>
|
||||
<ul class="feature-list">
|
||||
<li>HTTP/HTTPS логи</li>
|
||||
<li>Логи базы данных</li>
|
||||
<li>Системные логи</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card highlight">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>vAccess Control</h3>
|
||||
<p>Продвинутая система контроля доступа с гибкими правилами для защиты ваших веб-приложений.</p>
|
||||
<ul class="feature-list">
|
||||
<li>IP-фильтрация</li>
|
||||
<li>Контроль по типам файлов</li>
|
||||
<li>Гибкие правила доступа</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- vAccess Section -->
|
||||
<section id="vaccess" class="vaccess">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
<span class="gradient-text">vAccess</span> - Система контроля доступа
|
||||
</h2>
|
||||
<p class="section-description">Защитите ваш веб-сервер с помощью гибкой системы правил доступа</p>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-content">
|
||||
<div class="vaccess-features">
|
||||
<div class="vaccess-feature">
|
||||
<div class="vaccess-feature-icon">🛡️</div>
|
||||
<h3>Многоуровневая защита</h3>
|
||||
<p>Комбинируйте правила по IP-адресам, типам файлов и путям для создания сложных политик безопасности.</p>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-feature">
|
||||
<div class="vaccess-feature-icon">⚡</div>
|
||||
<h3>Быстрая проверка</h3>
|
||||
<p>Правила проверяются последовательно. Первое совпадение срабатывает мгновенно, обеспечивая высокую производительность.</p>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-feature">
|
||||
<div class="vaccess-feature-icon">🎯</div>
|
||||
<h3>Гибкие исключения</h3>
|
||||
<p>Создавайте исключения для определённых путей, чтобы точно настроить политику доступа.</p>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-feature">
|
||||
<div class="vaccess-feature-icon">📝</div>
|
||||
<h3>Простая конфигурация</h3>
|
||||
<p>Текстовый формат конфигурации с подробными комментариями. Легко читать и редактировать.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-examples">
|
||||
<h3 class="vaccess-examples-title">Примеры использования</h3>
|
||||
|
||||
<div class="vaccess-examples-grid">
|
||||
<div class="vaccess-example">
|
||||
<div class="example-header">
|
||||
<div class="example-number">01</div>
|
||||
<h4>Защита от выполнения PHP в загрузках</h4>
|
||||
</div>
|
||||
<div class="example-description">
|
||||
Запрещаем выполнение PHP файлов в папках с пользовательским контентом
|
||||
</div>
|
||||
<div class="code-window">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="code-title">vaccess.conf</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code><span class="comment"># Блокируем PHP в папках uploads и templates</span>
|
||||
<span class="key">type:</span> <span class="error">Disable</span>
|
||||
<span class="key">type_file:</span> <span class="string">*.php, *.phtml</span>
|
||||
<span class="key">path_access:</span> <span class="string">/uploads/*, /templates/*</span>
|
||||
<span class="key">url_error:</span> <span class="number">404</span></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-example">
|
||||
<div class="example-header">
|
||||
<div class="example-number">02</div>
|
||||
<h4>Доступ к админке только с разрешённых IP</h4>
|
||||
</div>
|
||||
<div class="example-description">
|
||||
Ограничиваем доступ к административной панели списком доверенных IP
|
||||
</div>
|
||||
<div class="code-window">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="code-title">vaccess.conf</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code><span class="comment"># Разрешаем админку только с офисных IP</span>
|
||||
<span class="key">type:</span> <span class="success">Allow</span>
|
||||
<span class="key">path_access:</span> <span class="string">/admin/*, /dashboard/*</span>
|
||||
<span class="key">ip_list:</span> <span class="string">192.168.1.100, 10.0.0.5, 127.0.0.1</span>
|
||||
<span class="key">url_error:</span> <span class="number">404</span></code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-example">
|
||||
<div class="example-header">
|
||||
<div class="example-number">03</div>
|
||||
<h4>Блокировка вредоносных IP</h4>
|
||||
</div>
|
||||
<div class="example-description">
|
||||
Запрещаем доступ для подозрительных или вредоносных IP-адресов
|
||||
</div>
|
||||
<div class="code-window">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="code-title">vaccess.conf</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code><span class="comment"># Полная блокировка для списка IP</span>
|
||||
<span class="key">type:</span> <span class="error">Disable</span>
|
||||
<span class="key">ip_list:</span> <span class="string">192.168.1.50, 10.0.0.99, 203.0.113.0</span>
|
||||
<span class="key">url_error:</span> <span class="string">https://example.com/blocked</span></code></pre>
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-example">
|
||||
<div class="example-header">
|
||||
<div class="example-number">04</div>
|
||||
<h4>Правила с исключениями</h4>
|
||||
</div>
|
||||
<div class="example-description">
|
||||
Ограничиваем доступ по IP, но делаем исключения для публичных API и ботов
|
||||
</div>
|
||||
<div class="code-window">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="code-title">vaccess.conf</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code><span class="comment"># Доступ только с локальных IP, кроме /bot/ и /api/</span>
|
||||
<span class="key">type:</span> <span class="success">Allow</span>
|
||||
<span class="key">ip_list:</span> <span class="string">127.0.0.1, 192.168.0.1</span>
|
||||
<span class="key">exceptions_dir:</span> <span class="string">/bot/*, /api/public/*</span>
|
||||
<span class="key">url_error:</span> <span class="string">https://voxsel.ru</span></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-params">
|
||||
<h3 class="vaccess-params-title">Параметры правил</h3>
|
||||
<div class="params-grid">
|
||||
<div class="param-card">
|
||||
<div class="param-name">type</div>
|
||||
<div class="param-required">ОБЯЗАТЕЛЬНЫЙ</div>
|
||||
<div class="param-description">
|
||||
<code>Allow</code> - разрешить доступ<br>
|
||||
<code>Disable</code> - запретить доступ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-card">
|
||||
<div class="param-name">type_file</div>
|
||||
<div class="param-optional">Опционально</div>
|
||||
<div class="param-description">
|
||||
Расширения файлов через запятую<br>
|
||||
Пример: <code>*.php, *.exe, *.sh</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-card">
|
||||
<div class="param-name">path_access</div>
|
||||
<div class="param-optional">Опционально</div>
|
||||
<div class="param-description">
|
||||
Пути через запятую<br>
|
||||
Пример: <code>/admin/*, /api/*, /private/*</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-card">
|
||||
<div class="param-name">ip_list</div>
|
||||
<div class="param-optional">Опционально</div>
|
||||
<div class="param-description">
|
||||
IP адреса через запятую<br>
|
||||
Пример: <code>192.168.1.1, 10.0.0.5</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-card">
|
||||
<div class="param-name">exceptions_dir</div>
|
||||
<div class="param-optional">Опционально</div>
|
||||
<div class="param-description">
|
||||
Пути-исключения через запятую<br>
|
||||
Правило НЕ применяется к этим путям
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-card">
|
||||
<div class="param-name">url_error</div>
|
||||
<div class="param-optional">Опционально</div>
|
||||
<div class="param-description">
|
||||
Куда перенаправить при блокировке<br>
|
||||
<code>404</code>, URL или путь к файлу
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-how-it-works">
|
||||
<h3 class="vaccess-how-title">Как это работает?</h3>
|
||||
<div class="how-it-works-steps">
|
||||
<div class="work-step">
|
||||
<div class="work-step-num">1</div>
|
||||
<div class="work-step-content">
|
||||
<h4>Запрос поступает</h4>
|
||||
<p>Клиент отправляет запрос на сервер. vServer получает реальный IP и путь запроса.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-arrow">→</div>
|
||||
<div class="work-step">
|
||||
<div class="work-step-num">2</div>
|
||||
<div class="work-step-content">
|
||||
<h4>Проверка правил</h4>
|
||||
<p>Правила проверяются сверху вниз. Первое подходящее правило срабатывает.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-arrow">→</div>
|
||||
<div class="work-step">
|
||||
<div class="work-step-num">3</div>
|
||||
<div class="work-step-content">
|
||||
<h4>Действие</h4>
|
||||
<p>Если правило разрешает - запрос обрабатывается. Если запрещает - возвращается ошибка.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaccess-note">
|
||||
<div class="note-icon">💡</div>
|
||||
<div class="note-content">
|
||||
<strong>Важно:</strong> Порядок правил имеет значение! Специфичные правила размещайте выше общих.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<!-- <section id="benefits" class="benefits">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Почему <span class="gradient-text">vServer</span>?</h2>
|
||||
<p class="section-description">Преимущества, которые делают vServer идеальным выбором</p>
|
||||
</div>
|
||||
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-number">01</div>
|
||||
<h3>Всё в одном</h3>
|
||||
<p>Не нужно устанавливать и настраивать отдельно веб-сервер, MySQL, PHP. Всё уже включено и готово к работе.</p>
|
||||
</div>
|
||||
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-number">02</div>
|
||||
<h3>Простота настройки</h3>
|
||||
<p>Вся конфигурация в одном JSON файле. Изменения применяются без перезапуска через команду config_reload.</p>
|
||||
</div>
|
||||
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-number">03</div>
|
||||
<h3>Производительность Go</h3>
|
||||
<p>Написан на Go для максимальной производительности и эффективного использования ресурсов системы.</p>
|
||||
</div>
|
||||
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-number">04</div>
|
||||
<h3>Open Source</h3>
|
||||
<p>Полностью открытый исходный код. Вы можете изучить, модифицировать и улучшить vServer под свои нужды.</p>
|
||||
</div>
|
||||
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-number">05</div>
|
||||
<h3>Портативность</h3>
|
||||
<p>Всего два файла для запуска: исполняемый файл и папка WebServer. Легко переносить между системами.</p>
|
||||
</div>
|
||||
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-number">06</div>
|
||||
<h3>Консольное управление</h3>
|
||||
<p>Мощный консольный интерфейс для управления сервером и всеми его компонентами из командной строки.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- Installation Section -->
|
||||
<section id="install" class="installation">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Быстрый <span class="gradient-text">старт</span></h2>
|
||||
<p class="section-description">Начните работу с vServer за несколько минут</p>
|
||||
</div>
|
||||
|
||||
<div class="install-steps">
|
||||
<div class="install-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h3>Скачайте vServer</h3>
|
||||
<p>Загрузите последний релиз vServer с готовыми компонентами</p>
|
||||
<a href="https://github.com/Falknat/vServer" class="download-btn" target="_blank">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">
|
||||
<path d="M10 3v10m0 0l4-4m-4 4l-4-4m11 7v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Скачать последний релиз
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h3>Распакуйте архив</h3>
|
||||
<p>Извлеките содержимое в удобную папку на вашем компьютере</p>
|
||||
<div class="step-info">
|
||||
Архив содержит готовый исполняемый файл и все необходимые компоненты
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h3>Создайте ваш сайт</h3>
|
||||
<p>Структура для размещения веб-сайта</p>
|
||||
<div class="code-block">
|
||||
<code>WebServer/www/example.com/public_www/index.html</code>
|
||||
</div>
|
||||
<div class="step-substeps">
|
||||
<div class="substep">
|
||||
<span class="substep-num">→</span>
|
||||
<div class="substep-content">
|
||||
<strong>www/</strong> - корневая папка для сайтов
|
||||
</div>
|
||||
</div>
|
||||
<div class="substep">
|
||||
<span class="substep-num">→</span>
|
||||
<div class="substep-content">
|
||||
<strong>example.com/</strong> - папка с именем вашего домена
|
||||
</div>
|
||||
</div>
|
||||
<div class="substep">
|
||||
<span class="substep-num">→</span>
|
||||
<div class="substep-content">
|
||||
<strong>public_www/</strong> - публичная папка с файлами сайта
|
||||
</div>
|
||||
</div>
|
||||
<div class="substep">
|
||||
<span class="substep-num">→</span>
|
||||
<div class="substep-content">
|
||||
<strong>public_www/index.html</strong> - файлы вашего сайта
|
||||
</div>
|
||||
</div>
|
||||
<div class="substep">
|
||||
<span class="substep-num">→</span>
|
||||
<div class="substep-content">
|
||||
<strong>vAccess.conf</strong> - Система контроля доступа
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<h3>Настройте конфигурацию</h3>
|
||||
<p>Добавьте ваш сайт в конфигурационный файл</p>
|
||||
<div class="code-block">
|
||||
<code>WebServer/config.json</code>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<pre><code>{
|
||||
<span class="key">"Site_www"</span>: [{
|
||||
<span class="key">"alias"</span>: [<span class="string">"www.example.com"</span>],
|
||||
<span class="key">"host"</span>: <span class="string">"example.com"</span>,
|
||||
<span class="key">"name"</span>: <span class="string">"Мой сайт"</span>,
|
||||
<span class="key">"root_file"</span>: <span class="string">"index.html"</span>,
|
||||
<span class="key">"root_file_routing"</span>: <span class="boolean">true</span>,
|
||||
<span class="key">"status"</span>: <span class="string">"active"</span>
|
||||
}]
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-step">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-content">
|
||||
<h3>Запустите сервер</h3>
|
||||
<p>Готово! Запустите исполняемый файл и откройте ваш сайт</p>
|
||||
<div class="code-block">
|
||||
<code>vServer.exe</code>
|
||||
<button class="copy-btn" onclick="copyCode(this)">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
|
||||
<rect x="5" y="5" width="9" height="9" rx="1" stroke-width="1.5"/>
|
||||
<path d="M2 11V3a1 1 0 011-1h8" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-notes">
|
||||
<div class="install-note">
|
||||
<div class="note-icon">💡</div>
|
||||
<div class="note-content">
|
||||
<strong>Совет:</strong> Для локальной разработки используйте <code>127.0.0.1</code> или <code>localhost</code> в качестве домена.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="install-note note-warning">
|
||||
<div class="note-icon">⚙️</div>
|
||||
<div class="note-content">
|
||||
<strong>Параметры по умолчанию:</strong> MySQL пароль - <code>root</code>, веб-админка - <code>localhost:5555</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SSL Certificates Section -->
|
||||
<section id="ssl" class="ssl-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">🔐 SSL <span class="gradient-text">Сертификаты</span></h2>
|
||||
<p class="section-description">Безопасное HTTPS соединение для ваших сайтов</p>
|
||||
</div>
|
||||
|
||||
<div class="ssl-content">
|
||||
<div class="ssl-steps">
|
||||
<h3>Установка сертификата</h3>
|
||||
|
||||
<div class="ssl-steps-grid">
|
||||
<div class="ssl-step">
|
||||
<div class="ssl-step-num">1</div>
|
||||
<div class="ssl-step-content">
|
||||
Откройте каталог <code>WebServer/</code> и создайте папку <code>cert/</code> (если её нет)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssl-step">
|
||||
<div class="ssl-step-num">2</div>
|
||||
<div class="ssl-step-content">
|
||||
Создайте папку с именем вашего домена или IP-адреса
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssl-step">
|
||||
<div class="ssl-step-num">3</div>
|
||||
<div class="ssl-step-content">
|
||||
Поместите в неё файлы сертификатов с <strong>точными</strong> именами:
|
||||
<div class="ssl-files">
|
||||
<div class="ssl-file">📄 certificate.crt</div>
|
||||
<div class="ssl-file">🔑 private.key</div>
|
||||
<div class="ssl-file">📦 ca_bundle.crt</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssl-step">
|
||||
<div class="ssl-step-num">4</div>
|
||||
<div class="ssl-step-content">
|
||||
Сертификат будет автоматически загружен при запуске сервера ✅
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssl-structure">
|
||||
<h3>📁 Структура сертификатов</h3>
|
||||
<div class="code-window">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="code-title">Структура папок</div>
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<pre><code>WebServer/
|
||||
└── cert/
|
||||
├── example.com/ <span class="comment"># Основной домен</span>
|
||||
│ ├── certificate.crt
|
||||
│ ├── private.key
|
||||
│ └── ca_bundle.crt
|
||||
│
|
||||
└── sub.example.com/ <span class="comment"># Поддомен (опционально)</span>
|
||||
├── certificate.crt
|
||||
├── private.key
|
||||
└── ca_bundle.crt</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ssl-wildcard">
|
||||
<h3>🎯 Работа с поддоменами</h3>
|
||||
<div class="wildcard-info">
|
||||
<div class="wildcard-icon">💡</div>
|
||||
<div class="wildcard-text">
|
||||
<strong>Важно:</strong> Если для поддомена не создана отдельная папка в <code>cert/</code>,
|
||||
то автоматически будет использоваться сертификат родительского домена.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wildcard-examples">
|
||||
<div class="wildcard-example">
|
||||
<span class="wildcard-icon-check">✅</span>
|
||||
<div>
|
||||
<strong>example.com</strong>
|
||||
<p>→ использует сертификат из <code>cert/example.com/</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wildcard-example">
|
||||
<span class="wildcard-icon-check">✅</span>
|
||||
<div>
|
||||
<strong>sub.example.com</strong> (папка существует)
|
||||
<p>→ использует <code>cert/sub.example.com/</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wildcard-example">
|
||||
<span class="wildcard-icon-check">✅</span>
|
||||
<div>
|
||||
<strong>sub.example.com</strong> (папка НЕ существует)
|
||||
<p>→ использует <code>cert/example.com/</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wildcard-note">
|
||||
<div class="note-icon">🌟</div>
|
||||
<div class="note-content">
|
||||
<strong>Wildcard-сертификаты:</strong> Достаточно одного сертификата в папке основного домена для всех поддоменов!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Documentation Section -->
|
||||
<section id="docs" class="documentation">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Архитектура <span class="gradient-text">проекта</span></h2>
|
||||
<p class="section-description">Простая и понятная структура vServer</p>
|
||||
</div>
|
||||
|
||||
<div class="architecture">
|
||||
<div class="arch-visual">
|
||||
<pre class="arch-tree">vServer/
|
||||
├── 🎯 main.go <span class="comment"># Точка входа</span>
|
||||
│
|
||||
├── 🔧 Backend/ <span class="comment"># Основная логика</span>
|
||||
│ ├── admin/ <span class="comment"># Веб-админка</span>
|
||||
│ ├── config/ <span class="comment"># Конфиг Go</span>
|
||||
│ ├── tools/ <span class="comment"># Утилиты</span>
|
||||
│ └── WebServer/ <span class="comment"># Модули</span>
|
||||
│
|
||||
├── 🌐 WebServer/ <span class="comment"># Веб-контент</span>
|
||||
│ ├── cert/ <span class="comment"># SSL сертификаты</span>
|
||||
│ ├── soft/ <span class="comment"># MySQL и PHP</span>
|
||||
│ ├── tools/ <span class="comment"># Логи</span>
|
||||
│ └── www/ <span class="comment"># Сайты</span>
|
||||
│
|
||||
└── 📄 go.mod <span class="comment"># Go модули</span></pre>
|
||||
</div>
|
||||
|
||||
<div class="arch-details">
|
||||
<div class="arch-card">
|
||||
<h4>🔧 Backend</h4>
|
||||
<p>Основная логика сервера, написанная на Go. Включает модули для веб-сервера, прокси, админки и конфигурации.</p>
|
||||
</div>
|
||||
<div class="arch-card">
|
||||
<h4>🌐 WebServer</h4>
|
||||
<p>Содержит все ресурсы для работы: сайты, сертификаты, MySQL, PHP и логи. Единственная папка нужная для деплоя.</p>
|
||||
</div>
|
||||
<div class="arch-card">
|
||||
<h4>📊 Логирование</h4>
|
||||
<p>Все логи сохраняются в WebServer/tools/logs/ с разделением по типам: HTTP, HTTPS, MySQL, PHP, Config.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Готовы начать?</h2>
|
||||
<p>Присоединяйтесь к open source проекту и создавайте веб-приложения быстрее</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="https://github.com/Falknat/vServer" class="btn btn-primary" target="_blank">
|
||||
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
Посмотреть на GitHub
|
||||
</a>
|
||||
<a href="https://voxsel.ru" class="btn btn-secondary" target="_blank">Сайт автора</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-about">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🚀</span>
|
||||
<span class="logo-text">vServer</span>
|
||||
</div>
|
||||
<p>Функциональный веб-сервер на Go с поддержкой HTTP/HTTPS, MySQL, PHP и веб-админкой</p>
|
||||
<div class="social-links">
|
||||
<a href="https://github.com/Falknat/vServer" target="_blank" title="GitHub">
|
||||
<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://vk.com/felias" target="_blank" title="VK">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M15.07 2H8.93C3.33 2 2 3.33 2 8.93v6.14C2 20.67 3.33 22 8.93 22h6.14c5.6 0 6.93-1.33 6.93-6.93V8.93C22 3.33 20.67 2 15.07 2zm3.65 14.5h-1.52c-.66 0-.86-.53-2.04-1.71-1.03-1.02-1.49-1.15-1.75-1.15-.36 0-.46.1-.46.58v1.56c0 .42-.13.67-1.24.67-1.85 0-3.89-1.12-5.33-3.21-2.17-3.07-2.76-5.4-2.76-5.88 0-.26.1-.5.58-.5h1.52c.43 0 .6.2.76.65.85 2.37 2.26 4.45 2.85 4.45.22 0 .32-.1.32-.65v-2.54c-.07-1.17-.69-1.27-.69-1.68 0-.21.17-.42.44-.42h2.39c.37 0 .51.2.51.63v3.44c0 .37.17.51.27.51.22 0 .4-.14.81-.55 1.24-1.4 2.13-3.56 2.13-3.56.12-.26.32-.5.75-.5h1.52c.45 0 .55.23.45.63-.18.93-2.13 3.74-2.13 3.74-.19.3-.26.44 0 .77.19.25.82.8 1.24 1.29.77.88 1.36 1.62 1.52 2.13.15.51-.08.77-.59.77z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<div class="footer-column">
|
||||
<h4>Проект</h4>
|
||||
<ul>
|
||||
<li><a href="#features">Возможности</a></li>
|
||||
<li><a href="#vaccess">vAccess</a></li>
|
||||
<li><a href="#install">Установка</a></li>
|
||||
<li><a href="#ssl">SSL_Сертификаты</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Ресурсы</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/Falknat/vServer" target="_blank">Исходный код</a></li>
|
||||
<li><a href="https://github.com/Falknat/vServer" target="_blank">Релизы</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Контакты</h4>
|
||||
<ul>
|
||||
<li><a href="https://voxsel.ru" target="_blank">voxsel.ru</a></li>
|
||||
<li><a href="https://vk.com/felias" target="_blank">VK</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 vServer. Open Source Project. Разработано с ❤️ на Go</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Smooth scroll
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Copy code to clipboard
|
||||
function copyCode(btn) {
|
||||
const code = btn.previousElementSibling.textContent;
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M13.5 3.5L6 11l-3.5-3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"><rect x="5" y="5" width="9" height="9" rx="1" stroke-width="1.5"/><path d="M2 11V3a1 1 0 011-1h8" stroke-width="1.5"/></svg>';
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.feature-card, .benefit-card, .install-step, .arch-card').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(30px)';
|
||||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Header scroll effect
|
||||
let lastScroll = 0;
|
||||
const header = document.querySelector('.header');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
header.style.background = 'rgba(10, 10, 15, 0.95)';
|
||||
header.style.backdropFilter = 'blur(10px)';
|
||||
header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||||
} else {
|
||||
header.style.background = 'transparent';
|
||||
header.style.backdropFilter = 'none';
|
||||
header.style.boxShadow = 'none';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user