Spaces:

becktech
/

socialsync-showcase-spectacle

Running

App Files Files Community

becktech commited on Oct 2, 2025

Commit

c6cc010

verified ·

1 Parent(s): e32536b

create a site for my business, here is the facebook page, I want the website to connect to the social and use it's images and update when new images are up on FB: https://www.facebook.com/profile.php?id=61576143178039&sk=about

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +284 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Socialsync Showcase Spectacle
-emoji: 📚
 colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SocialSync Showcase Spectacle
 colorFrom: gray
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,285 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>
+        .gallery-item {
+            transition: all 0.3s ease;
+        }
+        .gallery-item:hover {
+            transform: scale(1.03);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        #vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen font-sans">
+    <div id="vanta-bg"></div>
+    <!-- Navigation -->
+    <nav class="relative z-10 bg-white/80 backdrop-blur-md shadow-sm">
+        <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">SocialSync</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 py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">Your Social Content <span class="text-primary">Live</span></h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">Connecting your Facebook content directly to your website for seamless updates.</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#gallery" class="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition font-medium">View Gallery</a>
+                <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="px-6 py-3 border border-primary text-primary rounded-md hover:bg-primary/10 transition font-medium 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 py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-900">From Our <span class="text-primary">Facebook</span></h2>
+                <p class="mt-4 text-lg text-gray-600">Automatically updated whenever we post new content</p>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" 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 py-16 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
+                <div class="mb-8 lg:mb-0">
+                    <h2 class="text-3xl font-bold text-gray-900 mb-6">About <span class="text-primary">Our Business</span></h2>
+                    <p class="text-lg text-gray-600 mb-4">We're passionate about connecting with our customers through social media and providing the best experience possible.</p>
+                    <p class="text-lg text-gray-600 mb-6">Our website automatically syncs with our Facebook page to keep you updated with our latest news, products, and events.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition">Learn More</a>
+                        <a href="#" class="px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/10 transition">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 Workspace</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="relative z-10 bg-gray-900 text-gray-300 py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-white text-lg font-medium mb-4">SocialSync</h3>
+                    <p class="mb-4">Connecting your social media presence to your website seamlessly.</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 SocialSync Showcase. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0xf8fafc,
+            points: 12.00,
+            maxDistance: 22.00,
+            spacing: 18.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
+        // For demo purposes, we'll simulate fetching Facebook data
+        function loadFacebookContent() {
+            // In a real implementation, you would make an API call to:
+            // `https://graph.facebook.com/v15.0/61576143178039/photos?fields=images,link&access_token=YOUR_ACCESS_TOKEN`
+            // 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
+                const simulatedPosts = [
+                    {
+                        id: '1',
+                        images: [{ source: 'http://static.photos/business/640x360/1' }],
+                        link: 'https://www.facebook.com/profile.php?id=61576143178039'
+                    },
+                    {
+                        id: '2',
+                        images: [{ source: 'http://static.photos/business/640x360/2' }],
+                        link: 'https://www.facebook.com/profile.php?id=61576143178039'
+                    },
+                    {
+                        id: '3',
+                        images: [{ source: 'http://static.photos/business/640x360/3' }],
+                        link: 'https://www.facebook.com/profile.php?id=61576143178039'
+                    },
+                    {
+                        id: '4',
+                        images: [{ source: 'http://static.photos/business/640x360/4' }],
+                        link: 'https://www.facebook.com/profile.php?id=61576143178039'
+                    },
+                    {
+                        id: '5',
+                        images: [{ source: 'http://static.photos/business/640x360/5' }],
+                        link: 'https://www.facebook.com/profile.php?id=61576143178039'
+                    },
+                    {
+                        id: '6',
+                        images: [{ source: 'http://static.photos/business/640x360/6' }],
+                        link: 'https://www.facebook.com/profile.php?id=61576143178039'
+                    }
+                ];
+                simulatedPosts.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-48 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();
+            }, 1500);
+        }
+        // Initialize everything when the page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            loadFacebookContent();
+        });
+    </script>
+</body>
 </html>