Spaces:
Running
Running
Update index.html
Browse files- index.html +149 -149
index.html
CHANGED
|
@@ -1,9 +1,9 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html lang="
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>StealthMark —
|
| 7 |
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
:root{--mint:#7fffdb;--purple:#c084fc;--red:#ff6b6b;--orange:#ffaa66;--yellow:#ffe066;--blue:#60a5fa;--pink:#f472b6;--bg:#0a0e1a;--card:#111827;--card2:#1a1f35;--border:#1e293b}
|
|
@@ -58,7 +58,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 58 |
<nav><div class="ni">
|
| 59 |
<div class="logo"><div class="li">🔒</div><div style="font-weight:800;font-size:16px;letter-spacing:-.5px"><span style="color:var(--mint)">Stealth</span><span style="color:#fff">Mark</span><span style="color:#475569;font-size:11px;margin-left:6px">Platform</span></div></div>
|
| 60 |
<div id="tabs" style="display:flex;gap:4px">
|
| 61 |
-
<button class="tb a" data-t="hero">⚡
|
| 62 |
</div></div></nav>
|
| 63 |
<main>
|
| 64 |
|
|
@@ -67,103 +67,103 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 67 |
<div style="padding:80px 0 40px;text-align:center;position:relative">
|
| 68 |
<div style="position:absolute;top:20px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.04),rgba(192,132,252,.02) 40%,transparent 70%);pointer-events:none"></div>
|
| 69 |
<div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:16px">TEXT · IMAGE · VIDEO — FULL SPECTRUM PROTECTION</div>
|
| 70 |
-
<h1 style="font-size:clamp(32px,6vw,52px);font-weight:900;line-height:1.15;margin-bottom:20px;letter-spacing:-2px"><span style="color:#fff"
|
| 71 |
<p class="story" style="max-width:720px;margin:0 auto 28px;font-size:17px">
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
<span style="color:var(--purple);font-weight:700"
|
| 75 |
</p>
|
| 76 |
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:48px">
|
| 77 |
-
<span style="padding:7px 18px;border-radius:20px;background:rgba(127,255,219,.08);border:1px solid rgba(127,255,219,.2);color:var(--mint);font-size:12px;font-weight:700">📝
|
| 78 |
-
<span style="padding:7px 18px;border-radius:20px;background:rgba(244,114,182,.08);border:1px solid rgba(244,114,182,.2);color:var(--pink);font-size:12px;font-weight:700">🖼️
|
| 79 |
-
<span style="padding:7px 18px;border-radius:20px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);color:var(--blue);font-size:12px;font-weight:700">🎬
|
| 80 |
-
<span style="padding:7px 18px;border-radius:20px;background:rgba(255,170,102,.08);border:1px solid rgba(255,170,102,.2);color:var(--orange);font-size:12px;font-weight:700">🛡️ Day 0
|
| 81 |
</div>
|
| 82 |
<div id="metrics" style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px"></div>
|
| 83 |
</div>
|
| 84 |
|
| 85 |
-
<!-- ★ THREE PILLARS — 3
|
| 86 |
<div style="padding:40px 0 50px">
|
| 87 |
<div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--mint);font-weight:700;letter-spacing:3px">THREE PILLARS OF PROTECTION</span></div>
|
| 88 |
-
<h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#fff"
|
| 89 |
-
<p style="text-align:center;color:#94a3b8;font-size:14px;margin-bottom:36px"
|
| 90 |
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto">
|
| 91 |
|
| 92 |
<!-- Pillar 1: TEXT -->
|
| 93 |
<div class="cd fi" style="border-color:rgba(127,255,219,.25);background:linear-gradient(160deg,rgba(127,255,219,.05),var(--card) 40%);position:relative;overflow:hidden">
|
| 94 |
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.06),transparent);pointer-events:none"></div>
|
| 95 |
-
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">📝</div><div style="color:var(--mint);font-weight:800;font-size:18px"
|
| 96 |
<div style="padding:14px;border-radius:10px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
|
| 97 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 98 |
-
<span style="color:var(--mint)"
|
| 99 |
-
<span style="color:var(--mint)"
|
| 100 |
-
<span style="color:var(--mint)"
|
| 101 |
</div></div>
|
| 102 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
| 103 |
-
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">4</div><div style="font-size:9px;color:#64748b"
|
| 104 |
-
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">34</div><div style="font-size:9px;color:#64748b"
|
| 105 |
</div>
|
| 106 |
-
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(127,255,219,.06);color:var(--mint);font-size:10px;font-weight:700">✅
|
| 107 |
</div>
|
| 108 |
|
| 109 |
<!-- Pillar 2: IMAGE -->
|
| 110 |
<div class="cd fi d1" style="border-color:rgba(244,114,182,.25);background:linear-gradient(160deg,rgba(244,114,182,.05),var(--card) 40%);position:relative;overflow:hidden">
|
| 111 |
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.06),transparent);pointer-events:none"></div>
|
| 112 |
-
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🖼️</div><div style="color:var(--pink);font-weight:800;font-size:18px"
|
| 113 |
<div style="padding:14px;border-radius:10px;background:rgba(244,114,182,.03);border:1px solid rgba(244,114,182,.1);margin-bottom:14px">
|
| 114 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 115 |
-
<span style="color:var(--pink)"
|
| 116 |
-
<span style="color:var(--pink)"
|
| 117 |
-
<span style="color:var(--pink)"
|
| 118 |
</div></div>
|
| 119 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
| 120 |
-
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">5</div><div style="font-size:9px;color:#64748b"
|
| 121 |
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">38+</div><div style="font-size:9px;color:#64748b">dB PSNR</div></div>
|
| 122 |
</div>
|
| 123 |
-
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(244,114,182,.06);color:var(--pink);font-size:10px;font-weight:700">✅
|
| 124 |
</div>
|
| 125 |
|
| 126 |
<!-- Pillar 3: VIDEO -->
|
| 127 |
<div class="cd fi d2" style="border-color:rgba(96,165,250,.25);background:linear-gradient(160deg,rgba(96,165,250,.05),var(--card) 40%);position:relative;overflow:hidden">
|
| 128 |
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.06),transparent);pointer-events:none"></div>
|
| 129 |
-
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🎬</div><div style="color:var(--blue);font-weight:800;font-size:18px"
|
| 130 |
<div style="padding:14px;border-radius:10px;background:rgba(96,165,250,.03);border:1px solid rgba(96,165,250,.1);margin-bottom:14px">
|
| 131 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 132 |
-
<span style="color:var(--blue)"
|
| 133 |
-
<span style="color:var(--blue)"
|
| 134 |
-
<span style="color:var(--blue)"
|
| 135 |
</div></div>
|
| 136 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
| 137 |
-
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">4</div><div style="font-size:9px;color:#64748b"
|
| 138 |
-
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">DTW</div><div style="font-size:9px;color:#64748b"
|
| 139 |
</div>
|
| 140 |
-
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(96,165,250,.06);color:var(--blue);font-size:10px;font-weight:700">✅
|
| 141 |
</div>
|
| 142 |
</div>
|
| 143 |
|
| 144 |
<!-- Image Protection Detail -->
|
| 145 |
<div style="max-width:960px;margin:36px auto 0">
|
| 146 |
<div class="cd fi d3" style="border-color:rgba(244,114,182,.15);background:linear-gradient(135deg,rgba(244,114,182,.03),rgba(192,132,252,.02))">
|
| 147 |
-
<div style="text-align:center;margin-bottom:20px"><div style="color:var(--pink);font-weight:800;font-size:18px">🖼️
|
| 148 |
<div style="display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:stretch">
|
| 149 |
<div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.12)">
|
| 150 |
-
<div style="color:var(--orange);font-weight:800;font-size:14px;margin-bottom:10px">📡
|
| 151 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 152 |
-
<strong>Perceptual Hash</strong> —
|
| 153 |
-
<strong>SSIM
|
| 154 |
-
<strong
|
| 155 |
-
<strong
|
| 156 |
-
<strong
|
| 157 |
</div></div>
|
| 158 |
<div style="display:flex;align-items:center;justify-content:center"><div style="color:#475569;font-size:18px;animation:breathe 2s ease infinite">+</div></div>
|
| 159 |
<div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.12)">
|
| 160 |
-
<div style="color:var(--mint);font-weight:800;font-size:14px;margin-bottom:10px">🔏
|
| 161 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 162 |
-
<strong>DCT
|
| 163 |
-
<strong>PSNR 38+ dB</strong> —
|
| 164 |
-
<strong>SSIM 99%+</strong> —
|
| 165 |
-
<strong>JPEG
|
| 166 |
-
<strong
|
| 167 |
</div></div>
|
| 168 |
</div>
|
| 169 |
</div>
|
|
@@ -173,8 +173,8 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 173 |
<!-- ★ DUAL SHIELD -->
|
| 174 |
<div style="padding:40px 0 60px">
|
| 175 |
<div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--orange);font-weight:700;letter-spacing:3px">DUAL SHIELD ARCHITECTURE</span></div>
|
| 176 |
-
<h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#fff"
|
| 177 |
-
<p style="text-align:center;color:#94a3b8;font-size:14px;margin-bottom:36px"
|
| 178 |
<div style="display:grid;grid-template-columns:1fr 50px 1fr;gap:16px;max-width:920px;margin:0 auto;align-items:stretch">
|
| 179 |
|
| 180 |
<!-- Shield A -->
|
|
@@ -183,25 +183,25 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 183 |
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
|
| 184 |
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(255,170,102,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(255,170,102,.2)">📡</div>
|
| 185 |
<div><div style="color:var(--orange);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Radar</span>™</div>
|
| 186 |
-
<div style="color:#64748b;font-size:11px"
|
| 187 |
</div>
|
| 188 |
<div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.1);margin-bottom:14px">
|
| 189 |
<div class="story" style="font-size:13px;line-height:1.9">
|
| 190 |
-
|
| 191 |
-
<strong>Radar™</strong
|
| 192 |
-
<span style="color:var(--orange)">▸</span> <strong
|
| 193 |
-
<span style="color:var(--orange)">▸</span> <strong
|
| 194 |
-
<span style="color:var(--orange)">▸</span> <strong>SSIM
|
| 195 |
-
<span style="color:var(--orange)">▸</span> <strong>AI
|
| 196 |
</div>
|
| 197 |
</div>
|
| 198 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
|
| 199 |
-
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">12</div><div style="font-size:10px;color:#94a3b8"
|
| 200 |
-
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">Day 0</div><div style="font-size:10px;color:#94a3b8"
|
| 201 |
</div>
|
| 202 |
<div style="padding:12px 14px;border-radius:10px;background:rgba(127,255,219,.04);border:1px solid rgba(127,255,219,.1)">
|
| 203 |
-
<div style="color:var(--mint);font-size:12px;font-weight:700;margin-bottom:4px">💡
|
| 204 |
-
<div style="color:#cbd5e1;font-size:12px;line-height:1.7"
|
| 205 |
</div>
|
| 206 |
</div>
|
| 207 |
|
|
@@ -209,7 +209,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 209 |
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px">
|
| 210 |
<div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(255,170,102,.3),rgba(127,255,219,.3));border-radius:1px"></div>
|
| 211 |
<div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(127,255,219,.15));display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,255,255,.1);animation:pulse 3s ease infinite">🤝</div>
|
| 212 |
-
<div style="font-size:10px;color:#64748b;font-weight:700;text-align:center;line-height:1.3"
|
| 213 |
<div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(127,255,219,.3),rgba(192,132,252,.3));border-radius:1px"></div>
|
| 214 |
</div>
|
| 215 |
|
|
@@ -219,25 +219,25 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 219 |
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
|
| 220 |
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(127,255,219,.15),rgba(127,255,219,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(127,255,219,.2)">🔏</div>
|
| 221 |
<div><div style="color:var(--mint);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Shield</span>™</div>
|
| 222 |
-
<div style="color:#64748b;font-size:11px"
|
| 223 |
</div>
|
| 224 |
<div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
|
| 225 |
<div class="story" style="font-size:13px;line-height:1.9">
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
<span style="color:var(--mint)">▸</span> <strong>StealthMark Phantom™</strong> —
|
| 229 |
-
<span style="color:var(--purple)">▸</span> <strong>StealthMark StyleDNA™</strong> —
|
| 230 |
-
<span style="color:var(--yellow)">▸</span> <strong>StealthMark Seal™</strong> —
|
| 231 |
-
<span style="color:var(--blue)">▸</span> <strong>StealthMark MicroGlyph™</strong> —
|
| 232 |
</div>
|
| 233 |
</div>
|
| 234 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
|
| 235 |
-
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">34</div><div style="font-size:10px;color:#94a3b8"
|
| 236 |
-
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">0px</div><div style="font-size:10px;color:#94a3b8"
|
| 237 |
</div>
|
| 238 |
<div style="padding:12px 14px;border-radius:10px;background:rgba(192,132,252,.04);border:1px solid rgba(192,132,252,.1)">
|
| 239 |
-
<div style="color:var(--purple);font-size:12px;font-weight:700;margin-bottom:4px">💡 CrossGuard™
|
| 240 |
-
<div style="color:#cbd5e1;font-size:12px;line-height:1.7"
|
| 241 |
</div>
|
| 242 |
</div>
|
| 243 |
</div>
|
|
@@ -246,21 +246,21 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 246 |
<div style="text-align:center;margin-top:28px">
|
| 247 |
<div style="display:inline-block;padding:18px 36px;border-radius:16px;background:linear-gradient(135deg,rgba(255,170,102,.05),rgba(127,255,219,.05),rgba(192,132,252,.05));border:1px solid rgba(255,255,255,.08)">
|
| 248 |
<div style="display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap">
|
| 249 |
-
<div><span style="color:var(--orange);font-weight:800;font-size:15px">Day 0</span><br><span style="color:#94a3b8;font-size:11px"
|
| 250 |
<span style="color:#334155;font-size:18px">→</span>
|
| 251 |
-
<div><span style="color:var(--mint);font-weight:800;font-size:15px">Shield™
|
| 252 |
<span style="color:#334155;font-size:18px">→</span>
|
| 253 |
-
<div><span style="color:var(--purple);font-weight:800;font-size:15px">DualAxis™
|
| 254 |
<span style="color:#334155;font-size:18px">→</span>
|
| 255 |
-
<div><span style="color:var(--red);font-weight:800;font-size:15px">Seal™
|
| 256 |
</div></div>
|
| 257 |
</div>
|
| 258 |
</div>
|
| 259 |
|
| 260 |
-
<!-- ★ 4
|
| 261 |
<div style="padding:40px 0 50px">
|
| 262 |
-
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:12px"
|
| 263 |
-
<p style="text-align:center;color:#94a3b8;font-size:13px;margin-bottom:36px"
|
| 264 |
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto">
|
| 265 |
|
| 266 |
<div class="cd fi" style="border-color:rgba(96,165,250,.2);background:linear-gradient(160deg,rgba(96,165,250,.03),var(--card) 50%)">
|
|
@@ -268,7 +268,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 268 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(96,165,250,.1);display:flex;align-items:center;justify-content:center;font-size:22px">👻</div>
|
| 269 |
<div><div style="color:var(--blue);font-weight:800;font-size:15px">StealthMark Phantom™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">INVISIBLE MARK</div></div>
|
| 270 |
</div>
|
| 271 |
-
<div class="story" style="font-size:13px"
|
| 272 |
</div>
|
| 273 |
|
| 274 |
<div class="cd fi d1" style="border-color:rgba(127,255,219,.2);background:linear-gradient(160deg,rgba(127,255,219,.03),var(--card) 50%)">
|
|
@@ -276,7 +276,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 276 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(127,255,219,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🧬</div>
|
| 277 |
<div><div style="color:var(--mint);font-weight:800;font-size:15px">StealthMark StyleDNA™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">STYLISTIC FINGERPRINT</div></div>
|
| 278 |
</div>
|
| 279 |
-
<div class="story" style="font-size:13px"
|
| 280 |
</div>
|
| 281 |
|
| 282 |
<div class="cd fi d2" style="border-color:rgba(255,224,102,.2);background:linear-gradient(160deg,rgba(255,224,102,.03),var(--card) 50%)">
|
|
@@ -284,7 +284,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 284 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(255,224,102,.1);display:flex;align-items:center;justify-content:center;font-size:22px">📋</div>
|
| 285 |
<div><div style="color:var(--yellow);font-weight:800;font-size:15px">StealthMark Seal™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">FORENSIC EVIDENCE</div></div>
|
| 286 |
</div>
|
| 287 |
-
<div class="story" style="font-size:13px"
|
| 288 |
</div>
|
| 289 |
|
| 290 |
<div class="cd fi d3" style="border-color:rgba(192,132,252,.2);background:linear-gradient(160deg,rgba(192,132,252,.03),var(--card) 50%)">
|
|
@@ -292,7 +292,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 292 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(192,132,252,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🔬</div>
|
| 293 |
<div><div style="color:var(--purple);font-weight:800;font-size:15px">StealthMark MicroGlyph™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">MICRO ENGRAVING</div></div>
|
| 294 |
</div>
|
| 295 |
-
<div class="story" style="font-size:13px"
|
| 296 |
</div>
|
| 297 |
</div>
|
| 298 |
|
|
@@ -300,7 +300,7 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 300 |
<div class="cd" style="text-align:center;border-color:rgba(127,255,219,.15);background:linear-gradient(135deg,rgba(127,255,219,.03),rgba(192,132,252,.03))">
|
| 301 |
<div style="font-size:20px;margin-bottom:6px">⚖️</div>
|
| 302 |
<div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:10px">StealthMark CrossGuard™</div>
|
| 303 |
-
<div class="story" style="font-size:13px;max-width:600px;margin:0 auto"><strong
|
| 304 |
</div>
|
| 305 |
</div>
|
| 306 |
</div>
|
|
@@ -308,21 +308,21 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 308 |
<!-- ★ DualAxis -->
|
| 309 |
<div style="padding:40px 0 50px">
|
| 310 |
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:8px">StealthMark <span style="color:var(--mint)">DualAxis</span>™</h2>
|
| 311 |
-
<p style="text-align:center;color:#94a3b8;font-size:13px;margin-bottom:32px"
|
| 312 |
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;max-width:700px;margin:0 auto;align-items:center">
|
| 313 |
-
<div class="cd fi" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(127,255,219,.03));border-color:rgba(127,255,219,.2)"><div style="font-size:36px;margin-bottom:8px">📡</div><div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:8px"
|
| 314 |
<div style="text-align:center;font-size:28px;color:#475569;animation:breathe 2s ease infinite">+</div>
|
| 315 |
-
<div class="cd fi d2" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(192,132,252,.03));border-color:rgba(192,132,252,.2)"><div style="font-size:36px;margin-bottom:8px">🔍</div><div style="color:var(--purple);font-weight:800;font-size:16px;margin-bottom:8px"
|
| 316 |
</div>
|
| 317 |
-
<div style="text-align:center;margin-top:20px"><div style="display:inline-block;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg,rgba(127,255,219,.06),rgba(192,132,252,.06));border:1px solid rgba(127,255,219,.2)"><span style="color:#fff;font-weight:700;font-size:14px"
|
| 318 |
</div>
|
| 319 |
|
| 320 |
<!-- ★ Competitive Edge -->
|
| 321 |
<div style="padding:30px 0 50px">
|
| 322 |
-
<h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:28px"
|
| 323 |
<div style="max-width:820px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border)">
|
| 324 |
<table style="width:100%;border-collapse:collapse;font-size:13px">
|
| 325 |
-
<thead><tr style="background:#0f1629"><th style="padding:14px 16px;text-align:left;color:#94a3b8;font-weight:700;border-bottom:2px solid var(--border)"
|
| 326 |
<tbody id="compTb"></tbody>
|
| 327 |
</table>
|
| 328 |
</div>
|
|
@@ -330,42 +330,42 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 330 |
|
| 331 |
<!-- ★ Customer Journey -->
|
| 332 |
<div style="padding:20px 0 80px">
|
| 333 |
-
<h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:32px"
|
| 334 |
<div style="max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
|
| 335 |
-
<div class="cd fi" style="text-align:center;border-color:rgba(255,170,102,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">📋</div><div style="color:var(--orange);font-weight:800;font-size:20px;margin-bottom:4px">Day 0</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px"
|
| 336 |
-
<div class="cd fi d1" style="text-align:center;border-color:rgba(127,255,219,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🔏</div><div style="color:var(--mint);font-weight:800;font-size:20px;margin-bottom:4px">Week 1</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Shield™
|
| 337 |
-
<div class="cd fi d2" style="text-align:center;border-color:rgba(192,132,252,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🎯</div><div style="color:var(--purple);font-weight:800;font-size:20px;margin-bottom:4px">Month 1</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px"
|
| 338 |
-
<div class="cd fi d3" style="text-align:center;border-color:rgba(255,107,107,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">⚖️</div><div style="color:var(--red);font-weight:800;font-size:20px;margin-bottom:4px">Month 2+</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px"
|
| 339 |
</div>
|
| 340 |
-
<div style="text-align:center;margin-top:24px"><div style="display:inline-block;padding:14px 28px;border-radius:14px;background:var(--card);border:1px solid var(--border)"><span style="color:#94a3b8;font-size:13px"
|
| 341 |
</div>
|
| 342 |
</section>
|
| 343 |
|
| 344 |
<!-- ═══════════════ LEADERBOARD ═══════════════ -->
|
| 345 |
<section id="lb">
|
| 346 |
<div style="padding:40px 0 80px">
|
| 347 |
-
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">TECHNOLOGY BENCHMARK</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:#fff"
|
| 348 |
<div style="display:grid;grid-template-columns:1fr 280px;gap:24px">
|
| 349 |
-
<div class="cd fi" style="padding:0;overflow:hidden"><div class="lh"><span>#</span><span
|
| 350 |
<div class="cd fi d2" id="lbd" style="text-align:center"></div>
|
| 351 |
</div>
|
| 352 |
-
<div style="display:flex;gap:16px;justify-content:center;margin-top:20px;flex-wrap:wrap"><span style="font-size:11px;color:#64748b"
|
| 353 |
</div>
|
| 354 |
</section>
|
| 355 |
|
| 356 |
<!-- ═══════════════ THREATS ═══════════════ -->
|
| 357 |
<section id="atk">
|
| 358 |
<div style="padding:40px 0">
|
| 359 |
-
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--red);font-weight:700;letter-spacing:3px;margin-bottom:8px">STEALTHMARK THREATMATRIX™</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px">
|
| 360 |
<div class="ag" id="agg"></div>
|
| 361 |
<div class="cd fi" style="margin-top:32px">
|
| 362 |
-
<h3 style="font-size:16px;font-weight:800;text-align:center;margin-bottom:20px;color:#fff">StealthMark <span style="color:var(--mint)">CrossGuard™</span>
|
| 363 |
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;max-width:600px;margin:0 auto">
|
| 364 |
-
<div style="text-align:center;padding:16px;border-radius:12px;background:rgba(255,107,107,.06);border:1px solid rgba(255,107,107,.2)"><div style="font-weight:800;color:var(--red);margin-bottom:6px">Phantom™
|
| 365 |
-
<div style="text-align:center;font-size:28px;animation:float 2s ease infinite">⚖️<div style="font-size:10px;color:var(--mint);font-weight:700;margin-top:4px"
|
| 366 |
-
<div style="text-align:center;padding:16px;border-radius:12px;background:rgba(192,132,252,.06);border:1px solid rgba(192,132,252,.2)"><div style="font-weight:800;color:var(--purple);margin-bottom:6px">MicroGlyph™
|
| 367 |
</div>
|
| 368 |
-
<div style="text-align:center;margin-top:16px;padding:10px 20px;border-radius:10px;background:rgba(127,255,219,.04)"><span style="color:var(--mint);font-weight:800;font-size:13px"
|
| 369 |
</div>
|
| 370 |
</div>
|
| 371 |
</section>
|
|
@@ -373,92 +373,92 @@ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;co
|
|
| 373 |
<!-- ═══════════════ PIPELINE ═══════════════ -->
|
| 374 |
<section id="pipe">
|
| 375 |
<div style="padding:40px 0 80px">
|
| 376 |
-
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">BUSINESS PIPELINE</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:var(--orange)">Radar™</span> → <span style="color:var(--mint)">Shield™</span> → <span style="color:var(--red)">Seal™</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px"
|
| 377 |
<div class="rs">
|
| 378 |
<div class="rr" style="top:35%;left:35%;width:30%;height:30%;border-color:rgba(127,255,219,.12)"></div>
|
| 379 |
<div class="rr" style="top:22.5%;left:22.5%;width:55%;height:55%;border-color:rgba(127,255,219,.1)"></div>
|
| 380 |
<div class="rr" style="top:10%;left:10%;width:80%;height:80%;border-color:rgba(127,255,219,.08)"></div>
|
| 381 |
<div class="rr" style="top:0;left:0;width:100%;height:100%;border-color:rgba(127,255,219,.15)"></div>
|
| 382 |
<div class="rw"><div class="ra"></div></div><div class="rc"></div>
|
| 383 |
-
<div class="rb" style="top:25%;left:30%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red)"></div><div class="rl" style="color:var(--red)">AI
|
| 384 |
-
<div class="rb" style="top:35%;left:70%"><div class="rd" style="background:var(--orange);box-shadow:0 0 8px var(--orange);animation-delay:.5s"></div><div class="rl" style="color:var(--orange)"
|
| 385 |
-
<div class="rb" style="top:72%;left:55%"><div class="rd" style="background:var(--yellow);box-shadow:0 0 8px var(--yellow);animation-delay:1s"></div><div class="rl" style="color:var(--yellow)"
|
| 386 |
-
<div class="rb" style="top:65%;left:20%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red);animation-delay:1.5s"></div><div class="rl" style="color:var(--red)"
|
| 387 |
<div style="position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mint);font-weight:700">📡 StealthMark Radar™</div>
|
| 388 |
</div>
|
| 389 |
<div style="position:relative;max-width:700px;margin:0 auto" id="psteps"><div class="pl"></div></div>
|
| 390 |
<div style="text-align:center;margin-top:48px">
|
| 391 |
<div class="cd" style="display:inline-block;padding:24px 40px;border-radius:20px;background:linear-gradient(135deg,var(--card),var(--card2));border-color:rgba(127,255,219,.2)">
|
| 392 |
-
<div style="font-size:18px;font-weight:800;color:#fff;margin-bottom:8px"
|
| 393 |
-
<div style="color:#94a3b8;font-size:13px;line-height:1.7">Radar
|
| 394 |
<div style="display:flex;gap:12px;justify-content:center;margin-top:16px">
|
| 395 |
-
<span style="padding:6px 14px;border-radius:8px;background:rgba(127,255,219,.08);color:var(--mint);font-size:12px;font-weight:700"
|
| 396 |
-
<span style="padding:6px 14px;border-radius:8px;background:rgba(192,132,252,.08);color:var(--purple);font-size:12px;font-weight:700"
|
| 397 |
-
<span style="padding:6px 14px;border-radius:8px;background:rgba(255,107,107,.08);color:var(--red);font-size:12px;font-weight:700"
|
| 398 |
</div></div></div>
|
| 399 |
</div>
|
| 400 |
</section>
|
| 401 |
</main>
|
| 402 |
-
<footer>StealthMark —
|
| 403 |
|
| 404 |
<script>
|
| 405 |
const D=[
|
| 406 |
-
{r:1,b:"🥇",n:"StealthMark",c:"🇰🇷",t:"
|
| 407 |
-
{r:2,b:"🥈",n:"
|
| 408 |
-
{r:3,b:"🥉",n:"SynthID-Text",c:"🇺🇸",t:"
|
| 409 |
-
{r:4,b:"4",n:"
|
| 410 |
-
{r:5,b:"5",n:"
|
| 411 |
-
{r:6,b:"6",n:"OpenAI Text WM",c:"🇺🇸",t:"
|
| 412 |
];
|
| 413 |
-
const AX=["
|
| 414 |
const AG=[
|
| 415 |
-
{i:"🔤",n:"
|
| 416 |
-
{i:"👻",n:"
|
| 417 |
-
{i:"🎯",n:"
|
| 418 |
-
{i:"✏️",n:"
|
| 419 |
-
{i:"🧩",n:"
|
| 420 |
-
{i:"🧠",n:"
|
| 421 |
];
|
| 422 |
const PS=[
|
| 423 |
-
{i:"📡",t:"Radar™
|
| 424 |
-
{i:"🔏",t:"Shield™
|
| 425 |
-
{i:"📡",t:"
|
| 426 |
-
{i:"🔍",t:"DualAxis™
|
| 427 |
-
{i:"📋",t:"Seal™
|
| 428 |
-
{i:"⚖️",t:"
|
| 429 |
];
|
| 430 |
const COMP=[
|
| 431 |
-
{f:"
|
| 432 |
-
{f:"
|
| 433 |
-
{f:"🖼️
|
| 434 |
-
{f:"🖼️
|
| 435 |
-
{f:"🎬
|
| 436 |
-
{f:"
|
| 437 |
-
{f:"
|
| 438 |
-
{f:"
|
| 439 |
-
{f:"
|
| 440 |
-
{f:"
|
| 441 |
];
|
| 442 |
const ctb=document.getElementById('compTb');
|
| 443 |
if(ctb)ctb.innerHTML=COMP.map(c=>{const hl=c.h?'background:rgba(255,170,102,.03);':'';const fc=c.h?'color:var(--orange);font-weight:700':'color:#cbd5e1';return `<tr style="${hl}border-bottom:1px solid var(--border)"><td style="padding:10px 16px;${fc};font-size:13px">${c.f}</td><td style="padding:10px 16px;text-align:center;font-size:12px;font-weight:600;color:${c.sm.startsWith('✅')?'var(--mint)':'#94a3b8'}">${c.sm}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:#64748b">${c.a}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:#64748b">${c.b}</td></tr>`}).join('');
|
| 444 |
|
| 445 |
document.querySelectorAll('.tb').forEach(b=>{b.onclick=()=>{document.querySelectorAll('.tb').forEach(x=>x.classList.remove('a'));b.classList.add('a');document.querySelectorAll('section').forEach(s=>s.classList.remove('a'));document.getElementById(b.dataset.t).classList.add('a')}});
|
| 446 |
|
| 447 |
-
const MET=[{v:34,s:"
|
| 448 |
document.getElementById('metrics').innerHTML=MET.map((m,i)=>`<div class="mc fi d${i+1}" style="border:1px solid color-mix(in srgb,${m.cl} 15%,transparent)"><div style="font-size:36px;font-weight:900;color:${m.cl}">${m.fix||'<span class="ctr" data-e="'+m.v+'">0</span>'}${m.s}</div><div style="font-size:13px;font-weight:700;color:#fff;margin-bottom:2px">${m.l}</div><div style="font-size:10px;color:#64748b">${m.u}</div></div>`).join('');
|
| 449 |
const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.querySelectorAll('.ctr').forEach(el=>{if(el.dataset.done)return;el.dataset.done='1';const end=+el.dataset.e,st=performance.now();(function f(n){const p=Math.min((n-st)/1500,1);el.textContent=Math.round((1-Math.pow(1-p,3))*end);if(p<1)requestAnimationFrame(f)})(st)})})},{threshold:.3});
|
| 450 |
document.querySelectorAll('.mc').forEach(e=>obs.observe(e));
|
| 451 |
|
| 452 |
let sel=0;
|
| 453 |
function sc(v){return v>=80?'var(--mint)':v>=50?'var(--yellow)':v>=25?'var(--orange)':'var(--red)'}
|
| 454 |
-
function tc(t){return t==='
|
| 455 |
-
function tbc(t){return t==='
|
| 456 |
function bLB(){document.getElementById('lbb').innerHTML=D.map((c,i)=>`<div class="lr${i===sel?' sel':''}" onclick="sel=${i};bLB();bDt()"><span style="font-size:${c.r<=3?18:13}px;font-weight:800;${c.r>3?'color:#64748b':''}">${c.b}</span><div><div style="font-weight:700;font-size:13px;color:${c.r===1?'var(--mint)':'#e2e8f0'}">${c.c} ${c.n}</div><div style="font-size:10px;color:#64748b;margin-top:1px">${c.d}</div></div><span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${tbc(c.t)};color:${tc(c.t)};font-weight:600;text-align:center">${c.t}</span>${c.s.map(s=>`<span style="text-align:center;font-size:12px;font-weight:700;color:${sc(s)}">${s}</span>`).join('')}<span style="text-align:center;font-size:16px;font-weight:900;color:${c.r===1?'var(--mint)':c.cl}">${c.T}</span></div>`).join('')}
|
| 457 |
function bDt(){const c=D[sel],m=c.r===1,bc=m?'var(--mint)':'#94a3b8';const sz=200,cx=100,cy=100,r=76,st=Math.PI/3;const pt=(v,i)=>({x:cx+(r*v/100)*Math.cos(st*i*2-Math.PI/2),y:cy+(r*v/100)*Math.sin(st*i*2-Math.PI/2)});let svg='';[25,50,75,100].forEach(lv=>{const ps=Array.from({length:6},(_,i)=>pt(lv,i));svg+=`<polygon points="${ps.map(p=>p.x+','+p.y).join(' ')}" fill="none" stroke="#334155" stroke-width="${lv===100?1.5:.5}" ${lv<100?'stroke-dasharray="2,3"':''}/>`;});Array.from({length:6},(_,i)=>{const p=pt(100,i);svg+=`<line x1="${cx}" y1="${cy}" x2="${p.x}" y2="${p.y}" stroke="#334155" stroke-width=".5"/>`;});const dp=c.s.map((s,i)=>pt(s,i));svg+=`<polygon points="${dp.map(p=>p.x+','+p.y).join(' ')}" fill="${m?'rgba(127,255,219,.12)':'rgba(148,163,184,.12)'}" stroke="${bc}" stroke-width="2"/>`;dp.forEach(p=>{svg+=`<circle cx="${p.x}" cy="${p.y}" r="3.5" fill="${bc}" stroke="var(--bg)" stroke-width="1.5"/>`;});IC.forEach((ic,i)=>{const p=pt(120,i);svg+=`<text x="${p.x}" y="${p.y}" text-anchor="middle" dominant-baseline="middle" fill="#94a3b8" font-size="10">${ic}</text>`;});document.getElementById('lbd').innerHTML=`<div style="font-size:28px;margin-bottom:4px">${c.b}</div><div style="font-weight:800;font-size:16px;color:${m?'var(--mint)':'#fff'}">${c.n}</div><div style="font-size:11px;color:#64748b;margin:4px 0 12px">${c.d}</div><div style="display:flex;justify-content:center;margin-bottom:12px"><svg width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">${svg}</svg></div>${AX.map((a,i)=>`<div class="sr"><span class="sl">${IC[i]} ${a}</span><div class="st"><div class="sf" style="width:${c.s[i]}%;background:linear-gradient(90deg,${bc}88,${bc});animation-delay:${i*80}ms"></div></div><span class="sn" style="color:${bc}">${c.s[i]}</span></div>`).join('')}<div style="margin-top:16px;text-align:left">${c.h.map(h=>`<div style="padding:3px 0;font-size:11px;color:#94a3b8"><span style="color:${m?'var(--mint)':'#64748b'};margin-right:6px">→</span>${h}</div>`).join('')}</div>`}
|
| 458 |
bLB();bDt();
|
| 459 |
|
| 460 |
const SL=["Phantom™","StyleDNA™","MicroGlyph™"];
|
| 461 |
-
document.getElementById('agg').innerHTML=AG.map((g,i)=>`<div class="ac fi" style="animation-delay:${i*.08}s;border:1px solid color-mix(in srgb,${g.cl} 20%,transparent)"><div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px"><div><span style="font-size:24px;margin-right:8px">${g.i}</span><span style="font-weight:800;font-size:15px;color:#fff">${g.n}</span></div><span style="padding:3px 10px;border-radius:8px;background:color-mix(in srgb,${g.cl} 12%,transparent);color:${g.cl};font-size:11px;font-weight:700">${g.rk}</span></div><div style="font-size:12px;color:#cbd5e1;margin-bottom:12px;line-height:1.5">${g.d}</div><div style="margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px">${g.a.map(a=>`<span class="at">${a}</span>`).join('')}</div><div class="svr">${SL.map((l,j)=>`<div class="svi"><div class="svl">${l}</div><div class="svv">${g.sv[j]}</div></div>`).join('')}</div><div style="text-align:center;margin-top:8px"><span style="font-size:22px;font-weight:900;color:${g.cl}">${g.c}</span><span style="font-size:11px;color:#64748b;margin-left:4px"
|
| 462 |
|
| 463 |
document.getElementById('psteps').innerHTML='<div class="pl"></div>'+PS.map((s,i)=>`<div class="ps fi" style="animation-delay:${i*.1}s"><div class="pn" style="background:color-mix(in srgb,${s.cl} 8%,transparent);border:2px solid color-mix(in srgb,${s.cl} 30%,transparent)">${s.i}</div><div class="cd" style="flex:1;padding:14px 20px;border-color:color-mix(in srgb,${s.cl} 15%,transparent)"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="color:${s.cl};font-weight:800;font-size:14px">${s.t}</span><span style="font-size:10px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,${s.cl} 8%,transparent);color:${s.cl};font-weight:700">Step ${i+1}</span></div><div style="color:#e2e8f0;font-size:13px;margin-bottom:4px">${s.d}</div><div style="color:#64748b;font-size:11px">${s.dt}</div></div></div>`).join('');
|
| 464 |
</script>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>StealthMark — Content Protection Platform</title>
|
| 7 |
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
:root{--mint:#7fffdb;--purple:#c084fc;--red:#ff6b6b;--orange:#ffaa66;--yellow:#ffe066;--blue:#60a5fa;--pink:#f472b6;--bg:#0a0e1a;--card:#111827;--card2:#1a1f35;--border:#1e293b}
|
|
|
|
| 58 |
<nav><div class="ni">
|
| 59 |
<div class="logo"><div class="li">🔒</div><div style="font-weight:800;font-size:16px;letter-spacing:-.5px"><span style="color:var(--mint)">Stealth</span><span style="color:#fff">Mark</span><span style="color:#475569;font-size:11px;margin-left:6px">Platform</span></div></div>
|
| 60 |
<div id="tabs" style="display:flex;gap:4px">
|
| 61 |
+
<button class="tb a" data-t="hero">⚡ Home</button><button class="tb" data-t="lb">🏆 Tech Comparison</button><button class="tb" data-t="atk">🛡️ Threat Response</button><button class="tb" data-t="pipe">📡 Business</button>
|
| 62 |
</div></div></nav>
|
| 63 |
<main>
|
| 64 |
|
|
|
|
| 67 |
<div style="padding:80px 0 40px;text-align:center;position:relative">
|
| 68 |
<div style="position:absolute;top:20px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.04),rgba(192,132,252,.02) 40%,transparent 70%);pointer-events:none"></div>
|
| 69 |
<div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:16px">TEXT · IMAGE · VIDEO — FULL SPECTRUM PROTECTION</div>
|
| 70 |
+
<h1 style="font-size:clamp(32px,6vw,52px);font-weight:900;line-height:1.15;margin-bottom:20px;letter-spacing:-2px"><span style="color:#fff">Text · Image · Video</span><br><span style="background:linear-gradient(135deg,var(--mint),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Complete Content Protection Platform</span></h1>
|
| 71 |
<p class="story" style="max-width:720px;margin:0 auto 28px;font-size:17px">
|
| 72 |
+
Pre-embed <span style="color:var(--orange);font-weight:700">AI Similarity Detection</span> for instant content protection<br>
|
| 73 |
+
Post-embed <span style="color:var(--mint);font-weight:700">Multi-layer Watermark + Dual-Axis Verdict</span> for legal evidence<br>
|
| 74 |
+
<span style="color:var(--purple);font-weight:700">Text 4-Layer + Image DCT + Video Temporal</span> — World's Only Full Spectrum
|
| 75 |
</p>
|
| 76 |
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:48px">
|
| 77 |
+
<span style="padding:7px 18px;border-radius:20px;background:rgba(127,255,219,.08);border:1px solid rgba(127,255,219,.2);color:var(--mint);font-size:12px;font-weight:700">📝 Text 4-Layer</span>
|
| 78 |
+
<span style="padding:7px 18px;border-radius:20px;background:rgba(244,114,182,.08);border:1px solid rgba(244,114,182,.2);color:var(--pink);font-size:12px;font-weight:700">🖼️ Image DCT</span>
|
| 79 |
+
<span style="padding:7px 18px;border-radius:20px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);color:var(--blue);font-size:12px;font-weight:700">🎬 Video Temporal</span>
|
| 80 |
+
<span style="padding:7px 18px;border-radius:20px;background:rgba(255,170,102,.08);border:1px solid rgba(255,170,102,.2);color:var(--orange);font-size:12px;font-weight:700">🛡️ Day 0 Instant Protection</span>
|
| 81 |
</div>
|
| 82 |
<div id="metrics" style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px"></div>
|
| 83 |
</div>
|
| 84 |
|
| 85 |
+
<!-- ★ THREE PILLARS — 3 Pillars ★ -->
|
| 86 |
<div style="padding:40px 0 50px">
|
| 87 |
<div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--mint);font-weight:700;letter-spacing:3px">THREE PILLARS OF PROTECTION</span></div>
|
| 88 |
+
<h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#fff">World's Only <span style='color:var(--mint)'>3 Pillars</span> Unified Protection</h2>
|
| 89 |
+
<p style="text-align:center;color:#94a3b8;font-size:14px;margin-bottom:36px">Protect all content types in one platform</p>
|
| 90 |
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto">
|
| 91 |
|
| 92 |
<!-- Pillar 1: TEXT -->
|
| 93 |
<div class="cd fi" style="border-color:rgba(127,255,219,.25);background:linear-gradient(160deg,rgba(127,255,219,.05),var(--card) 40%);position:relative;overflow:hidden">
|
| 94 |
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.06),transparent);pointer-events:none"></div>
|
| 95 |
+
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">📝</div><div style="color:var(--mint);font-weight:800;font-size:18px">Text</div><div style="font-size:11px;color:#64748b">TEXT PROTECTION</div></div>
|
| 96 |
<div style="padding:14px;border-radius:10px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
|
| 97 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 98 |
+
<span style="color:var(--mint)">Pre-embed →</span> Radar™ 7-Mode Plagiarism Check<br>
|
| 99 |
+
<span style="color:var(--mint)">Post-embed →</span> 4-Layer Stealth Watermark<br>
|
| 100 |
+
<span style="color:var(--mint)">Verify →</span> DualAxis™ Dual-Axis Verdict
|
| 101 |
</div></div>
|
| 102 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
| 103 |
+
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">4</div><div style="font-size:9px;color:#64748b">Defense Layers</div></div>
|
| 104 |
+
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">34</div><div style="font-size:9px;color:#64748b">Attack Response</div></div>
|
| 105 |
</div>
|
| 106 |
+
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(127,255,219,.06);color:var(--mint);font-size:10px;font-weight:700">✅ Operational</span></div>
|
| 107 |
</div>
|
| 108 |
|
| 109 |
<!-- Pillar 2: IMAGE -->
|
| 110 |
<div class="cd fi d1" style="border-color:rgba(244,114,182,.25);background:linear-gradient(160deg,rgba(244,114,182,.05),var(--card) 40%);position:relative;overflow:hidden">
|
| 111 |
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.06),transparent);pointer-events:none"></div>
|
| 112 |
+
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🖼️</div><div style="color:var(--pink);font-weight:800;font-size:18px">Image</div><div style="font-size:11px;color:#64748b">IMAGE PROTECTION</div></div>
|
| 113 |
<div style="padding:14px;border-radius:10px;background:rgba(244,114,182,.03);border:1px solid rgba(244,114,182,.1);margin-bottom:14px">
|
| 114 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 115 |
+
<span style="color:var(--pink)">Pre-embed →</span> pHash+SSIM+Color+Features<br>
|
| 116 |
+
<span style="color:var(--pink)">Post-embed →</span> DCT Frequency Domain Watermark<br>
|
| 117 |
+
<span style="color:var(--pink)">Verify →</span> Watermark Extraction & Similarity Check
|
| 118 |
</div></div>
|
| 119 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
| 120 |
+
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">5</div><div style="font-size:9px;color:#64748b">Analysis Modes</div></div>
|
| 121 |
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">38+</div><div style="font-size:9px;color:#64748b">dB PSNR</div></div>
|
| 122 |
</div>
|
| 123 |
+
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(244,114,182,.06);color:var(--pink);font-size:10px;font-weight:700">✅ Operational</span></div>
|
| 124 |
</div>
|
| 125 |
|
| 126 |
<!-- Pillar 3: VIDEO -->
|
| 127 |
<div class="cd fi d2" style="border-color:rgba(96,165,250,.25);background:linear-gradient(160deg,rgba(96,165,250,.05),var(--card) 40%);position:relative;overflow:hidden">
|
| 128 |
<div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.06),transparent);pointer-events:none"></div>
|
| 129 |
+
<div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🎬</div><div style="color:var(--blue);font-weight:800;font-size:18px">Video</div><div style="font-size:11px;color:#64748b">VIDEO PROTECTION</div></div>
|
| 130 |
<div style="padding:14px;border-radius:10px;background:rgba(96,165,250,.03);border:1px solid rgba(96,165,250,.1);margin-bottom:14px">
|
| 131 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 132 |
+
<span style="color:var(--blue)">Pre-embed →</span> Keyframe Fingerprint+DTW<br>
|
| 133 |
+
<span style="color:var(--blue)">Post-embed →</span> Temporal Propagation Watermark<br>
|
| 134 |
+
<span style="color:var(--blue)">Verify →</span> Codec Robustness + Platform Radar
|
| 135 |
</div></div>
|
| 136 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
| 137 |
+
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">4</div><div style="font-size:9px;color:#64748b">Analysis Modes</div></div>
|
| 138 |
+
<div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">DTW</div><div style="font-size:9px;color:#64748b">Temporal Matching</div></div>
|
| 139 |
</div>
|
| 140 |
+
<div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(96,165,250,.06);color:var(--blue);font-size:10px;font-weight:700">✅ Operational</span></div>
|
| 141 |
</div>
|
| 142 |
</div>
|
| 143 |
|
| 144 |
<!-- Image Protection Detail -->
|
| 145 |
<div style="max-width:960px;margin:36px auto 0">
|
| 146 |
<div class="cd fi d3" style="border-color:rgba(244,114,182,.15);background:linear-gradient(135deg,rgba(244,114,182,.03),rgba(192,132,252,.02))">
|
| 147 |
+
<div style="text-align:center;margin-bottom:20px"><div style="color:var(--pink);font-weight:800;font-size:18px">🖼️ Image Protection — How It Works</div><div style="color:#64748b;font-size:12px;margin-top:4px">AI-regenerated images and edited copies — all caught</div></div>
|
| 148 |
<div style="display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:stretch">
|
| 149 |
<div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.12)">
|
| 150 |
+
<div style="color:var(--orange);font-weight:800;font-size:14px;margin-bottom:10px">📡 Pre-embed Protection</div>
|
| 151 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 152 |
+
<strong>Perceptual Hash</strong> — Fingerprint robust against crop/compress<br>
|
| 153 |
+
<strong>SSIM Structure Analysis</strong> — Luminance/contrast/structure 3-axis comparison<br>
|
| 154 |
+
<strong>Color Histogram</strong> — RGB distribution cross-validation<br>
|
| 155 |
+
<strong>Feature Matching</strong> — Edge-based similar structure detection<br>
|
| 156 |
+
<strong>Comprehensive AI Verdict</strong> — Weighted multi-layer similarity score
|
| 157 |
</div></div>
|
| 158 |
<div style="display:flex;align-items:center;justify-content:center"><div style="color:#475569;font-size:18px;animation:breathe 2s ease infinite">+</div></div>
|
| 159 |
<div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.12)">
|
| 160 |
+
<div style="color:var(--mint);font-weight:800;font-size:14px;margin-bottom:10px">🔏 Post-embed Protection</div>
|
| 161 |
<div class="story" style="font-size:12px;line-height:1.8">
|
| 162 |
+
<strong>DCT Frequency Embed</strong> — Invisible encoding in mid-band<br>
|
| 163 |
+
<strong>PSNR 38+ dB</strong> — Visually indistinguishable quality<br>
|
| 164 |
+
<strong>SSIM 99%+</strong> — Identical visual quality to original<br>
|
| 165 |
+
<strong>JPEG Robust</strong> — Survives compression & resize<br>
|
| 166 |
+
<strong>Evidence Package</strong> — SHA-256 hash + timestamp
|
| 167 |
</div></div>
|
| 168 |
</div>
|
| 169 |
</div>
|
|
|
|
| 173 |
<!-- ★ DUAL SHIELD -->
|
| 174 |
<div style="padding:40px 0 60px">
|
| 175 |
<div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--orange);font-weight:700;letter-spacing:3px">DUAL SHIELD ARCHITECTURE</span></div>
|
| 176 |
+
<h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#fff">What competitors lack: <span style="color:var(--mint)">Dual Protection</span> System</h2>
|
| 177 |
+
<p style="text-align:center;color:#94a3b8;font-size:14px;margin-bottom:36px">AI protects existing content even without watermarks</p>
|
| 178 |
<div style="display:grid;grid-template-columns:1fr 50px 1fr;gap:16px;max-width:920px;margin:0 auto;align-items:stretch">
|
| 179 |
|
| 180 |
<!-- Shield A -->
|
|
|
|
| 183 |
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
|
| 184 |
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(255,170,102,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(255,170,102,.2)">📡</div>
|
| 185 |
<div><div style="color:var(--orange);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Radar</span>™</div>
|
| 186 |
+
<div style="color:#64748b;font-size:11px">Pre-embed Protection — Works instantly without watermarks</div></div>
|
| 187 |
</div>
|
| 188 |
<div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.1);margin-bottom:14px">
|
| 189 |
<div class="story" style="font-size:13px;line-height:1.9">
|
| 190 |
+
What if your article was copied somewhere without permission?<br>
|
| 191 |
+
<strong>Radar™</strong> finds it with <span style="color:var(--orange)">Text 7 modes + Image 5 modes</span>.<br><br>
|
| 192 |
+
<span style="color:var(--orange)">▸</span> <strong>Text Phrase Fingerprint</strong> — Compares your text's N-grams<br>
|
| 193 |
+
<span style="color:var(--orange)">▸</span> <strong>Image Perceptual Hash</strong> — Detects edited copies too<br>
|
| 194 |
+
<span style="color:var(--orange)">▸</span> <strong>SSIM Structure Analysis</strong> — Image structural similarity comparison<br>
|
| 195 |
+
<span style="color:var(--orange)">▸</span> <strong>AI Rewrite/Regeneration Detection</strong> — Detects what AI modified
|
| 196 |
</div>
|
| 197 |
</div>
|
| 198 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
|
| 199 |
+
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">12</div><div style="font-size:10px;color:#94a3b8">Analysis Modes (7+5)</div></div>
|
| 200 |
+
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">Day 0</div><div style="font-size:10px;color:#94a3b8">Instant Protection</div></div>
|
| 201 |
</div>
|
| 202 |
<div style="padding:12px 14px;border-radius:10px;background:rgba(127,255,219,.04);border:1px solid rgba(127,255,219,.1)">
|
| 203 |
+
<div style="color:var(--mint);font-size:12px;font-weight:700;margin-bottom:4px">💡 This is the difference</div>
|
| 204 |
+
<div style="color:#cbd5e1;font-size:12px;line-height:1.7">From the moment of contract, <strong style="color:#fff">your entire text and image archive</strong> is protected. Text plagiarism and image theft — no need to wait for watermark embedding.</div>
|
| 205 |
</div>
|
| 206 |
</div>
|
| 207 |
|
|
|
|
| 209 |
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px">
|
| 210 |
<div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(255,170,102,.3),rgba(127,255,219,.3));border-radius:1px"></div>
|
| 211 |
<div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(127,255,219,.15));display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,255,255,.1);animation:pulse 3s ease infinite">🤝</div>
|
| 212 |
+
<div style="font-size:10px;color:#64748b;font-weight:700;text-align:center;line-height:1.3">Unified<br>Protection</div>
|
| 213 |
<div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(127,255,219,.3),rgba(192,132,252,.3));border-radius:1px"></div>
|
| 214 |
</div>
|
| 215 |
|
|
|
|
| 219 |
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
|
| 220 |
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(127,255,219,.15),rgba(127,255,219,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(127,255,219,.2)">🔏</div>
|
| 221 |
<div><div style="color:var(--mint);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Shield</span>™</div>
|
| 222 |
+
<div style="color:#64748b;font-size:11px">Post-embed Protection — 4-Layer Patented Defense</div></div>
|
| 223 |
</div>
|
| 224 |
<div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
|
| 225 |
<div class="story" style="font-size:13px;line-height:1.9">
|
| 226 |
+
Four invisible layers of protection hide within your text.<br>
|
| 227 |
+
If an attacker removes one, <span style="color:var(--mint)">other layers generate evidence</span>.<br><br>
|
| 228 |
+
<span style="color:var(--mint)">▸</span> <strong>StealthMark Phantom™</strong> — Mark that hides like a ghost<br>
|
| 229 |
+
<span style="color:var(--purple)">▸</span> <strong>StealthMark StyleDNA™</strong> — Writing has DNA too<br>
|
| 230 |
+
<span style="color:var(--yellow)">▸</span> <strong>StealthMark Seal™</strong> — Digital seal that holds up in court<br>
|
| 231 |
+
<span style="color:var(--blue)">▸</span> <strong>StealthMark MicroGlyph™</strong> — Invisible micro-engraving
|
| 232 |
</div>
|
| 233 |
</div>
|
| 234 |
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
|
| 235 |
+
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">34</div><div style="font-size:10px;color:#94a3b8">Attack Coverage</div></div>
|
| 236 |
+
<div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">0px</div><div style="font-size:10px;color:#94a3b8">Zero Visibility</div></div>
|
| 237 |
</div>
|
| 238 |
<div style="padding:12px 14px;border-radius:10px;background:rgba(192,132,252,.04);border:1px solid rgba(192,132,252,.1)">
|
| 239 |
+
<div style="color:var(--purple);font-size:12px;font-weight:700;margin-bottom:4px">💡 CrossGuard™ Principle</div>
|
| 240 |
+
<div style="color:#cbd5e1;font-size:12px;line-height:1.7">Like a bank vault with dual locks, <strong style="color:#fff">if one shield breaks, the other automatically leaves evidence.</strong> No single attack can disable both simultaneously.</div>
|
| 241 |
</div>
|
| 242 |
</div>
|
| 243 |
</div>
|
|
|
|
| 246 |
<div style="text-align:center;margin-top:28px">
|
| 247 |
<div style="display:inline-block;padding:18px 36px;border-radius:16px;background:linear-gradient(135deg,rgba(255,170,102,.05),rgba(127,255,219,.05),rgba(192,132,252,.05));border:1px solid rgba(255,255,255,.08)">
|
| 248 |
<div style="display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap">
|
| 249 |
+
<div><span style="color:var(--orange);font-weight:800;font-size:15px">Day 0</span><br><span style="color:#94a3b8;font-size:11px">Text+Image Radar™</span></div>
|
| 250 |
<span style="color:#334155;font-size:18px">→</span>
|
| 251 |
+
<div><span style="color:var(--mint);font-weight:800;font-size:15px">Shield™ Embed</span><br><span style="color:#94a3b8;font-size:11px">4-Layer Protection Active</span></div>
|
| 252 |
<span style="color:#334155;font-size:18px">→</span>
|
| 253 |
+
<div><span style="color:var(--purple);font-weight:800;font-size:15px">DualAxis™ Detection</span><br><span style="color:#94a3b8;font-size:11px">Dual-Axis Cross Verdict</span></div>
|
| 254 |
<span style="color:#334155;font-size:18px">→</span>
|
| 255 |
+
<div><span style="color:var(--red);font-weight:800;font-size:15px">Seal™ Handoff</span><br><span style="color:#94a3b8;font-size:11px">Legal Evidence Package</span></div>
|
| 256 |
</div></div>
|
| 257 |
</div>
|
| 258 |
</div>
|
| 259 |
|
| 260 |
+
<!-- ★ 4-Layer Protection Storytelling -->
|
| 261 |
<div style="padding:40px 0 50px">
|
| 262 |
+
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:12px">How does <span style="color:var(--mint)">4-Layer Protection</span> work?</h2>
|
| 263 |
+
<p style="text-align:center;color:#94a3b8;font-size:13px;margin-bottom:36px">Easy to understand without technical expertise</p>
|
| 264 |
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto">
|
| 265 |
|
| 266 |
<div class="cd fi" style="border-color:rgba(96,165,250,.2);background:linear-gradient(160deg,rgba(96,165,250,.03),var(--card) 50%)">
|
|
|
|
| 268 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(96,165,250,.1);display:flex;align-items:center;justify-content:center;font-size:22px">👻</div>
|
| 269 |
<div><div style="color:var(--blue);font-weight:800;font-size:15px">StealthMark Phantom™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">INVISIBLE MARK</div></div>
|
| 270 |
</div>
|
| 271 |
+
<div class="story" style="font-size:13px">types is like signing with <strong>invisible ink</strong>. Invisible to the naked eye, but shows up clearly under special equipment. Even copying or scanning preserves the signature.</div>
|
| 272 |
</div>
|
| 273 |
|
| 274 |
<div class="cd fi d1" style="border-color:rgba(127,255,219,.2);background:linear-gradient(160deg,rgba(127,255,219,.03),var(--card) 50%)">
|
|
|
|
| 276 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(127,255,219,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🧬</div>
|
| 277 |
<div><div style="color:var(--mint);font-weight:800;font-size:15px">StealthMark StyleDNA™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">STYLISTIC FINGERPRINT</div></div>
|
| 278 |
</div>
|
| 279 |
+
<div class="story" style="font-size:13px">Just as everyone has a unique <strong>gait</strong>, writing has its own rhythm. StyleDNA™ subtly tunes this rhythm to create a unique fingerprint. No matter how much AI rewrites it, traces of the rhythm remain.</div>
|
| 280 |
</div>
|
| 281 |
|
| 282 |
<div class="cd fi d2" style="border-color:rgba(255,224,102,.2);background:linear-gradient(160deg,rgba(255,224,102,.03),var(--card) 50%)">
|
|
|
|
| 284 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(255,224,102,.1);display:flex;align-items:center;justify-content:center;font-size:22px">📋</div>
|
| 285 |
<div><div style="color:var(--yellow);font-weight:800;font-size:15px">StealthMark Seal™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">FORENSIC EVIDENCE</div></div>
|
| 286 |
</div>
|
| 287 |
+
<div class="story" style="font-size:13px">Like a notary's <strong>authentication stamp</strong>. The record that "this text was protected on March 15, 2025 at 14:23" is sealed in a tamper-proof form. Admissible as evidence in court.</div>
|
| 288 |
</div>
|
| 289 |
|
| 290 |
<div class="cd fi d3" style="border-color:rgba(192,132,252,.2);background:linear-gradient(160deg,rgba(192,132,252,.03),var(--card) 50%)">
|
|
|
|
| 292 |
<div style="width:44px;height:44px;border-radius:12px;background:rgba(192,132,252,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🔬</div>
|
| 293 |
<div><div style="color:var(--purple);font-weight:800;font-size:15px">StealthMark MicroGlyph™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">MICRO ENGRAVING</div></div>
|
| 294 |
</div>
|
| 295 |
+
<div class="story" style="font-size:13px">Like <strong>micro-engraving</strong> on a gemstone. Invisible micro-codes are carved into every punctuation mark. If Phantom™ is attacked, MicroGlyph™ survives — and vice versa.</div>
|
| 296 |
</div>
|
| 297 |
</div>
|
| 298 |
|
|
|
|
| 300 |
<div class="cd" style="text-align:center;border-color:rgba(127,255,219,.15);background:linear-gradient(135deg,rgba(127,255,219,.03),rgba(192,132,252,.03))">
|
| 301 |
<div style="font-size:20px;margin-bottom:6px">⚖️</div>
|
| 302 |
<div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:10px">StealthMark CrossGuard™</div>
|
| 303 |
+
<div class="story" style="font-size:13px;max-width:600px;margin:0 auto"><strong>Dual-lock vault</strong> principle. Phantom™ and MicroGlyph™ exist on different technology layers. If an attacker removes one — <span style="color:var(--red)">the removal trace itself becomes evidence</span>. <span style="color:var(--mint)">Destroying both simultaneously is physically impossible.</span></div>
|
| 304 |
</div>
|
| 305 |
</div>
|
| 306 |
</div>
|
|
|
|
| 308 |
<!-- ★ DualAxis -->
|
| 309 |
<div style="padding:40px 0 50px">
|
| 310 |
<h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:8px">StealthMark <span style="color:var(--mint)">DualAxis</span>™</h2>
|
| 311 |
+
<p style="text-align:center;color:#94a3b8;font-size:13px;margin-bottom:32px">Whether the watermark is alive or dead — the verdict remains valid</p>
|
| 312 |
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;max-width:700px;margin:0 auto;align-items:center">
|
| 313 |
+
<div class="cd fi" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(127,255,219,.03));border-color:rgba(127,255,219,.2)"><div style="font-size:36px;margin-bottom:8px">📡</div><div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:8px">Signal</div><div class="story" style="font-size:12px">If watermark is alive<br><strong>direct detection</strong> proves ownership</div></div>
|
| 314 |
<div style="text-align:center;font-size:28px;color:#475569;animation:breathe 2s ease infinite">+</div>
|
| 315 |
+
<div class="cd fi d2" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(192,132,252,.03));border-color:rgba(192,132,252,.2)"><div style="font-size:36px;margin-bottom:8px">🔍</div><div style="color:var(--purple);font-weight:800;font-size:16px;margin-bottom:8px">Trace</div><div class="story" style="font-size:12px">If watermark was attacked<br><strong>attack trace</strong> is evidence</div></div>
|
| 316 |
</div>
|
| 317 |
+
<div style="text-align:center;margin-top:20px"><div style="display:inline-block;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg,rgba(127,255,219,.06),rgba(192,132,252,.06));border:1px solid rgba(127,255,219,.2)"><span style="color:#fff;font-weight:700;font-size:14px">Alive →</span><span style="color:var(--mint);font-weight:800"> Direct Evidence</span><span style="color:#475569;margin:0 8px">|</span><span style="color:#fff;font-weight:700;font-size:14px">Dead →</span><span style="color:var(--red);font-weight:800"> Killing trace is evidence</span></div></div>
|
| 318 |
</div>
|
| 319 |
|
| 320 |
<!-- ★ Competitive Edge -->
|
| 321 |
<div style="padding:30px 0 50px">
|
| 322 |
+
<h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:28px">Why <span style="color:var(--mint)">StealthMark</span>?</h2>
|
| 323 |
<div style="max-width:820px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border)">
|
| 324 |
<table style="width:100%;border-collapse:collapse;font-size:13px">
|
| 325 |
+
<thead><tr style="background:#0f1629"><th style="padding:14px 16px;text-align:left;color:#94a3b8;font-weight:700;border-bottom:2px solid var(--border)">Feature</th><th style="padding:14px 16px;text-align:center;border-bottom:2px solid rgba(127,255,219,.3)"><span style="color:var(--mint);font-weight:800">StealthMark</span></th><th style="padding:14px 16px;text-align:center;color:#64748b;font-weight:700;border-bottom:2px solid var(--border)">Competitor A</th><th style="padding:14px 16px;text-align:center;color:#64748b;font-weight:700;border-bottom:2px solid var(--border)">Competitor B</th></tr></thead>
|
| 326 |
<tbody id="compTb"></tbody>
|
| 327 |
</table>
|
| 328 |
</div>
|
|
|
|
| 330 |
|
| 331 |
<!-- ★ Customer Journey -->
|
| 332 |
<div style="padding:20px 0 80px">
|
| 333 |
+
<h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:32px">Customer Journey <span style="color:var(--orange)">Timeline</span></h2>
|
| 334 |
<div style="max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
|
| 335 |
+
<div class="cd fi" style="text-align:center;border-color:rgba(255,170,102,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">📋</div><div style="color:var(--orange);font-weight:800;font-size:20px;margin-bottom:4px">Day 0</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Instant Start</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Radar™ Activate<br>Text+Image Archive<br>Instant Monitoring</div></div>
|
| 336 |
+
<div class="cd fi d1" style="text-align:center;border-color:rgba(127,255,219,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🔏</div><div style="color:var(--mint);font-weight:800;font-size:20px;margin-bottom:4px">Week 1</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Shield™ Embedding Complete</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Text 4-Layer Protection<br>Image DCT Watermark<br>Zero Visibility</div></div>
|
| 337 |
+
<div class="cd fi d2" style="text-align:center;border-color:rgba(192,132,252,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🎯</div><div style="color:var(--purple);font-weight:800;font-size:20px;margin-bottom:4px">Month 1</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">First Detection Report</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Unauthorized Use Detection<br>DualAxis™ Analysis<br>Evidence Package Generation</div></div>
|
| 338 |
+
<div class="cd fi d3" style="text-align:center;border-color:rgba(255,107,107,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">⚖️</div><div style="color:var(--red);font-weight:800;font-size:20px;margin-bottom:4px">Month 2+</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Legal Action</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Seal™ Evidence<br>Settlement/Litigation<br>ROI Recovery</div></div>
|
| 339 |
</div>
|
| 340 |
+
<div style="text-align:center;margin-top:24px"><div style="display:inline-block;padding:14px 28px;border-radius:14px;background:var(--card);border:1px solid var(--border)"><span style="color:#94a3b8;font-size:13px">/mo Catch just 1 unauthorized use →</span><span style="color:var(--mint);font-weight:800;font-size:15px"> Protect millions in annual content value</span></div></div>
|
| 341 |
</div>
|
| 342 |
</section>
|
| 343 |
|
| 344 |
<!-- ═══════════════ LEADERBOARD ═══════════════ -->
|
| 345 |
<section id="lb">
|
| 346 |
<div style="padding:40px 0 80px">
|
| 347 |
+
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">TECHNOLOGY BENCHMARK</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:#fff">Content Protection </span><span style="color:var(--mint)">Tech Comparison</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px">Text watermarking 6-axis quantitative comparison + Image/Video multimodal support</p></div>
|
| 348 |
<div style="display:grid;grid-template-columns:1fr 280px;gap:24px">
|
| 349 |
+
<div class="cd fi" style="padding:0;overflow:hidden"><div class="lh"><span>#</span><span>Tech</span><span>Type</span><span style="text-align:center">🛡️</span><span style="text-align:center">🏗️</span><span style="text-align:center">🇰🇷</span><span style="text-align:center">⚡</span><span style="text-align:center">🔍</span><span style="text-align:center">⚖️</span><span style="text-align:center">typesTotal</span></div><div id="lbb"></div></div>
|
| 350 |
<div class="cd fi d2" id="lbd" style="text-align:center"></div>
|
| 351 |
</div>
|
| 352 |
+
<div style="display:flex;gap:16px;justify-content:center;margin-top:20px;flex-wrap:wrap"><span style="font-size:11px;color:#64748b">🛡️Threats 🏗️Defense 🇰🇷Korean ⚡Real-time 🔍Trace Detection ⚖️Legal Evidence</span><span style="font-size:11px;color:#334155">|</span><span style="font-size:11px;color:var(--mint)">●80+</span><span style="font-size:11px;color:var(--yellow)">●50+</span><span style="font-size:11px;color:var(--orange)">●25+</span><span style="font-size:11px;color:var(--red)">●0+</span></div>
|
| 353 |
</div>
|
| 354 |
</section>
|
| 355 |
|
| 356 |
<!-- ═══════════════ THREATS ═══════════════ -->
|
| 357 |
<section id="atk">
|
| 358 |
<div style="padding:40px 0">
|
| 359 |
+
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--red);font-weight:700;letter-spacing:3px;margin-bottom:8px">STEALTHMARK THREATMATRIX™</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px">34types Threat <span style="color:var(--mint)">Coverage</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px">7 threat groups × 34 scenarios — layer survival status</p></div>
|
| 360 |
<div class="ag" id="agg"></div>
|
| 361 |
<div class="cd fi" style="margin-top:32px">
|
| 362 |
+
<h3 style="font-size:16px;font-weight:800;text-align:center;margin-bottom:20px;color:#fff">StealthMark <span style="color:var(--mint)">CrossGuard™</span> Dual Shield</h3>
|
| 363 |
<div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;max-width:600px;margin:0 auto">
|
| 364 |
+
<div style="text-align:center;padding:16px;border-radius:12px;background:rgba(255,107,107,.06);border:1px solid rgba(255,107,107,.2)"><div style="font-weight:800;color:var(--red);margin-bottom:6px">Phantom™ Attacked</div><div style="font-size:20px;margin-bottom:4px">❌ → ✅</div><div style="font-size:11px;color:#94a3b8">Phantom disabled → MicroGlyph survives</div></div>
|
| 365 |
+
<div style="text-align:center;font-size:28px;animation:float 2s ease infinite">⚖️<div style="font-size:10px;color:var(--mint);font-weight:700;margin-top:4px">Seesaw</div></div>
|
| 366 |
+
<div style="text-align:center;padding:16px;border-radius:12px;background:rgba(192,132,252,.06);border:1px solid rgba(192,132,252,.2)"><div style="font-weight:800;color:var(--purple);margin-bottom:6px">MicroGlyph™ Attacked</div><div style="font-size:20px;margin-bottom:4px">✅ → ❌</div><div style="font-size:11px;color:#94a3b8">MicroGlyph disabled → Phantom survives</div></div>
|
| 367 |
</div>
|
| 368 |
+
<div style="text-align:center;margin-top:16px;padding:10px 20px;border-radius:10px;background:rgba(127,255,219,.04)"><span style="color:var(--mint);font-weight:800;font-size:13px">No single attack can disable both simultaneously</span> <span style="color:#64748b;font-size:12px">+ StyleDNA™ survives any attack</span></div>
|
| 369 |
</div>
|
| 370 |
</div>
|
| 371 |
</section>
|
|
|
|
| 373 |
<!-- ═══════════════ PIPELINE ═══════════════ -->
|
| 374 |
<section id="pipe">
|
| 375 |
<div style="padding:40px 0 80px">
|
| 376 |
+
<div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">BUSINESS PIPELINE</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:var(--orange)">Radar™</span> → <span style="color:var(--mint)">Shield™</span> → <span style="color:var(--red)">Seal™</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px">Text · Image · Video — Complete Content Protection Lifecycle</p></div>
|
| 377 |
<div class="rs">
|
| 378 |
<div class="rr" style="top:35%;left:35%;width:30%;height:30%;border-color:rgba(127,255,219,.12)"></div>
|
| 379 |
<div class="rr" style="top:22.5%;left:22.5%;width:55%;height:55%;border-color:rgba(127,255,219,.1)"></div>
|
| 380 |
<div class="rr" style="top:10%;left:10%;width:80%;height:80%;border-color:rgba(127,255,219,.08)"></div>
|
| 381 |
<div class="rr" style="top:0;left:0;width:100%;height:100%;border-color:rgba(127,255,219,.15)"></div>
|
| 382 |
<div class="rw"><div class="ra"></div></div><div class="rc"></div>
|
| 383 |
+
<div class="rb" style="top:25%;left:30%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red)"></div><div class="rl" style="color:var(--red)">AI Platforms A</div></div>
|
| 384 |
+
<div class="rb" style="top:35%;left:70%"><div class="rd" style="background:var(--orange);box-shadow:0 0 8px var(--orange);animation-delay:.5s"></div><div class="rl" style="color:var(--orange)">Datasets B</div></div>
|
| 385 |
+
<div class="rb" style="top:72%;left:55%"><div class="rd" style="background:var(--yellow);box-shadow:0 0 8px var(--yellow);animation-delay:1s"></div><div class="rl" style="color:var(--yellow)">Competitors C</div></div>
|
| 386 |
+
<div class="rb" style="top:65%;left:20%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red);animation-delay:1.5s"></div><div class="rl" style="color:var(--red)">Crawlers D</div></div>
|
| 387 |
<div style="position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mint);font-weight:700">📡 StealthMark Radar™</div>
|
| 388 |
</div>
|
| 389 |
<div style="position:relative;max-width:700px;margin:0 auto" id="psteps"><div class="pl"></div></div>
|
| 390 |
<div style="text-align:center;margin-top:48px">
|
| 391 |
<div class="cd" style="display:inline-block;padding:24px 40px;border-radius:20px;background:linear-gradient(135deg,var(--card),var(--card2));border-color:rgba(127,255,219,.2)">
|
| 392 |
+
<div style="font-size:18px;font-weight:800;color:#fff;margin-bottom:8px">Content ID-based <span style="color:var(--mint)">Auto Detection</span> → <span style="color:var(--red)">Legal Team Handoff</span></div>
|
| 393 |
+
<div style="color:#94a3b8;font-size:13px;line-height:1.7">Radar™ periodically scans key targets → DualAxis™ cross-verification<br>Seal™ auto-generates Evidence Packages → handed off to legal team</div>
|
| 394 |
<div style="display:flex;gap:12px;justify-content:center;margin-top:16px">
|
| 395 |
+
<span style="padding:6px 14px;border-radius:8px;background:rgba(127,255,219,.08);color:var(--mint);font-size:12px;font-weight:700">Unauthorized Training Detection</span>
|
| 396 |
+
<span style="padding:6px 14px;border-radius:8px;background:rgba(192,132,252,.08);color:var(--purple);font-size:12px;font-weight:700">Copyright Infringement Proof</span>
|
| 397 |
+
<span style="padding:6px 14px;border-radius:8px;background:rgba(255,107,107,.08);color:var(--red);font-size:12px;font-weight:700">Settlement/Litigation Support</span>
|
| 398 |
</div></div></div>
|
| 399 |
</div>
|
| 400 |
</section>
|
| 401 |
</main>
|
| 402 |
+
<footer>StealthMark — Text · Image · Video Unified Content Protection Platform | Phantom™ · StyleDNA™ · Seal™ · MicroGlyph™ · CrossGuard™ · DualAxis™ · Radar™ | © 2025 Ginigen AI</footer>
|
| 403 |
|
| 404 |
<script>
|
| 405 |
const D=[
|
| 406 |
+
{r:1,b:"🥇",n:"StealthMark",c:"🇰🇷",t:"Commercial",d:"4-Layer Patent Defense + DualAxis™ + Radar™",s:[100,100,100,95,100,95],T:98,cl:"var(--mint)",h:["ThreatMatrix™ 34types Coverage","CrossGuard™ Dual Shield","DualAxis™ Trace Verdict"]},
|
| 407 |
+
{r:2,b:"🥈",n:"Embedding-based Academic",c:"🇰🇷",t:"Academic",d:"Semantic vector similarity based",s:[70,50,60,30,40,45],T:49,cl:"#94a3b8",h:["Partial paraphrasing response","Real-time difficult","GPU required"]},
|
| 408 |
+
{r:3,b:"🥉",n:"SynthID-Text",c:"🇺🇸",t:"Commercial",d:"Google — LLM only",s:[65,25,10,80,0,30],T:35,cl:"#94a3b8",h:["LLM output only","No Korean support"]},
|
| 409 |
+
{r:4,b:"4",n:"Stats-based WM",c:"🇺🇸",t:"Academic",d:"Token probability distribution manipulation",s:[55,25,20,70,0,25],T:33,cl:"#64748b",h:["Weak against paraphrasing","Model access required"]},
|
| 410 |
+
{r:5,b:"5",n:"Single Channel WM",c:"🌐",t:"Open Source",d:"Single invisible char only",s:[40,25,50,90,0,15],T:37,cl:"#64748b",h:["Single attack destroys all","No legal evidence"]},
|
| 411 |
+
{r:6,b:"6",n:"OpenAI Text WM",c:"🇺🇸",t:"Commercial",d:"Stats-based — Project discontinued",s:[50,25,15,75,10,35],T:35,cl:"#64748b",h:["Weak paraphrasing","Project discontinued"]}
|
| 412 |
];
|
| 413 |
+
const AX=["Threat","Defense","Korean","Realtime","Trace","Legal"],IC=["🛡️","🏗️","🇰🇷","⚡","🔍","⚖️"];
|
| 414 |
const AG=[
|
| 415 |
+
{i:"🔤",n:"Normalization",c:4,rk:"layers",cl:"var(--blue)",a:["NFC","NFKC","NFD","NFKD"],sv:["✅","⚠️","✅"],d:"Attacks that normalize text to standard form"},
|
| 416 |
+
{i:"👻",n:"Invisible Removal",c:5,rk:"High",cl:"var(--red)",a:["Partial Removal","Full Removal","By Category","Combined Removal","Printable Only"],sv:["❌→Trace","✅","✅"],d:"Attacks targeting Phantom™ directly"},
|
| 417 |
+
{i:"🎯",n:"Micro Targeting",c:3,rk:"Max",cl:"var(--purple)",a:["Full Removal","Partial A","Partial B"],sv:["✅","✅","❌→Trace"],d:"Attacks targeting MicroGlyph™ directly"},
|
| 418 |
+
{i:"✏️",n:"Edit Cleanup",c:5,rk:"Low~High",cl:"var(--yellow)",a:["Whitespace","Newlines","Punct Unify","Punct Remove","Cleanup"],sv:["✅","✅","✅"],d:"Standard text editing/cleanup"},
|
| 419 |
+
{i:"🧩",n:"Extreme Purification",c:5,rk:"Max",cl:"var(--orange)",a:["Basic Chars","Alphanumeric","Lowercase","Homoglyph","Emoji Remove"],sv:["⚠️","✅","⚠️"],d:"Attacks that extremely purify text"},
|
| 420 |
+
{i:"🧠",n:"Semantic Rewrite",c:8,rk:"Tier1 Threat",cl:"var(--pink)",a:["Paraphrasing","Summary","Back-trans","Reorder","Excerpt","Style Shift","Split","Collage"],sv:["⚠️","✅","✅"],d:"AI rewrites while preserving meaning"}
|
| 421 |
];
|
| 422 |
const PS=[
|
| 423 |
+
{i:"📡",t:"Radar™ Activate",d:"Instant monitoring of existing content",dt:"Contract Day 0 — Archive-wide protection",cl:"var(--orange)"},
|
| 424 |
+
{i:"🔏",t:"Shield™ Embed",d:"Activate 4-layer protection on new content",dt:"Phantom + StyleDNA + Seal + MicroGlyph",cl:"var(--mint)"},
|
| 425 |
+
{i:"📡",t:"Content Distribution",d:"Watermark is fully invisible — normal distribution",dt:"Zero impact on readers and users",cl:"var(--blue)"},
|
| 426 |
+
{i:"🔍",t:"DualAxis™ Detection",d:"Signal + Trace dual-axis cross verdict",dt:"Attack profiling via multi-pipeline",cl:"var(--purple)"},
|
| 427 |
+
{i:"📋",t:"Seal™ Evidence",d:"Auto-generate legal evidence report",dt:"Digital seal + timestamp + analysis log",cl:"var(--yellow)"},
|
| 428 |
+
{i:"⚖️",t:"Legal Handoff",d:"Deliver evidence package to legal team",dt:"Copyright infringement lawsuit, settlement & correction",cl:"var(--red)"}
|
| 429 |
];
|
| 430 |
const COMP=[
|
| 431 |
+
{f:"Pre-embed Text Protection",sm:"✅ Radar™ 7 modes",a:"❌",b:"❌",h:true},
|
| 432 |
+
{f:"Text Watermark",sm:"✅ 4-Layer Patent Tech",a:"⚠️ Single channel",b:"⚠️ Statistics-based"},
|
| 433 |
+
{f:"🖼️ Image Similarity Detection",sm:"✅ 5-Mode AI Analysis",a:"❌",b:"❌",h:true},
|
| 434 |
+
{f:"🖼️ Image Watermark",sm:"✅ DCT Frequency Domain",a:"❌",b:"⚠️ Pixel only"},
|
| 435 |
+
{f:"🎬 Video Protection",sm:"✅ DTW + DCT Propagation",a:"❌",b:"❌"},
|
| 436 |
+
{f:"Korean Optimization",sm:"✅ Morpheme-based",a:"❌",b:"❌"},
|
| 437 |
+
{f:"Threat Coverage",sm:"✅ 34types 100%",a:"⚠️ 5-10 types",b:"⚠️ Weak"},
|
| 438 |
+
{f:"Dual-Axis Verdict",sm:"✅ DualAxis™",a:"❌",b:"❌"},
|
| 439 |
+
{f:"Legal Evidence Package",sm:"✅ Seal™ Auto",a:"❌",b:"⚠️ Manual"},
|
| 440 |
+
{f:"Multimodal Integration",sm:"✅ Text+Image+Video",a:"❌ Text only",b:"❌ Image only",h:true}
|
| 441 |
];
|
| 442 |
const ctb=document.getElementById('compTb');
|
| 443 |
if(ctb)ctb.innerHTML=COMP.map(c=>{const hl=c.h?'background:rgba(255,170,102,.03);':'';const fc=c.h?'color:var(--orange);font-weight:700':'color:#cbd5e1';return `<tr style="${hl}border-bottom:1px solid var(--border)"><td style="padding:10px 16px;${fc};font-size:13px">${c.f}</td><td style="padding:10px 16px;text-align:center;font-size:12px;font-weight:600;color:${c.sm.startsWith('✅')?'var(--mint)':'#94a3b8'}">${c.sm}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:#64748b">${c.a}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:#64748b">${c.b}</td></tr>`}).join('');
|
| 444 |
|
| 445 |
document.querySelectorAll('.tb').forEach(b=>{b.onclick=()=>{document.querySelectorAll('.tb').forEach(x=>x.classList.remove('a'));b.classList.add('a');document.querySelectorAll('section').forEach(s=>s.classList.remove('a'));document.getElementById(b.dataset.t).classList.add('a')}});
|
| 446 |
|
| 447 |
+
const MET=[{v:34,s:"types",l:"Text Threats",u:"ThreatMatrix™ 100%",cl:"var(--mint)"},{v:4,s:"layers",l:"Text Layers",u:"CrossGuard™ Dual Shield",cl:"var(--purple)"},{v:5,s:"modes",l:"Image Analysis",u:"Hash+SSIM+Color+Feature",cl:"var(--pink)"},{v:7,s:"modes",l:"Radar™",u:"Instant pre-embed protection",cl:"var(--orange)"},{v:3,s:"axes",l:"Multimodal",u:"Text+Image+Video",cl:"var(--blue)"},{v:0,s:"px",l:"Visibility",u:"Fully Transparent",cl:"var(--red)",fix:"0"}];
|
| 448 |
document.getElementById('metrics').innerHTML=MET.map((m,i)=>`<div class="mc fi d${i+1}" style="border:1px solid color-mix(in srgb,${m.cl} 15%,transparent)"><div style="font-size:36px;font-weight:900;color:${m.cl}">${m.fix||'<span class="ctr" data-e="'+m.v+'">0</span>'}${m.s}</div><div style="font-size:13px;font-weight:700;color:#fff;margin-bottom:2px">${m.l}</div><div style="font-size:10px;color:#64748b">${m.u}</div></div>`).join('');
|
| 449 |
const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.querySelectorAll('.ctr').forEach(el=>{if(el.dataset.done)return;el.dataset.done='1';const end=+el.dataset.e,st=performance.now();(function f(n){const p=Math.min((n-st)/1500,1);el.textContent=Math.round((1-Math.pow(1-p,3))*end);if(p<1)requestAnimationFrame(f)})(st)})})},{threshold:.3});
|
| 450 |
document.querySelectorAll('.mc').forEach(e=>obs.observe(e));
|
| 451 |
|
| 452 |
let sel=0;
|
| 453 |
function sc(v){return v>=80?'var(--mint)':v>=50?'var(--yellow)':v>=25?'var(--orange)':'var(--red)'}
|
| 454 |
+
function tc(t){return t==='Commercial'?'var(--mint)':t==='Academic'?'var(--purple)':'#94a3b8'}
|
| 455 |
+
function tbc(t){return t==='Commercial'?'rgba(127,255,219,.08)':t==='Academic'?'rgba(192,132,252,.08)':'#1e293b'}
|
| 456 |
function bLB(){document.getElementById('lbb').innerHTML=D.map((c,i)=>`<div class="lr${i===sel?' sel':''}" onclick="sel=${i};bLB();bDt()"><span style="font-size:${c.r<=3?18:13}px;font-weight:800;${c.r>3?'color:#64748b':''}">${c.b}</span><div><div style="font-weight:700;font-size:13px;color:${c.r===1?'var(--mint)':'#e2e8f0'}">${c.c} ${c.n}</div><div style="font-size:10px;color:#64748b;margin-top:1px">${c.d}</div></div><span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${tbc(c.t)};color:${tc(c.t)};font-weight:600;text-align:center">${c.t}</span>${c.s.map(s=>`<span style="text-align:center;font-size:12px;font-weight:700;color:${sc(s)}">${s}</span>`).join('')}<span style="text-align:center;font-size:16px;font-weight:900;color:${c.r===1?'var(--mint)':c.cl}">${c.T}</span></div>`).join('')}
|
| 457 |
function bDt(){const c=D[sel],m=c.r===1,bc=m?'var(--mint)':'#94a3b8';const sz=200,cx=100,cy=100,r=76,st=Math.PI/3;const pt=(v,i)=>({x:cx+(r*v/100)*Math.cos(st*i*2-Math.PI/2),y:cy+(r*v/100)*Math.sin(st*i*2-Math.PI/2)});let svg='';[25,50,75,100].forEach(lv=>{const ps=Array.from({length:6},(_,i)=>pt(lv,i));svg+=`<polygon points="${ps.map(p=>p.x+','+p.y).join(' ')}" fill="none" stroke="#334155" stroke-width="${lv===100?1.5:.5}" ${lv<100?'stroke-dasharray="2,3"':''}/>`;});Array.from({length:6},(_,i)=>{const p=pt(100,i);svg+=`<line x1="${cx}" y1="${cy}" x2="${p.x}" y2="${p.y}" stroke="#334155" stroke-width=".5"/>`;});const dp=c.s.map((s,i)=>pt(s,i));svg+=`<polygon points="${dp.map(p=>p.x+','+p.y).join(' ')}" fill="${m?'rgba(127,255,219,.12)':'rgba(148,163,184,.12)'}" stroke="${bc}" stroke-width="2"/>`;dp.forEach(p=>{svg+=`<circle cx="${p.x}" cy="${p.y}" r="3.5" fill="${bc}" stroke="var(--bg)" stroke-width="1.5"/>`;});IC.forEach((ic,i)=>{const p=pt(120,i);svg+=`<text x="${p.x}" y="${p.y}" text-anchor="middle" dominant-baseline="middle" fill="#94a3b8" font-size="10">${ic}</text>`;});document.getElementById('lbd').innerHTML=`<div style="font-size:28px;margin-bottom:4px">${c.b}</div><div style="font-weight:800;font-size:16px;color:${m?'var(--mint)':'#fff'}">${c.n}</div><div style="font-size:11px;color:#64748b;margin:4px 0 12px">${c.d}</div><div style="display:flex;justify-content:center;margin-bottom:12px"><svg width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">${svg}</svg></div>${AX.map((a,i)=>`<div class="sr"><span class="sl">${IC[i]} ${a}</span><div class="st"><div class="sf" style="width:${c.s[i]}%;background:linear-gradient(90deg,${bc}88,${bc});animation-delay:${i*80}ms"></div></div><span class="sn" style="color:${bc}">${c.s[i]}</span></div>`).join('')}<div style="margin-top:16px;text-align:left">${c.h.map(h=>`<div style="padding:3px 0;font-size:11px;color:#94a3b8"><span style="color:${m?'var(--mint)':'#64748b'};margin-right:6px">→</span>${h}</div>`).join('')}</div>`}
|
| 458 |
bLB();bDt();
|
| 459 |
|
| 460 |
const SL=["Phantom™","StyleDNA™","MicroGlyph™"];
|
| 461 |
+
document.getElementById('agg').innerHTML=AG.map((g,i)=>`<div class="ac fi" style="animation-delay:${i*.08}s;border:1px solid color-mix(in srgb,${g.cl} 20%,transparent)"><div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px"><div><span style="font-size:24px;margin-right:8px">${g.i}</span><span style="font-weight:800;font-size:15px;color:#fff">${g.n}</span></div><span style="padding:3px 10px;border-radius:8px;background:color-mix(in srgb,${g.cl} 12%,transparent);color:${g.cl};font-size:11px;font-weight:700">${g.rk}</span></div><div style="font-size:12px;color:#cbd5e1;margin-bottom:12px;line-height:1.5">${g.d}</div><div style="margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px">${g.a.map(a=>`<span class="at">${a}</span>`).join('')}</div><div class="svr">${SL.map((l,j)=>`<div class="svi"><div class="svl">${l}</div><div class="svv">${g.sv[j]}</div></div>`).join('')}</div><div style="text-align:center;margin-top:8px"><span style="font-size:22px;font-weight:900;color:${g.cl}">${g.c}</span><span style="font-size:11px;color:#64748b;margin-left:4px">types</span></div></div>`).join('');
|
| 462 |
|
| 463 |
document.getElementById('psteps').innerHTML='<div class="pl"></div>'+PS.map((s,i)=>`<div class="ps fi" style="animation-delay:${i*.1}s"><div class="pn" style="background:color-mix(in srgb,${s.cl} 8%,transparent);border:2px solid color-mix(in srgb,${s.cl} 30%,transparent)">${s.i}</div><div class="cd" style="flex:1;padding:14px 20px;border-color:color-mix(in srgb,${s.cl} 15%,transparent)"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="color:${s.cl};font-weight:800;font-size:14px">${s.t}</span><span style="font-size:10px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,${s.cl} 8%,transparent);color:${s.cl};font-weight:700">Step ${i+1}</span></div><div style="color:#e2e8f0;font-size:13px;margin-bottom:4px">${s.d}</div><div style="color:#64748b;font-size:11px">${s.dt}</div></div></div>`).join('');
|
| 464 |
</script>
|