chrome-proxy-manager/settings.html at main · prasx/chrome-proxy-manager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Proxy Manager — Настройки</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="settings-app">

  <nav class="settings-nav">
    <div class="settings-nav-item active" data-tab="general">Общие</div>
    <div class="settings-nav-item" data-tab="rules">Правила</div>
    <div class="settings-nav-item" data-tab="security">Безопасность</div>
    <div class="settings-nav-item" data-tab="about">О расширении</div>
  </nav>

  <div class="settings-body">

    <div class="back-bar">
      <a class="back-link" id="backLink">
        <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
        Панель управления
      </a>
    </div>

    <div class="settings-header">
      <div class="settings-title">Настройки</div>
      <div class="settings-subtitle">Управляйте поведением Proxy Manager под свои задачи</div>
    </div>

    <!-- General -->
    <div class="settings-section" data-tab="general">
      <div class="settings-section-title">Основные</div>
      <div class="settings-section-desc">Поведение расширения при запуске и в фоне</div>
      <div class="field-group">
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Расширение включено</div>
            <div class="field-desc">Глобальный переключатель прокси</div>
          </div>
          <button class="toggle-switch" data-key="extensionEnabled"></button>
        </div>
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Авто-прокси</div>
            <div class="field-desc">Автоматически добавлять недоступные сайты в список прокси</div>
          </div>
          <button class="toggle-switch" data-key="autoProxyEnabled"></button>
        </div>
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Таймаут загрузки</div>
            <div class="field-desc">Если страница не загрузилась за время — домены добавляются в прокси</div>
          </div>
          <button class="toggle-switch" data-key="autoProxyTimeoutEnabled"></button>
        </div>
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Задержка таймаута (сек)</div>
            <div class="field-desc">Время ожидания перед добавлением в прокси (2-30 сек)</div>
          </div>
          <input type="number" class="input-s" id="timeoutInput" min="2" max="30" step="1" style="width:80px;text-align:center;" />
        </div>
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Авто-добавление связанных доменов</div>
            <div class="field-desc">При анализе страницы автоматически добавлять связанные домены</div>
          </div>
          <button class="toggle-switch" data-key="autoAddRelated"></button>
        </div>
      </div>
    </div>

    <!-- Rules -->
    <div class="settings-section" data-tab="rules" style="display:none;">
      <div class="settings-section-title">Правила маршрутизации</div>
      <div class="settings-section-desc">Укажите, какие сайты открывать через прокси, а какие — напрямую</div>

      <div style="margin-bottom:16px;">
        <div class="settings-section-title" style="font-size:var(--text-base);">Через прокси</div>
        <div class="rule-search" style="margin:8px 0;">
          <span class="rule-search__icon">&#128269;</span>
          <input type="text" class="rule-search__input" id="settingsProxySearch" placeholder="Поиск..." />
          <span class="rule-search__count" id="settingsProxyCount"></span>
        </div>
        <div class="rule-list" id="settingsProxyList"></div>
        <div class="rule-add" style="margin-top:8px;">
          <input type="text" placeholder="*.example.com" id="settingsProxyInput" />
          <button class="primary" id="addSettingsProxyBtn">Добавить</button>
        </div>
      </div>

      <div>
        <div class="settings-section-title" style="font-size:var(--text-base);">Напрямую</div>
        <div class="rule-search" style="margin:8px 0;">
          <span class="rule-search__icon">&#128269;</span>
          <input type="text" class="rule-search__input" id="settingsDirectSearch" placeholder="Поиск..." />
          <span class="rule-search__count" id="settingsDirectCount"></span>
        </div>
        <div class="rule-list" id="settingsDirectList"></div>
        <div class="rule-add" style="margin-top:8px;">
          <input type="text" placeholder="localhost, *.local" id="settingsDirectInput" />
          <button class="primary" id="addSettingsDirectBtn">Добавить</button>
        </div>
      </div>
    </div>

    <!-- Security -->
    <div class="settings-section" data-tab="security" style="display:none;">
      <div class="settings-section-title">Безопасность</div>
      <div class="settings-section-desc">Защита данных и предотвращение утечек</div>
      <div class="field-group">
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Защита WebRTC</div>
            <div class="field-desc">Предотвращает утечку реального IP через WebRTC</div>
          </div>
          <button class="toggle-switch" data-key="webrtcProtectionEnabled"></button>
        </div>
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">DNS через прокси</div>
            <div class="field-desc">Все DNS-запросы направляются через прокси-сервер (скоро)</div>
          </div>
          <button class="toggle-switch" disabled style="opacity:0.4;"></button>
        </div>
        <div class="field-row">
          <div class="field-info">
            <div class="field-label">Kill switch</div>
            <div class="field-desc">Блокировать весь трафик при обрыве соединения с прокси</div>
          </div>
          <button class="toggle-switch" data-key="killSwitchEnabled"></button>
        </div>
      </div>
    </div>

    <!-- About -->
    <div class="settings-section" data-tab="about" style="display:none;">
      <div class="settings-section-title">О расширении</div>
      <div class="settings-section-desc">Версия, ссылки и управление конфигурацией</div>
      <div class="field-group">
        <div class="field-row">
          <div class="field-info"><div class="field-label">Версия</div></div>
          <span id="aboutVersion" style="font:500 var(--text-sm)/1 var(--font-mono);color:var(--muted);"></span>
        </div>
        <div class="field-row">
          <div class="field-info"><div class="field-label">Репозиторий</div></div>
          <a href="https://github.com/prasx/chrome-proxy-manager" target="_blank" style="font:400 var(--text-sm)/1 var(--font-mono);color:var(--accent);text-decoration:none;">prasx/chrome-proxy-manager</a>
        </div>
        <div class="field-row">
          <div class="field-info"><div class="field-label">Лицензия</div></div>
          <span style="font:400 var(--text-sm)/1 var(--font-body);color:var(--muted);">MIT</span>
        </div>
      </div>
      <div class="settings-actions">
        <button class="btn btn-secondary" id="exportConfigBtn">Экспорт настроек</button>
        <button class="btn btn-secondary" id="importConfigBtn">Импорт настроек</button>
        <button class="btn btn-danger" id="resetStatsBtn">Сбросить статистику</button>
      </div>
    </div>

  </div>
</div>

<input type="file" id="importConfigFile" style="display:none" accept=".json" />
<script src="shared.js"></script>
<script src="settings.js"></script>
</body>
</html>