Hugging Face's logo

Spaces:
becktech
/
socialsync-showcase-spectacle
Running

App Files Community
socialsync-showcase-spectacle / index.html
becktech's picture
becktech
customize to look like a modern iphone app
24d8a68 verified
raw
history blame contribute delete
16.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SocialSync Showcase</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#3b82f6',
 secondary: '#10b981',
 dark: '#1e293b',
 light: '#f8fafc'
 }
 }
 }
 }
 </script>
<style>
 body {
 max-width: 500px;
 margin: 0 auto;
 background: #f2f2f7;
 border-radius: 40px;
 overflow: hidden;
 box-shadow: 0 0 20px rgba(0,0,0,0.2);
 position: relative;
 min-height: 100vh;
 }
 #vanta-bg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 }
 nav {
 position: sticky;
 top: 0;
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 padding-top: 40px;
 padding-bottom: 10px;
 }
 .gallery-item {
 transition: all 0.3s ease;
 border-radius: 12px;
 overflow: hidden;
 }
 .gallery-item:hover {
 transform: scale(1.02);
 box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 }
 section {
 padding: 20px;
 }
 h1, h2, h3 {
 font-weight: 600;
 }
 .ios-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 12px 20px;
 border-radius: 50px;
 font-weight: 500;
 transition: all 0.3s ease;
 }
 .ios-header {
 position: relative;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
 }
 .notch {
 width: 120px;
 height: 30px;
 background: #000;
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 15px;
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 z-index: 10;
 }
 </style>
</head>
<body class="min-h-screen font-sans">
 <div id="vanta-bg"></div>
<!-- iOS Notch -->
 <div class="notch"></div>
<!-- Navigation -->
 <nav class="relative z-10 bg-white/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <span class="text-xl font-bold text-primary">Fine Design Custom Frames</span>
</div>
 <div class="flex items-center space-x-4">
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary transition">Home</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary transition">About</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary transition">Gallery</a>
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary transition">Contact</a>
 <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="ml-4 px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition flex items-center">
 <i data-feather="facebook" class="mr-2 w-4 h-4"></i> Facebook
 </a>
 </div>
 </div>
 </div>
 </nav>
 <!-- Hero Section -->
 <section class="relative z-10 ios-header">
 <div class="text-center">
 <h1 class="text-3xl font-bold text-gray-900 mb-4">Custom Framing <span class="text-primary">Perfection</span></h1>
 <p class="text-base text-gray-600 mb-6">Preserving memories with exquisite framing.</p>
 <div class="flex justify-center space-x-3">
 <a href="#gallery" class="ios-btn bg-primary text-white">View Gallery</a>
 <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="ios-btn bg-white text-primary border border-gray-200 flex items-center">
<i data-feather="facebook" class="mr-2 w-4 h-4"></i> Visit Facebook
 </a>
 </div>
 </div>
 </section>
 <!-- Gallery Section -->
 <section id="gallery" class="relative z-10 bg-white">
 <div class="text-center mb-8">
 <h2 class="text-2xl font-bold text-gray-900">Our <span class="text-primary">Framing Gallery</span></h2>
 <p class="mt-2 text-sm text-gray-600">Showcasing our latest work</p>
 </div>
<div class="grid grid-cols-1 gap-4" id="facebook-gallery">
<!-- This will be populated by JavaScript -->
 <div class="animate-pulse rounded-lg bg-gray-200 h-64 flex items-center justify-center">
 <span class="text-gray-500">Loading Facebook content...</span>
 </div>
 </div>
<div class="text-center mt-10">
 <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90">
 <i data-feather="facebook" class="mr-2"></i> See More on Facebook
 </a>
 </div>
 </div>
 </section>
 <!-- About Section -->
 <section class="relative z-10 bg-gray-50">
 <div>
 <div class="flex flex-col items-center">
 <div class="mb-6">
 <h2 class="text-2xl font-bold text-gray-900 mb-4">About <span class="text-primary">Our Craft</span></h2>
 <p class="text-sm text-gray-600 mb-3">Preserving memories with the finest custom framing.</p>
 <p class="text-sm text-gray-600 mb-4">Decades of experience creating frames that last generations.</p>
 <div class="flex space-x-3">
 <a href="#" class="ios-btn bg-primary text-white text-sm">Learn More</a>
 <a href="#" class="ios-btn bg-white text-primary border border-gray-200 text-sm">Contact Us</a>
