|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image Poison Shield - Next-Generation AI Protection Technology</title> |
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
|
|
|
:root { |
|
|
--accent-color: #2C8C84; |
|
|
--accent-secondary: #A37848; |
|
|
--accent-gradient: linear-gradient(135deg, #2C8C84, #3CD0C9); |
|
|
--accent-hover: #3CD0C9; |
|
|
--success-color: #2C8C84; |
|
|
--error-color: #ff6b9d; |
|
|
--warning-color: #A37848; |
|
|
--premium-gold: #A37848; |
|
|
--premium-silver: #2C8C84; |
|
|
} |
|
|
|
|
|
|
|
|
:root, |
|
|
[data-theme="dark"] { |
|
|
--background-color: #0B0B0B; |
|
|
--primary-color: #1a1a1a; |
|
|
--card-bg: rgba(27, 24, 22, 0.8); |
|
|
--text-color: #e8e8f2; |
|
|
--text-secondary: #a0a0c0; |
|
|
--border-color: #2a2826; |
|
|
--glass-effect: rgba(44, 140, 132, 0.05); |
|
|
--code-bg: #1a1a1a; |
|
|
|
|
|
|
|
|
--shadow-premium: 0 10px 30px rgba(44, 140, 132, 0.25); |
|
|
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5); |
|
|
--glow-accent: 0 0 20px rgba(44, 140, 132, 0.4); |
|
|
|
|
|
|
|
|
--bg-pattern-primary: rgba(44, 140, 132, 0.08); |
|
|
--bg-pattern-secondary: rgba(60, 208, 201, 0.06); |
|
|
--bg-pattern-tertiary: rgba(163, 120, 72, 0.04); |
|
|
--bg-pattern-base: rgba(44, 140, 132, 0.015); |
|
|
--bg-pattern-lines: rgba(44, 140, 132, 0.02); |
|
|
--bg-pattern-lines-alt: rgba(163, 120, 72, 0.015); |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: light) { |
|
|
:root { |
|
|
--background-color: #fafafa; |
|
|
--primary-color: #ffffff; |
|
|
--card-bg: rgba(255, 255, 255, 0.9); |
|
|
--text-color: #1a1a1a; |
|
|
--text-secondary: #666666; |
|
|
--border-color: #e0e0e0; |
|
|
--glass-effect: rgba(44, 140, 132, 0.08); |
|
|
--code-bg: #f5f5f5; |
|
|
|
|
|
|
|
|
--shadow-premium: 0 10px 30px rgba(44, 140, 132, 0.15); |
|
|
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1); |
|
|
--glow-accent: 0 0 20px rgba(44, 140, 132, 0.2); |
|
|
|
|
|
|
|
|
--bg-pattern-primary: rgba(44, 140, 132, 0.04); |
|
|
--bg-pattern-secondary: rgba(60, 208, 201, 0.03); |
|
|
--bg-pattern-tertiary: rgba(163, 120, 72, 0.02); |
|
|
--bg-pattern-base: rgba(44, 140, 132, 0.008); |
|
|
--bg-pattern-lines: rgba(44, 140, 132, 0.015); |
|
|
--bg-pattern-lines-alt: rgba(163, 120, 72, 0.01); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
[data-theme="light"] { |
|
|
--background-color: #fafafa; |
|
|
--primary-color: #ffffff; |
|
|
--card-bg: rgba(255, 255, 255, 0.9); |
|
|
--text-color: #1a1a1a; |
|
|
--text-secondary: #666666; |
|
|
--border-color: #e0e0e0; |
|
|
--glass-effect: rgba(44, 140, 132, 0.08); |
|
|
--code-bg: #f5f5f5; |
|
|
|
|
|
--shadow-premium: 0 10px 30px rgba(44, 140, 132, 0.15); |
|
|
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1); |
|
|
--glow-accent: 0 0 20px rgba(44, 140, 132, 0.2); |
|
|
|
|
|
--bg-pattern-primary: rgba(44, 140, 132, 0.04); |
|
|
--bg-pattern-secondary: rgba(60, 208, 201, 0.03); |
|
|
--bg-pattern-tertiary: rgba(163, 120, 72, 0.02); |
|
|
--bg-pattern-base: rgba(44, 140, 132, 0.008); |
|
|
--bg-pattern-lines: rgba(44, 140, 132, 0.015); |
|
|
--bg-pattern-lines-alt: rgba(163, 120, 72, 0.01); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
background: var(--background-color); |
|
|
color: var(--text-color); |
|
|
line-height: 1.65; |
|
|
letter-spacing: 0.01em; |
|
|
overflow-x: hidden; |
|
|
background-image: |
|
|
radial-gradient(ellipse at 15% 50%, var(--bg-pattern-primary) 0%, transparent 30%), |
|
|
radial-gradient(ellipse at 85% 30%, var(--bg-pattern-secondary) 0%, transparent 35%), |
|
|
radial-gradient(ellipse at 50% 80%, var(--bg-pattern-tertiary) 0%, transparent 40%), |
|
|
repeating-radial-gradient(circle at 50% 50%, transparent 0%, var(--bg-pattern-base) 1%, transparent 2%); |
|
|
backdrop-filter: blur(20px); |
|
|
-webkit-backdrop-filter: blur(20px); |
|
|
position: relative; |
|
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
|
} |
|
|
|
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-image: |
|
|
linear-gradient(45deg, transparent 48%, var(--bg-pattern-lines) 49%, var(--bg-pattern-lines) 51%, transparent 52%), |
|
|
linear-gradient(-45deg, transparent 48%, var(--bg-pattern-lines-alt) 49%, var(--bg-pattern-lines-alt) 51%, transparent 52%); |
|
|
background-size: 100px 100px; |
|
|
pointer-events: none; |
|
|
z-index: 0; |
|
|
opacity: 0.3; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: var(--primary-color); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--border-color); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--accent-color); |
|
|
box-shadow: var(--glow-accent); |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 40px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
text-align: center; |
|
|
padding: 100px 0; |
|
|
margin-bottom: 80px; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 4em; |
|
|
font-weight: 700; |
|
|
background: var(--accent-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: 30px; |
|
|
letter-spacing: 0.5px; |
|
|
filter: drop-shadow(0 0 15px rgba(44, 140, 132, 0.4)); |
|
|
} |
|
|
|
|
|
.hero .subtitle { |
|
|
font-size: 1.4em; |
|
|
color: var(--text-secondary); |
|
|
font-weight: 300; |
|
|
max-width: 800px; |
|
|
margin: 0 auto 40px auto; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.hero .hook { |
|
|
background: linear-gradient(135deg, rgba(44, 140, 132, 0.2), rgba(163, 120, 72, 0.15)); |
|
|
padding: 40px; |
|
|
border-radius: 16px; |
|
|
border: 2px solid rgba(44, 140, 132, 0.4); |
|
|
margin: 50px auto; |
|
|
max-width: 900px; |
|
|
} |
|
|
|
|
|
.hero .hook h2 { |
|
|
font-size: 1.5em; |
|
|
margin-bottom: 20px; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.hero .hook p { |
|
|
font-size: 1.2em; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.section { |
|
|
background: var(--card-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
-webkit-backdrop-filter: blur(20px); |
|
|
border: 1px solid rgba(44, 140, 132, 0.2); |
|
|
border-top: 2px solid var(--accent-secondary); |
|
|
border-radius: 16px; |
|
|
margin-bottom: 50px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--shadow-card), 0 0 20px rgba(44, 140, 132, 0.05); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.section::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 1px; |
|
|
background: linear-gradient(90deg, transparent, var(--accent-color), var(--accent-secondary), transparent); |
|
|
opacity: 0.6; |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
background: linear-gradient(135deg, rgba(44, 140, 132, 0.1), rgba(163, 120, 72, 0.05)); |
|
|
padding: 40px 50px; |
|
|
border-bottom: 1px solid rgba(44, 140, 132, 0.2); |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2.2em; |
|
|
font-weight: 600; |
|
|
color: var(--text-color); |
|
|
margin-bottom: 15px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.section-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -8px; |
|
|
left: 0; |
|
|
width: 60px; |
|
|
height: 3px; |
|
|
background: var(--accent-gradient); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.section-content { |
|
|
padding: 50px; |
|
|
} |
|
|
|
|
|
.section-content h3 { |
|
|
font-size: 1.4em; |
|
|
color: var(--text-color); |
|
|
margin-bottom: 20px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.section-content p { |
|
|
margin-bottom: 20px; |
|
|
color: var(--text-secondary); |
|
|
font-size: 1.1em; |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
.section-content ul { |
|
|
margin: 20px 0; |
|
|
padding-left: 30px; |
|
|
} |
|
|
|
|
|
.section-content li { |
|
|
margin-bottom: 12px; |
|
|
color: var(--text-secondary); |
|
|
font-size: 1.05em; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.feature-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
margin: 40px 0; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: rgba(44, 140, 132, 0.1); |
|
|
padding: 30px; |
|
|
border-radius: 12px; |
|
|
border-left: 4px solid var(--accent-color); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: var(--shadow-premium); |
|
|
} |
|
|
|
|
|
.feature-card h4 { |
|
|
font-size: 1.2em; |
|
|
margin-bottom: 15px; |
|
|
color: var(--text-color); |
|
|
} |
|
|
|
|
|
.feature-card p { |
|
|
color: var(--text-secondary); |
|
|
font-size: 1em; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.benchmark-highlight { |
|
|
background: linear-gradient(135deg, rgba(44, 140, 132, 0.15), rgba(163, 120, 72, 0.1)); |
|
|
padding: 40px; |
|
|
border-radius: 16px; |
|
|
margin: 40px 0; |
|
|
border: 2px solid rgba(44, 140, 132, 0.3); |
|
|
} |
|
|
|
|
|
.benchmark-highlight h3 { |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
font-size: 1.8em; |
|
|
background: var(--accent-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.stats-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 30px; |
|
|
margin: 30px 0; |
|
|
} |
|
|
|
|
|
.stat { |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
background: rgba(44, 140, 132, 0.1); |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(44, 140, 132, 0.2); |
|
|
} |
|
|
|
|
|
.stat-number { |
|
|
font-size: 2.5em; |
|
|
font-weight: 700; |
|
|
color: var(--accent-color); |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 1em; |
|
|
color: var(--text-secondary); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.cta-section { |
|
|
background: linear-gradient(135deg, rgba(44, 140, 132, 0.2), rgba(163, 120, 72, 0.15)); |
|
|
padding: 60px; |
|
|
border-radius: 20px; |
|
|
text-align: center; |
|
|
border: 2px solid rgba(44, 140, 132, 0.4); |
|
|
margin-top: 80px; |
|
|
} |
|
|
|
|
|
.cta-section h2 { |
|
|
font-size: 2.5em; |
|
|
margin-bottom: 20px; |
|
|
background: var(--accent-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.cta-section p { |
|
|
font-size: 1.3em; |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 40px; |
|
|
max-width: 700px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
.cta-buttons { |
|
|
display: flex; |
|
|
gap: 30px; |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.cta-button { |
|
|
padding: 18px 40px; |
|
|
border-radius: 12px; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
font-size: 1.1em; |
|
|
transition: all 0.3s ease; |
|
|
display: inline-block; |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.cta-button.primary { |
|
|
background: var(--accent-gradient); |
|
|
color: #0B0B0B; |
|
|
box-shadow: var(--shadow-premium); |
|
|
} |
|
|
|
|
|
.cta-button.primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 40px rgba(44, 140, 132, 0.4); |
|
|
} |
|
|
|
|
|
.cta-button.secondary { |
|
|
background: rgba(44, 140, 132, 0.15); |
|
|
color: var(--text-color); |
|
|
border: 2px solid var(--accent-color); |
|
|
} |
|
|
|
|
|
.cta-button.secondary:hover { |
|
|
background: var(--accent-color); |
|
|
color: #0B0B0B; |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.comparison-table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
margin: 30px 0; |
|
|
background: var(--card-bg); |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--shadow-card); |
|
|
} |
|
|
|
|
|
.comparison-table th { |
|
|
background: rgba(44, 140, 132, 0.2); |
|
|
padding: 20px; |
|
|
text-align: left; |
|
|
color: var(--text-color); |
|
|
font-weight: 600; |
|
|
border-bottom: 2px solid rgba(44, 140, 132, 0.3); |
|
|
} |
|
|
|
|
|
.comparison-table td { |
|
|
padding: 18px 20px; |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.comparison-table .highlight { |
|
|
background: rgba(44, 140, 132, 0.1); |
|
|
color: var(--text-color); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
background: rgba(44, 140, 132, 0.1); |
|
|
border: 1px solid rgba(44, 140, 132, 0.3); |
|
|
border-radius: 12px; |
|
|
padding: 25px; |
|
|
margin: 30px 0; |
|
|
} |
|
|
|
|
|
.info-box h4 { |
|
|
color: var(--accent-color); |
|
|
margin-bottom: 15px; |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
.warning-box { |
|
|
background: rgba(163, 120, 72, 0.1); |
|
|
border: 1px solid rgba(163, 120, 72, 0.3); |
|
|
border-radius: 12px; |
|
|
padding: 25px; |
|
|
margin: 30px 0; |
|
|
} |
|
|
|
|
|
.warning-box h4 { |
|
|
color: var(--warning-color); |
|
|
margin-bottom: 15px; |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
|
|
|
.theme-toggle { |
|
|
position: fixed; |
|
|
top: 25px; |
|
|
right: 25px; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background: var(--glass-effect); |
|
|
border: 1px solid rgba(44, 140, 132, 0.3); |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
font-size: 20px; |
|
|
color: var(--text-color); |
|
|
z-index: 1000; |
|
|
box-shadow: var(--shadow-card); |
|
|
} |
|
|
|
|
|
.theme-toggle:hover { |
|
|
background: rgba(44, 140, 132, 0.15); |
|
|
transform: scale(1.1); |
|
|
box-shadow: var(--glow-accent); |
|
|
} |
|
|
|
|
|
.theme-toggle:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
|
|
|
.theme-toggle .icon { |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
position: absolute; |
|
|
} |
|
|
|
|
|
.theme-toggle .icon-light { |
|
|
opacity: 0; |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
.theme-toggle .icon-dark { |
|
|
opacity: 1; |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: light) { |
|
|
.theme-toggle .icon-light { |
|
|
opacity: 1; |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
|
|
|
.theme-toggle .icon-dark { |
|
|
opacity: 0; |
|
|
transform: rotate(-180deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
[data-theme="light"] .theme-toggle .icon-light { |
|
|
opacity: 1; |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
|
|
|
[data-theme="light"] .theme-toggle .icon-dark { |
|
|
opacity: 0; |
|
|
transform: rotate(-180deg); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .theme-toggle .icon-light { |
|
|
opacity: 0; |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .theme-toggle .icon-dark { |
|
|
opacity: 1; |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
|
|
|
|
|
|
.contact-link { |
|
|
transition: all 0.3s ease !important; |
|
|
} |
|
|
|
|
|
.contact-link:hover { |
|
|
background: rgba(44, 140, 132, 0.1) !important; |
|
|
border-color: var(--accent-color) !important; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 15px rgba(44, 140, 132, 0.2); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 2.5em; |
|
|
} |
|
|
|
|
|
.hero .subtitle { |
|
|
font-size: 1.2em; |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
padding: 30px 25px; |
|
|
} |
|
|
|
|
|
.section-content { |
|
|
padding: 30px 25px; |
|
|
} |
|
|
|
|
|
.cta-buttons { |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.stats-grid { |
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.contact-link { |
|
|
margin-bottom: 15px; |
|
|
width: 100%; |
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle light/dark theme"> |
|
|
<span class="icon icon-light">☀️</span> |
|
|
<span class="icon icon-dark">🌙</span> |
|
|
</button> |
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<div class="hero"> |
|
|
<h1>Image Poison Shield</h1> |
|
|
<p class="subtitle">Poison shield that protects your work while disrupting unauthorized AI training</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<div class="section-content"> |
|
|
<div style="background: linear-gradient(135deg, rgba(44, 140, 132, 0.2), rgba(163, 120, 72, 0.15)); padding: 30px; border-radius: 12px; border: 2px solid rgba(44, 140, 132, 0.4); margin-bottom: 30px;"> |
|
|
<p style="font-size: 1.25em; line-height: 1.7; margin: 0; text-align: center;"> |
|
|
<strong>What if you could poison your images to disrupt AI training while keeping them visually appealing to humans?</strong> |
|
|
</p> |
|
|
<p style="font-size: 1.1em; line-height: 1.6; margin: 20px 0 0 0; text-align: center; color: var(--text-secondary);"> |
|
|
Image Poison Shield achieves <strong>48.2% ML training disruption</strong> — among the highest reported for low-distortion image protection — while maintaining excellent visual quality (SSIM 0.98+). |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="section"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">The Problem</h2> |
|
|
</div> |
|
|
<div class="section-content"> |
|
|
<p>Your creative work is being scraped and used to train AI models without your consent. Traditional watermarks are easily removed (70-95% success rate). Metadata is stripped in seconds. Legal protection is unenforceable at scale.</p> |
|
|
|
|
|
<p><strong>Image Poison Shield is different:</strong> Mathematical protection embedded in the frequency-domain structure of your images—subtle to humans, toxic to AI models.</p> |
|
|
|
|
|
<div class="info-box" style="margin-top: 20px;"> |
|
|
<h4>🧪 Live Demonstration: Test It Yourself</h4> |
|
|
<p><strong>Download this protected image and test it against real watermark removal tools:</strong></p> |
|
|
|
|
|
<div style="background: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 8px; margin: 15px 0;"> |
|
|
<img src="assets/armored_park_strength_6-2.png" alt="Protected Park Image - Strength 6.2" style="width: 100%; max-width: 500px; border-radius: 8px; margin-bottom: 15px; display: block; margin-left: auto; margin-right: auto; border: 2px solid rgba(44, 140, 132, 0.5);"> |
|
|
<div style="text-align: center;"> |
|
|
<a href="assets/armored_park_strength_6-2.png" download="image_poison_shield_test.png" |
|
|
style="display: inline-block; background: var(--accent-gradient); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; margin: 10px 10px; box-shadow: var(--shadow-premium);"> |
|
|
⬇️ Download Test Image |
|
|
</a> |
|
|
<a href="https://huggingface.co/spaces/abdul9999/NoWatermark" target="_blank" |
|
|
style="display: inline-block; background: rgba(163, 120, 72, 0.8); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; margin: 10px 10px; box-shadow: var(--shadow-premium);"> |
|
|
🔧 Try Watermark Remover → |
|
|
</a> |
|
|
</div> |
|
|
<p style="margin-top: 15px; font-size: 0.95em; text-align: center; color: var(--text-secondary);"> |
|
|
<strong>Test:</strong> Park scene, Strength 6.2 (91% mid-band concentration, 48% training disruption)<br> |
|
|
Traditional watermark removers will fail to strip the protection. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<p style="margin-top: 12px; font-size: 0.9em; font-style: italic;"> |
|
|
<strong>Why it works:</strong> Traditional watermark removers detect surface patterns. Image Poison Shield embeds protection in the frequency-domain structure—it appears as natural image content. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Validated Performance</h2> |
|
|
</div> |
|
|
<div class="section-content"> |
|
|
<p>Independent academic-grade benchmark testing confirms Image Poison Shield's effectiveness at disrupting ML training while maintaining excellent visual quality.</p> |
|
|
|
|
|
<h3>Enhanced Academic Benchmark Results</h3> |
|
|
<img src="assets/benchmark_summary.png" alt="Comprehensive Benchmark Dashboard" style="width: 100%; border-radius: 12px; margin: 20px 0; border: 2px solid rgba(44, 140, 132, 0.3);"> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.15); padding: 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid var(--accent-color);"> |
|
|
<h4 style="margin-bottom: 15px;">Key Results (Park Scene, Strength 6.2):</h4> |
|
|
<ul style="line-height: 1.8;"> |
|
|
<li><strong>✅ Frequency Targeting:</strong> 91.2% mid-band energy concentration (target: ≥70%) — optimal ML disruption zone</li> |
|
|
<li><strong>✅ ML Training Disruption:</strong> 48.2% training convergence degradation — top-tier performance for low-distortion attacks</li> |
|
|
<li><strong>✅ Multi-Layer Feature Degradation:</strong> 20.1% average across ResNet50 layers (peak: 32.9% at layer 3)</li> |
|
|
<li><strong>✅ Robustness:</strong> 71% survival rate through JPEG compression, resizing, and blur transforms</li> |
|
|
<li><strong>⚠️ Perceptual Quality:</strong> SSIM 0.739 at strength 6.2 (visible artifacts) — optimal balance at strength 3.0</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(163, 120, 72, 0.1); padding: 20px; border-radius: 8px; margin: 20px 0;"> |
|
|
<h4>48.2% Training Disruption: How It Compares</h4> |
|
|
<p>Published research shows:</p> |
|
|
<ul style="line-height: 1.8;"> |
|
|
<li><strong>Cross-model transfer attacks:</strong> 40-50% typical range</li> |
|
|
<li><strong>Low-distortion perturbations:</strong> 20-35% typical</li> |
|
|
<li><strong>Image Poison Shield (48.2%):</strong> Top-tier effectiveness while maintaining good visual quality</li> |
|
|
<li><strong>Visible patch attacks:</strong> 80-90% (but easily detected)</li> |
|
|
</ul> |
|
|
<p style="margin-top: 15px;"><strong>Context:</strong> Achieving 48% disruption with minimal visual distortion places Image Poison Shield among the most effective protection systems, comparable to attacks that require visible modifications.</p> |
|
|
</div> |
|
|
|
|
|
<h3>Protection Strength Comparison</h3> |
|
|
|
|
|
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;"> |
|
|
<thead> |
|
|
<tr style="background: rgba(44, 140, 132, 0.2);"> |
|
|
<th style="padding: 12px; text-align: left; border: 1px solid var(--border-color);">Strength</th> |
|
|
<th style="padding: 12px; text-align: center; border: 1px solid var(--border-color);">Visual Quality (SSIM)</th> |
|
|
<th style="padding: 12px; text-align: center; border: 1px solid var(--border-color);">ML Disruption</th> |
|
|
<th style="padding: 12px; text-align: center; border: 1px solid var(--border-color);">Use Case</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr style="background: rgba(44, 140, 132, 0.05);"> |
|
|
<td style="padding: 12px; border: 1px solid var(--border-color);"><strong>1.5</strong></td> |
|
|
<td style="padding: 12px; text-align: center; border: 1px solid var(--border-color); color: var(--success-color);">0.985 ✅</td> |
|
|
<td style="padding: 12px; text-align: center; border: 1px solid var(--border-color);">81% mid-band</td> |
|
|
<td style="padding: 12px; border: 1px solid var(--border-color);">Subtle protection for public sharing</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td style="padding: 12px; border: 1px solid var(--border-color);"><strong>3.0 (Recommended)</strong></td> |
|
|
<td style="padding: 12px; text-align: center; border: 1px solid var(--border-color); color: var(--success-color);">0.85-0.88 ✅</td> |
|
|
<td style="padding: 12px; text-align: center; border: 1px solid var(--border-color); font-weight: bold;">~30-35% training disruption</td> |
|
|
<td style="padding: 12px; border: 1px solid var(--border-color);"><strong>Optimal balance</strong> — minimal distortion + strong protection</td> |
|
|
</tr> |
|
|
<tr style="background: rgba(163, 120, 72, 0.05);"> |
|
|
<td style="padding: 12px; border: 1px solid var(--border-color);"><strong>6.2</strong></td> |
|
|
<td style="padding: 12px; text-align: center; border: 1px solid var(--border-color); color: var(--warning-color);">0.739 ⚠️</td> |
|
|
<td style="padding: 12px; text-align: center; border: 1px solid var(--border-color); font-weight: bold; color: var(--success-color);">48% training disruption<br>91% mid-band</td> |
|
|
<td style="padding: 12px; border: 1px solid var(--border-color);">Maximum protection for legal/archival purposes</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
|
|
|
<h3>Visual Examples: Natural Photography</h3> |
|
|
<p style="margin-bottom: 15px;">Park scene tested at different protection strengths:</p> |
|
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;"> |
|
|
<div style="background: rgba(44, 140, 132, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(44, 140, 132, 0.3);"> |
|
|
<img src="assets/armored_park_strength_1-5.png" alt="Park - Strength 1.5" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0; color: var(--success-color);">Strength 1.5 ✅</h4> |
|
|
<p style="font-size: 0.9em; margin: 5px 0;">SSIM: 0.985 | Mid-band: 81%</p> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Excellent visual quality with good ML disruption. Ideal for social media and public sharing.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(163, 120, 72, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(163, 120, 72, 0.3);"> |
|
|
<img src="assets/armored_park_strength_6-2.png" alt="Park - Strength 6.2" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0; color: var(--warning-color);">Strength 6.2 ⚠️</h4> |
|
|
<p style="font-size: 0.9em; margin: 5px 0;">SSIM: 0.739 | Mid-band: 91% | <strong style="color: var(--success-color);">Training: 48%</strong></p> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Maximum ML disruption with visible quality trade-off. Best for archival protection and legal evidence.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3>AI Generative Model Tests</h3> |
|
|
<p style="margin-bottom: 15px;">When AI generators attempt to recreate protected images, the shield causes visible artifacts:</p> |
|
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;"> |
|
|
<div style="background: rgba(163, 120, 72, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(163, 120, 72, 0.3);"> |
|
|
<img src="assets/Generated_NB-Image_park_strength_1-5.png" alt="AI Reconstruction Failed - Park 1.5" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0;">Park (Strength 1.5) → AI Reconstruction</h4> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Line artifacts and streaking patterns show AI disruption despite minimal visual changes to original.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(163, 120, 72, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(163, 120, 72, 0.3);"> |
|
|
<img src="assets/Generated_NB-Image_park_strength_6-2.png" alt="AI Reconstruction Failed - Park 6.2" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0;">Park (Strength 6.2) → AI Reconstruction</h4> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Severe artifacts and noise demonstrate maximum ML training disruption.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3>Visual Examples: AI-Generated Content</h3> |
|
|
<p style="margin-bottom: 15px;">Digital artwork (walking scene) shows different frequency characteristics but still disrupts AI models:</p> |
|
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;"> |
|
|
<div style="background: rgba(44, 140, 132, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(44, 140, 132, 0.3);"> |
|
|
<img src="assets/armored_walking_strength_1-5.png" alt="Walking - Strength 1.5" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0; color: var(--success-color);">Strength 1.5 ✅</h4> |
|
|
<p style="font-size: 0.9em; margin: 5px 0;">SSIM: 0.995 | Mid-band: 35% (high-band dominant)</p> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Excellent visual quality. AI-generated content has different frequency profile but still disrupts models.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(44, 140, 132, 0.3);"> |
|
|
<img src="assets/armored_walking_strength_6-2.png" alt="Walking - Strength 6.2" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0;">Strength 6.2</h4> |
|
|
<p style="font-size: 0.9em; margin: 5px 0;">SSIM: 0.827 | Mid-band: 65% | <strong style="color: var(--success-color);">Robustness: 77%</strong></p> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Higher strength achieves best robustness across all tests (77% survival through aggressive transforms).</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;"> |
|
|
<div style="background: rgba(163, 120, 72, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(163, 120, 72, 0.3);"> |
|
|
<img src="assets/Generated_NB-Image_walking_strength_1-5.png" alt="AI Reconstruction Failed - Walking 1.5" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0;">Walking (Strength 1.5) → AI Reconstruction</h4> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Severe distortions: diagonal artifacts, color aberrations, structural errors throughout.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(163, 120, 72, 0.05); padding: 15px; border-radius: 8px; border: 2px solid rgba(163, 120, 72, 0.3);"> |
|
|
<img src="assets/Generated_NB-Image_walking_strength_6-2.png" alt="AI Reconstruction Failed - Walking 6.2" style="width: 100%; border-radius: 8px; margin-bottom: 10px;"> |
|
|
<h4 style="margin: 10px 0 5px 0;">Walking (Strength 6.2) → AI Reconstruction</h4> |
|
|
<p style="font-size: 0.85em; color: var(--text-secondary); margin-top: 8px;">Consistent severe artifacts confirm mid-band concentration is the primary driver of AI disruption.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3>Watermark Removal Resistance</h3> |
|
|
<p>Protected images tested against commercial AI-powered watermark removal tools:</p> |
|
|
<div style="background: rgba(44, 140, 132, 0.15); padding: 20px; border-radius: 8px; margin: 20px 0; text-align: center;"> |
|
|
<h4 style="font-size: 2em; margin: 0; color: var(--success-color);">100% Shield Preservation</h4> |
|
|
<p style="margin-top: 10px; font-size: 1.1em;">0 out of 4 test images had protection removed</p> |
|
|
<p style="margin-top: 15px; font-style: italic; color: var(--text-secondary);">Traditional watermark removers detect surface patterns. Image Poison Shield embeds protection in the frequency-domain structure—it appears as natural image content.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="section"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">What Makes Image Poison Shield Different</h2> |
|
|
</div> |
|
|
<div class="section-content"> |
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;"> |
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);"> |
|
|
<h4>🎯 Frequency-Domain Targeting</h4> |
|
|
<p>Protection embedded in the mathematical structure of images, targeting the mid-band frequencies that ML models rely on for training.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);"> |
|
|
<h4>🔐 Cryptographic Provenance</h4> |
|
|
<p>SHA-256 hashes, timestamps, and performance metrics embedded in metadata for legal verification and tamper detection.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);"> |
|
|
<h4>🛡️ Removal-Resistant</h4> |
|
|
<p>Not a surface watermark—protection is woven into the image structure. Survives JPEG compression, resizing, and format conversion.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);"> |
|
|
<h4>👁️ Minimal Visual Impact</h4> |
|
|
<p>At optimal settings (strength 3.0), visual quality remains excellent (SSIM 0.85+) while ML disruption stays effective (30-35%).</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);"> |
|
|
<h4>🤖 ML Training Poisoning</h4> |
|
|
<p>Disrupts neural network training itself—not just feature extraction. Achieves 48% training degradation, among the highest for low-distortion attacks.</p> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);"> |
|
|
<h4>⚙️ Adjustable Protection</h4> |
|
|
<p>Fine-tune the strength-quality trade-off based on your needs: subtle for sharing, aggressive for legal protection.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="section"> |
|
|
<div class="section-header"> |
|
|
<h2 class="section-title">Get Involved</h2> |
|
|
</div> |
|
|
<div class="section-content"> |
|
|
<h3>Seeking Partners & Backing</h3> |
|
|
<p style="margin-bottom: 20px;">Image Poison Shield has proven its effectiveness through rigorous validation. We're now seeking partners, funding, and strategic collaborators to scale this technology and combat AI content theft at an enterprise level.</p> |
|
|
|
|
|
<div style="background: linear-gradient(135deg, rgba(44, 140, 132, 0.15), rgba(163, 120, 72, 0.1)); padding: 25px; border-radius: 12px; border-left: 4px solid var(--accent-color); margin: 25px 0;"> |
|
|
<h4 style="color: var(--accent-color); margin-bottom: 15px;">We're Looking For:</h4> |
|
|
|
|
|
<h5 style="color: var(--text-color); margin-top: 20px; margin-bottom: 10px;">🏢 Enterprise Organizations</h5> |
|
|
<p style="color: var(--text-secondary); margin-bottom: 15px;">Companies seeking robust solutions to combat AI theft of proprietary content, training data, or creative assets. Adobe, Getty, Shutterstock, and similar platforms actively evaluating protection technologies.</p> |
|
|
|
|
|
<h5 style="color: var(--text-color); margin-top: 20px; margin-bottom: 10px;">💰 Funding Partners</h5> |
|
|
<p style="color: var(--text-secondary); margin-bottom: 15px;">Investment to scale the core algorithms and expand protection capabilities beyond static images to video, audio, 3D models, and other media types. Funding supports algorithm R&D, enterprise API development, and team growth.</p> |
|
|
|
|
|
<h5 style="color: var(--text-color); margin-top: 20px; margin-bottom: 10px;">🔬 Research Collaborators</h5> |
|
|
<p style="color: var(--text-secondary); margin-bottom: 15px;">Academic institutions and AI ethics researchers studying digital rights, adversarial ML, and content protection. We're open to collaborative research and joint publication opportunities.</p> |
|
|
|
|
|
<h5 style="color: var(--text-color); margin-top: 20px; margin-bottom: 10px;">🛠️ Integration Partners</h5> |
|
|
<p style="color: var(--text-secondary); margin-bottom: 15px;">Platform providers, creative tools, DAM systems, and content management solutions seeking to embed Image Poison Shield protection. We're building an enterprise-grade API for seamless integration.</p> |
|
|
</div> |
|
|
|
|
|
<h3>Expansion Roadmap</h3> |
|
|
<p style="margin-bottom: 15px;">With proper backing, Image Poison Shield can expand beyond images:</p> |
|
|
<ul style="line-height: 1.8; margin-bottom: 25px;"> |
|
|
<li><strong>Video Protection:</strong> Frame-coherent shield for film, TV, and social media</li> |
|
|
<li><strong>Audio Protection:</strong> Frequency-domain poisoning for music and podcasts</li> |
|
|
<li><strong>3D Assets:</strong> Protection for models, textures, and virtual environments</li> |
|
|
<li><strong>Document Protection:</strong> Text-based content for articles, books, and code</li> |
|
|
<li><strong>Enterprise API:</strong> Production-grade REST API with batch processing and analytics</li> |
|
|
<li><strong>SaaS Platform:</strong> Web application with team management and usage tracking</li> |
|
|
</ul> |
|
|
|
|
|
<h3>Contact</h3> |
|
|
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 30px 0;"> |
|
|
<a href="mailto:interwovenarkitech@gmail.com?subject=Image%20Poison%20Shield%20Partnership%20Discussion" class="contact-link" |
|
|
style="color: var(--accent-color); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 15px 25px; border: 2px solid rgba(44, 140, 132, 0.3); border-radius: 8px; background: var(--accent-gradient); color: white;"> |
|
|
📧 Partnership Discussion |
|
|
</a> |
|
|
<a href="mailto:interwovenarkitech@gmail.com?subject=Image%20Poison%20Shield%20Licensing%20Inquiry" class="contact-link" |
|
|
style="color: var(--accent-color); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 15px 25px; border: 2px solid rgba(44, 140, 132, 0.3); border-radius: 8px;"> |
|
|
💼 Licensing Inquiries |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div style="margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(44, 140, 132, 0.3); text-align: center;"> |
|
|
<h4 style="color: var(--text-color); margin-bottom: 20px; font-size: 1.2em;">Connect With the Creator</h4> |
|
|
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; align-items: center;"> |
|
|
<a href="https://www.interwoven-arkitech.com" target="_blank" class="contact-link" |
|
|
style="color: var(--accent-color); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid rgba(44, 140, 132, 0.3); border-radius: 8px;"> |
|
|
🌐 Interwoven Arkitech |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/beckettdillon/" target="_blank" class="contact-link" |
|
|
style="color: var(--accent-color); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid rgba(44, 140, 132, 0.3); border-radius: 8px;"> |
|
|
💼 LinkedIn Profile |
|
|
</a> |
|
|
<a href="mailto:beckettdillon42@gmail.com" class="contact-link" |
|
|
style="color: var(--accent-color); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid rgba(44, 140, 132, 0.3); border-radius: 8px;"> |
|
|
📧 Direct Contact |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 12px; margin-top: 25px; border: 2px solid rgba(44, 140, 132, 0.3);"> |
|
|
<p style="font-size: 1.1em; line-height: 1.7; margin: 0; text-align: center;"><strong>Current Stage:</strong> Proven technology with validated results (48% ML training disruption, 91% mid-band concentration, 100% watermark removal resistance, 71% robustness). Seeking Series A funding and enterprise partnerships to scale from prototype to production-grade platform.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function initializeTheme() { |
|
|
|
|
|
const savedTheme = localStorage.getItem('image-poison-shield-theme'); |
|
|
if (savedTheme) { |
|
|
document.documentElement.setAttribute('data-theme', savedTheme); |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
function toggleTheme() { |
|
|
const currentTheme = document.documentElement.getAttribute('data-theme'); |
|
|
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
|
|
|
|
let newTheme; |
|
|
if (currentTheme === 'light') { |
|
|
newTheme = 'dark'; |
|
|
} else if (currentTheme === 'dark') { |
|
|
newTheme = 'light'; |
|
|
} else { |
|
|
|
|
|
newTheme = systemPrefersDark ? 'light' : 'dark'; |
|
|
} |
|
|
|
|
|
document.documentElement.setAttribute('data-theme', newTheme); |
|
|
localStorage.setItem('image-poison-shield-theme', newTheme); |
|
|
|
|
|
|
|
|
document.body.style.transition = 'background-color 0.3s ease, color 0.3s ease'; |
|
|
setTimeout(() => { |
|
|
document.body.style.transition = ''; |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { |
|
|
const manualTheme = localStorage.getItem('image-poison-shield-theme'); |
|
|
if (!manualTheme) { |
|
|
|
|
|
document.documentElement.removeAttribute('data-theme'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', initializeTheme); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
