Hugging Face's logo

Spaces:
Beatwrecka
/
pet-talk
Running

App Files Community
pet-talk / index.html
Beatwrecka's picture
Beatwrecka
undefined - Initial Deployment
40c7d4c verified
raw
history blame contribute delete
59.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Pet Talk – Make Your Pet the Star</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=Poppins:wght@400;500;600;700&display=swap');
body {
 font-family: 'Poppins', sans-serif;
 background-color: #f9f9f9;
 }
.gradient-bg {
 background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
 }
.pet-card {
 transition: all 0.3s ease;
 border-radius: 20px;
 overflow: hidden;
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
.pet-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 15px 30px rgba(0,0,0,0.2);
 }
.upload-area {
 border: 3px dashed #ccc;
 transition: all 0.3s ease;
 }
.upload-area:hover {
 border-color: #ff9a9e;
 background-color: rgba(255, 154, 158, 0.05);
 }
.tab-content {
 display: none;
 }
.tab-content.active {
 display: block;
 animation: fadeIn 0.5s ease;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
.voice-option {
 transition: all 0.3s ease;
 }
.voice-option:hover {
 transform: scale(1.05);
 }
.voice-option.selected {
 border: 3px solid #ff9a9e;
 box-shadow: 0 5px 15px rgba(255, 154, 158, 0.3);
 }
 </style>
</head>
<body>
 <!-- Landing Page -->
 <div id="landing-page">
 <!-- Header -->
 <header class="bg-white shadow-sm py-4 px-6">
 <div class="container mx-auto flex justify-between items-center">
 <div class="flex items-center">
 <div class="w-12 h-12 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl mr-3">PT</div>
 <h1 class="text-2xl font-bold text-pink-600">Pet Talk</h1>
 </div>
 <nav class="hidden md:flex space-x-8">
 <a href="#" class="text-gray-700 hover:text-pink-600 font-medium">Templates</a>
 <a href="#" class="text-gray-700 hover:text-pink-600 font-medium">About</a>
 <a href="#" class="text-gray-700 hover:text-pink-600 font-medium">Pricing</a>
 </nav>
 <button onclick="showGeneratorPage()" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:scale-105">
 Create Now
 </button>
 <button class="md:hidden text-gray-700">
 <i class="fas fa-bars text-2xl"></i>
 </button>
 </div>
 </header>
<!-- Hero Section -->
 <section class="gradient-bg py-20 px-6">
 <div class="container mx-auto flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-10 md:mb-0">
 <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">Turn Your Pet Into a Star</h1>
 <p class="text-xl text-white mb-8">Upload a photo, add a message, and make hilarious videos or heartfelt gifts featuring your pet.</p>
 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
 <button onclick="showGeneratorPage('card')" class="bg-white text-pink-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
 <i class="fas fa-palette text-xl mr-2"></i> Make a Card or Print
 </button>
 <button onclick="showGeneratorPage('video')" class="bg-pink-700 text-white hover:bg-pink-800 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
 <i class="fas fa-video text-xl mr-2"></i> Create a Video Message
 </button>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Happy dog" class="rounded-3xl shadow-2xl max-w-md w-full h-auto">
 </div>
 </div>
 </section>
<!-- How It Works Section -->
 <section class="py-20 px-6 bg-white">
 <div class="container mx-auto">
 <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">How It Works</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 <div class="text-center">
 <div class="w-24 h-24 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-camera-retro text-white text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3 text-gray-800">1. Upload Your Pet Photo</h3>
 <p class="text-gray-600">Simply upload a clear photo of your pet. Any pet, any pose!</p>
 </div>
 <div class="text-center">
 <div class="w-24 h-24 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-comment-dots text-white text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3 text-gray-800">2. Add Text or Record a Message</h3>
 <p class="text-gray-600">Type your message or record your voice for a personal touch.</p>
 </div>
 <div class="text-center">
 <div class="w-24 h-24 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-gift text-white text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3 text-gray-800">3. Get Your Creation</h3>
 <p class="text-gray-600">Receive a personalized video or print to share with loved ones.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Popular Templates Section -->
 <section class="py-20 px-6 bg-gray-50">
 <div class="container mx-auto">
 <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Popular Templates</h2>
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Template 1 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-t-2xl">
 <img src="https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Dog in football jersey" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-6 text-white">
 <h3 class="text-xl font-bold">Premier League Dog Interview</h3>
 </div>
 </div>
 <div class="bg-white p-6 rounded-b-2xl">
 <p class="text-gray-600 mb-4">Your pup as the star player in a post-match interview!</p>
 <button onclick="showGeneratorPage('video', 'football')" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300">
 Try This Template
 </button>
 </div>
 </div>
<!-- Template 2 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-t-2xl">
 <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cat on red carpet" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-6 text-white">
 <h3 class="text-xl font-bold">Red Carpet Hamster</h3>
 </div>
 </div>
 <div class="bg-white p-6 rounded-b-2xl">
 <p class="text-gray-600 mb-4">Your tiny pet walking the red carpet at a glamorous event.</p>
 <button onclick="showGeneratorPage('video', 'redcarpet')" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300">
 Try This Template
 </button>
 </div>
 </div>
<!-- Template 3 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-t-2xl">
 <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cat with party hat" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-6 text-white">
 <h3 class="text-xl font-bold">Birthday Cat Rap</h3>
 </div>
 </div>
 <div class="bg-white p-6 rounded-b-2xl">
 <p class="text-gray-600 mb-4">Your cat dropping the hottest birthday rap of the year!</p>
 <button onclick="showGeneratorPage('video', 'birthday')" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300">
 Try This Template
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-12 px-6">
 <div class="container mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center mb-4">
 <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-lg mr-2">PT</div>
 <h2 class="text-xl font-bold">Pet Talk</h2>
 </div>
 <p class="text-gray-400">Making pets the stars they were born to be since 2023.</p>
 </div>
 <div>
 <h3 class="text-lg font-bold mb-4">Quick Links</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-bold mb-4">Legal</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-bold mb-4">Connect With Us</h3>
 <div class="flex space-x-4 mb-4">
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600"><i class="fab fa-twitter"></i></a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600"><i class="fab fa-instagram"></i></a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600"><i class="fab fa-tiktok"></i></a>
 </div>
 <p class="text-gray-400">support@pettalk.com</p>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400">
 <p>&copy; 2023 Pet Talk. All rights reserved.</p>
 </div>
 </div>
 </footer>
 </div>
<!-- Generator Page -->
 <div id="generator-page" class="hidden">
 <!-- Generator Header -->
 <header class="bg-white shadow-sm py-4 px-6">
 <div class="container mx-auto flex justify-between items-center">
 <div class="flex items-center">
 <button onclick="showLandingPage()" class="mr-4 text-gray-600 hover:text-pink-600">
 <i class="fas fa-arrow-left text-xl"></i>
 </button>
 <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-lg mr-3">PT</div>
 <h1 class="text-xl font-bold text-pink-600">Pet Talk Creator</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button class="text-gray-600 hover:text-pink-600">
 <i class="fas fa-save text-xl"></i>
 </button>
 <button class="text-gray-600 hover:text-pink-600">
 <i class="fas fa-question-circle text-xl"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Progress Steps -->
 <div class="bg-gray-100 py-4 px-6">
 <div class="container mx-auto">
 <div class="flex justify-between items-center">
 <div class="step flex flex-col items-center relative w-1/4">
 <div id="step1-indicator" class="w-10 h-10 rounded-full bg-pink-600 text-white flex items-center justify-center font-bold mb-2">1</div>
 <span id="step1-text" class="text-sm font-medium text-pink-600">Choose Pet Image</span>
 <div class="absolute top-5 left-1/2 transform -translate-x-1/2 h-1 w-full bg-gray-300 -z-10"></div>
 </div>
 <div class="step flex flex-col items-center relative w-1/4">
 <div id="step2-indicator" class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-2">2</div>
 <span id="step2-text" class="text-sm font-medium text-gray-500">Select Format</span>
 <div class="absolute top-5 left-1/2 transform -translate-x-1/2 h-1 w-full bg-gray-300 -z-10"></div>
 </div>
 <div class="step flex flex-col items-center relative w-1/4">
 <div id="step3-indicator" class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-2">3</div>
 <span id="step3-text" class="text-sm font-medium text-gray-500">Add Message</span>
 <div class="absolute top-5 left-1/2 transform -translate-x-1/2 h-1 w-full bg-gray-300 -z-10"></div>
 </div>
 <div class="step flex flex-col items-center w-1/4">
 <div id="step4-indicator" class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold mb-2">4</div>
 <span id="step4-text" class="text-sm font-medium text-gray-500">Choose Scenario</span>
 </div>
 </div>
 </div>
 </div>
<!-- Generator Content -->
 <div class="container mx-auto py-8 px-6">
 <!-- Step 1: Choose Pet Image -->
 <div id="step1-content" class="tab-content active">
 <h2 class="text-2xl font-bold mb-6 text-gray-800">Upload Your Pet's Photo</h2>
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <div>
 <div class="upload-area rounded-2xl p-8 text-center cursor-pointer mb-6">
 <input type="file" id="pet-upload" class="hidden" accept="image/*">
 <label for="pet-upload" class="cursor-pointer">
 <div class="w-24 h-24 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-cloud-upload-alt text-white text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2 text-gray-800">Drag & Drop or Click to Upload</h3>
 <p class="text-gray-500 mb-4">Upload a clear photo of your pet (JPEG, PNG)</p>
 <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-6 rounded-full">
 Select File
 </button>
 </label>
 </div>
 <div class="bg-white rounded-2xl p-6 shadow-sm">
 <h3 class="font-bold mb-3 text-gray-800">Photo Tips</h3>
 <ul class="space-y-2 text-gray-600">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-pink-600 mt-1 mr-2"></i>
 <span>Use a clear, well-lit photo</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-pink-600 mt-1 mr-2"></i>
 <span>Try to get your pet looking at the camera</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-pink-600 mt-1 mr-2"></i>
 <span>Plain backgrounds work best</span>
 </li>
 </ul>
 </div>
 </div>
 <div>
 <div class="bg-white rounded-2xl p-6 shadow-sm h-full">
 <h3 class="font-bold mb-4 text-gray-800">Preview</h3>
 <div id="image-preview" class="border-2 border-dashed border-gray-300 rounded-xl flex items-center justify-center h-64 mb-4">
 <p class="text-gray-500">Your pet's image will appear here</p>
 </div>
 <div class="flex space-x-4">
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-full">
 <i class="fas fa-crop-alt mr-2"></i> Crop
 </button>
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-full">
 <i class="fas fa-adjust mr-2"></i> Adjust
 </button>
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-full">
 <i class="fas fa-redo mr-2"></i> Reset
 </button>
 </div>
 </div>
 </div>
 </div>
 <div class="flex justify-end mt-8">
 <button onclick="nextStep(2)" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full">
 Next: Select Format <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<!-- Step 2: Select Format -->
 <div id="step2-content" class="tab-content">
 <h2 class="text-2xl font-bold mb-6 text-gray-800">Choose Your Format</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
 <div id="card-format" class="bg-white rounded-2xl p-6 shadow-sm cursor-pointer border-2 border-transparent hover:border-pink-400 transition-all">
 <div class="flex items-start">
 <div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center text-white mr-4">
 <i class="fas fa-palette text-2xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-2 text-gray-800">Card or Print</h3>
 <p class="text-gray-600">Create a beautiful greeting card or printable artwork featuring your pet.</p>
 </div>
 </div>
 <div class="mt-6 grid grid-cols-2 gap-4">
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-birthday-cake text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Birthday Cards</p>
 </div>
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-holiday text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Holiday Cards</p>
 </div>
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-print text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Wall Art</p>
 </div>
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-gift text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Gift Tags</p>
 </div>
 </div>
 </div>
 <div id="video-format" class="bg-white rounded-2xl p-6 shadow-sm cursor-pointer border-2 border-transparent hover:border-pink-400 transition-all">
 <div class="flex items-start">
 <div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center text-white mr-4">
 <i class="fas fa-video text-2xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-2 text-gray-800">Video Message</h3>
 <p class="text-gray-600">Create a hilarious or heartfelt animated video starring your pet.</p>
 </div>
 </div>
 <div class="mt-6 grid grid-cols-2 gap-4">
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-birthday-cake text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Birthday Wishes</p>
 </div>
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-heart text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Love Messages</p>
 </div>
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-trophy text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Congratulations</p>
 </div>
 <div class="bg-gray-100 rounded-lg p-4 text-center">
 <i class="fas fa-microphone text-2xl text-pink-600 mb-2"></i>
 <p class="text-sm font-medium">Voice Messages</p>
 </div>
 </div>
 </div>
 </div>
 <div class="flex justify-between mt-8">
 <button onclick="prevStep(1)" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-full">
 <i class="fas fa-arrow-left mr-2"></i> Back
 </button>
 <button onclick="nextStep(3)" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full">
 Next: Add Message <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<!-- Step 3: Add Message -->
 <div id="step3-content" class="tab-content">
 <h2 class="text-2xl font-bold mb-6 text-gray-800">Add Your Message</h2>
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <div>
 <div class="bg-white rounded-2xl p-6 shadow-sm mb-6">
 <div class="flex border-b border-gray-200 mb-6">
 <button id="text-tab" class="tab-button active py-2 px-4 font-medium text-pink-600 border-b-2 border-pink-600">Text</button>
 <button id="voice-tab" class="tab-button py-2 px-4 font-medium text-gray-500 hover:text-pink-600">Voice</button>
 </div>
<!-- Text Message Content -->
 <div id="text-content" class="tab-content active">
 <div class="mb-4">
 <label for="message-text" class="block text-gray-700 font-medium mb-2">Your Message</label>
 <textarea id="message-text" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="Type your message here..."></textarea>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 font-medium mb-2">Text Style</label>
 <div class="grid grid-cols-4 gap-2">
 <button class="bg-gray-200 hover:bg-gray-300 py-2 rounded-lg">
 <i class="fas fa-font text-lg"></i>
 </button>
 <button class="bg-gray-200 hover:bg-gray-300 py-2 rounded-lg">
 <i class="fas fa-bold text-lg"></i>
 </button>
 <button class="bg-gray-200 hover:bg-gray-300 py-2 rounded-lg">
 <i class="fas fa-italic text-lg"></i>
 </button>
 <button class="bg-gray-200 hover:bg-gray-300 py-2 rounded-lg">
 <i class="fas fa-underline text-lg"></i>
 </button>
 </div>
 </div>
 <div>
 <label class="block text-gray-700 font-medium mb-2">Text Color</label>
 <div class="flex space-x-2">
 <div class="w-8 h-8 rounded-full bg-black cursor-pointer border-2 border-gray-300"></div>
 <div class="w-8 h-8 rounded-full bg-white cursor-pointer border-2 border-gray-300"></div>
 <div class="w-8 h-8 rounded-full bg-pink-600 cursor-pointer border-2 border-gray-300"></div>
 <div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer border-2 border-gray-300"></div>
 <div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer border-2 border-gray-300"></div>
 <div class="w-8 h-8 rounded-full bg-yellow-400 cursor-pointer border-2 border-gray-300"></div>
 </div>
 </div>
 </div>
<!-- Voice Message Content -->
 <div id="voice-content" class="tab-content">
 <div class="mb-6">
 <div class="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
 <div class="text-center">
 <i class="fas fa-microphone-alt text-3xl text-pink-600 mb-2"></i>
 <p class="text-gray-600">Click to record your message</p>
 </div>
 </div>
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 font-medium mb-2">Or upload audio file</label>
 <div class="flex">
 <input type="file" id="audio-upload" class="hidden" accept="audio/*">
 <label for="audio-upload" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-l-lg cursor-pointer">
 Choose File
 </label>
 <div class="bg-gray-100 px-4 py-2 rounded-r-lg text-gray-500 flex-grow">
 No file chosen
 </div>
 </div>
 </div>
 <div>
 <label class="block text-gray-700 font-medium mb-2">Voice Options</label>
 <div class="grid grid-cols-3 gap-3">
 <div class="voice-option bg-white p-3 rounded-lg border-2 border-gray-200 cursor-pointer text-center">
 <i class="fas fa-child text-2xl text-pink-600 mb-1"></i>
 <p class="text-sm font-medium">Happy Kid</p>
 </div>
 <div class="voice-option bg-white p-3 rounded-lg border-2 border-gray-200 cursor-pointer text-center">
 <i class="fas fa-user-tie text-2xl text-pink-600 mb-1"></i>
 <p class="text-sm font-medium">Professional</p>
 </div>
 <div class="voice-option bg-white p-3 rounded-lg border-2 border-gray-200 cursor-pointer text-center">
 <i class="fas fa-robot text-2xl text-pink-600 mb-1"></i>
 <p class="text-sm font-medium">Robot</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div>
 <div class="bg-white rounded-2xl p-6 shadow-sm h-full">
 <h3 class="font-bold mb-4 text-gray-800">Preview</h3>
 <div class="border-2 border-dashed border-gray-300 rounded-xl flex items-center justify-center h-64 mb-4">
 <p class="text-gray-500">Your message preview will appear here</p>
 </div>
 <div class="text-center">
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-full">
 <i class="fas fa-play-circle mr-2"></i> Play Preview
 </button>
 </div>
 </div>
 </div>
 </div>
 <div class="flex justify-between mt-8">
 <button onclick="prevStep(2)" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-full">
 <i class="fas fa-arrow-left mr-2"></i> Back
 </button>
 <button onclick="nextStep(4)" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full">
 Next: Choose Scenario <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<!-- Step 4: Choose Scenario -->
 <div id="step4-content" class="tab-content">
 <h2 class="text-2xl font-bold mb-6 text-gray-800">Choose a Scenario</h2>
 <div class="mb-8">
 <div class="flex border-b border-gray-200 mb-6">
 <button id="templates-tab" class="tab-button active py-2 px-4 font-medium text-pink-600 border-b-2 border-pink-600">Templates</button>
 <button id="custom-tab" class="tab-button py-2 px-4 font-medium text-gray-500 hover:text-pink-600">Custom</button>
 </div>
<!-- Templates Content -->
 <div id="templates-content" class="tab-content active">
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Template 1 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Football interview" class="w-full h-48 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-4 text-white">
 <h3 class="font-bold">Football Interview</h3>
 </div>
 </div>
 <div class="bg-white p-4 rounded-b-xl">
 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-full">
 Use This Template
 </button>
 </div>
 </div>
<!-- Template 2 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Red carpet" class="w-full h-48 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-4 text-white">
 <h3 class="font-bold">Red Carpet Event</h3>
 </div>
 </div>
 <div class="bg-white p-4 rounded-b-xl">
 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-full">
 Use This Template
 </button>
 </div>
 </div>
<!-- Template 3 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Birthday rap" class="w-full h-48 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-4 text-white">
 <h3 class="font-bold">Birthday Rap</h3>
 </div>
 </div>
 <div class="bg-white p-4 rounded-b-xl">
 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-full">
 Use This Template
 </button>
 </div>
 </div>
<!-- Template 4 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1517423738875-5ce310acd3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="News anchor" class="w-full h-48 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-4 text-white">
 <h3 class="font-bold">News Anchor</h3>
 </div>
 </div>
 <div class="bg-white p-4 rounded-b-xl">
 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-full">
 Use This Template
 </button>
 </div>
 </div>
<!-- Template 5 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1551969014-7d2c4cddf0b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Superhero" class="w-full h-48 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-4 text-white">
 <h3 class="font-bold">Superhero</h3>
 </div>
 </div>
 <div class="bg-white p-4 rounded-b-xl">
 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-full">
 Use This Template
 </button>
 </div>
 </div>
<!-- Template 6 -->
 <div class="pet-card">
 <div class="relative overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Rock star" class="w-full h-48 object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
 <div class="absolute bottom-0 left-0 p-4 text-white">
 <h3 class="font-bold">Rock Star</h3>
 </div>
 </div>
 <div class="bg-white p-4 rounded-b-xl">
 <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-full">
 Use This Template
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Custom Content -->
 <div id="custom-content" class="tab-content">
 <div class="bg-white rounded-2xl p-6 shadow-sm mb-6">
 <h3 class="font-bold mb-4 text-gray-800">Create Your Own Scene</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <label class="block text-gray-700 font-medium mb-2">Background</label>
 <div class="grid grid-cols-3 gap-2">
 <div class="h-20 rounded-lg bg-blue-500 cursor-pointer"></div>
 <div class="h-20 rounded-lg bg-green-500 cursor-pointer"></div>
 <div class="h-20 rounded-lg bg-yellow-400 cursor-pointer"></div>
 <div class="h-20 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer"></div>
 <div class="h-20 rounded-lg bg-gray-700 cursor-pointer"></div>
 <div class="h-20 rounded-lg bg-white border-2 border-gray-300 cursor-pointer flex items-center justify-center">
 <i class="fas fa-plus text-gray-500"></i>
 </div>
 </div>
 </div>
 <div>
 <label class="block text-gray-700 font-medium mb-2">Props</label>
 <div class="grid grid-cols-3 gap-2">
 <div class="h-20 rounded-lg bg-gray-100 cursor-pointer flex flex-col items-center justify-center">
 <i class="fas fa-hat-cowboy text-2xl text-gray-600 mb-1"></i>
 <span class="text-xs">Hats</span>
 </div>
 <div class="h-20 rounded-lg bg-gray-100 cursor-pointer flex flex-col items-center justify-center">
 <i class="fas fa-glasses text-2xl text-gray-600 mb-1"></i>
 <span class="text-xs">Glasses</span>
 </div>
 <div class="h-20 rounded-lg bg-gray-100 cursor-pointer flex flex-col items-center justify-center">
 <i class="fas fa-scarf text-2xl text-gray-600 mb-1"></i>
 <span class="text-xs">Clothes</span>
 </div>
 <div class="h-20 rounded-lg bg-gray-100 cursor-pointer flex flex-col items-center justify-center">
 <i class="fas fa-guitar text-2xl text-gray-600 mb-1"></i>
 <span class="text-xs">Instruments</span>
 </div>
 <div class="h-20 rounded-lg bg-gray-100 cursor-pointer flex flex-col items-center justify-center">
 <i class="fas fa-trophy text-2xl text-gray-600 mb-1"></i>
 <span class="text-xs">Trophies</span>
 </div>
 <div class="h-20 rounded-lg bg-gray-100 cursor-pointer flex flex-col items-center justify-center">
 <i class="fas fa-plus text-gray-500"></i>
 <span class="text-xs">More</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="flex justify-between mt-8">
 <button onclick="prevStep(3)" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-full">
 <i class="fas fa-arrow-left mr-2"></i> Back
 </button>
 <button onclick="generatePreview()" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full">
 Generate Preview <i class="fas fa-magic ml-2"></i>
 </button>
 </div>
 </div>
<!-- Preview Modal -->
 <div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-2xl w-full max-w-4xl max-h-screen overflow-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-2xl font-bold text-gray-800">Your Pet Talk Preview</h3>
 <button onclick="closePreview()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times text-2xl"></i>
 </button>
 </div>
 <div class="bg-gray-100 rounded-xl flex items-center justify-center h-96 mb-6">
 <p class="text-gray-500">Your generated preview will appear here</p>
 </div>
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-full flex items-center justify-center">
 <i class="fas fa-download mr-2"></i> Download
 </button>
 <button class="bg-white hover:bg-gray-100 text-pink-600 font-bold py-3 px-4 rounded-full border-2 border-pink-600 flex items-center justify-center">
 <i class="fas fa-redo mr-2"></i> Regenerate
 </button>
 <button class="bg-white hover:bg-gray-100 text-pink-600 font-bold py-3 px-4 rounded-full border-2 border-pink-600 flex items-center justify-center">
 <i class="fas fa-share-alt mr-2"></i> Share
 </button>
 <button class="bg-white hover:bg-gray-100 text-pink-600 font-bold py-3 px-4 rounded-full border-2 border-pink-600 flex items-center justify-center">
 <i class="fas fa-gift mr-2"></i> Add to Gift
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Show landing page by default
 document.getElementById('landing-page').classList.remove('hidden');
 document.getElementById('generator-page').classList.add('hidden');
// Function to show generator page
 function showGeneratorPage(format = null, template = null) {
 document.getElementById('landing-page').classList.add('hidden');
 document.getElementById('generator-page').classList.remove('hidden');
// Reset to step 1
 resetSteps();
// If a specific format was requested, simulate clicking it
 if (format === 'card') {
 document.getElementById('card-format').click();
 } else if (format === 'video') {
 document.getElementById('video-format').click();
 }
// If a template was requested, jump to that step
 if (template) {
 // In a real app, we would load the template data here
 nextStep(4);
 }
 }
// Function to show landing page
 function showLandingPage() {
 document.getElementById('landing-page').classList.remove('hidden');
 document.getElementById('generator-page').classList.add('hidden');
 }
// Step navigation functions
 let currentStep = 1;
function resetSteps() {
 currentStep = 1;
 updateStepIndicators();
 showCurrentStep();
 }
function nextStep(step) {
 if (step > currentStep) {
 currentStep = step;
 updateStepIndicators();
 showCurrentStep();
 }
 }
function prevStep(step) {
 if (step < currentStep) {
 currentStep = step;
 updateStepIndicators();
 showCurrentStep();
 }
 }
function updateStepIndicators() {
 // Reset all indicators
 for (let i = 1; i <= 4; i++) {
 document.getElementById(`step${i}-indicator`).classList.remove('bg-pink-600', 'text-white');
 document.getElementById(`step${i}-indicator`).classList.add('bg-gray-300', 'text-gray-600');
 document.getElementById(`step${i}-text`).classList.remove('text-pink-600');
 document.getElementById(`step${i}-text`).classList.add('text-gray-500');
 }
// Update current and completed steps
 for (let i = 1; i <= currentStep; i++) {
 document.getElementById(`step${i}-indicator`).classList.remove('bg-gray-300', 'text-gray-600');
 document.getElementById(`step${i}-indicator`).classList.add('bg-pink-600', 'text-white');
 document.getElementById(`step${i}-text`).classList.remove('text-gray-500');
 document.getElementById(`step${i}-text`).classList.add('text-pink-600');
 }
 }
function showCurrentStep() {
 // Hide all step contents
 for (let i = 1; i <= 4; i++) {
 document.getElementById(`step${i}-content`).classList.remove('active');
 }
// Show current step content
 document.getElementById(`step${currentStep}-content`).classList.add('active');
 }
// Tab functionality
 document.addEventListener('DOMContentLoaded', function() {
 // Message type tabs (Text/Voice)
 document.getElementById('text-tab').addEventListener('click', function() {
 document.getElementById('text-tab').classList.add('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('voice-tab').classList.remove('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('text-content').classList.add('active');
 document.getElementById('voice-content').classList.remove('active');
 });
document.getElementById('voice-tab').addEventListener('click', function() {
 document.getElementById('voice-tab').classList.add('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('text-tab').classList.remove('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('voice-content').classList.add('active');
 document.getElementById('text-content').classList.remove('active');
 });
// Scenario type tabs (Templates/Custom)
 document.getElementById('templates-tab').addEventListener('click', function() {
 document.getElementById('templates-tab').classList.add('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('custom-tab').classList.remove('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('templates-content').classList.add('active');
 document.getElementById('custom-content').classList.remove('active');
 });
document.getElementById('custom-tab').addEventListener('click', function() {
 document.getElementById('custom-tab').classList.add('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('templates-tab').classList.remove('active', 'text-pink-600', 'border-pink-600');
 document.getElementById('custom-content').classList.add('active');
 document.getElementById('templates-content').classList.remove('active');
 });
// Format selection
 document.getElementById('card-format').addEventListener('click', function() {
 document.getElementById('card-format').classList.add('border-pink-400');
 document.getElementById('video-format').classList.remove('border-pink-400');
 });
document.getElementById('video-format').addEventListener('click', function() {
 document.getElementById('video-format').classList.add('border-pink-400');
 document.getElementById('card-format').classList.remove('border-pink-400');
 });
// Voice option selection
 const voiceOptions = document.querySelectorAll('.voice-option');
 voiceOptions.forEach(option => {
 option.addEventListener('click', function() {
 voiceOptions.forEach(opt => opt.classList.remove('selected'));
 this.classList.add('selected');
 });
 });
// Image upload preview
 document.getElementById('pet-upload').addEventListener('change', function(e) {
 const file = e.target.files[0];
 if (file) {
 const reader = new FileReader();
 reader.onload = function(event) {
 document.getElementById('image-preview').innerHTML =
`<img src="${event.target.result}" alt="Preview" class="w-full h-full object-contain">`;
 };
 reader.readAsDataURL(file);
 }
 });
 });
// Preview modal functions
 function generatePreview() {
 document.getElementById('preview-modal').classList.remove('hidden');
 }
function closePreview() {
 document.getElementById('preview-modal').classList.add('hidden');
 }
 </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=Beatwrecka/pet-talk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>