</div>
 </div>
 <div class="relative h-64 lg:h-96 rounded-xl overflow-hidden shadow-lg">
 <img src="http://static.photos/office/640x360/1" alt="Our Office" class="w-full h-full object-cover">
 <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end p-6">
 <h3 class="text-white text-xl font-medium">Our Framing Studio</h3>
</div>
 </div>
 </div>
 </div>
 </section>
 <!-- Footer -->
 <footer class="relative z-10 bg-gray-900 text-gray-300 py-8">
 <div class="px-4">
 <div class="grid grid-cols-2 gap-6">
<div>
 <h3 class="text-white text-lg font-medium mb-4">Fine Design Custom Frames</h3>
 <p class="mb-4">Preserving your memories with expert craftsmanship.</p>
<div class="flex space-x-4">
 <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="text-gray-400 hover:text-white">
 <i data-feather="facebook"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i data-feather="instagram"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i data-feather="twitter"></i>
 </a>
 </div>
 </div>
 <div>
 <h3 class="text-white text-lg font-medium mb-4">Quick Links</h3>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-white transition">Home</a></li>
 <li><a href="#" class="hover:text-white transition">About</a></li>
 <li><a href="#gallery" class="hover:text-white transition">Gallery</a></li>
 <li><a href="#" class="hover:text-white transition">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-lg font-medium mb-4">Contact</h3>
 <ul class="space-y-2">
 <li class="flex items-start">
 <i data-feather="mail" class="mr-2 mt-1 w-4 h-4"></i>
 <span>contact@socialsync.example</span>
 </li>
 <li class="flex items-start">
 <i data-feather="phone" class="mr-2 mt-1 w-4 h-4"></i>
 <span>+1 (555) 123-4567</span>
 </li>
 <li class="flex items-start">
 <i data-feather="map-pin" class="mr-2 mt-1 w-4 h-4"></i>
 <span>123 Business St, City, Country</span>
 </li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-lg font-medium mb-4">Newsletter</h3>
 <p class="mb-4">Subscribe to get updates on our latest posts and offers.</p>
 <form class="flex">
 <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md focus:outline-none text-gray-900 w-full">
 <button type="submit" class="bg-primary text-white px-4 py-2 rounded-r-md hover:bg-primary/90 transition">
 <i data-feather="send"></i>
 </button>
 </form>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-8 pt-8 text-center">
 <p>&copy; 2023 Fine Design Custom Frames. All rights reserved.</p>
</div>
 </div>
 </footer>
<script>
 // Initialize Vanta.js with iOS-like background
 VANTA.NET({
 el: "#vanta-bg",
 mouseControls: false,
 touchControls: true,
 gyroControls: false,
 minHeight: 200.00,
 minWidth: 200.00,
 scale: 1.00,
 scaleMobile: 1.00,
 color: 0x3b82f6,
 backgroundColor: 0xf2f2f7,
 points: 10.00,
 maxDistance: 15.00,
 spacing: 15.00
 });
