ppt / index.html
cogobim591's picture
Add 3 files
9f355b9 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top-Level Domain Registration Policy & Compliance Framework</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
body {
font-family: 'Roboto', 'Noto Sans SC', sans-serif;
background-color: #f8fafc;
}
.slide {
width: 100vw;
height: 100vh;
padding: 3rem;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #64748b 100%);
}
.section-title {
background: linear-gradient(90deg, #1e3a8a 0%, #64748b 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.flowchart {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
align-items: center;
}
.flowchart-step {
position: relative;
text-align: center;
}
.flowchart-step:not(:last-child)::after {
content: "→";
position: absolute;
right: -1.5rem;
top: 50%;
transform: translateY(-50%);
color: #64748b;
font-weight: bold;
}
.policy-card {
transition: all 0.3s ease;
border-left: 4px solid #1e3a8a;
}
.policy-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(30, 58, 138, 0.1);
}
.logo-watermark {
position: absolute;
opacity: 0.1;
z-index: 0;
width: 60%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body class="overflow-x-hidden">
<!-- Slide 1: Cover -->
<div class="slide gradient-bg text-white flex flex-col items-center justify-center relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="w-32 h-32 mb-8">
<h1 class="text-5xl font-bold mb-4 text-center">顶级域名注册政策与合规框架</h1>
<h2 class="text-3xl font-medium mb-8 text-center">Top-Level Domain Registration Policy & Compliance Framework</h2>
<div class="absolute bottom-8 right-8 text-xl">
<p>.example Registry</p>
<p class="text-sm opacity-80">Last Updated: 2023</p>
</div>
</div>
<!-- Slide 2: Registration Verification -->
<div class="slide bg-white relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="absolute top-8 right-8 w-16 h-16">
<div class="logo-watermark">
<img src="https://via.placeholder.com/600x600/64748b/ffffff?text=LOGO" alt="Watermark">
</div>
<h2 class="section-title text-4xl font-bold mb-8">注册资格与审核机制 / Registration Verification</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
<div class="policy-card bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-globe text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">全球开放注册</h3>
</div>
<p class="text-gray-600">面向全球200+国家/地区开放注册,支持多语言域名注册,确保全球可访问性。</p>
<p class="text-gray-600 mt-2">Open for registration worldwide with multi-language support.</p>
</div>
<div class="policy-card bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-user-shield text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">实名制/KYC审核</h3>
</div>
<p class="text-gray-600">严格的身份验证流程,符合ICANN要求,确保注册信息真实准确。</p>
<p class="text-gray-600 mt-2">Strict identity verification compliant with ICANN requirements.</p>
</div>
<div class="policy-card bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-ban text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">禁止注册词汇列表</h3>
</div>
<p class="text-gray-600">维护敏感词汇数据库,自动过滤违规域名申请,保护品牌和公共利益。</p>
<p class="text-gray-600 mt-2">Automated filtering of prohibited terms to protect brands and public interest.</p>
</div>
</div>
<div class="absolute bottom-8 left-8 text-sm text-gray-500">2/8</div>
</div>
<!-- Slide 3: Acceptable Use Policy -->
<div class="slide bg-white relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="absolute top-8 right-8 w-16 h-16">
<div class="logo-watermark">
<img src="https://via.placeholder.com/600x600/64748b/ffffff?text=LOGO" alt="Watermark">
</div>
<h2 class="section-title text-4xl font-bold mb-8">使用合规条款 / Acceptable Use Policy</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm border-t-4 border-blue-900">
<h3 class="text-xl font-bold text-gray-800 mb-4">内容使用限制</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-900 mt-1 mr-2"></i>
<span>禁止非法内容、侵权材料</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-900 mt-1 mr-2"></i>
<span>限制高风险金融活动</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-900 mt-1 mr-2"></i>
<span>禁止儿童不宜内容</span>
</li>
</ul>
<div class="mt-4 p-3 bg-blue-50 rounded text-sm">
<p>Content restrictions cover illegal, infringing, and harmful materials.</p>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm border-t-4 border-blue-900">
<h3 class="text-xl font-bold text-gray-800 mb-4">滥用处理机制</h3>
<div class="flex items-center justify-center mb-4">
<div class="relative w-full h-2 bg-gray-200 rounded-full">
<div class="absolute top-0 left-0 h-2 bg-gradient-to-r from-blue-900 to-blue-700 rounded-full" style="width: 75%"></div>
</div>
</div>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-bell text-blue-900 mt-1 mr-2"></i>
<span>24/7 滥用监控系统</span>
</li>
<li class="flex items-start">
<i class="fas fa-flag text-blue-900 mt-1 mr-2"></i>
<span>多语言举报渠道</span>
</li>
<li class="flex items-start">
<i class="fas fa-chart-line text-blue-900 mt-1 mr-2"></i>
<span>机器学习检测模式</span>
</li>
</ul>
<div class="mt-4 p-3 bg-blue-50 rounded text-sm">
<p>Comprehensive abuse detection and reporting system.</p>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm border-t-4 border-blue-900">
<h3 class="text-xl font-bold text-gray-800 mb-4">整改与封禁流程</h3>
<div class="flex justify-center mb-4">
<div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-lock text-red-600 text-2xl"></i>
</div>
</div>
<ol class="list-decimal list-inside space-y-2 text-gray-600 pl-2">
<li>违规通知</li>
<li>限期整改</li>
<li>临时限制</li>
<li>最终封禁</li>
</ol>
<div class="mt-4 p-3 bg-blue-50 rounded text-sm">
<p>Gradual enforcement process with clear remediation steps.</p>
</div>
</div>
</div>
<div class="absolute bottom-8 left-8 text-sm text-gray-500">3/8</div>
</div>
<!-- Slide 4: Registration Process & Technical Compliance -->
<div class="slide bg-white relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="absolute top-8 right-8 w-16 h-16">
<div class="logo-watermark">
<img src="https://via.placeholder.com/600x600/64748b/ffffff?text=LOGO" alt="Watermark">
</div>
<h2 class="section-title text-4xl font-bold mb-8">注册流程与技术合规 / Registration Process & Technical Compliance</h2>
<div class="mb-8">
<h3 class="text-2xl font-semibold text-gray-800 mb-4">域名注册流程图</h3>
<div class="flowchart bg-gray-50 p-6 rounded-lg">
<div class="flowchart-step">
<div class="bg-blue-900 text-white p-3 rounded-full mx-auto mb-2">
<i class="fas fa-search"></i>
</div>
<p class="text-sm">域名查询</p>
</div>
<div class="flowchart-step">
<div class="bg-blue-800 text-white p-3 rounded-full mx-auto mb-2">
<i class="fas fa-user-edit"></i>
</div>
<p class="text-sm">身份验证</p>
</div>
<div class="flowchart-step">
<div class="bg-blue-700 text-white p-3 rounded-full mx-auto mb-2">
<i class="fas fa-credit-card"></i>
</div>
<p class="text-sm">支付完成</p>
</div>
<div class="flowchart-step">
<div class="bg-blue-600 text-white p-3 rounded-full mx-auto mb-2">
<i class="fas fa-check-circle"></i>
</div>
<p class="text-sm">注册确认</p>
</div>
<div class="flowchart-step">
<div class="bg-blue-500 text-white p-3 rounded-full mx-auto mb-2">
<i class="fas fa-globe"></i>
</div>
<p class="text-sm">DNS配置</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-50 p-4 rounded-lg border-l-4 border-blue-900">
<h4 class="font-bold text-lg mb-2">EPP协议</h4>
<p class="text-gray-600 text-sm">符合ICANN标准的注册协议接口</p>
<div class="mt-2 text-blue-900">
<i class="fas fa-server"></i>
<span class="ml-2 text-sm">RFC 5730-5734</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg border-l-4 border-blue-900">
<h4 class="font-bold text-lg mb-2">DNSSEC</h4>
<p class="text-gray-600 text-sm">域名系统安全扩展保障</p>
<div class="mt-2 text-blue-900">
<i class="fas fa-lock"></i>
<span class="ml-2 text-sm">RFC 4033-4035</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg border-l-4 border-blue-900">
<h4 class="font-bold text-lg mb-2">WHOIS</h4>
<p class="text-gray-600 text-sm">符合GDPR的注册信息查询</p>
<div class="mt-2 text-blue-900">
<i class="fas fa-database"></i>
<span class="ml-2 text-sm">RDAP协议</span>
</div>
</div>
</div>
<div class="absolute bottom-8 left-8 text-sm text-gray-500">4/8</div>
</div>
<!-- Slide 5: Cross-border Compliance -->
<div class="slide bg-white relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="absolute top-8 right-8 w-16 h-16">
<div class="logo-watermark">
<img src="https://via.placeholder.com/600x600/64748b/ffffff?text=LOGO" alt="Watermark">
</div>
<h2 class="section-title text-4xl font-bold mb-8">跨国合规与访问控制 / Cross-border Compliance</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-globe-americas"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">国家封锁应对方案</h3>
</div>
<p class="text-gray-600">多地域DNS解析节点,智能路由技术,确保域名在全球最大可访问性。</p>
<div class="mt-4 flex justify-between text-xs">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">Anycast DNS</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">GeoIP Routing</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">CDN集成</span>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-code"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">敏感内容API</h3>
</div>
<p class="text-gray-600">为政府和企业提供合规API接口,实现内容自动过滤和标记。</p>
<div class="mt-4">
<div class="bg-gray-200 p-2 rounded text-xs font-mono overflow-x-auto">
GET /api/v1/content-filter?domain=example.com
</div>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-handshake"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">政府联络通道</h3>
</div>
<p class="text-gray-600">专职法律合规团队,7×24小时政府请求响应机制,多语言支持。</p>
<div class="mt-4 flex space-x-2">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">law-enforcement@example.registry</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">+1.555.123.4567</span>
</div>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-xl font-bold text-gray-800 mb-4">全球合规框架</h3>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-900 text-white px-3 py-1 rounded-full text-sm">ICANN</span>
<span class="bg-blue-800 text-white px-3 py-1 rounded-full text-sm">GDPR</span>
<span class="bg-blue-700 text-white px-3 py-1 rounded-full text-sm">CCPA</span>
<span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">NIS2</span>
<span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm">DSA</span>
</div>
</div>
<div class="absolute bottom-8 left-8 text-sm text-gray-500">5/8</div>
</div>
<!-- Slide 6: Transparency Governance -->
<div class="slide bg-white relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="absolute top-8 right-8 w-16 h-16">
<div class="logo-watermark">
<img src="https://via.placeholder.com/600x600/64748b/ffffff?text=LOGO" alt="Watermark">
</div>
<h2 class="section-title text-4xl font-bold mb-8">透明度治理机制 / Transparency Governance</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">年度封禁统计与报告</h3>
<div class="bg-gray-50 p-6 rounded-lg">
<div class="flex justify-between mb-4">
<div>
<h4 class="font-bold">2023年封禁统计</h4>
<p class="text-sm text-gray-500">(截至Q3)</p>
</div>
<span class="bg-blue-900 text-white px-3 py-1 rounded-full text-sm">公开报告</span>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">侵权内容</span>
<span class="text-sm font-medium">42%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-900 h-2.5 rounded-full" style="width: 42%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">非法活动</span>
<span class="text-sm font-medium">28%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-800 h-2.5 rounded-full" style="width: 28%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">滥用行为</span>
<span class="text-sm font-medium">19%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-700 h-2.5 rounded-full" style="width: 19%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium">其他</span>
<span class="text-sm font-medium">11%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 11%"></div>
</div>
</div>
</div>
<div class="mt-6 text-center">
<a href="#" class="text-blue-900 hover:underline text-sm flex items-center justify-center">
<i class="fas fa-file-pdf mr-2"></i> 下载完整年度报告
</a>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">用户申诉与审计记录</h3>
<div class="bg-gray-50 p-6 rounded-lg h-full">
<div class="flex items-center mb-6">
<div class="bg-blue-900 text-white p-3 rounded-full mr-4">
<i class="fas fa-balance-scale"></i>
</div>
<h4 class="text-xl font-bold">独立申诉流程</h4>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-clock text-blue-900"></i>
</div>
<div>
<h5 class="font-semibold">72小时响应</h5>
<p class="text-sm text-gray-600">所有申诉将在3个工作日内得到初步回应</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-user-shield text-blue-900"></i>
</div>
<div>
<h5 class="font-semibold">独立审核委员会</h5>
<p class="text-sm text-gray-600">由外部专家组成的独立审核团队</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-history text-blue-900"></i>
</div>
<div>
<h5 class="font-semibold">完整审计跟踪</h5>
<p class="text-sm text-gray-600">所有决策记录保存至少5年</p>
</div>
</div>
</div>
<div class="mt-6">
<div class="flex items-center text-sm text-gray-600">
<i class="fas fa-info-circle mr-2 text-blue-900"></i>
<span>2022年申诉成功率: 34% (行业平均: 22%)</span>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-8 left-8 text-sm text-gray-500">6/8</div>
</div>
<!-- Slide 7: Appendix -->
<div class="slide bg-white relative">
<img src="https://via.placeholder.com/150x150/1e3a8a/ffffff?text=LOGO" alt="Logo" class="absolute top-8 right-8 w-16 h-16">
<div class="logo-watermark">
<img src="https://via.placeholder.com/600x600/64748b/ffffff?text=LOGO" alt="Watermark">
</div>
<h2 class="section-title text-4xl font-bold mb-8">附录 / Appendix</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-900">
<h3 class="text-xl font-bold text-gray-800 mb-4">用户注册协议</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-file-contract text-blue-900 mt-1 mr-2"></i>
<span>域名注册条款</span>
</li>
<li class="flex items-start">
<i class="fas fa-shield-alt text-blue-900 mt-1 mr-2"></i>
<span>隐私政策</span>
</li>
<li class="flex items-start">
<i class="fas fa-exchange-alt text-blue-900 mt-1 mr-2"></i>
<span>转让政策</span>
</li>
<li class="flex items-start">
<i class="fas fa-undo text-blue-900 mt-1 mr-2"></i>
<span>赎回政策</span>
</li>
</ul>
<div class="mt-6">
<a href="#" class="text-blue-900 hover:underline text-sm">
<i class="fas fa-external-link-alt mr-1"></i> 查看完整文档
</a>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-900">
<h3 class="text-xl font-bold text-gray-800 mb-4">违规分级表</h3>
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-2">级别</th>
<th class="text-left py-2">类型</th>
<th class="text-left py-2">处理</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-200">
<td class="py-2">I级</td>
<td class="py-2">轻微违规</td>
<td class="py-2">警告</td>
</tr>
<tr class="border-b border-gray-200">
<td class="py-2">II级</td>
<td class="py-2">中度违规</td>
<td class="py-2">暂停</td>
</tr>
<tr>
<td class="py-2">III级</td>
<td class="py-2">严重违规</td>
<td class="py-2">封禁</td>
</tr>
</tbody>
</table>
<div class="mt-4 text-xs text-gray-500">
<p>* 详细定义见《违规行为分类指南》</p>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-900">
<h3 class="text-xl font-bold text-gray-800 mb-4">政府合作声明</h3>
<div class="flex items-center mb-4">
<div class="bg-blue-900 text-white p-2 rounded mr-3">
<i class="fas fa-landmark"></i>
</div>
<p class="text-gray-600">我们承诺与各国政府机构保持透明合作,遵守当地法律法规,同时维护互联网的开放性原则。</p>
</div>
<div class="bg-blue-50 p-3 rounded text-sm">
<p class="font-semibold">Memorandum of Understanding with:</p>
<div class="flex flex-wrap gap-1 mt-2">
<span class="bg-white px-2 py-1 rounded text-xs">ICANN</span>
<span class="bg-white px-2 py-1 rounded text-xs">APAC</span>
<span class="bg-white px-2 py-1 rounded text-xs">EU Commission</span>
<span class="bg-white px-2 py-1 rounded text-xs">US DOC</span>
</div>
</div>
</div>
</div>
<div class="absolute bottom-8 left-8 text-sm text-gray-500">7/8</div>
</div>
<!-- Slide 8: Closing -->
<div class="slide gradient-bg text-white flex flex-col items-center justify-center relative">
<img src="https://via.placeholder.com/150x150/ffffff/1e3a8a?text=LOGO" alt="Logo" class="w-32 h-32 mb-8">
<h1 class="text-4xl font-bold mb-4 text-center">感谢您的关注</h1>
<h2 class="text-2xl font-medium mb-8 text-center">Thank You</h2>
<div class="bg-white bg-opacity-20 p-6 rounded-lg backdrop-blur-sm max-w-lg">
<h3 class="text-xl font-semibold mb-4">联系方式</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div>
<p class="font-medium">注册局运营:</p>
<p>Example Registry LLC</p>
<p>1234 Internet Way, Suite 100</p>
<p>San Francisco, CA 94107</p>
</div>
<div>
<p class="font-medium">联系信息:</p>
<p><i class="fas fa-envelope mr-2"></i> info@example.registry</p>
<p><i class="fas fa-phone mr-2"></i> +1.800.555.1234</p>
<p><i class="fas fa-globe mr-2"></i> www.example.registry</p>
</div>
</div>
</div>
<div class="absolute bottom-8 text-sm opacity-80">
<p>© 2023 Example Registry. All rights reserved.</p>
</div>
</div>
<script>
// Simple slide navigation
document.addEventListener('keydown', function(e) {
const slides = document.querySelectorAll('.slide');
const currentSlide = Array.from(slides).findIndex(slide => {
const rect = slide.getBoundingClientRect();
return rect.left >= 0 && rect.right <= window.innerWidth;
});
if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) {
window.scrollBy(window.innerWidth, 0);
} else if (e.key === 'ArrowLeft' && currentSlide > 0) {
window.scrollBy(-window.innerWidth, 0);
}
});
// Touch support for mobile devices
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('touchstart', e => {
touchStartX = e.changedTouches[0].screenX;
}, false);
document.addEventListener('touchend', e => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, false);
function handleSwipe() {
const slides = document.querySelectorAll('.slide');
const currentSlide = Array.from(slides).findIndex(slide => {
const rect = slide.getBoundingClientRect();
return rect.left >= 0 && rect.right <= window.innerWidth;
});
if (touchEndX < touchStartX && currentSlide < slides.length - 1) {
// Swipe left - next slide
window.scrollBy(window.innerWidth, 0);
} else if (touchEndX > touchStartX && currentSlide > 0) {
// Swipe right - previous slide
window.scrollBy(-window.innerWidth, 0);
}
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cogobim591/ppt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>