Hugging Face's logo

Spaces:
THEZYZSTUDIO
/
Downl
Sleeping

App Files Community
2

Delete index.html

#1
by yasynalhmrwny884 - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+0
-705
Files changed (1) hide show
  1. index.html +0 -705
index.html DELETED
@@ -1,705 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ar" dir="rtl">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>THE Z AI/AGENT — Benchmark Comparison</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Cairo:wght@300;400;600;700;900&display=swap" rel="stylesheet">
8
- <style>
9
- *{margin:0;padding:0;box-sizing:border-box}
10
- :root{
11
- --z:#00d4ff;
12
- --zd:#1e6fd9;
13
- --bg:#060e1f;
14
- --card:rgba(10,25,55,0.80);
15
- --border:rgba(59,158,255,0.18);
16
- --text:#a8d8ff;
17
- --white:#e8f4ff;
18
- --gpt:#5eead4;
19
- --claude:#fb923c;
20
- --gemini:#c084fc;
21
- }
22
- html{scroll-behavior:smooth}
23
- body{background:var(--bg);color:var(--white);font-family:'Cairo',sans-serif;overflow-x:hidden}
24
-
25
- /* ── ANIMATED BG ── */
26
- .bg{position:fixed;inset:0;z-index:0;
27
- background:
28
- radial-gradient(ellipse at 15% 10%,rgba(30,111,217,.22) 0%,transparent 50%),
29
- radial-gradient(ellipse at 85% 90%,rgba(0,212,255,.12) 0%,transparent 50%),
30
- radial-gradient(ellipse at 50% 50%,rgba(6,14,31,1) 0%,#060e1f 100%)}
31
- .grid-bg{
32
- position:fixed;inset:0;z-index:0;
33
- background-image:
34
- linear-gradient(rgba(59,158,255,.04) 1px,transparent 1px),
35
- linear-gradient(90deg,rgba(59,158,255,.04) 1px,transparent 1px);
36
- background-size:60px 60px;
37
- animation:gridmove 20s linear infinite;
38
- }
39
- @keyframes gridmove{0%{background-position:0 0}100%{background-position:60px 60px}}
40
- .pts{position:fixed;inset:0;z-index:0;overflow:hidden}
41
- .pt{position:absolute;border-radius:50%;background:#3b9eff;animation:fup linear infinite;opacity:0}
42
- @keyframes fup{0%{transform:translateY(110vh);opacity:0}10%{opacity:.4}90%{opacity:.15}100%{transform:translateY(-10vh);opacity:0}}
43
-
44
- /* ── SCANLINE ── */
45
- .scanline{position:fixed;inset:0;z-index:1;pointer-events:none;
46
- background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
47
- }
48
-
49
- /* ── WRAP ── */
50
- .wrap{position:relative;z-index:10;max-width:920px;margin:0 auto;padding:0 20px 100px}
51
-
52
- /* ── HERO ── */
53
- header{text-align:center;padding:70px 10px 40px;position:relative}
54
- .hero-ring{
55
- position:absolute;top:50px;left:50%;transform:translateX(-50%);
56
- width:320px;height:320px;border-radius:50%;
57
- border:1px solid rgba(0,212,255,.08);
58
- animation:spin 30s linear infinite;
59
- pointer-events:none;
60
- }
61
- .hero-ring::before{
62
- content:'';position:absolute;top:-3px;left:50%;
63
- width:6px;height:6px;border-radius:50%;background:#00d4ff;
64
- box-shadow:0 0 12px rgba(0,212,255,.9);
65
- transform:translateX(-50%);
66
- }
67
- @keyframes spin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
68
- .lz{
69
- font-family:'Orbitron',monospace;font-size:clamp(110px,22vw,165px);font-weight:900;line-height:1;
70
- background:linear-gradient(135deg,#7dd3fc 0%,#1e6fd9 35%,#00d4ff 70%,#7dd3fc 100%);
71
- -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
72
- filter:drop-shadow(0 0 40px rgba(59,158,255,.95)) drop-shadow(0 0 80px rgba(0,212,255,.55));
73
- animation:pz 3s ease-in-out infinite;display:block;margin-bottom:4px;
74
- position:relative;z-index:2;
75
- }
76
- @keyframes pz{
77
- 0%,100%{filter:drop-shadow(0 0 40px rgba(59,158,255,.95)) drop-shadow(0 0 80px rgba(0,212,255,.55))}
78
- 50%{filter:drop-shadow(0 0 65px rgba(59,158,255,1)) drop-shadow(0 0 130px rgba(0,212,255,.8))}
79
- }
80
- .ht{font-family:'Orbitron',monospace;font-size:clamp(18px,4.5vw,30px);font-weight:900;letter-spacing:5px;
81
- color:#5bb8ff;text-shadow:0 0 25px rgba(91,184,255,.7);margin-bottom:6px;text-transform:uppercase}
82
- .hs{font-family:'Orbitron',monospace;font-size:clamp(8px,1.6vw,10px);color:#00d4ff;
83
- letter-spacing:6px;text-transform:uppercase;opacity:.6;margin-bottom:16px}
84
- .divider{width:200px;height:1px;background:linear-gradient(90deg,transparent,#00d4ff,#3b9eff,transparent);
85
- margin:0 auto 16px;background-size:200%;animation:sh 2.5s linear infinite}
86
- @keyframes sh{0%{background-position:-200% center}100%{background-position:200% center}}
87
- .stud{font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;color:var(--text);
88
- opacity:.4;text-transform:uppercase;margin-bottom:6px}
89
- .hero-sub{font-size:13px;color:var(--text);opacity:.5;letter-spacing:1px;margin-top:8px}
90
-
91
- /* ── LEGEND BAR ── */
92
- .legend{
93
- display:flex;gap:clamp(14px,3.5vw,32px);justify-content:center;flex-wrap:wrap;
94
- margin:32px 0 10px;
95
- background:var(--card);border:1px solid var(--border);
96
- border-radius:50px;padding:14px 28px;
97
- backdrop-filter:blur(10px);
98
- max-width:700px;margin-left:auto;margin-right:auto;
99
- }
100
- .leg-item{display:flex;align-items:center;gap:8px;font-size:10px;
101
- font-family:'Orbitron',monospace;letter-spacing:1.5px;color:var(--text);text-transform:uppercase}
102
- .leg-dot{width:10px;height:10px;border-radius:3px}
103
- .leg-dot.z{background:var(--z);box-shadow:0 0 8px rgba(0,212,255,.8)}
104
- .leg-dot.gpt{background:var(--gpt);box-shadow:0 0 8px rgba(94,234,212,.6)}
105
- .leg-dot.claude{background:var(--claude);box-shadow:0 0 8px rgba(251,146,60,.5)}
106
- .leg-dot.gemini{background:var(--gemini);box-shadow:0 0 8px rgba(192,132,252,.5)}
107
-
108
- /* ── SECTION TITLE ── */
109
- .sec{text-align:center;margin:56px 0 6px}
110
- .sec-num{
111
- font-family:'Orbitron',monospace;font-size:11px;letter-spacing:4px;
112
- color:rgba(0,212,255,.4);text-transform:uppercase;margin-bottom:6px
113
- }
114
- .sec-en{
115
- font-family:'Orbitron',monospace;font-size:clamp(14px,2.8vw,20px);
116
- font-weight:700;letter-spacing:3px;color:#5bb8ff;text-transform:uppercase
117
- }
118
- .sec-ar{font-size:clamp(13px,2.4vw,16px);font-weight:600;color:var(--text);margin-top:5px;opacity:.7}
119
- .sec-line{
120
- width:120px;height:1px;
121
- background:linear-gradient(90deg,transparent,#00d4ff,transparent);
122
- margin:14px auto 38px
123
- }
124
-
125
- /* ── LINE CHART ── */
126
- .chart-outer{
127
- position:relative;
128
- background:var(--card);
129
- border:1px solid var(--border);
130
- border-radius:24px;
131
- padding:28px 28px 0;
132
- overflow:hidden;
133
- backdrop-filter:blur(8px);
134
- margin-bottom:14px;
135
- }
136
- .chart-outer::before{
137
- content:'';position:absolute;inset:0;
138
- background:radial-gradient(ellipse at 50% 0%,rgba(59,158,255,.06) 0%,transparent 60%);
139
- pointer-events:none;
140
- }
141
- .winner-tag{
142
- position:absolute;top:14px;left:18px;
143
- font-family:'Orbitron',monospace;font-size:9px;font-weight:700;letter-spacing:2px;
144
- padding:5px 14px;border-radius:30px;text-transform:uppercase;
145
- color:#060e1f;
146
- }
147
- .winner-tag.z-win{background:linear-gradient(90deg,#1e6fd9,#00d4ff);box-shadow:0 0 14px rgba(0,212,255,.4)}
148
- .winner-tag.gpt-win{background:linear-gradient(90deg,#0d9488,#5eead4);box-shadow:0 0 14px rgba(94,234,212,.4)}
149
- .winner-tag.claude-win{background:linear-gradient(90deg,#ea580c,#fb923c);box-shadow:0 0 14px rgba(251,146,60,.4)}
150
- .winner-tag.gemini-win{background:linear-gradient(90deg,#7c3aed,#c084fc);box-shadow:0 0 14px rgba(192,132,252,.4)}
151
-
152
- /* SVG line chart */
153
- .line-chart-wrap{width:100%;overflow:visible}
154
- .chart-svg{width:100%;display:block;overflow:visible}
155
-
156
- /* Y-axis grid lines */
157
- .y-grid{stroke:rgba(59,158,255,.08);stroke-width:1}
158
- .y-label{font-family:'Orbitron',monospace;font-size:9px;fill:rgba(168,216,255,.3);text-anchor:end}
159
-
160
- /* model lines */
161
- .line-z{stroke:var(--z);stroke-width:3;fill:none;filter:drop-shadow(0 0 6px rgba(0,212,255,.7))}
162
- .line-gpt{stroke:var(--gpt);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 5px rgba(94,234,212,.5))}
163
- .line-claude{stroke:var(--claude);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 5px rgba(251,146,60,.4))}
164
- .line-gemini{stroke:var(--gemini);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 5px rgba(192,132,252,.4))}
165
-
166
- /* dots */
167
- .dot-z{fill:var(--z);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 5px rgba(0,212,255,.9))}
168
- .dot-gpt{fill:var(--gpt);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 4px rgba(94,234,212,.7))}
169
- .dot-claude{fill:var(--claude);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 4px rgba(251,146,60,.6))}
170
- .dot-gemini{fill:var(--gemini);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 4px rgba(192,132,252,.6))}
171
-
172
- /* score labels on dots */
173
- .score-z{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--z);text-anchor:middle}
174
- .score-gpt{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--gpt);text-anchor:middle}
175
- .score-claude{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--claude);text-anchor:middle}
176
- .score-gemini{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--gemini);text-anchor:middle}
177
-
178
- /* X-axis model names */
179
- .x-label-en{font-family:'Orbitron',monospace;font-size:8px;fill:var(--text);text-anchor:middle;letter-spacing:.5px;text-transform:uppercase}
180
- .x-label-ar{font-family:'Cairo',sans-serif;font-size:9px;fill:rgba(168,216,255,.5);text-anchor:middle}
181
- .x-label-version{font-family:'Orbitron',monospace;font-size:7px;fill:rgba(168,216,255,.3);text-anchor:middle}
182
-
183
- /* chart bottom spacer */
184
- .chart-footer{height:14px}
185
-
186
- /* ── RANK STRIP ── */
187
- .rank-strip{
188
- display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
189
- margin-bottom:50px;margin-top:2px;
190
- }
191
- .rank-item{
192
- display:flex;align-items:center;gap:7px;
193
- background:rgba(10,25,55,.6);border:1px solid var(--border);
194
- border-radius:30px;padding:6px 14px;
195
- font-family:'Orbitron',monospace;font-size:9px;letter-spacing:1px;
196
- color:var(--text);text-transform:uppercase;
197
- }
198
- .rank-num{font-size:11px;font-weight:700}
199
- .rank-num.n1{color:gold}
200
- .rank-num.n2{color:#aaa}
201
- .rank-num.n3{color:#cd7f32}
202
- .rank-num.n4{color:rgba(168,216,255,.4)}
203
- .rank-dot{width:8px;height:8px;border-radius:2px}
204
-
205
- /* ── DOWNLOAD ── */
206
- .dl-sec{text-align:center;padding:50px 20px 30px;position:relative}
207
- .dl-sec::before{content:'';position:absolute;inset:0;
208
- background:radial-gradient(ellipse at center,rgba(30,111,217,.12) 0%,transparent 70%);
209
- border-radius:24px;pointer-events:none}
210
- .btn-dl{
211
- display:inline-flex;align-items:center;gap:12px;padding:18px 52px;
212
- background:linear-gradient(135deg,#1e6fd9 0%,#00d4ff 100%);
213
- color:#060e1f;font-family:'Orbitron',monospace;font-weight:900;
214
- font-size:15px;letter-spacing:3px;text-transform:uppercase;
215
- text-decoration:none;border-radius:50px;position:relative;overflow:hidden;
216
- transition:transform .3s,box-shadow .3s;
217
- box-shadow:0 0 35px rgba(0,212,255,.6),0 8px 30px rgba(30,111,217,.4);
218
- margin-bottom:16px;
219
- }
220
- .btn-dl::before{content:'';position:absolute;top:-50%;left:-60%;width:35%;height:200%;
221
- background:rgba(255,255,255,.28);transform:skewX(-20deg);transition:left .5s}
222
- .btn-dl:hover::before{left:130%}
223
- .btn-dl:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 55px rgba(0,212,255,.85),0 15px 45px rgba(30,111,217,.5)}
224
- .btn-dl:active{transform:scale(.97)}
225
- .sz{font-family:'Orbitron',monospace;font-size:12px;letter-spacing:2px;color:#5bb8ff;
226
- opacity:.6;text-transform:uppercase}
227
- .sz span{color:#00d4ff;opacity:1;font-weight:700}
228
-
229
- /* ── FOOTER ── */
230
- footer{text-align:center;padding:28px;border-top:1px solid rgba(59,158,255,.08);margin-top:20px}
231
- footer p{font-family:'Orbitron',monospace;font-size:10px;letter-spacing:2.5px;
232
- color:rgba(59,158,255,.2);text-transform:uppercase}
233
-
234
- /* ── REVEAL ── */
235
- .rv{opacity:0;transform:translateY(32px);transition:opacity .7s,transform .7s}
236
- .rv.on{opacity:1;transform:translateY(0)}
237
-
238
- /* ── GLOW SEPARATOR ── */
239
- .glow-sep{
240
- width:100%;height:1px;margin:48px 0;
241
- background:linear-gradient(90deg,transparent,rgba(0,212,255,.15),transparent);
242
- }
243
- </style>
244
- </head>
245
- <body>
246
-
247
- <div class="bg"></div>
248
- <div class="grid-bg"></div>
249
- <div class="scanline"></div>
250
- <div class="pts" id="pts"></div>
251
-
252
- <div class="wrap">
253
-
254
- <!-- HERO -->
255
- <header>
256
- <div class="hero-ring"></div>
257
- <span class="lz">Z</span>
258
- <div class="ht">THE Z AI / AGENT</div>
259
- <div class="hs">BETA V1.2 Y25 &nbsp;·&nbsp; SWARM / EDITOR / DESIGNER / BUILDER / CREATOR</div>
260
- <div class="divider"></div>
261
- <div class="stud">BY THE ZYZ STUDIO</div>
262
- <div class="hero-sub">AI Benchmark Comparison · مقارنة أداء الذكاء الاصطناعي</div>
263
- </header>
264
-
265
- <!-- LEGEND -->
266
- <div class="legend rv">
267
- <div class="leg-item"><div class="leg-dot z"></div>Z AI/Agent Beta V1.2</div>
268
- <div class="leg-item"><div class="leg-dot gpt"></div>GPT-5.5</div>
269
- <div class="leg-item"><div class="leg-dot claude"></div>Claude Sonnet 4.6</div>
270
- <div class="leg-item"><div class="leg-dot gemini"></div>Gemini 3 Pro</div>
271
- </div>
272
-
273
- <!-- ============================
274
- ① SPEED
275
- ============================ -->
276
- <div class="sec rv">
277
- <div class="sec-num">BENCHMARK 01</div>
278
- <div class="sec-en">① Response Speed</div>
279
- <div class="sec-ar">السرعة في الاستجابة</div>
280
- </div>
281
- <div class="sec-line rv"></div>
282
-
283
- <div class="chart-outer rv">
284
- <div class="winner-tag z-win">🏆 Z AI FASTEST</div>
285
- <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
286
- <!-- grid lines -->
287
- <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
288
- <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
289
- <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
290
- <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
291
- <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
292
- <!-- Y labels (100→0 mapped to y=20→180) -->
293
- <text x="52" y="24" class="y-label">100</text>
294
- <text x="52" y="64" class="y-label">80</text>
295
- <text x="52" y="104" class="y-label">60</text>
296
- <text x="52" y="144" class="y-label">40</text>
297
- <text x="52" y="184" class="y-label">20</text>
298
-
299
- <!-- X positions: 140, 300, 460, 620 -->
300
-
301
- <!-- Lines (score→y: 98=24, 80=52, 74=65, 64=82, 60=92, 50=110) -->
302
- <!-- Speed: Z=98, GPT=74, Claude=60, Gemini=60 -->
303
- <!-- Z line -->
304
- <polyline class="line-z" points="140,24 300,65 460,92 620,92"/>
305
- <!-- GPT line -->
306
- <polyline class="line-gpt" points="140,65 300,24 460,92 620,92"/>
307
- <!-- Claude line (starts at rank 4 but in order Z,GPT,Claude,Gemini on x-axis) -->
308
- <!-- Wait — x-axis is models, y is score. Each model has ONE point per chart. -->
309
- <!-- This is a SINGLE-category chart so line chart = connect model positions. -->
310
- <!-- Re-interpret as vertical bars shown as dots on a line per model -->
311
- <!-- Actually draw as column lines from x-axis up to the score dot -->
312
-
313
- <!-- Vertical stems from baseline (y=195) up to dot -->
314
- <!-- Z=98 → y=24 -->
315
- <line x1="140" y1="195" x2="140" y2="24" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
316
- <line x1="300" y1="195" x2="300" y2="65" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
317
- <line x1="460" y1="195" x2="460" y2="92" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
318
- <line x1="620" y1="195" x2="620" y2="92" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
319
-
320
- <!-- Connecting line through all 4 dots -->
321
- <polyline points="140,24 300,65 460,92 620,92"
322
- stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
323
-
324
- <!-- Area fill under Z line (symbolic glow) -->
325
- <defs>
326
- <linearGradient id="gz1" x1="0" y1="0" x2="0" y2="1">
327
- <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.12"/>
328
- <stop offset="100%" stop-color="#00d4ff" stop-opacity="0"/>
329
- </linearGradient>
330
- </defs>
331
-
332
- <!-- Z dot + score -->
333
- <circle cx="140" cy="24" r="7" class="dot-z"/>
334
- <text x="140" y="14" class="score-z">98</text>
335
-
336
- <!-- GPT dot + score -->
337
- <circle cx="300" cy="65" r="6" class="dot-gpt"/>
338
- <text x="300" y="55" class="score-gpt">74</text>
339
-
340
- <!-- Claude dot + score -->
341
- <circle cx="460" cy="92" r="6" class="dot-claude"/>
342
- <text x="460" y="82" class="score-claude">60</text>
343
-
344
- <!-- Gemini dot + score -->
345
- <circle cx="620" cy="92" r="6" class="dot-gemini"/>
346
- <text x="620" y="82" class="score-gemini">60</text>
347
-
348
- <!-- Baseline -->
349
- <line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
350
-
351
- <!-- X labels -->
352
- <text x="140" y="208" class="x-label-en">Z AI/Agent</text>
353
- <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
354
- <text x="140" y="232" class="x-label-ar">زد للذكاء</text>
355
-
356
- <text x="300" y="208" class="x-label-en">GPT-5.5</text>
357
- <text x="300" y="220" class="x-label-version">OpenAI</text>
358
- <text x="300" y="232" class="x-label-ar">جي بي تي</text>
359
-
360
- <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
361
- <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
362
- <text x="460" y="232" class="x-label-ar">كلود</text>
363
-
364
- <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
365
- <text x="620" y="220" class="x-label-version">Google</text>
366
- <text x="620" y="232" class="x-label-ar">جيميناي</text>
367
- </svg>
368
- <div class="chart-footer"></div>
369
- </div>
370
-
371
- <!-- Rank strip -->
372
- <div class="rank-strip rv">
373
- <div class="rank-item"><span class="rank-num n1">🥇 1st</span><div class="rank-dot" style="background:var(--z)"></div>Z AI — 98</div>
374
- <div class="rank-item"><span class="rank-num n2">🥈 2nd</span><div class="rank-dot" style="background:var(--gpt)"></div>GPT-5.5 — 74</div>
375
- <div class="rank-item"><span class="rank-num n3">🥉 3rd</span><div class="rank-dot" style="background:var(--claude)"></div>Claude 4.6 — 60</div>
376
- <div class="rank-item"><span class="rank-num n3">🥉 3rd</span><div class="rank-dot" style="background:var(--gemini)"></div>Gemini 3 Pro — 60</div>
377
- </div>
378
-
379
- <div class="glow-sep rv"></div>
380
-
381
- <!-- ============================
382
- ② ACCURACY
383
- ============================ -->
384
- <div class="sec rv">
385
- <div class="sec-num">BENCHMARK 02</div>
386
- <div class="sec-en">② Accuracy</div>
387
- <div class="sec-ar">الدقة في الإجابة</div>
388
- </div>
389
- <div class="sec-line rv"></div>
390
-
391
- <div class="chart-outer rv">
392
- <div class="winner-tag claude-win">🏆 CLAUDE LEADS</div>
393
- <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
394
- <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
395
- <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
396
- <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
397
- <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
398
- <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
399
- <text x="52" y="24" class="y-label">100</text>
400
- <text x="52" y="64" class="y-label">80</text>
401
- <text x="52" y="104" class="y-label">60</text>
402
- <text x="52" y="144" class="y-label">40</text>
403
- <text x="52" y="184" class="y-label">20</text>
404
-
405
- <!-- Accuracy: Claude=98, GPT=80, Gemini=80, Z=64 -->
406
- <!-- y-values: 98→24, 80→52, 64→82 -->
407
- <line x1="140" y1="195" x2="140" y2="82" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
408
- <line x1="300" y1="195" x2="300" y2="52" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
409
- <line x1="460" y1="195" x2="460" y2="24" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
410
- <line x1="620" y1="195" x2="620" y2="52" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
411
-
412
- <polyline points="140,82 300,52 460,24 620,52"
413
- stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
414
-
415
- <circle cx="140" cy="82" r="7" class="dot-z"/>
416
- <text x="140" y="72" class="score-z">64</text>
417
-
418
- <circle cx="300" cy="52" r="6" class="dot-gpt"/>
419
- <text x="300" y="42" class="score-gpt">80</text>
420
-
421
- <circle cx="460" cy="24" r="6" class="dot-claude"/>
422
- <text x="460" y="14" class="score-claude">98</text>
423
-
424
- <circle cx="620" cy="52" r="6" class="dot-gemini"/>
425
- <text x="620" y="42" class="score-gemini">80</text>
426
-
427
- <line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
428
-
429
- <text x="140" y="208" class="x-label-en">Z AI/Agent</text>
430
- <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
431
- <text x="140" y="232" class="x-label-ar">زد للذكاء</text>
432
- <text x="300" y="208" class="x-label-en">GPT-5.5</text>
433
- <text x="300" y="220" class="x-label-version">OpenAI</text>
434
- <text x="300" y="232" class="x-label-ar">جي بي تي</text>
435
- <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
436
- <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
437
- <text x="460" y="232" class="x-label-ar">كلود</text>
438
- <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
439
- <text x="620" y="220" class="x-label-version">Google</text>
440
- <text x="620" y="232" class="x-label-ar">جيميناي</text>
441
- </svg>
442
- <div class="chart-footer"></div>
443
- </div>
444
-
445
- <div class="rank-strip rv">
446
- <div class="rank-item"><span class="rank-num n1">🥇 1st</span><div class="rank-dot" style="background:var(--claude)"></div>Claude 4.6 — 98</div>
447
- <div class="rank-item"><span class="rank-num n2">🥈 2nd</span><div class="rank-dot" style="background:var(--gpt)"></div>GPT-5.5 — 80</div>
448
- <div class="rank-item"><span class="rank-num n2">🥈 2nd</span><div class="rank-dot" style="background:var(--gemini)"></div>Gemini 3 Pro — 80</div>
449
- <div class="rank-item"><span class="rank-num n3">🥉 3rd</span><div class="rank-dot" style="background:var(--z)"></div>Z AI — 64</div>
450
- </div>
451
-
452
- <div class="glow-sep rv"></div>
453
-
454
- <!-- ============================
455
- ③ DEEP & LONG THINKING
456
- ============================ -->
457
- <div class="sec rv">
458
- <div class="sec-num">BENCHMARK 03</div>
459
- <div class="sec-en">③ Deep &amp; Long Thinking</div>
460
- <div class="sec-ar">التفكير العميق والمعمق</div>
461
- </div>
462
- <div class="sec-line rv"></div>
463
-
464
- <div class="chart-outer rv">
465
- <div class="winner-tag z-win">🏆 Z AI LEADS</div>
466
- <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
467
- <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
468
- <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
469
- <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
470
- <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
471
- <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
472
- <text x="52" y="24" class="y-label">100</text>
473
- <text x="52" y="64" class="y-label">80</text>
474
- <text x="52" y="104" class="y-label">60</text>
475
- <text x="52" y="144" class="y-label">40</text>
476
- <text x="52" y="184" class="y-label">20</text>
477
-
478
- <!-- Deep Thinking: Z=98, Gemini=80, GPT=60, Claude=50 -->
479
- <!-- y: 98→24, 80→52, 60→92, 50→110 -->
480
- <line x1="140" y1="195" x2="140" y2="24" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
481
- <line x1="300" y1="195" x2="300" y2="92" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
482
- <line x1="460" y1="195" x2="460" y2="110" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
483
- <line x1="620" y1="195" x2="620" y2="52" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
484
-
485
- <polyline points="140,24 300,92 460,110 620,52"
486
- stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
487
-
488
- <circle cx="140" cy="24" r="7" class="dot-z"/>
489
- <text x="140" y="14" class="score-z">98</text>
490
-
491
- <circle cx="300" cy="92" r="6" class="dot-gpt"/>
492
- <text x="300" y="82" class="score-gpt">60</text>
493
-
494
- <circle cx="460" cy="110" r="6" class="dot-claude"/>
495
- <text x="460" y="100" class="score-claude">50</text>
496
-
497
- <circle cx="620" cy="52" r="6" class="dot-gemini"/>
498
- <text x="620" y="42" class="score-gemini">80</text>
499
-
500
- <line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
501
-
502
- <text x="140" y="208" class="x-label-en">Z AI/Agent</text>
503
- <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
504
- <text x="140" y="232" class="x-label-ar">زد للذكاء</text>
505
- <text x="300" y="208" class="x-label-en">GPT-5.5</text>
506
- <text x="300" y="220" class="x-label-version">OpenAI</text>
507
- <text x="300" y="232" class="x-label-ar">جي بي تي</text>
508
- <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
509
- <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
510
- <text x="460" y="232" class="x-label-ar">كلود</text>
511
- <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
512
- <text x="620" y="220" class="x-label-version">Google</text>
513
- <text x="620" y="232" class="x-label-ar">جيميناي</text>
514
- </svg>
515
- <div class="chart-footer"></div>
516
- </div>
517
-
518
- <div class="rank-strip rv">
519
- <div class="rank-item"><span class="rank-num n1">🥇 1st</span><div class="rank-dot" style="background:var(--z)"></div>Z AI — 98</div>
520
- <div class="rank-item"><span class="rank-num n2">🥈 2nd</span><div class="rank-dot" style="background:var(--gemini)"></div>Gemini 3 Pro — 80</div>
521
- <div class="rank-item"><span class="rank-num n3">🥉 3rd</span><div class="rank-dot" style="background:var(--gpt)"></div>GPT-5.5 — 60</div>
522
- <div class="rank-item"><span class="rank-num n4">4th</span><div class="rank-dot" style="background:var(--claude)"></div>Claude 4.6 — 50</div>
523
- </div>
524
-
525
- <div class="glow-sep rv"></div>
526
-
527
- <!-- ============================
528
- ④ DEEP RESEARCH
529
- ============================ -->
530
- <div class="sec rv">
531
- <div class="sec-num">BENCHMARK 04</div>
532
- <div class="sec-en">④ Deep Research</div>
533
- <div class="sec-ar">البحث العميق والشامل</div>
534
- </div>
535
- <div class="sec-line rv"></div>
536
-
537
- <div class="chart-outer rv">
538
- <div class="winner-tag gpt-win">🏆 GPT-5.5 LEADS</div>
539
- <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
540
- <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
541
- <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
542
- <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
543
- <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
544
- <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
545
- <text x="52" y="24" class="y-label">100</text>
546
- <text x="52" y="64" class="y-label">80</text>
547
- <text x="52" y="104" class="y-label">60</text>
548
- <text x="52" y="144" class="y-label">40</text>
549
- <text x="52" y="184" class="y-label">20</text>
550
-
551
- <!-- Deep Research: GPT=98, Z=80, Claude=60, Gemini=50 -->
552
- <!-- y: 98→24, 80→52, 60→92, 50→110 -->
553
- <line x1="140" y1="195" x2="140" y2="52" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
554
- <line x1="300" y1="195" x2="300" y2="24" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
555
- <line x1="460" y1="195" x2="460" y2="92" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
556
- <line x1="620" y1="195" x2="620" y2="110" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
557
-
558
- <polyline points="140,52 300,24 460,92 620,110"
559
- stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
560
-
561
- <circle cx="140" cy="52" r="7" class="dot-z"/>
562
- <text x="140" y="42" class="score-z">80</text>
563
-
564
- <circle cx="300" cy="24" r="6" class="dot-gpt"/>
565
- <text x="300" y="14" class="score-gpt">98</text>
566
-
567
- <circle cx="460" cy="92" r="6" class="dot-claude"/>
568
- <text x="460" y="82" class="score-claude">60</text>
569
-
570
- <circle cx="620" cy="110" r="6" class="dot-gemini"/>
571
- <text x="620" y="100" class="score-gemini">50</text>
572
-
573
- <line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
574
-
575
- <text x="140" y="208" class="x-label-en">Z AI/Agent</text>
576
- <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
577
- <text x="140" y="232" class="x-label-ar">زد للذكاء</text>
578
- <text x="300" y="208" class="x-label-en">GPT-5.5</text>
579
- <text x="300" y="220" class="x-label-version">OpenAI</text>
580
- <text x="300" y="232" class="x-label-ar">جي بي تي</text>
581
- <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
582
- <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
583
- <text x="460" y="232" class="x-label-ar">كلود</text>
584
- <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
585
- <text x="620" y="220" class="x-label-version">Google</text>
586
- <text x="620" y="232" class="x-label-ar">جيميناي</text>
587
- </svg>
588
- <div class="chart-footer"></div>
589
- </div>
590
-
591
- <div class="rank-strip rv">
592
- <div class="rank-item"><span class="rank-num n1">🥇 1st</span><div class="rank-dot" style="background:var(--gpt)"></div>GPT-5.5 — 98</div>
593
- <div class="rank-item"><span class="rank-num n2">🥈 2nd</span><div class="rank-dot" style="background:var(--z)"></div>Z AI — 80</div>
594
- <div class="rank-item"><span class="rank-num n3">🥉 3rd</span><div class="rank-dot" style="background:var(--claude)"></div>Claude 4.6 — 60</div>
595
- <div class="rank-item"><span class="rank-num n4">4th</span><div class="rank-dot" style="background:var(--gemini)"></div>Gemini 3 Pro — 50</div>
596
- </div>
597
-
598
- <div class="glow-sep rv"></div>
599
-
600
- <!-- ============================
601
- ⑤ ANSWER QUALITY
602
- ============================ -->
603
- <div class="sec rv">
604
- <div class="sec-num">BENCHMARK 05</div>
605
- <div class="sec-en">⑤ Answer Quality &amp; Structure</div>
606
- <div class="sec-ar">جودة الإجابة وترتيبها</div>
607
- </div>
608
- <div class="sec-line rv"></div>
609
-
610
- <div class="chart-outer rv">
611
- <div class="winner-tag z-win">🏆 Z AI LEADS</div>
612
- <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
613
- <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
614
- <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
615
- <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
616
- <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
617
- <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
618
- <text x="52" y="24" class="y-label">100</text>
619
- <text x="52" y="64" class="y-label">80</text>
620
- <text x="52" y="104" class="y-label">60</text>
621
- <text x="52" y="144" class="y-label">40</text>
622
- <text x="52" y="184" class="y-label">20</text>
623
-
624
- <!-- Answer Quality: Z=98, Claude=80, Gemini=60, GPT=50 -->
625
- <!-- y: 98→24, 80→52, 60→92, 50→110 -->
626
- <line x1="140" y1="195" x2="140" y2="24" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
627
- <line x1="300" y1="195" x2="300" y2="110" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
628
- <line x1="460" y1="195" x2="460" y2="52" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
629
- <line x1="620" y1="195" x2="620" y2="92" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
630
-
631
- <polyline points="140,24 300,110 460,52 620,92"
632
- stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
633
-
634
- <circle cx="140" cy="24" r="7" class="dot-z"/>
635
- <text x="140" y="14" class="score-z">98</text>
636
-
637
- <circle cx="300" cy="110" r="6" class="dot-gpt"/>
638
- <text x="300" y="100" class="score-gpt">50</text>
639
-
640
- <circle cx="460" cy="52" r="6" class="dot-claude"/>
641
- <text x="460" y="42" class="score-claude">80</text>
642
-
643
- <circle cx="620" cy="92" r="6" class="dot-gemini"/>
644
- <text x="620" y="82" class="score-gemini">60</text>
645
-
646
- <line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
647
-
648
- <text x="140" y="208" class="x-label-en">Z AI/Agent</text>
649
- <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
650
- <text x="140" y="232" class="x-label-ar">زد للذكاء</text>
651
- <text x="300" y="208" class="x-label-en">GPT-5.5</text>
652
- <text x="300" y="220" class="x-label-version">OpenAI</text>
653
- <text x="300" y="232" class="x-label-ar">جي بي تي</text>
654
- <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
655
- <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
656
- <text x="460" y="232" class="x-label-ar">كلود</text>
657
- <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
658
- <text x="620" y="220" class="x-label-version">Google</text>
659
- <text x="620" y="232" class="x-label-ar">جيميناي</text>
660
- </svg>
661
- <div class="chart-footer"></div>
662
- </div>
663
-
664
- <div class="rank-strip rv">
665
- <div class="rank-item"><span class="rank-num n1">🥇 1st</span><div class="rank-dot" style="background:var(--z)"></div>Z AI — 98</div>
666
- <div class="rank-item"><span class="rank-num n2">🥈 2nd</span><div class="rank-dot" style="background:var(--claude)"></div>Claude 4.6 — 80</div>
667
- <div class="rank-item"><span class="rank-num n3">🥉 3rd</span><div class="rank-dot" style="background:var(--gemini)"></div>Gemini 3 Pro — 60</div>
668
- <div class="rank-item"><span class="rank-num n4">4th</span><div class="rank-dot" style="background:var(--gpt)"></div>GPT-5.5 — 50</div>
669
- </div>
670
-
671
- <!-- DOWNLOAD -->
672
- <div class="dl-sec rv">
673
- <div class="divider" style="margin-bottom:34px"></div>
674
- <a href="https://huggingface.co/spaces/THEZYZSTUDIO/Downl/resolve/main/base.apk"
675
- download="Z-AI-Agent.apk" class="btn-dl">
676
- <span style="font-size:22px">📱</span>
677
- تنزيل APK
678
- </a><br>
679
- <div class="sz">حجم الملف: <span>13.4 MB</span> &nbsp;·&nbsp; Android 8.0+</div>
680
- </div>
681
-
682
- </div>
683
-
684
- <footer>
685
- <p>© 2025 The ZYZ Studio · THE Z AI/AGENT BETA V1.2 Y25 · All Rights Reserved</p>
686
- </footer>
687
-
688
- <script>
689
- // particles
690
- const pts=document.getElementById('pts');
691
- for(let i=0;i<22;i++){
692
- const p=document.createElement('div');p.className='pt';
693
- const s=Math.random()*3.5+1.5;
694
- p.style.cssText=`width:${s}px;height:${s}px;left:${Math.random()*100}%;animation-duration:${Math.random()*16+10}s;animation-delay:${Math.random()*12}s`;
695
- pts.appendChild(p);
696
- }
697
- // reveal on scroll
698
- const obs=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('on')}),{threshold:.1});
699
- document.querySelectorAll('.rv').forEach((el,i)=>{
700
- el.style.transitionDelay=(i*.04)+'s';
701
- obs.observe(el);
702
- });
703
- </script>
704
- </body>
705
- </html>