PrivacyKit/index.html at main · CayPlayProjects/PrivacyKit · 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!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="#0a0d12" />
  <meta name="description" content="PrivacyKit — privacy-first набор инструментов для ссылок, QR, файлов, изображений, текста и разработчиков. Работает прямо в браузере." />
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
  <title>PrivacyKit — Private browser toolbox</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="ambient ambient-one"></div>
  <div class="ambient ambient-two"></div>

  <header class="topbar">
    <a class="brand" href="#" aria-label="PrivacyKit — главная">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 24 24">
          <path d="M12 2.8 19 5.7v5.5c0 4.7-2.9 8.6-7 10-4.1-1.4-7-5.3-7-10V5.7L12 2.8Z"/>
          <path d="M9.2 12.1 11 14l3.9-4.2"/>
        </svg>
      </span>
      <span>PrivacyKit</span>
    </a>

    <div class="topbar-actions">
      <span class="privacy-status"><span class="status-dot"></span> Local only</span>
      <button class="icon-button" id="themeButton" type="button" aria-label="Переключить тему" title="Переключить тему">
        <svg class="moon-icon" viewBox="0 0 24 24"><path d="M20.5 15.3A8.3 8.3 0 0 1 8.7 3.5 8.6 8.6 0 1 0 20.5 15.3Z"/></svg>
        <svg class="sun-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.5"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
      </button>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="hero-badge">
        <span class="badge-spark">✦</span>
        PRIVATE BY DESIGN
      </div>
      <h1>Полезные инструменты.<br><span>Без загрузки ваших данных.</span></h1>
      <p class="hero-copy">
        PrivacyKit обрабатывает ссылки, файлы, текст, JSON, пароли и изображения прямо на вашем устройстве.
        Никаких аккаунтов, серверной обработки и лишних действий.
      </p>

      <div class="hero-actions">
        <button class="primary-button" type="button" data-scroll-tools>
          Открыть инструменты
          <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
        </button>
        <div class="local-note">
          <span class="lock-mini">⌁</span>
          <span><strong>100% browser-side</strong><small>Данные остаются у вас</small></span>
        </div>
      </div>
    </section>

    <section class="tools-section" id="tools">
      <div class="section-heading">
        <div>
          <span class="eyebrow">TOOLBOX</span>
          <h2>Выберите инструмент</h2>
        </div>
        <p>Все основные функции работают без отправки введённых данных на сервер.</p>
      </div>

      <div class="tool-grid">
        <button class="tool-card featured" type="button" data-tool="linkCleaner">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M10.2 13.8a4.5 4.5 0 0 0 6.4 0l2.1-2.1a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2"/><path d="M13.8 10.2a4.5 4.5 0 0 0-6.4 0l-2.1 2.1a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></svg>
          </span>
          <span class="tool-copy">
            <span class="tool-tag">POPULAR</span>
            <strong>Link Cleaner</strong>
            <small>Удаляет UTM, fbclid, gclid и другие параметры отслеживания.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="passwordGenerator">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="10" rx="3"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v2"/></svg>
          </span>
          <span class="tool-copy">
            <strong>Password Generator</strong>
            <small>Создаёт стойкие пароли через криптографический генератор браузера.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="jsonFormatter">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M9 4H7a2 2 0 0 0-2 2v3a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h2M15 4h2a2 2 0 0 1 2 2v3a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-2"/></svg>
          </span>
          <span class="tool-copy">
            <strong>JSON Formatter</strong>
            <small>Форматирует, проверяет и минифицирует JSON.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="textCleaner">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M5 6h14M5 10h10M5 14h14M5 18h8"/><path d="m17.5 15.5 3 3M20.5 15.5l-3 3"/></svg>
          </span>
          <span class="tool-copy">
            <strong>Text Cleaner</strong>
            <small>Убирает лишние пробелы и невидимые символы.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="base64Tool">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M8 8 4 12l4 4M16 8l4 4-4 4M13.5 5 10.5 19"/></svg>
          </span>
          <span class="tool-copy">
            <strong>Base64</strong>
            <small>Кодирует и декодирует UTF-8 текст локально.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="qrGenerator">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4z"/><path d="M15 14h2v2h-2zM19 14h1v3h-3M14 19h3v1h-3zM19 19h1v1h-1z"/></svg>
          </span>
          <span class="tool-copy">
            <span class="tool-tag new">NEW</span>
            <strong>QR Generator</strong>
            <small>Создаёт QR-код из ссылки или текста прямо в браузере.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>


        <button class="tool-card" type="button" data-tool="qrReader">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/><path d="M8 8h3v3H8zM14 8h2v2h-2zM8 14h2v2H8zM13 13h3v3h-3z"/></svg>
          </span>
          <span class="tool-copy">
            <span class="tool-tag new">NEW</span>
            <strong>QR Reader</strong>
            <small>Считывает QR-коды с изображения или камеры без загрузки снимка.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="fileHash">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M9 3h6l4 4v14H5V3h4Z"/><path d="M14 3v5h5"/><path d="M8 13h8M8 17h5"/><path d="m15.5 11.5 1 1 2-2"/></svg>
          </span>
          <span class="tool-copy">
            <span class="tool-tag new">NEW</span>
            <strong>File Hash</strong>
            <small>Считает SHA-256/SHA-1 и сравнивает контрольную сумму файла.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>


        <button class="tool-card" type="button" data-tool="fileInspector">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v5h5"/><circle cx="11" cy="14" r="2.5"/><path d="m13 16 2 2"/></svg>
          </span>
          <span class="tool-copy">
            <span class="tool-tag new">NEW</span>
            <strong>File Inspector</strong>
            <small>Показывает тип, MIME, сигнатуру, размер, SHA-256 и безопасный preview.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>

        <button class="tool-card" type="button" data-tool="imageStudio">
          <span class="tool-icon">
            <svg viewBox="0 0 24 24"><rect x="3.5" y="4" width="17" height="16" rx="3"/><circle cx="9" cy="9" r="1.5"/><path d="m5.5 17 4.5-4 3 2.6 2.5-2 3 3.4"/></svg>
          </span>
          <span class="tool-copy">
            <span class="tool-tag new">UPGRADED</span>
            <strong>Image Studio</strong>
            <small>Сжимает, меняет размер, формат и очищает метаданные изображений.</small>
          </span>
          <span class="card-arrow">↗</span>
        </button>
      </div>
    </section>

    <section class="trust-strip">
      <div><span>01</span><strong>Без регистрации</strong><small>Открыл — используй.</small></div>
      <div><span>02</span><strong>Локальная обработка</strong><small>Основные операции выполняет браузер.</small></div>
      <div><span>03</span><strong>Open source</strong><small>Код можно проверить самостоятельно.</small></div>
    </section>
  </main>

  <footer>
    <div class="footer-brand">
      <span class="brand-mark small" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 2.8 19 5.7v5.5c0 4.7-2.9 8.6-7 10-4.1-1.4-7-5.3-7-10V5.7L12 2.8Z"/><path d="M9.2 12.1 11 14l3.9-4.2"/></svg>
      </span>
      <div><strong>PrivacyKit</strong><small>Private browser toolbox</small></div>
    </div>
    <span class="footer-version">v0.4 • GitHub-ready • Built for the browser</span>
  </footer>

  <div class="modal-backdrop" id="modalBackdrop" aria-hidden="true">
    <section class="tool-modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
      <div class="modal-header">
        <div>
          <span class="modal-kicker" id="modalKicker">PRIVACYKIT TOOL</span>
          <h3 id="modalTitle">Инструмент</h3>
        </div>
        <button class="close-button" type="button" id="closeModal" aria-label="Закрыть">
          <svg viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></svg>
        </button>
      </div>
      <div class="modal-body" id="modalBody"></div>
    </section>
  </div>

  <div class="toast" id="toast" role="status" aria-live="polite">
    <span class="toast-dot"></span>
    <span id="toastText">Готово</span>
  </div>

  <script src="qrcode.min.js"></script>
  <script src="app.js"></script>
</body>
</html>