|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ClassifAIds - Snap a Pic, AI Does the Rest</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); |
|
|
} |
|
|
.listing-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.ai-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.8; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.8; } |
|
|
} |
|
|
.slide-up { |
|
|
animation: slideUp 0.5s ease-out; |
|
|
} |
|
|
@keyframes slideUp { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">ClassifAIds</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="hover:text-blue-200 transition">How It Works</a> |
|
|
<a href="#" class="hover:text-blue-200 transition">For Sellers</a> |
|
|
<a href="#" class="hover:text-blue-200 transition">For Buyers</a> |
|
|
<a href="#" class="hover:text-blue-200 transition">About</a> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition"> |
|
|
Sign In |
|
|
</button> |
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16 md:py-24"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 slide-up"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Snap a Pic, AI Does the Rest</h2> |
|
|
<p class="text-xl mb-8">The most effortless way to sell or give away your used items. No typing, no hassle - just snap and go!</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-blue-50 transition flex items-center justify-center"> |
|
|
<i class="fas fa-camera mr-2"></i> Sell an Item |
|
|
</button> |
|
|
<button class="bg-blue-700 text-white px-6 py-3 rounded-full font-bold hover:bg-blue-800 transition flex items-center justify-center"> |
|
|
<i class="fas fa-gift mr-2"></i> Give Away Free |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center slide-up"> |
|
|
<div class="relative"> |
|
|
<div class="bg-white rounded-3xl p-2 shadow-2xl transform rotate-2 w-64 h-96 md:w-80 md:h-112"> |
|
|
<div class="bg-gray-100 rounded-2xl w-full h-full flex items-center justify-center"> |
|
|
<i class="fas fa-box-open text-gray-400 text-6xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -right-6 bg-blue-100 text-blue-800 p-4 rounded-full shadow-lg"> |
|
|
<i class="fas fa-robot text-3xl ai-pulse"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">How ClassifAIds Works</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition text-center"> |
|
|
<div class="bg-blue-100 text-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-camera text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">1. Snap a Photo</h3> |
|
|
<p class="text-gray-600">Take a picture of your item. Our AI will recognize what it is automatically.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition text-center"> |
|
|
<div class="bg-blue-100 text-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-magic text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">2. AI Does the Work</h3> |
|
|
<p class="text-gray-600">We generate the description, suggest a price, and handle buyer questions.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition text-center"> |
|
|
<div class="bg-blue-100 text-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-hand-holding-usd text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">3. Relax & Get Paid</h3> |
|
|
<p class="text-gray-600">Sit back while we manage the sale. You just approve the final deal.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Powered by Smart AI</h2> |
|
|
<div class="flex flex-col md:flex-row items-center mb-12"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Automatic Listing Creation</h3> |
|
|
<p class="text-gray-600 mb-6">Our AI recognizes your item from photos and generates a complete listing with:</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>Accurate item identification</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>Detailed description with key features</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>Smart pricing based on market data</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>Condition assessment guidance</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="border border-gray-200 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-200 w-10 h-10 rounded-full"></div> |
|
|
<div class="ml-3"> |
|
|
<div class="h-4 bg-gray-200 rounded w-24"></div> |
|
|
<div class="h-3 bg-gray-200 rounded w-16 mt-1"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-gray-500 text-sm">Just now</div> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="h-4 bg-gray-200 rounded w-full"></div> |
|
|
<div class="h-4 bg-gray-200 rounded w-3/4"></div> |
|
|
<div class="h-4 bg-gray-200 rounded w-5/6"></div> |
|
|
<div class="h-4 bg-gray-200 rounded w-2/3"></div> |
|
|
</div> |
|
|
<div class="mt-6 flex space-x-2"> |
|
|
<div class="bg-gray-200 w-24 h-24 rounded"></div> |
|
|
<div class="bg-gray-200 w-24 h-24 rounded"></div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="text-xl font-bold text-blue-600">$120 - $150</div> |
|
|
<div class="text-sm text-gray-500">AI suggested price</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row-reverse items-center mt-16"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pl-8"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Smart Sales Automation</h3> |
|
|
<p class="text-gray-600 mb-6">Set your preferences and let our AI handle the selling process:</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-robot text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Automated price reductions over time</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-robot text-blue-500 mt-1 mr-2"></i> |
|
|
<span>AI filters spam and low-quality inquiries</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-robot text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Smart negotiation handling based on your rules</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-robot text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Automated pickup scheduling</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="border border-gray-200 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">AI Assistant</div> |
|
|
<div class="text-xs text-gray-500">Managing your sale</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="bg-blue-50 text-blue-800 p-3 rounded-lg"> |
|
|
<div class="font-medium">New Offer Received!</div> |
|
|
<div class="text-sm">Buyer offered $135 for your sofa</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm font-medium">Accept</button> |
|
|
<button class="flex-1 bg-yellow-500 text-white py-2 rounded-lg text-sm font-medium">Counter</button> |
|
|
<button class="flex-1 bg-red-500 text-white py-2 rounded-lg text-sm font-medium">Decline</button> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-3 rounded-lg text-sm"> |
|
|
<div class="font-medium">AI Suggestion:</div> |
|
|
<div>Based on market data, $135 is a fair offer (10% below asking).</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-4">Curbside - Give & Get Free Items</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">The easiest way to give away items you no longer need and find free treasures in your neighborhood.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"> |
|
|
<div> |
|
|
<div class="bg-blue-50 p-6 rounded-xl mb-6"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> Smart Location Detection |
|
|
</h3> |
|
|
<p class="text-gray-600">Our AI extracts location from your photos and translates it to a simple address like "corner of 1st and 3rd Street".</p> |
|
|
</div> |
|
|
<div class="bg-green-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-sync-alt text-green-600 mr-2"></i> Real-Time Status Updates |
|
|
</h3> |
|
|
<p class="text-gray-600">One-tap "Taken!" button for givers and "Still There?" button for receivers keep listings accurate and up-to-date.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm"> |
|
|
<div class="relative h-64 bg-gray-100 flex items-center justify-center"> |
|
|
<i class="fas fa-map-marked-alt text-4xl text-gray-400"></i> |
|
|
<div class="absolute bottom-4 left-4 bg-white p-2 rounded-lg shadow-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
|
<div class="text-sm font-medium">3 free items nearby</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Wooden Dining Table</h4> |
|
|
<p class="text-sm text-gray-500">Corner of Main St & 5th Ave</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium"> |
|
|
0.3 miles away |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex space-x-2"> |
|
|
<button class="flex-1 bg-blue-600 text-white py-2 rounded-lg text-sm font-medium flex items-center justify-center"> |
|
|
<i class="fas fa-directions mr-2"></i> Directions |
|
|
</button> |
|
|
<button class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg text-sm font-medium flex items-center justify-center"> |
|
|
<i class="fas fa-question-circle mr-2"></i> Still There? |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">What People Are Saying</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-gray-200 w-10 h-10 rounded-full"></div> |
|
|
<div class="ml-3"> |
|
|
<div class="font-medium">Sarah J.</div> |
|
|
<div class="text-yellow-500"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Sold my couch in 2 days without typing a single word! The AI handled all the buyer questions and negotiations for me."</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-gray-200 w-10 h-10 rounded-full"></div> |
|
|
<div class="ml-3"> |
|
|
<div class="font-medium">Mike T.</div> |
|
|
<div class="text-yellow-500"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Gave away 5 items in one afternoon using Curbside. So much better than throwing things away!"</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-gray-200 w-10 h-10 rounded-full"></div> |
|
|
<div class="ml-3"> |
|
|
<div class="font-medium">Lisa M.</div> |
|
|
<div class="text-yellow-500"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"The price suggestion was spot on - got exactly what the AI predicted. No more guessing or haggling!"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Experience Effortless Selling?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands who are already enjoying the simplest way to sell and give away items.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold hover:bg-blue-50 transition"> |
|
|
<i class="fas fa-download mr-2"></i> Get the App |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-blue-600 transition"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-gray-400 py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-robot text-2xl text-blue-400"></i> |
|
|
<h3 class="text-xl font-bold text-white">ClassifAIds</h3> |
|
|
</div> |
|
|
<p class="mb-4">The most effortless way to exchange used goods.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-white font-medium mb-4">For Sellers</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white transition">How It Works</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Pricing Tips</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Safety Guide</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Success Stories</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-white font-medium mb-4">For Buyers</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white transition">Finding Deals</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Negotiation Tips</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Pickup Guide</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-white font-medium mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white transition">About Us</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Blog</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Careers</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
© 2025 ClassifAIds. All rights reserved. |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="hover:text-white transition">Privacy Policy</a> |
|
|
<a href="#" class="hover:text-white transition">Terms of Service</a> |
|
|
<a href="#" class="hover:text-white transition">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="mobileMenu" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-50 hidden"> |
|
|
<div class="flex justify-end p-4"> |
|
|
<button id="closeMenu" class="text-white text-3xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-center h-full space-y-8"> |
|
|
<a href="#" class="text-white text-2xl">How It Works</a> |
|
|
<a href="#" class="text-white text-2xl">For Sellers</a> |
|
|
<a href="#" class="text-white text-2xl">For Buyers</a> |
|
|
<a href="#" class="text-white text-2xl">About</a> |
|
|
<button class="bg-white text-blue-600 px-8 py-3 rounded-full font-bold text-xl mt-8"> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('.md\\:hidden button').addEventListener('click', function() { |
|
|
document.getElementById('mobileMenu').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeMenu').addEventListener('click', function() { |
|
|
document.getElementById('mobileMenu').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = () => { |
|
|
const elements = document.querySelectorAll('.slide-up'); |
|
|
elements.forEach(el => { |
|
|
const rect = el.getBoundingClientRect(); |
|
|
if (rect.top <= window.innerHeight - 100) { |
|
|
el.classList.add('slide-up'); |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
window.addEventListener('load', animateOnScroll); |
|
|
</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=danda101/drag" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
