Hugging Face's logo

Spaces:
SAyyeedd
/
SAwww
Running

App Files Community
SAwww
File size: 29,896 Bytes
309ec79
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>⛏️ Sayed Bot Team v23 — إعداد السيرفر</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0f1a;--bg2:#111827;--surface:#1a2332;--surface2:#1f2a3d;--card:#151f2e;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.04);--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--green:#10b981;--green2:#34d399;--green-bg:rgba(16,185,129,.08);--blue:#3b82f6;--blue2:#60a5fa;--blue-bg:rgba(59,130,246,.08);--purple:#8b5cf6;--purple2:#a78bfa;--purple-bg:rgba(139,92,246,.08);--amber:#f59e0b;--amber2:#fbbf24;--amber-bg:rgba(245,158,11,.08);--red:#ef4444;--red2:#f87171;--red-bg:rgba(239,68,68,.08);--cyan:#06b6d4;--cyan2:#22d3ee;--radius:14px;--radius-sm:10px;--shadow:0 8px 32px rgba(0,0,0,.4);--font:system-ui,'Segoe UI',Roboto,sans-serif;--mono:Consolas,'Courier New',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh;scroll-behavior:smooth}
body{background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(16,185,129,.08) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(59,130,246,.05) 0%,transparent 50%),radial-gradient(ellipse 40% 30% at 20% 80%,rgba(139,92,246,.04) 0%,transparent 40%);color:var(--text);font-family:var(--font);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 16px 60px;direction:rtl}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(16,185,129,.1) 0%,transparent 60%);animation:bgPulse 8s ease-in-out infinite alternate;pointer-events:none;z-index:0}
@keyframes bgPulse{from{opacity:.6}to{opacity:1}}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(16,185,129,.25);border-radius:10px}
#particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.p{position:absolute;border-radius:50%;animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) rotate(0deg) scale(0)}20%{transform:translateY(80vh) rotate(144deg) scale(1)}80%{transform:translateY(20vh) rotate(576deg) scale(1)}100%{transform:translateY(-100px) rotate(720deg) scale(0)}}
.site-header{width:100%;max-width:640px;text-align:center;padding:40px 0 28px;position:relative;z-index:1;animation:headerIn .8s both}
@keyframes headerIn{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
.logo{font-size:64px;display:block;margin-bottom:16px;animation:logoFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(16,185,129,.3))}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(5deg)}}
.site-header h1{font-size:clamp(26px,5vw,38px);font-weight:900;background:linear-gradient(135deg,#10b981,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px;letter-spacing:-.5px;text-shadow:0 0 40px rgba(16,185,129,.2)}
.site-header p{color:var(--text2);font-size:15px;line-height:1.7}
.badge-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.badge{background:rgba(26,35,50,.6);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:24px;padding:6px 14px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:6px;transition:all .3s}
.badge span{color:var(--green);font-weight:700}
.progress-bar{width:100%;max-width:640px;display:flex;align-items:center;gap:0;margin-bottom:32px;position:relative;z-index:1;animation:progressIn .6s .3s both}
@keyframes progressIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.prog-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative}
.prog-step:not(:last-child)::after{content:'';position:absolute;top:18px;right:calc(-50% + 18px);left:calc(50% + 18px);height:2px;background:var(--border);transition:background .5s cubic-bezier(.4,0,.2,1)}
.prog-step.done:not(:last-child)::after{background:linear-gradient(90deg,var(--green),var(--blue))}
.prog-dot{width:36px;height:36px;border-radius:50%;background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .4s cubic-bezier(.4,0,.2,1)}
.prog-step.active .prog-dot{border-color:var(--green);background:rgba(16,185,129,.1);box-shadow:0 0 20px rgba(16,185,129,.5),0 0 40px rgba(16,185,129,.2);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 20px rgba(16,185,129,.5),0 0 40px rgba(16,185,129,.2)}50%{box-shadow:0 0 30px rgba(16,185,129,.7),0 0 60px rgba(16,185,129,.3)}}
.prog-step.done .prog-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 15px rgba(16,185,129,.4)}
.prog-label{font-size:11px;color:var(--text3);transition:color .3s;font-weight:600}
.prog-step.active .prog-label{color:var(--green)}.prog-step.done .prog-label{color:var(--green2)}
.card{width:100%;max-width:640px;background:rgba(21,31,46,.8);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;z-index:1;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);transition:all .4s cubic-bezier(.4,0,.2,1);animation:cardIn .6s .4s both}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.card-top{background:linear-gradient(160deg,rgba(16,185,129,.08),rgba(59,130,246,.05));border-bottom:1px solid var(--border);padding:24px 28px 20px}
.card-top h2{font-size:20px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.card-top p{color:var(--text2);font-size:13px}
.card-body{padding:24px 28px}
.step-pane{display:none}.step-pane.active{display:block;animation:stepIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes stepIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.field{margin-bottom:22px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.field label .req{color:var(--red);margin-right:2px}
.input-wrap{position:relative}
.input-wrap .icon{position:absolute;top:50%;transform:translateY(-50%);right:12px;font-size:18px;pointer-events:none}
input[type=text],input[type=number],select{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:12px 42px 12px 14px;font-size:14px;font-family:var(--font);transition:all .3s cubic-bezier(.4,0,.2,1);direction:ltr;text-align:left}
input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.15),0 0 20px rgba(16,185,129,.1);background:rgba(26,35,50,.8)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ping-row{display:flex;gap:10px;margin-top:10px}
.ping-btn{flex-shrink:0;background:var(--green-bg);border:1px solid rgba(16,185,129,.3);border-radius:var(--radius-sm);color:var(--green);padding:11px 18px;font-size:13px;font-family:var(--font);font-weight:700;cursor:pointer;transition:all .3s}
.ping-result{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px;transition:border-color .3s}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.count-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:16px 8px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.count-card:hover{border-color:rgba(16,185,129,.3);transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.3)}
.count-card.selected{border-color:var(--green);background:rgba(16,185,129,.08);box-shadow:0 0 0 3px rgba(16,185,129,.15),0 8px 25px rgba(16,185,129,.15)}
.count-card .num{font-size:28px;font-weight:900;color:var(--green);line-height:1;font-family:var(--mono)}
.count-card .lbl{font-size:11px;color:var(--text3);margin-top:6px;font-weight:600}
.count-card .icons{font-size:18px;margin-top:8px;letter-spacing:-2px}
.count-card .badge-rec{position:absolute;top:-8px;right:50%;transform:translateX(50%);background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;border-radius:10px;font-size:10px;padding:3px 8px;font-weight:800;box-shadow:0 2px 10px rgba(16,185,129,.3)}
input[name=botCount]{display:none}
.bot-row{display:flex;gap:12px;align-items:center;margin-bottom:12px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;transition:all .3s}
.bot-row:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.1),0 0 20px rgba(16,185,129,.1)}
.bot-icon{font-size:24px;flex-shrink:0}
.bot-info{flex:1;min-width:0}
.bot-info small{display:block;font-size:11px;color:var(--text3);margin-bottom:4px;font-weight:600}
.bot-info input{background:transparent;border:none;padding:0;font-size:15px;font-weight:800;color:var(--text);width:100%;font-family:var(--font)}
.bot-info input:focus{outline:none}
.info-box{background:var(--blue-bg);border:1px solid rgba(59,130,246,.2);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:20px;font-size:13px;color:var(--blue2);line-height:1.8}
.warn-box{background:var(--amber-bg);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:20px;font-size:13px;color:var(--amber2);line-height:1.8}
.tip-box{background:var(--green-bg);border:1px solid rgba(16,185,129,.2);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:20px;font-size:13px;color:var(--green2);line-height:1.8}
.btn-row{display:flex;gap:12px;margin-top:28px}
.btn-primary{flex:1;background:linear-gradient(135deg,var(--green),#059669);color:white;border:none;border-radius:var(--radius-sm);padding:14px 24px;font-size:16px;font-weight:800;font-family:var(--font);cursor:pointer;transition:all .3s;box-shadow:0 4px 15px rgba(16,185,129,.3)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px rgba(16,185,129,.4)}
.btn-back{background:var(--surface);color:var(--text2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 24px;font-size:14px;font-family:var(--font);font-weight:700;cursor:pointer;transition:all .3s}
.btn-back:hover{border-color:var(--green);color:var(--green)}
.notif{border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:18px;font-size:13px;font-weight:600;display:none}
.notif.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--green2)}
.notif.err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);color:var(--red2)}
.launch-overlay{position:fixed;inset:0;background:rgba(10,15,26,.95);backdrop-filter:blur(20px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:24px;z-index:9999}
.launch-overlay.show{display:flex;animation:launchIn .5s}
@keyframes launchIn{from{opacity:0}to{opacity:1}}
.launch-logo{font-size:90px;filter:drop-shadow(0 0 30px rgba(16,185,129,.4))}
.launch-text{font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.launch-sub{font-size:14px;color:var(--text2)}
.launch-bar{width:280px;height:6px;background:var(--surface);border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.launch-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--blue),var(--purple));border-radius:10px;animation:fill 2.5s ease forwards}
@keyframes fill{to{width:100%}}
optgroup{background:var(--surface);color:var(--text2);font-size:12px;font-family:var(--font)}option{background:var(--surface);color:var(--text)}
</style>
</head>
<body>
<div id="particles"></div>
<div class="site-header">
  <span class="logo">⛏️</span>
  <h1>Sayed Bot Team v23</h1>
  <p>بوتات Minecraft تعمل 24/7 — تبقي سيرفرك Aternos شغّال دايماً</p>
  <div class="badge-row">
    <div class="badge">🟢 <span>يعمل الآن</span></div>
    <div class="badge">🔒 <span>9 طبقات حماية</span></div>
    <div class="badge">🤖 <span>4 بوتات</span></div>
    <div class="badge">⚡ <span>كشف بلاجن تلقائي</span></div>
  </div>
