|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Secure Content Viewer</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
danger: '#e53e3e', |
|
|
warning: '#dd6b20', |
|
|
safe: '#38a169' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.blurred { |
|
|
filter: blur(10px); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.blurred::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(0,0,0,0.3); |
|
|
z-index: 1; |
|
|
} |
|
|
.image-container { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border-radius: 0.75rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.overlay-warning { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0,0,0,0.5); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
text-align: center; |
|
|
padding: 1rem; |
|
|
z-index: 10; |
|
|
opacity: 1; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
.fade-out { |
|
|
opacity: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
|
|
|
<div id="ageModal" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-50 flex items-center justify-center p-4"> |
|
|
<div class="bg-white rounded-2xl max-w-md w-full p-8 shadow-2xl"> |
|
|
<div class="text-center mb-6"> |
|
|
<i class="fas fa-exclamation-triangle text-5xl text-yellow-500 mb-4"></i> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Content Warning</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
This page contains content intended for mature audiences only. |
|
|
You must be at least 18 years old to access this material. |
|
|
</p> |
|
|
<div class="flex space-x-4 justify-center mb-6"> |
|
|
<div class="bg-gray-100 border border-gray-300 rounded-xl p-4 text-center w-24"> |
|
|
<i class="fas fa-3x fa-ban text-red-500 mb-2"></i> |
|
|
<span class="font-semibold">No Explicit Content</span> |
|
|
</div> |
|
|
<div class="bg-gray-100 border border-gray-300 rounded-xl p-4 text-center w-24"> |
|
|
<i class="fas fa-3x fa-child text-blue-500 mb-2"></i> |
|
|
<span class="font-semibold">Age Restriction</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 text-center font-medium mb-4">Are you 18 years of age or older?</p> |
|
|
<div class="flex justify-center gap-4"> |
|
|
<button id="confirmBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-xl transition-all shadow-lg hover:shadow-xl"> |
|
|
<i class="fas fa-check mr-2"></i>Yes, I'm 18+ |
|
|
</button> |
|
|
<button id="declineBtn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-xl transition-all shadow-lg hover:shadow-xl"> |
|
|
<i class="fas fa-times mr-2"></i>No, Leave |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="appContent" class="container mx-auto px-4 py-10 hidden"> |
|
|
|
|
|
<header class="mb-12 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Secure Content Viewer</h1> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4"></div> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto"> |
|
|
View content with appropriate warnings and safety precautions. All images are blurred until you choose to reveal them. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-12"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-6"> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-1">Content Filter Settings</h2> |
|
|
<p class="text-gray-600 text-sm">Adjust your viewing preferences</p> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<span class="px-4 py-2 rounded-full bg-red-100 text-red-700 font-medium flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i>NSFW Filter Active |
|
|
</span> |
|
|
<span class="px-4 py-2 rounded-full bg-green-100 text-green-700 font-medium flex items-center"> |
|
|
<i class="fas fa-child mr-2"></i>Age Verified |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="image-container group"> |
|
|
<div class="rounded-xl overflow-hidden h-64"> |
|
|
<div class="bg-gray-200 border-2 border-dashed w-full h-full blurred"> |
|
|
<div class="overlay-warning" id="warning1"> |
|
|
<div> |
|
|
<i class="fas fa-lock text-3xl mb-3"></i> |
|
|
<p class="font-bold">Sensitive Content</p> |
|
|
<p class="text-sm mt-1">Click to view</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="py-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-gray-800">Content Title</h3> |
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-bold">NSFW</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
This image has been flagged as sensitive content. Viewer discretion is advised. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-container group"> |
|
|
<div class="rounded-xl overflow-hidden h-64"> |
|
|
<div class="bg-gray-200 border-2 border-dashed w-full h-full blurred"> |
|
|
<div class="overlay-warning" id="warning2"> |
|
|
<div> |
|
|
<i class="fas fa-eye-slash text-3xl mb-3"></i> |
|
|
<p class="font-bold">Explicit Material</p> |
|
|
<p class="text-sm mt-1">Click to view</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="py-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-gray-800">Content Title</h3> |
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-bold">NSFW</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
Warning: This content may be inappropriate for some viewers. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-container group"> |
|
|
<div class="rounded-xl overflow-hidden h-64"> |
|
|
<div class="bg-gray-200 border-2 border-dashed w-full h-full blurred"> |
|
|
<div class="overlay-warning" id="warning3"> |
|
|
<div> |
|
|
<i class="fas fa-user-shield text-3xl mb-3"></i> |
|
|
<p class="font-bold">Mature Audiences</p> |
|
|
<p class="text-sm mt-1">Click to view</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="py-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-gray-800">Content Title</h3> |
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-bold">Warning</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
This content requires age verification before viewing. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-container group"> |
|
|
<div class="rounded-xl overflow-hidden h-64"> |
|
|
<div class="bg-gray-200 border-2 border-dashed w-full h-full blurred"> |
|
|
<div class="overlay-warning" id="warning4"> |
|
|
<div> |
|
|
<i class="fas fa-exclamation-circle text-3xl mb-3"></i> |
|
|
<p class="font-bold">Sensitive Material</p> |
|
|
<p class="text-sm mt-1">Click to view</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="py-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-gray-800">Content Title</h3> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">Safe</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
This content has been reviewed and contains no explicit material. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 mt-12"> |
|
|
<h2 class="text-2xl font-bold text-center mb-6">Viewing Sensitive Content Responsibly</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-user-lock text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Privacy Protection</h3> |
|
|
<p class="text-gray-600">Ensure your viewing environment is private and appropriate for sensitive content.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Content Awareness</h3> |
|
|
<p class="text-gray-600">Be aware that certain content may not be suitable for all audiences or cultural contexts.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-shield-alt text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Safe Interaction</h3> |
|
|
<p class="text-gray-600">Report inappropriate content and respect content boundaries when sharing material.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
// Handle age verification |
|
|
const ageModal = document.getElementById('ageModal'); |
|
|
const appContent = document.getElementById('appContent'); |
|
|
const confirmBtn = document.getElementById('confirmBtn'); |
|
|
const declineBtn = document.getElementById('declineBtn'); |
|
|
|
|
|
confirmBtn.addEventListener('click', function() { |
|
|
ageModal.classList.add('hidden'); |
|
|
appContent.classList.remove('hidden'); |
|
|
localStorage.setItem('ageVerified', 'true'); |
|
|
}); |
|
|
|
|
|
declineBtn.addEventListener('click', function() { |
|
|
// Instead of redirecting, we'll show a message |
|
|
alert('You will be redirected to safe content.'); |
|
|
document.body.innerHTML = ` |
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-100"> |
|
|
<div class="text-center p-8 bg-white rounded-2xl shadow-xl max-w-md"> |
|
|
<i class="fas fa-check-circle text-5xl text-green-500 mb-4"></i> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">Safe Content Selected</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
You've chosen to view appropriate content for your age group. |
|
|
Thank you for your responsible choice. |
|
|
</p> |
|
|
<button onclick="location.reload()" class="bg |
|
|
<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=Ajith456/crudantha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
