Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
269 lines (260 loc) · 96.8 KB
/
Copy pathindex.html
File metadata and controls
269 lines (260 loc) · 96.8 KB
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html lang="uk" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reddit Farming Masterclass</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FF4500'/%3E%3Cstop offset='100%25' stop-color='%23FF6B35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='%231a1a1a'/%3E%3Ctext x='16' y='23' font-family='Arial,sans-serif' font-size='20' font-weight='bold' fill='url(%23g)' text-anchor='middle'%3ERM%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="antialiased">
<div id="db-status" class="db-status hidden"><span id="db-dot" class="db-dot"></span><span id="db-label">Supabase</span></div>
<div id="copy-toast" class="copy-toast">Copied!</div>
<div id="login-screen" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
<div class="w-full max-w-md">
<div class="text-center mb-8">
<div class="text-4xl font-bold tracking-wider mb-2" style="color:var(--accent);">REDDIT<span style="color:var(--text-primary);">MASTER</span></div>
<p class="text-sm" style="color:var(--text-muted);">Access Control System</p>
</div>
<form id="login-form" class="rounded-xl p-8 border shadow-lg" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="mb-5">
<label class="block text-xs font-bold uppercase tracking-wider mb-2" style="color:var(--text-muted);">Login</label>
<input id="login-user" type="text" placeholder="Enter username" autocomplete="off" class="w-full px-4 py-3 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500] focus:border-transparent">
</div>
<div class="mb-6">
<label class="block text-xs font-bold uppercase tracking-wider mb-2" style="color:var(--text-muted);">Password</label>
<div class="relative">
<input id="login-pass" type="password" placeholder="Enter password" autocomplete="off" class="w-full px-4 py-3 pr-12 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500] focus:border-transparent">
<button type="button" onclick="togglePasswordVisibility()" class="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded hover:opacity-70 transition-opacity" style="color:var(--text-muted);" title="Show/Hide password">
<svg id="eye-icon-show" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
<svg id="eye-icon-hide" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
</button>
</div>
</div>
<div id="login-error" class="hidden mb-4 text-red-500 text-sm text-center font-medium">Invalid credentials</div>
<button type="submit" class="w-full py-3 rounded-lg font-bold text-white text-sm tracking-wide transition-all hover:opacity-90 active:scale-[0.98] flex items-center justify-center gap-2" style="background:var(--accent);" id="login-btn">Sign In</button>
</form>
<div id="forgot-section" class="text-center mt-4">
<button onclick="document.getElementById('forgot-msg').classList.toggle('hidden')" class="text-xs transition-colors hover:opacity-80" style="color:var(--accent);">Forgot your password?</button>
<div id="forgot-msg" class="hidden mt-2 p-3 rounded-lg border text-xs" style="background:var(--bg-card);border-color:var(--border-main);color:var(--text-tertiary);">Please contact your administrator to reset your password.</div>
</div>
<p class="text-center text-xs mt-4" style="color:var(--text-faint);">System v5.0 — Cloud Edition</p>
</div>
</div>
<div id="app-admin" class="hidden min-h-screen">
<header class="border-b sticky top-0 z-50 backdrop-blur-sm" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center gap-3">
<span class="text-xl font-bold tracking-wider" style="color:var(--accent);">REDDIT<span style="color:var(--text-primary);">MASTER</span></span>
<span id="admin-role-badge" class="px-2.5 py-0.5 rounded-full text-xs font-medium border" style="background:var(--badge-red-bg);color:var(--badge-red-text);border-color:var(--badge-red-border);">Master Admin</span>
</div>
<!-- Desktop actions (hidden on mobile) -->
<div class="hidden sm:flex items-center gap-2">
<button onclick="toggleTheme()" class="p-2 rounded-lg transition-colors hover:opacity-80 flex items-center justify-center" style="color:var(--text-tertiary);" title="Toggle theme">
<svg class="w-5 h-5 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
<svg class="w-5 h-5 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
</button>
<button onclick="openModal('settings-modal');prepSettings()" class="p-2 rounded-lg transition-colors hover:opacity-80 flex items-center justify-center" style="color:var(--text-tertiary);" title="Settings">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</button>
<button id="btn-audit-log" onclick="openAuditLog()" class="p-2 rounded-lg transition-colors hover:opacity-80 hidden flex items-center justify-center" style="color:var(--text-tertiary);" title="Audit Log">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
</button>
<button onclick="doLogout()" class="text-sm font-medium hover:text-white transition-colors ml-2" style="color:var(--text-muted);">Sign Out</button>
</div>
<!-- Mobile menu button (visible on mobile only) -->
<div class="flex sm:hidden items-center">
<button id="admin-menu-btn" onclick="toggleAdminMenu()" class="p-2 rounded-lg flex items-center justify-center" style="color:var(--text-tertiary);">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/></svg>
</button>
</div>
</div>
</div>
</header>
<!-- Mobile admin dropdown menu -->
<div id="admin-mobile-menu" class="hidden sm:hidden border-b" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="max-w-7xl mx-auto px-4 py-2 flex flex-col gap-1">
<button onclick="toggleTheme();toggleAdminMenu()" class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-left" style="color:var(--text-secondary);">
<svg class="w-4 h-4 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
<svg class="w-4 h-4 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
<span>Toggle Theme</span>
</button>
<button onclick="openModal('settings-modal');prepSettings();toggleAdminMenu()" class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-left" style="color:var(--text-secondary);">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>Settings</span>
</button>
<button id="btn-audit-log-mobile" onclick="openAuditLog();toggleAdminMenu()" class="hidden flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-left" style="color:var(--text-secondary);">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
<span>Audit Log</span>
</button>
<div class="border-t my-1" style="border-color:var(--border-main);"></div>
<button onclick="doLogout()" class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-left" style="color:var(--badge-red-text);">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
<span>Sign Out</span>
</button>
</div>
</div>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="rounded-xl p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><div class="flex items-center justify-between mb-2"><h3 class="text-xs font-bold uppercase tracking-wider" style="color:var(--text-muted);">Active Users</h3><div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:var(--badge-green-bg);"><svg class="w-4 h-4" style="color:var(--badge-green-text);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg></div></div><span id="stat-users" class="text-3xl font-extrabold" style="color:var(--text-primary);">—</span></div>
<div class="rounded-xl p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><div class="flex items-center justify-between mb-2"><h3 class="text-xs font-bold uppercase tracking-wider" style="color:var(--text-muted);">Total Sessions</h3><div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:var(--badge-blue-bg);"><svg class="w-4 h-4" style="color:var(--badge-blue-text);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div><span id="stat-sessions" class="text-3xl font-extrabold" style="color:var(--text-primary);">—</span></div>
<div class="rounded-xl p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><div class="flex items-center justify-between mb-2"><h3 class="text-xs font-bold uppercase tracking-wider" style="color:var(--text-muted);">Active Sessions</h3><div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:var(--badge-yellow-bg);"><svg class="w-4 h-4" style="color:var(--badge-yellow-text);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div></div><span id="stat-active-sessions" class="text-3xl font-extrabold" style="color:var(--text-primary);">—</span></div>
<div class="rounded-xl p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><div class="flex items-center justify-between mb-2"><h3 class="text-xs font-bold uppercase tracking-wider" style="color:var(--text-muted);">Admin Accounts</h3><div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:var(--badge-purple-bg);"><svg class="w-4 h-4" style="color:var(--badge-purple-text);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div><span id="stat-admins" class="text-3xl font-extrabold" style="color:var(--text-primary);">—</span></div>
</div>
<div class="flex gap-6 mb-6 border-b" style="border-color:var(--border-main);">
<button onclick="switchTab('users')" class="tab-btn active pb-3 text-sm font-bold uppercase tracking-wider" id="tab-users">Users</button>
<button onclick="switchTab('admins')" class="tab-btn pb-3 text-sm font-bold uppercase tracking-wider" id="tab-admins">Administrators</button>
</div>
<div id="panel-users">
<div class="flex flex-col sm:flex-row gap-3 mb-4">
<div class="relative flex-1"><svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2" style="color:var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg><input id="user-search" type="text" placeholder="Search by username..." oninput="renderDashboard()" class="w-full pl-10 pr-4 py-2.5 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div>
<button id="btn-create-user" onclick="openCreateUserModal()" class="px-5 py-2.5 rounded-lg font-bold text-white text-sm tracking-wide transition-all hover:opacity-90 active:scale-[0.98] whitespace-nowrap" style="background:var(--accent);">+ Create User</button>
</div>
<div class="rounded-xl border overflow-hidden" style="background:var(--bg-card);border-color:var(--border-main);"><div class="overflow-x-auto"><table class="w-full text-left"><thead><tr style="background:var(--bg-card-alt);"><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">User</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Credentials</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Status</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Comment</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Sessions</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Last Active</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b text-right" style="color:var(--text-tertiary);border-color:var(--border-main);">Actions</th></tr></thead><tbody id="users-tbody"></tbody></table></div><div id="users-empty" class="hidden py-12 text-center"><p class="text-sm" style="color:var(--text-tertiary);">No users found.</p></div></div>
</div>
<div id="panel-admins" class="hidden">
<div class="flex justify-end mb-4"><button id="btn-create-admin" onclick="openCreateAdminModal()" class="px-5 py-2.5 rounded-lg font-bold text-white text-sm tracking-wide transition-all hover:opacity-90 active:scale-[0.98] whitespace-nowrap" style="background:var(--accent);">+ Create Admin</button></div>
<div class="rounded-xl border overflow-hidden" style="background:var(--bg-card);border-color:var(--border-main);"><div class="overflow-x-auto"><table class="w-full text-left"><thead><tr style="background:var(--bg-card-alt);"><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Admin</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Credentials</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Role</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Permissions</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b" style="color:var(--text-tertiary);border-color:var(--border-main);">Created</th><th class="px-4 py-3 text-xs font-bold uppercase tracking-wider border-b text-right" style="color:var(--text-tertiary);border-color:var(--border-main);">Actions</th></tr></thead><tbody id="admins-tbody"></tbody></table></div></div>
</div>
</main>
</div>
<div id="create-user-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-md rounded-xl border shadow-2xl fade-in" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b" style="border-color:var(--border-main);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Create User</h3><button onclick="closeModal('create-user-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div class="p-6 space-y-4">
<div class="flex rounded-lg overflow-hidden border" style="border-color:var(--border-main);"><button onclick="setCUMode('auto')" id="cu-mode-auto" class="flex-1 py-2 text-sm font-medium transition-colors" style="background:var(--accent);color:#fff;">Auto Generate</button><button onclick="setCUMode('manual')" id="cu-mode-manual" class="flex-1 py-2 text-sm font-medium transition-colors" style="background:transparent;color:var(--text-muted);">Manual Input</button></div>
<div id="cu-auto" class="space-y-3"><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Username</label><div class="flex gap-2"><input id="cu-auto-user" type="text" readonly class="flex-1 px-3 py-2 rounded-lg border text-sm font-mono" style="background:var(--bg-code);border-color:var(--border-main);color:var(--code-text);"><button onclick="regenCU()" class="px-3 py-2 rounded-lg border text-sm hover:opacity-80" style="border-color:var(--border-main);color:var(--text-muted);">↻</button></div></div><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Password</label><input id="cu-auto-pass" type="text" readonly class="w-full px-3 py-2 rounded-lg border text-sm font-mono" style="background:var(--bg-code);border-color:var(--border-main);color:var(--code-text);"></div></div>
<div id="cu-manual" class="space-y-3 hidden"><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Username</label><input id="cu-man-user" type="text" placeholder="Enter username" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Password</label><input id="cu-man-pass" type="text" placeholder="Enter password" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div></div>
<div id="cu-error" class="hidden text-sm text-center font-medium py-2 rounded-lg" style="color:#ef4444;background:var(--bad-bg);"></div>
<button onclick="doCreateUser()" class="w-full py-3 rounded-lg font-bold text-white text-sm transition-all hover:opacity-90 active:scale-[0.98]" style="background:var(--accent);">Create User</button>
</div>
</div>
</div>
<div id="create-admin-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-lg rounded-xl border shadow-2xl fade-in max-h-[90vh] overflow-y-auto" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b sticky top-0 z-10" style="border-color:var(--border-main);background:var(--bg-card);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Create Admin</h3><button onclick="closeModal('create-admin-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div class="p-6 space-y-4">
<div class="flex rounded-lg overflow-hidden border" style="border-color:var(--border-main);"><button onclick="setCAMode('auto')" id="ca-mode-auto" class="flex-1 py-2 text-sm font-medium transition-colors" style="background:var(--accent);color:#fff;">Auto Generate</button><button onclick="setCAMode('manual')" id="ca-mode-manual" class="flex-1 py-2 text-sm font-medium transition-colors" style="background:transparent;color:var(--text-muted);">Manual Input</button></div>
<div id="ca-auto" class="space-y-3"><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Username</label><div class="flex gap-2"><input id="ca-auto-user" type="text" readonly class="flex-1 px-3 py-2 rounded-lg border text-sm font-mono" style="background:var(--bg-code);border-color:var(--border-main);color:var(--code-text);"><button onclick="regenCA()" class="px-3 py-2 rounded-lg border text-sm hover:opacity-80" style="border-color:var(--border-main);color:var(--text-muted);">↻</button></div></div><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Password</label><input id="ca-auto-pass" type="text" readonly class="w-full px-3 py-2 rounded-lg border text-sm font-mono" style="background:var(--bg-code);border-color:var(--border-main);color:var(--code-text);"></div></div>
<div id="ca-manual" class="space-y-3 hidden"><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Username</label><input id="ca-man-user" type="text" placeholder="Enter admin username" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div><div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Password</label><input id="ca-man-pass" type="text" placeholder="Enter admin password" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div></div>
<div><label class="block text-xs font-bold uppercase tracking-wider mb-3" style="color:var(--text-muted);">Permissions</label><div id="ca-perms" class="space-y-2"></div></div>
<div id="ca-error" class="hidden text-sm text-center font-medium py-2 rounded-lg" style="color:#ef4444;background:var(--bad-bg);"></div>
<button onclick="doCreateAdmin()" class="w-full py-3 rounded-lg font-bold text-white text-sm transition-all hover:opacity-90 active:scale-[0.98]" style="background:var(--accent);">Create Admin</button>
</div>
</div>
</div>
<div id="edit-admin-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-lg rounded-xl border shadow-2xl fade-in max-h-[90vh] overflow-y-auto" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b sticky top-0 z-10" style="border-color:var(--border-main);background:var(--bg-card);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Edit Admin — <span id="ea-name" class="font-mono" style="color:var(--accent);"></span></h3><button onclick="closeModal('edit-admin-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div class="p-6 space-y-4">
<div id="ea-pass-section"><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">New Password (leave blank to keep)</label><input id="ea-pass" type="text" placeholder="New password" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div>
<div id="ea-perms-section"><label class="block text-xs font-bold uppercase tracking-wider mb-3" style="color:var(--text-muted);">Permissions</label><div id="ea-perms" class="space-y-2"></div></div>
<div id="ea-msg" class="hidden text-sm text-center font-medium py-2 rounded-lg"></div>
<button onclick="doSaveAdmin()" class="w-full py-3 rounded-lg font-bold text-white text-sm transition-all hover:opacity-90 active:scale-[0.98]" style="background:var(--accent);">Save Changes</button>
</div>
</div>
</div>
<div id="edit-user-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-md rounded-xl border shadow-2xl fade-in" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b" style="border-color:var(--border-main);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Edit User — <span id="eu-name" class="font-mono" style="color:var(--accent);"></span></h3><button onclick="closeModal('edit-user-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div class="p-6 space-y-4">
<div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">New Password</label><div class="flex gap-2"><input id="eu-pass" type="text" placeholder="Enter new password" class="flex-1 px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"><button onclick="document.getElementById('eu-pass').value=genPass()" class="px-3 py-2 rounded-lg border text-sm hover:opacity-80" style="border-color:var(--border-main);color:var(--text-muted);" title="Generate">↻</button></div></div>
<div id="eu-msg" class="hidden text-sm text-center font-medium py-2 rounded-lg"></div>
<button onclick="doSaveUserPass()" class="w-full py-3 rounded-lg font-bold text-white text-sm transition-all hover:opacity-90 active:scale-[0.98]" style="background:var(--accent);">Save Password</button>
</div>
</div>
</div>
<div id="session-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-2xl rounded-xl border shadow-2xl max-h-[80vh] overflow-y-auto fade-in" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b sticky top-0 z-10" style="border-color:var(--border-main);background:var(--bg-card);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Sessions — <span id="sm-name" class="font-mono" style="color:var(--accent);"></span></h3><button onclick="closeModal('session-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div id="sm-body" class="p-6"></div>
</div>
</div>
<div id="comment-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-md rounded-xl border shadow-2xl fade-in" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b" style="border-color:var(--border-main);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Comment — <span id="cm-name" class="font-mono" style="color:var(--accent);"></span></h3><button onclick="closeModal('comment-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div class="p-6 space-y-4"><textarea id="cm-text" rows="4" placeholder="Add a note about this user..." class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500] resize-none" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></textarea><button onclick="doSaveComment()" class="w-full py-3 rounded-lg font-bold text-white text-sm transition-all hover:opacity-90 active:scale-[0.98]" style="background:var(--accent);">Save Comment</button></div>
</div>
</div>
<div id="settings-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-md rounded-xl border shadow-2xl fade-in" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b" style="border-color:var(--border-main);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Change My Password</h3><button onclick="closeModal('settings-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div class="p-6 space-y-4">
<div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Current Password</label><input id="set-cur" type="password" placeholder="Enter current password" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div>
<div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">New Password</label><input id="set-new" type="password" placeholder="Enter new password" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div>
<div><label class="block text-xs font-bold uppercase tracking-wider mb-1" style="color:var(--text-muted);">Confirm</label><input id="set-conf" type="password" placeholder="Re-enter new password" class="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-[#FF4500]" style="background:var(--bg-input);border-color:var(--border-main);color:var(--text-primary);"></div>
<div id="set-msg" class="hidden text-sm text-center font-medium py-2 rounded-lg"></div>
<button onclick="doChangePass()" class="w-full py-3 rounded-lg font-bold text-white text-sm transition-all hover:opacity-90 active:scale-[0.98]" style="background:var(--accent);">Update Password</button>
</div>
</div>
</div>
<div id="audit-modal" class="fixed inset-0 z-[200] hidden items-center justify-center p-4 modal-overlay" onclick="if(event.target===this)closeModal(this.id)">
<div class="w-full max-w-2xl rounded-xl border shadow-2xl max-h-[80vh] overflow-y-auto fade-in" style="background:var(--bg-card);border-color:var(--border-main);">
<div class="flex items-center justify-between px-6 py-4 border-b sticky top-0 z-10" style="border-color:var(--border-main);background:var(--bg-card);"><h3 class="font-bold text-lg" style="color:var(--text-primary);">Admin Audit Log</h3><button onclick="closeModal('audit-modal')" class="p-1 rounded hover:opacity-70" style="color:var(--text-muted);">✕</button></div>
<div id="audit-body" class="p-6"></div>
</div>
</div>
<div id="app-course" class="hidden">
<header id="mobile-header" class="fixed top-0 w-full backdrop-blur z-50 flex items-center justify-between p-4 border-b" style="background:var(--bg-body);border-color:var(--border-main);">
<div class="font-bold text-xl tracking-wider" style="color:var(--accent);">REDDIT<span style="color:var(--text-primary);">MASTER</span></div>
<div class="flex items-center gap-3">
<button onclick="toggleTheme()" class="p-2 rounded-lg flex items-center justify-center" style="color:var(--text-tertiary);"><svg class="w-5 h-5 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg><svg class="w-5 h-5 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg></button>
<button id="menu-btn" class="focus:outline-none" style="color:var(--text-tertiary);"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
</div>
</header>
<div id="course-wrapper" class="flex min-h-screen pt-16">
<aside id="sidebar" class="fixed inset-y-0 left-0 w-72 border-r -translate-x-full transition-transform duration-300 ease-in-out z-40 overflow-y-auto" style="background:var(--bg-sidebar);border-color:var(--border-main);">
<div class="p-6">
<div class="flex items-center justify-between mb-8">
<div class="font-bold text-2xl tracking-wider" style="color:var(--accent);">REDDIT<span style="color:var(--text-primary);">MASTER</span></div>
<div class="flex items-center gap-1">
<button onclick="toggleTheme()" class="p-2 rounded-lg hover:opacity-80 flex items-center justify-center" style="color:var(--text-tertiary);"><svg class="w-5 h-5 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg><svg class="w-5 h-5 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg></button>
<button id="sidebar-close" class="p-2 rounded-lg hover:opacity-80 flex items-center justify-center" style="color:var(--text-tertiary);" title="Close sidebar"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"/></svg></button>
</div>
</div>
<div class="text-xs uppercase tracking-widest mb-6" style="color:var(--text-faint);">Farming Protocol v5.0</div>
<nav class="space-y-1">
<a href="#ch1" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">1. Вступ та Філософія</a>
<a href="#ch2" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">2. Потенціал Reddit</a>
<a href="#ch3" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">3. Антидетект Браузер</a>
<a href="#ch4" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">4. Проксі</a>
<a href="#ch5" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">5. Прогрів Браузера</a>
<a href="#ch6" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">6. Email</a>
<a href="#ch7" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">7. Реєстрація</a>
<a href="#ch8" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">8. Прогрів Акаунта</a>
<a href="#ch9" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">9. Контент Стратегія</a>
<a href="#ch10" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">10. Фатальні Помилки</a>
<a href="#ch11" class="sidebar-link block px-4 py-3 text-sm rounded-r-md">11. FAQ</a>
</nav>
<div class="mt-8 pt-6 border-t" style="border-color:var(--border-main);"><button onclick="doLogout()" class="w-full flex items-center gap-2 px-4 py-3 text-sm rounded-lg hover:opacity-80" style="color:var(--text-muted);"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>Вийти</button></div>
</div>
</aside>
<div id="overlay" class="fixed inset-0 z-30 hidden backdrop-blur-sm" style="background:var(--overlay-bg);"></div>
<button id="sidebar-open-btn" class="fixed top-20 left-4 z-30 p-2.5 rounded-lg border shadow-lg transition-all hover:scale-105" style="background:var(--bg-card);border-color:var(--border-main);color:var(--text-tertiary);" title="Open sidebar"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
<main id="course-main" class="flex-1 p-6 lg:p-12 max-w-5xl mx-auto w-full transition-all duration-300">
<div class="mb-12 border-b pb-8" style="border-color:var(--border-main);"><h1 class="text-4xl lg:text-5xl font-extrabold mb-4 tracking-tight" style="color:var(--text-primary);">Reddit Farming <span class="text-glow" style="color:var(--accent);">Masterclass</span></h1><p class="text-xl leading-relaxed" style="color:var(--text-tertiary);">Повне поетапне технічне керівництво з масового створення та вирощування акаунтів Reddit.</p></div>
<section id="ch1" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">01</span>Вступ та філософія курсу</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Цей курс є поетапним технічним керівництвом для тих, хто хоче на професійному рівні освоїти фарм (масове створення та вирощування) акаунтів у соціальній мережі Reddit. Кінцева мета — отримання трафіку на зовнішні сайти, канали, магазини або перепродаж готових "вирощених" профілів на спеціалізованих ринках. Після засвоєння матеріалу ви зможете системно створювати масиви акаунтів, мінімізувавши ризик їх блокування вбудованими системами захисту (антибот).</p><p><strong style="color:var(--text-primary);">Ключовий принцип успіху — дотримання алгоритму.</strong> Навіть незначна, на вашу думку, технічна деталь (наприклад, відсутність історії перегляду, однакова тривалість сесій на всіх акаунтах) може призвести до негайної ідентифікації профілю як штучного та його блокування без можливості оскарження. Тому кожен крок має виконуватися точно, методично та без імпровізацій.</p><div class="warning-box p-6 rounded-lg my-6"><h3 class="font-bold mb-3 flex items-center" style="color:var(--warning-border);"><svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>УВАГА: Правові та етичні рамки</h3><p class="text-sm">Масове створення акаунтів суперечить Умовам використання Reddit (User Agreement). Платформа забороняє використання ботів, створення кількох облікових записів для уникнення санкцій (ban evasion) або для штучного поширення контенту. Цей курс надається виключно в ознайомлювальних та навчальних цілях. Автор не несе відповідальності за будь-які наслідки, що виникнуть в результаті практичного застосування описаних методів: блокування акаунтів, конфіскацію карми, позови або бан усієї мережи IP-адрес. Ризик та повна відповідальність за дії на платформі лежить на користувачі.</p></div></div></section>
<section id="ch2" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">02</span>Що таке Reddit і чому його акаунти мають високий комерційний потенціал</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Reddit — це не просто соцмережа, це масштабна агрегаційна платформа новин і дискусійних форумів (сабредітів), що за кількістю активних користувачів та обсягом трафіку поступається лише гігантам на кшталт Google та Facebook, перевершуючи Twitter чи Telegram. Її унікальність полягає в потужній алгоритмічній системі рекомендацій та структурованих спільнотах (сабреддітах), що дозволяє навіть новому посту швидко знайти цільову, зацікавлену аудиторію.</p><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">Чому акаунти цінні? (Karma Value)</h3><p>Ключовий показник — карма (karma). Це внутрішня система репутації, що нараховується за лайки (upvotes) від інших користувачів. Висока карма (від 1-2 тисяч і вище) — це:</p><ul class="list-disc pl-6 space-y-3 marker:text-[#FF4500]"><li><strong style="color:var(--text-primary);">Довіра системи.</strong> Алгоритми Reddit довіряють таким акаунтам більше, їх пости частіше потрапляють в рекомендації і рідше потрапляють у спам-фільтри.</li><li><strong style="color:var(--text-primary);">Довіра спільноти.</strong> Користувачі схильні більше довіряти коментарям і публікаціям від "досвідчених" учасників.</li><li><strong style="color:var(--text-primary);">Пряма монетизація.</strong> Такий акаунт можна продати на чорному ринку. Ціна залежить від рівня карми, віку акаунта та відсутності попередніх блокувань. Старий (1+ рік), "чистий" акаунт з 10к+ карми може коштувати сотні доларів.</li></ul><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">Які фактори руйнують цінність?</h3><p>"Смертним гріхом" є бан (блокування). Навіть якщо акаунт відновили, на ньому залишається невидима позначка, що знижує довіру системи назавжди. Також підозрілою є нестабільна активність: місяць щільних постів, потім 6 місяців тиші. Для Reddit це ознака або продажу акаунта, або бота.</p></div></section>
<section id="ch3" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">03</span>Антидетект браузер — основа технічної безпеки</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><h3 class="text-lg font-semibold mt-2 mb-2" style="color:var(--text-primary);">Пояснення проблеми</h3><p>Коли ви заходите на сайт, ваш браузер передає йому цілий масив технічних даних: User Agent, роздільна здатність екрана, список установлених шрифтів, мовні налаштування, часовий пояс і сотні інших параметрів ("digital fingerprint"). При створенні кількох акаунтів з одного браузера, цей "відбиток" буде ідентичним, що є очевидною ознакою бота.</p><h3 class="text-lg font-semibold mt-6 mb-2" style="color:var(--text-primary);">Рішення</h3><p>Антидетект браузер (Dolphin Anty, AdsPower, Multilogin) — це спеціальний софт, який ізолює сесії. Кожен створений у ньому профіль має унікальний, правдоподібний і непротиворечивий цифровий відбиток. Для Reddit це виглядає так, ніби з реєстрацією займаються різні люди з різних комп'ютерів або смартфонів.</p><div class="rounded-lg p-6 border my-6" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-4 border-b pb-3" style="color:var(--text-primary);border-color:var(--border-main);">Детальна інструкція для Dolphin Anty (безкоштовна версія):</h4><ol class="list-decimal pl-6 space-y-3" style="color:var(--text-tertiary);"><li>Завантажте та встановіть офіційний клієнт.</li><li>При створенні нового профілю оберіть емуляцію <strong style="color:var(--text-primary);">Desktop (Windows/Mac)</strong> або <strong style="color:var(--text-primary);">Mobile (Android/iOS)</strong>. Для Reddit частіше використовують десктоп.</li><li><span style="color:var(--warning-border);">НЕ змінюйте</span> автоматично згенеровані налаштування (User Agent, Canvas, WebGL тощо), якщо не розумієте, що робите. Система сама підбирає правдоподібні значення.</li><li>Для кожного нового акаунта Reddit створюйте абсолютно новий профіль браузера. <strong style="color:var(--text-primary);">Ніколи не використовуйте один профіль для двох різних акаунтів Reddit.</strong></li></ol></div><div class="tip-box p-5 rounded-lg"><h4 class="font-bold text-sm mb-2" style="color:var(--tip-border);">Правило безпеки №1</h4><p class="text-sm">Ніколи не запускайте два або більше профілів одночасно, навіть у різних вікнах. Це може призвести до "переплетення" їх цифрових відбитків. Працюйте послідовно: закрили один профіль — відпочили 1-2 хвилини — відкрили наступний.</p></div></div></section>
<section id="ch4" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">04</span>Проксі: як обрати та налаштувати</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><h3 class="text-lg font-semibold mt-2 mb-2" style="color:var(--text-primary);">Чому звичайні проксі / VPN не підходять?</h3><div class="grid md:grid-cols-2 gap-4 my-6"><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">❌ VPN</h4><p class="text-sm">Більшість VPN-сервісів використовують серверні IP-адреси, які знаходяться в дата-центрах (Digital Ocean, AWS, Google Cloud). Reddit та інші великі платформи тримають оновлювані "чорні списки" таких діапазонів IP. Підключення з них часто вимагає додаткової капчі або веде до миттєвого бану.</p></div><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">❌ IPv4/IPv6 проксі з дата-центрів</h4><p class="text-sm">Аналогічна проблема. Ці IP не призначені для звичайних домашніх користувачів.</p></div></div><div class="p-5 rounded-lg border my-6" style="background:var(--good-bg);border-color:var(--good-border);"><h4 class="font-bold mb-2" style="color:#22c55e;">✅ Рішення: Мобільні проксі (3G/4G/5G)</h4><p class="text-sm mb-3"><strong style="color:var(--text-primary);">Принцип дії:</strong> Ви отримуєте IP-адресу, яка видається реальному мобільному оператору (наприклад, T-Mobile, Verizon у США). Для будь-якого сайту це виглядає так, ніби до нього заходить звичайна людина через свій смартфон або мобільний інтернет.</p><p class="text-sm"><strong style="color:var(--text-primary);">Як обрати?</strong> На сервісі проксі (наприклад, Decodo, Webshare, IPRoyal) обирайте саме Mobile proxies. У налаштуваннях обов'язково вкажіть країну — <strong>США</strong> та, якщо є вибір, штат.</p></div><h3 class="text-lg font-semibold mt-6 mb-2" style="color:var(--text-primary);">Економія трафіку</h3><p>2 ГБ — це обмежений ресурс. Щоб не витрачати його на завантаження медіа, встановіть у Dolphin Anty розширення типу <strong style="color:var(--text-primary);">"uBlock Origin"</strong>. Воно блокує рекламу, трекери, а також дає можливість заблокувати зображення та відео за замовчуванням. Ви завжди можете тимчасово увімкнути їх для конкретного сайту.</p><div class="tip-box p-5 rounded-lg mt-4"><h4 class="font-bold text-sm mb-2" style="color:var(--tip-border);">Важлива деталь</h4><p class="text-sm">Весь ваш пошук, прогрів та робота в цьому профілі має вестися <strong>англійською мовою</strong>. Використовуйте google.com, а не google.ua. Шукайте інформацію, характерну для американського користувача (локальні новини, погода у штатах, місцеві магазини). Це формує узгоджений цифровий профіль.</p></div></div></section>
<section id="ch5" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">05</span>Прогрів браузера: формування правдоподібного цифрового відбитка</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Прогрів браузера — це неформальна назва процесу імітації поведінки реальної людини до цільової дії (реєстрації). Мета: заповнити локальне сховище браузера (Cookies, Local Storage) датами популярних сайтів, створити історію перегляду та активності, щоб ваш цифровий профіль виглядав живим і діючим, а не «пустим», як у щойно встановленого браузера.</p><div class="warning-box p-5 rounded-lg my-6"><h4 class="font-bold mb-2" style="color:var(--warning-border);">Пояснення важливості</h4><p class="text-sm">Сучасні системи антиботу (Fingerprinting) аналізують не лише вашу текучу активність, а й контекст. Акаунт, створений з браузера, у якому є кукі від YouTube, Google Пошуку, Amazon та кількох новинних сайтів, виглядає набагато правдоподібніше, ніж акаунт, створений з браузера, де єдині кукі — від Reddit. Останнє — це класична ознака бота, налаштованого під одну задачу.</p></div><h3 class="text-xl font-semibold mt-8 mb-4" style="color:var(--text-primary);">Покроковий план прогріву (протягом 2-3 днів, по 1-2 сесії на день):</h3><div class="space-y-6"><div class="relative pl-8 border-l-2" style="border-color:var(--border-main);"><div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full" style="background:var(--accent);"></div><h4 class="font-bold mb-3" style="color:var(--text-primary);">День 1: Загальне знайомство з інтернетом</h4><ul class="list-disc pl-5 space-y-2 text-sm" style="color:var(--text-tertiary);"><li>Відкрийте пошукову систему (Google.com). Вручну введіть загальні запити: "weather in New York", "latest news", "best movies 2024", "how to cook pasta". Переходьте по 2-3 першим посиланням з результатів пошуку.</li><li>Відвідайте 3-4 популярні платформи:<ul class="list-disc pl-5 mt-2 space-y-1"><li><strong style="color:var(--text-primary);">YouTube:</strong> Знайдіть відео через пошук, подивіться 2-3 хвилини, прокрутіть коментарі.</li><li><strong style="color:var(--text-primary);">Amazon:</strong> Зайдіть на головну, введіть у пошук "phone charger", перейдіть на сторінку товару, прокрутіть опис.</li><li><strong style="color:var(--text-primary);">Pinterest:</strong> Просітьте стрічку, відкрийте пару зображень.</li></ul></li><li>Відвідайте 1-2 новинних сайти (напр., CNN.com, BBC.com). Прочитайте заголовки на головній сторінці.</li></ul></div><div class="relative pl-8 border-l-2" style="border-color:var(--accent);"><div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full" style="background:var(--accent);"></div><h4 class="font-bold mb-3" style="color:var(--text-primary);">День 2: Поглиблена активність та наближення до Reddit</h4><ul class="list-disc pl-5 space-y-2 text-sm" style="color:var(--text-tertiary);"><li>Повторіть частину активності Дня 1, але з іншими запитами ("sports news", "funny cat videos").</li><li><strong style="color:var(--text-primary);">Зайдіть на Reddit у режимі гостя.</strong> Це критично важливо. Перегляньте головну сторінку (r/popular). Зробіть вигляд, що ви новачок і вивчаєте платформу.</li><li>Перейдіть у 2-3 великі сабреддіти (наприклад, r/aww, r/mildlyinteresting). Прочитайте кілька постів та коментарів. <strong style="color:var(--warning-border);">Не реєструйтесь!</strong></li><li>Відкрийте пару інших сайтів: Twitter, відвідайте онлайн-магазин (наприклад, target.com).</li></ul></div></div><h3 class="text-lg font-semibold mt-8 mb-3" style="color:var(--text-primary);">Технічні нюанси:</h3><ul class="list-disc pl-6 space-y-2" style="color:var(--text-tertiary);"><li><strong style="color:var(--text-primary);">Тривалість сесій:</strong> Кожна сесія має тривати від 10 до 30 хвилин. Не закривайте браузер відразу після 3 хвилин активності.</li><li><strong style="color:var(--text-primary);">Гортання:</strong> Використовуйте коліщатко миші або клавіші для прокручування сторінок, не лишень до кінця, а як би вивчаючи контент.</li><li><strong style="color:var(--text-primary);">Паузи:</strong> Робіть невеликі паузи (10-15 секунд) між відкриттям нових вкладок, імітуючи замисленість користувача.</li></ul><div class="tip-box p-5 rounded-lg mt-4"><h4 class="font-bold text-sm mb-2" style="color:var(--tip-border);">Зберігайте прогрітий профіль</h4><p class="text-sm">Після кожної сесії просто закривайте вікна браузера. <strong>Не очищайте кукі та кеш.</strong> Цей прогрітий профіль буде основою для наступних дій.</p></div></div></section>
<section id="ch6" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">06</span>Створення електронної пошти: вибір стійкого методу</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Створення надійної та стійкої електронної скриньки — це фундамент будь-якого акаунта в соцмережі. Вона має витримати перевірку при реєстрації, не вимагати складних підтверджень і працювати довгий час.</p><div class="warning-box p-5 rounded-lg my-6"><h4 class="font-bold mb-2" style="color:var(--warning-border);">Чому Gmail не підходить (зараз)</h4><p class="text-sm">У минулому це був стандарт. Однак Google значно посилив захист. Зараз при спробі створити акаунт з незнайомої IP-адреси (навіть з мобільного проксі) система часто блокує процес і вимагає верифікації номером телефону у форматі США (+1). Дешеві віртуальні номери з SMS-сервісів Google вже розпізнає. Нова система "Device Verification" може зажадати сканування QR-коду з іншого пристрою, де вже виконаний вхід у ваш Google-акаунт, що робить масове створення неможливим.</p></div><h3 class="text-lg font-semibold mt-6 mb-2" style="color:var(--text-primary);">Рішення: Outlook.com / Microsoft Account</h3><p><strong style="color:var(--text-primary);">Переваги:</strong> Менш агресивна система захисту від масової реєстрації. Рідше вимагає верифікацію телефоном, особливо якщо реєстрація відбувається з якісного мобільного проксі США після прогріву браузера.</p><div class="rounded-lg p-6 border my-6" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-4" style="color:var(--text-primary);">Інструкція створення:</h4><ul class="list-none space-y-3 text-sm font-mono" style="color:var(--text-tertiary);"><li class="flex items-start"><span class="mr-3" style="color:#22c55e;">➜</span> У прогрітому профілі Dolphin Anty зайдіть на outlook.com.</li><li class="flex items-start"><span class="mr-3" style="color:#22c55e;">➜</span> Натисніть «Create free account». Виберіть варіант отримати нову адресу електронної пошти (наприклад, usernameX837@outlook.com).</li><li class="flex items-start"><span class="mr-3" style="color:#22c55e;">➜</span> При заповненні даних використовуйте випадково згенеровані ім'я та прізвище (англійською). Використовуйте генератори імен (наприклад, behindthename.com).</li><li class="flex items-start"><span class="mr-3" style="color:#22c55e;">➜</span> Для дати народження виберіть дату, щоб вам було понад 25 років.</li><li class="flex items-start"><span class="mr-3" style="color:#22c55e;">➜</span> Оберіть пароль. Не використовуйте один і той же пароль для всіх акаунтів! Зберігайте логін/пароль у менеджері паролів.</li><li class="flex items-start"><span class="mr-3" style="color:#22c55e;">➜</span> Якщо система запропонує додати номер телефону для відновлення — пропустіть цей крок (Skip), якщо є можливість. Якщо вимагає обов'язково, це може бути ознакою підозрілого трафіку — поверніться до етапу прогріву.</li></ul></div></div></section>
<section id="ch7" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">07</span>Створення акаунта Reddit: тонкощі реєстрації</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Реєстрація — це не технічна формальність, а перший контакт вашої легенди (прогрітий браузер + пошта) з системою захисту Reddit.</p><h3 class="text-lg font-semibold mt-6 mb-2" style="color:var(--text-primary);">Контекст реєстрації</h3><p>Зайдіть на Reddit.com у тому самому прогрітому профілі, де ви вже відвідували платформу як гість.</p><div class="p-5 rounded-lg border my-4" style="background:var(--good-bg);border-color:var(--good-border);"><h4 class="font-bold mb-2" style="color:#22c55e;">Оптимальний спосіб (якщо створили Gmail)</h4><p class="text-sm">Натисніть кнопку "Continue with Google". Це не лише зручно, але й дає Reddit сигнал, що ваш акаунт пов'язаний з уже існуючою, частково перевіреною системою (Google). Це знижує рівень підозрілості.</p></div><h3 class="text-lg font-semibold mt-6 mb-2" style="color:var(--text-primary);">Альтернативний спосіб (з Outlook):</h3><ul class="list-disc pl-6 space-y-2"><li>Натисніть «Sign up».</li><li>Введіть адресу outlook-пошти.</li><li>Придумайте унікальний username. Не використовуйте шаблони типу user1234, cat_lover_XX. Краще використати генератор або складіть два слова (наприклад, <span class="font-mono" style="color:#22c55e;">CalmExplorer</span>, <span class="font-mono" style="color:#22c55e;">TinyPlateau</span>).</li><li>Пароль: Унікальний і надійний. Збережіть його.</li></ul><div class="warning-box p-5 rounded-lg my-6"><h4 class="font-bold mb-2" style="color:var(--warning-border);">Критично важлива поведінка після реєстрації</h4><p class="text-sm mb-2">Після натискання кнопки реєстрації можуть трапитися дві речі:</p><ul class="list-disc pl-5 space-y-2 text-sm"><li><strong>Вас одразу пустять.</strong> Не поспішайте! Просто перегляньте головну сторінку 1-2 хвилини і закрийте браузер.</li><li><strong>Система може показати капчу (CAPTCHA).</strong> Це нормально. Уважно виконайте завдання. Якщо капча з'являється повторно або вона надскладна — це поганий знак (IP або браузер викликав підозру). Зупиніться та проаналізуйте, на якому етапі допустили помилку.</li></ul></div><div class="tip-box p-5 rounded-lg"><h4 class="font-bold text-sm mb-2" style="color:var(--tip-border);">Золоте правило</h4><p class="text-sm">Дія повинна виглядати як одинична ініціатива реальної людини. Не реєструйте кілька акаунтів поспіль, навіть з різних профілів. Зробіть перерву в кілька годин.</p></div></div></section>
<section id="ch8" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">08</span>Прогрів акаунта Reddit: стратегія поступової активації</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Новий акаунт Reddit знаходиться під пильним наглядом алгоритмів «періоду немовлятства». Будь-яка надмірна активність розцінюється як спам.</p><div class="border-l-4 pl-5 py-4 my-6" style="border-color:var(--text-muted);"><h3 class="font-bold mb-3" style="color:var(--text-primary);">Фаза 1: Пасивне спостереження (Дні 1-3 після реєстрації)</h3><p class="text-sm mb-3"><strong style="color:var(--text-primary);">Діяльність:</strong> Тільки перегляд. Заходьте в акаунт 1-2 рази на день на 5-10 хвилин.</p><p class="text-sm font-semibold mb-2" style="color:var(--text-primary);">Що робити:</p><ul class="list-disc pl-5 space-y-2 text-sm" style="color:var(--text-tertiary);"><li>Досліджуйте стрічку r/popular та r/all.</li><li>Підпишіться на 3-5 нейтральних, некритичних сабреддітів середнього розміру (наприклад, r/MadeMeSmile, r/OneOrangeBraincat, r/dataisbeautiful).</li><li>Ставте upvote (лайки). Починайте з 2-3 upvote за сесію. Ставте їх випадковим постам, які вам справді подобаються.</li><li style="color:var(--warning-border);"><strong>НЕ коментуйте. НЕ створюйте постів. НЕ ставте downvote.</strong></li></ul></div><div class="border-l-4 pl-5 py-4 my-6" style="border-color:var(--tip-border);"><h3 class="font-bold mb-3" style="color:var(--text-primary);">Фаза 2: Перші коментарі та взаємодія (День 4-7)</h3><p class="text-sm mb-2"><strong style="color:var(--text-primary);">Місце дії:</strong> Оберіть маленький, нішевий сабреддіт (до 50-100к підписників), присвячений простій темі (наприклад, r/Baking, r/IndoorGarden, r/Whatisthisplant).</p><p class="text-sm mb-2"><strong style="color:var(--text-primary);">Перший коментар:</strong> Знайдіть пост, що набрав небагато коментарів. Напишіть короткий, очевидний, доброзичливий коментар. Наприклад: <span class="font-mono" style="color:#22c55e;">"This cake looks amazing! Great job."</span> або <span class="font-mono" style="color:#22c55e;">"What a beautiful plant, thanks for sharing."</span> Це не викличе суперечок і не приверне негативної уваги.</p><p class="text-sm"><strong style="color:var(--text-primary);">Ліміти:</strong> Не більше 1-2 коментарів на день. Між коментарями робіть перерви у кілька годин.</p></div><div class="border-l-4 pl-5 py-4 my-6" style="border-color:var(--accent);"><h3 class="font-bold mb-3" style="color:var(--text-primary);">Фаза 3: Перший пост (Не раніше 2-го тижня)</h3><p class="text-sm mb-2"><strong style="color:var(--text-primary);">Місце діяльності:</strong> Той самий маленький сабреддіт.</p><p class="text-sm mb-2"><strong style="color:var(--text-primary);">Контент:</strong> Відповідайте правилам спільноти (читайте Rules!). Ідеально — пошукати в інтернеті миле фото, створити до нього простий, щирий опис.</p><p class="text-sm"><strong style="color:var(--text-primary);">Ціль:</strong> Не віралити, а інтегруватися. Отримати кілька upvote (10-20) та кілька доброзичливих коментарів.</p></div><h3 class="text-lg font-semibold mt-8 mb-3" style="color:var(--text-primary);">Як виявити тіньовий бан (Shadowban):</h3><div class="code-block p-5 rounded-lg font-mono text-sm"><p style="color:var(--text-muted);" class="mb-3"># Інструкція з перевірки Shadowban:</p><p>1. Відкрийте свій профіль у звичайному режимі</p><p class="ml-4">(наприклад, reddit.com/u/ВашUsername).</p><p>2. Скопіюйте це посилання.</p><p>3. Відкрийте нове вікно в режимі інкогніто/приватного</p><p class="ml-4">перегляду або вийдіть зі свого акаунта.</p><p>4. Вставте посилання на свій профіль у адресний</p><p class="ml-4">рядок і перейдіть на нього.</p><p class="mt-4" style="color:#22c55e;"># Результат:</p><p class="mt-1">✅ Якщо сторінка профілю відображається з усіма</p><p class="ml-4">постами — все добре.</p><p class="mt-2" style="color:#ef4444;">❌ Якщо з'являється повідомлення "Sorry, nobody on</p><p class="ml-4" style="color:#ef4444;">Reddit goes by that name" або сторінка виглядає</p><p class="ml-4" style="color:#ef4444;">порожньою — ваш акаунт у тіньовому бані.</p><p class="ml-4" style="color:#ef4444;">Його дії невидимі для інших, і відновити його</p><p class="ml-4" style="color:#ef4444;">практично неможливо.</p></div></div></section>
<section id="ch9" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">09</span>Створення контенту та стратегії набору аудиторії</h2><div class="space-y-4 leading-7" style="color:var(--text-secondary);"><p>Набір карми та аудиторії — це мистецтво, засноване на розумінні психології спільнот (сабредітів). Ваша мета — не лише не бути забаненим, а стати цінним учасником, якого лайкають.</p><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">1. Лінгвістика та контекст</h3><ul class="list-disc pl-6 space-y-2"><li><strong style="color:var(--text-primary);">Мова:</strong> Виключно англійська, але важливо враховувати американські реалії. Використовуйте місцеві назви брендів, мемів, згадуйте локальні події (наприклад, День Подяки, Super Bowl).</li><li><strong style="color:var(--text-primary);">Граматика та пунктуація:</strong> Уникайте очевидних помилок. Скоротіть текст у звичайному текстовику або через ChatGPT/Grammarly для перевірки, але ніколи не копіюйте готові тексти з генераторів без змін — це може бути виявлено як неестественний шаблон.</li></ul><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">2. Магія заголовка (Title)</h3><p>Це найважливіший елемент. Він визначає, чи клікне користувач.</p><p class="font-semibold mt-4 mb-2" style="color:var(--text-primary);">Формули успішних заголовків:</p><ul class="list-disc pl-6 space-y-2"><li><strong style="color:var(--text-primary);">Питання, що звертається до досвіду:</strong> <span class="font-mono text-sm" style="color:#22c55e;">"Does anyone else's cat do this, or is mine broken?"</span></li><li><strong style="color:var(--text-primary);">Скромність/Звернення по допомогу:</strong> <span class="font-mono text-sm" style="color:#22c55e;">"My first attempt at baking sourdough. It's... interesting?"</span></li><li><strong style="color:var(--text-primary);">Цікавий факт/контекст:</strong> <span class="font-mono text-sm" style="color:#22c55e;">"Found this tiny frog in my garden after the rain. [Location, USA]"</span></li></ul><div class="warning-box p-4 rounded-lg mt-4"><p class="text-sm"><strong style="color:var(--warning-border);">Що не робити:</strong> Клікбейт ("You won't BELIEVE what happened next!!"), надмірна капслок, беззмістовні заголовки ("Look", "Pic").</p></div><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">3. Вибір ніші та контенту</h3><p class="font-semibold mb-2" style="color:var(--text-primary);">"Вечнозелені" теми (завжди набирають апвоути):</p><ul class="list-disc pl-6 space-y-2"><li><strong style="color:var(--text-primary);">Тварини:</strong> Коти, собаки, дикі птахи. Акцент на милість, смішну поведінку, порятунок.</li><li><strong style="color:var(--text-primary);">Природа та пейзажі:</strong> Фотографії заходу сонця, туману в горах, незвичайних хмар. Важливо: Вказуйте штат або регіон у заголовку або коментарі для автентичності.</li><li><strong style="color:var(--text-primary);">Займання та ремонт:</strong> r/DIY, r/woodworking. Процес завжди цікавіший за результат. Фото "до/після".</li><li><strong style="color:var(--text-primary);">Нішеві теми:</strong> Якщо ви розбираєтесь у фентезі-книгах, певній ігровій механіці, певному серіалі — це золота жила. Конкуренція менша, а аудиторія лояльніша.</li></ul><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">4. Генерація унікального медіа</h3><p><strong style="color:var(--text-primary);">Інструменти:</strong> Leonardo.ai, Midjourney, DALL-E 3 через ChatGPT Plus, Playground AI. Recraft — хороший для ілюстрацій.</p><div class="rounded-lg p-6 border my-4" style="background:var(--bg-card);border-color:var(--good-border);"><h4 class="font-bold mb-3" style="color:#22c55e;">Метод "Image-to-Image" для реалізму:</h4><ol class="list-decimal pl-5 space-y-3 text-sm" style="color:var(--text-tertiary);"><li>Знайдіть на Unsplash або Pexels реальне, якісне фото (наприклад, "golden retriever in park").</li><li>Завантажте його в AI як референс (reference image) або в режимі img2img.</li><li>Використайте промпт:</li></ol><div class="code-block p-4 rounded-lg font-mono text-xs mt-3">PROMPT: "The same golden retriever in a sunny park, but with a blue collar instead of red, slightly different fur texture, and a tennis ball in the mouth, photorealistic, natural lighting, 4k"</div><p class="text-sm mt-3"><strong style="color:var(--text-primary);">Ключова зміна:</strong> Змінюйте 2-3 конкретні деталі (колір аксесуара, фон, невелику деталь на зображенні). Це робить зображення "унікальним" для пошукових систем Reddit, які можуть шукати дублікати.</p></div><div class="tip-box p-4 rounded-lg"><p class="text-sm"><strong style="color:var(--tip-border);">Водяні знаки та метадані:</strong> Переконайтеся, що AI не додає своїх водяних знаків. Видаліть метадані EXIF з зображення за допомогою онлайн-сервісів.</p></div><h3 class="text-xl font-semibold mt-8 mb-3" style="color:var(--text-primary);">5. Стратегія взаємодії після публікації</h3><p><strong style="color:var(--text-primary);">Будьте присутніми після посту.</strong> Коли з'являться перші коментарі, обов'язково відповідайте щиро та вдячно. Це сигналізує алгоритму про активну спільноту навколо посту та підвищує його ранжування.</p><div class="warning-box p-4 rounded-lg mt-4"><p class="text-sm"><strong style="color:var(--warning-border);">Ніколи не просіть upvote.</strong> Це пряме порушення правил Reddit (vote manipulation) і призведе до бану.</p></div></div></section>
<section id="ch10" class="mb-16 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">10</span>Детальний розбір найпоширеніших фатальних помилок</h2><div class="space-y-6 leading-7" style="color:var(--text-secondary);"><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">Помилка 1: Помилка часу (поспіх)</h4><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Що роблять:</strong> Реєстрація -> пост за 5 хвилин.</p><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Чому бан:</strong> Алгоритми працюють з паттернами. Паттерн "новий акаунт + негайна публікація" = 99% бот або спамер.</p><p class="text-sm"><strong style="color:#22c55e;">Виправлення:</strong> Суворе дотримання "періоду немовлятства" 2-3 дні абсолютної пасивності.</p></div><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">Помилка 2: Помилка інфраструктури (дешеві проксі)</h4><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Що роблять:</strong> Використання резидентних (дата-центр) проксі чи дешевих VPN.</p><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Чому бан:</strong> IP-адреси з відомих провайдерів хостингу (DigitalOcean, AWS, OVH) знаходяться у глобальних чорних списках (blacklists). Reddit бачить тисячу спроб реєстрацій з одного блоку IP і блокує всі.</p><p class="text-sm"><strong style="color:#22c55e;">Виправлення:</strong> Тільки якісні мобільні (LTE/5G) проксі з чистих пулів.</p></div><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">Помилка 3: Помилка цифрового сліду (порожній браузер)</h4><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Що роблять:</strong> Створення профілю в антидетект-браузері і миттєвий перехід на Reddit.</p><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Чому бан:</strong> "Цифровий відбиток" браузера хоча й унікальний, але абсолютно чистий. У реального користувача браузер після налаштування має кукі від пошуковика, YouTube тощо.</p><p class="text-sm"><strong style="color:#22c55e;">Виправлення:</strong> Обов'язковий 48-годинний прогрів з відвідуванням різноманітних сайтів.</p></div><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">Помилка 4: Помилка поведінки (шаблонність)</h4><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Що роблять:</strong> На 10 акаунтах робити однойменні дії в однаковий час: о 10:00 лайк, о 10:05 коментар, о 10:10 пост.</p><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Чому бан:</strong> Системи аномального виявлення (Anomaly Detection) шукають кореляції. Паралельна, синхронна активність — явна ознака керування ботнетом.</p><p class="text-sm"><strong style="color:#22c55e;">Виправлення:</strong> Рандомізація. Різний час активності для кожного акаунта, різна тривалість сесій, різний порядок дій. Імітуйте втому, відволікання.</p></div><div class="p-5 rounded-lg border" style="background:var(--bad-bg);border-color:var(--bad-border);"><h4 class="font-bold mb-2" style="color:#ef4444;">Помилка 5: Технічна помилка (перетин відбитків)</h4><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Що роблять:</strong> Одночасна робота з кількома профілями в антидетект-браузері.</p><p class="text-sm mb-1"><strong style="color:var(--text-primary);">Чому бан:</strong> Може статися витік даних між профілями (WebRTC, часові зони), або сам софт може "засвітити" однакові апаратні характеристики.</p><p class="text-sm"><strong style="color:#22c55e;">Виправлення:</strong> Один профіль — одна сесія. Закрили, зачекали хвилину, відкрили наступний.</p></div></div></section>
<section id="ch11" class="mb-24 scroll-mt-24"><h2 class="text-2xl font-bold mb-6 flex items-center" style="color:var(--accent);"><span class="text-sm font-bold px-2.5 py-1 rounded mr-3" style="background:var(--accent);color:#000;">11</span>FAQ: Детальні відповіді на складні питання</h2><div class="space-y-8 leading-7" style="color:var(--text-secondary);"><div class="rounded-lg p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-2" style="color:var(--text-primary);">Q1: Чи можна використовувати VPN, якщо він дуже хороший і дорогий?</h4><p class="text-sm" style="color:var(--text-tertiary);">A: Ризик залишається критично високим. Навіть преміум-VPN мають кінцеву кількість серверів, і їх IP-адреси можуть використовуватися тисячами користувачів одночасно. Якщо хтось із них займався спамом на Reddit, IP вже може бути скомпрометований. Мобільний проксі надає вам виділений IP з пулу оператора зв'язку — це найвищий рівень довіри.</p></div><div class="rounded-lg p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-2" style="color:var(--text-primary);">Q2: Скільки точно трафіку потрібно на один акаунт?</h4><div class="text-sm" style="color:var(--text-tertiary);"><p class="mb-2">A: При блокуванні медіа через uBlock Origin:</p><ul class="list-disc pl-5 space-y-1"><li><strong style="color:var(--text-primary);">Прогрів браузера (2 дні):</strong> ~50-100 МБ (текстові сайти, мінімум зображень).</li><li><strong style="color:var(--text-primary);">Пасивна фаза на Reddit (3 дні):</strong> ~20-30 МБ на день = ~100 МБ.</li><li><strong style="color:var(--text-primary);">Активна фаза (1 пост + коментарі щодня):</strong> ~30-50 МБ на день.</li></ul><p class="mt-2"><strong style="color:var(--text-primary);">Підсумок на місяць:</strong> ~1-1.5 ГБ на акаунт при обережній роботі. 2 ГБ для 5 акаунтів — це розрахунок з запасом.</p></div></div><div class="rounded-lg p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-2" style="color:var(--text-primary);">Q3: Мій пост отримав 5 переглядів і 0 апвоутів. Що робити?</h4><div class="text-sm" style="color:var(--text-tertiary);"><p class="mb-2">A: Це класичний симптом тіньового бану або потрапляння в спам-фільтр.</p><ul class="list-disc pl-5 space-y-1"><li><strong style="color:var(--text-primary);">Крок 1:</strong> Перевірка на тіньовий бан за інструкцією у Розділі 8.</li><li><strong style="color:var(--text-primary);">Крок 2:</strong> Якщо з баном все добре, ваш контент могла прибрати модератори або автоматичний фільтр сабреддіту. Що робити: Написати модераторам цієї спільноти (Message the mods) ввічливе та коротке повідомлення:</li></ul><div class="code-block p-3 rounded-lg font-mono text-xs mt-3">"Hello! I posted [topic] and it seems not to be visible. Could you please check if it was caught by the filter? Thank you"</div><p class="mt-2">Часто пости новачків потребують ручного схвалення.</p></div></div><div class="rounded-lg p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-2" style="color:var(--text-primary);">Q4: Як зменшити ризик бану при масштабуванні до 10, 20 акаунтів?</h4><div class="text-sm" style="color:var(--text-tertiary);"><p class="mb-2">A: Потрібна повна ізоляція та різноманітність:</p><ul class="list-disc pl-5 space-y-2"><li><strong style="color:var(--text-primary);">Різні мобільні проксі-провайдери:</strong> Не купуйте всі проксі у одного продавця.</li><li><strong style="color:var(--text-primary);">Різні моделі емуляції в антидетект-браузері:</strong> Не всі Windows 10. Додавайте MacOS, Linux, різні версії Android.</li><li><strong style="color:var(--text-primary);">Різні часові пояси:</strong> Налаштовуйте час у профілі браузера відповідно до геолокації проксі (напр., EST, PST, CST для США).</li><li><strong style="color:var(--text-primary);">Різні паттерни поведінки:</strong> Деякі акаунти можуть бути "ранковими пташками", інші — "совами". Деякі активні у вихідні, інші — у будні.</li></ul></div></div><div class="rounded-lg p-5 border" style="background:var(--bg-card);border-color:var(--border-main);"><h4 class="font-bold mb-2" style="color:var(--text-primary);">Q5: Що робити, якщо акаунт все ж таки забанено?</h4><div class="text-sm" style="color:var(--text-tertiary);"><p class="mb-3">A: Не намагайтеся відновити його через апеляцію, якщо це був фарм-акаунт. Це може призвести до бану всієї мережі IP-адрес, пов'язаних з ним. <strong style="color:var(--warning-border);">Протокол ліквідації:</strong></p><ol class="list-decimal pl-5 space-y-2"><li>Повністю видаліть відповідний профіль з антидетект-браузера.</li><li>Зупиніть використання проксі, який був прив'язаний до цього акаунта, мінімум на тиждень.</li><li>Проаналізуйте помилку. На якому етапі вона сталася? Чи був дотриманий алгоритм? Виправте цей недолік для наступних акаунтів.</li></ol><p class="mt-3 italic" style="color:var(--text-muted);">Розглядайте це як вартість навчання та частину операційного ризику бізнесу.</p></div></div></div></section>
<footer class="text-center text-xs pb-12 pt-8 border-t" style="color:var(--text-faint);border-color:var(--border-main);">© 2024 Reddit Farming Masterclass. Educational Purpose Only.</footer>
</main>
</div>
</div>
<script src="js/config.js"></script>
<script src="js/database.js"></script>
<script src="js/auth.js"></script>
<script src="js/ui.js"></script>
<script src="js/sidebar.js"></script>
<script src="js/app.js"></script>
<!-- All logic is in separate JS files above -->
</body>
</html>