</div>
<div class="progress-bar" id="progBar">
  <div class="prog-step active" data-s="1" onclick="goStep(1)"><div class="prog-dot">🌐</div><div class="prog-label">السيرفر</div></div>
  <div class="prog-step" data-s="2" onclick="goStep(2)"><div class="prog-dot">🎮</div><div class="prog-label">الإصدار</div></div>
  <div class="prog-step" data-s="3" onclick="goStep(3)"><div class="prog-dot">🤖</div><div class="prog-label">البوتات</div></div>
  <div class="prog-step" data-s="4" onclick="goStep(4)"><div class="prog-dot">🚀</div><div class="prog-label">تشغيل</div></div>
</div>
<div class="card">
  <div class="card-top">
    <h2 id="stepTitle">🌐 خطوة 1 من 4 — بيانات السيرفر</h2>
    <p id="stepSub">أدخل عنوان سيرفر Aternos والبورت</p>
  </div>
  <div class="card-body">
    <div id="notif" class="notif"></div>
    <div class="step-pane active" id="pane1">
      <div class="info-box">📋 <strong>من أين تحصل على IP السيرفر؟</strong><br>روح <strong>Aternos → My Servers → اختار السيرفر → Connect</strong><br>هتلاقي عنوان زي: <code style="color:#60a5fa">myserver.aternos.me:25565</code></div>
      <div class="field"><label>🌐 عنوان السيرفر (IP) <span class="req">*</span></label><div class="input-wrap"><span class="icon">🏠</span><input type="text" id="hostInput" placeholder="myserver.aternos.me" autocomplete="off" spellcheck="false"></div></div>
      <div class="field"><label>🔌 البورت <span style="font-weight:400;color:var(--text3);font-size:12px">الافتراضي في Aternos هو 25565</span></label><div class="input-wrap"><span class="icon">🔢</span><input type="number" id="portInput" placeholder="25565" value="25565" min="1" max="65535"></div></div>
      <div class="field"><label>🔍 اختبر الاتصال</label><div class="ping-row"><button class="ping-btn" onclick="doPing()">📡 Ping</button><div class="ping-result" id="pingResult"><span>⬜</span> <span id="pingText">لم يتم الاختبار بعد</span></div></div></div>
      <div class="field"><label>🌐 سيرفر ثاني (اختياري)</label><div class="input-wrap"><span class="icon">🏠</span><input type="text" id="host2Input" placeholder="server2.aternos.me (اتركه فارغ)" autocomplete="off" spellcheck="false"></div></div>
      <div class="field"><label>🔌 بورت السيرفر الثاني</label><div class="input-wrap"><span class="icon">🔢</span><input type="number" id="port2Input" placeholder="25565" value="25565" min="1" max="65535"></div></div>
      <div class="btn-row"><button class="btn-primary" onclick="step1Next()">التالي ← إصدار السيرفر</button></div>
    </div>
    <div class="step-pane" id="pane2">
      <div class="tip-box">💡 <strong>لا تعرف الإصدار؟</strong> اختر <strong>"كشف تلقائي"</strong> — البوت هيكتشف الإصدار لوحده عند الاتصال.</div>
      <div class="field"><label>🎮 إصدار السيرفر</label><div class="input-wrap"><span class="icon">📦</span><select id="verSelect"></select></div></div>
      <div class="warn-box" id="verWarn" style="display:none">⚠️ إصدارات Bedrock (26.x) تحتاج إن السيرفر يشتغل على Bedrock mode في Aternos</div>
      <div class="info-box">✅ <strong>الإصدارات المدعومة:</strong><br>Java: 1.0.0 ← 1.21.6 &nbsp;|&nbsp; Bedrock: 26.1.0 و 26.2.0</div>
      <div class="btn-row"><button class="btn-back" onclick="goStep(1)">→ رجوع</button><button class="btn-primary" onclick="goStep(3)">التالي ← اختر البوتات</button></div>
    </div>
    <div class="step-pane" id="pane3">
      <div class="field"><label>🤖 كم بوت تريد؟</label>
        <div class="count-grid">
          <div class="count-card" data-n="1" onclick="selectCount(1)"><div class="num">1</div><div class="icons">⛏️</div><div class="lbl">بوت واحد</div></div>
          <div class="count-card" data-n="2" onclick="selectCount(2)"><div class="num">2</div><div class="icons">⛏️🏗️</div><div class="lbl">اثنان</div></div>
          <div class="count-card selected" data-n="3" onclick="selectCount(3)"><div class="num">3</div><div class="icons">⛏️🏗️🗺️</div><div class="lbl">ثلاثة</div></div>
          <div class="count-card" data-n="4" onclick="selectCount(4)"><div class="badge-rec">MAX</div><div class="num">4</div><div class="icons">⛏️🏗️🗺️🔴</div><div class="lbl">أربعة</div></div>
        </div>
        <input type="hidden" name="botCount" id="botCountHidden" value="3">
      </div>
      <div class="field" style="margin-top:20px"><label>👤 أسماء البوتات</label>
        <div class="bot-row"><div class="bot-icon">⛏️</div><div class="bot-info"><small>حفّار — يحفر ويجمع خامات</small><input type="text" id="b1" value="Alex_miner26" placeholder="Alex_miner26" dir="ltr"></div></div>
        <div class="bot-row"><div class="bot-icon">🏗️</div><div class="bot-info"><small>بنّاء — يبني ويجمع خشب وحجارة</small><input type="text" id="b2" value="Steve_builder" placeholder="Steve_builder" dir="ltr"></div></div>
        <div class="bot-row"><div class="bot-icon">🗺️</div><div class="bot-info"><small>مستكشف — يجوب الخريطة ويكتشف</small><input type="text" id="b3" value="NightExplorer" placeholder="NightExplorer" dir="ltr"></div></div>
        <div class="bot-row" id="botRow4" style="display:none"><div class="bot-icon">🔴</div><div class="bot-info"><small>مهندس ريدستون — يعمل مزارع وأجهزة</small><input type="text" id="b4" value="RedstoneKing" placeholder="RedstoneKing" dir="ltr"></div></div>
        <div class="warn-box" style="margin-top:12px">⚠️ <strong>مهم:</strong> اختار أسماء تبدو طبيعية مثل لاعب حقيقي (حروف + أرقام). تجنب كلمات مثل "bot" أو "robot".</div>
      </div>
      <div class="btn-row"><button class="btn-back" onclick="goStep(2)">→ رجوع</button><button class="btn-primary" onclick="goStep(4)">التالي ← مراجعة وتشغيل</button></div>
    </div>
    <div class="step-pane" id="pane4">
      <div class="tip-box">🚀 كل شيء جاهز! راجع الإعدادات وابدأ تشغيل البوتات.</div>
      <div style="background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:18px">
        <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;line-height:1.8">
          <span style="color:var(--muted)">🌐 السيرفر</span> <span id="rv-host" style="font-weight:700;color:#60a5fa;direction:ltr">—</span>
          <span style="color:var(--muted)">🔌 البورت</span> <span id="rv-port" style="font-weight:700">—</span>
          <span style="color:var(--muted)">🎮 الإصدار</span> <span id="rv-ver" style="font-weight:700">—</span>
          <span style="color:var(--muted)">🤖 البوتات</span> <span id="rv-bots" style="font-weight:700">—</span>
          <span style="color:var(--muted)">👥 الأسماء</span> <span id="rv-names" style="font-weight:700;font-size:12px;direction:ltr">—</span>
        </div>
      </div>
      <div class="info-box">🔒 <strong>بعد التشغيل:</strong><br>• افتح لوحة السيرفر في Aternos واعطِ OP للبوتات<br>• البوتات ستكتشف كل البلاجن تلقائياً عند الاتصال</div>
      <div class="btn-row"><button class="btn-back" onclick="goStep(3)">→ رجوع</button><button class="btn-primary" id="launchBtn" onclick="doLaunch()">🚀 ابدأ تشغيل البوتات!</button></div>
    </div>
  </div>
