Skip to content

Commit 13ea606

Browse files
RxflexRxflex
committed
chore: update challange page template
1 parent a9337e8 commit 13ea606

1 file changed

Lines changed: 1 addition & 369 deletions

File tree

‎assets/html/challenge_template.html‎

Lines changed: 1 addition & 369 deletions
Original file line numberDiff line numberDiff line change
@@ -1,369 +1 @@
1-
<!DOCTYPE html>
2-
<html lang="ru">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>{{.Title}}</title>
7-
<style>
8-
:root {
9-
/* Палитра (Dark Zinc/Slate style) */
10-
--bg-color: #09090b;
11-
--card-bg: #18181b;
12-
--border-color: #27272a;
13-
--text-main: #e4e4e7;
14-
--text-muted: #a1a1aa;
15-
--accent-blue: #3b82f6;
16-
--accent-red: #ef4444;
17-
--accent-glow: rgba(59, 130, 246, 0.15);
18-
--font-stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
19-
--font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
20-
}
21-
22-
* {
23-
box-sizing: border-box;
24-
margin: 0;
25-
padding: 0;
26-
}
27-
28-
body {
29-
background-color: var(--bg-color);
30-
color: var(--text-main);
31-
font-family: var(--font-stack);
32-
height: 100vh;
33-
display: flex;
34-
align-items: center;
35-
justify-content: center;
36-
overflow: hidden;
37-
/* Тонкая сетка на фоне для технического вида */
38-
background-image:
39-
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
40-
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
41-
background-size: 30px 30px;
42-
}
43-
44-
.container {
45-
width: 100%;
46-
max-width: 480px;
47-
padding: 20px;
48-
}
49-
50-
.card {
51-
background: var(--card-bg);
52-
border: 1px solid var(--border-color);
53-
border-radius: 12px;
54-
padding: 40px 32px;
55-
text-align: center;
56-
box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.3);
57-
position: relative;
58-
overflow: hidden;
59-
}
60-
61-
/* Декоративная полоса сверху */
62-
.card::before {
63-
content: '';
64-
position: absolute;
65-
top: 0;
66-
left: 0;
67-
width: 100%;
68-
height: 2px;
69-
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
70-
opacity: 0.8;
71-
transition: background 0.3s ease;
72-
}
73-
74-
/* Состояние ошибки меняет цвет полосы */
75-
.card.error-state::before {
76-
background: linear-gradient(90deg, transparent, var(--accent-red), transparent);
77-
}
78-
79-
/* --- Анимация Радара (Loader) --- */
80-
.loader-container {
81-
position: relative;
82-
width: 64px;
83-
height: 64px;
84-
margin: 0 auto 24px auto;
85-
display: flex;
86-
align-items: center;
87-
justify-content: center;
88-
}
89-
90-
.radar-spinner {
91-
width: 100%;
92-
height: 100%;
93-
border-radius: 50%;
94-
border: 2px solid var(--border-color);
95-
border-top-color: var(--accent-blue);
96-
animation: spin 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
97-
}
98-
99-
.radar-pulse {
100-
position: absolute;
101-
width: 100%;
102-
height: 100%;
103-
border-radius: 50%;
104-
background: var(--accent-blue);
105-
opacity: 0.2;
106-
animation: pulse 2s ease-out infinite;
107-
}
108-
109-
/* --- Иконка ошибки (Скрыта по умолчанию) --- */
110-
.error-icon {
111-
display: none;
112-
width: 64px;
113-
height: 64px;
114-
margin: 0 auto 24px auto;
115-
color: var(--accent-red);
116-
}
117-
118-
.error-icon svg {
119-
width: 100%;
120-
height: 100%;
121-
}
122-
123-
/* --- Progress Bar --- */
124-
.progress-container {
125-
width: 100%;
126-
background-color: var(--border-color);
127-
border-radius: 4px;
128-
margin: 20px 0;
129-
height: 8px;
130-
overflow: hidden;
131-
}
132-
133-
.progress-bar {
134-
height: 100%;
135-
background: linear-gradient(90deg, var(--accent-blue), #60a5fa);
136-
border-radius: 4px;
137-
width: 0%;
138-
transition: width 0.3s ease;
139-
}
140-
141-
/* --- CAPTCHA Styles --- */
142-
.captcha-container {
143-
position: relative;
144-
display: inline-block;
145-
margin: 20px 0;
146-
border: 1px solid var(--border-color);
147-
border-radius: 8px;
148-
overflow: hidden;
149-
}
150-
151-
.captcha-image {
152-
display: block;
153-
max-width: 100%;
154-
}
155-
156-
.captcha-input {
157-
background: var(--card-bg);
158-
border: 1px solid var(--border-color);
159-
color: var(--text-main);
160-
padding: 12px 16px;
161-
border-radius: 6px;
162-
font-size: 14px;
163-
margin: 16px 0;
164-
width: 200px;
165-
text-align: center;
166-
font-family: var(--font-mono);
167-
letter-spacing: 2px;
168-
}
169-
170-
.captcha-input:focus {
171-
outline: none;
172-
border-color: var(--accent-blue);
173-
box-shadow: 0 0 0 2px var(--accent-glow);
174-
}
175-
176-
@keyframes spin {
177-
0% { transform: rotate(0deg); }
178-
100% { transform: rotate(360deg); }
179-
}
180-
181-
@keyframes pulse {
182-
0% { transform: scale(0.8); opacity: 0.5; }
183-
100% { transform: scale(1.5); opacity: 0; }
184-
}
185-
186-
h1 {
187-
font-size: 20px;
188-
font-weight: 600;
189-
margin-bottom: 12px;
190-
letter-spacing: -0.02em;
191-
}
192-
193-
p {
194-
font-size: 14px;
195-
line-height: 1.6;
196-
color: var(--text-muted);
197-
margin-bottom: 24px;
198-
}
199-
200-
/* --- Техническая информация (Footer) --- */
201-
.tech-info {
202-
margin-top: 32px;
203-
padding-top: 20px;
204-
border-top: 1px solid var(--border-color);
205-
font-family: var(--font-mono);
206-
font-size: 11px;
207-
color: #52525b; /* Еще более приглушенный цвет */
208-
display: flex;
209-
flex-direction: column;
210-
gap: 6px;
211-
}
212-
213-
.info-row {
214-
display: flex;
215-
justify-content: space-between;
216-
}
217-
218-
.info-label {
219-
opacity: 0.7;
220-
}
221-
222-
.info-value {
223-
color: var(--text-muted);
224-
}
225-
226-
/* --- Кнопка (для капчи или ретрая) --- */
227-
.action-btn {
228-
background: transparent;
229-
border: 1px solid var(--border-color);
230-
color: var(--text-main);
231-
padding: 10px 20px;
232-
border-radius: 6px;
233-
font-size: 13px;
234-
cursor: pointer;
235-
transition: all 0.2s;
236-
margin: 8px;
237-
}
238-
239-
.action-btn:hover {
240-
border-color: var(--text-muted);
241-
background: rgba(255,255,255,0.03);
242-
}
243-
244-
.action-btn.primary {
245-
background: var(--accent-blue);
246-
border-color: var(--accent-blue);
247-
color: white;
248-
}
249-
250-
.action-btn.primary:hover {
251-
background: #2563eb;
252-
border-color: #2563eb;
253-
}
254-
255-
/* --- Form Styles --- */
256-
form {
257-
margin: 0;
258-
}
259-
260-
/* --- Status Messages --- */
261-
.status-message {
262-
font-size: 12px;
263-
color: var(--text-muted);
264-
margin: 8px 0;
265-
font-family: var(--font-mono);
266-
}
267-
268-
/* --- Responsive --- */
269-
@media (max-width: 480px) {
270-
.container {
271-
padding: 16px;
272-
}
273-
274-
.card {
275-
padding: 24px 20px;
276-
}
277-
278-
.captcha-input {
279-
width: 100%;
280-
max-width: 200px;
281-
}
282-
}
283-
</style>
284-
</head>
285-
<body>
286-
<div class="container">
287-
<div class="card{{if .IsError}} error-state{{end}}" id="statusCard">
288-
{{if .IsError}}
289-
<!-- Режим ошибки -->
290-
<div class="error-icon">
291-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
292-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
293-
</svg>
294-
</div>
295-
{{else if .ShowLoader}}
296-
<!-- Режим проверки/загрузки -->
297-
<div class="loader-container">
298-
<div class="radar-pulse"></div>
299-
<div class="radar-spinner"></div>
300-
</div>
301-
{{end}}
302-
303-
<h1>{{.Title}}</h1>
304-
<p>{{.Message}}</p>
305-
306-
{{if .ShowProgress}}
307-
<div class="progress-container">
308-
<div class="progress-bar" id="progressBar"></div>
309-
</div>
310-
<div class="status-message" id="statusMessage">{{.StatusMessage}}</div>
311-
{{end}}
312-
313-
{{if .CaptchaData}}
314-
<!-- CAPTCHA Challenge -->
315-
<div class="captcha-container">
316-
<img src="data:image/png;base64,{{.CaptchaData.ImageData}}" alt="CAPTCHA" class="captcha-image">
317-
</div>
318-
319-
<form method="POST" action="{{.ActionURL}}">
320-
<input type="hidden" name="captcha_id" value="{{.CaptchaData.ID}}">
321-
<input type="text" name="captcha_answer" placeholder="Введите текст с картинки"
322-
autocomplete="off" required class="captcha-input" maxlength="6">
323-
<br>
324-
<button type="submit" class="action-btn primary">Проверить</button>
325-
</form>
326-
327-
<p style="font-size: 12px; margin-top: 16px;">
328-
<a href="javascript:location.reload()" style="color: var(--text-muted); text-decoration: none;">
329-
Не видите изображение? Обновить страницу
330-
</a>
331-
</p>
332-
{{end}}
333-
334-
{{if .ShowRetryButton}}
335-
<button id="retryBtn" class="action-btn" onclick="window.location.reload()">
336-
Повторить попытку
337-
</button>
338-
{{end}}
339-
340-
<div class="tech-info">
341-
<div class="info-row">
342-
<span class="info-label">Ray ID:</span>
343-
<span class="info-value">{{.RayID}}</span>
344-
</div>
345-
<div class="info-row">
346-
<span class="info-label">Your IP:</span>
347-
<span class="info-value">{{.ClientIP}}</span>
348-
</div>
349-
<div class="info-row">
350-
<span class="info-label">System:</span>
351-
<span class="info-value">Defenra Shield</span>
352-
</div>
353-
{{if .AgentID}}
354-
<div class="info-row">
355-
<span class="info-label">Agent:</span>
356-
<span class="info-value">{{.AgentID}}</span>
357-
</div>
358-
{{end}}
359-
</div>
360-
</div>
361-
</div>
362-
363-
{{if .JSCode}}
364-
<script>
365-
{{.JSCode}}
366-
</script>
367-
{{end}}
368-
</body>
369-
</html>
1+
<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>{{.Title}}</title><style>:root{--bg-color:#050505;--card-bg:#0a0a0a;--border-color:#27272a;--border-active:#3f3f46;--text-main:#ededed;--text-muted:#a1a1aa;--text-dark:#52525b;--accent-primary:#3b82f6;--accent-glow:rgba(59,130,246,0.3);--accent-red:#ef4444;--font-main:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;--font-mono:"JetBrains Mono","SF Mono","Menlo",monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-main);height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background-image:radial-gradient(circle at 50% 0%,#171717 0%,transparent 70%)}.container{width:100%;max-width:440px;padding:20px;position:relative;z-index:10}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;padding:48px 32px 32px 32px;text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,0.2),0 20px 40px -12px rgba(0,0,0,0.8);position:relative;overflow:hidden;transition:border-color .3s ease}.card::after{content:'';position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:200px;height:100px;background:var(--accent-primary);filter:blur(80px);opacity:.15;pointer-events:none;transition:background .5s ease}.card.error-state{border-color:rgba(239,68,68,.3)}.card.error-state::after{background:var(--accent-red)}.loader-container{position:relative;width:60px;height:60px;margin:0 auto 32px auto;display:flex;align-items:center;justify-content:center}.radar-spinner{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent-primary);border-left-color:var(--accent-primary);box-shadow:0 0 15px var(--accent-glow);animation:spin 1.2s cubic-bezier(.5,.1,.4,.9) infinite}.radar-spinner::after{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border-radius:50%;border:1px solid rgba(255,255,255,.05)}.radar-pulse{position:absolute;width:60%;height:60%;border-radius:50%;background:var(--accent-primary);filter:blur(8px);opacity:.4;animation:breathe 3s ease-in-out infinite}.error-icon{width:56px;height:56px;margin:0 auto 32px auto;color:var(--accent-red);background:rgba(239,68,68,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(239,68,68,.15)}.error-icon svg{width:28px;height:28px}h1{font-size:22px;font-weight:600;margin-bottom:12px;letter-spacing:-.03em;color:var(--text-main)}p{font-size:14px;line-height:1.6;color:var(--text-muted);margin-bottom:32px}.progress-container{width:100%;background-color:#27272a;border-radius:100px;margin:24px 0 12px 0;height:4px;overflow:hidden}.progress-bar{height:100%;background:var(--accent-primary);border-radius:100px;width:0%;transition:width .3s ease;box-shadow:0 0 10px rgba(59,130,246,.5)}.captcha-container{position:relative;margin:24px 0;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:#000}.captcha-image{display:block;max-width:100%;height:auto;mix-blend-mode:screen}.form-row{display:flex;gap:12px;margin-top:16px}.captcha-input{flex:1;background:var(--bg-color);border:1px solid var(--border-color);color:var(--text-main);padding:12px;border-radius:8px;font-size:14px;text-align:center;font-family:var(--font-mono);letter-spacing:1px;transition:all .2s}.captcha-input:focus{outline:0;border-color:var(--accent-primary);background:#0f0f0f;box-shadow:0 0 0 2px rgba(59,130,246,.1)}.action-btn{background:var(--text-main);color:#000;border:0;padding:0 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.action-btn:hover{opacity:.9;transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn.secondary{background:0 0;color:var(--text-muted);border:1px solid var(--border-color);width:100%;padding:12px;margin-top:10px}.action-btn.secondary:hover{color:var(--text-main);border-color:var(--text-muted);transform:none}.tech-info{margin-top:40px;padding-top:24px;border-top:1px solid var(--border-color);font-family:var(--font-mono);font-size:11px;display:grid;grid-template-columns:1fr 1fr;gap:12px;opacity:.6;transition:opacity .2s}.tech-info:hover{opacity:1}.info-col{display:flex;flex-direction:column;gap:4px;text-align:left}.info-col:nth-child(even){text-align:right}.info-label{color:var(--text-dark);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.info-value{color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:.6;transform:scale(1.1)}}.status-message{font-family:var(--font-mono);font-size:11px;color:var(--text-dark);margin-top:8px;text-align:right}</style></head><body><div class="container"><div class="card{{if .IsError}} error-state{{end}}" id="statusCard">{{if .IsError}}<div class="error-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg></div>{{else if .ShowLoader}}<div class="loader-container"><div class="radar-pulse"></div><div class="radar-spinner"></div></div>{{end}}<h1>{{.Title}}</h1><p>{{.Message}}</p>{{if .ShowProgress}}<div class="progress-container"><div class="progress-bar" id="progressBar"></div></div>{{if .StatusMessage}}<div class="status-message" id="statusMessage">{{.StatusMessage}}</div>{{end}}{{end}}{{if .CaptchaData}}<form method="POST" action="{{.ActionURL}}"><div class="captcha-container"><img src="data:image/png;base64,{{.CaptchaData.ImageData}}" alt="Verification" class="captcha-image"></div><input type="hidden" name="captcha_id" value="{{.CaptchaData.ID}}"><div class="form-row"><input type="text" name="captcha_answer" placeholder="XXXXXX" autocomplete="off" required class="captcha-input" maxlength="6"><button type="submit" class="action-btn">Verify</button></div></form>{{end}}{{if .ShowRetryButton}}<button id="retryBtn" class="action-btn secondary" onclick="window.location.reload()">Try Again</button>{{end}}<div class="tech-info"><div class="info-col"><span class="info-label">Ray ID</span><span class="info-value">{{.RayID}}</span></div><div class="info-col"><span class="info-label">Your IP</span><span class="info-value">{{.ClientIP}}</span></div>{{if .AgentID}}<div class="info-col"><span class="info-label">Node</span><span class="info-value">{{.AgentID}}</span></div><div class="info-col"><span class="info-label">System</span><span class="info-value">Defenra</span></div>{{end}}</div></div></div><script>(function(){document.addEventListener('click',function(e){const t=e.target.closest('button, input[type="submit"]');if(t&&!e.isTrusted){e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();return!1}},!0);document.addEventListener('submit',function(e){if(!e.isTrusted){e.preventDefault();e.stopPropagation();return!1}},!0)})();{{.JSCode}}</script></body></html>

0 commit comments

Comments
 (0)