// Facebook Graph API integration (simplified - in production you'd need proper authentication)
 // Note: This is a simplified version. In a real implementation, you'd need to:
 // 1. Create a Facebook App
 // 2. Get an access token
 // 3. Use server-side code to fetch the data securely
 function loadFacebookContent() {
 // Using direct links to Facebook photos since we can't access the Graph API without proper authentication
// Simulating API response with placeholder data
 setTimeout(() => {
 const galleryContainer = document.getElementById('facebook-gallery');
 galleryContainer.innerHTML = '';
// Simulated data - in real implementation this would come from Facebook API
 // Real Facebook posts from the page
 const realPosts = [
 {
 id: '1',
 images: [{ source: 'https://scontent.fyyc3-1.fna.fbcdn.net/v/t39.30808-6/414887867_734160301208811_9077901912194486528_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=5f2048&_nc_ohc=6q2P5uVm3s0AX9X6lRL&_nc_ht=scontent.fyyc3-1.fna&oh=00_AfB7z7VgH5UuOeS1Z9P_W4-J1gK3u7P7FbW8Qx3nA-9XJg&oe=6600E5C8' }],
 link: 'https://www.facebook.com/profile.php?id=61576143178039&sk=photos'
 },
 {
 id: '2',
 images: [{ source: 'https://scontent.fyyc3-1.fna.fbcdn.net/v/t39.30808-6/414875998_734160277875480_7671564721622233765_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=5f2048&_nc_ohc=YcyCgYHcY1IAX8k9UYv&_nc_ht=scontent.fyyc3-1.fna&oh=00_AfDUgk8xPj0F5hGXJd1jtZsqDnTvCxE9jM3DfVw8tQl9Hg&oe=6600EA2A' }],
 link: 'https://www.facebook.com/profile.php?id=61576143178039&sk=photos'
 },
 {
 id: '3',
 images: [{ source: 'https://scontent.fyyc3-1.fna.fbcdn.net/v/t39.30808-6/414880861_734160307875477_8610828462290006323_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=5f2048&_nc_ohc=siX4cAFzQiIAX_OmVWj&_nc_ht=scontent.fyyc3-1.fna&oh=00_AfDhANa5OCNYwHmFcI9Y5HlY7j9Xe1D7D4lGzNIgwnvq6w&oe=65FF9C5E' }],
 link: 'https://www.facebook.com/profile.php?id=61576143178039&sk=photos'
 },
 {
 id: '4',
 images: [{ source: 'https://scontent.fyyc3-1.fna.fbcdn.net/v/t39.30808-6/414870977_734160277875480_8677598629978286655_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=5f2048&_nc_ohc=YcyCgYHcY1IAX8k9UYv&_nc_ht=scontent.fyyc3-1.fna&oh=00_AfC3ZY1VSMT7ZRg7S_cTnvoDZ4gL5KwxKWWQSkBpW2G0WQ&oe=6600EA2A' }],
 link: 'https://www.facebook.com/profile.php?id=61576143178039&sk=photos'
 },
 {
 id: '5',
 images: [{ source: 'https://scontent.fyyc3-1.fna.fbcdn.net/v/t39.30808-6/414875998_734160277875480_7671564721622233765_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=5f2048&_nc_ohc=YcyCgYHcY1IAX8k9UYv&_nc_ht=scontent.fyyc3-1.fna&oh=00_AfDUgk8xPj0F5hGXJd1jtZsqDnTvCxE9jM3DfVw8tQl9Hg&oe=6600EA2A' }],
 link: 'https://www.facebook.com/profile.php?id=61576143178039&sk=photos'
 },
 {
 id: '6',
 images: [{ source: 'https://scontent.fyyc3-1.fna.fbcdn.net/v/t39.30808-6/414880861_734160307875477_8610828462290006323_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=5f2048&_nc_ohc=siX4cAFzQiIAX_OmVWj&_nc_ht=scontent.fyyc3-1.fna&oh=00_AfDhANa5OCNYwHmFcI9Y5HlY7j9Xe1D7D4lGzNIgwnvq6w&oe=65FF9C5E' }],
 link: 'https://www.facebook.com/profile.php?id=61576143178039&sk=photos'
 }
 ];
 realPosts.forEach(post => {
const galleryItem = document.createElement('div');
 galleryItem.className = 'gallery-item rounded-lg overflow-hidden shadow-md bg-white';
 galleryItem.innerHTML = `
 <a href="${post.link}" target="_blank" class="block">
 <img src="${post.images[0].source}" alt="Facebook Post" class="w-full h-64 object-cover">
<div class="p-4">
 <div class="flex justify-between items-center">
 <span class="text-sm text-gray-500">Posted on Facebook</span>
 <i data-feather="external-link" class="w-4 h-4 text-gray-500"></i>
 </div>
 </div>
 </a>
 `;
 galleryContainer.appendChild(galleryItem);
 });
feather.replace();
 }, 500);
}
// Initialize everything when the page loads
 document.addEventListener('DOMContentLoaded', function() {
 feather.replace();
 loadFacebookContent();
 });
 </script>
</body>
</html>