Hugging Face's logo

Spaces:
THEZYZSTUDIO
/
Downl
Sleeping

App Files Community
2
Downl / index.html
THEZYZSTUDIO's picture
THEZYZSTUDIO
Update index.html
b7663ec verified
Raw
History Blame Contribute Delete
34.5 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE Z AI/AGENT โ€” Benchmark Comparison</title>
<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">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
 --z:#00d4ff;
 --zd:#1e6fd9;
 --bg:#060e1f;
 --card:rgba(10,25,55,0.80);
 --border:rgba(59,158,255,0.18);
 --text:#a8d8ff;
 --white:#e8f4ff;
 --gpt:#5eead4;
 --claude:#fb923c;
 --gemini:#c084fc;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:'Cairo',sans-serif;overflow-x:hidden}
/* โ”€โ”€ ANIMATED BG โ”€โ”€ */
.bg{position:fixed;inset:0;z-index:0;
 background:
 radial-gradient(ellipse at 15% 10%,rgba(30,111,217,.22) 0%,transparent 50%),
 radial-gradient(ellipse at 85% 90%,rgba(0,212,255,.12) 0%,transparent 50%),
 radial-gradient(ellipse at 50% 50%,rgba(6,14,31,1) 0%,#060e1f 100%)}
.grid-bg{
 position:fixed;inset:0;z-index:0;
 background-image:
 linear-gradient(rgba(59,158,255,.04) 1px,transparent 1px),
 linear-gradient(90deg,rgba(59,158,255,.04) 1px,transparent 1px);
 background-size:60px 60px;
 animation:gridmove 20s linear infinite;
}
@keyframes gridmove{0%{background-position:0 0}100%{background-position:60px 60px}}
.pts{position:fixed;inset:0;z-index:0;overflow:hidden}
.pt{position:absolute;border-radius:50%;background:#3b9eff;animation:fup linear infinite;opacity:0}
@keyframes fup{0%{transform:translateY(110vh);opacity:0}10%{opacity:.4}90%{opacity:.15}100%{transform:translateY(-10vh);opacity:0}}
/* โ”€โ”€ SCANLINE โ”€โ”€ */
.scanline{position:fixed;inset:0;z-index:1;pointer-events:none;
 background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
}
/* โ”€โ”€ WRAP โ”€โ”€ */
.wrap{position:relative;z-index:10;max-width:920px;margin:0 auto;padding:0 20px 100px}
/* โ”€โ”€ HERO โ”€โ”€ */
header{text-align:center;padding:70px 10px 40px;position:relative}
.hero-ring{
 position:absolute;top:50px;left:50%;transform:translateX(-50%);
 width:320px;height:320px;border-radius:50%;
 border:1px solid rgba(0,212,255,.08);
 animation:spin 30s linear infinite;
 pointer-events:none;
}
.hero-ring::before{
 content:'';position:absolute;top:-3px;left:50%;
 width:6px;height:6px;border-radius:50%;background:#00d4ff;
 box-shadow:0 0 12px rgba(0,212,255,.9);
 transform:translateX(-50%);
}
@keyframes spin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
.lz{
 font-family:'Orbitron',monospace;font-size:clamp(110px,22vw,165px);font-weight:900;line-height:1;
 background:linear-gradient(135deg,#7dd3fc 0%,#1e6fd9 35%,#00d4ff 70%,#7dd3fc 100%);
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
 filter:drop-shadow(0 0 40px rgba(59,158,255,.95)) drop-shadow(0 0 80px rgba(0,212,255,.55));
 animation:pz 3s ease-in-out infinite;display:block;margin-bottom:4px;
 position:relative;z-index:2;
}
@keyframes pz{
 0%,100%{filter:drop-shadow(0 0 40px rgba(59,158,255,.95)) drop-shadow(0 0 80px rgba(0,212,255,.55))}
 50%{filter:drop-shadow(0 0 65px rgba(59,158,255,1)) drop-shadow(0 0 130px rgba(0,212,255,.8))}
}
.ht{font-family:'Orbitron',monospace;font-size:clamp(18px,4.5vw,30px);font-weight:900;letter-spacing:5px;
 color:#5bb8ff;text-shadow:0 0 25px rgba(91,184,255,.7);margin-bottom:6px;text-transform:uppercase}
.hs{font-family:'Orbitron',monospace;font-size:clamp(8px,1.6vw,10px);color:#00d4ff;
 letter-spacing:6px;text-transform:uppercase;opacity:.6;margin-bottom:16px}
.divider{width:200px;height:1px;background:linear-gradient(90deg,transparent,#00d4ff,#3b9eff,transparent);
 margin:0 auto 16px;background-size:200%;animation:sh 2.5s linear infinite}
@keyframes sh{0%{background-position:-200% center}100%{background-position:200% center}}
.stud{font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;color:var(--text);
 opacity:.4;text-transform:uppercase;margin-bottom:6px}
.hero-sub{font-size:13px;color:var(--text);opacity:.5;letter-spacing:1px;margin-top:8px}
/* โ”€โ”€ LEGEND BAR โ”€โ”€ */
.legend{
 display:flex;gap:clamp(14px,3.5vw,32px);justify-content:center;flex-wrap:wrap;
 margin:32px 0 10px;
 background:var(--card);border:1px solid var(--border);
 border-radius:50px;padding:14px 28px;
 backdrop-filter:blur(10px);
 max-width:700px;margin-left:auto;margin-right:auto;
}
.leg-item{display:flex;align-items:center;gap:8px;font-size:10px;
 font-family:'Orbitron',monospace;letter-spacing:1.5px;color:var(--text);text-transform:uppercase}
.leg-dot{width:10px;height:10px;border-radius:3px}
.leg-dot.z{background:var(--z);box-shadow:0 0 8px rgba(0,212,255,.8)}
.leg-dot.gpt{background:var(--gpt);box-shadow:0 0 8px rgba(94,234,212,.6)}
.leg-dot.claude{background:var(--claude);box-shadow:0 0 8px rgba(251,146,60,.5)}
.leg-dot.gemini{background:var(--gemini);box-shadow:0 0 8px rgba(192,132,252,.5)}
/* โ”€โ”€ SECTION TITLE โ”€โ”€ */
.sec{text-align:center;margin:56px 0 6px}
.sec-num{
 font-family:'Orbitron',monospace;font-size:11px;letter-spacing:4px;
 color:rgba(0,212,255,.4);text-transform:uppercase;margin-bottom:6px
}
.sec-en{
 font-family:'Orbitron',monospace;font-size:clamp(14px,2.8vw,20px);
 font-weight:700;letter-spacing:3px;color:#5bb8ff;text-transform:uppercase
}
.sec-ar{font-size:clamp(13px,2.4vw,16px);font-weight:600;color:var(--text);margin-top:5px;opacity:.7}
.sec-line{
 width:120px;height:1px;
 background:linear-gradient(90deg,transparent,#00d4ff,transparent);
 margin:14px auto 38px
}
/* โ”€โ”€ LINE CHART โ”€โ”€ */
.chart-outer{
 position:relative;
 background:var(--card);
 border:1px solid var(--border);
 border-radius:24px;
 padding:28px 28px 0;
 overflow:hidden;
 backdrop-filter:blur(8px);
 margin-bottom:14px;
}
.chart-outer::before{
 content:'';position:absolute;inset:0;
 background:radial-gradient(ellipse at 50% 0%,rgba(59,158,255,.06) 0%,transparent 60%);
 pointer-events:none;
}
.winner-tag{
 position:absolute;top:14px;left:18px;
 font-family:'Orbitron',monospace;font-size:9px;font-weight:700;letter-spacing:2px;
 padding:5px 14px;border-radius:30px;text-transform:uppercase;
 color:#060e1f;
}
.winner-tag.z-win{background:linear-gradient(90deg,#1e6fd9,#00d4ff);box-shadow:0 0 14px rgba(0,212,255,.4)}
.winner-tag.gpt-win{background:linear-gradient(90deg,#0d9488,#5eead4);box-shadow:0 0 14px rgba(94,234,212,.4)}
.winner-tag.claude-win{background:linear-gradient(90deg,#ea580c,#fb923c);box-shadow:0 0 14px rgba(251,146,60,.4)}
.winner-tag.gemini-win{background:linear-gradient(90deg,#7c3aed,#c084fc);box-shadow:0 0 14px rgba(192,132,252,.4)}
/* SVG line chart */
.line-chart-wrap{width:100%;overflow:visible}
.chart-svg{width:100%;display:block;overflow:visible}
/* Y-axis grid lines */
.y-grid{stroke:rgba(59,158,255,.08);stroke-width:1}
.y-label{font-family:'Orbitron',monospace;font-size:9px;fill:rgba(168,216,255,.3);text-anchor:end}
/* model lines */
.line-z{stroke:var(--z);stroke-width:3;fill:none;filter:drop-shadow(0 0 6px rgba(0,212,255,.7))}
.line-gpt{stroke:var(--gpt);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 5px rgba(94,234,212,.5))}
.line-claude{stroke:var(--claude);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 5px rgba(251,146,60,.4))}
.line-gemini{stroke:var(--gemini);stroke-width:2.5;fill:none;filter:drop-shadow(0 0 5px rgba(192,132,252,.4))}
/* dots */
.dot-z{fill:var(--z);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 5px rgba(0,212,255,.9))}
.dot-gpt{fill:var(--gpt);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 4px rgba(94,234,212,.7))}
.dot-claude{fill:var(--claude);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 4px rgba(251,146,60,.6))}
.dot-gemini{fill:var(--gemini);stroke:#060e1f;stroke-width:2;filter:drop-shadow(0 0 4px rgba(192,132,252,.6))}
/* score labels on dots */
.score-z{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--z);text-anchor:middle}
.score-gpt{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--gpt);text-anchor:middle}
.score-claude{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--claude);text-anchor:middle}
.score-gemini{font-family:'Orbitron',monospace;font-size:10px;font-weight:700;fill:var(--gemini);text-anchor:middle}
/* X-axis model names */
.x-label-en{font-family:'Orbitron',monospace;font-size:8px;fill:var(--text);text-anchor:middle;letter-spacing:.5px;text-transform:uppercase}
.x-label-ar{font-family:'Cairo',sans-serif;font-size:9px;fill:rgba(168,216,255,.5);text-anchor:middle}
.x-label-version{font-family:'Orbitron',monospace;font-size:7px;fill:rgba(168,216,255,.3);text-anchor:middle}
/* chart bottom spacer */
.chart-footer{height:14px}
/* โ”€โ”€ RANK STRIP โ”€โ”€ */
.rank-strip{
 display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
 margin-bottom:50px;margin-top:2px;
}
.rank-item{
 display:flex;align-items:center;gap:7px;
 background:rgba(10,25,55,.6);border:1px solid var(--border);
 border-radius:30px;padding:6px 14px;
 font-family:'Orbitron',monospace;font-size:9px;letter-spacing:1px;
 color:var(--text);text-transform:uppercase;
}
.rank-num{font-size:11px;font-weight:700}
.rank-num.n1{color:gold}
.rank-num.n2{color:#aaa}
.rank-num.n3{color:#cd7f32}
.rank-num.n4{color:rgba(168,216,255,.4)}
.rank-dot{width:8px;height:8px;border-radius:2px}
/* โ”€โ”€ DOWNLOAD โ”€โ”€ */
.dl-sec{text-align:center;padding:50px 20px 30px;position:relative}
.dl-sec::before{content:'';position:absolute;inset:0;
 background:radial-gradient(ellipse at center,rgba(30,111,217,.12) 0%,transparent 70%);
 border-radius:24px;pointer-events:none}
.btn-dl{
 display:inline-flex;align-items:center;gap:12px;padding:18px 52px;
 background:linear-gradient(135deg,#1e6fd9 0%,#00d4ff 100%);
 color:#060e1f;font-family:'Orbitron',monospace;font-weight:900;
 font-size:15px;letter-spacing:3px;text-transform:uppercase;
 text-decoration:none;border-radius:50px;position:relative;overflow:hidden;
 transition:transform .3s,box-shadow .3s;
 box-shadow:0 0 35px rgba(0,212,255,.6),0 8px 30px rgba(30,111,217,.4);
 margin-bottom:16px;
}
.btn-dl::before{content:'';position:absolute;top:-50%;left:-60%;width:35%;height:200%;
 background:rgba(255,255,255,.28);transform:skewX(-20deg);transition:left .5s}
.btn-dl:hover::before{left:130%}
.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)}
.btn-dl:active{transform:scale(.97)}
.sz{font-family:'Orbitron',monospace;font-size:12px;letter-spacing:2px;color:#5bb8ff;
 opacity:.6;text-transform:uppercase}
.sz span{color:#00d4ff;opacity:1;font-weight:700}
/* โ”€โ”€ FOOTER โ”€โ”€ */
footer{text-align:center;padding:28px;border-top:1px solid rgba(59,158,255,.08);margin-top:20px}
footer p{font-family:'Orbitron',monospace;font-size:10px;letter-spacing:2.5px;
 color:rgba(59,158,255,.2);text-transform:uppercase}
/* โ”€โ”€ REVEAL โ”€โ”€ */
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s,transform .7s}
.rv.on{opacity:1;transform:translateY(0)}
/* โ”€โ”€ GLOW SEPARATOR โ”€โ”€ */
.glow-sep{
 width:100%;height:1px;margin:48px 0;
 background:linear-gradient(90deg,transparent,rgba(0,212,255,.15),transparent);
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="grid-bg"></div>
<div class="scanline"></div>
<div class="pts" id="pts"></div>
<div class="wrap">
<!-- HERO -->
 <header>
 <div class="hero-ring"></div>
 <span class="lz">Z</span>
 <div class="ht">THE Z AI / AGENT</div>
 <div class="hs">BETA V1.2 Y25 &nbsp;ยท&nbsp; SWARM / EDITOR / DESIGNER / BUILDER / CREATOR</div>
 <div class="divider"></div>
 <div class="stud">BY THE ZYZ STUDIO</div>
 <div class="hero-sub">AI Benchmark Comparison ยท ู…ู‚ุงุฑู†ุฉ ุฃุฏุงุก ุงู„ุฐูƒุงุก ุงู„ุงุตุทู†ุงุนูŠ</div>
 </header>
<!-- LEGEND -->
 <div class="legend rv">
 <div class="leg-item"><div class="leg-dot z"></div>Z AI/Agent Beta V1.2</div>
 <div class="leg-item"><div class="leg-dot gpt"></div>GPT-5.5</div>
 <div class="leg-item"><div class="leg-dot claude"></div>Claude Sonnet 4.6</div>
 <div class="leg-item"><div class="leg-dot gemini"></div>Gemini 3 Pro</div>
 </div>
<!-- ============================
 โ‘  SPEED
 ============================ -->
 <div class="sec rv">
 <div class="sec-num">BENCHMARK 01</div>
 <div class="sec-en">โ‘  Response Speed</div>
 <div class="sec-ar">ุงู„ุณุฑุนุฉ ููŠ ุงู„ุงุณุชุฌุงุจุฉ</div>
 </div>
 <div class="sec-line rv"></div>
<div class="chart-outer rv">
 <div class="winner-tag z-win">๐Ÿ† Z AI FASTEST</div>
 <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
 <!-- grid lines -->
 <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
 <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
 <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
 <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
 <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
 <!-- Y labels (100โ†’0 mapped to y=20โ†’180) -->
 <text x="52" y="24" class="y-label">100</text>
 <text x="52" y="64" class="y-label">80</text>
 <text x="52" y="104" class="y-label">60</text>
 <text x="52" y="144" class="y-label">40</text>
 <text x="52" y="184" class="y-label">20</text>
<!-- X positions: 140, 300, 460, 620 -->
<!-- Lines (scoreโ†’y: 98=24, 80=52, 74=65, 64=82, 60=92, 50=110) -->
 <!-- Speed: Z=98, GPT=74, Claude=60, Gemini=60 -->
 <!-- Z line -->
 <polyline class="line-z" points="140,24 300,65 460,92 620,92"/>
 <!-- GPT line -->
 <polyline class="line-gpt" points="140,65 300,24 460,92 620,92"/>
 <!-- Claude line (starts at rank 4 but in order Z,GPT,Claude,Gemini on x-axis) -->
 <!-- Wait โ€” x-axis is models, y is score. Each model has ONE point per chart. -->
 <!-- This is a SINGLE-category chart so line chart = connect model positions. -->
 <!-- Re-interpret as vertical bars shown as dots on a line per model -->
 <!-- Actually draw as column lines from x-axis up to the score dot -->
<!-- Vertical stems from baseline (y=195) up to dot -->
 <!-- Z=98 โ†’ y=24 -->
 <line x1="140" y1="195" x2="140" y2="24" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="300" y1="195" x2="300" y2="65" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="460" y1="195" x2="460" y2="92" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="620" y1="195" x2="620" y2="92" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
<!-- Connecting line through all 4 dots -->
 <polyline points="140,24 300,65 460,92 620,92"
 stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
<!-- Area fill under Z line (symbolic glow) -->
 <defs>
 <linearGradient id="gz1" x1="0" y1="0" x2="0" y2="1">
 <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.12"/>
 <stop offset="100%" stop-color="#00d4ff" stop-opacity="0"/>
 </linearGradient>
 </defs>
<!-- Z dot + score -->
 <circle cx="140" cy="24" r="7" class="dot-z"/>
 <text x="140" y="14" class="score-z">98</text>
<!-- GPT dot + score -->
 <circle cx="300" cy="65" r="6" class="dot-gpt"/>
 <text x="300" y="55" class="score-gpt">74</text>
<!-- Claude dot + score -->
 <circle cx="460" cy="92" r="6" class="dot-claude"/>
 <text x="460" y="82" class="score-claude">60</text>
<!-- Gemini dot + score -->
 <circle cx="620" cy="92" r="6" class="dot-gemini"/>
 <text x="620" y="82" class="score-gemini">60</text>
<!-- Baseline -->
 <line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
<!-- X labels -->
 <text x="140" y="208" class="x-label-en">Z AI/Agent</text>
 <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
 <text x="140" y="232" class="x-label-ar">ุฒุฏ ู„ู„ุฐูƒุงุก</text>
<text x="300" y="208" class="x-label-en">GPT-5.5</text>
 <text x="300" y="220" class="x-label-version">OpenAI</text>
 <text x="300" y="232" class="x-label-ar">ุฌูŠ ุจูŠ ุชูŠ</text>
<text x="460" y="208" class="x-label-en">Claude Sonnet</text>
 <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
 <text x="460" y="232" class="x-label-ar">ูƒู„ูˆุฏ</text>
<text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
 <text x="620" y="220" class="x-label-version">Google</text>
 <text x="620" y="232" class="x-label-ar">ุฌูŠู…ูŠู†ุงูŠ</text>
 </svg>
 <div class="chart-footer"></div>
 </div>
<!-- Rank strip -->
 <div class="rank-strip rv">
 <div class="rank-item"><span class="rank-num n1">๐Ÿฅ‡ 1st</span><div class="rank-dot" style="background:var(--z)"></div>Z AI โ€” 98</div>
 <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>
 <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>
 <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>
 </div>
<div class="glow-sep rv"></div>
<!-- ============================
 โ‘ก ACCURACY
 ============================ -->
 <div class="sec rv">
 <div class="sec-num">BENCHMARK 02</div>
 <div class="sec-en">โ‘ก Accuracy</div>
 <div class="sec-ar">ุงู„ุฏู‚ุฉ ููŠ ุงู„ุฅุฌุงุจุฉ</div>
 </div>
 <div class="sec-line rv"></div>
<div class="chart-outer rv">
 <div class="winner-tag claude-win">๐Ÿ† CLAUDE LEADS</div>
 <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
 <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
 <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
 <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
 <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
 <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
 <text x="52" y="24" class="y-label">100</text>
 <text x="52" y="64" class="y-label">80</text>
 <text x="52" y="104" class="y-label">60</text>
 <text x="52" y="144" class="y-label">40</text>
 <text x="52" y="184" class="y-label">20</text>
<!-- Accuracy: Claude=98, GPT=80, Gemini=80, Z=64 -->
 <!-- y-values: 98โ†’24, 80โ†’52, 64โ†’82 -->
 <line x1="140" y1="195" x2="140" y2="82" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="300" y1="195" x2="300" y2="52" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="460" y1="195" x2="460" y2="24" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="620" y1="195" x2="620" y2="52" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
<polyline points="140,82 300,52 460,24 620,52"
 stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
<circle cx="140" cy="82" r="7" class="dot-z"/>
 <text x="140" y="72" class="score-z">64</text>
<circle cx="300" cy="52" r="6" class="dot-gpt"/>
 <text x="300" y="42" class="score-gpt">80</text>
<circle cx="460" cy="24" r="6" class="dot-claude"/>
 <text x="460" y="14" class="score-claude">98</text>
<circle cx="620" cy="52" r="6" class="dot-gemini"/>
 <text x="620" y="42" class="score-gemini">80</text>
<line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
<text x="140" y="208" class="x-label-en">Z AI/Agent</text>
 <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
 <text x="140" y="232" class="x-label-ar">ุฒุฏ ู„ู„ุฐูƒุงุก</text>
 <text x="300" y="208" class="x-label-en">GPT-5.5</text>
 <text x="300" y="220" class="x-label-version">OpenAI</text>
 <text x="300" y="232" class="x-label-ar">ุฌูŠ ุจูŠ ุชูŠ</text>
 <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
 <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
 <text x="460" y="232" class="x-label-ar">ูƒู„ูˆุฏ</text>
 <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
 <text x="620" y="220" class="x-label-version">Google</text>
 <text x="620" y="232" class="x-label-ar">ุฌูŠู…ูŠู†ุงูŠ</text>
 </svg>
 <div class="chart-footer"></div>
 </div>
<div class="rank-strip rv">
 <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>
 <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>
 <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>
 <div class="rank-item"><span class="rank-num n3">๐Ÿฅ‰ 3rd</span><div class="rank-dot" style="background:var(--z)"></div>Z AI โ€” 64</div>
 </div>
<div class="glow-sep rv"></div>
<!-- ============================
 โ‘ข DEEP & LONG THINKING
 ============================ -->
 <div class="sec rv">
 <div class="sec-num">BENCHMARK 03</div>
 <div class="sec-en">โ‘ข Deep &amp; Long Thinking</div>
 <div class="sec-ar">ุงู„ุชููƒูŠุฑ ุงู„ุนู…ูŠู‚ ูˆุงู„ู…ุนู…ู‚</div>
 </div>
 <div class="sec-line rv"></div>
<div class="chart-outer rv">
 <div class="winner-tag z-win">๐Ÿ† Z AI LEADS</div>
 <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
 <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
 <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
 <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
 <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
 <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
 <text x="52" y="24" class="y-label">100</text>
 <text x="52" y="64" class="y-label">80</text>
 <text x="52" y="104" class="y-label">60</text>
 <text x="52" y="144" class="y-label">40</text>
 <text x="52" y="184" class="y-label">20</text>
<!-- Deep Thinking: Z=98, Gemini=80, GPT=60, Claude=50 -->
 <!-- y: 98โ†’24, 80โ†’52, 60โ†’92, 50โ†’110 -->
 <line x1="140" y1="195" x2="140" y2="24" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="300" y1="195" x2="300" y2="92" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="460" y1="195" x2="460" y2="110" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="620" y1="195" x2="620" y2="52" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
<polyline points="140,24 300,92 460,110 620,52"
 stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
<circle cx="140" cy="24" r="7" class="dot-z"/>
 <text x="140" y="14" class="score-z">98</text>
<circle cx="300" cy="92" r="6" class="dot-gpt"/>
 <text x="300" y="82" class="score-gpt">60</text>
<circle cx="460" cy="110" r="6" class="dot-claude"/>
 <text x="460" y="100" class="score-claude">50</text>
<circle cx="620" cy="52" r="6" class="dot-gemini"/>
 <text x="620" y="42" class="score-gemini">80</text>
<line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
<text x="140" y="208" class="x-label-en">Z AI/Agent</text>
 <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
 <text x="140" y="232" class="x-label-ar">ุฒุฏ ู„ู„ุฐูƒุงุก</text>
 <text x="300" y="208" class="x-label-en">GPT-5.5</text>
 <text x="300" y="220" class="x-label-version">OpenAI</text>
 <text x="300" y="232" class="x-label-ar">ุฌูŠ ุจูŠ ุชูŠ</text>
 <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
 <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
 <text x="460" y="232" class="x-label-ar">ูƒู„ูˆุฏ</text>
 <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
 <text x="620" y="220" class="x-label-version">Google</text>
 <text x="620" y="232" class="x-label-ar">ุฌูŠู…ูŠู†ุงูŠ</text>
 </svg>
 <div class="chart-footer"></div>
 </div>
<div class="rank-strip rv">
 <div class="rank-item"><span class="rank-num n1">๐Ÿฅ‡ 1st</span><div class="rank-dot" style="background:var(--z)"></div>Z AI โ€” 98</div>
 <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>
 <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>
 <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>
 </div>
<div class="glow-sep rv"></div>
<!-- ============================
 โ‘ฃ DEEP RESEARCH
 ============================ -->
 <div class="sec rv">
 <div class="sec-num">BENCHMARK 04</div>
 <div class="sec-en">โ‘ฃ Deep Research</div>
 <div class="sec-ar">ุงู„ุจุญุซ ุงู„ุนู…ูŠู‚ ูˆุงู„ุดุงู…ู„</div>
 </div>
 <div class="sec-line rv"></div>
<div class="chart-outer rv">
 <div class="winner-tag gpt-win">๐Ÿ† GPT-5.5 LEADS</div>
 <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
 <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
 <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
 <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
 <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
 <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
 <text x="52" y="24" class="y-label">100</text>
 <text x="52" y="64" class="y-label">80</text>
 <text x="52" y="104" class="y-label">60</text>
 <text x="52" y="144" class="y-label">40</text>
 <text x="52" y="184" class="y-label">20</text>
<!-- Deep Research: GPT=98, Z=80, Claude=60, Gemini=50 -->
 <!-- y: 98โ†’24, 80โ†’52, 60โ†’92, 50โ†’110 -->
 <line x1="140" y1="195" x2="140" y2="52" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="300" y1="195" x2="300" y2="24" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="460" y1="195" x2="460" y2="92" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="620" y1="195" x2="620" y2="110" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
<polyline points="140,52 300,24 460,92 620,110"
 stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
<circle cx="140" cy="52" r="7" class="dot-z"/>
 <text x="140" y="42" class="score-z">80</text>
<circle cx="300" cy="24" r="6" class="dot-gpt"/>
 <text x="300" y="14" class="score-gpt">98</text>
<circle cx="460" cy="92" r="6" class="dot-claude"/>
 <text x="460" y="82" class="score-claude">60</text>
<circle cx="620" cy="110" r="6" class="dot-gemini"/>
 <text x="620" y="100" class="score-gemini">50</text>
<line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
<text x="140" y="208" class="x-label-en">Z AI/Agent</text>
 <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
 <text x="140" y="232" class="x-label-ar">ุฒุฏ ู„ู„ุฐูƒุงุก</text>
 <text x="300" y="208" class="x-label-en">GPT-5.5</text>
 <text x="300" y="220" class="x-label-version">OpenAI</text>
 <text x="300" y="232" class="x-label-ar">ุฌูŠ ุจูŠ ุชูŠ</text>
 <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
 <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
 <text x="460" y="232" class="x-label-ar">ูƒู„ูˆุฏ</text>
 <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
 <text x="620" y="220" class="x-label-version">Google</text>
 <text x="620" y="232" class="x-label-ar">ุฌูŠู…ูŠู†ุงูŠ</text>
 </svg>
 <div class="chart-footer"></div>
 </div>
<div class="rank-strip rv">
 <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>
 <div class="rank-item"><span class="rank-num n2">๐Ÿฅˆ 2nd</span><div class="rank-dot" style="background:var(--z)"></div>Z AI โ€” 80</div>
 <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>
 <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>
 </div>
<div class="glow-sep rv"></div>
<!-- ============================
 โ‘ค ANSWER QUALITY
 ============================ -->
 <div class="sec rv">
 <div class="sec-num">BENCHMARK 05</div>
 <div class="sec-en">โ‘ค Answer Quality &amp; Structure</div>
 <div class="sec-ar">ุฌูˆุฏุฉ ุงู„ุฅุฌุงุจุฉ ูˆุชุฑุชูŠุจู‡ุง</div>
 </div>
 <div class="sec-line rv"></div>
<div class="chart-outer rv">
 <div class="winner-tag z-win">๐Ÿ† Z AI LEADS</div>
 <svg class="chart-svg" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet">
 <line x1="60" y1="20" x2="730" y2="20" class="y-grid"/>
 <line x1="60" y1="60" x2="730" y2="60" class="y-grid"/>
 <line x1="60" y1="100" x2="730" y2="100" class="y-grid"/>
 <line x1="60" y1="140" x2="730" y2="140" class="y-grid"/>
 <line x1="60" y1="180" x2="730" y2="180" class="y-grid"/>
 <text x="52" y="24" class="y-label">100</text>
 <text x="52" y="64" class="y-label">80</text>
 <text x="52" y="104" class="y-label">60</text>
 <text x="52" y="144" class="y-label">40</text>
 <text x="52" y="184" class="y-label">20</text>
<!-- Answer Quality: Z=98, Claude=80, Gemini=60, GPT=50 -->
 <!-- y: 98โ†’24, 80โ†’52, 60โ†’92, 50โ†’110 -->
 <line x1="140" y1="195" x2="140" y2="24" stroke="rgba(0,212,255,.15)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="300" y1="195" x2="300" y2="110" stroke="rgba(94,234,212,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="460" y1="195" x2="460" y2="52" stroke="rgba(251,146,60,.12)" stroke-width="1" stroke-dasharray="3,4"/>
 <line x1="620" y1="195" x2="620" y2="92" stroke="rgba(192,132,252,.12)" stroke-width="1" stroke-dasharray="3,4"/>
<polyline points="140,24 300,110 460,52 620,92"
 stroke="rgba(255,255,255,.06)" stroke-width="1" fill="none"/>
<circle cx="140" cy="24" r="7" class="dot-z"/>
 <text x="140" y="14" class="score-z">98</text>
<circle cx="300" cy="110" r="6" class="dot-gpt"/>
 <text x="300" y="100" class="score-gpt">50</text>
<circle cx="460" cy="52" r="6" class="dot-claude"/>
 <text x="460" y="42" class="score-claude">80</text>
<circle cx="620" cy="92" r="6" class="dot-gemini"/>
 <text x="620" y="82" class="score-gemini">60</text>
<line x1="60" y1="195" x2="730" y2="195" stroke="rgba(59,158,255,.2)" stroke-width="1.5"/>
<text x="140" y="208" class="x-label-en">Z AI/Agent</text>
 <text x="140" y="220" class="x-label-version">Beta V1.2 Y25</text>
 <text x="140" y="232" class="x-label-ar">ุฒุฏ ู„ู„ุฐูƒุงุก</text>
 <text x="300" y="208" class="x-label-en">GPT-5.5</text>
 <text x="300" y="220" class="x-label-version">OpenAI</text>
 <text x="300" y="232" class="x-label-ar">ุฌูŠ ุจูŠ ุชูŠ</text>
 <text x="460" y="208" class="x-label-en">Claude Sonnet</text>
 <text x="460" y="220" class="x-label-version">Anthropic 4.6</text>
 <text x="460" y="232" class="x-label-ar">ูƒู„ูˆุฏ</text>
 <text x="620" y="208" class="x-label-en">Gemini 3 Pro</text>
 <text x="620" y="220" class="x-label-version">Google</text>
 <text x="620" y="232" class="x-label-ar">ุฌูŠู…ูŠู†ุงูŠ</text>
 </svg>
 <div class="chart-footer"></div>
 </div>
<div class="rank-strip rv">
 <div class="rank-item"><span class="rank-num n1">๐Ÿฅ‡ 1st</span><div class="rank-dot" style="background:var(--z)"></div>Z AI โ€” 98</div>
 <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>
 <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>
 <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>
 </div>
<!-- DOWNLOAD -->
 <div class="dl-sec rv">
 <div class="divider" style="margin-bottom:34px"></div>
 <a href="https://huggingface.co/spaces/THEZYZSTUDIO/Downl/resolve/main/base.apk"
 download="Z-AI-Agent.apk" class="btn-dl">
 <span style="font-size:22px">๐Ÿ“ฑ</span>
 ุชู†ุฒูŠู„ APK
 </a><br>
 <div class="sz">ุญุฌู… ุงู„ู…ู„ู: <span>13.4 MB</span> &nbsp;ยท&nbsp; Android 8.0+</div>
 </div>
</div>
<footer>
 <p>ยฉ 2025 The ZYZ Studio ยท THE Z AI/AGENT BETA V1.2 Y25 ยท All Rights Reserved</p>
</footer>
<script>
// particles
const pts=document.getElementById('pts');
for(let i=0;i<22;i++){
 const p=document.createElement('div');p.className='pt';
 const s=Math.random()*3.5+1.5;
 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`;
 pts.appendChild(p);
}
// reveal on scroll
const obs=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('on')}),{threshold:.1});
document.querySelectorAll('.rv').forEach((el,i)=>{
 el.style.transitionDelay=(i*.04)+'s';
 obs.observe(el);
});
</script>
</body>
</html>