281 lines
18 KiB
HTML
281 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gemini Watermark Remover</title>
|
|
<meta name="description" content="Free Gemini watermark remover tool to remove watermarks from Gemini images. — safe, private, and 100% browser-based.">
|
|
<meta name="keywords" content="Gemini watermark remover, remove Gemini watermark, Gemini AI image editor, Google AI watermark remover, Gemini watermark fix, watermark cleaner tool, Gemini watermark eraser, free AI watermark remover" />
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg class='h-10 w-10 text-indigo-500' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l-1.9 5.8-5.8 1.9 5.8 1.9 1.9 5.8 1.9-5.8 5.8-1.9-5.8-1.9z'/%3E%3C/svg%3E">
|
|
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#10B981',
|
|
'primary-hover': '#059669',
|
|
dark: '#1F2937',
|
|
success: '#10B981',
|
|
warn: '#F59E0B',
|
|
err: '#EF4444',
|
|
info: '#3B82F6',
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 4px 20px -2px rgba(16, 185, 129, 0.1)',
|
|
'card': '0 0 20px rgba(0,0,0,0.05)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
|
|
|
|
::-webkit-scrollbar { width: 10px; }
|
|
::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
::-webkit-scrollbar-thumb { background: #10B981; border-radius: 4px; }
|
|
|
|
.step-arrow::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-top: 15px solid transparent;
|
|
border-bottom: 15px solid transparent;
|
|
border-left: 15px solid #F3F4F6;
|
|
z-index: 10;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.step-item:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -24px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 24px;
|
|
background-color: inherit;
|
|
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
|
|
z-index: 20;
|
|
}
|
|
.step-item:not(:first-child) {
|
|
clip-path: polygon(0% 0%, 200% 0%, 100% 100%, 0% 100%, 24px 50%);
|
|
}
|
|
}
|
|
body.loading { opacity: 0; }
|
|
body { transition: opacity 0s; }
|
|
|
|
.medium-zoom-overlay,
|
|
.medium-zoom-image--opened {
|
|
z-index: 999;
|
|
}
|
|
.medium-zoom-overlay {
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white text-gray-800 antialiased selection:bg-primary selection:text-white flex flex-col min-h-screen loading">
|
|
|
|
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
|
<div class="flex items-center gap-1">
|
|
<svg class="h-10 w-10 text-indigo-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m12 3-1.9 5.8-5.8 1.9 5.8 1.9 1.9 5.8 1.9-5.8 5.8-1.9-5.8-1.9Z"></path>
|
|
</svg>
|
|
<h1 class="text-sm font-bold tracking-tight text-primary md:text-xl">
|
|
<a href="/" class="hover:text-primary transition-colors" title="Gemini Watermark Remover">Gemini <span class="text-gray-700 font-medium">Watermark Remover</span></a>
|
|
</h1>
|
|
</div>
|
|
<nav class="flex gap-2 md:gap-6 text-sm font-medium text-gray-600 items-center">
|
|
<a href="/userscript/gemini-watermark-remover.user.js" target="_blank" class="hidden md:inline-block hover:text-primary transition-colors" data-i18n="nav.userscript">油猴脚本</a>
|
|
<a href="https://allenkuo.medium.com/removing-gemini-ai-watermarks-a-deep-dive-into-reverse-alpha-blending-bbbd83af2a3f" target="_blank" class="hidden md:inline-block hover:text-primary transition-colors" data-i18n="nav.principle">去水印原理</a>
|
|
<a href="https://github.com/journey-ad/gemini-watermark-remover" target="_blank" class="hover:text-primary transition-colors">GitHub</a>
|
|
<button id="langSwitch" class="px-3 py-1 text-nowrap border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">EN</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow">
|
|
<section class="relative pt-16 pb-12 lg:pt-24 lg:pb-20 text-center px-4 overflow-hidden">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-50 via-white to-white -z-10"></div>
|
|
|
|
<h2 class="bg-clip-text bg-gradient-to-br font-extrabold from-slate-900 mb-6 md:text-6xl text-3xl text-transparent to-slate-700 tracking-tighter" data-i18n="main.title">
|
|
Gemini AI 图像去水印
|
|
</h2>
|
|
<p class="text-base md:text-lg text-gray-500 max-w-2xl mx-auto mb-10" data-i18n="main.subtitle">
|
|
基于反向 Alpha 混合算法，纯浏览器本地处理，免费、极速、无损
|
|
</p>
|
|
|
|
<div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-soft p-2 md:p-3 border border-emerald-100">
|
|
<div id="uploadArea" class="group relative flex flex-col items-center justify-center w-full h-64 border-2 border-dashed border-emerald-200 rounded-xl bg-emerald-50/30 hover:bg-emerald-50 hover:border-emerald-400 transition-all cursor-pointer">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M 22.498 20.365 L 22.498 4.247 C 22.498 2.983 21.461 1.946 20.197 1.946 L 4.079 1.946 C 2.815 1.946 1.778 2.983 1.778 4.247 L 1.778 20.365 C 1.778 21.629 2.815 22.666 4.079 22.666 L 20.197 22.666 C 21.461 22.666 22.498 21.629 22.498 20.365 Z M 8.111 14.032 L 10.987 17.483 L 15.014 12.306 L 20.197 19.214 L 4.079 19.214 L 8.111 14.032 Z" fill="currentColor"></path></svg>
|
|
</div>
|
|
<p class="mb-2 text-lg font-medium text-gray-700" data-i18n="upload.text">点击选择 或 拖拽图片至此</p>
|
|
<p class="text-sm text-gray-400" data-i18n="upload.hint">支持 JPG, PNG, WebP</p>
|
|
</div>
|
|
<input type="file" id="fileInput" accept="image/jpeg,image/png,image/webp" multiple class="hidden" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="max-w-6xl mx-auto px-4 mb-8 md:mb-20">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-10 text-center">
|
|
<div class="step-item relative bg-emerald-50 h-16 md:h-24 flex items-center justify-start px-6 md:pl-16 rounded-lg md:rounded-none md:first:rounded-l-lg md:last:rounded-r-lg">
|
|
<div class="w-8 h-8 rounded-full bg-emerald-200 text-emerald-800 font-bold flex items-center justify-center mr-3 text-sm">1</div>
|
|
<span class="font-medium flex-1 md:flex-none text-gray-800" data-i18n="step.1">选择原始图片</span>
|
|
</div>
|
|
<div class="step-item relative bg-emerald-50 h-16 md:h-24 flex items-center justify-start px-6 md:pl-16 rounded-lg md:rounded-none">
|
|
<div class="w-8 h-8 rounded-full bg-emerald-200 text-emerald-800 font-bold flex items-center justify-center mr-3 text-sm">2</div>
|
|
<span class="font-medium flex-1 md:flex-none text-gray-800" data-i18n="step.2">算法自动解析</span>
|
|
</div>
|
|
<div class="step-item relative bg-emerald-50 h-16 md:h-24 flex items-center justify-start px-6 md:pl-16 rounded-lg md:rounded-none md:last:rounded-r-lg">
|
|
<div class="w-8 h-8 rounded-full bg-emerald-200 text-emerald-800 font-bold flex items-center justify-center mr-3 text-sm">3</div>
|
|
<span class="font-medium flex-1 md:flex-none text-gray-800" data-i18n="step.3">保存无水印图</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="singlePreview" class="max-w-7xl mx-auto px-4 pb-24" style="display: none;">
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
<div class="flex-1 space-y-8">
|
|
<div class="bg-white rounded-2xl shadow-card overflow-hidden border border-gray-100">
|
|
<div class="bg-gray-50 px-6 py-3 border-b border-gray-100 flex justify-between items-center">
|
|
<h3 class="font-semibold text-gray-700 flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-red-400"></span> <span data-i18n="preview.original">原图预览</span>
|
|
</h3>
|
|
<span id="originalInfo" class="text-xs text-gray-400 font-mono"></span>
|
|
</div>
|
|
<div class="h-[200px] md:h-[500px] p-4 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2Y5ZmRmZCI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZjJmMmYyIi8+PHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNmMmYyZjIiLz48L3N2Zz4=')]">
|
|
<img id="originalImage" class="max-w-full max-h-full mx-auto rounded-lg shadow-sm block" data-zoomable />
|
|
</div>
|
|
</div>
|
|
|
|
<div id="processedSection" class="bg-white rounded-2xl shadow-card overflow-hidden border border-gray-100 ring-4 ring-emerald-50 scroll-mt-24" style="display: none;">
|
|
<div class="bg-emerald-50/50 px-6 py-3 border-b border-emerald-100 flex justify-between items-center">
|
|
<h3 class="font-semibold text-emerald-800 flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> <span data-i18n="preview.result">处理结果</span>
|
|
</h3>
|
|
<span id="processedInfo" class="text-xs text-emerald-600 font-mono"></span>
|
|
</div>
|
|
<div class="h-[200px] md:h-[500px] p-4 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2Y5ZmRmZCI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZjJmMmYyIi8+PHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNmMmYyZjIiLz48L3N2Zz4=')]">
|
|
<img id="processedImage" class="max-w-full max-h-full mx-auto rounded-lg shadow-sm block" data-zoomable />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-80 flex-shrink-0">
|
|
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 sticky top-24">
|
|
<h4 class="text-lg font-bold text-gray-900 mb-6" data-i18n="panel.title">操作面板</h4>
|
|
|
|
<div class="space-y-3">
|
|
<button id="downloadBtn" class="w-full py-3.5 px-4 bg-gray-900 hover:bg-black text-white rounded-xl font-medium transition-all flex items-center justify-center gap-2" style="display: none;">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
|
|
<span data-i18n="btn.download">下载结果</span>
|
|
</button>
|
|
|
|
<button id="resetBtn" class="w-full py-3.5 px-4 bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-xl font-medium transition-all flex items-center justify-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
|
<span data-i18n="btn.reset">重置 / 更换图片</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="statusMessage" class="mt-6 text-sm text-gray-500 min-h-[1.25rem]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="multiPreview" class="max-w-7xl mx-auto px-4 pb-24 scroll-mt-24" style="display: none;">
|
|
<div class="mb-6 flex justify-between items-center">
|
|
<h3 class="text-xl font-bold text-gray-900">
|
|
<span id="progressText">处理进度: 0/0</span>
|
|
</h3>
|
|
<button id="downloadAllBtn" class="py-2.5 px-6 bg-gray-900 hover:bg-gray-800 text-white rounded-xl font-medium transition-all flex items-center gap-2" style="display: none;">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
|
|
<span data-i18n="btn.downloadAll">全部下载</span>
|
|
</button>
|
|
</div>
|
|
<div id="imageList" class="space-y-4"></div>
|
|
</section>
|
|
|
|
<section class="bg-gray-50 py-16 border-t border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-6 md:mb-12">
|
|
<h3 class="text-2xl font-bold text-gray-900" data-i18n="feature.title">功能特点</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-emerald-100 text-primary rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</div>
|
|
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="feature.speed.title">极速处理</h4>
|
|
<p class="text-gray-500 text-sm leading-relaxed" data-i18n="feature.speed.desc">基于现代浏览器技术加速处理，毫秒级响应，无需等待排队</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
</div>
|
|
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="feature.privacy.title">隐私安全</h4>
|
|
<p class="text-gray-500 text-sm leading-relaxed" data-i18n="feature.privacy.desc">纯前端运行，图片数据不离机，绝不上传服务器</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="feature.free.title">完全免费</h4>
|
|
<p class="text-gray-500 text-sm leading-relaxed" data-i18n="feature.free.desc">无次数限制，无隐藏付费，即开即用</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-emerald-600 text-white py-6 md:pt-12 md:pb-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-8 mb-8">
|
|
<div class="col-span-1 md:col-span-2">
|
|
<h5 class="text-2xl font-bold mb-4" data-i18n="header.title">Gemini Watermark Remover</h5>
|
|
<p class="text-emerald-100 text-sm max-w-sm" data-i18n="footer.desc">
|
|
Gemini 无损去水印工具，本工具仅供学习交流使用
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h6 class="font-bold mb-2 md:mb-4 text-emerald-100" data-i18n="footer.links">链接</h6>
|
|
<ul class="space-y-1 md:space-y-2 text-sm text-emerald-50">
|
|
<li><a href="/terms.html" class="hover:text-white" data-i18n="footer.terms">使用条款</a></li>
|
|
<li><a href="https://github.com/journey-ad/gemini-watermark-remover" target="_blank" class="hover:text-white">Github</a></li>
|
|
<li><a href="/userscript/gemini-watermark-remover.user.js" target="_blank" class="hover:text-white" data-i18n="nav.userscript">油猴脚本</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h6 class="font-bold mb-2 md:mb-4 text-emerald-100" data-i18n="footer.tech">技术</h6>
|
|
<ul class="space-y-1 md:space-y-2 text-sm text-emerald-50">
|
|
<li><a href="https://allenkuo.medium.com/removing-gemini-ai-watermarks-a-deep-dive-into-reverse-alpha-blending-bbbd83af2a3f" target="_blank" class="hover:text-white" data-i18n="nav.principle">去水印原理</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-emerald-500 pt-8 text-center text-sm text-emerald-200">
|
|
<p data-i18n="footer.copyright">© 2025 Gemini Watermark Remover. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="loadingOverlay" class="fixed inset-0 bg-white/80 backdrop-blur-sm z-[60] hidden flex items-center justify-center">
|
|
<div class="flex flex-col items-center">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
|
|
<p class="text-gray-600 font-medium" data-i18n="loading.text">正在处理...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |