Hugging Face's logo

Spaces:
Ashu9675
/
snapzy
Running

App Files Community
snapzy / index.html
Ashu9675's picture
Ashu9675
Create app snapzy which have all features like Instagram but different and have a custom logo and remainder that all feature working - Initial Deployment
bd18dc2 verified
raw
history blame contribute delete
31 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Snapzy - Share Your Moments</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@300;400;500;600;700&display=swap');
body {
 font-family: 'Poppins', sans-serif;
 background-color: #fafafa;
 }
.gradient-text {
 background: linear-gradient(45deg, #FF5F6D, #FFC371);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.story-ring {
 background: linear-gradient(45deg, #FF5F6D, #FFC371);
 padding: 2px;
 border-radius: 50%;
 }
.post-image {
 transition: transform 0.3s ease;
 }
.post-image:hover {
 transform: scale(1.03);
 }
.custom-scrollbar::-webkit-scrollbar {
 width: 5px;
 height: 5px;
 }
.custom-scrollbar::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
.custom-scrollbar::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 10px;
 }
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #555;
 }
.modal {
 transition: opacity 0.3s ease;
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Navigation Bar -->
 <nav class="bg-white border-b border-gray-200 fixed w-full z-10">
 <div class="max-w-6xl mx-auto px-4">
 <div class="flex justify-between items-center h-16">
 <!-- Logo -->
 <div class="flex items-center">
 <div class="flex items-center">
 <div class="w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-yellow-400 flex items-center justify-center">
 <span class="text-white font-bold text-xl">S</span>
 </div>
 <span class="ml-2 text-xl font-bold gradient-text">Snapzy</span>
 </div>
 </div>
<!-- Search Bar -->
 <div class="hidden md:block mx-4 flex-1 max-w-md">
 <div class="relative">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <i class="fas fa-search text-gray-400"></i>
 </div>
 <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Search">
 </div>
 </div>
<!-- Navigation Icons -->
 <div class="flex items-center space-x-4 md:space-x-6">
 <button class="text-gray-700 hover:text-pink-500">
 <i class="fas fa-home text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-paper-plane text-xl"></i>
 </button>
 <button onclick="openCreatePostModal()" class="text-gray-700 hover:text-pink-500">
 <i class="far fa-plus-square text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-compass text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-heart text-xl"></i>
 </button>
 <div class="relative">
 <button onclick="toggleProfileDropdown()" class="flex items-center space-x-1 focus:outline-none">
 <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover">
 </div>
 </button>
 <!-- Profile Dropdown -->
 <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-user mr-2"></i> Profile
 </a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-bookmark mr-2"></i> Saved
 </a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-cog mr-2"></i> Settings
 </a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-sign-out-alt mr-2"></i> Logout
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </nav>
<!-- Mobile Bottom Navigation -->
 <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around items-center h-14 z-10">
 <button class="text-gray-700 hover:text-pink-500">
 <i class="fas fa-home text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-search text-xl"></i>
 </button>
 <button onclick="openCreatePostModal()" class="text-gray-700 hover:text-pink-500">
 <i class="far fa-plus-square text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-heart text-xl"></i>
 </button>
 <button onclick="toggleProfileDropdown()" class="text-gray-700 hover:text-pink-500">
 <i class="fas fa-user text-xl"></i>
 </button>
 </div>
<!-- Main Content -->
 <main class="pt-16 pb-20 md:pb-0 max-w-6xl mx-auto px-4">
 <!-- Stories -->
 <div class="bg-white border border-gray-200 rounded-lg mb-6 p-4 overflow-x-auto">
 <div class="flex space-x-4 custom-scrollbar">
 <!-- Your Story -->
 <div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">
 <i class="fas fa-plus text-gray-500"></i>
 </div>
 </div>
 </div>
 <span class="text-xs">Your Story</span>
 </div>
<!-- Other Stories -->
 <div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Story" class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 <span class="text-xs">jessica_22</span>
 </div>
<div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Story" class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 <span class="text-xs">mike_adams</span>
 </div>
<div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Story" class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 <span class="text-xs">sarah_travels</span>
 </div>
<div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Story" class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 <span class="text-xs">david_photog</span>
 </div>
<div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Story" class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 <span class="text-xs">lisa_foodie</span>
 </div>
<div class="flex flex-col items-center space-y-1">
 <div class="story-ring">
 <div class="w-16 h-16 rounded-full bg-white p-1 flex items-center justify-center">
 <div class="w-full h-full rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Story" class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 <span class="text-xs">tom_fitness</span>
 </div>
 </div>
 </div>
<!-- Posts -->
 <div class="space-y-6">
 <!-- Post 1 -->
 <div class="bg-white border border-gray-200 rounded-lg">
 <!-- Post Header -->
 <div class="flex items-center justify-between p-3">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <span class="font-semibold">jessica_22</span>
 </div>
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-ellipsis-h"></i>
 </button>
 </div>
<!-- Post Image -->
 <div class="w-full aspect-square overflow-hidden">
 <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Post" class="w-full h-full object-cover post-image">
 </div>
<!-- Post Actions -->
 <div class="p-3">
 <div class="flex justify-between mb-2">
 <div class="flex space-x-4">
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-heart text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-comment text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-paper-plane text-xl"></i>
 </button>
 </div>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-bookmark text-xl"></i>
 </button>
 </div>
<!-- Likes -->
 <div class="mb-1">
 <span class="font-semibold">1,234 likes</span>
 </div>
<!-- Caption -->
 <div class="mb-1">
 <span class="font-semibold">jessica_22</span>
 <span class="ml-2">Enjoying the beautiful sunset at the beach today! 🌅 #summer #vacation</span>
 </div>
<!-- Comments -->
 <div class="text-gray-500 mb-1">
 <button class="hover:text-gray-700">View all 42 comments</button>
 </div>
<!-- Time Posted -->
 <div class="text-xs text-gray-400">
 <span>2 HOURS AGO</span>
 </div>
 </div>
<!-- Add Comment -->
 <div class="border-t border-gray-200 p-3">
 <div class="flex items-center">
 <input type="text" placeholder="Add a comment..." class="flex-1 focus:outline-none">
 <button class="text-blue-500 font-semibold ml-2">Post</button>
 </div>
 </div>
 </div>
<!-- Post 2 -->
 <div class="bg-white border border-gray-200 rounded-lg">
 <!-- Post Header -->
 <div class="flex items-center justify-between p-3">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <span class="font-semibold">mike_adams</span>
 </div>
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-ellipsis-h"></i>
 </button>
 </div>
<!-- Post Image -->
 <div class="w-full aspect-square overflow-hidden">
 <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Post" class="w-full h-full object-cover post-image">
 </div>
<!-- Post Actions -->
 <div class="p-3">
 <div class="flex justify-between mb-2">
 <div class="flex space-x-4">
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-heart text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-comment text-xl"></i>
 </button>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-paper-plane text-xl"></i>
 </button>
 </div>
 <button class="text-gray-700 hover:text-pink-500">
 <i class="far fa-bookmark text-xl"></i>
 </button>
 </div>
<!-- Likes -->
 <div class="mb-1">
 <span class="font-semibold">892 likes</span>
 </div>
<!-- Caption -->
 <div class="mb-1">
 <span class="font-semibold">mike_adams</span>
 <span class="ml-2">New coffee shop in town has the best latte art! ☕ #coffee #latteart</span>
 </div>
<!-- Comments -->
 <div class="text-gray-500 mb-1">
 <button class="hover:text-gray-700">View all 18 comments</button>
 </div>
<!-- Time Posted -->
 <div class="text-xs text-gray-400">
 <span>5 HOURS AGO</span>
 </div>
 </div>
<!-- Add Comment -->
 <div class="border-t border-gray-200 p-3">
 <div class="flex items-center">
 <input type="text" placeholder="Add a comment..." class="flex-1 focus:outline-none">
 <button class="text-blue-500 font-semibold ml-2">Post</button>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Create Post Modal -->
 <div id="createPostModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
 <div class="bg-white rounded-lg w-full max-w-md mx-4">
 <!-- Modal Header -->
 <div class="border-b border-gray-200 p-4 flex justify-between items-center">
 <h3 class="text-lg font-semibold">Create New Post</h3>
 <button onclick="closeCreatePostModal()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<!-- Modal Content -->
 <div class="p-4">
 <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50">
 <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
 <p class="text-gray-700 font-medium">Drag photos and videos here</p>
 <button class="mt-4 bg-gradient-to-r from-pink-500 to-yellow-400 text-white px-4 py-2 rounded-md font-medium">
 Select from computer
 </button>
 </div>
<div class="mt-4">
 <label class="block text-gray-700 mb-2">Caption</label>
 <textarea class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-pink-300" rows="3" placeholder="Write a caption..."></textarea>
 </div>
<div class="mt-4">
 <label class="block text-gray-700 mb-2">Location</label>
 <input type="text" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Add location">
 </div>
<div class="mt-4 flex space-x-2">
 <div class="flex-1">
 <label class="block text-gray-700 mb-2">Tag People</label>
 <input type="text" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Who's in this photo?">
 </div>
 <div class="flex-1">
 <label class="block text-gray-700 mb-2">Add Hashtags</label>
 <input type="text" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="#summer #vacation">
 </div>
 </div>
 </div>
<!-- Modal Footer -->
 <div class="border-t border-gray-200 p-4 flex justify-end">
 <button onclick="closeCreatePostModal()" class="px-4 py-2 text-gray-700 mr-2 rounded-md hover:bg-gray-100">
 Cancel
 </button>
 <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-yellow-400 text-white rounded-md font-medium">
 Share
 </button>
 </div>
 </div>
 </div>
<!-- Direct Messages Modal -->
 <div id="directMessagesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
 <div class="bg-white rounded-lg w-full max-w-md mx-4 h-96 flex flex-col">
 <!-- Modal Header -->
 <div class="border-b border-gray-200 p-4 flex justify-between items-center">
 <h3 class="text-lg font-semibold">Direct Messages</h3>
 <button onclick="closeDirectMessagesModal()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<!-- Messages List -->
 <div class="flex-1 overflow-y-auto custom-scrollbar">
 <div class="p-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-center">
 <span class="font-semibold">jessica_22</span>
 <span class="text-xs text-gray-500">2h ago</span>
 </div>
 <p class="text-sm text-gray-500 truncate">Hey! How are you doing?</p>
 </div>
 </div>
 </div>
<div class="p-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-center">
 <span class="font-semibold">mike_adams</span>
 <span class="text-xs text-gray-500">5h ago</span>
 </div>
 <p class="text-sm text-gray-500 truncate">Check out this new coffee place!</p>
 </div>
 </div>
 </div>
<div class="p-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-center">
 <span class="font-semibold">sarah_travels</span>
 <span class="text-xs text-gray-500">1d ago</span>
 </div>
 <p class="text-sm text-gray-500 truncate">When are we meeting for lunch?</p>
 </div>
 </div>
 </div>
<div class="p-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-center">
 <span class="font-semibold">david_photog</span>
 <span class="text-xs text-gray-500">2d ago</span>
 </div>
 <p class="text-sm text-gray-500 truncate">Got some great shots yesterday</p>
 </div>
 </div>
 </div>
<div class="p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-center">
 <span class="font-semibold">lisa_foodie</span>
 <span class="text-xs text-gray-500">3d ago</span>
 </div>
 <p class="text-sm text-gray-500 truncate">You have to try this new recipe!</p>
 </div>
 </div>
 </div>
 </div>
<!-- New Message Input -->
 <div class="border-t border-gray-200 p-4">
 <div class="flex items-center">
 <input type="text" placeholder="Send a message..." class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-pink-300">
 <button class="bg-gradient-to-r from-pink-500 to-yellow-400 text-white px-4 py-2 rounded-r-md">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<script>
 // Toggle profile dropdown
 function toggleProfileDropdown() {
 const dropdown = document.getElementById('profileDropdown');
 dropdown.classList.toggle('hidden');
 }
// Close dropdown when clicking outside
 document.addEventListener('click', function(event) {
 const dropdown = document.getElementById('profileDropdown');
 const profileButton = document.querySelector('button[onclick="toggleProfileDropdown()"]');
if (!profileButton.contains(event.target) && !dropdown.contains(event.target)) {
 dropdown.classList.add('hidden');
 }
 });
// Create Post Modal
 function openCreatePostModal() {
 const modal = document.getElementById('createPostModal');
 modal.classList.remove('hidden');
 }
function closeCreatePostModal() {
 const modal = document.getElementById('createPostModal');
 modal.classList.add('hidden');
 }
// Direct Messages Modal
 function openDirectMessagesModal() {
 const modal = document.getElementById('directMessagesModal');
 modal.classList.remove('hidden');
 }
function closeDirectMessagesModal() {
 const modal = document.getElementById('directMessagesModal');
 modal.classList.add('hidden');
 }
// Like button functionality
 document.querySelectorAll('.far.fa-heart').forEach(button => {
 button.addEventListener('click', function() {
 if (this.classList.contains('far')) {
 this.classList.remove('far');
 this.classList.add('fas', 'text-red-500');
 } else {
 this.classList.remove('fas', 'text-red-500');
 this.classList.add('far');
 }
 });
 });
// Bookmark button functionality
 document.querySelectorAll('.far.fa-bookmark').forEach(button => {
 button.addEventListener('click', function() {
 if (this.classList.contains('far')) {
 this.classList.remove('far');
 this.classList.add('fas', 'text-black');
 } else {
 this.classList.remove('fas', 'text-black');
 this.classList.add('far');
 }
 });
 });
 </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=Ashu9675/snapzy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>