</div>
<div class="launch-overlay" id="launchOverlay">
  <div class="launch-logo">⛏️</div>
  <div class="launch-text">جاري تشغيل البوتات...</div>
  <div class="launch-sub">يرجى الانتظار، سيتم التحويل تلقائياً</div>
  <div class="launch-bar"><div class="launch-bar-fill"></div></div>
</div>
<script>
const verGroups={'الإصدارات القديمة (1.0 – 1.7)':['1.0.0','1.1.0','1.2.1','1.3.1','1.4.2','1.5.0','1.6.1','1.7.2'],'الإصدارات الكلاسيكية (1.8 – 1.12)':['1.8.0','1.9.0','1.10.0','1.11.0','1.12.0'],'الإصدارات الحديثة (1.13 – 1.19)':['1.13.0','1.14.0','1.15.0','1.16.0','1.17.0','1.18.0','1.19.0'],'الإصدارات الجديدة (1.20 – 1.21)':['1.20.0','1.21.0','1.21.2','1.21.3','1.21.4','1.21.5','1.21.6'],'إصدارات Bedrock':['26.1.0','26.2.0']};
(function(){
  const sel=document.getElementById('verSelect');
  const o=document.createElement('option');o.value='auto';o.textContent='🔍 كشف تلقائي (موصى به)';sel.appendChild(o);
  Object.entries(verGroups).forEach(([grp,vers])=>{
    const g=document.createElement('optgroup');g.label=grp;
    vers.forEach(v=>{const o2=document.createElement('option');o2.value=v;o2.textContent=v;g.appendChild(o2)});
    sel.appendChild(g);
  });
})();
(function(){
  const c=document.getElementById('particles');
  const emojis=['⛏️','⬛','🟫','💎','🪨','🌿','🔥','⭐','✨','🟩'];
  const colors=['#10b981','#3b82f6','#8b5cf6','#06b6d4','#f59e0b'];
  for(let i=0;i<25;i++){
    const p=document.createElement('div');p.className='p';
    if(Math.random()>.5){
      const size=4+Math.random()*6;
      p.style.cssText='left:'+(Math.random()*100)+'%;width:'+size+'px;height:'+size+'px;background:'+colors[Math.floor(Math.random()*colors.length)]+';border-radius:50%;box-shadow:0 0 '+(size*2)+'px currentColor;animation-duration:'+(10+Math.random()*20)+'s;animation-delay:-'+(Math.random()*25)+'s;opacity:'+(0.1+Math.random()*0.2);
    }else{
      p.textContent=emojis[Math.floor(Math.random()*emojis.length)];
      p.style.cssText='left:'+(Math.random()*100)+'%;width:20px;height:20px;font-size:'+(12+Math.random()*14)+'px;animation-duration:'+(10+Math.random()*20)+'s;animation-delay:-'+(Math.random()*25)+'s;opacity:'+(0.03+Math.random()*0.08)+';filter:blur('+(Math.random()*1)+'px)';
    }
    c.appendChild(p);
  }
})();
let curStep=1, selectedCount=3;
async function fetchConfig(){
  try{const r=await fetch('/api/config');if(!r.ok)return;const d=await r.json();if(d.host)document.getElementById('hostInput').value=d.host;if(d.port)document.getElementById('portInput').value=d.port;if(d.version){const sel=document.getElementById('verSelect');const opt=[...sel.options].find(o=>o.value===d.version);if(opt)sel.value=d.version;}if(d.botCount){selectedCount=d.botCount;selectCount(d.botCount);}if(d.bot1Name)document.getElementById('b1').value=d.bot1Name;if(d.bot2Name)document.getElementById('b2').value=d.bot2Name;if(d.bot3Name)document.getElementById('b3').value=d.bot3Name;if(d.bot4Name)document.getElementById('b4').value=d.bot4Name;if(d.host2)document.getElementById('host2Input').value=d.host2;if(d.port2)document.getElementById('port2Input').value=d.port2;}catch(e){}
}
function goStep(n){
  if(n>curStep&&curStep===1&&!validateStep1())return;
  curStep=n;
  document.querySelectorAll('.step-pane').forEach(p=>p.classList.remove('active'));
  document.getElementById('pane'+n).classList.add('active');
  document.querySelectorAll('.prog-step').forEach(s=>{const sn=parseInt(s.dataset.s);s.classList.toggle('active',sn===n);s.classList.toggle('done',sn<n)});
  const titles=['','🌐 خطوة 1 من 4 — بيانات السيرفر','🎮 خطوة 2 من 4 — إصدار السيرفر','🤖 خطوة 3 من 4 — اختيار البوتات','🚀 خطوة 4 من 4 — مراجعة وتشغيل'];
  const subs=['','أدخل عنوان سيرفر Aternos والبورت','حدد إصدار السيرفر أو اتركه تلقائي','اختر عدد البوتات وأسمائهم','راجع الإعدادات واضغط تشغيل'];
  document.getElementById('stepTitle').textContent=titles[n];document.getElementById('stepSub').textContent=subs[n];
  if(n===4)fillReview();hideNotif();window.scrollTo({top:0,behavior:'smooth'});
}
function step1Next(){if(validateStep1())goStep(2)}
function validateStep1(){const h=document.getElementById('hostInput').value.trim();if(!h){showNotif('❌ يرجى إدخال عنوان السيرفر أولاً','err');return false}if(h.includes(' ')){showNotif('❌ العنوان لا يجب أن يحتوي على مسافات','err');return false}return true}
async function doPing(){
  const host=document.getElementById('hostInput').value.trim(),port=document.getElementById('portInput').value||'25565';
  if(!host){showNotif('❌ أدخل عنوان السيرفر أولاً','err');return}
  const btn=document.querySelector('.ping-btn'),res=document.getElementById('pingResult'),txt=document.getElementById('pingText');
  btn.disabled=true;btn.textContent='⏳ جاري...';res.style.borderColor='var(--border)';txt.textContent='جاري الاتصال...';
  try{const t=Date.now();const r=await fetch('/api/ping-server?host='+encodeURIComponent(host)+'&port='+encodeURIComponent(port));const d=await r.json();const ms=Date.now()-t;if(d.online){res.style.borderColor='var(--green)';txt.innerHTML='<span style="color:var(--green)">✅ متصل!</span> السيرفر شغّال — Ping: '+(d.ping||ms)+'ms — الإصدار: '+(d.version||'غير معروف');if(d.version&&d.version!=='unknown'){const vSel=document.getElementById('verSelect');const opt=[...vSel.options].find(o=>o.value===d.version);if(opt)vSel.value=d.version}}else{res.style.borderColor='var(--red)';txt.innerHTML='<span style="color:var(--red)">❌ لا يمكن الاتصال</span>'} }catch(e){res.style.borderColor='var(--yellow)';txt.innerHTML='<span style="color:var(--yellow)">⚠️ تعذّر الاختبار</span>'}
  btn.disabled=false;btn.textContent='📡 Ping';
}
document.getElementById('verSelect').addEventListener('change',function(){document.getElementById('verWarn').style.display=this.value.startsWith('26.')?'block':'none'});
function selectCount(n){
  selectedCount=n;
  document.querySelectorAll('.count-card').forEach(c=>c.classList.toggle('selected',parseInt(c.dataset.n)===n));
  document.getElementById('botCountHidden').value=n;
  ['botRow1','botRow2','botRow3','botRow4'].forEach((id,i)=>{document.getElementById(id).style.display=i<n?'flex':'none'});
}
setTimeout(()=>selectCount(selectedCount),0);
function fillReview(){
  document.getElementById('rv-host').textContent=document.getElementById('hostInput').value.trim();
  document.getElementById('rv-port').textContent=document.getElementById('portInput').value||'25565';
  const ver=document.getElementById('verSelect');document.getElementById('rv-ver').textContent=ver.options[ver.selectedIndex].text;
  const names=[];if(selectedCount>=1)names.push(document.getElementById('b1').value||'Alex_miner26');if(selectedCount>=2)names.push(document.getElementById('b2').value||'Steve_builder');if(selectedCount>=3)names.push(document.getElementById('b3').value||'NightExplorer');if(selectedCount>=4)names.push(document.getElementById('b4').value||'RedstoneKing');
  document.getElementById('rv-bots').textContent=selectedCount+' بوتات';document.getElementById('rv-names').textContent=names.join(' · ');
}
async function doLaunch(){
  const btn=document.getElementById('launchBtn');btn.disabled=true;btn.textContent='⏳ جاري الإعداد...';
  const data={host:document.getElementById('hostInput').value.trim(),port:parseInt(document.getElementById('portInput').value)||25565,version:document.getElementById('verSelect').value,botCount:selectedCount,bot1Name:document.getElementById('b1').value||'Alex_miner26',bot2Name:document.getElementById('b2').value||'Steve_builder',bot3Name:document.getElementById('b3').value||'NightExplorer',bot4Name:document.getElementById('b4').value||'RedstoneKing',host2:document.getElementById('host2Input')?document.getElementById('host2Input').value.trim():'',port2:parseInt(document.getElementById('port2Input')?document.getElementById('port2Input').value:'25565')||25565,version2:'auto',botCount2:2};
  if(!data.host){showNotif('❌ عنوان السيرفر مطلوب','err');btn.disabled=false;btn.textContent='🚀 ابدأ تشغيل البوتات!';return}
  try{const r=await fetch('/api/setup',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const d=await r.json();if(d.ok){document.getElementById('launchOverlay').classList.add('show');setTimeout(()=>location.href='/',3000)}else{showNotif('❌ '+(d.error||'خطأ غير معروف'),'err');btn.disabled=false;btn.textContent='🚀 ابدأ تشغيل البوتات!'} }catch(e){showNotif('❌ فشل الاتصال: '+e.message,'err');btn.disabled=false;btn.textContent='🚀 ابدأ تشغيل البوتات!'}
}
function showNotif(msg,type){const el=document.getElementById('notif');el.textContent=msg;el.className='notif '+type;el.style.display='block';clearTimeout(showNotif._t);showNotif._t=setTimeout(()=>el.style.display='none',4000)}
function hideNotif(){document.getElementById('notif').style.display='none'}
fetchConfig();
</script>
</body>
</html>